@modern-js/main-doc 2.32.1 → 2.33.0

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

@@ -103,37 +103,46 @@ const App = () => (
 
 :::
 
-### Tailwind CSS 自动补全
-
-Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件，用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
+### 配置 Tailwind CSS
 
-你可以参考以下步骤来启动自动补全功能：
+在 Modern.js 中，你有两种方式来配置 Tailwind CSS：
 
-1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
-2. 在项目的根目录创建 `tailwind.config.ts` 文件，并写入你需要的 Tailwind CSS 配置。
+1. 使用 `tailwind.config.{ts,js}` 文件，该用法与 Tailwind CSS 的官方用法一致，请参考 ["Tailwind CSS - Configuration"](https://tailwindcss.com/docs/configuration) 来了解更多用法。
 
 ```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. 在 `modern.config.ts` 中通过 [tools.tailwindcss](/configure/app/tools/tailwindcss) 引用你创建的 `tailwind.config.ts` 文件，使 Modern.js 可以正确识别 Tailwind CSS 配置内容。
+:::tip
+请升级 Modern.js 到 >= MAJOR_VERSION.33.0 版本，以支持自动读取 `tailwind.config.{ts,js}` 文件。
+:::
 
-```ts title="modern.config.ts"
-import tailwindConfig from './tailwind.config';
+2. 使用 [tools.tailwindcss](/configure/app/tools/tailwindcss.html) 配置项，这是旧版本的用法，我们更推荐使用 `tailwind.config.{ts,js}` 文件进行配置。
 
-export default defineConfig({
+```ts title="modern.config.ts"
+export default {
   tools: {
-    tailwindcss: tailwindConfig,
+    tailwindcss: {
+      content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    },
   },
-});
+};
 ```
 
+如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
+
+### Tailwind CSS 自动补全
+
+Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件，用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
+
+你可以参考以下步骤来启动自动补全功能：
+
+1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
+2. 如果项目的根目录没有 `tailwind.config.{ts,js}` 文件，那么你需要创建该文件，并写入当前项目的 Tailwind CSS 配置，否则 IDE 插件将无法正确生效。
 
 ### Tailwind CSS 版本
 

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.1",
+  "version": "2.33.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.32.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.1",
-    "@modern-js/doc-tools": "2.32.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.32.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,68 +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',
+      },
     ],
-    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',
+    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',
       },
-      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',
     },
-    route: {
-      // exclude document fragments from routes
-      exclude: ['scripts/**', '**/zh/components/**', '**/en/components/**'],
+  ],
+  builderConfig: {
+    output: {
+      disableTsChecker: true,
+      svgDefaultExport: 'component',
+      dataUriLimit: 0,
     },
-    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),
-        },
+    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>