@modern-js/main-doc 2.15.0 → 2.16.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @modern-js/main-doc
 
+## 2.16.0
+
+### Patch Changes
+
+- 63b3538: fix: dev server crashed when prepare api handler failed
+
+  fix: 修复更新 api server 报错导致 dev server 退出的问题
+
+- fe92de6: fix(builder): browserslist config should not affect node bundles
+
+  fix(builder): 修复 browserslist 配置会对 node 产物生效的问题
+
+- 4e876ab: chore: package.json include the monorepo-relative directory
+
+  chore: 在 package.json 中声明 monorepo 的子路径
+
+- Updated dependencies [fe92de6]
+- Updated dependencies [4e876ab]
+  - @modern-js/builder-doc@2.16.0
+
 ## 2.15.0
 
 ### Patch Changes

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

@@ -0,0 +1,268 @@
+---
+sidebar_position: 3
+---
+
+# Contributing Guide
+
+Thanks for that you are interested in contributing to Modern.js. Before starting your contribution, please take a moment to read the following guidelines.
+
+---
+
+## Setup the Dev Environment
+
+### Fork the Repo
+
+[Fork](https://help.github.com/articles/fork-a-repo/) this repository to your
+own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local.
+
+### Install Node.js
+
+We recommend using Node.js 16 or 18. You can check your currently used Node.js version with the following command:
+
+```bash
+node -v
+#v16.18.0
+```
+
+If you do not have Node.js installed in your current environment, you can use [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz/fnm) to install it.
+
+Here is an example of how to install the Node.js 16 LTS version via nvm:
+
+```bash
+# Install the LTS version of Node.js 16
+nvm install 16 --lts
+
+# Make the newly installed Node.js 16 as the default version
+nvm alias default 16
+
+# Switch to the newly installed Node.js 16
+nvm use 16
+```
+
+### Install pnpm
+
+```sh
+# Enable pnpm with corepack, only available on Node.js >= `v14.19.0`
+corepack enable
+```
+
+### Install Dependencies
+
+```sh
+pnpm install
+```
+
+What this will do:
+
+- Install all dependencies
+- Create symlinks between packages in the monorepo
+- Run the `prepare` script to build all packages (this will take some time, but is necessary to make ensure all packages are built)
+
+> A full rebuild of all packages is generally not required after this. If a new feature you are developing requires an updated version of another package, it is usually sufficient to build the changed dependencies.
+
+### Set Git Email
+
+Please make sure you have your email set up in `<https://github.com/settings/emails>`. This will be needed later when you want to submit a pull request.
+
+Check that your git client is already configured the email:
+
+```sh
+git config --list | grep email
+```
+
+Set the email to global config:
+
+```sh
+git config --global user.email "SOME_EMAIL@example.com"
+```
+
+Set the email for local repo:
+
+```sh
+git config user.email "SOME_EMAIL@example.com"
+```
+
+---
+
+## Making Changes and Building
+
+Once you have set up the local development environment in your forked repo, we can start development.
+
+### Checkout A New Branch
+
+It is recommended to develop on a new branch, as it will make things easier later when you submit a pull request:
+
+```sh
+git checkout -b MY_BRANCH_NAME
+```
+
+### Build the Package
+
+To build the package you want to change, first open the package directory, then run the `build` command:
+
+```sh
+# Replace some-path with the path of the package you want to work on
+cd ./packages/some-path
+pnpm run build
+```
+
+Alternatively, you can build the package from the root directory of the repository using the `--filter` option:
+
+```sh
+pnpm run --filter @modern-js/some-package build
+```
+
+Build all packages:
+
+```sh
+pnpm run prepare
+```
+
+If you need to clean all `node_modules/*` in the project, run the `reset` command:
+
+```sh
+pnpm run reset
+```
+
+---
+
+## Testing
+
+### Add New Tests
+
+If you've fixed a bug or added code that should be tested, then add some tests.
+
+You can add unit test cases in the `<PACKAGE_DIR>/tests` folder. The test syntax is based on [Jest](https://jestjs.io/) and [Vitest](https://vitest.dev/).
+
+### Run Unit Tests
+
+Before submitting a pull request, it's important to make sure that the changes haven't introduced any regressions or bugs. You can run the unit tests for the project by executing the following command:
+
+```sh
+pnpm run test
+```
+
+Alternatively, you can run the unit tests of single package using the `--filter` option:
+
+```sh
+pnpm run --filter @modern-js/some-package test
+```
+
+### Run E2E Tests
+
+In addition to the unit tests, the Modern.js also includes end-to-end (E2E) tests, which checks the functionality of the application as a whole.
+
+You can run the `test:e2e` command to run the E2E tests:
+
+```sh
+pnpm run test:e2e
+```
+
+If you need to run a specified test, you can add keywords to filter:
+
+```sh
+# Only run test cases with the copy-assets keyword
+npx jest copy-assets
+```
+
+---
+
+## Linting
+
+To help maintain consistency and readability of the codebase, we use a ESLint to lint the codes.
+
+You can run the Linter by executing the following command:
+
+```sh
+pnpm run lint
+```
+
+---
+
+## Documentation
+
+Currently Modern.js provides documentation in English and Chinese. If you can use Chinese, please update both documents at the same time. Otherwise, just update the English documentation.
+
+You can find all the documentation in the `packages/document` folder:
+
+```bash
+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.
+
+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).
+
+---
+
+## Submitting Changes
+
+### Add a Changeset
+
+Modern.js is using [Changesets](https://github.com/changesets/changesets) to manage the versioning and changelogs.
+
+If you've changed some packages, you need add a new changeset for the changes. Please run `change` command to select the changed packages and add the changeset info.
+
+```sh
+pnpm run change
+```
+
+### Committing your Changes
+
+Commit your changes to your forked repo, and [create a pull request](https://help.github.com/articles/creating-a-pull-request/).
+
+### Format of PR titles
+
+The format of PR titles follow Conventional Commits.
+
+An example:
+
+```
+feat(plugin-swc): Add `xxx` config
+^    ^    ^
+|    |    |__ Subject
+|    |_______ Scope
+|____________ Type
+```
+
+---
+
+## Publishing
+
+We use **Modern.js Monorepo Solution** to manage version and changelog.
+
+Repository maintainers can publish a new version of all packages to npm.
+
+Here are the steps to publish (we generally use CI for releases and avoid publishing npm packages locally):
+
+1. Pull latest code from the `main` branch.
+2. Install:
+
+```sh
+pnpm i
+```
+
+3. Build packages:
+
+```sh
+pnpm run prepare
+```
+
+4. Bump version:
+
+```sh
+pnpm run bump
+```
+
+5. Commit the version change.
+
+```sh
+git add .
+git commit -m "Release va.b.c"
+```

package/docs/en/about/releases.mdx

@@ -0,0 +1,31 @@
+---
+sidebar_position: 2
+---
+
+# Releases
+
+## Changelog
+
+Please visit [GitHub - Releases](https://github.com/web-infra-dev/modern.js/releases) to see what has changed with each release of Modern.js.
+
+## Version Specification
+
+Modern.js follows the [Semantic Versioning](https://semver.org) specification.
+
+- Major version: Contains incompatible API changes.
+- Minor version: Contains backward compatible functional changes.
+- Patch version: Contains backwards compatible bug fixes
+
+## Release Cycle
+
+- Modern.js generally releases an official release every Thursday.
+- If critical bugs appear, we will release a revised version on the same day.
+- We expect to keep Modern.js v2 stable and compatible, there are currently no plans to release the next major version.
+
+## Version Upgrade
+
+When you need to upgrade the Modern.js version in your project, you can use the `modern upgrade` command, refer to [Upgrade](/guides/get-started/upgrade).
+
+```bash
+npx modern upgrade
+```

package/docs/en/about/showcase.mdx

@@ -0,0 +1,15 @@
+---
+sidebar_position: 0
+---
+
+# Showcase
+
+Welcome to the Modern.js showcase page! Here, we present a collection of websites that have been built using Modern.js.
+
+If you have built a website using Modern.js, we would love for you to share it with the community. Simply reply to the GitHub discussion thread with a link to your website. We will collect content on a regular basis and display it on the current page.
+
+## The Cases
+
+import { ShowcaseList } from '@site/src/components/ShowcaseList';
+
+<ShowcaseList />

package/docs/en/about/team.mdx

@@ -0,0 +1,29 @@
+---
+sidebar_position: 1
+---
+
+# Meet the Team
+
+The development of Modern.js is driven by ByteDance's Modern.js team and community contributors.
+
+## Core Team Members
+
+The Modern.js core team members:
+
+import { RandomMemberList } from '@site/src/components/RandomMemberList';
+
+<RandomMemberList />
+
+## All Contributors
+
+Thanks to the following friends for their contributions to Modern.js:
+
+<a
+  href="https://github.com/web-infra-dev/modern.js/graphs/contributors"
+  style={{ display: 'block', marginTop: 24 }}
+>
+  <img
+    src="https://opencollective.com/modernjs/contributors.svg?width=890&button=false"
+    alt="contributors"
+  />
+</a>

package/docs/en/configure/app/output/disable-svgr.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: disableSvgr
+---
+
+# output.disableSvgr
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [output.disableSvgr](https://modernjs.dev/builder/en/api/config-output.html#outputdisablesvgr).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/output/disableSvgr.md';
+
+<Main />

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

@@ -0,0 +1,267 @@
+---
+sidebar_position: 3
+---
+
+# 贡献指南
+
+感谢你有兴趣为 Modern.js 做贡献！在开始你的贡献之前，请花几分钟时间阅读以下指南。
+
+---
+
+## 设置开发环境
+
+### Fork 仓库
+
+[Fork](https://help.github.com/articles/fork-a-repo/) Modern.js 仓库到你的 GitHub 账户，然后 [clone](https://help.github.com/articles/cloning-a-repository/) 到你的本地。
+
+### 安装 Node.js
+
+我们推荐使用 Node.js 16 或 18。你可以通过以下命令查看当前使用的 Node.js 版本：
+
+```bash
+node -v
+#v16.18.0
+```
+
+如果你当前环境没有安装 Node.js，可以使用 [nvm](https://github.com/nvm-sh/nvm)或者 [fnm](https://github.com/Schniz/fnm) 来安装它。
+
+以下是如何通过 nvm 安装 Node.js 16 LTS 版本的示例：
+
+```bash
+# 安装 Node.js 16 的 LTS 版本
+nvm install 16 --lts
+
+# 将新安装的 Node.js 16 设为默认版本
+nvm alias default 16
+
+# 切换到新安装的 Node.js 16
+nvm use 16
+```
+
+### 安装 pnpm
+
+```bash
+# 使用 corepack 启用 pnpm，仅在 Node.js >= `v14.19.0` 上可用
+corepack enable
+```
+
+### 安装依赖
+
+```sh
+pnpm install
+```
+
+这将完成：
+
+- 安装所有依赖项
+- 在 monorepo 中的 packages 之间创建 symlinks
+- 运行 `prepare` 脚本来构建所有包（这将需要一些时间，但可以保证所有包都被正确构建）
+
+> 在此之后，你通常不需要一次性构建所有 packages。如果你正在开发的新功能依赖另一个 package 的最新代码，通常只构建指定的 package 就足够了。
+
+### 设置 Git 邮箱
+
+请确保在 `<https://github.com/settings/emails>` 中设置了电子邮件，当你提交 Pull Request 时将需要它。
+
+检查你的 git 客户端是否已配置邮箱：
+
+```sh
+git config --list | grep email
+```
+
+全局设置邮箱：
+
+```sh
+git config --global user.email "SOME_EMAIL@example.com"
+```
+
+针对本地仓库设置邮箱：
+
+```sh
+git config user.email "SOME_EMAIL@example.com"
+```
+
+---
+
+## 代码变更和构建
+
+当你在 fork 的仓库中设置完本地开发环境后，我们就可以开始开发了。
+
+### 创建一个新分支
+
+建议在一个新的分支上开发，这样便于后续提交 pull request：
+
+```sh
+git checkout -b MY_BRANCH_NAME
+```
+
+### 构建 Package
+
+要构建你要更改的 package，首先打开 package 目录，然后执行 `build` 命令：
+
+```sh
+# 将 some-path 替换为你要构建的 package 的路径
+cd ./packages/some-package
+pnpm run build
+```
+
+此外，你可以使用 `--filter` 选项从仓库根目录来构建指定的 package：
+
+```sh
+pnpm run --filter @modern-js/some-package build
+```
+
+构建所有包：
+
+```sh
+pnpm run prepare
+```
+
+如果你需要清理项目中的所有 `node_modules/*`，执行 `reset` 命令：
+
+```sh
+pnpm 运行重置
+```
+
+---
+
+## 测试
+
+### 添加新测试
+
+如果你进行了 bugfix，或者添加了需要测试的代码，请添加一些测试代码。
+
+你可以在 `<PACKAGE_DIR>/tests` 文件夹中添加单元测试用例。测试语法基于 [Jest](https://jestjs.io/) 和 [Vitest](https://vitest.dev/)。
+
+### 运行单元测试
+
+在提交 pull request 之前，为了确保本次变更没有引入缺陷，你可以通过执行以下命令运行单元测试：
+
+```sh
+pnpm run test
+```
+
+你也可以使用 `--filter` 选项运行单个包的单元测试：
+
+```sh
+pnpm run --filter @modern-js/some-package test
+```
+
+### 运行 E2E 测试
+
+除了单元测试之外，Modern.js 仓库还包括端到端 (E2E) 测试，用于检查整个应用程序的功能。
+
+你可以执行 `test:e2e` 命令来运行 E2E 测试：
+
+```sh
+pnpm run test:e2e
+```
+
+如果需要运行指定的测试，可以添加关键字进行过滤：
+
+```sh
+# 只运行带有 copy-assets 关键词的测试用例
+npx jest copy-assets
+```
+
+---
+
+## Linting
+
+为了帮助保持代码风格的一致性和可读性，我们使用 ESLint 对代码进行校验。
+
+你可以执行以下命令来运行 Linter：
+
+```sh
+pnpm run lint
+```
+
+---
+
+## 文档
+
+目前 Modern.js 提供英文和中文文档。如果你熟悉中文，请同时更新中英文文档。否则，只需更新英文文档即可。
+
+你可以在 `packages/document` 文件夹中找到所有文档：
+
+```sh
+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)。
+
+Modern.js Doc 的源代码可以在 [这个文件夹](https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/doc-tools) 中找到。
+
+---
+
+## 提交变更
+
+### 添加 Changeset
+
+Modern.js 使用 [Changesets](https://github.com/changesets/changesets) 来管理版本和 Changelog。
+
+如果你修改了一些包，则需要为本次变更添加一个新的变更集。请运行 `change` 命令来选择更改的包并添加 changeset 信息。
+
+```sh
+pnpm run change
+```
+
+### 提交你的变更
+
+提交变更到 fork 后的仓库，并 [创建 pull request](https://help.github.com/articles/creating-a-pull-request/)。
+
+### PR 标题格式
+
+PR 标题的格式遵循 Conventional Commits。
+
+一个例子：
+
+```
+feat(plugin-swc): 添加 `xxx` 配置项
+^ ^ ^
+| | |__ 主题
+| |_______ 范围
+|____________ 类型
+```
+
+---
+
+## 发布
+
+Modern.js 使用 [Changesets](https://github.com/changesets/changesets) 来管理版本和 changelog。
+
+仓库的维护者可以将所有包的新版本发布到 npm。
+
+以下是发布的步骤（我们通常使用 CI 进行发布，并避免在本地发布 npm 包）：
+
+1. 拉取 `main` 分支的最新代码。
+2. 安装依赖：
+
+```sh
+pnpm i
+```
+
+3. 构建 packages：
+
+```sh
+pnpm prepare
+```
+
+4. 升级版本：
+
+```sh
+pnpm run bump
+```
+
+5. 提交版本变更。
+
+```sh
+git add .
+git commit -m "Release va.b.c"
+```

package/docs/zh/about/releases.mdx

@@ -0,0 +1,31 @@
+---
+sidebar_position: 2
+---
+
+# 版本发布
+
+## 更新日志
+
+请访问 [GitHub - Release](https://github.com/web-infra-dev/modern.js/releases) 来了解 Modern.js 每个版本的变更内容。
+
+## 版本规范
+
+Modern.js 遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/) 语义化版本规范。
+
+- 主版本号：包含不兼容的 API 变更。
+- 次版本号：包含向下兼容的功能性变更。
+- 修订号：包含向下兼容的问题修正。
+
+## 发版周期
+
+- Modern.js 通常在每周四发布一个正式版本。
+- 当出现较为严重的问题时，我们会在当天发布修订版本。
+- 我们期望保持 Modern.js v2 的稳定和兼容，目前没有发布下一个 Major 版本的计划。
+
+## 版本升级
+
+当你需要升级项目中的 Modern.js 版本时，可以使用 `modern upgrade` 命令，参考 [升级](/guides/get-started/upgrade)。
+
+```bash
+npx modern upgrade
+```

package/docs/zh/about/showcase.mdx

@@ -0,0 +1,15 @@
+---
+sidebar_position: 0
+---
+
+# 案例展示
+
+欢迎来到 Modern.js 的案例展示页面！在这里，我们展示了一些基于 Modern.js 所实现的网站。
+
+如果你使用 Modern.js 构建了一个网站，欢迎你与社区分享它。只需回复 [GitHub 讨论贴](https://github.com/web-infra-dev/modern.js/discussions/3554) 并附上你网站的链接即可。我们会定期收集内容，并将它们展示在当前页面。
+
+## 案例
+
+import { ShowcaseList } from '@site/src/components/ShowcaseList';
+
+<ShowcaseList />

package/docs/zh/about/team.mdx

@@ -0,0 +1,29 @@
+---
+sidebar_position: 1
+---
+
+# 团队
+
+Modern.js 的开发由字节跳动的 Modern.js 团队和社区贡献者驱动。
+
+## 核心团队成员
+
+以下是 Modern.js 团队的核心成员：
+
+import { RandomMemberList } from '@site/src/components/RandomMemberList';
+
+<RandomMemberList />
+
+## 所有贡献者
+
+感谢以下伙伴们为 Modern.js 做出的贡献：
+
+<a
+  href="https://github.com/web-infra-dev/modern.js/graphs/contributors"
+  style={{ display: 'block', marginTop: 24 }}
+>
+  <img
+    src="https://opencollective.com/modernjs/contributors.svg?width=890&button=false"
+    alt="contributors"
+  />
+</a>

package/docs/zh/configure/app/output/disable-svgr.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: disableSvgr
+---
+
+# output.disableSvgr
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [output.disableSvgr](https://modernjs.dev/builder/api/config-output.html#outputdisablesvgr)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/output/disableSvgr.md';
+
+<Main />

package/modern.config.ts

@@ -8,6 +8,7 @@ const rootCategories = [
   'apis/app',
   'configure/app',
   'blog',
+  'about',
 ];
 
 const { version } = require('./package.json');
@@ -45,6 +46,11 @@ const getNavbar = (lang: string): NavItem[] => {
       link: getLink('/blog/index'),
       activeMatch: '/blog/',
     },
+    {
+      text: getText('关于', 'About'),
+      link: getLink('/about/showcase'),
+      activeMatch: '/about/',
+    },
     {
       text: `v${version}`,
       items: [

package/package.json

@@ -3,7 +3,11 @@
   "description": "Documentation of modern.js framework",
   "homepage": "https://modernjs.dev",
   "bugs": "https://github.com/web-infra-dev/modern.js/issues",
-  "repository": "web-infra-dev/modern.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/modern.js",
+    "directory": "packages/document/main-doc"
+  },
   "license": "MIT",
   "keywords": [
     "react",
@@ -11,13 +15,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.15.0",
+  "version": "2.16.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.15.0"
+    "@modern-js/builder-doc": "^2.16.0"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -29,9 +33,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "2.15.0",
-    "@modern-js/doc-tools": "2.15.0",
-    "@modern-js/doc-plugin-auto-sidebar": "2.15.0"
+    "@modern-js/builder-doc": "2.16.0",
+    "@modern-js/doc-tools": "2.16.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.16.0"
   },
   "scripts": {
     "dev": "modern dev",

package/src/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@modern-js-app"]
+}

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

@@ -0,0 +1,35 @@
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 20%;
+  max-width: 20%;
+  margin: 24px 0;
+
+  &:hover {
+    .avatar {
+      transform: scale(1.15);
+    }
+  }
+}
+
+.avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 999px;
+  transition: all 0.2s ease-in-out;
+  background-color: #f8f8f8;
+}
+
+.name {
+  margin-top: 12px;
+  font-size: 13px;
+  color: rgb(0, 53, 67);
+}

package/src/components/RandomMemberList/index.tsx

@@ -0,0 +1,122 @@
+import { NoSSR } from '@modern-js/doc-tools/runtime';
+import style from './index.module.scss';
+
+interface Member {
+  id: string;
+  avatar: string;
+  // The display name, if not set, use id instead
+  name?: string;
+}
+
+const MEMBERS: Member[] = [
+  {
+    id: '10Derozan',
+    avatar: 'https://avatars.githubusercontent.com/u/50694858?s=120&v=4',
+  },
+  {
+    id: '2heal1',
+    avatar: 'https://avatars.githubusercontent.com/u/41466093?s=120&v=4',
+  },
+  {
+    id: '9aoy',
+    avatar: 'https://avatars.githubusercontent.com/u/22373761?s=120&v=4',
+  },
+  {
+    id: 'Asuka109',
+    avatar: 'https://avatars.githubusercontent.com/u/18379948?s=120&v=4',
+  },
+  {
+    id: 'caohuilin',
+    avatar: 'https://avatars.githubusercontent.com/u/12605189?s=120&v=4',
+  },
+  {
+    id: 'chenjiahan',
+    avatar: 'https://avatars.githubusercontent.com/u/7237365?s=120&v=4',
+  },
+  {
+    id: 'clChenLiang',
+    avatar: 'https://avatars.githubusercontent.com/u/13596193?s=120&v=4',
+  },
+  {
+    id: 'danpeen',
+    avatar: 'https://avatars.githubusercontent.com/u/18045417?s=120&v=4',
+  },
+  {
+    id: 'GiveMe-A-Name',
+    avatar: 'https://avatars.githubusercontent.com/u/58852732?s=120&v=4',
+  },
+  {
+    id: 'jkzing',
+    avatar: 'https://avatars.githubusercontent.com/u/2851517?s=120&v=4',
+  },
+  {
+    id: 'JSerFeng',
+    avatar: 'https://avatars.githubusercontent.com/u/57202839?s=120&v=4',
+  },
+  {
+    id: 'KyrieLii',
+    avatar: 'https://avatars.githubusercontent.com/u/16858738?s=120&v=4',
+  },
+  {
+    id: 'nyqykk',
+    avatar: 'https://avatars.githubusercontent.com/u/65393845?s=120&v=4',
+  },
+  {
+    id: 'sanyuan0704',
+    avatar: 'https://avatars.githubusercontent.com/u/39261479?s=120&v=4',
+  },
+  {
+    id: 'targeral',
+    avatar: 'https://avatars.githubusercontent.com/u/9037723?s=120&v=4',
+  },
+  {
+    id: 'xuchaobei',
+    avatar: 'https://avatars.githubusercontent.com/u/5110783?s=120&v=4',
+  },
+  {
+    id: 'xyoscer',
+    avatar: 'https://avatars.githubusercontent.com/u/16360717?s=120&v=4',
+  },
+  {
+    id: 'yimingjfe',
+    avatar: 'https://avatars.githubusercontent.com/u/10381581?s=120&v=4',
+  },
+  {
+    id: 'zhoushaw',
+    avatar: 'https://avatars.githubusercontent.com/u/27547179?s=120&v=4',
+  },
+  {
+    id: 'zllkjc',
+    avatar: 'https://avatars.githubusercontent.com/u/68810266?s=120&v=4',
+  },
+  {
+    id: 'zoolsher',
+    avatar: 'https://avatars.githubusercontent.com/u/9161085?s=120&v=4',
+  },
+];
+
+export const RandomMemberList = () => {
+  const randomList = MEMBERS.sort(() => Math.random() - 0.5);
+
+  return (
+    <NoSSR>
+      <div className={style.wrapper}>
+        {randomList.map(item => (
+          <a
+            className={style.link}
+            href={`https://github.com/${item.id}`}
+            target="_blank"
+            rel="nofollow"
+            key={item.id}
+            style={{
+              border: 'none',
+            }}
+          >
+            <img className={style.avatar} src={item.avatar} />
+            <span className={style.name}>{item.name || item.id}</span>
+          </a>
+        ))}
+      </div>
+    </NoSSR>
+  );
+};

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

@@ -0,0 +1,80 @@
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 32px;
+}
+
+@media (max-width: 1100px) {
+  .wrapper {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.card {
+  display: block;
+  cursor: pointer;
+  age-break-inside: avoid;
+  break-inside: avoid;
+  border-radius: 20px;
+  overflow: hidden;
+  transition: 0.15s ease-in;
+  border: 1px solid var(--modern-c-divider-light);
+
+  &:hover {
+    border-color: var(--modern-c-brand);
+  }
+}
+
+.preview {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1.84;
+  object-fit: contain;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  pointer-events: none;
+  background-color: var(--modern-c-bg-soft);
+}
+
+.bottom {
+  padding: 12px 18px 14px;
+}
+
+.name {
+  display: flex;
+  justify-content: space-between;
+  font-weight: 600;
+  font-size: 17px;
+  line-height: 28px;
+  color: var(--modern-c-text-1);
+}
+
+.type {
+  display: block;
+  color: #fff;
+  font-size: 12px;
+  background: -webkit-linear-gradient(
+    305deg,
+    hsl(166deg, 77%, 43%) 10%,
+    hsl(198deg, 100%, 50%)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+:global(.dark) .type {
+  background: -webkit-linear-gradient(
+    305deg,
+    hsl(166deg, 77%, 53%) 10%,
+    hsl(198deg, 100%, 60%)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+}
+
+.domain {
+  font-size: 13px;
+  line-height: 24px;
+  color: var(--modern-c-text-2);
+}

package/src/components/ShowcaseList/index.tsx

@@ -0,0 +1,39 @@
+import { useShowcases } from './useShowcases';
+import styles from './index.module.scss';
+
+const getDomain = (url: string) => new URL(url).hostname;
+
+const TYPE_MAP = {
+  doc: 'Modern.js Doc',
+  module: 'Modern.js Module',
+  builder: 'Modern.js Builder',
+  framework: 'Modern.js Framework',
+};
+
+export const ShowcaseList = () => {
+  const showcases = useShowcases();
+
+  return (
+    <div className={styles.wrapper}>
+      {showcases.map(item => {
+        return (
+          <a
+            key={item.url}
+            href={item.url}
+            target="_blank"
+            className={styles.card}
+          >
+            <img src={item.preview} className={styles.preview} />
+            <div className={styles.bottom}>
+              <div className={styles.name}>
+                {item.name}
+                <span className={styles.type}>{TYPE_MAP[item.type]}</span>
+              </div>
+              <div className={styles.domain}>{getDomain(item.url)}</div>
+            </div>
+          </a>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/ShowcaseList/useShowcases.ts

@@ -0,0 +1,73 @@
+import { useI18n } from '../../i18n';
+
+export type ShowcaseType = 'framework' | 'builder' | 'doc' | 'module';
+
+export type ShowcaseItem = {
+  url: string;
+  name: string;
+  preview: string;
+  type: ShowcaseType;
+};
+
+export const useShowcases = (): ShowcaseItem[] => {
+  const t = useI18n();
+
+  return [
+    {
+      name: t('volctrans'),
+      url: 'https://translate.volcengine.com/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/volctrans-0424.jpeg',
+      type: 'framework',
+    },
+    {
+      name: t('writingo'),
+      url: 'https://writingo.net/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/writingo-0424.jpeg',
+      type: 'framework',
+    },
+    {
+      name: 'Rspack',
+      url: 'https://rspack.dev/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/rspack-0424.jpeg',
+      type: 'doc',
+    },
+    {
+      name: 'Modern.js',
+      url: 'https://modernjs.dev/en/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/modernjs-dev-0425.jpeg',
+      type: 'doc',
+    },
+    {
+      name: t('shidianbaike'),
+      url: 'https://shidian.baike.com/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/shidianbaike-0424.jpeg',
+      type: 'framework',
+    },
+    {
+      name: t('xiaohe'),
+      url: 'https://xiaohe.cn/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/xiaohe-0424.png',
+      type: 'framework',
+    },
+    {
+      name: t('dongchedi'),
+      url: 'https://m.dcdapp.com/motor/feoffline/usedcar_channel/channel.html',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/dongchedi-0425.png',
+      type: 'builder',
+    },
+    {
+      name: t('volcengineDeveloper'),
+      url: 'https://developer.volcengine.com/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/developer-volcengine-0425.png',
+      type: 'framework',
+    },
+  ];
+};

package/src/i18n/enUS.ts

@@ -47,4 +47,12 @@ export const EN_US = {
   projectGenerator: 'Project Generator',
   githubDiscussion: 'Github Discussion',
   changelog: 'Changelog',
+
+  // Showcases
+  writingo: 'Writingo',
+  volctrans: 'Volctrans',
+  shidianbaike: 'Shidian Baike',
+  xiaohe: 'Xiaohe',
+  dongchedi: 'Dongchedi',
+  volcengineDeveloper: 'Volcengine Developer',
 } as const;

package/src/i18n/zhCN.ts

@@ -47,4 +47,12 @@ export const ZH_CN: Record<keyof typeof EN_US, string> = {
   projectGenerator: '项目生成器',
   githubDiscussion: 'Github 讨论区',
   changelog: '更新日志',
+
+  // Showcase
+  writingo: '火山写作',
+  volctrans: '火山翻译',
+  shidianbaike: '识典百科',
+  xiaohe: '小荷健康',
+  dongchedi: '懂车帝',
+  volcengineDeveloper: '火山引擎开发者社区',
 };

package/docs/zh/community/index.mdx

@@ -1,3 +0,0 @@
-# 社区
-
-Modern.js 社区正在建设中，敬请关注！