docs: update solutions description (#4948)

README.md

@@ -18,17 +18,15 @@ English | [简体中文](./README.zh-CN.md)
 
 ## Introduction
 
-Modern.js is an open source web engineering system from ByteDance, including multiple solutions:
+Modern.js is an open source web engineering system from ByteDance, including:
 
 - 🦄 [Modern.js Framework](https://modernjs.dev/en/): A progressive React framework for web development.
 - 🐧 [Modern.js Module](https://modernjs.dev/module-tools/en/): A powerful solution for npm package development.
-- 🐈 [Modern.js Builder](https://modernjs.dev/builder/en/): An Rspack-based build tool for web development.
 
 ## Getting Started
 
 - Use [Modern.js Framework](https://modernjs.dev/en/guides/get-started/quick-start) to develop a web application.
 - Use [Modern.js Module](https://modernjs.dev/module-tools/en/guide/intro/getting-started.html) to develop an npm package.
-- Use [Modern.js Builder](https://modernjs.dev/builder/en/guide/quick-start.html) to provide build capabilities for your own web framework.
 
 ## Ecosystem
 
@@ -77,7 +75,6 @@ Some implementations of Modern.js are modified from existing projects, such as [
 
 - `@modern-js/bundle-require`: is modified from [bundle-require](https://github.com/egoist/bundle-require).
 - `@modern-js/plugin`: the hooks API is referenced from [farrow-pipeline](https://github.com/farrow-js/farrow/tree/master/packages/farrow-pipeline).
-- `@modern-js/builder`: the moduleScope and fileSize plugins are referenced from [create-react-app](https://github.com/facebook/create-react-app), the generateMetaTags function is referenced from [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin).
 - `@modern-js/plugin-testing`: the jest runner is referenced from [jest-cli](https://github.com/facebook/jest/blob/fdc74af37235354e077edeeee8aa2d1a4a863032/packages/jest-cli/src/cli/index.ts#L21).
 - `@modern-js/plugin-data-loader`: some code is referenced from [remix](https://github.com/remix-run/remix).
 - `@modern-js/babel-plugin-module-resolver`: is modified from [babel-plugin-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver).

README.zh-CN.md

@@ -18,17 +18,15 @@
 
 ## 介绍
 
-Modern.js 是字节跳动 Web 工程体系的开源版本，包含以下解决方案：
+Modern.js 是字节跳动 Web 工程体系的开源版本，包含：
 
 - 🦄 [Modern.js Framework](https://modernjs.dev/)：基于 React 的渐进式 Web 开发框架。
 - 🐧 [Modern.js Module](https://modernjs.dev/module-tools)：简单、高性能的 npm 包开发方案。
-- 🐈 [Modern.js Builder](https://modernjs.dev/builder/)：基于 Rspack 的 Web 构建工具。
 
 ## 快速上手
 
 - 使用 [Modern.js Framework](https://modernjs.dev/guides/get-started/quick-start) 来开发一个 Web 应用。
 - 使用 [Modern.js Module](https://modernjs.dev/module-tools/guide/intro/getting-started.html) 来开发一个 npm 包。
-- 使用 [Modern.js Builder](https://modernjs.dev/builder/guide/quick-start.html) 来为你的 Web 框架提供构建能力。
 
 ## 生态
 
@@ -77,7 +75,6 @@ Modern.js 中的部分代码是参考社区中的其他项目实现的，比如
 
 - `@modern-js/bundle-require`：修改自 [bundle-require](https://github.com/egoist/bundle-require)。
 - `@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)，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/plugin-data-loader`：部分实现参考了 [remix](https://github.com/remix-run/remix)。
 - `@modern-js/babel-plugin-module-resolver`: 修改自 [babel-plugin-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver)。

packages/document/main-doc/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 web application building:
+Currently, Modern.js includes two solutions, targeting web application development and npm package development:
 
 import { SolutionCards } from '@site/src/components/SolutionCards';
 
@@ -23,11 +23,6 @@ import { SolutionCards } from '@site/src/components/SolutionCards';
       description: 'For npm package development',
       link: 'http://modernjs.dev/module-tools/en/',
     },
-    {
-      title: 'Modern.js Builder',
-      description: 'For web application building',
-      link: 'http://modernjs.dev/builder/en/',
-    },
   ]}
 />
 
@@ -37,18 +32,14 @@ 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 implement a web development framework based on the Modern.js build tool, please refer to the [Modern.js Builder](https://modernjs.dev/builder) documentation.
+- If you need to develop an npm package, please refer to the [Modern.js Module documentation](https://modernjs.dev/module-tools).
+- If you need a build tool to bundle web applications, [Rsbuild](https://rsbuild.dev/) is recommended.
+- If you need to develop a documentation site, [Rspress](https://rspress.dev/) is recommended.
 
 :::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.
@@ -86,6 +77,10 @@ Umi is a popular React framework in the Chinese community and serves as the unde
 
 In addition, Modern.js provides richer server-side features, including comprehensive SSR capabilities, integrated BFF development capabilities, and support for custom web servers. These capabilities have been extensively validated by ByteDance in numerous online applications and can be directly used in production environments.
 
+### Remix
+
+Pelease refer to [Modern.js vs Remix](https://github.com/web-infra-dev/modern.js/discussions/4872).
+
 ## Next Step
 
 If you want to learn how to use the Modern.js framework, you can try to [create your first application](/tutorials/first-app/c01-start), or read the [Quick Start](/guides/get-started/quick-start) guide.

packages/document/main-doc/docs/zh/guides/get-started/introduction.mdx

@@ -7,7 +7,7 @@ sidebar_position: 1
 
 **Modern.js 是字节跳动 Web 工程体系的开源版本**，它提供多个解决方案，来帮助开发者解决不同研发场景下的问题。
 
-目前 Modern.js 包含三个解决方案，分别面向 Web 应用开发场景、npm 包开发场景和 Web 应用构建场景：
+目前 Modern.js 包含两个解决方案，分别面向 Web 应用开发场景 和 npm 包开发场景：
 
 import { SolutionCards } from '@site/src/components/SolutionCards';
 
@@ -23,32 +23,21 @@ import { SolutionCards } from '@site/src/components/SolutionCards';
       description: '易用、高性能的 npm 包开发方案',
       link: 'http://modernjs.dev/module-tools/',
     },
-    {
-      title: 'Modern.js Builder',
-      description: '基于 Rspack 的 Web 构建工具',
-      link: 'http://modernjs.dev/builder/',
-    },
   ]}
 />
 
-作为 Modern.js 工程体系的一部分，以上每个解决方案都可以被单独使用，并且各自部署了独立的文档站点。开发者可以按需选择其中的一个或多个解决方案来使用。
-
 ## 关于文档
 
 **当前文档站对应的是 Modern.js 框架**，适用于开发 Web 应用。
 
-- 如果你需要开发一个 npm 包，请移步 [Modern.js Module](https://modernjs.dev/module-tools) 文档。
-- 如果你需要基于 Modern.js 的构建工具来实现一个 Web 开发框架，请移步 [Modern.js Builder](https://modernjs.dev/builder) 文档。
+- 如果你需要开发一个 npm 包，请移步 [Modern.js Module 文档](https://modernjs.dev/module-tools)。
+- 如果你需要一个构建工具来打包 Web 应用，请移步 [Rsbuild 文档](https://rsbuild.dev/)。
+- 如果你需要开发一个文档站点，推荐使用 [Rspress 文档](https://rspress.dev/)。
 
 :::tip
 由于 Modern.js 框架的使用最为广泛，在本文档站中，我们会省略「框架」，直接称其为 Modern.js。
 :::
 
-Modern.js 也可以与以下解决方案结合使用：
-
-- 如果你需要开发一个文档站点，推荐使用 [Rspress](https://rspress.dev/) 文档。
-- 如果你需要引入微前端架构，推荐使用 [Garfish](https://garfishjs.org/)。
-
 ## Modern.js 框架
 
 **Modern.js 框架是一个基于 React 的渐进式 Web 开发框架**。在字节跳动内部，我们将 Modern.js 封装为上层框架，并支撑了数千个 Web 应用的研发。
@@ -86,6 +75,10 @@ Umi 是中文社区中非常流行的 React 框架，也是蚂蚁集团的底层
 
 此外，Modern.js 的服务端能力更加丰富，包括完备的 SSR 能力、一体化 BFF 开发能力和自定义 Web Server 支持。这些能力经过了字节跳动大量线上应用的验证，可以直接用于生产环境。
 
+### Remix
+
+请参考 [Modern.js vs Remix](https://github.com/web-infra-dev/modern.js/discussions/4872)。
+
 ## 下一步
 
 如果你希望了解如何使用 Modern.js 框架，可以尝试 [创建第一个应用](/tutorials/first-app/c01-start)，或是阅读 [快速上手](/guides/get-started/quick-start)。

packages/document/main-doc/rspress.config.ts

@@ -50,12 +50,16 @@ const getNavbar = (lang: string): NavItem[] => {
       text: `v${version}`,
       items: [
         {
-          text: 'Modern.js Module',
-          link: 'https://modernjs.dev/module-tools/en/',
+          text: 'Rsbuild',
+          link: 'https://github.com/web-infra-dev/rsbuild',
+        },
+        {
+          text: 'Rspress',
+          link: 'https://github.com/web-infra-dev/rspress',
         },
         {
-          text: 'Modern.js Builder',
-          link: 'https://modernjs.dev/builder/en/',
+          text: 'Modern.js Module',
+          link: 'https://modernjs.dev/module-tools/en/',
         },
         {
           text: 'Modern.js v1',

packages/document/main-doc/src/components/SolutionCards/index.module.scss

@@ -42,6 +42,10 @@
   }
 }
 
+.twoCards {
+  flex: 0 1 48%;
+}
+
 @media (max-width: 480px) {
   .card {
     flex: 0 1 100%;

packages/document/main-doc/src/components/SolutionCards/index.tsx

@@ -14,7 +14,11 @@ export const SolutionCards = ({ cards }: { cards: Card[] }) => {
       <a
         key={card.title}
         href={card.link}
-        className={clsx([styles.card, classNames[index]])}
+        className={clsx([
+          styles.card,
+          classNames[index],
+          cards.length === 2 ? styles.twoCards : '',
+        ])}
         target="_blank"
       >
         <div className={styles.title}>{card.title}</div>

packages/document/main-doc/src/pages/index.tsx

@@ -99,16 +99,6 @@ export default function Home() {
       href: `https://modernjs.dev/module-tools${lang === 'en' ? '/en' : ''}`,
       desc: t('solutionsDesc2'),
     },
-    {
-      title: 'Modern.js Builder',
-      href: `https://modernjs.dev/builder${lang === 'en' ? '/en' : ''}`,
-      desc: t('solutionsDesc3'),
-    },
-    {
-      title: 'Rspress',
-      href: `https://rspress.dev${lang === 'en' ? '' : '/zh'}`,
-      desc: t('solutionsDesc4'),
-    },
   ];
 
   return (