@modern-js/main-doc 2.32.2-alpha.1 → 2.33.0

package/CHANGELOG.md

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

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/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/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/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/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/guides/concept/builder.mdx

@@ -2,18 +2,18 @@
 sidebar_position: 2
 ---
 
-# 构建引擎
+# 构建工具
 
 **Modern.js 的构建能力由 [Modern.js Builder](https://modernjs.dev/builder) 提供。**
 
-Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向 Web 开发场景的构建引擎，可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 Rspack 等多种打包工具，默认情况下使用最成熟的 webpack 进行打包。
+Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个基于 Rspack 的 Web 构建工具，可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 Rspack 等多种打包工具，默认情况下使用最成熟的 webpack 进行打包。
 
 ## 构建架构
 
 从构建的角度看，Modern.js 分为三层架构，从上到下依次是：
 
 - 上层研发框架：Modern.js。
-- 通用构建引擎：Modern.js Builder。
+- 通用构建工具：Modern.js Builder。
 - 底层打包工具：webpack 和 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/zh/guides/get-started/glossary.mdx

@@ -30,10 +30,22 @@ CSR 是 "Client-Side Rendering"（客户端渲染）的缩写。它表示页面
 
 ## Garfish
 
-[Garfish](https://garfish.bytedance.net/) 是一套微前端解决方案，主要用于解决 web 应用的跨团队协作、技术体系多样化等问题。
+[Garfish](https://garfishjs.org/) 是一套微前端解决方案，主要用于解决 web 应用的跨团队协作、技术体系多样化等问题。
 
 它从架构层面出发，将多个独立交付的前端应用组成整体，这些前端应用能够独立开发、独立测试、独立部署，但是在用户视角仍然是内聚的单个产品。
 
+## Micro-frontend
+
+import MicroFrontend from '@modern-js/builder-doc/docs/zh/shared/micro-frontend.md';
+
+<MicroFrontend />
+
+## Module Federation
+
+import ModuleFederation from '@modern-js/builder-doc/docs/zh/shared/module-federation.md';
+
+<ModuleFederation />
+
 ## Rspack
 
 import Rspack from '@modern-js/builder-doc/docs/zh/shared/rspack.md';

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

@@ -7,7 +7,7 @@ sidebar_position: 1
 
 **Modern.js 是字节跳动 Web 工程体系的开源版本**，它提供多个解决方案，来帮助开发者解决不同研发场景下的问题。
 
-目前 Modern.js 包含三个解决方案，分别面向 Web 应用开发场景、npm 包开发场景和文档站开发场景：
+目前 Modern.js 包含三个解决方案，分别面向 Web 应用开发场景、npm 包开发场景和 Web 应用构建场景：
 
 import { SolutionCards } from '@site/src/components/SolutionCards';
 
@@ -24,9 +24,9 @@ import { SolutionCards } from '@site/src/components/SolutionCards';
       link: 'http://modernjs.dev/module-tools/',
     },
     {
-      title: 'Modern.js Doc',
-      description: '基于 Rspack 的文档站解决方案',
-      link: 'http://modernjs.dev/doc-tools/zh/',
+      title: 'Modern.js Builder',
+      description: '基于 Rspack 的 Web 构建工具',
+      link: 'http://modernjs.dev/builder/',
     },
   ]}
 />
@@ -37,14 +37,18 @@ import { SolutionCards } from '@site/src/components/SolutionCards';
 
 **当前文档站对应的是 Modern.js 框架**，适用于开发 Web 应用。
 
-- 如果你需要开发一个 npm 包，请移步至 [Modern.js Module](https://modernjs.dev/module-tools) 文档。
-- 如果你需要开发一个文档站点，请移步至 [Modern.js Doc](https://modernjs.dev/doc-tools/zh) 文档。
-- 如果你需要基于 Modern.js 的构建引擎来实现一个 Web 开发框架，请移步至 [Modern.js Builder](https://modernjs.dev/builder) 文档。
+- 如果你需要开发一个 npm 包，请移步 [Modern.js Module](https://modernjs.dev/module-tools) 文档。
+- 如果你需要基于 Modern.js 的构建工具来实现一个 Web 开发框架，请移步 [Modern.js Builder](https://modernjs.dev/builder) 文档。
 
 :::tip
 由于 Modern.js 框架的使用最为广泛，在本文档站中，我们会省略「框架」，直接称其为 Modern.js。
 :::
 
+Modern.js 也可以与以下解决方案结合使用：
+
+- 如果你需要开发一个文档站点，推荐使用 [Rspress](https://rspress.dev/) 文档。
+- 如果你需要引入微前端架构，推荐使用 [Garfish](https://garfishjs.org/)。
+
 ## Modern.js 框架
 
 **Modern.js 框架是一个基于 React 的渐进式 Web 开发框架**。在字节跳动内部，我们将 Modern.js 封装为上层框架，并支撑了数千个 Web 应用的研发。

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

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # 使用
 
-Modern.js 提供了 `@modern-js/create` 工具用于创建 Modern.js 提供的工程方案项目，例如 [Web 应用](https://modernjs.dev/)、[Npm 模块](https://modernjs.dev/module-tools)、[文档站](https://modernjs.dev/doc-tools)、[Monorepo](/guides/topic-detail/monorepo/intro.html) 等。
+Modern.js 提供了 `@modern-js/create` 工具用于创建 Modern.js 提供的工程方案项目，例如 [Web 应用](https://modernjs.dev/)、[Npm 模块](https://modernjs.dev/module-tools)、[Monorepo](/guides/topic-detail/monorepo/intro.html) 等。
 
 下面将介绍 `@modern-js/create` 的使用姿势。
 

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

@@ -1,15 +1,12 @@
 ---
 sidebar_position: 1
-title: 微前端介绍
 ---
-# 微前端介绍
 
-微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。
+# 微前端介绍
 
-它主要解决了两个问题：
+import MicroFrontend from '@modern-js/builder-doc/docs/zh/shared/micro-frontend.md';
 
-- 随着项目迭代应用越来越庞大，难以维护。
-- 跨团队或跨部门协作开发项目导致效率低下的问题。
+<MicroFrontend />
 
 ## 微前端关键词
 

package/docs/zh/tutorials/first-app/c06-model.mdx

@@ -1,8 +1,5 @@
----
-title: 添加业务模型（状态管理）
----
 
-# 添加业务模型（状态管理）
+# 添加状态管理
 
 上一章节中，我们把硬编码的 `mockData` 改成从 Data Loader 中加载。
 

package/package.json

@@ -15,14 +15,14 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.32.2-alpha.1",
+  "version": "2.33.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.32.2-alpha.1"
+    "@modern-js/builder-doc": "^2.33.0"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -32,16 +32,17 @@
     "ts-node": "^10.9.1",
     "typescript": "^5",
     "fs-extra": "^10",
+    "rspress": "0.0.6",
+    "@rspress/shared": "0.0.6",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "2.32.2-alpha.1",
-    "@modern-js/doc-tools": "2.32.2-alpha.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.32.2-alpha.1"
+    "@modern-js/doc-plugin-auto-sidebar": "2.33.0",
+    "@modern-js/builder-doc": "2.33.0"
   },
   "scripts": {
-    "dev": "modern dev",
+    "dev": "rspress dev",
     "build": "npx ts-node ./scripts/sync.ts",
-    "build:doc": "modern build",
-    "preview": "modern preview"
+    "build:doc": "rspress build",
+    "preview": "rspress preview"
   }
 }

package/{modern.config.ts → rspress.config.ts}

@@ -1,5 +1,6 @@
 import path from 'path';
-import { docTools, defineConfig, type NavItem } from '@modern-js/doc-tools';
+import { defineConfig } from 'rspress/config';
+import { NavItem } from '@rspress/shared';
 import { pluginAutoSidebar } from '@modern-js/doc-plugin-auto-sidebar';
 
 const rootCategories = [
@@ -52,10 +53,6 @@ const getNavbar = (lang: string): NavItem[] => {
           text: 'Modern.js Module',
           link: 'https://modernjs.dev/module-tools/en/',
         },
-        {
-          text: 'Modern.js Doc',
-          link: 'https://modernjs.dev/doc-tools/',
-        },
         {
           text: 'Modern.js Builder',
           link: 'https://modernjs.dev/builder/en/',
@@ -70,25 +67,24 @@ const getNavbar = (lang: string): NavItem[] => {
 };
 
 export default defineConfig({
-  doc: {
-    root: docPath,
-    base: '/',
-    logo: 'https://lf-cdn-tos.bytescm.com/obj/static/webinfra/modern-js-website/assets/images/images/modernjs-logo.svg',
-    icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico',
-    lang: 'zh',
-    themeDir: path.join(__dirname, 'src'),
-    markdown: {
-      checkDeadLinks: true,
-      experimentalMdxRs: true,
-    },
-    head: [
-      `
+  root: docPath,
+  base: '/',
+  logo: 'https://lf-cdn-tos.bytescm.com/obj/static/webinfra/modern-js-website/assets/images/images/modernjs-logo.svg',
+  icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico',
+  lang: 'zh',
+  themeDir: path.join(__dirname, 'src'),
+  markdown: {
+    checkDeadLinks: true,
+    experimentalMdxRs: true,
+  },
+  head: [
+    `
           <script>
           ;(function (w, d, u, b, n, pc, ga, ae, po, s, p, e, t, pp) {pc = 'precollect';ga = 'getAttribute';ae = 'addEventListener';po = 'PerformanceObserver';s = function (m) {p = [].slice.call(arguments);p.push(Date.now(), location.href);(m == pc ? s.p.a : s.q).push(p)};s.q = [];s.p = { a: [] };w[n] = s;e = document.createElement('script');e.src = u + '?bid=' + b + '&globalName=' + n;e.crossorigin = u.indexOf('sdk-web') > 0 ? 'anonymous' : 'use-credentials';d.getElementsByTagName('head')[0].appendChild(e);if (ae in w) {s.pcErr = function (e) {e = e || w.event;t = e.target || e.srcElement;if (t instanceof Element || t instanceof HTMLElement) {if (t[ga]('integrity')) {w[n](pc, 'sri', t[ga]('href') || t[ga]('src'))} else {w[n](pc, 'st', { tagName: t.tagName, url: t[ga]('href') || t[ga]('src') })}} else {w[n](pc, 'err', e.error)}};s.pcRej = function (e) {e = e || w.event;w[n](pc, 'err', e.reason || (e.detail && e.detail.reason))};w[ae]('error', s.pcErr, true);w[ae]('unhandledrejection', s.pcRej, true);};if('PerformanceLongTaskTiming' in w) {pp = s.pp = { entries: [] };pp.observer = new PerformanceObserver(function (l) {pp.entries = pp.entries.concat(l.getEntries)});pp.observer.observe({ entryTypes: ['longtask', 'largest-contentful-paint','layout-shift'] })}})(window,document,'https://lf3-short.bytegoofy.com/slardar/fe/sdk-web/browser.cn.js','modernjs_dev','Slardar');
 
           </script>
           `,
-      `
+    `
           <script>
             window.Slardar('init', {
               bid: 'modernjs_dev'
@@ -96,76 +92,74 @@ export default defineConfig({
             window.Slardar('start')
           </script>
           `,
-    ],
-    themeConfig: {
-      locales: [
-        {
-          lang: 'zh',
-          title: 'Modern.js',
-          description:
-            'A Progressive React Framework for modern web development.',
-          nav: getNavbar('zh'),
-          label: '简体中文',
-        },
-        {
-          lang: 'en',
-          title: 'Modern.js',
-          description:
-            'A Progressive React Framework for modern web development.',
-          nav: getNavbar('en'),
-          label: 'English',
-        },
-      ],
-      editLink: {
-        docRepoBaseUrl:
-          'https://github.com/web-infra-dev/modern.js/tree/main/packages/document/main-doc/docs',
-        text: 'Edit this page on GitHub',
+  ],
+  themeConfig: {
+    locales: [
+      {
+        lang: 'zh',
+        title: 'Modern.js',
+        description:
+          'A Progressive React Framework for modern web development.',
+        nav: getNavbar('zh'),
+        label: '简体中文',
       },
-      socialLinks: [
-        {
-          icon: 'github',
-          mode: 'link',
-          content: 'https://github.com/web-infra-dev/modern.js',
-        },
-      ],
-    },
-    route: {
-      // exclude document fragments from routes
-      exclude: ['scripts/**', '**/zh/components/**', '**/en/components/**'],
-    },
-    replaceRules: [
       {
-        // The major version is different inside the ByteDance,
-        // so we use a flag to define it.
-        search: /MAJOR_VERSION/g,
-        replace: '2',
+        lang: 'en',
+        title: 'Modern.js',
+        description:
+          'A Progressive React Framework for modern web development.',
+        nav: getNavbar('en'),
+        label: 'English',
       },
     ],
-    builderConfig: {
-      output: {
-        disableTsChecker: true,
-        svgDefaultExport: 'component',
-        dataUriLimit: 0,
-      },
-      dev: {
-        startUrl: false,
+    editLink: {
+      docRepoBaseUrl:
+        'https://github.com/web-infra-dev/modern.js/tree/main/packages/document/main-doc/docs',
+      text: 'Edit this page on GitHub',
+    },
+    socialLinks: [
+      {
+        icon: 'github',
+        mode: 'link',
+        content: 'https://github.com/web-infra-dev/modern.js',
       },
-      source: {
-        alias: {
-          '@site-docs': path.join(__dirname, './docs/zh'),
-          '@site-docs-en': path.join(__dirname, './docs/en'),
-          '@site': require('path').resolve(__dirname),
-        },
+    ],
+  },
+  route: {
+    // exclude document fragments from routes
+    exclude: ['scripts/**', '**/zh/components/**', '**/en/components/**'],
+  },
+  replaceRules: [
+    {
+      // The major version is different inside the ByteDance,
+      // so we use a flag to define it.
+      search: /MAJOR_VERSION/g,
+      replace: '2',
+    },
+  ],
+  builderConfig: {
+    output: {
+      disableTsChecker: true,
+      svgDefaultExport: 'component',
+      dataUriLimit: 0,
+    },
+    dev: {
+      startUrl: false,
+    },
+    source: {
+      alias: {
+        '@site-docs': path.join(__dirname, './docs/zh'),
+        '@site-docs-en': path.join(__dirname, './docs/en'),
+        '@site': require('path').resolve(__dirname),
       },
     },
-    plugins: [
-      pluginAutoSidebar({
-        root: docPath,
-        categories: ['zh', 'en'].flatMap(lang =>
-          rootCategories.map(category => `${lang}/${category}`),
-        ),
-      }),
-    ],
   },
-  plugins: [docTools({})],
+  plugins: [
+    pluginAutoSidebar({
+      root: docPath,
+      categories: ['zh', 'en'].flatMap(lang =>
+        rootCategories.map(category => `${lang}/${category}`),
+      ),
+    }),
+  ],
 });

package/src/components/ContentCard/index.tsx

@@ -1,12 +1,11 @@
-import React, { ComponentType, SVGProps } from 'react';
+import React from 'react';
 import cl from 'classnames';
-import { withBase } from '@modern-js/doc-tools/runtime';
+import { withBase } from 'rspress/runtime';
 import styles from './index.module.scss';
 
 export interface ContentCardProps {
   title: string;
   desc?: string;
-  img?: string | ComponentType<SVGProps<SVGSVGElement>>;
   href: string;
 }
 

package/src/components/ListCard/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { withBase } from '@modern-js/doc-tools/runtime';
+import { withBase } from 'rspress/runtime';
 import styles from './index.module.css';
 
 export interface ICardProps {

package/src/components/RandomMemberList/index.tsx

@@ -1,4 +1,4 @@
-import { NoSSR } from '@modern-js/doc-tools/runtime';
+import { NoSSR } from 'rspress/runtime';
 import style from './index.module.scss';
 
 interface Member {

package/src/components/ShowcaseList/index.module.scss

@@ -18,10 +18,10 @@
   border-radius: 20px;
   overflow: hidden;
   transition: 0.15s ease-in;
-  border: 1px solid var(--modern-c-divider-light);
+  border: 1px solid var(--rp-c-divider-light);
 
   &:hover {
-    border-color: var(--modern-c-brand);
+    border-color: var(--rp-c-brand);
   }
 }
 
@@ -33,7 +33,7 @@
   cursor: pointer;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   pointer-events: none;
-  background-color: var(--modern-c-bg-soft);
+  background-color: var(--rp-c-bg-soft);
 }
 
 .bottom {
@@ -46,7 +46,7 @@
   font-weight: 600;
   font-size: 17px;
   line-height: 28px;
-  color: var(--modern-c-text-1);
+  color: var(--rp-c-text-1);
 }
 
 .type {
@@ -76,5 +76,5 @@
 .domain {
   font-size: 13px;
   line-height: 24px;
-  color: var(--modern-c-text-2);
+  color: var(--rp-c-text-2);
 }

package/src/components/SolutionCards/index.module.scss

@@ -7,8 +7,8 @@
 
 .card {
   cursor: pointer;
-  border: 1px solid var(--modern-c-bg-soft);
-  background-color: var(--modern-c-bg-soft);
+  border: 1px solid var(--rp-c-bg-soft);
+  background-color: var(--rp-c-bg-soft);
   transition: color 0.5s, background-color 0.5s;
   padding: 22px;
   border-radius: 16px;

package/src/i18n/enUS.ts

@@ -27,8 +27,8 @@ export const EN_US = {
   solutions: 'Solutions',
   solutionsDesc1: 'A progressive React framework for web development.',
   solutionsDesc2: 'A powerful solution for npm package development.',
-  solutionsDesc3: 'A Rspack based documentation site solution.',
-  solutionsDesc4: 'A build engine for web development.',
+  solutionsDesc3: 'An Rspack-based build tool for web development.',
+  solutionsDesc4: 'A fast Rspack-based static site generator',
 
   // Footer
   guide: 'Guide',

package/src/i18n/index.ts

@@ -1,4 +1,4 @@
-import { withBase, useLang } from '@modern-js/doc-tools/runtime';
+import { withBase, useLang } from 'rspress/runtime';
 import { EN_US } from './enUS';
 import { ZH_CN } from './zhCN';
 

package/src/i18n/zhCN.ts

@@ -27,8 +27,8 @@ export const ZH_CN: Record<keyof typeof EN_US, string> = {
   solutions: '解决方案',
   solutionsDesc1: '基于 React 的渐进式 Web 开发框架。',
   solutionsDesc2: '简单、高性能的 npm 包开发方案。',
-  solutionsDesc3: '基于 Rspack 的文档站解决方案。',
-  solutionsDesc4: '面向 Web 开发场景的构建引擎。',
+  solutionsDesc3: '基于 Rspack 的 Web 构建工具。',
+  solutionsDesc4: '基于 Rspack 的静态站点生成器。',
 
   // Footer
   guide: '指南',

package/src/index.ts

@@ -1,4 +1,4 @@
-import Theme from '@modern-js/doc-tools/theme';
+import Theme from 'rspress/theme';
 import HomeLayout from './pages';
 
 export default {
@@ -6,4 +6,5 @@ export default {
   HomeLayout,
 };
 
-export * from '@modern-js/doc-tools/theme';
+// eslint-disable-next-line import/export
+export * from 'rspress/theme';

package/src/pages/index.module.scss

@@ -233,6 +233,6 @@
   }
 }
 
-:global(.modern-doc-logo) {
+:global(.rspress-logo) {
   width: auto !important;
 }

package/src/pages/index.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable react/no-unescaped-entities */
 import clsx from 'clsx';
-import { useLang, Helmet, useLocation } from '@modern-js/doc-tools/runtime';
+import { useLang, Helmet, useLocation } from 'rspress/runtime';
 import { useEffect } from 'react';
 import ContentCard from '../components/ContentCard';
 import SecondaryTitle from '../components/SecondaryTitle';
@@ -99,13 +100,13 @@ export default function Home() {
       desc: t('solutionsDesc2'),
     },
     {
-      title: 'Modern.js Doc',
-      href: `https://modernjs.dev/doc-tools${lang === 'en' ? '' : '/zh'}`,
+      title: 'Modern.js Builder',
+      href: `https://modernjs.dev/builder${lang === 'en' ? '/en' : ''}`,
       desc: t('solutionsDesc3'),
     },
     {
-      title: 'Modern.js Builder',
-      href: `https://modernjs.dev/builder${lang === 'en' ? '/en' : ''}`,
+      title: 'Rspress',
+      href: `https://rspress.dev${lang === 'en' ? '' : '/zh'}`,
       desc: t('solutionsDesc4'),
     },
   ];
@@ -116,7 +117,7 @@ export default function Home() {
         <html className="dark"></html>
         <script>window.MODERN_THEME = 'dark';</script>
         <style type="text/css">{`
-          .modern-doc-appearance {
+          .rspress-doc-appearance {
             display: none!important;
           }
         `}</style>