@modern-js/main-doc 3.0.1 → 3.0.3

package/docs/zh/guides/topic-detail/module-federation/usage.mdx

@@ -1,6 +1,6 @@
 # 开始使用
 
-在 Modern.js 中使用 Module Federation 我们推荐使用官方插件 `@module-federation/modern-js`。
+在 Modern.js 中使用 Module Federation 我们推荐使用官方插件 `@module-federation/modern-js-v3`。
 
 本章节将会介绍如何通过官方插件搭含生产者应用与消费者应用，我们首先根据 [Modern.js 快速上手](/guides/get-started/quick-start) 创建两个应用。
 
@@ -10,7 +10,7 @@
 
 import { PackageManagerTabs } from '@theme';
 
-<PackageManagerTabs command="add @module-federation/modern-js" />
+<PackageManagerTabs command="add @module-federation/modern-js-v3" />
 
 ## 注册插件
 
@@ -18,7 +18,7 @@ import { PackageManagerTabs } from '@theme';
 
 ```ts
 import { appTools, defineConfig } from '@modern-js/app-tools';
-import { moduleFederationPlugin } from '@module-federation/modern-js';
+import { moduleFederationPlugin } from '@module-federation/modern-js-v3';
 
 export default defineConfig({
   plugins: [appTools(), moduleFederationPlugin()],
@@ -42,7 +42,7 @@ export const Button = () => {
 随后，在项目根目录添加 `module-federation.config.ts`，配置 Module Federation 模块的名称、共享依赖和导出内容：
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   name: 'remote',
@@ -68,7 +68,7 @@ export default createModuleFederationConfig({
 
 ```ts title="modern.config.ts"
 import { appTools, defineConfig } from '@modern-js/app-tools';
-import { moduleFederationPlugin } from '@module-federation/modern-js';
+import { moduleFederationPlugin } from '@module-federation/modern-js-v3';
 
 export default defineConfig({
   server: {
@@ -85,7 +85,7 @@ export default defineConfig({
 在项目根目录添加 `module-federation.config.ts`，配置 Module Federation 模块的名称、共享依赖和使用的远程模块：
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   name: 'host',
@@ -170,7 +170,7 @@ export default Index;
 
 ```ts
 import { appTools, defineConfig } from '@modern-js/app-tools';
-import { moduleFederationPlugin } from '@module-federation/modern-js';
+import { moduleFederationPlugin } from '@module-federation/modern-js-v3';
 
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({

package/docs/zh/guides/troubleshooting/builder.mdx

@@ -10,11 +10,11 @@ sidebar_position: 3
 
 ### Rsbuild FAQ
 
-Modern.js 内部基于 [Rsbuild](https://rsbuild.rs/) 封装了自身的构建工具，因此你可以直接参考 Rsbuild 的 FAQ 文档：
+Modern.js 内部基于 [Rsbuild](https://v2.rsbuild.rs/) 封装了自身的构建工具，因此你可以直接参考 Rsbuild 的 FAQ 文档：
 
-- [Rsbuild - 功能类问题](https://rsbuild.rs/zh/guide/faq/features)
-- [Rsbuild - 异常类问题](https://rsbuild.rs/zh/guide/faq/exceptions)
-- [Rsbuild - 热更新问题](https://rsbuild.rs/zh/guide/faq/hmr)
+- [Rsbuild - 功能类问题](https://v2.rsbuild.rs/zh/guide/faq/features)
+- [Rsbuild - 异常类问题](https://v2.rsbuild.rs/zh/guide/faq/exceptions)
+- [Rsbuild - 热更新问题](https://v2.rsbuild.rs/zh/guide/faq/hmr)
 
 ---
 

package/docs/zh/guides/upgrade/config.mdx

@@ -151,12 +151,40 @@ export default {
 
 ## tools
 
+### toos.postcss
+
+**变更内容**：对象式配置会覆盖 Modern.js 内置的 PostCSS 配置。如果需要在内置配置基础上进行扩展，请使用函数式配置。
+
+```typescript
+// v2
+export default {
+  tools: {
+    postcss: {
+      postcssOptions: {
+        plugins: [tailwindcssPlugin],
+      },
+    },
+  },
+};
+```
+
+```typescript
+// v3
+export default {
+  tools: {
+    postcss: (opts, { addPlugins }) => {
+      addPlugins(tailwindcssPlugin);
+    },
+  },
+};
+```
+
 ### tools.esbuild
 
 **变更内容**：该配置已废弃，需要手动切换到 esbuild 压缩。
 
 ```typescript
-// 该配置已废弃，请参考 [切换压缩器](https://rsbuild.rs/zh/config/output/minify#%E5%88%87%E6%8D%A2%E5%8E%8B%E7%BC%A9%E5%99%A8) 来手动切换到 esbuild 压缩
+// 该配置已废弃，请参考 [切换压缩器](https://v2.rsbuild.rs/zh/config/output/minify#%E5%88%87%E6%8D%A2%E5%8E%8B%E7%BC%A9%E5%99%A8) 来手动切换到 esbuild 压缩
 // tools: {
 //   esbuild: { /* 配置 */ }
 // },
@@ -167,7 +195,7 @@ export default {
 **变更内容**：该配置已废弃，需要手动切换到 Terser 压缩。
 
 ```typescript
-// 该配置已废弃，请参考 [切换压缩器](https://rsbuild.rs/zh/config/output/minify#%E5%88%87%E6%8D%A2%E5%8E%8B%E7%BC%A9%E5%99%A8) 来手动切换到 Terser 压缩
+// 该配置已废弃，请参考 [切换压缩器](https://v2.rsbuild.rs/zh/config/output/minify#%E5%88%87%E6%8D%A2%E5%8E%8B%E7%BC%A9%E5%99%A8) 来手动切换到 Terser 压缩
 // tools: {
 //   terser: { /* 配置 */ }
 // },
@@ -893,7 +921,7 @@ export default defineRuntimeConfig({
 
 ### performance.bundleAnalyze
 
-**变更内容**：该配置已废弃，建议使用 [Rsdoctor](https://rsbuild.rs/zh/guide/debug/rsdoctor) 来分析产物体积
+**变更内容**：该配置已废弃，建议使用 [Rsdoctor](https://v2.rsbuild.rs/zh/guide/debug/rsdoctor) 来分析产物体积
 
 ### performance.transformLodash
 

package/docs/zh/guides/upgrade/other.md

@@ -121,6 +121,56 @@ Modern.js 3.0 移除了 `modern new` 和 `modern upgrade` 命令，需要按照
 移除这些命令的目的是让文档更贴合 AI Agent 的默认实现方式，不把操作做封装，使开发者能够更清晰地了解每个操作的具体步骤，也便于 AI Agent 根据文档直接执行相应的操作。
 :::
 
+## 不再内置 Arco/Antd 支持
+
+Modern.js 2.0 内置了对 [Arco Design](https://arco.design/) 和 [Ant Design](https://ant.design/) 的按需引入支持，3.0 版本不再内置该能力，需要用户自行配置 `source.transformImport`。
+
+如果项目中使用了 Arco Design 或 Ant Design，请手动添加对应的 `source.transformImport` 配置。
+
+**Arco Design 迁移示例**：
+
+```typescript
+export default {
+  source: {
+    transformImport: [
+      {
+        libraryName: '@arco-design/web-react',
+        libraryDirectory: 'es',
+        camelToDashComponentName: false,
+        style: 'css',
+      },
+      {
+        libraryName: '@arco-design/web-react/icon',
+        libraryDirectory: 'react-icon',
+        camelToDashComponentName: false,
+      },
+    ],
+  },
+};
+```
+
+**Ant Design 迁移示例**（antd v4 及以下版本）：
+
+```typescript
+export default {
+  source: {
+    transformImport: [
+      {
+        libraryName: 'antd',
+        libraryDirectory: 'es',
+        style: 'css',
+      },
+    ],
+  },
+};
+```
+
+:::tip
+antd v5 使用了 CSS-in-JS 方案，已原生支持按需加载，无需配置 `source.transformImport`。
+
+更多用法请参考 [Rsbuild - source.transformImport](https://v2.rsbuild.rs/config/source/transform-import)。
+:::
+
 ## Eslint 规则集
 
 Modern.js 之前提供了 ESLint 的完整规则集，涵盖了 @modern-js（针对 Node.js 项目的 Lint 规则）和 @modern-js-app（针对前端项目的 Lint 规则）。在 [v2.60.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.60.0) 版本中，我们正式移除了这些规则集。我们鼓励开发者根据自身需求选择合适的代码规范工具，直接使用 ESLint 并结合社区推荐的规则，或使用 Biome 以提升代码格式化的性能。

package/docs/zh/guides/upgrade/overview.mdx

@@ -6,7 +6,7 @@
 
 Modern.js 3.0 带来了多项重大改进和变化，主要包括：
 
-- **构建工具升级**：默认使用 [Rspack](https://rspack.dev) 构建，不再支持 Webpack，构建配置与 [Rsbuild](https://rsbuild.dev) 对齐。
+- **构建工具升级**：默认使用 [Rspack](https://rspack.dev) 构建，不再支持 Webpack，构建配置与 [Rsbuild](https://v2.rsbuild.rs) 对齐。
 - **React 生态升级**：全面支持 [React 19](https://react.dev/blog/2024/04/25/react-19) 和 [React Router v7](https://reactrouter.com)。
 - **插件系统重构**：重新设计插件 API，支持在 CLI、Runtime、Server 层通过自定义插件扩展框架能力。
 - **React Server Component**：支持在 [CSR](/guides/get-started/glossary#csr) 和 [SSR](/guides/basic-features/render/ssr) 项目中使用 React Server Component。

package/docs/zh/guides/upgrade/tailwindcss.mdx

@@ -4,7 +4,7 @@ Modern.js 3.0 推荐通过 Rsbuild 原生方式接入 Tailwind CSS，不再依
 
 ## 迁移步骤
 
-本小节中的迁移操作都是仅当项目中实际使用了 `@modern-js/plugin-tailwindcss` 插件时才需要执行。
+本小节中的迁移操作仅当项目中使用了 `@modern-js/plugin-tailwindcss` 插件，且 `tailwindcss` 版本为 v2 或 v3 时才需要执行。
 
 ### 1. 移除旧插件
 

package/docs/zh/plugin/cli-plugins/api.mdx

@@ -188,7 +188,7 @@ api.config(() => {
 - **参数：**
   - `modifyFn`： 修改函数，接收 `RspackChain` 实例和实用工具作为参数。
 - **执行阶段：** 在生成最终的 Rspack 配置时。
-- **对应 Rsbuild Hook**： [modifybundlerchain](https://rsbuild.rs/zh/plugins/dev/hooks#modifybundlerchain)
+- **对应 Rsbuild Hook**： [modifybundlerchain](https://v2.rsbuild.rs/zh/plugins/dev/hooks#modifybundlerchain)
 - **示例：**
 
 ```typescript
@@ -208,7 +208,7 @@ api.modifyBundlerChain((chain, utils) => {
 - **参数：**
   - `modifyFn`： 修改函数，接收 Rsbuild 配置对象和实用工具作为参数，可以返回修改后的配置对象、Promise 或不返回（直接修改原对象）。
 - **执行阶段：** 在生成最终的 Rsbuild 配置时。
-- **对应 Rsbuild Hook**： [modifyRsbuildConfig](https://rsbuild.rs/zh/plugins/dev/hooks#modifyrsbuildconfig)
+- **对应 Rsbuild Hook**： [modifyRsbuildConfig](https://v2.rsbuild.rs/zh/plugins/dev/hooks#modifyrsbuildconfig)
 - **示例：**
 
 ```typescript
@@ -228,7 +228,7 @@ api.modifyRsbuildConfig((config, utils) => {
 - **参数：**
   - `modifyFn`： 修改函数，接收 Rspack 配置对象和实用工具作为参数，可以返回修改后的配置对象、Promise 或不返回（直接修改原对象）。
 - **执行阶段：** 在生成最终的 Rspack 配置时。
-- **对应 Rsbuild Hook**： [modifyRspackConfig](https://rsbuild.rs/zh/plugins/dev/hooks#modifyrspackconfig)
+- **对应 Rsbuild Hook**： [modifyRspackConfig](https://v2.rsbuild.rs/zh/plugins/dev/hooks#modifyrspackconfig)
 - **示例：**
 
 ```typescript
@@ -403,7 +403,7 @@ api.onFileChanged(({ filename, eventType }) => {
 - **参数：**
   - `buildFn`： 构建前执行的函数，无参数，可异步。
 - **执行阶段：** 在执行构建流程之前。
-- **对应 Rsbuild Hook**： [onBeforeBuild](https://rsbuild.rs/zh/plugins/dev/hooks#onbeforebuild)
+- **对应 Rsbuild Hook**： [onBeforeBuild](https://v2.rsbuild.rs/zh/plugins/dev/hooks#onbeforebuild)
 - **示例：**
 
 ```typescript
@@ -422,7 +422,7 @@ api.onBeforeBuild(() => {
 - **参数：**
   - `buildFn`： 构建后执行的函数，无参数，可异步。
 - **执行阶段：** 在执行构建流程之后。
-- **对应 Rsbuild Hook**： [onAfterBuild](https://rsbuild.rs/zh/plugins/dev/hooks#onafterbuild)
+- **对应 Rsbuild Hook**： [onAfterBuild](https://v2.rsbuild.rs/zh/plugins/dev/hooks#onafterbuild)
 - **示例：**
 
 ```typescript
@@ -441,7 +441,7 @@ api.onAfterBuild(() => {
 - **参数：**
   - `compileFn`： 编译完成后执行的函数。
 - **执行阶段：** 开发服务器启动，且首次编译完成后。
-- **对应 Rsbuild Hook**： [onDevCompileDone](https://rsbuild.rs/zh/plugins/dev/hooks#ondevcompiledone)
+- **对应 Rsbuild Hook**： [onDevCompileDone](https://v2.rsbuild.rs/zh/plugins/dev/hooks#ondevcompiledone)
 - **示例：**
 
 ```typescript
@@ -460,7 +460,7 @@ api.onDevCompileDone(() => {
 - **参数：**
   - `createFn`： 创建前执行的函数，无参数，可异步。
 - **执行阶段：** 在创建 Rspack 编译器实例之前。
-- **对应 Rsbuild Hook**： [onBeforeCreateCompiler](https://rsbuild.rs/zh/plugins/dev/hooks#onbeforecreatecompiler)
+- **对应 Rsbuild Hook**： [onBeforeCreateCompiler](https://v2.rsbuild.rs/zh/plugins/dev/hooks#onbeforecreatecompiler)
 - **示例：**
 
 ```typescript
@@ -479,7 +479,7 @@ api.onBeforeCreateCompiler(() => {
 - **参数：**
   - `createFn`： 创建后执行的函数，无参数，可异步。
 - **执行阶段：** 在创建 Rspack 编译器实例之后。
-- **对应 Rsbuild Hook**： [onAfterCreateCompiler](https://rsbuild.rs/zh/plugins/dev/hooks#onaftercreatecompiler)
+- **对应 Rsbuild Hook**： [onAfterCreateCompiler](https://v2.rsbuild.rs/zh/plugins/dev/hooks#onaftercreatecompiler)
 - **示例：**
 
 ```typescript
@@ -517,7 +517,7 @@ api.onBeforeDev(async () => {
 - **参数：**
   - `devFn`： 开发服务器启动后执行的函数。
 - **执行阶段：** 开发服务器成功启动后。
-- **对应 Rsbuild Hook**： [onAfterStartDevServer](https://rsbuild.rs/zh/plugins/dev/hooks#onafterstartdevserver)
+- **对应 Rsbuild Hook**： [onAfterStartDevServer](https://v2.rsbuild.rs/zh/plugins/dev/hooks#onafterstartdevserver)
 - **示例：**
 
 ```typescript

package/docs/zh/plugin/introduction.mdx

@@ -117,7 +117,7 @@ Rsbuild 是 Modern.js 底层的构建工具，通过添加 Rsbuild 插件可修
 你可以在 `modern.config.ts` 中通过 `builderPlugins` 选项注册 Rsbuild 插件，详见 [builderPlugins 构建插件](/configure/app/builder-plugins.html)。
 
 :::info
-可以阅读 [Rsbuild 官网 - 插件](https://rsbuild.rs/plugins/list/index) 了解更多 Rsbuild 插件体系内容。
+可以阅读 [Rsbuild 官网 - 插件](https://v2.rsbuild.rs/plugins/list/index) 了解更多 Rsbuild 插件体系内容。
 :::
 
 ### 官方插件
@@ -128,9 +128,9 @@ Rsbuild 是 Modern.js 底层的构建工具，通过添加 Rsbuild 插件可修
 
 | 插件                                                                                 | 介绍                                                                                   | Modern.js 链接                                                                                                                        |
 | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| [React 插件](https://rsbuild.rs/zh/plugins/list/plugin-react)                        | 提供对 React 的支持                                                                    | -                                                                                                                                     |
-| [SVGR 插件](https://rsbuild.rs/zh/plugins/list/plugin-svgr)                          | 支持将 SVG 图片转换为一个 React 组件                                                   | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
-| [Assets Retry 插件](https://rsbuild.rs/zh/plugins/list/plugin-assets-retry)          | 用于在静态资源加载失败时自动发起重试请求                                               | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
+| [React 插件](https://v2.rsbuild.rs/zh/plugins/list/plugin-react)                        | 提供对 React 的支持                                                                    | -                                                                                                                                     |
+| [SVGR 插件](https://v2.rsbuild.rs/zh/plugins/list/plugin-svgr)                          | 支持将 SVG 图片转换为一个 React 组件                                                   | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
+| [Assets Retry 插件](https://github.com/rstackjs/rsbuild-plugin-assets-retry)          | 用于在静态资源加载失败时自动发起重试请求                                               | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
 | [Type Check 插件](https://github.com/rspack-contrib/rsbuild-plugin-type-check)       | 用于在单独的进程中运行 TypeScript 类型检查                                             | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
 | [Source Build 插件](https://github.com/rspack-contrib/rsbuild-plugin-source-build)   | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新                     | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
 | [Check Syntax 插件](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)   | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法                         | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
@@ -142,7 +142,7 @@ Rsbuild 是 Modern.js 底层的构建工具，通过添加 Rsbuild 插件可修
 以下是未在 Modern.js 中内置的 Rsbuild 官方插件：
 
 - [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)：将项目中用到的图片资源进行压缩处理。
-- [Stylus 插件](https://rsbuild.rs/zh/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
+- [Stylus 插件](https://v2.rsbuild.rs/zh/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
 - [UMD 插件](https://github.com/rspack-contrib/rsbuild-plugin-umd)：用于构建 UMD 格式的产物。
 - [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)：用于引用 YAML 文件，并将其转换为 JavaScript 对象。
 - [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)：用于引用 TOML 文件，并将其转换为 JavaScript 对象。

package/package.json

@@ -16,21 +16,21 @@
     "modern",
     "modern.js"
   ],
-  "version": "3.0.1",
+  "version": "3.0.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "dependencies": {
     "mermaid": "^11.12.2",
-    "@modern-js/sandpack-react": "3.0.1"
+    "@modern-js/sandpack-react": "3.0.3"
   },
   "devDependencies": {
     "@rsbuild/plugin-sass": "1.5.0",
     "@rspress/core": "2.0.2",
     "@rspress/plugin-llms": "2.0.2",
     "@rspress/shared": "2.0.2",
-    "@shikijs/transformers": "^3.21.0",
+    "@shikijs/transformers": "^3.22.0",
     "@types/fs-extra": "9.0.13",
     "@types/node": "^20",
     "classnames": "^2.5.1",

package/src/components/RsbuildLink/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 const RsbuildLink = ({ configName }: { configName: string }) => {
   const lang = useLang();
-  const href = `https://v2.rsbuild.rs/${lang === 'zh' ? 'zh/' : ''}config/${configName
+  const href = `https://v2.rsbuild.dev/${lang === 'zh' ? 'zh/' : ''}config/${configName
     .split('.')
     .join('/')
     .replace(/([a-z])([A-Z])/g, '$1-$2')

package/src/i18n/enUS.ts

@@ -1,4 +1,8 @@
 export const EN_US = {
+  // Announcement
+  announcementLabel: 'NEW',
+  announcementText: 'Modern.js 3.0 is released!',
+
   introduction: 'Introduction',
   quickStart: 'Quick Start',
 
@@ -16,7 +20,7 @@ export const EN_US = {
   feature3: 'Nested Routes',
   featureDesc3: 'File-as-route, comes with lots performance optimizations.',
   feature4: 'Multi-Rendering Mode',
-  featureDesc4: 'SSR, SSG, SPR, all out of the box for you.',
+  featureDesc4: 'RSC, SSR, SSG, all out of the box for you.',
   feature5: 'CSS Solutions',
   featureDesc5: 'CSS Modules, CSS-in-JS, Tailwind CSS, take your pick.',
   feature6: 'Easy to Configure',

package/src/i18n/zhCN.ts

@@ -1,6 +1,10 @@
 import type { EN_US } from './enUS';
 
 export const ZH_CN: Record<keyof typeof EN_US, string> = {
+  // Announcement
+  announcementLabel: 'NEW',
+  announcementText: 'Modern.js 3.0 正式发布！',
+
   introduction: '介绍',
   quickStart: '快速上手',
 
@@ -17,7 +21,7 @@ export const ZH_CN: Record<keyof typeof EN_US, string> = {
   feature3: '嵌套路由',
   featureDesc3: '文件系统即路由，附赠全套性能优化。',
   feature4: '多渲染模式',
-  featureDesc4: 'SSR、SSG、SPR 等多种渲染模式，通通开箱即用。',
+  featureDesc4: 'RSC、SSR、SSG 等多种渲染模式，通通开箱即用。',
   feature5: 'CSS 方案',
   featureDesc5: 'CSS Modules、CSS-in-JS、Tailwind CSS，任你挑选。',
   feature6: '易于配置',

package/src/pages/index.module.scss

@@ -26,6 +26,91 @@
   padding-bottom: 16vh;
 }
 
+.announcement {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 18px 6px 6px;
+  border-radius: 999px;
+  background: linear-gradient(
+    150.85deg,
+    rgba(124, 178, 250, 0.15) 3%,
+    rgba(124, 178, 250, 0.08) 97.17%
+  );
+  border: 1px solid rgba(124, 178, 250, 0.4);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  margin-bottom: 1.5rem;
+  position: relative;
+  z-index: 1;
+
+  &:hover {
+    background: linear-gradient(
+      150.85deg,
+      rgba(124, 178, 250, 0.25) 3%,
+      rgba(124, 178, 250, 0.15) 97.17%
+    );
+    border-color: rgba(124, 178, 250, 0.55);
+    text-decoration: none;
+  }
+}
+
+:global(.dark) .announcement {
+  background: linear-gradient(
+    150.85deg,
+    rgba(124, 178, 250, 0.18) 3%,
+    rgba(124, 178, 250, 0.08) 97.17%
+  );
+  border-color: rgba(124, 178, 250, 0.25);
+
+  &:hover {
+    background: linear-gradient(
+      150.85deg,
+      rgba(124, 178, 250, 0.28) 3%,
+      rgba(124, 178, 250, 0.14) 97.17%
+    );
+    border-color: rgba(124, 178, 250, 0.4);
+  }
+}
+
+.announcementLabel {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: var(--edenx-home-hero-name-background);
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  letter-spacing: 0.5px;
+  line-height: 1.6;
+}
+
+.announcementText {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.75);
+}
+
+:global(.dark) .announcementText {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.announcementArrow {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.45);
+  transition: transform 0.3s ease;
+
+  .announcement:hover & {
+    transform: translateX(2px);
+  }
+}
+
+:global(.dark) .announcementArrow {
+  color: rgba(255, 255, 255, 0.5);
+}
+
 .title {
   font-style: normal;
   font-weight: bold;
@@ -149,6 +234,14 @@
     font-size: 7vw;
     text-align: center;
   }
+  .announcement {
+    padding: 4px 14px 4px 4px;
+    gap: 8px;
+    margin-bottom: 1rem;
+  }
+  .announcementText {
+    font-size: 12px;
+  }
   .buttons {
     width: 65%;
     justify-content: center;

package/src/pages/index.tsx

@@ -14,9 +14,21 @@ const HomepageHeader = () => {
     <div className={styles.header}>
       <header className={clsx('hero hero--primary', styles.heroBanner)}>
         <div className={styles.mask} />
+        <a
+          href={useUrl('/community/blog/v3-release-note')}
+          className={styles.announcement}
+        >
+          <span className={styles.announcementLabel}>
+            {t('announcementLabel')}
+          </span>
+          <span className={styles.announcementText}>
+            {t('announcementText')}
+          </span>
+          <span className={styles.announcementArrow}>→</span>
+        </a>
         <h1 className={styles.title}>
           <span className={clsx([styles.titleGradient, styles.mainTitle])}>
-            Modern.js
+            Modern.js 3.0
           </span>
           <div>{t('slogan')}</div>
         </h1>