@bleedingdev/modern-js-app-tools 3.5.0-ultramodern.99 → 3.8.1-ultramodern.2

package/docs/guides/advanced-features/page-performance/{optimize-bundle.mdx → optimize-bundle.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 13
----
-
 # Bundle Size Optimization
 
 Bundle size optimization is an important part of optimizing your production environment because it directly affects the user experience. In this document, we will introduce some common bundle size optimization methods in Modern.js.
@@ -46,7 +42,7 @@ This will generate a bundle analysis report to help you identify large dependenc
 
 Modern.js will compile the code according to the project's Browserslist config, and inject some Polyfills. If the project does not need to be compatible with legacy browsers, you can adjust the Browserslist and drop some legacy browsers, thereby reducing the compilation overhead on syntax and polyfill.
 
-Modern.js's default [`output.overrideBrowserslist`](/configure/app/output/override-browserslist.html) config is:
+Modern.js's default [`output.overrideBrowserslist`](/configure/app/output/override-browserslist.md) config is:
 
 ```js
 ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'];
@@ -59,12 +55,12 @@ For example, if you only need to be compatible with browsers above Chrome 100, y
 ```
 
 :::tip
-Please read the [Browserslist configuration](/guides/advanced-features/compatibility.html) chapter to know more about the usage of Browserslist.
+Please read the [Browserslist configuration](/guides/advanced-features/compatibility.md) chapter to know more about the usage of Browserslist.
 :::
 
 ## Usage polyfill
 
-When it is clear that third-party dependencies do not require additional polyfills, you can set [output.polyfill](/configure/app/output/polyfill.html) to `usage`.
+When it is clear that third-party dependencies do not require additional polyfills, you can set [output.polyfill](/configure/app/output/polyfill.md) to `usage`.
 
 In `usage` mode, Modern.js analyzes the syntax used in the source code and injects the required polyfill code on demand to reduce the size of polyfill.
 
@@ -77,7 +73,7 @@ export default {
 ```
 
 :::tip
-Please read the [Browser Compatibility](/guides/advanced-features/compatibility) chapter to know more about the usage of Browserslist.
+Please read the [Browser Compatibility](/guides/advanced-features/compatibility.md) chapter to know more about the usage of Browserslist.
 :::
 
 ## Image Compression

package/docs/{components/internal-logger.mdx → guides/advanced-features/server-monitor/logger.md}

@@ -1,3 +1,19 @@
+# Logs Events
+
+Log events are distributed by Modern.js as events of type `log`.
+
+## Built-in Events
+
+Based on server-side runtime logic, Modern.js provides the following log events:
+
+| Stage          | Message                                       | Level |
+| -------------- | --------------------------------------------- | ----- |
+| RENDER\_HTML   | App Render To HTML                            | error |
+| RENDER\_STREAM | An error occurs during streaming SSR          | error |
+| RENDER\_SHELL  | An error occurs during streaming render shell | error |
+
+## Built-in Monitor
+
 In Modern.js, log events are handled by `LoggerMonitor`, which outputs logs to the console.
 
 :::info

package/docs/guides/advanced-features/server-monitor/metrics.md

@@ -0,0 +1,58 @@
+# Metrics Events
+
+Metric events are distributed by Monitors as events of type `timing` or `counter`.
+
+## Built-in Events
+
+When SSR is enabled, we need to monitor server-side phase durations and have the capability to diagnose server-side issues.
+
+Based on server-side runtime logic, Modern.js provides the following metric events:
+
+| Key                      | Description                                                                                                            |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
+| server-handle-request    | Modern.js Server request handling duration                                                                             |
+| ssr-render-shell         | \[SSR] When using Streaming SSR, React renders a shell for early streaming. This marks shell rendering completion time |
+| ssr-render-html          | \[SSR] Time taken by React to render component tree to HTML (typically under 50ms)                                     |
+| server-middleware        | Total execution time of Modern.js custom server middlewares                                                            |
+| server-loader            | Server-side Data Loader total duration                                                                                 |
+| server-loader-#id        | Individual Data Loader durations on server-side                                                                        |
+| server-loader-navigation | Server-side Data Loader duration during client navigation                                                              |
+
+Modern.js server workflow diagram:
+
+![server](https://lf3-static.bytednsdoc.com/obj/eden-cn/eeeh7uhbepxlpe/edenx-website/e374def0-c179-40aa-9cfe-e82e181663b1.jpeg)
+
+## Built-in Monitor
+
+In Modern.js, metric events are also handled by `LoggerMonitor`, which outputs metrics to the console in a specific format.
+
+:::info
+The built-in `LoggerMonitor` depends on the [rslog](https://www.npmjs.com/package/rslog) library.
+:::
+
+The `rslog` instance initialized in Modern.js outputs logs at `debug` level and above in development environment by default, and outputs all logs in production environment. In the built-in `LoggerMonitor`, all metric events are output as Debug logs. Therefore, if you want to view metric event information in the development environment, you need to add additional environment variables.
+
+Developers can add the environment variable `DEBUG=true` when running the `dev` command. If running normally, after accessing, you can see the following output in the console:
+
+```shell
+> Local:    http://localhost:8080/
+> press h + enter to show shortcuts
+
+debug   SSR Debug - server-loader, cost: 2.000094, req.url = /
+debug   SSR Debug - ssr-prerender, cost: 6.99997, req.url = /
+debug   SSR Debug - ssr-render-html, cost: 0.999927, req.url = /
+debug   Debug - server-handle-request, cost: 19.999981, req.url = /
+debug     --> GET / 200 90ms
+```
+
+## Server-Timing
+
+Modern.js injects phase metrics as Server-Timing headers into HTML responses.
+
+Developers can retrieve these metrics using the [Performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance) in browsers:
+
+```ts
+const navigation = performance.getEntriesByType('navigation')[0];
+const serverTiming = navigation.serverTiming;
+console.log(serverTiming);
+```

package/docs/guides/advanced-features/server-monitor/{monitors.mdx → monitors.md}

@@ -68,12 +68,12 @@ export interface Monitors {
 
 Modern.js comes with a built-in default Monitor, where different events trigger different behaviors in the built-in Monitor. For more details, see:
 
-- [Log Event](/guides/advanced-features/server-monitor/logger)
-- [Metrics Event](/guides/advanced-features/server-monitor/metrics)
+- [Log Event](/guides/advanced-features/server-monitor/logger.md)
+- [Metrics Event](/guides/advanced-features/server-monitor/metrics.md)
 
 ## Register Monitors
 
-Developers can register their own Monitors using the `push` API, but this can only be done in [server middleware](/guides/advanced-features/web-server#unstable-middleware) or [server plugins](/plugin/server-plugins/api). Registration is not available in Data Loaders, components, or init functions.
+Developers can register their own Monitors using the `push` API, but this can only be done in [server middleware](/guides/advanced-features/web-server.md#unstable-middleware) or [server plugins](/plugin/server-plugins/api.md). Registration is not available in Data Loaders, components, or init functions.
 
 ```ts title="server/modern.server.ts"
 import {

package/docs/guides/advanced-features/{source-build.mdx → source-build.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 11
----
-
 # Source Code Build Mode
 
 The source code build mode is used in the monorepo development scenario, allowing developers to directly reference the source code of other sub-projects within the monorepo for development.
@@ -68,7 +64,7 @@ The disadvantages are:
 
 ### Enabling Configuration
 
-You can enable source code build mode by setting [experiments.sourceBuild](/configure/app/experiments/source-build.html) to `true`.
+You can enable source code build mode by setting [experiments.sourceBuild](/configure/app/experiments/source-build.md) to `true`.
 
 ```ts
 export default {

package/docs/guides/advanced-features/{web-server.mdx → web-server.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 16
----
-
 # Custom Web Server
 
 Modern.js encapsulates most server-side capabilities required by projects, typically eliminating the need for server-side development. However, in certain scenarios such as user authentication, request preprocessing, or adding page skeletons, custom server-side logic may still be necessary.
@@ -72,11 +68,7 @@ In the `server/modern.server.ts` file, you can add the following configurations
 
 In the **Plugin**, you can define **Middleware** and **RenderMiddleware**. The middleware loading process is illustrated in the following diagram:
 
-<img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/10eh7nuhpenuhog/server-md-wf.png"
-  style={{ width: '100%', maxWidth: '540px' }}
-/>
-
+![](https://lf3-static.bytednsdoc.com/obj/eden-cn/10eh7nuhpenuhog/server-md-wf.png)
 ### Basic Configuration
 
 ```ts title="server/modern.server.ts"

package/docs/guides/basic-features/{alias.mdx → alias.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 4
----
-
 # Path Alias
 
 Path aliases allow developers to define aliases for modules, making it easier to reference them in code. This can be useful when you want to use a short, easy-to-remember name for a module instead of a long, complex path.
@@ -11,7 +7,7 @@ For example, if you frequently reference the `src/common/request.ts` module in y
 In Modern.js, there are two ways to set up path aliases:
 
 - Through the `paths` configuration in `tsconfig.json`.
-- Through the [source.alias](/configure/app/source/alias) configuration.
+- Through the [source.alias](/configure/app/source/alias.md) configuration.
 
 ## Using `tsconfig.json`'s `paths` Configuration
 
@@ -37,7 +33,7 @@ You can refer to the [TypeScript - paths](https://www.typescriptlang.org/tsconfi
 
 ## Use `source.alias` Configuration
 
-Modern.js provides the [source.alias](/configure/app/source/alias) configuration option. You can configure this option using an object or a function.
+Modern.js provides the [source.alias](/configure/app/source/alias.md) configuration option. You can configure this option using an object or a function.
 
 ### Use Cases
 
@@ -84,7 +80,7 @@ export default {
 
 The `paths` configuration in `tsconfig.json` takes precedence over the `source.alias` configuration. When a path matches the rules defined in both `paths` and `source.alias`, the value defined in `paths` will be used.
 
-You can adjust the priority of these two options using [source.aliasStrategy](/configure/app/source/alias-strategy).
+You can adjust the priority of these two options using [source.aliasStrategy](/configure/app/source/alias-strategy.md).
 
 ## Default Aliases
 

package/docs/guides/basic-features/css/{css-in-js.mdx → css-in-js.md}

@@ -10,15 +10,18 @@ The Modern.js plugin `@modern-js/plugin-styled-components` provides support for
 
 First, you need to install the `styled-components` plugin dependency and the `styled-components` library:
 
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs
-  command={{
-    npm: 'npm install @modern-js/plugin-styled-components styled-components -D',
-    yarn: 'yarn add @modern-js/plugin-styled-components styled-components -D',
-    pnpm: 'pnpm install @modern-js/plugin-styled-components styled-components -D',
-  }}
-/>
+
+```sh [npm]
+npm install @modern-js/plugin-styled-components styled-components -D
+```
+
+```sh [yarn]
+yarn add @modern-js/plugin-styled-components styled-components -D
+```
+
+```sh [pnpm]
+pnpm install @modern-js/plugin-styled-components styled-components -D
+```
 
 Then configure the `styled-components` plugin in `modern.config.ts`:
 

package/docs/guides/basic-features/css/{css-modules.mdx → css-modules.md}

@@ -38,7 +38,7 @@ export default () => {
 
 By default, only files ending in `*.module.css` are treated CSS Modules.
 
-If you want to treat all CSS files in the source directory as CSS Modules, you can enable the [output.disableCssModuleExtension](/configure/app/output/disable-css-module-extension) config, for example:
+If you want to treat all CSS files in the source directory as CSS Modules, you can enable the [output.disableCssModuleExtension](/configure/app/output/disable-css-module-extension.md) config, for example:
 
 ```ts
 export default {
@@ -63,7 +63,7 @@ We do not recommend enabling this config, because after enabling disableCssModul
 
 By default, only files ending in `*.module.css` are treated CSS Modules.
 
-If you want to enable CSS Modules only for specified style files, you can configure [output.cssModules](/configure/app/output/css-modules), for example:
+If you want to enable CSS Modules only for specified style files, you can configure [output.cssModules](/configure/app/output/css-modules.md), for example:
 
 ```ts
 export default {
@@ -149,7 +149,7 @@ After adding the type declaration, if the type error still exists, you can try t
 
 Although the above method can provide the type of CSS Modules, it cannot accurately prompt which classNames are exported by a certain CSS file.
 
-Modern.js supports generating accurate type declarations for CSS Modules, you only need to enable the [output.enableCssModuleTSDeclaration](/configure/app/output/enable-css-module-tsdeclaration) config, and then execute the build, Modern.js will generate type declaration files for all CSS Modules.
+Modern.js supports generating accurate type declarations for CSS Modules, you only need to enable the [output.enableCssModuleTSDeclaration](/configure/app/output/enable-css-module-tsdeclaration.md) config, and then execute the build, Modern.js will generate type declaration files for all CSS Modules.
 
 ```ts
 export default {

package/docs/guides/basic-features/css/{css.mdx → css.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 1
----
-
 # 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.
@@ -10,7 +6,7 @@ Modern.js has built-in a variety of commonly used CSS solutions, including Less
 
 Modern.js has built-in popular community CSS preprocessors, including Less and Sass.
 
-By default, you don't need to configure Less and Sass. If you have custom loader configuration requirements, you can set them up by configuring [tools.less](/configure/app/tools/less) and [tools.sass](/configure/app/tools/sass).
+By default, you don't need to configure Less and Sass. If you have custom loader configuration requirements, you can set them up by configuring [tools.less](/configure/app/tools/less.md) and [tools.sass](/configure/app/tools/sass.md).
 
 You can also use Stylus in Modern.js by installing the Stylus plugin provided by Rsbuild. For usage, please refer to [Stylus Plugin](https://v2.rsbuild.rs/plugins/list/plugin-stylus).
 
@@ -22,7 +18,7 @@ Please refer to [Rsbuild - Using PostCSS](https://v2.rsbuild.rs/guide/styling/cs
 
 ## Using Lightning CSS
 
-Modern.js supports using [Lightning CSS](https://lightningcss.dev/) to convert CSS code. This feature can be turned on by configuring [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader).
+Modern.js supports using [Lightning CSS](https://lightningcss.dev/) to convert CSS code. This feature can be turned on by configuring [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader.md).
 
 Please refer to [Rsbuild - Using Lightning CSS](https://v2.rsbuild.rs/guide/styling/css-usage#lightning-css) for detailed usage.
 

package/docs/guides/basic-features/data/{data-cache.mdx → data-cache.md}

@@ -1,11 +1,6 @@
----
-title: Data Caching
-sidebar_position: 4
----
-
 # Data Caching
 
-The `cache` function allows you to cache the results of data fetching or computation, Compared to full-page [rendering cache](/guides/basic-features/render/ssr-cache), it provides more fine-grained control over data granularity and is applicable to various scenarios such as Client-Side Rendering (CSR), Server-Side Rendering (SSR), and API services (BFF).
+The `cache` function allows you to cache the results of data fetching or computation, Compared to full-page [rendering cache](/guides/basic-features/render/ssr-cache.md), it provides more fine-grained control over data granularity and is applicable to various scenarios such as Client-Side Rendering (CSR), Server-Side Rendering (SSR), and API services (BFF).
 
 ## Basic Usage
 

package/docs/guides/basic-features/data/{data-fetch.mdx → data-fetch.md}

@@ -1,14 +1,10 @@
----
-sidebar_position: 3
----
-
 # Data Fetching
 
 Modern.js provides out-of-the-box data fetching capabilities. Developers can use these APIs to fetch data in their projects. It's important to note that these APIs do not help the application make requests but assist developers in managing data better and improving project performance.
 
 ## What is Data Loader
 
-Modern.js recommends managing routes using [conventional routing](/guides/basic-features/routes/routes). Each route component (`layout.ts`, `page.ts`, or `$.tsx`) can have a same-named `.data` file. These files can export a `loader` function, known as Data Loader, which executes before the corresponding route component renders to provide data for the component. Here is an example:
+Modern.js recommends managing routes using [conventional routing](/guides/basic-features/routes/routes.md). Each route component (`layout.ts`, `page.ts`, or `$.tsx`) can have a same-named `.data` file. These files can export a `loader` function, known as Data Loader, which executes before the corresponding route component renders to provide data for the component. Here is an example:
 
 ```bash
 .
@@ -54,7 +50,7 @@ In a CSR environment, the `loader` function executes on the browser side and can
 
 In an SSR environment, the `loader` function only executes on the server side for initial page loads and when navigating. Here it can call any Node.js APIs, and any dependencies or code used won't be included in the client-side bundle.
 
-When navigating on the client side, based on [conventional routing](/guides/basic-features/routes/routes), Modern.js supports parallel execution (requests) of all `loader` functions. For example, when visiting `/user/profile`, the `loader` functions under `/user` and `/user/profile` will execute in parallel, solving the request-render waterfall issue and significantly improving page performance.
+When navigating on the client side, based on [conventional routing](/guides/basic-features/routes/routes.md), Modern.js supports parallel execution (requests) of all `loader` functions. For example, when visiting `/user/profile`, the `loader` functions under `/user` and `/user/profile` will execute in parallel, solving the request-render waterfall issue and significantly improving page performance.
 
 :::tip
 The `loader` is responsible for data fetching, with route parameters and request information provided as input. Generally, there's no need to access browser APIs. It's recommended to keep it environment-agnostic for future SSR compatibility.
@@ -66,7 +62,7 @@ The `loader` function has two parameters used for getting route parameters and r
 
 ### params
 
-`params` is the dynamic route segments when the route is a [dynamic route](/guides/basic-features/routes/routes#dynamic-routes), which passed as parameters to the `loader` function:
+`params` is the dynamic route segments when the route is a [dynamic route](/guides/basic-features/routes/routes.md#dynamic-routes), which passed as parameters to the `loader` function:
 
 ```tsx title="routes/user/[id]/page.data.ts"
 import { LoaderFunctionArgs } from '@modern-js/runtime/router';
@@ -153,7 +149,7 @@ export async function loader() {
 
 ### Basic Usage
 
-In a `loader` function, you can handle errors by using `throw error` or `throw response`. When an error is thrown in the `loader` function, Modern.js will stop executing the remaining code in the current `loader` and switch the front-end UI to the defined [`ErrorBoundary`](/guides/basic-features/routes/routes#error-handling) component:
+In a `loader` function, you can handle errors by using `throw error` or `throw response`. When an error is thrown in the `loader` function, Modern.js will stop executing the remaining code in the current `loader` and switch the front-end UI to the defined [`ErrorBoundary`](/guides/basic-features/routes/routes.md#error-handling) component:
 
 ```tsx
 // routes/user/profile/page.data.ts

package/docs/guides/basic-features/data/{data-write.mdx → data-write.md}

@@ -1,10 +1,6 @@
----
-sidebar_position: 4
----
-
 # Data Writing
 
-In the [Data Fetching](/guides/basic-features/data/data-fetch) section, we introduced how Modern.js fetches data. This might bring up two questions:
+In the [Data Fetching](/guides/basic-features/data/data-fetch.md) section, we introduced how Modern.js fetches data. This might bring up two questions:
 
 1. How do I update the data returned by the Data Loader?
 2. How do I send new data to the server?
@@ -13,7 +9,7 @@ In Modern.js, you can use Data Action to address these scenarios.
 
 ## What is Data Action
 
-Modern.js recommends managing routes using [conventional routing](/guides/basic-features/routes/routes). Each route component (`layout.ts`, `page.ts`, or `$.tsx`) can have a same-named `.data` file. These files can export an `action` function, known as Data Action, which developers can call at an appropriate time:
+Modern.js recommends managing routes using [conventional routing](/guides/basic-features/routes/routes.md). Each route component (`layout.ts`, `page.ts`, or `$.tsx`) can have a same-named `.data` file. These files can export an `action` function, known as Data Action, which developers can call at an appropriate time:
 
 ```bash
 .
@@ -69,7 +65,7 @@ export default () => {
 }
 ```
 
-After executing `submit`, the defined `action` function will be triggered. You can get the submitted data from the [parameters](/guides/basic-features/data/data-write.html#parameters) in the `action` function and ultimately send the data to the server.
+After executing `submit`, the defined `action` function will be triggered. You can get the submitted data from the [parameters](/guides/basic-features/data/data-write.md#parameters) in the `action` function and ultimately send the data to the server.
 
 Once the `action` function executes, Modern.js will automatically run the `loader` function code to update the data and view accordingly.
 
@@ -81,7 +77,7 @@ Similar to the `loader` function, the `action` function takes two parameters: `p
 
 ### params
 
-`params` is the dynamic route segments when the route is a [dynamic route](/guides/basic-features/routes/routes#dynamic-routes), which are passed as parameters to the `action` function:
+`params` is the dynamic route segments when the route is a [dynamic route](/guides/basic-features/routes/routes.md#dynamic-routes), which are passed as parameters to the `action` function:
 
 ```tsx title="routes/user/[id]/page.data.ts"
 import { ActionFunctionArgs } from '@modern-js/runtime/router;
@@ -134,6 +130,7 @@ submit(null, { method: "post", action: "/logout" });
 ```
 
 The `submit` function takes two parameters. The first parameter is the `formData` passed to the server. The second parameter is an optional object where:
+
 - `method` corresponds to the form submission method. In most data writing scenarios, you can set the `method` to `post`.
 - `action` specifies the route component to trigger the Data Action. If not provided, it defaults to the current route component's action. For example, executing submit in `user/page.tsx` or its sub-components will trigger the action defined in `user/page.data.ts`.
 
@@ -223,7 +220,7 @@ In Modern.js, we aim to help developers automatically synchronize client and ser
 
 ![state manage](https://lf3-static.bytednsdoc.com/obj/eden-cn/ulkl/ljhwZthlaukjlkulzlp/action-state-manage1.png)
 
-If the shared data in your project mainly comes from the server, you don't need to introduce a client-side state management library. Use Data Loader to request data and share it in sub-components via [`useRouteLoaderData`](/guides/basic-features/data/data-fetch). Use Data Action to modify and synchronize the server's state.
+If the shared data in your project mainly comes from the server, you don't need to introduce a client-side state management library. Use Data Loader to request data and share it in sub-components via [`useRouteLoaderData`](/guides/basic-features/data/data-fetch.md). Use Data Action to modify and synchronize the server's state.
 
 ## CSR and SSR
 

package/docs/guides/basic-features/debug/{mock.mdx → mock.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 5
----
-
 # 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.
@@ -20,7 +16,7 @@ By convention, when there is an `index.ts` in the `config/mock/` directory, mock
 └── modern.config.ts
 ```
 
-You can use [`dev.mockDir`](/configure/app/dev/mock-dir) to place the
+You can use [`dev.mockDir`](/configure/app/dev/mock-dir.md) to place the
 Mock entry in another directory:
 
 ```js title="modern.config.ts"

package/docs/guides/basic-features/debug/{proxy.mdx → proxy.md}

@@ -1,10 +1,6 @@
----
-sidebar_position: 6
----
-
 # Local Proxy
 
-Modern.js provides a way to configure the development proxy in [`dev.server.proxy`](/configure/app/dev/server).
+Modern.js provides a way to configure the development proxy in [`dev.server.proxy`](/configure/app/dev/server.md).
 
 For example, to proxy the local interface to another address:
 

package/docs/guides/basic-features/debug/{using-storybook.mdx → using-storybook.md}

@@ -1,9 +1,3 @@
----
-sidebar_position: 15
----
-
-import { PackageManagerTabs } from '@theme'
-
 # Using Storybook
 
 [Storybook](https://storybook.js.org/) is a tool specifically designed for component debugging. It provides:
@@ -26,7 +20,26 @@ This document only provides the simplest usage. For more information, please ref
 
 ## Installation
 
-<PackageManagerTabs command="install @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D" />
+
+```sh [npm]
+npm install @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D
+```
+
+```sh [yarn]
+yarn add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D
+```
+
+```sh [pnpm]
+pnpm add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D
+```
+
+```sh [bun]
+bun add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D
+```
+
+```sh [deno]
+deno add npm:@rsbuild/core npm:storybook-builder-rsbuild npm:storybook-addon-modernjs -D
+```
 
 You need to install `@rsbuild/core` in your project, otherwise the plugin may not work properly.
 
@@ -43,7 +56,6 @@ const config: StorybookConfig = {
 export default config
 ```
 
-
 ## BFF Integrated Calls in Storybook
 
 When you want to call BFF APIs directly in Storybook components (for example `/api/**`), start the BFF service and configure a proxy in Storybook's dev server to avoid CORS issues.

package/docs/guides/basic-features/{deploy.mdx → deploy.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 15
----
-
 # Deploy Application
 
 Currently, Modern.js offers two deployment way:
@@ -165,8 +161,7 @@ Assuming the directory structure of the Monorepo repository is as follows:
 
 You need to configure Base directory on the netlify platform as `packages/app`:
 
-<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/netlify-monorepo-basedir.png?x-resource-account=public" />
-
+![](https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/netlify-monorepo-basedir.png?x-resource-account=public)
 Add the following script in `packages/app/package.json`, before executing the deployment command of the `app` repository, first execute the build of other repositories in the workspace:
 
 ```json
@@ -220,8 +215,7 @@ Add the following content to `vercel.json`:
 
 Commit your project to git, select Framework Preset as `Other` on the Vercel platform and deploy.
 
-<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-framework-preset.png" />
-
+![](https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-framework-preset.png)
 :::info
 You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr).
 
@@ -265,8 +259,7 @@ Assuming the directory structure of the Monorepo repository is as follows:
 
 First, you need to configure the **Root Directory** as `packages/app` on the Vercel platform:
 
-<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-root-directory.png" />
-
+![](https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-root-directory.png)
 Specify Node.js runtime as `20.x`:
 
 ```json title="package.json"
@@ -370,9 +363,26 @@ app.listen(3000);
 
 Now, you can add some code to include the logic for accessing static resources and HTML files in `server.js`. We need to use the `mime-types` package to get the MIME types of static resources, so let's install the dependency first:
 
-import { PackageManagerTabs } from '@theme';
 
-<PackageManagerTabs command="add mime-types" />
+```sh [npm]
+npm add mime-types
+```
+
+```sh [yarn]
+yarn add mime-types
+```
+
+```sh [pnpm]
+pnpm add mime-types
+```
+
+```sh [bun]
+bun add mime-types
+```
+
+```sh [deno]
+deno add npm:mime-types
+```
 
 ```ts title="server.js"
 const Koa = require('koa');
@@ -402,7 +412,7 @@ The above code is a basic example. Your application might have multiple entry po
 
 Please note that if your project uses Modern.js conventional routing or if you have set up client-side routing with React Router, you must access HTML files through the correct `baseURL`.
 
-In Modern.js, the default `baseURL` is `'/'`. You can configure it by modifying [`server.baseUrl`](/configure/app/server/base-url) in `modern.config.ts`.
+In Modern.js, the default `baseURL` is `'/'`. You can configure it by modifying [`server.baseUrl`](/configure/app/server/base-url.md) in `modern.config.ts`.
 
 :::danger
 For projects with client-side routing, you can never access HTML files through the `/index.html` path.

package/docs/guides/basic-features/{env-vars.mdx → env-vars.md}

@@ -1,34 +1,30 @@
----
-sidebar_position: 7
----
-
 # Environment Variables
 
 Modern.js provides support for environment variables, including built-in environment variables and custom environment variables.
 
 ## Built-in Environment Variables
 
-### ASSET_PREFIX
+### ASSET\_PREFIX
 
 The current path prefix of the asset, which is a read-only environment variable.
 
-### NODE_ENV
+### NODE\_ENV
 
 The current execution environment and is a **read-only** environment variable whose have different values under different execution commands:
 
 - `production`: Default value when running `modern build` or `modern serve`.
 - `development`: Default value when running `modern dev`, also the default value in other cases.
 
-### MODERN_ENV
+### MODERN\_ENV
 
-Set the current execution environment manually. In addition to the values in the NODE_ENV, custom environment names are supported here, such as `staging`, `boe`, etc.
+Set the current execution environment manually. In addition to the values in the NODE\_ENV, custom environment names are supported here, such as `staging`, `boe`, etc.
 
 :::tip
-MODERN_ENV priority is higher than NODE_ENV.
+MODERN\_ENV priority is higher than NODE\_ENV.
 
 :::
 
-### MODERN_TARGET
+### MODERN\_TARGET
 
 When using `@modern-js/runtime`, Modern.js will automatically inject `MODERN_TARGET` to distinguish between SSR and CSR environments.
 
@@ -136,7 +132,7 @@ In custom HTML templates, you can also use such environment variables directly.
 
 ### Any Other Names
 
-If you need to use environment variables with any other names in your code, you can configure them in [`source.globalVars`](/configure/app/source/global-vars). For example:
+If you need to use environment variables with any other names in your code, you can configure them in [`source.globalVars`](/configure/app/source/global-vars.md). For example:
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -178,4 +174,4 @@ const foo = TWO;
 const foo = 1 + 1;
 ```
 
-In most cases, `source.globalVars` is already sufficient to replace variables. But the values passed in by `source.globalVars` will be serialized by JSON by default. So it cannot be replaced like `1 + 1` in the example above, at this time, we need to use [`source.define`](/configure/app/source/define).
+In most cases, `source.globalVars` is already sufficient to replace variables. But the values passed in by `source.globalVars` will be serialized by JSON by default. So it cannot be replaced like `1 + 1` in the example above, at this time, we need to use [`source.define`](/configure/app/source/define.md).