docs: correct the link path (#540)

* docs: correct the links * docs: correct links and add gh-pages * build: add deploy script * fix: rename models to model
DTStack · Dec 9, 2021 · 8605f75 · 8605f75
1 parent c19c2dd
commit 8605f75
Show file tree

Hide file tree

Showing 27 changed files with 144 additions and 74 deletions.
diff --git a/README-zhCN.md b/README-zhCN.md
@@ -21,7 +21,7 @@
 
 Molecule 是一款受 **VSCode** 启发，使用 **React.js** 构建的 **Web IDE UI** 框架。我们设计了类似 VSCode 的**扩展**（Extension)机制，可以帮助我们使用 React 组件快速完成对 Workbench 的自定义。Molecule 与 **React** 项目集成非常方便，我们已经在 [DTStack](https://www.dtstack.com/) 多个产品、项目中使用。
 
-[在线预览](https://github.com/DTStack/molecule-examples)
+[在线预览](https://dtstack.github.io/molecule-examples/#/)
 
 ## 核心功能
 
@@ -59,15 +59,14 @@ const App = () => (
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-`extension` 为 Workbench 应用的扩展入口，如何编写扩展，请参考[快速开始](./website/docs/guides/the-first-extension.md)。
+`extension` 为 Workbench 应用的扩展入口，如何编写扩展，请参考[快速开始](https://dtstack.github.io/molecule/docs/quick-start)。
 
 ## 文档
 
--   [简介](./website/docs/introduction.md)
--   [快速开始](./website/docs/introduction.md)
--   [API 文档](./website/docs/api/index.md)
--   [扩展 Workbench](./website/docs/guides/extends-workbench.md)
--   [More Docs](./website/docs).
+-   [简介](https://dtstack.github.io/molecule/docs/introduction)
+-   [快速开始](https://dtstack.github.io/molecule/docs/quick-start)
+-   [API 文档](https://dtstack.github.io/molecule/docs/api)
+-   [扩展 Workbench](https://dtstack.github.io/molecule/docs/guides/extend-workbench)
 -   [Examples](https://github.com/DTStack/molecule-examples)
 
 ## 开发

diff --git a/README.md b/README.md
@@ -19,9 +19,9 @@
 
 [中文](./README-zhCN.md) | [English](./README.md)
 
-The **Molecule** is a lightweight **Web IDE UI** Framework built with React.js，and inspired by the VSCode. We also provide the Extension APIs the seem like VSCode, to help developers extend the Workbench easily. The Molecule integrates with React.js applications is simple. It has applied to many [DTStack](https://www.dtstack.com/) inner projects.
+The **Molecule** is a lightweight **Web IDE UI** Framework built with React.js，and inspired by the VSCode. We also provide the Extension APIs the seem like VSCode, to help developers extend the Workbench easily. The Molecule integrates with React.js applications is simple. It has applied to many [DTStack](https://www.dtstack.com/) inner products.
 
-[Online Preview](https://github.com/DTStack/molecule-examples)
+[Online Preview](https://dtstack.github.io/molecule-examples/#/)
 
 ## Features
 
@@ -59,15 +59,14 @@ const App = () => (
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-The `extension` is the Extension applications entry, more details about Extension, please read the [Quick Start](./website/docs/guides/the-first-extension.md).
+The `extension` is the Extension applications entry, more details about Extension, please read the [Quick Start](https://dtstack.github.io/molecule/docs/quick-start).
 
 ## Document
 
--   [Introduction](./website/docs/introduction.md)
--   [Quick Start](./website/docs/.md)
--   [API](./website/docs/api/index.md)
--   [Extend Workbench](./website/docs/guides/extends-workbench.md)
--   [More Docs](./website/docs).
+-   [Introduction](https://dtstack.github.io/molecule/docs/introduction)
+-   [Quick Start](https://dtstack.github.io/molecule/docs/quick-start)
+-   [API](https://dtstack.github.io/molecule/docs/api)
+-   [Extend Workbench](https://dtstack.github.io/molecule/docs/guides/extend-workbench)
 -   [Examples](https://github.com/DTStack/molecule-examples)
 
 ## Development

diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
         "release": "standard-version",
         "precommit": "pretty-quick --staged && npm run check-types",
         "docs": "typedoc --entryPoints src/index.ts --out docs/api --name 'Molecule API'",
-        "web": "webpack serve --env prod --config ./build/web.js"
+        "web": "webpack serve --env prod --config ./build/web.js",
+        "deploy": "cd website && yarn build && yarn gh-pages"
     },
     "keywords": [
         "react.js",

diff --git a/src/molecule.api.ts b/src/molecule.api.ts
@@ -8,7 +8,7 @@ export * from 'mo/i18n';
 export * from 'mo/workbench';
 export * from 'mo/services';
 
-export * as models from 'mo/model';
+export * as model from 'mo/model';
 
 import {
     ILayoutService,

diff --git a/website/docs/advanced/customize-workbench.md b/website/docs/advanced/customize-workbench.md
@@ -5,7 +5,7 @@ sidebar_label: Custom Workbench
 
 Molecule 默认的 **Workbench** UI 是一个 **VSCode** 的克隆版本。但是我们在实际的开发场景中，往往不能满足我们的需求。
 
-除了内置的一些原子 [Components](/docs/api/namespaces/molecule.component) 以外，Molecule 同时提供了基本的 **Workbench、SideBar、Editor、ActivityBar、MenuBar、Panel、StatusBar** 等核心[**UI 部件**](./../guides/extend-workbench.md)，以便开发者根据自己的需求**重新组装**自己的 **Workbench**。
+除了内置的一些原子 [Components](/docs/api/namespaces/molecule.component) 以外，Molecule 同时提供了基本的 **Workbench、SideBar、Editor、ActivityBar、MenuBar、Panel、StatusBar** 等核心[**UI 部件**](../guides/extend-workbench)，以便开发者根据自己的需求**重新组装**自己的 **Workbench**。
 
 :::tip
 本文内容中的所有代码，都以 [Quick Start](../quick-start) 中的 [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo) 项目为基础演示。
@@ -139,7 +139,7 @@ Molecule 默认的是 **VSCode 布局**的 Workbench。在上图示例中，我
 
 ### 自定义 RightSideBar
 
-与 `MenuBar` 稍有不同的是，因为复用了内置的 [Sidebar](/docs/api/namespaces/molecule#sidebar-1) 组件，所以这里我们只需要传入 [ISidebarPane](/docs/api/interfaces/molecule.models.ISidebarPane) 类型的组件：
+与 `MenuBar` 稍有不同的是，因为复用了内置的 [Sidebar](/docs/api/namespaces/molecule#sidebar-1) 组件，所以这里我们只需要传入 [ISidebarPane](/docs/api/interfaces/molecule.model.ISidebarPane) 类型的组件：
 
 ```tsx title="/src/views/mySidePane.tsx"
 import React from 'react';
@@ -188,4 +188,4 @@ export const MySidePane: ISidebarPane = {
 
 ## 总结
 
-上例中使用了很多 Molecule **内置**的 UI 组件来实现自定义，然而使用[内置组件](./customize-builtin.md)是有一定上手成本的，需要开发者对内置的 UI 组件有比较好了解。我们会在后序的版本中，持续优化**文档**和**API**，以减轻上手成本，并尽可能的提供更多的使用**示例**。
+上例中使用了很多 Molecule **内置**的 UI 组件来实现自定义，然而使用[内置组件](/docs/api/namespaces/molecule.component)是有一定上手成本的，需要开发者对内置的 UI 组件有比较好了解。我们会在后序的版本中，持续优化**文档**和**API**，以减轻上手成本，并尽可能的提供更多的使用**示例**。
diff --git a/website/docs/guides/extend-builtin-ui.md b/website/docs/guides/extend-builtin-ui.md
@@ -37,7 +37,7 @@ molecule.explore.addPanel({
 });
 ```
 
-[`renderPanel`](/docs/api/interfaces/molecule.models.IExplorerPanelItem#renderpanel) 为自定义渲染的面板内容，[`toolbar`](/docs/api/interfaces/molecule.models.IExplorerPanelItem#toolbar) 为自定义的工具栏。
+[`renderPanel`](/docs/api/interfaces/molecule.model.IExplorerPanelItem#renderpanel) 为自定义渲染的面板内容，[`toolbar`](/docs/api/interfaces/molecule.model.IExplorerPanelItem#toolbar) 为自定义的工具栏。
 
 监听 Explorer 的**事件**：
 
@@ -106,7 +106,7 @@ molecule.folderTree.onSelectFile((file: IFolderTreeNodeProps) => {
 });
 ```
 
-更多关于 FolderTree 的使用，请参考 [API](./api/classes/molecule.FolderTreeService) 文档。
+更多关于 FolderTree 的使用，请参考 [API](/docs/api/classes/molecule.FolderTreeService) 文档。
 
 ## [编辑器树（EditorTree)](/docs/api/interfaces/molecule.IEditorTreeService)
 

diff --git a/website/docs/guides/extend-locales.md b/website/docs/guides/extend-locales.md
@@ -15,15 +15,15 @@ Molecule 内置了一个简单的**国际化（i18n）**方案，支持我们基
 
 ![Select Display Language](/img/guides/extend-language.png)
 
-第二种，打开使用快捷键 `Command/Ctrl + ,` 在 [Editor](./extend-workbench.md) 中打开[设置（Settings)](./extend-settings) 面板，修改 **JSON** 配置中的 `locale` 字段：
+第二种，打开使用快捷键 `Command/Ctrl + ,` 在 [Editor](./extend-workbench) 中打开[设置（Settings)](./extend-settings) 面板，修改 **JSON** 配置中的 `locale` 字段：
 
 ![Select Display Language](/img/guides/extend-language2.png)
 
-修改完成后，Molecule 会在 通知栏[（Notification）](./extend-builtin-ui.md#通知栏notification)弹出更新消息，我们选择 **Reload** 即可重新加载。
+修改完成后，Molecule 会在 通知栏[（Notification）](./extend-builtin-ui#通知栏notification)弹出更新消息，我们选择 **Reload** 即可重新加载。
 
-## [本地化服务（LocaleService） 对象](/docs/api/classes/molecule.i18n.LocaleService)
+## [本地化服务（LocaleService） 对象](/docs/api/classes/molecule.LocaleService)
 
-**LocaleService** 提供了一些基础的 [API](/docs/api/classes/molecule.i18n.LocaleService) 方法，这些方法可以帮助我们完成对国际化功能的扩展，例如：
+**LocaleService** 提供了一些基础的 [API](/docs/api/classes/molecule.LocaleService) 方法，这些方法可以帮助我们完成对国际化功能的扩展，例如：
 
 **本地化(localize)**一个对象:
 
@@ -69,13 +69,13 @@ export const ExtendLocales: IExtension = {
 };
 ```
 
-`zh-CN.json` 为 [ILocale](/docs/api/interfaces/molecule.i18n.ILocale) 类型的语言包资源文件:
+`zh-CN.json` 为 [ILocale](/docs/api/interfaces/molecule.ILocale) 类型的语言包资源文件:
 
 ```json
 {
     "id": "custom-zh-CN",
     "name": "简体中文 - 自定义",
-    "inherit": "zh-CN",
+    "inherit": "zh-CN",/docs/guides/extend-locales:
     "source": {
         "menu.file": "文件",
         "menu.newFile": "新建任务",

diff --git a/website/docs/guides/extend-quick-access.md b/website/docs/guides/extend-quick-access.md
@@ -6,7 +6,7 @@ sidebar_label: QuickAccess
 得益于 [Monaco Editor](https://microsoft.github.io/monaco-editor/) **快捷访问 （QuickAccess）** 强大的扩展能力，我们把允许开发者在 Molecule 中通过 **Extension** 的方式，去自定义**快捷访问**功能。
 
 :::info
-Molecule 中的快捷访问功能，与[快捷键](./extend-keybinding.md)功能一样, 都得依赖 `Action2` 抽象类。目前实现此功能需要引入相关的 monaco-editor 模块。
+Molecule 中的快捷访问功能，与[快捷键](./extend-keybinding)功能一样, 都得依赖 `Action2` 抽象类。目前实现此功能需要引入相关的 monaco-editor 模块。
 :::
 
 <div align="center">

diff --git a/website/docs/guides/extend-settings.md b/website/docs/guides/extend-settings.md
@@ -11,7 +11,7 @@ Molecule 内置了一些**基本设置项**，例如**编辑器（Monaco Editor
 
 上图中，显示了 `colorTheme`、`editor.renderWhitespace`、`editor.tabSize`, `editor.fontSize`、`locale` 这些配置项。用户可以根据自己的需要，在线修改。其中 `colorTheme` 和 `locale` 则需要看当前扩展的支持情况。
 
-Molecule 除了可以在线修改配置，更重要的是， 支持开发者通过[扩展](./extension.md)**自定义**配置项。
+Molecule 除了可以在线修改配置，更重要的是， 支持开发者通过[扩展](./extension)**自定义**配置项。
 
 ## 打开设置
 

diff --git a/website/docs/guides/extend-workbench.md b/website/docs/guides/extend-workbench.md
@@ -12,16 +12,16 @@ sidebar_label: Workbench
 我们把 Molecule 的工作台 UI 划分成了 [MenuBar](#菜单栏menubar)、[ActivityBar](#活动栏activitybar)、[Sidebar](#边栏sidebar),、[Editor](#编辑器editor)、[Panel](#面板panel)、[StatusBar](#状态栏statusbar) 主要**6**大模块：
 
 -   **菜单栏（MenuBar）**：主要负责 Workbench **主菜单**的显示和管理，例如常见的 **文件（File）**、**编辑（Edit）**、**选择（Selection）** 、**视图（View）**等菜单项；
--   **活动栏（ActivityBar）**：主要负责展示工作台当前的**活动项**，例如[浏览（Explorer）](./extend-builtin-ui.md#浏览面板explorer)，[搜索（Search）](./extend-builtin-ui.md#搜索面板search)等模块。需要注意的是，ActivityBar 通常需要配合其他模块一起**联动**，例如切换 ActivityBar 后，Sidebar 则需要展示相对应的面板；
--   **边栏（Sidebar）**：工作台的**左边栏**，其内置的[浏览（Explorer）](./extend-builtin-ui.md#浏览面板explorer)模块为 Workbench 重要的**导航**模块；
+-   **活动栏（ActivityBar）**：主要负责展示工作台当前的**活动项**，例如[浏览（Explorer）](./extend-builtin-ui#浏览面板explorer)，[搜索（Search）](./extend-builtin-ui#搜索面板search)等模块。需要注意的是，ActivityBar 通常需要配合其他模块一起**联动**，例如切换 ActivityBar 后，Sidebar 则需要展示相对应的面板；
+-   **边栏（Sidebar）**：工作台的**左边栏**，其内置的[浏览（Explorer）](./extend-builtin-ui#浏览面板explorer)模块为 Workbench 重要的**导航**模块；
 -   **编辑区（Editor）**：通过编辑器标签页来展示具体的工作内容，例如**编辑代码**，或者渲染自定义的操作界面。当没有打开编辑器标签页的时候，Molecule 会渲染一个**入口（Entry）**页面在这块区域。当然，这个入口页面是支持**自定义**的；
--   **面板（Panel）**：在 Editor 的下方，通常会展示例如 [问题（Problems）](./extend-builtin-ui.md#问题面板problems-), [输出（Output）](extend-builtin-ui.md#输出面板output), **终端（Terminal）**等模块；
--   **状态栏（StatusBar）**：位于整个 Workbench 的最底部, 用来展示**状态信息**。例如当前编辑器中文件的**语言(Language)**，当前光标所在**行（Ln）和列（Col）**，[通知（Notification）](./extend-builtin-ui.md#通知栏notification)等信息。
+-   **面板（Panel）**：在 Editor 的下方，通常会展示例如 [问题（Problems）](./extend-builtin-ui#问题面板problems-), [输出（Output）](extend-builtin-ui#输出面板output), **终端（Terminal）**等模块；
+-   **状态栏（StatusBar）**：位于整个 Workbench 的最底部, 用来展示**状态信息**。例如当前编辑器中文件的**语言(Language)**，当前光标所在**行（Ln）和列（Col）**，[通知（Notification）](./extend-builtin-ui#通知栏notification)等信息。
 
 :::tip
 这**6**大模块仅仅是做简单的渲染，并没有什么实际的功能，想要完成具体的业务场景，需要我们联合其他模块来实现，例如 **ActivityBar** 与 **Sidebar** **联动，FolderTree** 与 **Editor** 联动等等。
 
-另外，为了减轻 UI 开发的工作量，我们在 6 大组件的基础上，扩展来不少[**内置部件**](extend-builtin-ui.md)，详细使用情[参考](./extend-builtin-ui.md)
+另外，为了减轻 UI 开发的工作量，我们在 6 大组件的基础上，扩展来不少[**内置部件**](./extend-builtin-ui)，详细使用情[参考](./extend-builtin-ui)
 :::
 
 ## 扩展工作台（Workbench)
@@ -94,7 +94,7 @@ export const dataSourceActivityBar: IActivityBarItem = {
 
 ### [边栏（SideBar）](/docs/api/interfaces/molecule.ISidebarService)
 
-同 ActivityBar 一样，我们先在 base.tsx 中声明一个 [`ISidebarPane`](/docs/api/interfaces/molecule.models.ISidebarPane) 类型的对象 `dataSourceSidebar`，然后使用[`molecule.sidebar.add`](/docs/api/interfaces/molecule.ISidebarService#add) 方法。
+同 ActivityBar 一样，我们先在 base.tsx 中声明一个 [`ISidebarPane`](/docs/api/interfaces/molecule.model.ISidebarPane) 类型的对象 `dataSourceSidebar`，然后使用[`molecule.sidebar.add`](/docs/api/interfaces/molecule.ISidebarService#add) 方法。
 
 ```ts title="src/extensions/dataSource/base.tsx"
 import DataSourceView from '../../views/dataSource/dataSourceSidebar';
@@ -120,7 +120,7 @@ export const dataSourceSidebar: ISidebarPane = {
 
 ### [编辑器（Editor）](/docs/api/interfaces/molecule.IEditorService)
 
-在上图中，我们在 Editor 中打开了一个名叫 **Create Data Source** 的标签，而标签内容则是一个**添加数据库**的**表单（Form)**。同样的，我们首先声明一个 [IEditorTab](/docs/api/interfaces/molecule.models.IEditorTab) 的对象，然后利用 [molecule.editor.open](/docs/api/interfaces/molecule.IEditorService#open) 方法打开：
+在上图中，我们在 Editor 中打开了一个名叫 **Create Data Source** 的标签，而标签内容则是一个**添加数据库**的**表单（Form)**。同样的，我们首先声明一个 [IEditorTab](/docs/api/interfaces/molecule.model.IEditorTab) 的对象，然后利用 [molecule.editor.open](/docs/api/interfaces/molecule.IEditorService#open) 方法打开：
 
 ```ts title="src/extensions/dataSource/base.tsx"
 import CreateDataSourceView from '../../views/dataSource/createDataSource';
@@ -151,13 +151,13 @@ molecule.editor.open({
 });
 ```
 
-这里并没有设置 `renderPane` 函数。关于打开编程语言的例子，可以参考一下[第一个扩展](../the-first-extension.md)这个示例。
+这里并没有设置 `renderPane` 函数。关于打开编程语言的例子，可以参考一下[第一个扩展](../the-first-extension)这个示例。
 
 ### [面板（Panel）](/docs/api/interfaces/molecule.IPanelService)
 
 关于[面板（Panel）](/docs/api/interfaces/molecule.IPanelService)，我们以常见的 **Terminal** 面板为示例。为了区分上面的**数据库**示例，这里我们在 `extensions` 下新建了一个叫 `terminal` 的文件夹。
 
-首先，我们先声明一个 [IPanelItem](/docs/api/interfaces/molecule.models.IEditorTab) 类型的对象 `terminalPanel`：
+首先，我们先声明一个 [IPanelItem](/docs/api/interfaces/molecule.model.IEditorTab) 类型的对象 `terminalPanel`：
 
 ```ts title="src/extensions/terminal/base.tsx"
 import { localize } from '@dtinsight/molecule/esm/i18n/localize';
@@ -205,7 +205,7 @@ export class TerminalExtension implements IExtension {
 
 ### [状态栏（StatusBar）](/docs/api/interfaces/molecule.IStatusBarService)
 
-[状态栏（StatusBar）](/docs/api/interfaces/molecule.IStatusBarService) 整个是围绕 [IStatusBarItem](/docs/api/interfaces/molecule.models.IStatusBarItem) 类型的对象来进行**增加、更新、删除**等基本操作的，例如：
+[状态栏（StatusBar）](/docs/api/interfaces/molecule.IStatusBarService) 整个是围绕 [IStatusBarItem](/docs/api/interfaces/molecule.model.IStatusBarItem) 类型的对象来进行**增加、更新、删除**等基本操作的，例如：
 
 ```ts
 import { IStatusBarItem, Float } from '@dtinsight/molecule/esm/model';
@@ -232,7 +232,7 @@ molecule.statusBar.remove(languageBar.id, Float.right);
 
 代码中的 `Float.left/Float.right` 用来表示显示在状态栏的**左侧**或者**右侧**。
 
-如果我们想要 **自定义 StatusBar** 的渲染内容，我们可以使用 `render` 自定义函数，例如自定义[**图标**](./icons.md)：
+如果我们想要 **自定义 StatusBar** 的渲染内容，我们可以使用 `render` 自定义函数，例如自定义[**图标**](./icons)：
 
 ```ts
 import { IStatusBarItem, Float } from '@dtinsight/molecule/esm/model';

diff --git a/website/docs/guides/extension.md b/website/docs/guides/extension.md
@@ -98,4 +98,4 @@ export default App;
 [inactive-url]: /docs/api/interfaces/molecule.IExtensionService#inactive
 [service-url]: /docs/api/classes/molecule.ExtensionService
 [cmd-url]: /docs/api/classes/molecule.ExtensionService#executecommand
-[ext-url]: /docs/api/interfaces/molecule.models.IExtension
+[ext-url]: /docs/api/interfaces/molecule.model.IExtension
diff --git a/website/docs/introduction.md b/website/docs/introduction.md
@@ -62,7 +62,7 @@ const App = () => (
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-The `extension` is the Extension applications entry, more details about Extension, please read the [Quick Start](./quickStart.md).
+The `extension` is the Extension applications entry, more details about Extension, please read the [Quick Start](./quick-start.md).
 
 ## Development