@modern-js/main-doc 0.0.0-next-1678680921211 → 0.0.0-next-1678718202017

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-1678680921211
+## 0.0.0-next-1678718202017
 
 ### Patch Changes
 
-- @modern-js/builder-doc@0.0.0-next-1678680921211
+- @modern-js/builder-doc@0.0.0-next-1678718202017
 
 ## 2.8.0
 

package/en/apis/app/hooks/api/framework/lambda.mdx

@@ -47,9 +47,9 @@ the `$BASENAME` can be configured in `modern.config.js`，the default value is `
 By default, all files in the `api/` will be parsed as BFF function. but we also set a allow list, and these files will not be parsed:
 
 - file name start with `_`, for example: `_utils.ts`.
-- files in directory that name start with `_`, for example：`_utils/index.ts`、`_utils/cp.ts`.
-- test files, for example：`foo.test.ts`.
-- TypeScript define files, for example：`hello.d.ts`.
+- files in directory that name start with `_`, for example: `_utils/index.ts`、`_utils/cp.ts`.
+- test files, for example: `foo.test.ts`.
+- TypeScript define files, for example: `hello.d.ts`.
 - files in `node_module`.
 
 ## Define Function

package/en/apis/app/hooks/api/functions/api.mdx

@@ -47,9 +47,9 @@ the `$BASENAME` can be configured in `modern.config.js`，the default value is `
 By default, all files in the `api/` will be parsed as BFF function. but we also set a allow list, and these files will not be parsed:
 
 - file name start with `_`, for example: `_utils.ts`.
-- files in directory that name start with `_`, for example：`_utils/index.ts`、`_utils/cp.ts`.
-- test files, for example：`foo.test.ts`.
-- TypeScript define files, for example：`hello.d.ts`.
+- files in directory that name start with `_`, for example: `_utils/index.ts`、`_utils/cp.ts`.
+- test files, for example: `foo.test.ts`.
+- TypeScript define files, for example: `hello.d.ts`.
 - files in `node_module`.
 
 ## Define Function

package/en/apis/app/hooks/src/routes.mdx

@@ -8,7 +8,7 @@ The entry identifier when the application uses file system-based routing.
 
 When the project structure is of type `Routes directory entry`, the files in the `src/routes` directory are parsed to get the client-side routing configuration. See [Routing by convention](/guides/basic-features/routes) for more details on usage.
 
-Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as a route to the application：
+Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as a route to the application:
 
 ```bash {3}
 .
@@ -22,7 +22,7 @@ Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as a route
 
 ## basic example
 
-The directory names in the `routes` directory will be used as a mapping of the route url, where `layout.tsx` is used as the layout component and `page.tsx` as the content component, which is a leaf node of the whole route, for example the following directory structure：
+The directory names in the `routes` directory will be used as a mapping of the route url, where `layout.tsx` is used as the layout component and `page.tsx` as the content component, which is a leaf node of the whole route, for example the following directory structure:
 
 ```bash
 .

package/en/apis/app/hooks/src/server.mdx

@@ -4,7 +4,7 @@ sidebar_position: 8
 ---
 # *.[server|node].[tj]sx
 
-Used in application projects to place server side code, it generally has the following two functions：
+Used in application projects to place server side code, it generally has the following two functions:
 
 1. When `*.tsx` and `*. [server|node].tsx` coexist, rendering on the server side will give preference to the `*. [server|node].tsx` file instead of the `*.tsx` file.
 

package/en/apis/app/runtime/router/router.mdx

@@ -208,7 +208,7 @@ interface RouteObject {
 
 `Route` represents the route information. A `Route` object couples URL segments to components, data loading and data mutations.
 
-`Route` can be used as a plain object, passing to the router creation functions：
+`Route` can be used as a plain object, passing to the router creation functions:
 
 ```ts
 const router = createBrowserRouter([

package/en/apis/app/runtime/web-server/hook.mdx

@@ -92,7 +92,7 @@ type AfterRenderContext = {
   - `request`: provides a series of methods to get request info.
   - `router`: provides methods on routing.
   - `template`: provides methods on content.
-- `next`: call next listener（not affect the server process, only current hook）.
+- `next`: call next listener (not affect the server process, only current hook).
 
 ## Example
 

package/en/apis/app/runtime/web-server/middleware.mdx

@@ -81,7 +81,7 @@ type MiddlewareContext = {
   - `response`: provides a series of methods to process the response.
   - `request`: provides a series of methods to get request info.
   - `source`: provides Node.js native `req` and `res` object.
-- `next`: call next listener（not affect the server process, only current hook）.
+- `next`: call next listener (not affect the server process, only current hook).
 
 :::warning
 The execution of the `next` function does not affect built-in processes, only controls whether the next middleware executes. Rendering processes are interrupted only when the response is written.

package/en/components/enable-bff.mdx

@@ -1,5 +1,5 @@
 1. Execute `pnpm new` and select "Enable BFF"
-2. Add the following code to `modern.config.[tj]s` according to the chosen runtime framework：
+2. Add the following code to `modern.config.[tj]s` according to the chosen runtime framework:
 
 import { Tabs, Tab as TabItem } from "@theme";
 

package/en/components/init-app.mdx

@@ -1,9 +1,9 @@
 Modern.js generator will provide an interactive Q & A interface, initialization items according to the result, according to the default selection:
 
 ```bash
-? Please select the solution you want to create: Web App Solution
+? Please select the solution you want to create: Web App
 ? Development Language: TS
-? Package Management Tool: pnpm
+? Package Manager: pnpm
 ```
 
 After create the project, Modern.js automatically installs dependency and creates a git repository.
@@ -12,7 +12,7 @@ After create the project, Modern.js automatically installs dependency and create
 [INFO] dependencies are automatically installed
 [INFO] git repository has been automatically created
 [INFO] Success！
-You can run the following command in the directory of the new project：
+You can run the following command in the directory of the new project:
 pnpm run dev          # Run and debug the project according to the requirements of the development environment
 pnpm run build        # Build the project according to the requirements of the product environment
 pnpm run serve        # Run the project according to the requirements of the product environment

package/en/components/init-rspack-app.mdx

@@ -1,7 +1,7 @@
 ```bash
 $ npx @modern-js/create myapp
-? Please select the solution you want to create: Web App Solution
+? Please select the solution you want to create: Web App
 ? Development Language: TS
-? Package Management Tool: pnpm
-? Build Tools: Rspack
+? Package Manager: pnpm
+? Bundler: Rspack
 ```

package/en/configure/app/output/ssg.mdx

@@ -61,7 +61,7 @@ Also using the above configuration, after executing `pnpm run build`, only the e
 
 `output.ssg` can also be configured according to the entries, and the rules that the configuration takes effect are also determined by the entries routing method.
 
-例如以下目录结构：
+For example the following directory structure:
 
 ```bash
 .

package/en/configure/app/server/public-routes.mdx

@@ -9,7 +9,7 @@ sidebar_label: publicRoutes
 
 This configuration option only applies to server-level routing, and you can customize the access route of resources in `config/public/`.
 
-The `key` of the object is the relative file path of the current application (not used `./`）, value can be `string`.
+The `key` of the object is the relative file path of the current application (not used `./`), value can be `string`.
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/en/configure/app/server/ssr.mdx

@@ -25,8 +25,8 @@ export default defineConfig({
 
 When the value type is `Object`, The following properties can be configured:
 
-- `mode`：`string = 'string'`, use `renderToString` rendering default. onfigure 'stream' to enable streaming rendering.
-- `forceCSR`：`boolean = false`, forced CSR rendering is disable by default. When configured as `true`, add `?csr=true` in URL to force CSR.
+- `mode`: `string = 'string'`, use `renderToString` rendering default. onfigure 'stream' to enable streaming rendering.
+- `forceCSR`: `boolean = false`, forced CSR rendering is disable by default. When configured as `true`, add `?csr=true` in URL to force CSR.
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/en/configure/app/source/design-system.mdx

@@ -646,7 +646,7 @@ const designSystem = {
 ```
 
 :::tip
-More about：<a href="https://tailwindcss.com/docs/configuration#theme" target="_blank">TailwindCSS configuration</a>.
+More about: <a href="https://tailwindcss.com/docs/configuration#theme" target="_blank">TailwindCSS configuration</a>.
 
 :::
 

package/en/configure/app/source/disable-entry-dirs.mdx

@@ -10,7 +10,7 @@ sidebar_label: disableEntryDirs
 
 By default, application entries are identified based on the'src 'directory, you can disable some directories from being identified as application entries with this option.
 
-For example, when the configuration and directory structure is as follows：
+For example, when the configuration and directory structure is as follows:
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/en/configure/app/source/entries.mdx

@@ -60,8 +60,8 @@ export default defineConfig({
 
 When the value is `Object`, the following properties can be configured:
 
-- `entry`：`string`，entry file path.
-- `disableMount`：`boolean = false`，turn off Modern.js generate entry code.
+- `entry`: `string`，entry file path.
+- `disableMount`: `boolean = false`，turn off Modern.js generate entry code.
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';

package/en/guides/advanced-features/code-split.mdx

@@ -60,7 +60,7 @@ For detail, see [React lazy](https://reactjs.org/docs/code-splitting.html#reactl
 
 ## loadable
 
-use `loadable` API，for example：
+use `loadable` API，for example:
 
 ```ts
 import loadable from '@modern-js/runtime/loadable';

package/en/guides/advanced-features/compatibility.mdx

@@ -45,7 +45,7 @@ Modern.js also provides a runtime Polyfill solution based on browser [UA](https:
 - It will not be inserted into the code, reducing the code .
 - The same browser will share a Polyfill code. Therefore, with more and more projects, the UA-based Polyfill code will be delivered faster and faster.
 
-exec `pnpm run new` to enable this features：
+exec `pnpm run new` to enable this features:
 
 ```bash
 ? Action Enable features

package/en/guides/advanced-features/eslint.mdx

@@ -4,7 +4,7 @@ sidebar_position: 8
 ---
 # ESLint
 
-**Modern.js ESLint Rules** Is the full set of **ESLint** rules，includes `@modern-js` （Lint rules for Node.js projects）and `@modern-js-app`（Lint rules for web projects）。
+**Modern.js ESLint Rules** is the full set of **ESLint** rules，includes `@modern-js` (Lint rules for Node.js projects) and `@modern-js-app` (Lint rules for web projects).
 
 More ESLint usage is described below with specific questions.
 

package/en/guides/advanced-features/rspack-start.mdx

@@ -39,8 +39,8 @@ You can enable Rspack build by running `pnpm run new`:
 
 ```bash
 $ pnpm run new
-? Action： Enable features
-? Enable features： Enable Rspack Build
+? Action: Enable features
+? Enable features: Enable Rspack Build
 ```
 
 After executing the command, enable the Rspack build in `modern.config.ts`:

package/en/guides/advanced-features/ssg.mdx

@@ -58,7 +58,7 @@ If you don't know the rules for routing, you can first check [routes](/guides/ba
 
 :::
 
-add component to `src/routes/page.tsx`：
+add component to `src/routes/page.tsx`:
 
 ```jsx title="src/routes/page.tsx"
 export default () => {
@@ -66,7 +66,7 @@ export default () => {
 };
 ```
 
-SSG is also render in Node.js. So we can enable SSR in developmenet env, expose code problems in advance and verify SSG rendering effect：
+SSG is also render in Node.js. So we can enable SSR in developmenet env, expose code problems in advance and verify SSG rendering effect:
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/en/guides/advanced-features/ssr.mdx

@@ -307,7 +307,7 @@ The streaming SSR of Modern.js is implemented based on React Router, and the mai
 
 - [`defer`](https://reactrouter.com/en/main/utils/defer): This utility allows you to defer values returned from loaders by passing promises instead of resolved values.
 - [`Await`](https://reactrouter.com/en/main/components/await): Used to render deferred values with automatic error handling.
-- [`useAsyncValue`](https://reactrouter.com/en/main/hooks/use-async-value)：Returns the resolved data from the nearest `<Await>` ancestor component.
+- [`useAsyncValue`](https://reactrouter.com/en/main/hooks/use-async-value): Returns the resolved data from the nearest `<Await>` ancestor component.
 
 
 ### Return async data

package/en/guides/advanced-features/testing.mdx

@@ -6,11 +6,11 @@ title: Testing
 
 Modern.js inherits the testing capabilities of [Jest](https://jestjs.io/) by default.
 
-First need to execute `pnpm run new` enable [unit test/integration test] features：
+First need to execute `pnpm run new` enable [unit test/integration test] features:
 
 ```
-? Action： Enable features
-? Enable features： Enable Unit Test / Integration Test
+? Action: Enable features
+? Enable features: Enable Unit Test / Integration Test
 ```
 
 After executing the above command, the `"test": "modern test"` command will be automatically generated in package.json.

package/en/guides/advanced-features/web-server.mdx

@@ -68,7 +68,7 @@ Projects should have the following best practices when using Hook:
 3. Do HTML content injection in afterRender.
 
 :::note
-For more detail, see [Hook](/apis/app/runtime/web-server/hook)。
+For more detail, see [Hook](/apis/app/runtime/web-server/hook).
 :::
 
 ### Middleware

package/en/guides/basic-features/data-fetch.mdx

@@ -73,11 +73,11 @@ When navigating on the client side, all loader functions under `/user` and `/use
 
 ### `loader` function
 
-The `loader` function has two input parameters：
+The `loader` function has two input parameters:
 
 ##### `Params`
 
-When a routing file is passed through `[]`, it is passed as a [dynamic route](/guides/basic-features/routes#dynamic-route) and the dynamic route fragment is passed as an argument to the loader function：
+When a routing file is passed through `[]`, it is passed as a [dynamic route](/guides/basic-features/routes#dynamic-route) and the dynamic route fragment is passed as an argument to the loader function:
 
 ```tsx
 // routes/user/[id]/page.loader.tsx
@@ -111,7 +111,7 @@ export default async ({ request }: LoaderFunctionArgs) => {
 
 #### Return value
 
-The return value of the `loader` function can be anything serializable, or it can be a [Fetch Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) instance：
+The return value of the `loader` function can be anything serializable, or it can be a [Fetch Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) instance:
 
 ```tsx
 const loader = async (): Promise<ProfileData> => {
@@ -138,7 +138,7 @@ const loader = async (): Promise<ProfileData> => {
 
 ### Request API
 
-Modern.js does a polyfill of the `fetch` API to initiate requests, which is consistent with the browser's `fetch` API, but can also be used on the server side to initiate requests, meaning that both CSRs and SSRs can use the unified `fetch` API for data fetching：
+Modern.js does a polyfill of the `fetch` API to initiate requests, which is consistent with the browser's `fetch` API, but can also be used on the server side to initiate requests, meaning that both CSRs and SSRs can use the unified `fetch` API for data fetching:
 
 ```tsx
 function loader() {

package/en/guides/basic-features/env-vars.mdx

@@ -16,9 +16,9 @@ The  current path prefix of resource file, which is a **read-only** environment
 
 The current execution environment and is a **read-only** environment variable whose have different values under different execution commands:
 
-- `production`：the default value when exec `modern build` or `modern serve`.
-- `test`：the default value when exec `modern test`.
-- `development`：the default value when exec `modern dev`, alse the default value of other case.
+- `production`: the default value when exec `modern build` or `modern serve`.
+- `test`: the default value when exec `modern test`.
+- `development`: the default value when exec `modern dev`, alse the default value of other case.
 
 ### MODERN_ENV
 
@@ -88,8 +88,8 @@ BAR=456
 
 The `.env` file follows the following loading rules:
 
-- `.env`：default.
-- `.env.{ MODERN_ENV | NODE_ENV }`：Setting environment variables for a specific environment overrides the same in `.env`.
+- `.env`: default.
+- `.env.{ MODERN_ENV | NODE_ENV }`: Setting environment variables for a specific environment overrides the same in `.env`.
 
 When you need to use different config according to the environment, you can define environment variables in the `.env` file corresponding to the environment name, and manually set the execution environment when starting the project.
 

package/en/guides/basic-features/html.mdx

@@ -38,15 +38,15 @@ import { Html, Body, Root, Head, Scripts } from '@modern-js/runtime/document';
 
 These components are rendered:
 
-- `Html`：Provide the ability of native HTML Elements, and render necessary components that the developer did not add by default. `<Head>` and `<Body>` must exist, and other components can be assembled by selecting appropriate components on demand.
+- `Html`: Provide the ability of native HTML Elements, and render necessary components that the developer did not add by default. `<Head>` and `<Body>` must exist, and other components can be assembled by selecting appropriate components on demand.
 
-- `Body`：Provide the ability of native Body Element, which needs to contain the `<Root>` component internally, and also supports other elements as child elements at the same time, such as adding footers.
+- `Body`: Provide the ability of native Body Element, which needs to contain the `<Root>` component internally, and also supports other elements as child elements at the same time, such as adding footers.
 
-- `Root`：React root element `<div id='root'></div>`. the default element id is `id = 'root'`, can set `props.rootId` to change the id.Child components can be added, and will also be rendered into HTML templates, which will be overwritten when React rendering is complete, generally used to implement global Loading.
+- `Root`: React root element `<div id='root'></div>`. the default element id is `id = 'root'`, can set `props.rootId` to change the id.Child components can be added, and will also be rendered into HTML templates, which will be overwritten when React rendering is complete, generally used to implement global Loading.
 
-- `Head`：Provides native Head Element capabilities and automatically populates `<meta>`, as well as the `<Scripts>` component.
+- `Head`: Provides native Head Element capabilities and automatically populates `<meta>`, as well as the `<Scripts>` component.
 
-- `Scripts`：The script content generated by the webpack, which can be used to adjust the position of the bundle result, is placed in the `<Head>` component by default.
+- `Scripts`: The script content generated by the webpack, which can be used to adjust the position of the bundle result, is placed in the `<Head>` component by default.
 
 ### Template Params
 
@@ -54,10 +54,10 @@ Because it is in the form of JSX, in `Document.[jt]sx`, you can use various vari
 
 At the same time, Modern.js provides `DocumentContext` to provide some configuration and environment parameters, The main parameters as follow:
 
-- `processEnv`：Provide build-time env vars.
-- `config`：The configuration of the project, only `output` are exposed.
-- `entryName`：current entry name.
-- `templateParams`：HTML template params(in order to be compatible with traditional templates, it is not recommended to use).
+- `processEnv`: Provide build-time env vars.
+- `config`: The configuration of the project, only `output` are exposed.
+- `entryName`: current entry name.
+- `templateParams`: HTML template params(in order to be compatible with traditional templates, it is not recommended to use).
 
 ### Examples
 
@@ -87,9 +87,9 @@ export default function Document(): React.ReactElement {
       </Head>
       <Body>
         <Root rootId="root">
-          <h1 style={{ color: 'red' }}>Some Params：</h1>
-          <h2> entryName：{entryName}</h2>
-          <h2> title：{htmlConfig.title}</h2>
+          <h1 style={{ color: 'red' }}>Some Params: </h1>
+          <h2> entryName: {entryName}</h2>
+          <h2> title: {htmlConfig.title}</h2>
           <h2> rootId: {templateParams.mountId}</h2>
         </Root>
         <h1>bottom</h1>
@@ -137,9 +137,9 @@ The above JSX component will generate the following HTML template:
   <body>
     <div id="root">
       {/* <?- html ?> */}
-      <h1 style="color:red">Some Params：</h1>
-      <h2>entryName：sub</h2>
-      <h2>title：</h2>
+      <h1 style="color:red">Some Params: </h1>
+      <h2>entryName: sub</h2>
+      <h2>title: </h2>
       <h2>rootId: root</h2>
     </div>
     <h1>bottom</h1>

package/en/guides/basic-features/proxy.mdx

@@ -52,7 +52,7 @@ export default defineConfig({
 });
 ```
 
-For example, when a BFF call is used in the code, the final request `http://localhost:8080/api/v1/topics` will auto proxy to `https://cnodejs.org/api/v1/topics`：
+For example, when a BFF call is used in the code, the final request `http://localhost:8080/api/v1/topics` will auto proxy to `https://cnodejs.org/api/v1/topics`:
 
 ```js
 import getTopics from '@api/v1/topics';

package/en/guides/get-started/introduction.mdx

@@ -9,7 +9,7 @@ sidebar_position: 1
 
 Currently, Modern.js includes three solutions, each targeting at different development scenarios: web application development, npm package development, and document site development:
 
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/Solutions-en-0602.png)
+![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/Solutions-en-1311.png)
 
 As a part of the Modern.js engineering system, each of these solutions can be used separately and has its own independent documentation site. Developers can choose one or more solutions as needed.
 

package/en/guides/topic-detail/framework-plugin/extend.mdx

@@ -152,7 +152,7 @@ export default defineConfig({
 });
 ```
 
-run `npx modern message`, then we can get follow in console：
+run `npx modern message`, then we can get follow in console:
 
 ```bash
 $ modern message

package/en/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -2,6 +2,7 @@
 title: Hook List
 sidebar_position: 8
 ---
+
 # Hook List
 
 Modern.js exposes three types of plugins: CLI, Runtime, and Server.
@@ -91,7 +92,7 @@ export default defineConfig({
 });
 ```
 
-then throw error：
+then throw error:
 
 ```sh
 $ modern dev
@@ -124,11 +125,11 @@ export default (): CliPlugin => ({
 
 ### `afterPrepare`
 
-- function：Running tasks after the prepare process
-- Execution Phase：After the prepare process
-- Hook model：AsyncWorkflow
-- type：`AsyncWorkflow<void, void>`
-- Usage：
+- function: Running tasks after the prepare process
+- Execution Phase: After the prepare process
+- Hook model: AsyncWorkflow
+- type: `AsyncWorkflow<void, void>`
+- Usage:
 
 ```ts
 import type { CliPlugin } from '@modern-js/core';
@@ -399,11 +400,11 @@ export default (): CliPlugin => ({
 
 ### `modifyEntryExport`
 
-- 功能：用于修改生成入口文件中的 `export` 语句
-- 执行阶段：生成入口文件之前，[`prepare`](#prepare) 阶段触发
-- Hook 模型：AsyncWaterfall
-- 类型：`AsyncWaterfall<{ entrypoint: Entrypoint; exportStatement: string; }>`
-- 使用示例：
+- Function: used to modify the `export` statement in the generated entry file
+- Execution Stage: Before the entry file is generated, the [`prepare`](#prepare) phase triggers
+- Hook Model: AsyncWaterfall
+- Type: `AsyncWaterfall<{ entrypoint: Entrypoint; exportStatement: string; }>`
+- Example of use:
 
 ```ts
 import type { CliPlugin } from '@modern-js/core';
@@ -622,7 +623,6 @@ Plugins are also supported in the Server section of the application project. The
 - Type: `AsyncPipeline<ServerInitInput, InitExtension>`
 - Usage Example:
 
-
 ```ts
 import type { ServerPlugin } from '@modern-js/server-core';
 
@@ -783,7 +783,6 @@ export default (): Plugin => ({
 - Type: `AsyncPipeline<{ App: React.ComponentType<any>; context?: RuntimeContext; rootElement: HTMLElement; }, void>`
 - Usage Example:
 
-
 ```ts
 import ReactDOM from 'react-dom';
 import type { Plugin } from '@modern-js/runtime';
@@ -810,7 +809,6 @@ export default (): Plugin => ({
 - Type: `AsyncPipeline<{ App: React.ComponentType<any>; context?: RuntimeContext; }, string>`
 - Usage Example:
 
-
 ```ts
 import ReactDomServer from 'react-dom/server';
 import type { Plugin } from '@modern-js/runtime';

package/en/guides/topic-detail/framework-plugin/hook.mdx

@@ -32,13 +32,13 @@ pipeline.run(1); // 4
 pipeline.run(5); // 12
 ```
 
-In this example, a `Pipeline<number, number>` is created on line 3. This means that when you run it, you need to pass in a `number`, and you will get a `number` as a result，the type is：
+In this example, a `Pipeline<number, number>` is created on line 3. This means that when you run it, you need to pass in a `number`, and you will get a `number` as a result，the type is:
 
 ```ts
 (count: number, next: (nextCount: number) => number) => number;
 ```
 
-The reason why there are only `number`s here is because we created a `Pipeline<number, number>`. If we had created a `Pipeline<number, string>`, then when we run it, we would pass in a `number` and get back a `string`. the type is：
+The reason why there are only `number`s here is because we created a `Pipeline<number, number>`. If we had created a `Pipeline<number, string>`, then when we run it, we would pass in a `number` and get back a `string`. the type is:
 
 ```ts
 (count: number, next: (nextCount: number) => string) => string;
@@ -104,7 +104,7 @@ pipeline(
 
 ### Waterfall
 
-This model, as the name suggests, is characterized by the sequential passing of parameters, where the return value of the previous function becomes the input parameter of the next function. Let's look at an example:：
+This model, as the name suggests, is characterized by the sequential passing of parameters, where the return value of the previous function becomes the input parameter of the next function. Let's look at an example::
 
 ```ts
 import { createWaterfall } from '@modern-js/plugin';
@@ -125,7 +125,7 @@ waterfall.run(1); // 4
 waterfall.run(5); // 12
 ```
 
-In this example, a `Waterfall<number>` type is created, which means that the input and output types of this model are the same. In this case, both the input and output types are `number`, the type is：
+In this example, a `Waterfall<number>` type is created, which means that the input and output types of this model are the same. In this case, both the input and output types are `number`, the type is:
 
 ```ts
 (count: number) => number;

package/en/guides/topic-detail/framework-plugin/implement.mdx

@@ -155,7 +155,7 @@ export default (): CliPlugin => ({
 });
 ```
 
-For more detail [Plugin API](/guides/topic-detail/framework-plugin/plugin-api)。
+For more detail [Plugin API](/guides/topic-detail/framework-plugin/plugin-api).
 
 ### Async setup
 
@@ -218,7 +218,7 @@ First, create an empty module project solution and adjust the package name:
 }
 ```
 
-create plugin main file：
+create plugin main file:
 
 ```ts title=src/index.ts
 import type { CliPlugin } from '@modern-js/core';

package/en/guides/topic-detail/framework-plugin/relationship.mdx

@@ -63,7 +63,7 @@ If you use the `post` parameter in the `bar` plugin's configuration and set it t
 
 The rivals field can be used to declare a mutual exclusion relationship between plugins.
 
-there are two plugin：
+there are two plugin:
 
 ```ts title=foo.ts
 const foo = {
@@ -84,7 +84,7 @@ The `bar` plugin has been configured with the `foo` plugin in the `rivals` field
 
 The `required` field can be used to declare a dependency relationship between plugins.
 
-there are two plugin：
+there are two plugin:
 
 ```ts title=foo.ts
 const foo = {

package/en/guides/topic-detail/generator/codesmith/api/npm.mdx

@@ -4,7 +4,7 @@ sidebar_position: 7
 
 # @modern-js/codesmith-api-npm
 
-The NPM API encapsulation in the microgenerator provides a common method for installing dependencies of different NPM package management tools.
+The NPM API encapsulation in the microgenerator provides a common method for installing dependencies of different NPM package managers.
 
 ## Use
 

package/en/guides/topic-detail/generator/codesmith/develop.mdx

@@ -12,9 +12,9 @@ Modern.js provides a microgenerator to create a microgenerator project, you can
 $ mkdir <projectDir>
 $ npx @modern-js/codesmith-cli @modern-js/generator-generator
 
-? Package Name <generatorName>
-? Package Management Tool pnpm
-? Development Language TS
+? Package Name: <generatorName>
+? Package Manager: pnpm
+? Development Language: TS
 ```
 
 ## Add template file

package/en/guides/topic-detail/generator/config/app.mdx

@@ -75,7 +75,7 @@ BFF type (bffType), supports two options:
 
 ##### framework
 
-BFF runtime framework (framework)，supports two options：
+BFF runtime framework (framework)，supports two options:
 
 - Express(express)
 

package/en/guides/topic-detail/generator/plugin/api/input/addInputAfter.mdx

@@ -27,7 +27,7 @@ Questions that need to be added, specific type definition viewable [Customize in
 
 ## Example
 
-Add input after package management tool:
+Add input after package manager:
 
 ```ts
 context.addInputAfter('packageManager', {

package/en/guides/topic-detail/generator/plugin/api/input/addInputBefore.mdx

@@ -27,7 +27,7 @@ Questions that need to be added, specific type definition viewable [Customize in
 
 ## Example
 
-Add input before package management tool:
+Add input before package manager:
 
 ```ts
 context.addInputBefore('packageManager', {

package/en/guides/topic-detail/generator/plugin/api/npm/install.mdx

@@ -6,7 +6,7 @@ sidebar_position: 1
 
 Install dependency in the project root directory.
 
-In the install function, the dependency will be installed using the corresponding package management tool based on the value of `packageManager`.
+In the install function, the dependency will be installed using the corresponding package manager based on the value of `packageManager`.
 
 Its type is defined as:
 

package/en/guides/topic-detail/generator/plugin/develop.mdx

@@ -17,25 +17,25 @@ Different plugin types will ask different questions. You can choose the plugin t
 ### Extension type
 
 ```
-? Please select the solution you want to create Module Solution
-? Please select the scene you want to create 生成器插件
-? Plugin Package Name plugin
-? Development Language TS
-? Package Management Tool pnpm
-? Plugin Type extend
-? Plugin Base Type Web App Solution
+? Please select the solution you want to create: Npm Module
+? Please select the scene you want to create: Generator Plugin
+? Plugin Package Name: plugin
+? Development Language: TS
+? Package Manager: pnpm
+? Plugin Type: extend
+? Plugin Base Type: Web App
 ```
 
 ### Customized type
 
 ```
-? Plugin Package Name plugin
-? Development Language TS
-? Package Management Tool pnpm
-? Plugin Type custom
-? Plugin Key mobile-app
-? Plugin Show Name Mobile App
-? Plugin Base Type Web App Solution
+? Plugin Package Name: plugin
+? Development Language: TS
+? Package Manager: pnpm
+? Plugin Type: custom
+? Plugin Key: mobile-app
+? Plugin Show Name: Mobile App
+? Plugin Base Type: Web App
 ```
 
 After the execution of the create project command is completed, a project for developing the generator plugin will be generated accordingly, and the `meta` information will also be generated according to your selection in the `package.json`.
@@ -57,7 +57,7 @@ A brief introduction to the provided methods, the complete API list viewable [Ge
 
 - addInputBefore
 
-Add input before the default input, such as adding questions before the `Select package management tool` question.
+Add input before the default input, such as adding questions before the `Select package manager` question.
 
 Specific Modern.js configuration viewable for each problem [Project Solution Configuration](/guides/topic-detail/generator/config/common).
 

package/en/guides/topic-detail/generator/project.mdx

@@ -47,9 +47,9 @@ By default, `@modern-js/create` will automatically identify the user's system la
 
 Specifies the project default configuration.
 
-By default, `@modern-js/create` will have interaction problems such as language selection and package management tools during execution. When you need to specify these configuration contents in advance, you can pass in this field.
+By default, `@modern-js/create` will have interaction problems such as language selection and package managers during execution. When you need to specify these configuration contents in advance, you can pass in this field.
 
-This field is a JSON character string, for example when running a package management tool:
+This field is a JSON character string, for example when running a package manager:
 
 ```bash
 npx @modern-js/create --config '{"packageManager": "pnpm"}'
@@ -113,6 +113,6 @@ For custom microgenerators, please refer to [Develop Microgenerator](/guides/top
 
 A project is created by specifying a specific package version dependency.
 
-If you need to specify a specific package version when creating a project, you can use this parameter. This parameter will lock the package version number in the `package.json` of the project root directory by configuration `pnpm.overrides` (package management tool selects pnpm) or `resolutions`.
+If you need to specify a specific package version when creating a project, you can use this parameter. This parameter will lock the package version number in the `package.json` of the project root directory by configuration `pnpm.overrides` (package manager selects pnpm) or `resolutions`.
 
 The parameter value is a JSON character string.

package/en/guides/topic-detail/micro-frontend/c03-main-app.mdx

@@ -148,7 +148,7 @@ Here, the activation route of **Table** is customized as **/table** through the
 
 Use `useModuleApp` api in Main App, get `MApp` component and then render it
 
-```tsx title=Main App：App.tsx
+```tsx title=Main App: App.tsx
 import { useModuleApp } from '@modern-js/plugin-garfish/runtime';
 
 function App() {

package/en/guides/topic-detail/micro-frontend/c04-communicate.mdx

@@ -8,7 +8,7 @@ title: Communicate
 
 In Modern.js, the sub-application will be wrapped into a React component, and the purpose of communicating between the main application and the sub-application can be achieved directly by passing'props' to the React component.
 
-```tsx title=Main：App.tsx
+```tsx title=Main: App.tsx
 function App() {
   const { MApp } = useModuleApps();
 
@@ -20,7 +20,7 @@ function App() {
 }
 ```
 
-```tsx title=Main：App.tsx
+```tsx title=Main: App.tsx
 function App(props) {
   console.log(props);
   return ...

package/en/guides/topic-detail/model/computed-state.mdx

@@ -26,7 +26,7 @@ For example, the todo application has `items` and `filter` in its State, and `fi
 const todoModel = model('todo').define({
   state: {
     items: [],
-    filter: 'ALL', // ALL: show all；COMPLETED：show completed；ACTIVE：show active
+    filter: 'ALL', // ALL: show all；COMPLETED: show completed；ACTIVE: show active
   },
   computed: {
     visibleTodos: state => {

package/en/guides/troubleshooting/cli.mdx

@@ -8,7 +8,7 @@ sidebar_position: 2
 
 The pnpm v6 and pnpm v7 versions do not use the same posture when executing commands. The following should be noted:
 
-pnpm v7：
+pnpm v7:
 
 When using pnpm to invoke a command in `package.json`, if you need to pass arguments to pnpm, you need to put the arguments before the command.
 

package/en/tutorials/first-app/c03-css.mdx

@@ -274,7 +274,7 @@ ni src/styles/utils.css
 </TabItem>
 </Tabs>
 
-在 `src/routes/page.tsx` 里导入 `utils.css`：
+Import `utils.css` in `src/routes/page.tsx`:
 
 ```js
 import '../styles/utils.css';

package/package.json

@@ -11,13 +11,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-1678680921211",
+  "version": "0.0.0-next-1678718202017",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-1678680921211"
+    "@modern-js/builder-doc": "0.0.0-next-1678718202017"
   },
   "devDependencies": {
     "ts-node": "^10",
@@ -25,7 +25,7 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "0.0.0-next-1678680921211"
+    "@modern-js/builder-doc": "0.0.0-next-1678718202017"
   },
   "scripts": {
     "build": "npx ts-node ./scripts/sync.ts"

package/zh/apis/monorepo/commands/new.mdx

@@ -21,10 +21,10 @@ Options:
 ```bash
 $ modern new
 ? 请选择你想创建的工程类型 (Use arrow keys)
-❯ 应用
-  应用（测试）
-  模块
-  模块（内部）
+❯ Web 应用
+  Web 应用（测试）
+  Npm 模块
+  Npm 模块（内部）
 ```
 
 应用工程默认会添加到 `apps` 目录， 测试应用会添加到 `examples` 目录，公共模块默认会添加到 `packages` 目录， 内部模块默认会添加到 `features` 目录。

package/zh/components/default-mwa-generate.mdx

@@ -1,5 +1,5 @@
 ```bash
-? 请选择你想创建的工程类型 应用
-? 请选择开发语言 TS
-? 请选择包管理工具 pnpm
+? 请选择你想创建的工程类型：Web 应用
+? 请选择开发语言：TS
+? 请选择包管理工具：pnpm
 ```

package/zh/components/init-app.mdx

@@ -1,9 +1,9 @@
 Modern.js 生成器会提供一个可交互的问答界面，根据结果初始化项目，按照默认的选择进行初始化：
 
 ```bash
-? 请选择你想创建的工程类型 应用
-? 请选择开发语言 TS
-? 请选择包管理工具 pnpm
+? 请选择你想创建的工程类型：Web 应用
+? 请选择开发语言：TS
+? 请选择包管理工具：pnpm
 ```
 
 在生成项目后，Modern.js 会自动安装依赖、创建 git 仓库。

package/zh/components/init-rspack-app.mdx

@@ -1,7 +1,7 @@
 ```bash
 $ npx @modern-js/create myapp
-? 请选择你想创建的工程类型 应用
-? 请选择开发语言 TS
-? 请选择包管理工具 pnpm
-? 请选择构建工具 Rspack
+? 请选择你想创建的工程类型：Web 应用
+? 请选择开发语言：TS
+? 请选择包管理工具：pnpm
+? 请选择构建工具：Rspack
 ```

package/zh/guides/get-started/introduction.mdx

@@ -9,7 +9,7 @@ sidebar_position: 1
 
 目前 Modern.js 包含三个解决方案，分别面向 Web 应用开发场景、npm 包开发场景和文档站开发场景：
 
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/Solutions-0602.png)
+![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/Solutions-1311.png)
 
 作为 Modern.js 工程体系的一部分，以上每个解决方案都可以被单独使用，并且各自部署了独立的文档站点。开发者可以按需选择其中的一个或多个解决方案来使用。
 

package/zh/guides/topic-detail/changesets/changelog.mdx

@@ -167,10 +167,10 @@ module.exports = {
 #### 使用 `npx @modern-js/create` 创建模块工程方案。
 
 ```md
-? 请选择你想创建的工程类型 模块
-? 请填写项目名称 custom-changelog
-? 请选择开发语言 TS
-? 请选择包管理工具 pnpm
+? 请选择你想创建的工程类型：Npm 模块
+? 请填写项目名称：custom-changelog
+? 请选择开发语言：TS
+? 请选择包管理工具：pnpm
 ```
 
 #### 实现自定义内容。
@@ -201,10 +201,10 @@ export async function getDependencyReleaseLine() {}
 #### 执行 `pnpm run new` 创建模块子项目。
 
 ```md
-? 请选择你想创建的工程类型 模块
-? 请填写子项目名称 custom-changelog
-? 请填写子项目目录名称 custom-changelog
-? 请选择开发语言 TS
+? 请选择你想创建的工程类型：Npm 模块
+? 请填写子项目名称：custom-changelog
+? 请填写子项目目录名称：custom-changelog
+? 请选择开发语言：TS
 ```
 
 #### 实现自定义内容。

package/zh/guides/topic-detail/changesets/commit.mdx

@@ -200,10 +200,10 @@ commit 配置为 ./my-commit-config.js 即可:
 #### 使用 `npx @modern-js/create` 创建模块工程方案。
 
 ```md
-? 请选择你想创建的工程类型 模块
-? 请填写项目名称 custom-commit
-? 请选择开发语言 TS
-? 请选择包管理工具 pnpm
+? 请选择你想创建的工程类型：Npm 模块
+? 请填写项目名称：custom-commit
+? 请选择开发语言：TS
+? 请选择包管理工具：pnpm
 ```
 
 #### 实现自定义内容。
@@ -234,10 +234,10 @@ export async function getVersionMessage() {}
 #### 执行 `pnpm run new` 创建模块子项目。
 
 ```md
-? 请选择你想创建的工程类型 模块
-? 请填写子项目名称 custom-commit
-? 请填写子项目目录名称 custom-commit
-? 请选择开发语言 TS
+? 请选择你想创建的工程类型：Npm 模块
+? 请填写子项目名称：custom-commit
+? 请填写子项目目录名称：custom-commit
+? 请选择开发语言：TS
 ```
 
 #### 实现自定义内容。

package/zh/guides/topic-detail/changesets/release-note.mdx

@@ -197,10 +197,10 @@ custom 参数值还可以使用模块工程方案进行管理，提供通用方
 1. 使用 npx @modern-js/create 创建模块工程方案。
 
 ```md
-? 请选择你想创建的工程类型 模块
-? 请填写项目名称 custom-release-note
-? 请选择开发语言 TS
-? 请选择包管理工具 pnpm
+? 请选择你想创建的工程类型：Npm 模块
+? 请填写项目名称：custom-release-note
+? 请选择开发语言：TS
+? 请选择包管理工具：pnpm
 ```
 
 2. 实现自定义内容。
@@ -226,10 +226,10 @@ pnpm run gen-release-note -- --custom custom-release-note
 1. 执行 `pnpm run new` 创建模块子项目
 
 ```md
-? 请选择你想创建的工程类型 模块
-? 请填写子项目名称 custom-release-note
-? 请填写子项目目录名称 custom-release-note
-? 请选择开发语言 TS
+? 请选择你想创建的工程类型：Npm 模块
+? 请填写子项目名称：custom-release-note
+? 请填写子项目目录名称：custom-release-note
+? 请选择开发语言：TS
 ```
 
 2. 实现自定义内容。

package/zh/guides/topic-detail/generator/plugin/develop.mdx

@@ -17,27 +17,27 @@ npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
 ### 扩展工程方案
 
 ```
-? 请选择你想创建的工程类型 模块
-? 请选择项目场景 生成器插件
-? 插件包名 plugin
-? 请选择开发语言 TS
-? 请选择包管理工具 pnpm
-? 插件类型 扩展
-? 插件基础类型 应用
+? 请选择你想创建的工程类型：Npm 模块
+? 请选择项目场景：生成器插件
+? 插件包名：plugin
+? 请选择开发语言：TS
+? 请选择包管理工具：pnpm
+? 插件类型：扩展
+? 插件基础类型：应用
 ```
 
 ### 创建工程方案场景
 
 ```
-? 请选择你想创建的工程类型 模块
-? 请选择项目场景 生成器插件
-? 插件包名 plugin
-? 请选择开发语言 TS
-? 请选择包管理工具 pnpm
-? 插件类型 自定义
-? 插件关键字 mobile-app
-? 插件展示名称 移动应用
-? 插件基础类型 应用
+? 请选择你想创建的工程类型：Npm 模块
+? 请选择项目场景：生成器插件
+? 插件包名：plugin
+? 请选择开发语言：TS
+? 请选择包管理工具：pnpm
+? 插件类型：自定义
+? 插件关键字：mobile-app
+? 插件展示名称：移动应用
+? 插件基础类型：应用
 ```
 
 创建项目命令执行完成后，会对应的生成一个开发生成器插件的项目，`package.json` 中也会根据你的选择对应的生成 `meta` 信息。

package/zh/guides/topic-detail/monorepo/create-sub-project.mdx

@@ -28,10 +28,10 @@ pnpm run new
 
 ```
 ? 请选择你想创建的工程类型 (Use arrow keys)
-❯ 应用
-  应用（测试）
-  模块
-  模块（内部）
+❯ Web 应用
+  Web 应用（测试）
+  Npm 模块
+  Npm 模块（内部）
 ```
 
 :::info
@@ -49,7 +49,7 @@ pnpm run new
 然后根据不同的需求选择对应的类型项目选项，选择之后便开始出现对应子项目类型的问题和选项。例如选择「应用」后会出现：
 
 ```
-? 请选择你想创建的工程类型 应用
+? 请选择你想创建的工程类型：Web应用
 ? 请填写子项目名称
 ```
 

package/zh/guides/topic-detail/monorepo/sub-project-interface.mdx

@@ -19,28 +19,28 @@ sidebar_position: 3
 **「应用」子项目：**
 
 ```
-? 请选择你想创建的工程类型 应用
-? 请填写子项目名称 app
-? 请填写子项目目录名称 app
-? 请选择开发语言 TS
+? 请选择你想创建的工程类型：Web 应用
+? 请填写子项目名称：app
+? 请填写子项目目录名称：app
+? 请选择开发语言：TS
 ```
 
 **「模块（内部）」子项目：**
 
 ```
-? 请选择你想创建的工程类型 模块（内部）
-? 请填写子项目名称 internal-lib
-? 请填写子项目目录名称 internal-lib
-? 请选择开发语言 TS
+? 请选择你想创建的工程类型：Npm 模块（内部）
+? 请填写子项目名称：internal-lib
+? 请填写子项目目录名称：internal-lib
+? 请选择开发语言：TS
 ```
 
 **「模块」子项目：**
 
 ```
-? 请选择你想创建的工程类型 模块
-? 请填写子项目名称 components
-? 请填写子项目目录名称 components
-? 请选择开发语言 TS
+? 请选择你想创建的工程类型：Npm 模块
+? 请填写子项目名称：components
+? 请填写子项目目录名称：components
+? 请选择开发语言：TS
 ```
 
 创建成功后，会得到以下项目：