@modern-js/main-doc 2.31.2 → 2.32.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @modern-js/main-doc
 
+## 2.32.1
+
+### Patch Changes
+
+- @modern-js/builder-doc@2.32.1
+
+## 2.32.0
+
+### Patch Changes
+
+- Updated dependencies [0cc3981]
+  - @modern-js/builder-doc@2.32.0
+
 ## 2.31.2
 
 ### Patch Changes

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Modern.js
+Copyright (c) 2021-present Modern.js
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/docs/en/components/enable-bff-caution.mdx

@@ -1,3 +1,3 @@
 :::caution
-Please enable BFF functionality in the current application project root directory using [new](/apis/app/commands#modern-new) first.
+Please use the [new command](/apis/app/commands#modern-new) in the root directory of the current project to enable BFF functionality first.
 :::

package/docs/en/configure/app/auto-load-plugin.mdx

@@ -1,7 +1,7 @@
 ---
-title: autoLoadPlugins
-sidebar_position: 11
+sidebar_position: 22
 ---
+
 # autoLoadPlugins
 
 - **Type:** `boolean`

package/docs/en/configure/app/bff/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "bff",
-  "position": 5
+  "position": 2
 }

package/docs/en/configure/app/builder-plugins.mdx

@@ -1,7 +1,7 @@
 ---
-title: builderPlugins
-sidebar_position: 10
+sidebar_position: 21
 ---
+
 # builderPlugins
 
 - **Type:** `BuilderPlugin[]`

package/docs/en/configure/app/dev/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "dev",
-  "position": 7
+  "position": 1
 }

package/docs/en/configure/app/experiments/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "experiments",
-  "position": 15
+  "position": 14
 }

package/docs/en/configure/app/html/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "html",
-  "position": 2
+  "position": 3
 }

package/docs/en/configure/app/output/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "output",
-  "position": 2
+  "position": 7
 }

package/docs/en/configure/app/output/ssg.mdx

@@ -10,7 +10,7 @@ sidebar_label: ssg
 Enable the SSG for **Self-controlled Routing** or **Conventional Routing**.
 
 :::info
-For more routes detail, see [routes](/guides/basic-features/routes).
+For more routes detail, see [Routing](/guides/basic-features/routes).
 
 :::
 

package/docs/en/configure/app/plugins.mdx

@@ -1,5 +1,4 @@
 ---
-title: plugins
 sidebar_position: 9
 ---
 

package/docs/en/configure/app/runtime/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "runtime",
-  "position": 3
+  "position": 12
 }

package/docs/en/configure/app/security/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "security",
-  "position": 14
+  "position": 11
 }

package/docs/en/configure/app/server/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "server",
-  "position": 4
+  "position": 6
 }

package/docs/en/configure/app/source/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "source",
-  "position": 1
+  "position": 5
 }

package/docs/en/configure/app/source/design-system.mdx

@@ -648,7 +648,7 @@ const designSystem = {
 </details>
 
 :::tip
-For more information on TailwindCSS configuration, please refer to [here](https://tailwindcss.com/docs/configuration#theme).
+For more information on Tailwind CSS configuration, please refer to [here](https://tailwindcss.com/docs/configuration#theme).
 
 :::
 
@@ -673,7 +673,7 @@ const designSystem = {
 };
 ```
 
-The property names in the `screens` object are screen names (used as prefixes for the responsive utility variants generated by TailwindCSS, such as `md:text-center`), and the values are the `min-width` at which the breakpoint should start.
+The property names in the `screens` object are screen names (used as prefixes for the responsive utility variants generated by Tailwind CSS, such as `md:text-center`), and the values are the `min-width` at which the breakpoint should start.
 
 The default breakpoints are inspired by common device resolutions:
 
@@ -859,7 +859,7 @@ Then, you can use the `dark:` prefix to set different styles for elements in dar
 </div>
 ```
 
-Please note that since these screen variants are implemented in TailwindCSS, **it is not possible to use this method to combine breakpoints with dark mode**, e.g. `md:dark:text-gray-300` will not work.
+Please note that since these screen variants are implemented in Tailwind CSS, **it is not possible to use this method to combine breakpoints with dark mode**, e.g. `md:dark:text-gray-300` will not work.
 
 #### Colors
 
@@ -1158,7 +1158,7 @@ export default defineConfig({
 
 ### Configuration Reference
 
-In addition to `screens`, `colors`, and `spacing`, all properties in the configuration object map to core plugins in TailwindCSS. Because many plugins are responsible for CSS properties that only accept a set of static values (e.g. `float`), not every plugin has a corresponding property in the theme object.
+In addition to `screens`, `colors`, and `spacing`, all properties in the configuration object map to core plugins in Tailwind CSS. Because many plugins are responsible for CSS properties that only accept a set of static values (e.g. `float`), not every plugin has a corresponding property in the theme object.
 
 All of these properties can also be extended from the default theme under the `designSystem.extend` property.
 

package/docs/en/configure/app/source/enable-async-entry.mdx

@@ -9,7 +9,7 @@ sidebar_label: enableAsyncEntry
 
 This option is used for webpack Module Federation scenario.
 
-When this option is enabled, Modern.js will wrap the automatically generated entry files with Dynamic Imports (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.
+When this option is enabled, Modern.js will wrap the automatically generated entry files with dynamic import (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.
 
 ## Background
 

package/docs/en/configure/app/source/mainEntryName.mdx

@@ -5,7 +5,7 @@ sidebar_label: mainEntryName
 # source.mainEntryName
 
 - **Type:** `string`
-- **Default value:** `main`
+- **Default:** `main`
 
 This option is used to configure the main entry name of Modern.js.
 

package/docs/en/configure/app/testing/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "testing",
-  "position": 8
+  "position": 10
 }

package/docs/en/configure/app/tools/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "tools",
-  "position": 12
+  "position": 4
 }

package/docs/en/configure/app/tools/tailwindcss.mdx

@@ -10,17 +10,10 @@ sidebar_label: tailwindcss
 ```js
 const tailwind = {
   content: [
-    './config/html/**/*.html',
-    './config/html/**/*.ejs',
-    './config/html/**/*.hbs',
-    './src/**/*.js',
-    './src/**/*.jsx',
-    './src/**/*.ts',
-    './src/**/*.tsx',
+    './src/**/*.{js,jsx,ts,tsx}',
+    './config/html/**/*.{html,ejs,hbs}',
     './storybook/**/*',
   ],
-  // Use source.design System config as Tailwind CSS theme config
-  theme: source.designSystem,
 };
 ```
 
@@ -56,8 +49,8 @@ export default {
 };
 ```
 
-### Limitations
+### Notes
 
-The `theme` attribute is not allowed, otherwise the build will fail. Modern.js use [source.designSystem](/configure/app/source/design-system) as the Tailwind CSS Theme configuration.
+Please note that if you are using the [source.designSystem](/configure/app/source/design-system) configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `source.designSystem`.
 
-Other uses are consistent with [Tailwind CSS](https://tailwindcss.com/docs/configuration).
+The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration) for more details.

package/docs/en/configure/app/usage.mdx

@@ -203,9 +203,7 @@ When using `modern.config.local.ts`, please note the following:
 - As `modern.config.local.ts` is only used for local debugging, it is not recommended to commit it to the repository, please ensure that the project's `.gitignore` file contains `modern.config.local.ts`.
 
 ```bash title=".gitingore"
-modern.config.local.ts
-modern.config.local.js
-modern.config.local.mjs
+modern.config.local.*
 ```
 
 ## Merge Multiple Configurations

package/docs/en/guides/advanced-features/bff/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "BFF",
+  "label": "Using BFF",
   "position": 2,
   "link": {
     "type": "doc",

package/docs/en/guides/advanced-features/code-split.mdx

@@ -1,7 +1,7 @@
 ---
-title: Code Split
-sidebar_position: 6
+sidebar_position: 3
 ---
+
 # Code Splitting
 
 Code splitting is a common way to optimize frontend resource loading. This article will introduce the three types of code splitting supported by Modern.js:

package/docs/en/guides/advanced-features/eslint.mdx

@@ -1,8 +1,8 @@
 ---
-title: ESLint
 sidebar_position: 8
 ---
-# ESLint
+
+# ESLint Rules
 
 **Modern.js ESLint Rules** is the full set of **ESLint** rules, includes `@modern-js` (Lint rules for Node.js projects) and `@modern-js-app` (Lint rules for web projects).
 

package/docs/en/guides/advanced-features/low-level.mdx

@@ -1,7 +1,7 @@
 ---
-title: Low-Level Tools
-sidebar_position: 11
+sidebar_position: 10
 ---
+
 # Low-Level Tools
 
 ## Usage

package/docs/en/guides/advanced-features/ssg.mdx

@@ -1,6 +1,5 @@
 ---
-title: Static Site Generation
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 # Static Site Generation
@@ -55,7 +54,7 @@ The above file directory will generate the following three routes:
 - `/user/profile`
 
 :::note
-If you are not familiar with the rules of Conventional Routing, you can first check [routes](/guides/basic-features/routes).
+If you are not familiar with the rules of Conventional Routing, you can first check [Routing](/guides/basic-features/routes).
 
 :::
 

package/docs/en/guides/advanced-features/ssr.mdx

@@ -1,9 +1,8 @@
 ---
-title: Server-side rendering
-sidebar_position: 3
+sidebar_position: 4
 ---
 
-# Server-side rendering
+# Server-Side Rendering
 
 In Modern.js, SSR is readily available without the need for developers to write intricate server-level logic or worry about the operation and maintenance of SSR services. Additionally, Modern.js includes a comprehensive degradation strategy for SSR to ensure safe page execution.
 

package/docs/en/guides/advanced-features/testing.mdx

@@ -1,8 +1,8 @@
 ---
-sidebar_position: 10
-title: Testing
+sidebar_position: 11
 ---
-# Testing
+
+# Using Jest
 
 Modern.js integrates the testing capabilities of [Jest](https://jestjs.io/) by default.
 

package/docs/en/guides/advanced-features/using-storybook.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 20
+sidebar_position: 12
 ---
 
 # Using Storybook

package/docs/en/guides/advanced-features/web-server.mdx

@@ -1,7 +1,7 @@
 ---
-title: Custom Web Server
-sidebar_position: 3
+sidebar_position: 13
 ---
+
 # Custom Web Server
 
 As a client-centric development framework, Modern.js has limited customization capabilities on the server side. However, in some development scenarios, special server-level logic needs to be customized, such as user authentication, request preprocessing, and adding page rendering skeletons.

package/docs/en/guides/basic-features/alias.mdx

@@ -1,8 +1,8 @@
 ---
-title: Alias
-sidebar_position: 8
+sidebar_position: 3
 ---
-# Alias
+
+# Path Alias
 
 Modern.js allows you to use alias to import modules from custom directories in JS and CSS, and comes with the following built-in alias:
 

package/docs/en/guides/basic-features/css.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 2
 ---
 
-# CSS Solutions
+# Styling
 
 Modern.js has built-in a variety of commonly used CSS solutions, including Less / Sass / Stylus preprocessors, PostCSS, CSS Modules, CSS-in-JS, and Tailwind CSS.
 
@@ -65,7 +65,7 @@ If you need to use other CSS-in-JS libraries such as [styled-jsx](https://www.np
 
 Follow the steps below to make a selection:
 
-```bash
+```text
 ? Please select the operation you want: Enable features
 ? Please select the feature name: Enable Tailwind CSS
 ```
@@ -103,6 +103,37 @@ Depending on your needs, you can selectively import the CSS files provided by Ta
 
 :::
 
+### Tailwind CSS Autocomplete
+
+Tailwind CSS provides an official extension called [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) for autocompletion of Tailwind CSS class names, CSS functions, and directives in VS Code.
+
+You can follow the steps below to enable the autocompletion feature:
+
+1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
+2. Create a `tailwind.config.ts` file in the root directory of your project and write the desired Tailwind CSS configuration.
+
+```ts title="tailwind.config.ts"
+export default {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './config/html/**/*.{html,ejs,hbs}',
+    './storybook/**/*',
+  ],
+};
+```
+
+3. In the `modern.config.ts` file, import the `tailwind.config.ts` file you created and pass it to [tools.tailwindcss](/configure/app/tools/tailwindcss), so that Modern.js can recognize the Tailwind CSS configuration correctly.
+
+```ts title="modern.config.ts"
+import tailwindConfig from './tailwind.config';
+
+export default defineConfig({
+  tools: {
+    tailwindcss: tailwindConfig,
+  },
+});
+```
+
 ### Tailwind CSS Version
 
 Modern.js supports both Tailwind CSS v2 and v3 versions, and the framework will recognize the version of the `tailwindcss` dependency in the project `package.json` file and enable the corresponding configuration. By default, we will install Tailwind CSS v3 version for you.
@@ -120,39 +151,3 @@ Tailwind CSS v2 and v3 do not support the IE 11 browser, please refer to:
 - [Tailwind CSS v2 - Browser Support](https://v2.tailwindcss.com/docs/browser-support)
 
 If you use Tailwind CSS on IE 11 browser, some styles may not be available, please use it with caution.
-
-### Theme Configuration
-
-When you need to customize the [theme](https://tailwindcss.com/docs/theme) configuration of Tailwind CSS, you can modify it in the [`source.designSystem`](/configure/app/source/design-system) configuration. For example, adding a `primary` color theme:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    designSystem: {
-      extend: {
-        colors: {
-          primary: '#5c6ac4',
-        },
-      },
-    },
-  },
-});
-```
-
-When you need to make other special configurations to Tailwind CSS besides [theme](https://tailwindcss.com/docs/theme), you can configure them in [`tools.tailwindcss`](/configure/app/tools/tailwindcss), such as setting `variants`:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    tailwindcss: {
-      variants: {
-        extend: {
-          backgroundColor: ['active'],
-        },
-      },
-    },
-  },
-});
-```
-
-> When you configure Tailwind CSS for your project, the combination of [source.designSystem](/configure/app/source/design-system) and [tools.tailwindcss](/configure/app/tools/tailwindcss) configurations is equivalent to configuring a `tailwindcss.config.js` file separately. [source.designSystem](/configure/app/source/design-system) is equivalent to the Tailwind CSS [theme](https://v2.tailwindcss.com/docs/configuration#theme) configuration.

package/docs/en/guides/basic-features/data-fetch.mdx

@@ -1,7 +1,7 @@
 ---
-title: Data Fetching
-sidebar_position: 3
+sidebar_position: 4
 ---
+
 # Data Fetching
 
 Modern.js provides out-of-the-box data fetching capabilities, allowing developers to develop in an isomorphic way in both client-side and server-side code.

package/docs/en/guides/basic-features/env-vars.mdx

@@ -1,8 +1,8 @@
 ---
-title: Environment Variable
 sidebar_position: 7
 ---
-# Environment Variable
+
+# Environment Variables
 
 Modern.js provides support for environment variables, including built-in environment variables and custom environment variables.
 

package/docs/en/guides/basic-features/html.mdx

@@ -1,5 +1,4 @@
 ---
-title: HTML Template
 sidebar_position: 9
 ---
 

package/docs/en/guides/basic-features/mock.mdx

@@ -1,8 +1,8 @@
 ---
-title: Mock
-sidebar_position: 6
+sidebar_position: 5
 ---
-# Mock
+
+# Data Mocking
 
 Modern.js allows you to easily generate mock data so that the front-end can develop independently without depending on the back-end API.
 

package/docs/en/guides/basic-features/proxy.mdx

@@ -1,8 +1,8 @@
 ---
-title: Proxy
-sidebar_position: 5
+sidebar_position: 6
 ---
-# Proxy
+
+# Network Proxy
 
 ## Local Proxy
 

package/docs/en/guides/basic-features/routes.mdx

@@ -1,9 +1,8 @@
 ---
-title: Routes
 sidebar_position: 1
 ---
 
-# Routes
+# Routing
 
 Modern.js's routing is based on [React Router 6](https://reactrouter.com/en/main) and provides multiple types of routing modes. According to different [entry](/guides/concept/entries) types, routing is divided into three modes: **Conventional Routing**, **Self-controlled Routing**, and **Other**.
 

package/docs/en/guides/concept/builder.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 2
 ---
 
-# Builder
+# Build Engine
 
 **Modern.js uses [Modern.js Builder](https://modernjs.dev/builder/en) to build your Web App.**
 
@@ -16,7 +16,7 @@ From a building perspective, Modern.js is divided into three layers, from top to
 - Common build engine: Modern.js Builder.
 - Low-level bundler: webpack and Rspack.
 
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-0824.png" style={{ width: '100%', maxWidth: '540px' }} />
 
 ## Builder Documentation
 

package/docs/en/guides/concept/entries.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-# Entry
+# Page Entry
 
 In this chapter, you will learn about the entry convention in Modern.js and how to customize it.
 

package/docs/en/guides/get-started/upgrade.mdx

@@ -1,9 +1,8 @@
 ---
-title: Upgrade
 sidebar_position: 3
 ---
 
-# Upgrade
+# Upgrading
 
 ## Upgrade with command
 

package/docs/zh/community/releases.mdx

@@ -24,7 +24,7 @@ Modern.js 遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/) 语义化
 
 ## 版本升级
 
-当你需要升级项目中的 Modern.js 版本时，可以使用 `modern upgrade` 命令，参考 [升级](/guides/get-started/upgrade)。
+当你需要升级项目中的 Modern.js 版本时，可以使用 `modern upgrade` 命令，参考 [版本升级](/guides/get-started/upgrade)。
 
 ```bash
 npx modern upgrade

package/docs/zh/community/team.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-# 团队
+# 开发团队
 
 Modern.js 的开发由字节跳动的 Modern.js 团队和社区贡献者驱动。
 

package/docs/zh/components/enable-bff-caution.mdx

@@ -1,4 +1,4 @@
-:::caution 注意
-请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
+:::tip
+请先在当前项目的根目录使用 [new 命令](/apis/app/commands#modern-new) 启用 BFF 功能。
 
 :::

package/docs/zh/configure/app/auto-load-plugin.mdx

@@ -1,9 +1,8 @@
 ---
-title: autoLoadPlugins (自动注册插件)
-sidebar_position: 11
+sidebar_position: 22
 ---
 
-# autoLoadPlugins (自动注册插件)
+# autoLoadPlugins 自动注册插件
 
 - **类型：** `boolean`
 - **默认值：** `false`

package/docs/zh/configure/app/bff/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "bff (BFF API)",
-  "position": 5
+  "label": "bff 一体化",
+  "position": 2
 }

package/docs/zh/configure/app/builder-plugins.mdx

@@ -1,9 +1,8 @@
 ---
-title: builderPlugins (构建插件)
-sidebar_position: 10
+sidebar_position: 21
 ---
 
-# builderPlugins (构建插件)
+# builderPlugins 构建插件
 
 - **类型：** `BuilderPlugin[]`
 - **默认值：** `[]`

package/docs/zh/configure/app/deploy/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "deploy (部署)",
+  "label": "deploy 部署",
   "position": 8
 }