@modern-js/main-doc 2.0.1 → 2.0.3-alpha.0

package/en/docusaurus-plugin-content-docs/current/tutorials/first-app/c05-loader.md

@@ -1,23 +1,23 @@
 ---
-title: 添加 Loader
+title: Add Loader
 ---
 
-上一章节中，我们学习了如何添加客户端路由。
+In the previous chapter, we learned how to add client route.
 
-这一章节中，我们将会学习如何为**路由组件添加 Loader**。
+In this chapter, we will learn how to add **Loader** to the routing component.
 
-到目前为止，我们都是通过硬编码的方式，为组件提供数据。如果要从远端获取数据，通常情况下会使用 `useEffect` 来做。但在启用 SSR 的情况下，`useEffect` 是不会在服务端执行的，所以这种 SSR 只能渲染很有限的 UI。
+By far, we have provided data to components through hardcoding. If you want to get data from the remote, you usually use `useEffect` to do it. But when SSR is enabled, `useEffect` will not be executed at the server level, so this SSR can only render a very limited UI.
 
-Modern.js 为提供了 Data Loader 的能力，支持同构的在组件中获取数据，让 SSR 的价值最大化。
+Modern.js provides the ability of Data Loader to support homogeneous data acquisition in components to maximize the value of SSR.
 
-下面我们演示如何为路由组件添加 Data Loader，并模拟远端数据获取。我们使用 faker 来 mock 需要的数据，首先安装依赖：
+Below we demonstrate how to add Data Loader to the routing component and simulate remote data acquisition. We use faker to mock the required data, first install dependency:
 
 ```bash
 pnpm add faker@5
 pnpm add @types/faker@5 -D
 ```
 
-修改 `src/routes/page.tsx`：
+Modify `src/routes/page.tsx`:
 
 ```tsx
 import { name, internet } from 'faker';
@@ -49,10 +49,10 @@ export const loader = async (): Promise<LoaderData> => {
 ```
 
 :::note
-Data Loader 并非只为 SSR 工作。在 CSR 项目中，Data Loader 也可以避免数据获取依赖 UI 渲染，解决请求瀑布流的问题。未来，Modern.js 也会为这一特性添加更多能力，例如预获取、数据缓存等。
+Data Loader doesn't just work for SSR. In CSR projects, Data Loader can also avoid data acquisition dependency UI rendering, which solves the problem of requesting dynamic grid layout. In the future, Modern.js will also add more capabilities to this feature, such as pre-fetching, data caching, etc.
 :::
 
-Modern.js 也提供了一个叫 `useLoaderData` 的 hooks API，我们修改 `src/routes/page.tsx` 导出的组件：
+Modern.js also provides a hooks API called `useLoaderData`, we modify the exported component of `src/routes/page.tsx`:
 
 ```tsx {1,4,13}
 import { useLoaderData } from '@modern-js/runtime/router';
@@ -77,6 +77,6 @@ export default Index;
 ```
 
 <!-- Todo 重新截图，SSR 内容 -->
-重新执行 `pnpm run dev`，查看 `view-source:http://localhost:8080/`，或在 devtools 的 Network 面板里查看 HTML 请求的「 Preview 」，可以看到 SSR 渲染出来的 HTML 已经包含完整的 UI：
+Re-execute `pnpm run dev`, view `view-source: http://localhost:8080/`, or view the "Preview" of the HTML request in the Network panel of devtools, you can see that the HTML rendered by SSR already contains the complete UI:
 
 ![display6](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/11/display6.png)

package/en/docusaurus-plugin-content-docs/current/tutorials/first-app/c06-model.md

@@ -1,22 +1,22 @@
 ---
-title: 添加业务模型（状态管理）
+title: Add Model
 ---
 
-上一章节中，我们把硬编码的 `mockData` 改成从 Data Loader 中加载。
+In the previous chapter, we changed the hardcoding `mockData` to load from Data Loader.
 
-这一章节中，我们会进一步实现项目的功能，例如实现 **Archive** 按钮的功能，把联系人归档。
+In this chapter, we will further implement the functions of the project, such as the implementation of the function of the **Archive** button to put the point of contact archive.
 
-因此会开始编写一些跟 UI 完全无关的业务逻辑，如果继续写在组件代码中，会产生越来越多的面条式代码。为此，我们引入了一种叫做 **业务模型（Model）** 的代码模块，将这些业务逻辑和 UI 解耦。
+Therefore, we will start to write some business logic that has nothing to do with the UI at all. If we continue to write in the component code, more and more noodle code will be generated. To this end, we introduced a code module called **Model** to decoupling these business logic and UI.
 
-:::info 注
-使用 Model API，需要先设置 [runtime.state](/docs/configure/app/runtime/state) 以启用状态管理插件。
+:::info note
+To use the Model API, you need to set runtime.state(/docs/configure/app/runtime/state) to enable the state management plugin.
 :::
 
-## 实现 Model
+## Model implementation
 
-创建一个完整的 Model 首先需要定义**状态（state）**，包括状态中数据的名称和初始值。
+To create a complete Model, you first need to define **state**, including the name and initial value of data in the state.
 
-我们使用 Model 来管理联系人列表的数据，因此定义如下数据状态：
+We use Model to manage the data of the point of contact list, so define the following data state:
 
 ```js
 const state = {
@@ -24,9 +24,9 @@ const state = {
 };
 ```
 
-使用 TS 语法，可以定义更完整的类型信息，比如 items 里每个对象都应该有 `name`、`email` 字段。为了实现归档功能，还需要创建 `archived` 字段保存这个联系人是否已被归档的状态。
+Using TS syntax, you can define more complete type information, such as items in each object should have a `name`, `email` field. In order to implement archive function, also need to create the `archived` field to hold the point of contact has been archived state.
 
-我们还需要一个字段用来访问所有已归档的联系人，可以定义 **computed** 类型的字段，对已有的数据做转换：
+We also need a field to access all archived points of contact. We can define a field of type **computed** to convert the existing data:
 
 ```js
 const computed = {
@@ -36,13 +36,13 @@ const computed = {
 };
 ```
 
-`computed` 类型字段的定义方式是函数，但使用时可以像普通字段一样通过 state 访问。
+Fields of type `computed` are defined as function, but can be accessed through state just like normal fields.
 
 :::info
-Modern.js 集成了 [Immer](https://immerjs.github.io/immer/)，能够像操作 JS 中常规的可变数据一样，去写这种状态转移的逻辑。
+Modern.js integrates [Immer](https://immerjs.github.io/immer/) and can write such state transfer logic just like normal mutable data in JS.
 :::
 
-实现 Archive 按钮时，我们需要一个 `archive` 函数，负责修改指定联系人的 `archived` 字段，我们把这种函数都叫作 **action**：
+When implementing the Archive button, we need an `archive` function, which is responsible for modifying the `archived` field of the specified contact. We call this function **action**:
 
 ```js
 const actions = {
@@ -55,11 +55,11 @@ const actions = {
 };
 ```
 
-action 函数是一种**纯函数**，确定的输入得到确定的输出（转移后的状态），不应该有任何副作用。
+An action function is a pure function, where a defined input gets a defined output (a shifted state) and should not have any side effects.
 
-函数的第一个参数是 Immer 提供的 Draft State，第二个参数是 action 被调用时传入的参数（后面会介绍怎么调用）。
+The first parameter of the function is the Draft State provided by Immer, and the second parameter is the parameter passed in when the action is called (more on how to call it later).
 
-我们尝试完整实现它们：
+We try to implement them completely:
 
 ```js
 const state = {
@@ -84,14 +84,14 @@ const actions = {
 };
 ```
 
-接下来我们把上面的代码连起来，放在同一个 Model 文件里。首先执行以下命令，创建新的文件目录：
+Next we connect the above code and put it in the same Model file. First execute the following command to create a new file directory:
 
 ```bash
 mkdir -p src/models/
 touch src/models/contacts.ts
 ```
 
-添加 `src/models/contacts.ts` 的内容：
+Add `src/models/contacts.ts`:
 
 ```tsx
 import { model } from '@modern-js/runtime/model';
@@ -127,13 +127,13 @@ export default model<State>('contacts').define({
 });
 ```
 
-我们把一个包含 state，action 等要素的 plain object 称作 **Model Spec**，Modern.js 提供了 [Model API](/docs/apis/app/runtime/model/model_)，可以根据 Model Spec 生成 **Model**。
+We call a plain object containing elements such as state, action, etc. as **Model Spec**, Modern.js provides [Model API](/docs/apis/app/runtime/model/model_), which can generate **Model** from Model Spec.
 
-## 使用 Model
+## Use Model
 
-现在我们直接使用这个 Model，把项目的逻辑补充起来。
+Now let's use this Model directly to complement the logic of the project.
 
-首先修改 `src/components/Item/index.tsx`，添加 **Archive 按钮**的 UI 和交互，内容如下：
+First modify `src/components/Item/index.tsx` and add the UI and interaction of the **Archive button**, the content is as follows:
 
 ```tsx
 import Avatar from '../Avatar';
@@ -181,7 +181,7 @@ const Item = ({
 export default Item;
 ```
 
-接下来，我们修改 `src/routes/page.tsx`，为 `<Item>` 组件传递更多参数：
+Next, we modify `src/routes/page.tsx` to pass more parameters to the `<Item>` component:
 
 ```tsx
 import { Helmet } from '@modern-js/runtime/head';
@@ -249,12 +249,12 @@ function Index() {
 export default Index;
 ```
 
-`useModel` 是 Modern.js 提供的 hooks API。可以在组件中提供 Model 中定义的 state，或通过 actions 调用 Model 中定义的 side effect 与 action，从而改变 Model 的 state。
+`useModel` is the hooks API provided by the Modern.js. You can provide the state defined in the Model in the component, or call the side effects and actions defined in the Model through actions to change the state of the Model.
 
-Model 是业务逻辑，是计算过程，本身不创建也不持有状态。只有在被组件用 hooks API 使用后，才在指定的地方创建状态。
+Model is business logic, a computational process that does not create or hold state itself. Only after being used by the component with the hooks API, the state is created in the specified place.
 
-执行 `pnpm run dev`，点击 **Archive 按钮**，可以看到页面 UI 发生了变化。
+Execute `pnpm run dev` and click the **Archive button** to see that the page UI has changed.
 
 :::note
-上述例子中，`useLoaderData` 其实在每次切换路由时都会执行。因为我们在 Data Loader 里使用了 fake 数据，每次返回的数据是不同的。但我们优先使用了 Model 中的数据，因此切换路由时数据没有发生改变。
+In the above example, `useLoaderData` is actually executed every time the route is switched. Because we used fake data in the Data Loader, the data returned each time is different. But we use the data in the Model first, so the data does not change when switching routes.
 :::

package/en/docusaurus-plugin-content-docs/current/tutorials/first-app/c07-container.md

@@ -1,19 +1,19 @@
 ---
-title: 添加容器组件
+title: Add Container
 ---
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-上一章节中，我们初步引入**业务模型**，从 UI 组件中拆分出这部分逻辑。`page.tsx` 中不再包含 UI 无关的业务逻辑实现细节，只需要使用 Model，就能实现同样的功能。
+In the previous chapter, we initially introduced the **model** to split this part of the logic from the UI component. The `page.tsx` no longer contains UI-independent business logic implementation details, and only needs to use the Model to implement the same function.
 
-这一章节中，我们要进一步利用 Model 中实现的业务逻辑，让 `page.tsx` 和 `archived/page.tsx` 获取同一份数据。并实现 Archive 按钮，点击按钮能把联系人归档，只显示在 Archives 列表里，不显示在 All 列表里。
+In this chapter, we will further use the business logic of implementation in Model to let `page.tsx` and `archived/page.tsx` get the same data. And implementation Archive button, click the button to display the point of contact archive only in the Archives list, not in the All list.
 
-## 使用完整 Model
+## Use the full Model
 
-因为两个页面需要共用同一套状态（联系人列表数据、联系人是否被归档），都需要包含加载初始数据的逻辑，因此我们需要在更上一层完成数据获取。
+Because the two pages need to share the same set of state (point of contact tabular data, point of contact is archived or not), both need to contain the logic to load the initial data, so we need to complete the data acquisition at a higher level.
 
-Modern.js 支持在 `layout.tsx` 通过 Data Loader 获取数据，我们先数据获取这部分代码移动到 `src/routes/layout.tsx` 中：
+Modern.js support obtaining data through Data Loader in `layout.tsx`, we first move the data acquisition part of the code to `src/routes/layout.tsx`:
 
 ```tsx
 import { name, internet } from 'faker';
@@ -69,7 +69,7 @@ export default function Layout() {
 }
 ```
 
-在 `src/routes/page.tsx` 中，直接使用 Model，获取数据：
+In `src/routes/page.tsx`, use Model directly to get data:
 
 ```tsx
 import { Helmet } from '@modern-js/runtime/head';
@@ -105,7 +105,7 @@ function Index() {
 export default Index;
 ```
 
-同样在 `archived/page.tsx` 中，删除原本的 `mockData` 逻辑，使用 Model 中 computed 的 `archived` 值作为数据源：
+Also in `archived/page.tsx`, delete the original `mockData` logic and use the `archived` value computed in Model as the data source:
 
 ```tsx
 import { Helmet } from '@modern-js/runtime/head';
@@ -141,21 +141,21 @@ function Index() {
 export default Index;
 ```
 
-执行 `pnpm run dev`，访问 `http://localhost:8080/`，点击 Archive 按钮后，可以看到按钮置灰：
+Execute `pnpm run dev`, visit `http://localhost:8080/`, click the Archive button, you can see the button grey out:
 
 ![display](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/tutorials/c07-contacts-all.png)
 
-接下来点击顶部导航，切换到 Archives 列表，可以发现刚才 **Archive** 的联系人已经出现在列表当中：
+Next, click the top navigation and switch to the Archives list. You can find that the point of contact of **Archive** just now has appeared in the list:
 
 ![display](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/tutorials/c07-contacts-archives.png)
 
-## 抽离容器组件
+## Withdraw container components
 
-前面章节中，我们把项目中的业务逻辑拆分成了两个 layer，一个是**视图组件**，另一个是**业务模块**。前者负责 UI 展示、交互等，后者负责实现 UI 无关的业务逻辑，专门管理状态。
+In the previous chapters, we split the business logic in the project into two layers, one is the **view component**, and the other is the **module**. The former is responsible for UI display, interaction, etc., and the latter is responsible for the implementation of UI-independent business logic, which specializes in managing state.
 
-像 `src/routes/page.tsx` 和 `src/routes/archives/page.tsx` 这样使用了 `useModel` API 的组件，负责把 View 和 Model 这两个 layer 连接起来，类似传统 MVC 架构中 Controller 的角色，在 Modern.js 里我们沿用习惯，把它们称作**容器组件（Container）**。
+Like `src/routes/page.tsx` and `src/routes/archives/page.tsx` use the component of the `useModel` API, which is responsible for linking the two layers of View and Model, similar to the role of the Controller in the traditional MVC architecture. In the Modern.js, we follow the habit and call them **Container**.
 
-容器组件推荐放在专门的 `containers/` 目录里，我们执行以下命令，创建新的文件：
+The container component is recommended to be placed in a special `containers/` directory. We execute the following command to create a new file:
 
 <Tabs>
 <TabItem value="macOS" label="macOS" default>
@@ -176,7 +176,7 @@ ni src/containers/Contacts.tsx
 </TabItem>
 </Tabs>
 
-我们将原本两个 `page.tsx` 中公共的部分抽离出来，`src/containers/Contacts.tsx` 的代码如下：
+We extracted the common part of the original two `page.tsx`, and the code of `src/containers/Contacts.tsx` is as follows:
 
 ```tsx
 import { Helmet } from "@modern-js/runtime/head";
@@ -222,7 +222,7 @@ function Contacts({
 export default Contacts;
 ```
 
-修改 `src/routes/page.tsx` 和 `src/routes/archives/page.tsx` 的代码：
+Modify the code for `src/routes/page.tsx` and `src/routes/archives/page.tsx`:
 
 ```tsx title="src/routes/page.tsx"
 import Contacts from '../containers/Contacts';
@@ -244,7 +244,7 @@ function Index() {
 export default Index;
 ```
 
-重构完成，现在的项目结构是：
+The refactoring is complete, and the current project structure is:
 
 ```md
 .
@@ -275,9 +275,8 @@ export default Index;
 └── tsconfig.json
 ```
 
-`components/` 里的**视图组件**，都是目录形式，如 `Avatar/index.tsx`。而 `containers/` 里的**容器组件**，都是单文件形式，如 `contacts.tsx`。**这是我们推荐的一种最佳实践**。
+The **view components** in `components/` dir are in the form of directories, such as `Avatar/index.tsx`. And the **container components** in `containers/` dir are in the form of single files, such as `contacts.tsx`. **This is a best practice we recommend**.
 
-在​ [添加 UI 组件（Component）](./c02-component.md) 章节提到过，视图组件用目录形式，是因为视图组件负责实现 UI 展示和交互细节，可以演变的复杂。用目录形式，可以方便增加子文件，包括专用的资源（图片等）、专用子组件、CSS 文件等。在这个目录内部可以随意重构，只考虑最小局部。
-
-而容器组件只负责连接，是一个胶水层，复杂的业务逻辑和实现细节都交给 View 层和 Model 层去实现。容器组件自己应该保持简单清晰，不应该包含复杂实现细节，所以不应该有内部结构。采用单文件形式不但更简洁，也能起到约束作用，提醒开发者不要把容器组件写复杂。
+As mentioned in the chapter [Add UI component](./c02-component.md), the view component is in the form of a directory, because the view component is responsible for the implementation of UI display and interaction details, and can evolve in complexity. In the form of a directory, it is convenient to add sub-files, including dedicated resources (pictures, etc.), dedicated sub-components, CSS files, etc. You can reconstruct at will within this directory, considering only the smallest parts.
 
+The container component is only responsible for linkage and is a glue layer. The sophisticated business logic and implementation details are handed over to the View layer and the Model layer for implementation. The container component itself should be kept simple and clear, and should not contain complex implementation details, so there should be no internal structure. The single-file form is not only more concise, but also acts as a constraint, reminding developers not to write complicated container components.

package/en/docusaurus-plugin-content-docs/current/tutorials/first-app/c08-entries.md

@@ -1,24 +1,24 @@
 ---
-title: 添加应用入口
+title: Add Application Entry
 ---
 
-上一个章节中，我们基本完成了联系人列表应用的开发，介绍了 Modern.js 中部分功能的用法，以及推荐的最佳实践。
+In the last chapter, we basically completed the development of the point of contact list application, introduced the usage of some functions in the Modern.js, and recommended best practices.
 
-这一章节中，我们将介绍如何为应用添加新的入口。
+In this chapter, we will describe how to add a new entry to the application.
 
-## 新建入口
+## New entry
 
-一个完整的项目可能需要多个入口，Modern.js 支持自动创建新入口，前面的章节中提到过，`pnpm run new` 可以启用可选功能。
+A complete project may require multiple entries, Modern.js supports the automatic creation of new entries, as mentioned in the previous section, `pnpm run new` can enable optional features.
 
-我们也可以通过它来创建新的工程元素，在项目根目录下执行 `pnpm run new`：
+We can also use it to create new project elements and execute `pnpm run new` in the project root directory:
 
 ```bash
-? 请选择你想要的操作 创建工程元素
-? 创建工程元素 新建「应用入口」
-? 请填写入口名称 (entry) landing-page
+? Action Create project element
+? Create project element New "entry"
+? Entry name (entry) landing-page
 ```
 
-创建完成，项目会变成这样：
+When created, the project will look like this:
 
 ```md
 .
@@ -55,44 +55,43 @@ title: 添加应用入口
 
 ```
 
-可以看到联系人列表应用的文件，都被自动重构到 `src/myapp/` 里。
+You can see that the files of the contact list application are automatically refactored into `src/myapp/`.
 
-同时新建了一个 `src/landing-page/`，里面同样有 `routes/*`（`pnpm run new` 命令只做了这些事，所以你也可以很容易的手动创建新入口或修改入口）
+At the same time, a new `src/landing-page/` is created, which also has `routes/*` (the `pnpm run new` command only does these things, so you can also easily create new entries or modify entries manually).
 
-执行 `pnpm run dev`，显示：
+Execute `pnpm run dev` to display:
 
 ![design](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/tutorials/c08-entries-myapp.png)
 
-访问 `http://localhost:8080/`，可以像之前一样看到应用程序。
+Access `http://localhost:8080/` to see the application as before.
 
-访问 `http://localhost:8080/landing-page`，可以看到刚创建的新入口 `landing-page` 的页面（Modern.js 自动生成的默认页面）。
+Visit `http://localhost:8080/landing-page` to see the landing-page for the new entry you just created (Modern.js automatically generated default page).
 
-Modern.js 框架的设计原则之一是【[约定优于配置（Convention over Configuration）](https://en.wikipedia.org/wiki/Convention_over_configuration)】，多数情况下可以按约定直接写代码，不需要做任何配置，这里 `src/` 中的目录结构就是一种约定：
+One of the design principles of the Modern.js framework is [[Convention over Configuration](https://en.wikipedia.org/wiki/Convention_over_configuration) ]. In most cases, you can write code directly by convention without any configuration. The directory structure in `src/` is a convention:
 
-`src/myapp/` 和 `src/landing-page/` 被自动识别为两个应用入口：myapp 和 landing-page。
+`src/myapp/` and `src/landing-page/` are automatically identified as two application portals: myapp and landing-page.
 
-其中 `src/myapp/` 的目录名跟项目名（`package.json` 里的 `name`）一致，会被认为是项目**主入口**，项目 URL 的根路径（开发环境里默认是 `http://localhost:8080/`）会自动指向主入口。
+The directory name of `src/myapp/` is the same as the project name (`name` in `package.json`), which will be considered as the main entry of the project, and the root path of the project URL (the default in the development environment is `http://localhost:8080/`) will automatically point to the main entry.
 
-其他入口的 URL，是在根路径后追加入口名，比如 `http://localhost:8080/landing-page`。
+The URL of other entries is to append the entry name after the root path, such as `http://localhost:8080/landing-page`.
 
-接下来，我们把 `src/myapp/` 重命名为 `src/contacts/`：
+Next, we rename `src/myapp/` to `src/contacts/`:
 
 ```bash
 mv src/myapp src/contacts
 ```
 
-再次执行 `pnpm run dev`，结果变成：
+Execute `pnpm run dev` again, the result becomes:
 
 ![design](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/tutorials/c08-entries-contacts.png)
 
-现在不再有主入口，联系人列表现在是一个普通入口，需要用 `http://localhost:8080/contacts` 访问。
+There is no longer a main entry, the point of contact list is now a normal entry that needs to be accessed with `http://localhost:8080/contacts`.
 
+## Modify the configuration by entry
 
-## 按入口修改配置
+In the Modern.js configuration file, we can write our own code to control the configuration of the project.
 
-我们可以在 Modern.js 配置文件里，自己写代码来控制项目的配置。
-
-现在，修改 `modern.config.ts` 里面添加内容：
+Now, modify the `modern.config.ts` to add something:
 
 ```typescript
 import AppToolsPlugin, { defineConfig } from '@modern-js/app-tools';
@@ -114,11 +113,11 @@ export default defineConfig({
 });
 ```
 
-执行 `pnpm run dev`，再用浏览器打开 `view-source:http://localhost:8080/landing-page`，可以看到 `landing-page` 网页内容是通过 js 动态加载的，且此页面的 SSR 功能被关闭。
+Execute `pnpm run dev`, and then open `view-source: http://localhost:8080/landing-page` with the browser, you can see that the content of the `landing-page` web page is dynamically loaded through js, and the SSR function of this page is turned off.
 
-如果注释掉 `ssrByEntries` 和它的值，landing-page 的 SSR 功能就恢复开启了。
+If `ssrByEntries` and its value are annotated, the SSR function of landing-page is restored.
 
-还有一些时候，需要一些更复杂的逻辑来做设置，比如需要 JS 变量、表达式、导入模块等，例如在只在开发环境里开启 SSR：
+Other times, you need some more sophisticated logic to do the setup, such as JS variables, expressions, import modules, etc., for example, only in the development environment to enable SSR:
 
 ```js
 export default defineConfig({
@@ -130,8 +129,8 @@ export default defineConfig({
 };
 ```
 
-到底为止，我们的联系人列表应用的雏形就基本完成了 👏👏👏。
+So far, the prototype of our point of contact list application is almost complete 👏👏👏.
 
-## 下一步
+## Next step
 
-接下来你可以通过了解[指南](/docs/guides/get-started/quick-start)、[配置](/docs/configure/app/usage) 等更多教程，进一步完善你的应用。
+Then you can further refine your application by following more tutorials like [Guides](/docs/guides/get-started/quick-start), [configuration](/docs/configure/app/usage), and more.

package/en/docusaurus-plugin-content-docs/current.json

@@ -7,53 +7,9 @@
     "message": "Basic",
     "description": "The label for category 基础 in sidebar tutorialsSidebar"
   },
-  "sidebar.tutorialsSidebar.category.创建第一个应用": {
-    "message": "创建第一个应用",
-    "description": "The label for category 创建第一个应用 in sidebar tutorialsSidebar"
-  },
-  "sidebar.tutorialsSidebar.category.1: 手动创建应用工程": {
-    "message": "1: 手动创建应用工程",
-    "description": "The label for category 1: 手动创建应用工程 in sidebar tutorialsSidebar"
-  },
-  "sidebar.tutorialsSidebar.category.2: 自动创建应用工程": {
-    "message": "2: 自动创建应用工程",
-    "description": "The label for category 2: 自动创建应用工程 in sidebar tutorialsSidebar"
-  },
-  "sidebar.tutorialsSidebar.category.3: 确认编程环境": {
-    "message": "3: 确认编程环境",
-    "description": "The label for category 3: 确认编程环境 in sidebar tutorialsSidebar"
-  },
-  "sidebar.tutorialsSidebar.category.4: 写 JS 代码": {
-    "message": "4: 写 JS 代码",
-    "description": "The label for category 4: 写 JS 代码 in sidebar tutorialsSidebar"
-  },
-  "sidebar.tutorialsSidebar.category.5: 使用 UI 组件": {
-    "message": "5: 使用 UI 组件",
-    "description": "The label for category 5: 使用 UI 组件 in sidebar tutorialsSidebar"
-  },
-  "sidebar.tutorialsSidebar.category.6: 添加 UI 组件": {
-    "message": "6: 添加 UI 组件",
-    "description": "The label for category 6: 添加 UI 组件 in sidebar tutorialsSidebar"
-  },
-  "sidebar.tutorialsSidebar.category.7: 添加应用入口": {
-    "message": "7: 添加应用入口",
-    "description": "The label for category 7: 添加应用入口 in sidebar tutorialsSidebar"
-  },
-  "sidebar.tutorialsSidebar.category.8: 添加客户端路由": {
-    "message": "8: 添加客户端路由",
-    "description": "The label for category 8: 添加客户端路由 in sidebar tutorialsSidebar"
-  },
-  "sidebar.tutorialsSidebar.category.9: 添加 BFF": {
-    "message": "9: 添加 BFF",
-    "description": "The label for category 9: 添加 BFF in sidebar tutorialsSidebar"
-  },
-  "sidebar.tutorialsSidebar.category.10: 添加业务模型": {
-    "message": "10: 添加业务模型",
-    "description": "The label for category 10: 添加业务模型 in sidebar tutorialsSidebar"
-  },
-  "sidebar.tutorialsSidebar.category.11: 添加容器组件": {
-    "message": "11: 添加容器组件",
-    "description": "The label for category 11: 添加容器组件 in sidebar tutorialsSidebar"
+  "sidebar.tutorialsSidebar.category.联系人列表应用": {
+    "message": "First App",
+    "description": "The label for category 联系人列表应用 in sidebar tutorialsSidebar"
   },
   "sidebar.guidesSidebar.category.开始": {
     "message": "Start",

package/package.json

@@ -11,20 +11,20 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.0.1",
+  "version": "2.0.3-alpha.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.0.1"
+    "@modern-js/builder-doc": "^2.0.2"
   },
   "devDependencies": {
+    "@modern-js/builder-doc": "2.0.2",
     "ts-node": "^10",
     "fs-extra": "^10",
     "@types/node": "^16",
-    "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "2.0.1"
+    "@types/fs-extra": "^9"
   },
   "scripts": {
     "build": "npx ts-node ./scripts/sync.ts"

package/zh/components/enable-bff.md

@@ -7,9 +7,9 @@ import TabItem from '@theme/TabItem';
 <Tabs>
   <TabItem value="express" label="Express.js" default>
 
-```ts title="edenx.config.ts"
-import ExpressPlugin from '@edenx/plugin-express';
-import BffPlugin from '@edenx/plugin-bff';
+```ts title="modern.config.ts"
+import ExpressPlugin from '@modern-js/plugin-express';
+import BffPlugin from '@modern-js/plugin-bff';
 
 export default defineConfig({
   plugins: [
@@ -21,9 +21,9 @@ export default defineConfig({
   </TabItem>
   <TabItem value="koa" label="Koa.js">
 
-```ts title="edenx.config.ts"
-import KoaPlugin from '@edenx/plugin-koa';
-import BffPlugin from '@edenx/plugin-bff';
+```ts title="modern.config.ts"
+import KoaPlugin from '@modern-js/plugin-koa';
+import BffPlugin from '@modern-js/plugin-bff';
 
 export default defineConfig({
   plugins: [

package/zh/configure/app/runtime/intro.md

@@ -38,6 +38,28 @@ export default defineConfig({
 当 runtime 配置中存在函数时，只能使用该方式进行配置。
 :::
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+  <TabItem value="layout" label="约定式路由" default>
+
+```tsx title="src/routes/layout.tsx"
+import type { AppConfig } from '@modern-js/runtime';
+
+export const config = (): AppConfig => {
+  return {
+    router: {
+      supportHtml5History: false
+    }
+  }
+};
+```
+
+  </TabItem>
+
+  <TabItem value="app" label="自控路由">
+
 ```ts title="src/App.tsx"
 import { defineConfig } from '@modern-js/runtime';
 
@@ -54,6 +76,11 @@ defineConfig(App, {
 export default App;
 ```
 
+  </TabItem>
+</Tabs>
+
+
+
 :::info
 使用运行时配置，可以解决 Runtime 插件配置需要在运行时才能获取到具体内容问题。