docs: add announcement banner (#3426)

web-infra-dev · Sep 10, 2024 · dba85f4 · dba85f4
1 parent 77bb4d2
commit dba85f4
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 22 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/docs/en/community/releases/v1-0.mdx b/website/docs/en/community/releases/v1-0.mdx
@@ -41,14 +41,14 @@ When developing Rsbuild, we learned best practices from the best tools in the co
 
 ## Performance
 
-**Rsbuild is currently the fastest build tool in the webpack and Rspack ecosystem**. Here is a comparison between Rsbuild, Create React App, and Rspack CLI:
+**Rsbuild is currently the fastest build tool in the webpack and Rspack ecosystem**. Here is a comparison between Rsbuild, Create React App, Vite, and Rspack CLI:
 
-| Metric                          | Create React App | Rspack CLI | Rsbuild | Rsbuild vs CRA    |
-| ------------------------------- | ---------------- | ---------- | ------- | ----------------- |
-| dev startup time (1000 modules) | 5.47s            | 0.66s      | 0.39s   | **14x faster**    |
-| build time (1000 modules)       | 5.69s            | 0.51s      | 0.27s   | **20x faster**    |
-| number of npm dependencies      | 1241             | 283        | 14      | **99% reduction** |
-| npm install size                | 146.6MB          | 75.1MB     | 59.1MB  | **60% reduction** |
+| Metric                          | Create React App | Vite (with SWC) | Rspack CLI | Rsbuild | Rsbuild vs CRA    |
+| ------------------------------- | ---------------- | --------------- | ---------- | ------- | ----------------- |
+| dev startup time (1000 modules) | 5.47s            | 1.29s           | 0.66s      | 0.39s   | **14x faster**    |
+| build time (1000 modules)       | 5.69s            | 1.39s           | 0.51s      | 0.27s   | **20x faster**    |
+| npm dependencies count          | 1241             | 15              | 283        | 14      | **99% reduction** |
+| npm install size                | 146.6MB          | 56.3MB          | 75.1MB     | 59.1MB  | **60% reduction** |
 
 Compared to the [Rspack CLI](https://www.npmjs.com/package/@rspack/cli), Rsbuild provides a richer set of features while demonstrating superior performance.
 
@@ -84,6 +84,8 @@ As shown, the API style of the Rsbuild plugin is similar to esbuild, it can be d
 - If you are using Rsbuild 0.7 or earlier, please note that 1.0 includes some breaking changes. You can refer to the [Migrating from 0.x](https://rsbuild.dev/guide/migration/rsbuild-0-x) document to upgrade.
 - Rsbuild also provides migration guides for projects that use webpack, CRA, Vue CLI, etc. See [Migrate from Existing Projects](https://rsbuild.dev/guide/start/quick-start#migrate-from-existing-projects).
 
+> Give a star 🌟 to the [Rsbuild GitHub repository](https://github.com/web-infra-dev/rsbuild).
+
 ## What's next
 
 Rsbuild 1.0 provides several advanced features for the development of enterprise applications and higher-level tools, such as the [multi-environment build API](https://rsbuild.dev/guide/advanced/environments), [SSR API](https://rsbuild.dev/guide/advanced/ssr), [plugin API](https://rsbuild.dev/plugins/dev/), [Module Federation support](https://rsbuild.dev/guide/advanced/module-federation), and [library build (Rslib)](https://github.com/web-infra-dev/rslib). We plan to continue to enhance these features to better support the development of the Rsbuild ecosystem.

diff --git a/website/docs/zh/community/releases/v1-0.mdx b/website/docs/zh/community/releases/v1-0.mdx
@@ -41,14 +41,14 @@ Rsbuild 是以 Rspack 为核心实现的，我们为 Rsbuild 设计了易于使
 
 ## 性能
 
-**Rsbuild 是目前 webpack 和 Rspack 生态中最轻量、最快的构建工具**，下面是 Rsbuild 与 Create React App、Rspack CLI 的对比：
+**Rsbuild 是目前 webpack 和 Rspack 生态中最最快的构建工具**，下面是 Rsbuild 与 Create React App、Vite、Rspack CLI 的对比：
 
-| 指标                          | Create React App | Rspack CLI | Rsbuild | Rsbuild vs CRA |
-| ----------------------------- | ---------------- | ---------- | ------- | -------------- |
-| dev 启动时间（1000 个模块）   | 5.47s            | 0.66s      | 0.39s   | **快 14 倍**   |
-| build 构建时间（1000 个模块） | 5.69s            | 0.51s      | 0.27s   | **快 20 倍**   |
-| npm 依赖数量                  | 1241             | 283        | 14      | **减少 99%**   |
-| npm 安装体积                  | 146.6MB          | 75.1MB     | 59.1MB  | **减少 60%**   |
+| 指标                          | Create React App | Vite (with SWC) | Rspack CLI | Rsbuild | Rsbuild vs CRA |
+| ----------------------------- | ---------------- | --------------- | ---------- | ------- | -------------- |
+| dev 启动时间（1000 个模块）   | 5.47s            | 1.29s           | 0.66s      | 0.39s   | **快 14 倍**   |
+| build 构建时间（1000 个模块） | 5.69s            | 1.39s           | 0.51s      | 0.27s   | **快 20 倍**   |
+| npm 依赖数量                  | 1241             | 15              | 283        | 14      | **减少 99%**   |
+| npm 安装体积                  | 146.6MB          | 56.3MB          | 75.1MB     | 59.1MB  | **减少 60%**   |
 
 与 [Rspack CLI](https://www.npmjs.com/package/@rspack/cli) 相比，Rsbuild 内置了更丰富的功能，同时具备更好的性能表现。
 
@@ -84,11 +84,13 @@ Rsbuild 的插件生态正在不断发展，目前社区中已经有超过 50
 - 如果你正在使用 Rsbuild 0.7 或更早的版本，请留意 1.0 版本包含一些不兼容更新，可参考 [从 Rsbuild 0.x 迁移](https://rsbuild.dev/zh/guide/migration/rsbuild-0-x) 文档进行升级。
 - Rsbuild 也提供了 webpack、CRA、Vue CLI 等项目的迁移指南，详见 [从现有项目迁移](https://rsbuild.dev/zh/guide/start/quick-start#%E4%BB%8E%E7%8E%B0%E6%9C%89%E9%A1%B9%E7%9B%AE%E8%BF%81%E7%A7%BB)。
 
+> 欢迎为 [Rsbuild GitHub 仓库](https://github.com/web-infra-dev/rsbuild) 点亮一颗 Star 🌟。
+
 ## 下一步
 
 Rsbuild 1.0 为企业级应用和上层工具开发提供了一些高级特性，例如 [多环境构建 API](https://rsbuild.dev/zh/guide/advanced/environments)、[服务端渲染 API](https://rsbuild.dev/zh/guide/advanced/ssr)、[插件 API](https://rsbuild.dev/plugins/dev/)、[模块联邦支持](https://rsbuild.dev/zh/guide/advanced/module-federation) 和 [Library 构建（Rslib）](https://github.com/web-infra-dev/rslib)，我们计划继续完善这些特性，更好地支持 Rsbuild 生态发展。
 
-Rsbuild 将在 1.x 版本迭代 12～18 个月，与 Rspack 共同演进。Rsbuild 将在第一时间应用 Rspack 的新特性，例如持久化缓存、更快的 HMR、基于 TypeScript 的优化等，请参考 [Rspack - 下一步](https://rspack.dev/zh/blog/announcing-1-0#%E4%B8%8B%E4%B8%80%E6%AD%A5) 了解更多。
+在接下来的 12～18 个月里，Rsbuild 将与 Rspack 共同演进，在第一时间应用 Rspack 的新特性，例如持久化缓存、更快的 HMR、基于 TypeScript 的优化等。请参考 [Rspack - 下一步](https://rspack.dev/zh/blog/announcing-1-0#%E4%B8%8B%E4%B8%80%E6%AD%A5) 了解更多。
 
 最后，感谢所有为 Rsbuild 贡献过的开发者 ❤️：
 

diff --git a/website/package.json b/website/package.json
@@ -19,7 +19,7 @@
     "react-dom": "^18.3.1",
     "rsbuild-plugin-google-analytics": "1.0.2",
     "rsbuild-plugin-open-graph": "1.0.2",
-    "@rstack-dev/doc-ui": "1.4.2",
+    "@rstack-dev/doc-ui": "1.5.0",
     "rspress": "1.30.0",
     "rspress-plugin-font-open-sans": "1.0.0",
     "rspress-plugin-sitemap": "^1.1.1"

diff --git a/website/theme/index.tsx b/website/theme/index.tsx
@@ -1,9 +1,38 @@
+import { Announcement } from '@rstack-dev/doc-ui/announcement';
 import { NavIcon } from '@rstack-dev/doc-ui/nav-icon';
 import Theme from 'rspress/theme';
 import { HomeLayout } from './pages';
 import './index.scss';
+import { NoSSR, useLang, usePageData } from 'rspress/runtime';
 
-const Layout = () => <Theme.Layout beforeNavTitle={<NavIcon />} />;
+const ANNOUNCEMENT_URL = '/community/releases/v1-0';
+
+const Layout = () => {
+  const { page } = usePageData();
+  const lang = useLang();
+
+  return (
+    <Theme.Layout
+      beforeNavTitle={<NavIcon />}
+      beforeNav={
+        <NoSSR>
+          <Announcement
+            href={
+              lang === 'en' ? ANNOUNCEMENT_URL : `/${lang}${ANNOUNCEMENT_URL}`
+            }
+            message={
+              lang === 'en'
+                ? 'Rsbuild 1.0 has been released!'
+                : 'Rsbuild 1.0 正式发布！'
+            }
+            localStorageKey="rsbuild-announcement-closed"
+            display={page.pageType === 'home'}
+          />
+        </NoSSR>
+      }
+    />
+  );
+};
 
 export default {
   ...Theme,