@modern-js/main-doc 2.32.1 → 2.33.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @modern-js/main-doc
 
+## 2.33.0
+
+### Patch Changes
+
+- bc1f8da: feat(builder): support custom logger in dev server
+
+  feat(builder): 支持自定义 logger
+
+  - @modern-js/builder-doc@2.33.0
+
 ## 2.32.1
 
 ### Patch Changes

package/docs/en/apis/app/runtime/app/define-config.mdx

@@ -53,9 +53,9 @@ defineConfig(App, {
 
 ```json
 {
-  // 来自 `modern.config.js`
+  // From `modern.config.js`
   ...runtime.router
-  // 来自 `defineConfig`
+  // From `defineConfig`
   ...config.router
 }
 ```

package/docs/en/apis/app/runtime/model/auto-actions.mdx

@@ -57,9 +57,9 @@ State type is Array, generate the following Actions:
   - usage: `arr.unshift(element1, ..., elementN)`
   - `elementN`: the element or elements to add to the beginning of the array.
 - `filter`: filter element.
-{/* 语义与原生方法不同, 待修改 API  */}
+{/* Semantics are different from native methods, API to be modified  */}
 - `concat`: concat array.
-{/* 语义与原生方法不同, 待修改 API  */}
+{/* Semantics are different from native methods, API to be modified  */}
 - `splice`: modify the array by deleting or replacing existing elements or adding new elements in place, and return the modified array(Note that it is different from the native `splice` return value).
   - usage: `splice(start[, deleteCount[, item1[, item2[, ...]]]])`
   - `start`: specifies the start position of the modification(counting from 0).

package/docs/en/apis/app/runtime/model/model_.mdx

@@ -61,7 +61,6 @@ const fooModel = model('foo').define({
 - `context`: Reduck Context, can get underlying `store` object. `store` support all Redux Store [API](https://redux.js.org/api/store), also mounts the `use` method for consuming the Model, and the `unmount` method for unmounting the Model.
 - utils: commonly used tool like `use`、`onMount`. `use` is the same as `store.use`, `onMount` is the hook function after the Model is mounted.
 
-{/* TODO: @anchao 调整类型  */}
 ```ts
 interface Utils {
   use: UseModel;

package/docs/en/apis/app/runtime/model/use-static-model.mdx

@@ -37,7 +37,7 @@ function App() {
   const [state] = useStaticModel(userModel);
 
   useEffect(() => {
-    // 统计 UV 数据
+    // Statistical UV Data
     send('pageview', { user: state.user });
   }, [state]);
 

package/docs/en/community/contributing-guide.mdx

@@ -189,14 +189,13 @@ root
 └─ packages
    └─ document
        ├─ builder-doc    # Documentation for Modern.js Builder
-       ├─ doc-tools-doc  # Documentation for Modern.js Doc
        ├─ main-doc       # Documentation for Modern.js Framework
        └─ module-doc     # Documentation for Modern.js Module
 ```
 
-This website is built with [Modern.js Doc](https://modernjs.dev/doc-tools), the document content can be written using markdown or mdx syntax. You can refer to the [Modern.js Doc Website](https://modernjs.dev/doc-tools) for detailed usage.
+This website is built with Rspress, the document content can be written using markdown or mdx syntax. You can refer to the [Rspress Website](https://rspress.dev/) for detailed usage.
 
-The source code of Modern.js Doc can be found in [this folder](https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/doc-tools).
+The source code of Rspress can be found in [this repo](https://github.com/web-infra-dev/rspress).
 
 ---
 

package/docs/en/configure/app/builder-plugins.mdx

@@ -9,7 +9,7 @@ sidebar_position: 21
 
 Used to configure the Modern.js Builder plugin.
 
-Modern.js Builder is the build engine of Modern.js, please read [Builder](/guides/concept/builder) for background. If you want to know how to write Builder plugins, you can refer to [Modern.js Builder - Introduce to Plugin](https://modernjs.dev/builder/en/plugins/introduction.html).
+Modern.js Builder is the build tool of Modern.js, please read [Builder](/guides/concept/builder) for background. If you want to know how to write Builder plugins, you can refer to [Modern.js Builder - Introduce to Plugin](https://modernjs.dev/builder/en/plugins/introduction.html).
 
 ## Precautions
 

package/docs/en/configure/app/source/enable-async-entry.mdx

@@ -13,7 +13,9 @@ When this option is enabled, Modern.js will wrap the automatically generated ent
 
 ## Background
 
-If you are not familiar with webpack Module Federation, please read the [Module Federation documentation](https://webpack.js.org/concepts/module-federation/).
+import ModuleFederation from '@modern-js/builder-doc/docs/zh/shared/module-federation.md';
+
+<ModuleFederation />
 
 ## Example
 

package/docs/en/configure/app/tools/tailwindcss.mdx

@@ -17,6 +17,14 @@ const tailwind = {
 };
 ```
 
+Used to modify the configuration of [Tailwind CSS](https://tailwindcss.com/docs/configuration).
+
+### Enabling Tailwind CSS
+
+Before using `tools.tailwindcss`, you need to enable the Tailwind CSS plugin for Modern.js.
+
+Please refer to the section [Using Tailwind CSS](/guides/basic-features/css.html#using-tailwind-css) for instructions on how to enable it.
+
 ### Function Type
 
 When `tools.tailwindcss`'s type is Function, the default tailwindcss config will be passed in as the first parameter, the config object can be modified directly, or a value can be returned as the final result.
@@ -51,6 +59,40 @@ export default {
 
 ### Notes
 
-Please note that if you are using the [source.designSystem](/configure/app/source/design-system) configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `source.designSystem`.
+Please note:
+
+- If you are using both the `tailwind.config.{ts,js}` file and `tools.tailwindcss` option, the configuration defined in `tools.tailwindcss` will take precedence and override the content defined in `tailwind.config.{ts,js}`.
+- If you are using the `source.designSystem` configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `source.designSystem`.
 
 The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration) for more details.
+
+### About source.designSystem
+
+`source.designSystem` is a deprecated configuration option in Modern.js.
+
+Starting from Modern.js vMAJOR_VERSION.33.0, you can use the `theme` configuration option of Tailwind CSS as a replacement for `source.designSystem`. It is no longer necessary to split the `theme` configuration and set it on `designSystem`.
+
+- Previous usage:
+
+```ts title="modern.config.ts"
+const { theme, ...rest } = tailwindConfig;
+
+export default {
+  tools: {
+    tailwindcss: rest,
+  },
+  source: {
+    designSystem: theme,
+  },
+};
+```
+
+- Current usage:
+
+```ts title="modern.config.ts"
+export default {
+  tools: {
+    tailwindcss: tailwindConfig,
+  },
+};
+```

package/docs/en/guides/advanced-features/bff/frameworks.mdx

@@ -1,10 +1,10 @@
 ---
 sidebar_position: 3
-title: Frameworks
 ---
+
 # Frameworks
 
-Modern.js's BFF supports different runtime frameworks, currently Modern.js's BFF supports two runtime frameworks[Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/).
+Modern.js's BFF supports different runtime frameworks, currently Modern.js's BFF supports two runtime frameworks: [Express.js](https://expressjs.com/) and [Koa.js](https://koajs.com/).
 
 ## Function Mode
 

package/docs/en/guides/advanced-features/bff/function.mdx

@@ -224,7 +224,7 @@ export default () => {
     });
   };
 
-  return <div onClick={addSku}>添加 SKU</div>;
+  return <div onClick={addSku}>Add SKU</div>;
 };
 ```
 

package/docs/en/guides/basic-features/css.mdx

@@ -103,37 +103,47 @@ Depending on your needs, you can selectively import the CSS files provided by Ta
 
 :::
 
-### Tailwind CSS Autocomplete
-
-Tailwind CSS provides an official extension called [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) for autocompletion of Tailwind CSS class names, CSS functions, and directives in VS Code.
+### Configuring Tailwind CSS
 
-You can follow the steps below to enable the autocompletion feature:
+In Modern.js, you have two ways to configure Tailwind CSS:
 
-1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
-2. Create a `tailwind.config.ts` file in the root directory of your project and write the desired Tailwind CSS configuration.
+1. Using the `tailwind.config.{ts,js}` file, which follows the official usage of Tailwind CSS. Please refer to ["Tailwind CSS - Configuration"](https://tailwindcss.com/docs/configuration) for more details.
 
 ```ts title="tailwind.config.ts"
+import type { Config } from 'tailwindcss';
+
 export default {
-  content: [
-    './src/**/*.{js,jsx,ts,tsx}',
-    './config/html/**/*.{html,ejs,hbs}',
-    './storybook/**/*',
-  ],
-};
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+} as Config;
 ```
 
-3. In the `modern.config.ts` file, import the `tailwind.config.ts` file you created and pass it to [tools.tailwindcss](/configure/app/tools/tailwindcss), so that Modern.js can recognize the Tailwind CSS configuration correctly.
+:::tip
+Please upgrade Modern.js to version >= MAJOR_VERSION.33.0 to support automatic reading of `tailwind.config.{ts,js}` files.
+:::
 
-```ts title="modern.config.ts"
-import tailwindConfig from './tailwind.config';
+2. Using the [tools.tailwindcss](/configure/app/tools/tailwindcss.html) configuration option. This is the old way of configuring Tailwind CSS, and we recommend using the `tailwind.config.{ts,js}` file for configuration.
 
-export default defineConfig({
+```ts title="modern.config.ts"
+export default {
   tools: {
-    tailwindcss: tailwindConfig,
+    tailwindcss: {
+      content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    },
   },
-});
+};
 ```
 
+If you are using both the `tailwind.config.{ts,js}` file and `tools.tailwindcss` option, the configuration defined in `tools.tailwindcss` will take precedence and override the content defined in `tailwind.config.{ts,js}`.
+
+### Tailwind CSS Autocomplete
+
+Tailwind CSS provides an official extension called [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) for autocompletion of Tailwind CSS class names, CSS functions, and directives in VS Code.
+
+You can follow the steps below to enable the autocomplete feature:
+
+1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
+2. If the root directory of your project does not have a `tailwind.config.{ts,js}` file, you need to create one and write the Tailwind CSS configuration for your current project. Otherwise, the IDE plugin will not work correctly.
+
 ### Tailwind CSS Version
 
 Modern.js supports both Tailwind CSS v2 and v3 versions, and the framework will recognize the version of the `tailwindcss` dependency in the project `package.json` file and enable the corresponding configuration. By default, we will install Tailwind CSS v3 version for you.

package/docs/en/guides/basic-features/mock.mdx

@@ -52,7 +52,7 @@ const Mock = require('mockjs');
 module.exports = {
   '/api/getInfo': Mock.mock({
     'data|1-10': [{ name: '@cname' }],
-  }) /* => {data: [{name: "董霞"}, {name: "魏敏"},  {name: "石磊"}} */,
+  }) /* => {data: [{name: "Jack"}, {name: "Jim"},  {name: "Mary"}} */,
 };
 ```
 

package/docs/en/guides/concept/builder.mdx

@@ -6,14 +6,14 @@ sidebar_position: 2
 
 **Modern.js uses [Modern.js Builder](https://modernjs.dev/builder/en) to build your Web App.**
 
-Modern.js Builder is one of the core components of the Modern.js system. It is a build engine for web development scenarios that can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and Rspack, and by default uses the most mature webpack for bundling.
+Modern.js Builder is one of the core components of the Modern.js system. It is a build tool for web development scenarios that can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and Rspack, and by default uses the most mature webpack for bundling.
 
 ## Build Architecture
 
 From a building perspective, Modern.js is divided into three layers, from top to bottom:
 
 - Upper-level development framework: Modern.js.
-- Common build engine: Modern.js Builder.
+- Common build tool: Modern.js Builder.
 - Low-level bundler: webpack and Rspack.
 
 <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-0824.png" style={{ width: '100%', maxWidth: '540px' }} />

package/docs/en/guides/get-started/glossary.mdx

@@ -30,10 +30,22 @@ In CSR, the server sends an empty HTML shell and some JavaScript scripts to the
 
 ## Garfish
 
-[Garfish](https://garfish.bytedance.net/) is a micro-frontend solution mainly used to solve problems such as cross-team collaboration and diversified technology systems in web applications.
+[Garfish](https://garfishjs.org/) is a micro-frontend solution mainly used to solve problems such as cross-team collaboration and diversified technology systems in web applications.
 
 Starting from the architecture level, it combines multiple independently delivered frontend applications into a whole. These frontend applications can be developed, tested, and deployed independently, but in the user's perspective, they are still cohesive single products.
 
+## Micro-frontend
+
+import MicroFrontend from '@modern-js/builder-doc/docs/en/shared/micro-frontend.md';
+
+<MicroFrontend />
+
+## Module Federation
+
+import ModuleFederation from '@modern-js/builder-doc/docs/en/shared/module-federation.md';
+
+<ModuleFederation />
+
 ## Rspack
 
 import Rspack from '@modern-js/builder-doc/docs/en/shared/rspack.md';

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

@@ -7,7 +7,7 @@ sidebar_position: 1
 
 **Modern.js is an open source web engineering system from ByteDance**, which provides multiple solutions to help developers solve problems in different development scenarios.
 
-Currently, Modern.js includes three solutions, targeting web application development, npm package development, and document site development:
+Currently, Modern.js includes three solutions, targeting web application development, npm package development, and web application building:
 
 import { SolutionCards } from '@site/src/components/SolutionCards';
 
@@ -24,9 +24,9 @@ import { SolutionCards } from '@site/src/components/SolutionCards';
       link: 'http://modernjs.dev/module-tools/en/',
     },
     {
-      title: 'Modern.js Doc',
-      description: 'For document site development',
-      link: 'http://modernjs.dev/doc-tools/',
+      title: 'Modern.js Builder',
+      description: 'For web application building',
+      link: 'http://modernjs.dev/builder/en/',
     },
   ]}
 />
@@ -38,13 +38,17 @@ As part of the Modern.js engineering system, each of the above solutions can be
 **The current documentation site corresponds to the Modern.js framework**, which is used to developing web applications.
 
 - If you need to develop an npm package, please refer to the [Modern.js Module](https://modernjs.dev/module-tools) documentation.
-- If you need to develop a documentation site, please refer to the [Modern.js Doc](https://modernjs.dev/doc-tools/) documentation.
-- If you need to implement a web development framework based on the Modern.js build engine, please refer to the [Modern.js Builder](https://modernjs.dev/builder) documentation.
+- If you need to implement a web development framework based on the Modern.js build tool, please refer to the [Modern.js Builder](https://modernjs.dev/builder) documentation.
 
 :::tip
 Since the Modern.js framework is the most widely used, in this documentation site, we will omit "framework" and directly refer to it as Modern.js.
 :::
 
+Modern.js can also be combined with the following solutions:
+
+- If you need to develop a documentation site, [Rspress](https://rspress.dev/) is recommended.
+- If you need to introduce micro-frontend architecture, [Garfish](https://garfishjs.org/) is recommended.
+
 ## Modern.js Framework
 
 **The Modern.js framework is a progressive web framework based on React**. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.

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

@@ -66,7 +66,7 @@ pipeline.use((count, next) => {
   return count * 2;
 });
 
-// 3. 执行
+// 3. Run
 pipeline.run(1); // 2
 pipeline.run(5); // 6
 ```
@@ -155,7 +155,7 @@ workflow.use(count => {
   return count * 2;
 });
 
-// 3. 执行
+// 3. Run
 workflow.run(1); // [2, 2]
 workflow.run(5); // [6, 10]
 ```

package/docs/en/guides/topic-detail/generator/create/use.mdx

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # Usage
 
-Modern.js provides `@modern-js/create` tool for creating project templates provided by Modern.js, including [Web App](https://modernjs.dev/), [Npm Module](https://modernjs.dev/module-tools), [Modern Doc](https://modernjs.dev/doc-tools), [Monorepo](/guides/topic-detail/monorepo/intro.html).
+Modern.js provides `@modern-js/create` tool for creating project templates provided by Modern.js, including [Web App](https://modernjs.dev/), [Npm Module](https://modernjs.dev/module-tools), [Monorepo](/guides/topic-detail/monorepo/intro.html).
 
 The following will introduce how to use `@modern-js/create`.
 

package/docs/en/guides/topic-detail/generator/plugin/category.md

@@ -58,7 +58,7 @@ npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
 ? Please select the base type of the plugin: Web App
 ```
 
-### 自定义
+### Custom
 
 ```bash
 npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin

package/docs/en/guides/topic-detail/generator/plugin/context.md

@@ -37,7 +37,7 @@ context.addInputBefore('packageManager', {
   properties: {
     'username': {
       type: 'string',
-      title: '用户名',
+      title: 'Username',
     },
   },
 });

package/docs/en/guides/topic-detail/micro-frontend/c01-introduction.mdx

@@ -4,12 +4,9 @@ title: Introduction
 ---
 # Introduction
 
-Micro frontend is an architecture similar to microservices. It is an architectural style composed of multiple front-end applications delivered independently. It decomposes the front-end application into some smaller and simpler applications that can be independently developed, tested and deployed., while still a cohesive single product in the eyes of users.
+import MicroFrontend from '@modern-js/builder-doc/docs/en/shared/micro-frontend.md';
 
-It mainly solves two problems:
-
-- As the iterative application of the project becomes larger and more difficult to maintain.
-- Collaborative development of projects across teams or departments leads to inefficiencies.
+<MicroFrontend />
 
 ## Keyword
 

package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -1,6 +1,6 @@
 ---
 sidebar_position: 2
-title: development
+title: Development
 ---
 
 # Experience Micro Frontend
@@ -16,7 +16,7 @@ Currently supports two routing modes
 - Self-controlled routing
 - Conventional routing
 
-First, clarify the routing mode of the main application [create a conventional routing main application](#创建约定式路由主应用) or [create a self-controlled routing main application](#创建自控式路由主应用)
+First, clarify the routing mode of the main application [create a file-based routing main App](#file-based-routing-main-app) or [create a self-controlled main App](#self-controlled-main-app)
 
 In this experience we will create two sub-applications Table and Dashboard for the main application (Table is reduced routing, Dashboard is self-controlled routing)
 

package/docs/en/guides/topic-detail/model/auto-actions.mdx

@@ -23,7 +23,7 @@ function Counter() {
   const [state, actions] = useModel(countModel);
 
   useEffect(() => {
-    // 增加 1
+    // Add 1
     actions.setState(state + 1);
   }, []);
 }

package/docs/en/guides/topic-detail/model/performance.mdx

@@ -84,7 +84,8 @@ const fooModel = model('foo').define({
 });
 
 function ComponentA() {
-  // 通过传入 selector 函数，只返回 a 状态给组件
+  // By passing in the selector function
+  // only the a state is returned to the component
   const [stateA] = useModel(fooModel, state => state.a);
 
   return <div>{stateA}</div>;

package/docs/en/guides/topic-detail/model/typescript-best-practice.mdx

@@ -30,7 +30,7 @@ export const foo = model<State>('foo').define({
 });
 ```
 
-When you declare type information for the State of a Model, the `computed` and `actions` of the Model can get the correct type information. In fact, even if we don't define State type information in the example code above, the type information of State can be automatically inferred based on the initial value information of `state`. However, we still recommend that you declare the type information of State when defining a Model because the type information of State inferred based on the initial value information of `state` may be incomplete (missing fields or field type information), and the type information of State cannot be automatically inferred based on the initial value information of `state` when using [Function Type](/apis/app/runtime/model/model_#函数类型) to define the Model.
+When you declare type information for the State of a Model, the `computed` and `actions` of the Model can get the correct type information. In fact, even if we don't define State type information in the example code above, the type information of State can be automatically inferred based on the initial value information of `state`. However, we still recommend that you declare the type information of State when defining a Model because the type information of State inferred based on the initial value information of `state` may be incomplete (missing fields or field type information), and the type information of State cannot be automatically inferred based on the initial value information of `state` when using [Function Type](/apis/app/runtime/model/model_#function-type) to define the Model.
 
 ## Dependent types of Derived State
 

package/docs/en/guides/topic-detail/model/use-model.mdx

@@ -39,7 +39,7 @@ const barModel = model('bar').define({
 });
 
 const [state, actions] = useModel([fooModel, barModel]);
-// 或
+// Or
 const [state, actions] = useModel(fooModel, barModel);
 ```
 

package/docs/en/tutorials/first-app/c05-loader.mdx

@@ -78,8 +78,6 @@ function Index() {
 export default Index;
 ```
 
-{/* Todo 重新截图，SSR 内容  */}
-
 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/docs/zh/community/blog/v2-release-note.mdx

@@ -205,17 +205,17 @@ Modern.js Module 的核心能力包括：
 
 > 如果你对 Modern.js Module 感兴趣，请移步[「Modern.js Module 文档」](https://modernjs.dev/module-tools)来了解更多。
 
-## Modern.js Doc
+## Rspress
 
-Modern.js Doc 是一个面向文档站场景的框架，它的目标是给开发者提供一个简单、高效、可扩展的文档站解决方案。
+Rspress 是一个面向文档站场景的框架，它的目标是给开发者提供一个简单、高效、可扩展的文档站解决方案。
 
-![Modern.js Doc 官网介绍页](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/v2-release/doc-tools.png)
+![Rspress 官网介绍页](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/v2-release/doc-tools.png)
 
 <div style={{ textAlign: 'center', fontStyle: 'italic' }}>
-  Modern.js Doc 官网介绍页
+  Rspress 官网介绍页
 </div>
 
-目前，Modern.js Doc 包含如下能力：
+目前，Rspress 包含如下能力：
 
 - **基于 Rspack 构建**：项目构建和 HMR 速度飞快，提供愉悦的开发和生产部署体验。
 - **支持 MDX 语法**：在普通 Markdown 语法的基础上可以嵌入 React 组件和 JSX 语法。
@@ -224,9 +224,9 @@ Modern.js Doc 是一个面向文档站场景的框架，它的目标是给开发
 - **自定义主题**：内置一套默认主题，你可以基于这套主题进行扩展，也可以从零定制一套自定义主题。
 - **插件机制**：提供丰富的插件钩子能力，让你能够充分自定义扩展框架功能。
 
-我们做 Modern.js Doc 的初心，是为了解决我们团队内的文档站搭建需求。随着 Modern.js Doc 的功能逐渐完整，我们也将它开放给社区使用，使它能发挥更大的价值。
+我们做 Rspress 的初心，是为了解决我们团队内的文档站搭建需求。随着 Rspress 的功能逐渐完整，我们也将它开放给社区使用，使它能发挥更大的价值。
 
-目前，Modern.js Doc 仍处于 beta 测试状态，相关源代码已经开放在 [Modern.js 仓库](https://github.com/web-infra-dev/modern.js) 中，并提供了基础的 [使用文档](https://modernjs.dev/doc-tools)。在未来，我们将继续投入，使之成为一个完成度更高的文档解决方案。
+目前，Rspress 仍处于 beta 测试状态，相关源代码已经开放在 [Rspress 仓库](https://github.com/web-infra-dev/rspress) 中，并提供了基础的 [使用文档](https://rspress.dev/)。在未来，我们将继续投入，使之成为一个完成度更高的文档解决方案。
 
 ## 致谢
 
@@ -236,7 +236,6 @@ Modern.js 中的部分代码实现参考了社区中的开源项目，我们对
 - `@modern-js/plugin`: hook API 的实现参考了 [farrow-pipeline](https://github.com/farrow-js/farrow/tree/master/packages/farrow-pipeline)。
 - `@modern-js/builder`: moduleScope 和 fileSize 插件参考了 [create-react-app](https://github.com/facebook/create-react-app)，TsConfigPathsPlugin 参考了 [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin)，generateMetaTags 函数参考了 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)。
 - `@modern-js/plugin-testing`: jest runner 参考了 [jest-cli](https://github.com/facebook/jest/blob/fdc74af37235354e077edeeee8aa2d1a4a863032/packages/jest-cli/src/cli/index.ts#L21)。
-- `@modern-js/doc-tools`: 部分样式参考了 [vitepress](https://github.com/vuejs/vitepress)。
 - `@modern-js/plugin-data-loader`: 部分实现参考了 [remix](https://github.com/remix-run/remix)。
 
 ## 最后

package/docs/zh/community/contributing-guide.mdx

@@ -188,14 +188,13 @@ root
 └─ packages
    └─ document
        ├─ builder-doc    # Modern.js Builder 文档
-       ├─ doc-tools-doc  # Modern.js Doc 文档
        ├─ main-doc       # Modern.js Framework 文档
        └─ module-doc     # Modern.js Module 文档
 ```
 
-文档站使用 [Modern.js Doc](https://modernjs.dev/doc-tools) 构建，文档内容可以使用 markdown 或 mdx 语法编写。详细使用方法可以参考 [Modern.js Doc 文档](https://modernjs.dev/doc-tools)。
+文档站使用 Rspress 构建，文档内容可以使用 markdown 或 mdx 语法编写。详细使用方法可以参考 [Rspress 文档](https://rspress.dev/)。
 
-Modern.js Doc 的源代码可以在 [这个文件夹](https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/doc-tools) 中找到。
+Rspress 的源代码可以在 [这个仓库](https://github.com/web-infra-dev/rspress) 中找到。
 
 ---
 

package/docs/zh/configure/app/builder-plugins.mdx

@@ -9,7 +9,7 @@ sidebar_position: 21
 
 用于配置 Modern.js Builder 构建插件。
 
-Modern.js Builder 是 Modern.js 底层的构建引擎，请阅读 [构建能力](/guides/concept/builder) 了解相关背景。
+Modern.js Builder 是 Modern.js 底层的构建工具，请阅读 [构建能力](/guides/concept/builder) 了解相关背景。
 
 如果你想了解 Builder 插件的编写方式，可以参考 [Modern.js Builder - 插件系统](https://modernjs.dev/builder/plugins/introduction.html)。
 

package/docs/zh/configure/app/source/enable-async-entry.mdx

@@ -9,11 +9,13 @@ sidebar_label: enableAsyncEntry
 
 该选项用于 webpack 模块联邦（Module Federation）场景。
 
-开启此选项后，Modern.js 会通过 Dynamic Import 来包裹自动生成的入口文件（Asynchronous Boundaries），使页面代码可以消费模块联邦生成的远程模块。
+开启此选项后，Modern.js 会通过 dynamic import 来包裹自动生成的入口文件（Asynchronous Boundaries），使页面代码可以消费模块联邦生成的远程模块。
 
 ## 背景知识
 
-如果不了解 webpack 模块联邦，请先阅读 [Module Federation 官方文档](https://webpack.docschina.org/concepts/module-federation/)。
+import ModuleFederation from '@modern-js/builder-doc/docs/zh/shared/module-federation.md';
+
+<ModuleFederation />
 
 ## 示例
 

package/docs/zh/configure/app/tools/tailwindcss.mdx

@@ -17,7 +17,13 @@ const tailwind = {
 };
 ```
 
-对应 [Tailwind CSS](https://tailwindcss.com/docs/configuration) 的配置。
+用于修改 [Tailwind CSS](https://tailwindcss.com/docs/configuration) 的配置项。
+
+### 启用 Tailwind CSS
+
+在使用 `tools.tailwindcss` 之前，你需要启用 Modern.js 的 Tailwind CSS 插件。
+
+请阅读[「使用 Tailwind CSS」](/guides/basic-features/css.html#使用-tailwind-css) 章节来了解开启方式。
 
 ### Function 类型
 
@@ -53,6 +59,40 @@ export default {
 
 ### 注意事项
 
-注意，如果你同时使用了 [source.designSystem](/configure/app/source/design-system) 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `source.designSystem` 的值所覆盖。
+注意：
+
+- 如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
+- 如果你同时使用了 `source.designSystem` 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `source.designSystem` 的值所覆盖。
 
 其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。
+
+### 关于 source.designSystem
+
+`source.designSystem` 是 Modern.js 中废弃的配置项。
+
+从 Modern.js vMAJOR_VERSION.33.0 版本开始，你可以使用 Tailwind CSS 的 `theme` 配置项来代替 `source.designSystem`，不再需要将 `theme` 配置拆分并设置到 `designSystem` 上。
+
+- 旧版本用法：
+
+```ts title="modern.config.ts"
+const { theme, ...rest } = tailwindConfig;
+
+export default {
+  tools: {
+    tailwindcss: rest,
+  },
+  source: {
+    designSystem: theme,
+  },
+};
+```
+
+- 当前版本用法：
+
+```ts title="modern.config.ts"
+export default {
+  tools: {
+    tailwindcss: tailwindConfig,
+  },
+};
+```