@modern-js/main-doc 2.69.7 → 3.0.0-alpha.1

package/docs/zh/tutorials/foundations/introduction.mdx

@@ -3,37 +3,20 @@ title: 介绍
 sidebar_position: 1
 ---
 
-# 介绍
+# Modern.js 示例库
 
-欢迎来到 Modern.js 教程！
+欢迎来到 Modern.js 示例库！这里提供实用的代码示例，帮助你快速上手 Modern.js。
 
-阅读本栏目后，你将初步理解 Modern.js，并使用 Modern.js 创建第一个应用。
+如果你是第一次接触 Modern.js，建议先阅读 [Modern.js 介绍](/guides/get-started/introduction)。
 
-## Modern.js 是什么
-
-如果你对 Modern.js 还不了解，可以先阅读 [Modern.js 介绍](/guides/get-started/introduction)。
-
-## 实战教程
-
-我们准备了一个创建「联系人列表应用」的实战教程，你可以按照教程一步步创建一个应用，并了解到 Modern.js 中的以下实践：
-
-- 创建项目
-- 使用 antd 组件库
-- 集成 Tailwind CSS
-- 客户端路由
-- 数据获取
-- 状态管理
-- 容器组件
-- 新建入口
-- ...
-
-## 案例
-
-我们提供了一些在开发过程中常用的案例供你参考，可以在这里找到 Modern.js 提供的一些功能组合的使用方式，我们将持续完善这里的案例。
+## 📚 示例列表
 
 import ExampleList from '@site-docs/components/turtorials-example-list';
 
 <ExampleList />
 
-下面就让我们从 [创建项目](tutorials/first-app/c01-start) 开始吧！
+---
+
+## 💡 贡献示例
 
+如果你有好的示例想要分享，欢迎通过 [GitHub](https://github.com/web-infra-dev/modern.js) 提交 PR！

package/i18n.json

@@ -111,26 +111,10 @@
     "zh": "Rsbuild 插件",
     "en": "Rsbuild Plugins"
   },
-  "reduck": {
-    "zh": "Reduck 状态管理",
-    "en": "Reduck State Manager"
-  },
   "module-federation": {
     "zh": "模块联邦",
     "en": "Module Federation"
   },
-  "generator": {
-    "zh": "项目生成器",
-    "en": "Project Generator"
-  },
-  "new-command": {
-    "zh": "New 命令",
-    "en": "New Command"
-  },
-  "generator-plugin": {
-    "zh": "生成器插件",
-    "en": "Generator Plugin"
-  },
   "examples": {
     "zh": "示例",
     "en": "Examples"

package/package.json

@@ -6,7 +6,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/web-infra-dev/modern.js",
-    "directory": "packages/document/main-doc"
+    "directory": "packages/document"
   },
   "license": "MIT",
   "keywords": [
@@ -15,29 +15,29 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.69.7",
+  "version": "3.0.0-alpha.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "dependencies": {
-    "mermaid": "^11.4.1",
-    "@modern-js/sandpack-react": "2.69.7"
+    "mermaid": "^11.12.2",
+    "@modern-js/sandpack-react": "3.0.0-alpha.1"
   },
   "devDependencies": {
     "@rsbuild/plugin-sass": "1.4.0",
-    "@shikijs/transformers": "^3.4.2",
-    "@rspress/shared": "2.0.0-beta.16",
-    "@rspress/plugin-llms": "2.0.0-beta.16",
+    "@shikijs/transformers": "^3.20.0",
+    "@rspress/shared": "2.0.0-rc.0",
+    "@rspress/plugin-llms": "2.0.0-rc.0",
     "@types/fs-extra": "9.0.13",
-    "@types/node": "^16",
+    "@types/node": "^20",
     "classnames": "^2.5.1",
     "clsx": "^1.2.1",
     "fs-extra": "^10.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rspress": "2.0.0-beta.16",
-    "ts-node": "^10.9.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "@rspress/core": "2.0.0-rc.0",
+    "ts-node": "^10.9.2",
     "typescript": "^5"
   },
   "scripts": {

package/rspress.config.ts

@@ -1,8 +1,8 @@
 import path from 'path';
 import { pluginSass } from '@rsbuild/plugin-sass';
+import { defineConfig } from '@rspress/core';
 import { pluginLlms } from '@rspress/plugin-llms';
 import { transformerNotationHighlight } from '@shikijs/transformers';
-import { defineConfig } from 'rspress/config';
 
 const docPath = path.join(__dirname, 'docs');
 
@@ -63,7 +63,7 @@ export default defineConfig({
     ],
     editLink: {
       docRepoBaseUrl:
-        'https://github.com/web-infra-dev/modern.js/tree/main/packages/document/main-doc/docs',
+        'https://github.com/web-infra-dev/modern.js/tree/main/packages/document/docs',
       text: 'Edit this page on GitHub',
     },
     socialLinks: [
@@ -77,12 +77,6 @@ export default defineConfig({
         mode: 'link',
         content: 'https://github.com/web-infra-dev/modern.js',
       },
-      {
-        icon: 'lark',
-        mode: 'link',
-        content:
-          'https://applink.larkoffice.com/client/chat/chatter/add_by_link?link_token=d21hc667-9403-48a9-ba32-bc1440a80279',
-      },
     ],
   },
   route: {
@@ -98,6 +92,9 @@ export default defineConfig({
     },
   ],
   builderConfig: {
+    performance: {
+      buildCache: false,
+    },
     tools: {
       // FIXME: use `?raw` after upgrading to Rsbuild@1.4.0, https://github.com/web-infra-dev/rsbuild/pull/5355
       rspack(_config, { addRules }) {

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

@@ -1,14 +1,16 @@
 .card {
   display: flex;
   flex-direction: column;
-  background-color: transparent;
   padding: 32px 32px 36px;
-  color: #fff;
   font-weight: 500;
   font-size: 20px;
   box-sizing: border-box;
   border-radius: 24px;
-  background-color: rgba(51, 194, 255, 0.08);
+  background: linear-gradient(
+    150.85deg,
+    rgba(124, 178, 250, 0.14) 3%,
+    rgba(124, 178, 250, 0.08) 97.17%
+  );
   width: calc(50% - 16px);
   cursor: pointer;
   margin-bottom: 32px;
@@ -21,9 +23,11 @@
   }
 
   &:hover {
-    transition: all 0.3s ease;
-    color: #fff;
-    background-color: rgba(51, 194, 255, 0.2);
+    background: linear-gradient(
+      150.85deg,
+      rgba(124, 178, 250, 0.2) 3%,
+      rgba(124, 178, 250, 0.1) 97.17%
+    );
   }
 }
 
@@ -39,7 +43,7 @@
   margin-top: 16px;
   font-size: 14px;
   line-height: 1.4;
-  color: rgba(255, 255, 255, 0.65);
+  opacity: 0.8;
 }
 
 .icon {

package/src/components/ContentCard/index.tsx

@@ -1,6 +1,6 @@
+import { withBase } from '@rspress/core/runtime';
 import cl from 'classnames';
 import type React from 'react';
-import { withBase } from 'rspress/runtime';
 import styles from './index.module.scss';
 
 export interface ContentCardProps {

package/src/components/FeatureLayout/index.module.css

@@ -4,5 +4,5 @@
   width: 80vw;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 20vh 0 0;
+  padding: 0 0 10vh;
 }

package/src/components/Footer/index.tsx

@@ -67,21 +67,13 @@ export default function Footer() {
       title: t('topic'),
       items: [
         {
-          label: t('microFrontend'),
-          to: useUrl('/guides/topic-detail/micro-frontend/c01-introduction'),
-        },
-        {
-          label: t('stateManagement'),
-          to: useUrl('/guides/topic-detail/model/quick-start'),
+          label: t('moduleFederation'),
+          to: useUrl('/guides/topic-detail/module-federation/introduce'),
         },
         {
           label: t('pluginSystem'),
           to: useUrl('/plugin/plugin-system'),
         },
-        {
-          label: t('projectGenerator'),
-          to: useUrl('/guides/topic-detail/generator/project'),
-        },
       ],
     },
     {
@@ -119,10 +111,6 @@ export default function Footer() {
   return (
     <footer className={styles.footer}>
       <div className={styles.wrapper}>
-        <img
-          className={styles.logo}
-          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/modern-logo-home-page-0209.svg"
-        />
         <div className={styles.linksWrapper}>{Links}</div>
       </div>
     </footer>

package/src/components/Footer/styles.module.scss

@@ -1,8 +1,8 @@
 .footer {
-  margin-top: 6vh;
   display: flex;
   justify-content: center;
   padding: 10vh 0;
+  border-top: 1px solid rgba(0,0,0,0.1);
 }
 
 .logo {
@@ -12,6 +12,7 @@
 
 .wrapper {
   width: 80vw;
+  padding: 0 16px;
   max-width: 1200px;
 }
 
@@ -23,9 +24,8 @@
 
 .linkTitle {
   font-weight: bold;
-  font-size: 18px;
+  font-size: 20px;
   margin-bottom: 12px;
-  color: rgba(255, 255, 255, 0.9);
 }
 
 .linkWrapper {
@@ -35,10 +35,10 @@
 .link {
   line-height: 32px;
   font-size: 15px;
-  color: rgba(255, 255, 255, 0.8);
+  opacity: 0.7;
 
   &:hover {
-    color: rgba(255, 255, 255, 1);
+    opacity: 1;
   }
 }