@modern-js/main-doc 2.32.1 → 2.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/docs/en/apis/app/runtime/app/define-config.mdx +2 -2
- package/docs/en/apis/app/runtime/model/auto-actions.mdx +2 -2
- package/docs/en/apis/app/runtime/model/model_.mdx +0 -1
- package/docs/en/apis/app/runtime/model/use-static-model.mdx +1 -1
- package/docs/en/community/contributing-guide.mdx +2 -3
- package/docs/en/configure/app/builder-plugins.mdx +1 -1
- package/docs/en/configure/app/source/enable-async-entry.mdx +3 -1
- package/docs/en/configure/app/tools/tailwindcss.mdx +43 -1
- package/docs/en/guides/advanced-features/bff/frameworks.mdx +2 -2
- package/docs/en/guides/advanced-features/bff/function.mdx +1 -1
- package/docs/en/guides/basic-features/css.mdx +28 -18
- package/docs/en/guides/basic-features/mock.mdx +1 -1
- package/docs/en/guides/concept/builder.mdx +2 -2
- package/docs/en/guides/get-started/glossary.mdx +13 -1
- package/docs/en/guides/get-started/introduction.mdx +10 -6
- package/docs/en/guides/topic-detail/framework-plugin/hook.mdx +2 -2
- package/docs/en/guides/topic-detail/generator/create/use.mdx +1 -1
- package/docs/en/guides/topic-detail/generator/plugin/category.md +1 -1
- package/docs/en/guides/topic-detail/generator/plugin/context.md +1 -1
- package/docs/en/guides/topic-detail/micro-frontend/c01-introduction.mdx +2 -5
- package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx +2 -2
- package/docs/en/guides/topic-detail/model/auto-actions.mdx +1 -1
- package/docs/en/guides/topic-detail/model/performance.mdx +2 -1
- package/docs/en/guides/topic-detail/model/typescript-best-practice.mdx +1 -1
- package/docs/en/guides/topic-detail/model/use-model.mdx +1 -1
- package/docs/en/tutorials/first-app/c05-loader.mdx +0 -2
- package/docs/zh/community/blog/v2-release-note.mdx +7 -8
- package/docs/zh/community/contributing-guide.mdx +2 -3
- package/docs/zh/configure/app/builder-plugins.mdx +1 -1
- package/docs/zh/configure/app/source/enable-async-entry.mdx +4 -2
- package/docs/zh/configure/app/tools/tailwindcss.mdx +42 -2
- package/docs/zh/guides/basic-features/css.mdx +27 -18
- package/docs/zh/guides/concept/builder.mdx +3 -3
- package/docs/zh/guides/get-started/glossary.mdx +13 -1
- package/docs/zh/guides/get-started/introduction.mdx +11 -7
- package/docs/zh/guides/topic-detail/generator/create/use.mdx +1 -1
- package/docs/zh/guides/topic-detail/micro-frontend/c01-introduction.mdx +3 -6
- package/docs/zh/tutorials/first-app/c06-model.mdx +1 -4
- package/package.json +9 -8
- package/{modern.config.ts → rspress.config.ts} +78 -76
- package/src/components/ContentCard/index.tsx +2 -3
- package/src/components/ListCard/index.tsx +1 -1
- package/src/components/RandomMemberList/index.tsx +1 -1
- package/src/components/ShowcaseList/index.module.scss +5 -5
- package/src/components/SolutionCards/index.module.scss +2 -2
- package/src/i18n/enUS.ts +2 -2
- package/src/i18n/index.ts +1 -1
- package/src/i18n/zhCN.ts +2 -2
- package/src/index.ts +3 -2
- package/src/pages/index.module.scss +1 -1
- package/src/pages/index.tsx +7 -6
- package/docs/en/configure/app/source/design-system.mdx +0 -1175
- package/docs/zh/configure/app/source/design-system.mdx +0 -1174
@@ -103,37 +103,46 @@ const App = () => (
|
|
103
103
|
|
104
104
|
:::
|
105
105
|
|
106
|
-
### Tailwind CSS
|
107
|
-
|
108
|
-
Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件,用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
|
106
|
+
### 配置 Tailwind CSS
|
109
107
|
|
110
|
-
|
108
|
+
在 Modern.js 中,你有两种方式来配置 Tailwind CSS:
|
111
109
|
|
112
|
-
1.
|
113
|
-
2. 在项目的根目录创建 `tailwind.config.ts` 文件,并写入你需要的 Tailwind CSS 配置。
|
110
|
+
1. 使用 `tailwind.config.{ts,js}` 文件,该用法与 Tailwind CSS 的官方用法一致,请参考 ["Tailwind CSS - Configuration"](https://tailwindcss.com/docs/configuration) 来了解更多用法。
|
114
111
|
|
115
112
|
```ts title="tailwind.config.ts"
|
113
|
+
import type { Config } from 'tailwindcss';
|
114
|
+
|
116
115
|
export default {
|
117
|
-
content: [
|
118
|
-
|
119
|
-
'./config/html/**/*.{html,ejs,hbs}',
|
120
|
-
'./storybook/**/*',
|
121
|
-
],
|
122
|
-
};
|
116
|
+
content: ['./src/**/*.{js,jsx,ts,tsx}'],
|
117
|
+
} as Config;
|
123
118
|
```
|
124
119
|
|
125
|
-
|
120
|
+
:::tip
|
121
|
+
请升级 Modern.js 到 >= MAJOR_VERSION.33.0 版本,以支持自动读取 `tailwind.config.{ts,js}` 文件。
|
122
|
+
:::
|
126
123
|
|
127
|
-
|
128
|
-
import tailwindConfig from './tailwind.config';
|
124
|
+
2. 使用 [tools.tailwindcss](/configure/app/tools/tailwindcss.html) 配置项,这是旧版本的用法,我们更推荐使用 `tailwind.config.{ts,js}` 文件进行配置。
|
129
125
|
|
130
|
-
|
126
|
+
```ts title="modern.config.ts"
|
127
|
+
export default {
|
131
128
|
tools: {
|
132
|
-
tailwindcss:
|
129
|
+
tailwindcss: {
|
130
|
+
content: ['./src/**/*.{js,jsx,ts,tsx}'],
|
131
|
+
},
|
133
132
|
},
|
134
|
-
}
|
133
|
+
};
|
135
134
|
```
|
136
135
|
|
136
|
+
如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项,那么 `tools.tailwindcss` 定义的配置会优先生效,并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
|
137
|
+
|
138
|
+
### Tailwind CSS 自动补全
|
139
|
+
|
140
|
+
Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件,用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
|
141
|
+
|
142
|
+
你可以参考以下步骤来启动自动补全功能:
|
143
|
+
|
144
|
+
1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
|
145
|
+
2. 如果项目的根目录没有 `tailwind.config.{ts,js}` 文件,那么你需要创建该文件,并写入当前项目的 Tailwind CSS 配置,否则 IDE 插件将无法正确生效。
|
137
146
|
|
138
147
|
### Tailwind CSS 版本
|
139
148
|
|
@@ -2,18 +2,18 @@
|
|
2
2
|
sidebar_position: 2
|
3
3
|
---
|
4
4
|
|
5
|
-
#
|
5
|
+
# 构建工具
|
6
6
|
|
7
7
|
**Modern.js 的构建能力由 [Modern.js Builder](https://modernjs.dev/builder) 提供。**
|
8
8
|
|
9
|
-
Modern.js Builder 是 Modern.js
|
9
|
+
Modern.js Builder 是 Modern.js 体系的核心组件之一,它是一个基于 Rspack 的 Web 构建工具,可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 Rspack 等多种打包工具,默认情况下使用最成熟的 webpack 进行打包。
|
10
10
|
|
11
11
|
## 构建架构
|
12
12
|
|
13
13
|
从构建的角度看,Modern.js 分为三层架构,从上到下依次是:
|
14
14
|
|
15
15
|
- 上层研发框架:Modern.js。
|
16
|
-
-
|
16
|
+
- 通用构建工具:Modern.js Builder。
|
17
17
|
- 底层打包工具:webpack 和 Rspack。
|
18
18
|
|
19
19
|
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-0824.png" style={{ width: '100%', maxWidth: '540px' }} />
|
@@ -30,10 +30,22 @@ CSR 是 "Client-Side Rendering"(客户端渲染)的缩写。它表示页面
|
|
30
30
|
|
31
31
|
## Garfish
|
32
32
|
|
33
|
-
[Garfish](https://
|
33
|
+
[Garfish](https://garfishjs.org/) 是一套微前端解决方案,主要用于解决 web 应用的跨团队协作、技术体系多样化等问题。
|
34
34
|
|
35
35
|
它从架构层面出发,将多个独立交付的前端应用组成整体,这些前端应用能够独立开发、独立测试、独立部署,但是在用户视角仍然是内聚的单个产品。
|
36
36
|
|
37
|
+
## Micro-frontend
|
38
|
+
|
39
|
+
import MicroFrontend from '@modern-js/builder-doc/docs/zh/shared/micro-frontend.md';
|
40
|
+
|
41
|
+
<MicroFrontend />
|
42
|
+
|
43
|
+
## Module Federation
|
44
|
+
|
45
|
+
import ModuleFederation from '@modern-js/builder-doc/docs/zh/shared/module-federation.md';
|
46
|
+
|
47
|
+
<ModuleFederation />
|
48
|
+
|
37
49
|
## Rspack
|
38
50
|
|
39
51
|
import Rspack from '@modern-js/builder-doc/docs/zh/shared/rspack.md';
|
@@ -7,7 +7,7 @@ sidebar_position: 1
|
|
7
7
|
|
8
8
|
**Modern.js 是字节跳动 Web 工程体系的开源版本**,它提供多个解决方案,来帮助开发者解决不同研发场景下的问题。
|
9
9
|
|
10
|
-
目前 Modern.js 包含三个解决方案,分别面向 Web 应用开发场景、npm
|
10
|
+
目前 Modern.js 包含三个解决方案,分别面向 Web 应用开发场景、npm 包开发场景和 Web 应用构建场景:
|
11
11
|
|
12
12
|
import { SolutionCards } from '@site/src/components/SolutionCards';
|
13
13
|
|
@@ -24,9 +24,9 @@ import { SolutionCards } from '@site/src/components/SolutionCards';
|
|
24
24
|
link: 'http://modernjs.dev/module-tools/',
|
25
25
|
},
|
26
26
|
{
|
27
|
-
title: 'Modern.js
|
28
|
-
description: '基于 Rspack
|
29
|
-
link: 'http://modernjs.dev/
|
27
|
+
title: 'Modern.js Builder',
|
28
|
+
description: '基于 Rspack 的 Web 构建工具',
|
29
|
+
link: 'http://modernjs.dev/builder/',
|
30
30
|
},
|
31
31
|
]}
|
32
32
|
/>
|
@@ -37,14 +37,18 @@ import { SolutionCards } from '@site/src/components/SolutionCards';
|
|
37
37
|
|
38
38
|
**当前文档站对应的是 Modern.js 框架**,适用于开发 Web 应用。
|
39
39
|
|
40
|
-
- 如果你需要开发一个 npm
|
41
|
-
-
|
42
|
-
- 如果你需要基于 Modern.js 的构建引擎来实现一个 Web 开发框架,请移步至 [Modern.js Builder](https://modernjs.dev/builder) 文档。
|
40
|
+
- 如果你需要开发一个 npm 包,请移步 [Modern.js Module](https://modernjs.dev/module-tools) 文档。
|
41
|
+
- 如果你需要基于 Modern.js 的构建工具来实现一个 Web 开发框架,请移步 [Modern.js Builder](https://modernjs.dev/builder) 文档。
|
43
42
|
|
44
43
|
:::tip
|
45
44
|
由于 Modern.js 框架的使用最为广泛,在本文档站中,我们会省略「框架」,直接称其为 Modern.js。
|
46
45
|
:::
|
47
46
|
|
47
|
+
Modern.js 也可以与以下解决方案结合使用:
|
48
|
+
|
49
|
+
- 如果你需要开发一个文档站点,推荐使用 [Rspress](https://rspress.dev/) 文档。
|
50
|
+
- 如果你需要引入微前端架构,推荐使用 [Garfish](https://garfishjs.org/)。
|
51
|
+
|
48
52
|
## Modern.js 框架
|
49
53
|
|
50
54
|
**Modern.js 框架是一个基于 React 的渐进式 Web 开发框架**。在字节跳动内部,我们将 Modern.js 封装为上层框架,并支撑了数千个 Web 应用的研发。
|
@@ -4,7 +4,7 @@ sidebar_position: 1
|
|
4
4
|
|
5
5
|
# 使用
|
6
6
|
|
7
|
-
Modern.js 提供了 `@modern-js/create` 工具用于创建 Modern.js 提供的工程方案项目,例如 [Web 应用](https://modernjs.dev/)、[Npm 模块](https://modernjs.dev/module-tools)、[
|
7
|
+
Modern.js 提供了 `@modern-js/create` 工具用于创建 Modern.js 提供的工程方案项目,例如 [Web 应用](https://modernjs.dev/)、[Npm 模块](https://modernjs.dev/module-tools)、[Monorepo](/guides/topic-detail/monorepo/intro.html) 等。
|
8
8
|
|
9
9
|
下面将介绍 `@modern-js/create` 的使用姿势。
|
10
10
|
|
@@ -1,15 +1,12 @@
|
|
1
1
|
---
|
2
2
|
sidebar_position: 1
|
3
|
-
title: 微前端介绍
|
4
3
|
---
|
5
|
-
# 微前端介绍
|
6
4
|
|
7
|
-
|
5
|
+
# 微前端介绍
|
8
6
|
|
9
|
-
|
7
|
+
import MicroFrontend from '@modern-js/builder-doc/docs/zh/shared/micro-frontend.md';
|
10
8
|
|
11
|
-
|
12
|
-
- 跨团队或跨部门协作开发项目导致效率低下的问题。
|
9
|
+
<MicroFrontend />
|
13
10
|
|
14
11
|
## 微前端关键词
|
15
12
|
|
package/package.json
CHANGED
@@ -15,14 +15,14 @@
|
|
15
15
|
"modern",
|
16
16
|
"modern.js"
|
17
17
|
],
|
18
|
-
"version": "2.
|
18
|
+
"version": "2.33.0",
|
19
19
|
"publishConfig": {
|
20
20
|
"registry": "https://registry.npmjs.org/",
|
21
21
|
"access": "public",
|
22
22
|
"provenance": true
|
23
23
|
},
|
24
24
|
"peerDependencies": {
|
25
|
-
"@modern-js/builder-doc": "^2.
|
25
|
+
"@modern-js/builder-doc": "^2.33.0"
|
26
26
|
},
|
27
27
|
"devDependencies": {
|
28
28
|
"classnames": "^2",
|
@@ -32,16 +32,17 @@
|
|
32
32
|
"ts-node": "^10.9.1",
|
33
33
|
"typescript": "^5",
|
34
34
|
"fs-extra": "^10",
|
35
|
+
"rspress": "0.0.6",
|
36
|
+
"@rspress/shared": "0.0.6",
|
35
37
|
"@types/node": "^16",
|
36
38
|
"@types/fs-extra": "^9",
|
37
|
-
"@modern-js/
|
38
|
-
"@modern-js/doc
|
39
|
-
"@modern-js/doc-plugin-auto-sidebar": "2.32.1"
|
39
|
+
"@modern-js/doc-plugin-auto-sidebar": "2.33.0",
|
40
|
+
"@modern-js/builder-doc": "2.33.0"
|
40
41
|
},
|
41
42
|
"scripts": {
|
42
|
-
"dev": "
|
43
|
+
"dev": "rspress dev",
|
43
44
|
"build": "npx ts-node ./scripts/sync.ts",
|
44
|
-
"build:doc": "
|
45
|
-
"preview": "
|
45
|
+
"build:doc": "rspress build",
|
46
|
+
"preview": "rspress preview"
|
46
47
|
}
|
47
48
|
}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import path from 'path';
|
2
|
-
import {
|
2
|
+
import { defineConfig } from 'rspress/config';
|
3
|
+
import { NavItem } from '@rspress/shared';
|
3
4
|
import { pluginAutoSidebar } from '@modern-js/doc-plugin-auto-sidebar';
|
4
5
|
|
5
6
|
const rootCategories = [
|
@@ -52,10 +53,6 @@ const getNavbar = (lang: string): NavItem[] => {
|
|
52
53
|
text: 'Modern.js Module',
|
53
54
|
link: 'https://modernjs.dev/module-tools/en/',
|
54
55
|
},
|
55
|
-
{
|
56
|
-
text: 'Modern.js Doc',
|
57
|
-
link: 'https://modernjs.dev/doc-tools/',
|
58
|
-
},
|
59
56
|
{
|
60
57
|
text: 'Modern.js Builder',
|
61
58
|
link: 'https://modernjs.dev/builder/en/',
|
@@ -70,25 +67,24 @@ const getNavbar = (lang: string): NavItem[] => {
|
|
70
67
|
};
|
71
68
|
|
72
69
|
export default defineConfig({
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
`
|
70
|
+
root: docPath,
|
71
|
+
base: '/',
|
72
|
+
logo: 'https://lf-cdn-tos.bytescm.com/obj/static/webinfra/modern-js-website/assets/images/images/modernjs-logo.svg',
|
73
|
+
icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico',
|
74
|
+
lang: 'zh',
|
75
|
+
themeDir: path.join(__dirname, 'src'),
|
76
|
+
markdown: {
|
77
|
+
checkDeadLinks: true,
|
78
|
+
experimentalMdxRs: true,
|
79
|
+
},
|
80
|
+
head: [
|
81
|
+
`
|
86
82
|
<script>
|
87
83
|
;(function (w, d, u, b, n, pc, ga, ae, po, s, p, e, t, pp) {pc = 'precollect';ga = 'getAttribute';ae = 'addEventListener';po = 'PerformanceObserver';s = function (m) {p = [].slice.call(arguments);p.push(Date.now(), location.href);(m == pc ? s.p.a : s.q).push(p)};s.q = [];s.p = { a: [] };w[n] = s;e = document.createElement('script');e.src = u + '?bid=' + b + '&globalName=' + n;e.crossorigin = u.indexOf('sdk-web') > 0 ? 'anonymous' : 'use-credentials';d.getElementsByTagName('head')[0].appendChild(e);if (ae in w) {s.pcErr = function (e) {e = e || w.event;t = e.target || e.srcElement;if (t instanceof Element || t instanceof HTMLElement) {if (t[ga]('integrity')) {w[n](pc, 'sri', t[ga]('href') || t[ga]('src'))} else {w[n](pc, 'st', { tagName: t.tagName, url: t[ga]('href') || t[ga]('src') })}} else {w[n](pc, 'err', e.error)}};s.pcRej = function (e) {e = e || w.event;w[n](pc, 'err', e.reason || (e.detail && e.detail.reason))};w[ae]('error', s.pcErr, true);w[ae]('unhandledrejection', s.pcRej, true);};if('PerformanceLongTaskTiming' in w) {pp = s.pp = { entries: [] };pp.observer = new PerformanceObserver(function (l) {pp.entries = pp.entries.concat(l.getEntries)});pp.observer.observe({ entryTypes: ['longtask', 'largest-contentful-paint','layout-shift'] })}})(window,document,'https://lf3-short.bytegoofy.com/slardar/fe/sdk-web/browser.cn.js','modernjs_dev','Slardar');
|
88
84
|
|
89
85
|
</script>
|
90
86
|
`,
|
91
|
-
|
87
|
+
`
|
92
88
|
<script>
|
93
89
|
window.Slardar('init', {
|
94
90
|
bid: 'modernjs_dev'
|
@@ -96,68 +92,74 @@ export default defineConfig({
|
|
96
92
|
window.Slardar('start')
|
97
93
|
</script>
|
98
94
|
`,
|
95
|
+
],
|
96
|
+
themeConfig: {
|
97
|
+
locales: [
|
98
|
+
{
|
99
|
+
lang: 'zh',
|
100
|
+
title: 'Modern.js',
|
101
|
+
description:
|
102
|
+
'A Progressive React Framework for modern web development.',
|
103
|
+
nav: getNavbar('zh'),
|
104
|
+
label: '简体中文',
|
105
|
+
},
|
106
|
+
{
|
107
|
+
lang: 'en',
|
108
|
+
title: 'Modern.js',
|
109
|
+
description:
|
110
|
+
'A Progressive React Framework for modern web development.',
|
111
|
+
nav: getNavbar('en'),
|
112
|
+
label: 'English',
|
113
|
+
},
|
99
114
|
],
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
{
|
111
|
-
lang: 'en',
|
112
|
-
title: 'Modern.js',
|
113
|
-
description:
|
114
|
-
'A Progressive React Framework for modern web development.',
|
115
|
-
nav: getNavbar('en'),
|
116
|
-
label: 'English',
|
117
|
-
},
|
118
|
-
],
|
119
|
-
editLink: {
|
120
|
-
docRepoBaseUrl:
|
121
|
-
'https://github.com/web-infra-dev/modern.js/tree/main/packages/document/main-doc/docs',
|
122
|
-
text: 'Edit this page on GitHub',
|
115
|
+
editLink: {
|
116
|
+
docRepoBaseUrl:
|
117
|
+
'https://github.com/web-infra-dev/modern.js/tree/main/packages/document/main-doc/docs',
|
118
|
+
text: 'Edit this page on GitHub',
|
119
|
+
},
|
120
|
+
socialLinks: [
|
121
|
+
{
|
122
|
+
icon: 'github',
|
123
|
+
mode: 'link',
|
124
|
+
content: 'https://github.com/web-infra-dev/modern.js',
|
123
125
|
},
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
126
|
+
],
|
127
|
+
},
|
128
|
+
route: {
|
129
|
+
// exclude document fragments from routes
|
130
|
+
exclude: ['scripts/**', '**/zh/components/**', '**/en/components/**'],
|
131
|
+
},
|
132
|
+
replaceRules: [
|
133
|
+
{
|
134
|
+
// The major version is different inside the ByteDance,
|
135
|
+
// so we use a flag to define it.
|
136
|
+
search: /MAJOR_VERSION/g,
|
137
|
+
replace: '2',
|
131
138
|
},
|
132
|
-
|
133
|
-
|
134
|
-
|
139
|
+
],
|
140
|
+
builderConfig: {
|
141
|
+
output: {
|
142
|
+
disableTsChecker: true,
|
143
|
+
svgDefaultExport: 'component',
|
144
|
+
dataUriLimit: 0,
|
135
145
|
},
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
},
|
145
|
-
source: {
|
146
|
-
alias: {
|
147
|
-
'@site-docs': path.join(__dirname, './docs/zh'),
|
148
|
-
'@site-docs-en': path.join(__dirname, './docs/en'),
|
149
|
-
'@site': require('path').resolve(__dirname),
|
150
|
-
},
|
146
|
+
dev: {
|
147
|
+
startUrl: false,
|
148
|
+
},
|
149
|
+
source: {
|
150
|
+
alias: {
|
151
|
+
'@site-docs': path.join(__dirname, './docs/zh'),
|
152
|
+
'@site-docs-en': path.join(__dirname, './docs/en'),
|
153
|
+
'@site': require('path').resolve(__dirname),
|
151
154
|
},
|
152
155
|
},
|
153
|
-
plugins: [
|
154
|
-
pluginAutoSidebar({
|
155
|
-
root: docPath,
|
156
|
-
categories: ['zh', 'en'].flatMap(lang =>
|
157
|
-
rootCategories.map(category => `${lang}/${category}`),
|
158
|
-
),
|
159
|
-
}),
|
160
|
-
],
|
161
156
|
},
|
162
|
-
plugins: [
|
157
|
+
plugins: [
|
158
|
+
pluginAutoSidebar({
|
159
|
+
root: docPath,
|
160
|
+
categories: ['zh', 'en'].flatMap(lang =>
|
161
|
+
rootCategories.map(category => `${lang}/${category}`),
|
162
|
+
),
|
163
|
+
}),
|
164
|
+
],
|
163
165
|
});
|
@@ -1,12 +1,11 @@
|
|
1
|
-
import React
|
1
|
+
import React from 'react';
|
2
2
|
import cl from 'classnames';
|
3
|
-
import { withBase } from '
|
3
|
+
import { withBase } from 'rspress/runtime';
|
4
4
|
import styles from './index.module.scss';
|
5
5
|
|
6
6
|
export interface ContentCardProps {
|
7
7
|
title: string;
|
8
8
|
desc?: string;
|
9
|
-
img?: string | ComponentType<SVGProps<SVGSVGElement>>;
|
10
9
|
href: string;
|
11
10
|
}
|
12
11
|
|
@@ -18,10 +18,10 @@
|
|
18
18
|
border-radius: 20px;
|
19
19
|
overflow: hidden;
|
20
20
|
transition: 0.15s ease-in;
|
21
|
-
border: 1px solid var(--
|
21
|
+
border: 1px solid var(--rp-c-divider-light);
|
22
22
|
|
23
23
|
&:hover {
|
24
|
-
border-color: var(--
|
24
|
+
border-color: var(--rp-c-brand);
|
25
25
|
}
|
26
26
|
}
|
27
27
|
|
@@ -33,7 +33,7 @@
|
|
33
33
|
cursor: pointer;
|
34
34
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
35
35
|
pointer-events: none;
|
36
|
-
background-color: var(--
|
36
|
+
background-color: var(--rp-c-bg-soft);
|
37
37
|
}
|
38
38
|
|
39
39
|
.bottom {
|
@@ -46,7 +46,7 @@
|
|
46
46
|
font-weight: 600;
|
47
47
|
font-size: 17px;
|
48
48
|
line-height: 28px;
|
49
|
-
color: var(--
|
49
|
+
color: var(--rp-c-text-1);
|
50
50
|
}
|
51
51
|
|
52
52
|
.type {
|
@@ -76,5 +76,5 @@
|
|
76
76
|
.domain {
|
77
77
|
font-size: 13px;
|
78
78
|
line-height: 24px;
|
79
|
-
color: var(--
|
79
|
+
color: var(--rp-c-text-2);
|
80
80
|
}
|
@@ -7,8 +7,8 @@
|
|
7
7
|
|
8
8
|
.card {
|
9
9
|
cursor: pointer;
|
10
|
-
border: 1px solid var(--
|
11
|
-
background-color: var(--
|
10
|
+
border: 1px solid var(--rp-c-bg-soft);
|
11
|
+
background-color: var(--rp-c-bg-soft);
|
12
12
|
transition: color 0.5s, background-color 0.5s;
|
13
13
|
padding: 22px;
|
14
14
|
border-radius: 16px;
|
package/src/i18n/enUS.ts
CHANGED
@@ -27,8 +27,8 @@ export const EN_US = {
|
|
27
27
|
solutions: 'Solutions',
|
28
28
|
solutionsDesc1: 'A progressive React framework for web development.',
|
29
29
|
solutionsDesc2: 'A powerful solution for npm package development.',
|
30
|
-
solutionsDesc3: '
|
31
|
-
solutionsDesc4: 'A
|
30
|
+
solutionsDesc3: 'An Rspack-based build tool for web development.',
|
31
|
+
solutionsDesc4: 'A fast Rspack-based static site generator',
|
32
32
|
|
33
33
|
// Footer
|
34
34
|
guide: 'Guide',
|
package/src/i18n/index.ts
CHANGED
package/src/i18n/zhCN.ts
CHANGED
@@ -27,8 +27,8 @@ export const ZH_CN: Record<keyof typeof EN_US, string> = {
|
|
27
27
|
solutions: '解决方案',
|
28
28
|
solutionsDesc1: '基于 React 的渐进式 Web 开发框架。',
|
29
29
|
solutionsDesc2: '简单、高性能的 npm 包开发方案。',
|
30
|
-
solutionsDesc3: '基于 Rspack
|
31
|
-
solutionsDesc4: '
|
30
|
+
solutionsDesc3: '基于 Rspack 的 Web 构建工具。',
|
31
|
+
solutionsDesc4: '基于 Rspack 的静态站点生成器。',
|
32
32
|
|
33
33
|
// Footer
|
34
34
|
guide: '指南',
|
package/src/index.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import Theme from '
|
1
|
+
import Theme from 'rspress/theme';
|
2
2
|
import HomeLayout from './pages';
|
3
3
|
|
4
4
|
export default {
|
@@ -6,4 +6,5 @@ export default {
|
|
6
6
|
HomeLayout,
|
7
7
|
};
|
8
8
|
|
9
|
-
|
9
|
+
// eslint-disable-next-line import/export
|
10
|
+
export * from 'rspress/theme';
|
package/src/pages/index.tsx
CHANGED
@@ -1,5 +1,6 @@
|
|
1
|
+
/* eslint-disable react/no-unescaped-entities */
|
1
2
|
import clsx from 'clsx';
|
2
|
-
import { useLang, Helmet, useLocation } from '
|
3
|
+
import { useLang, Helmet, useLocation } from 'rspress/runtime';
|
3
4
|
import { useEffect } from 'react';
|
4
5
|
import ContentCard from '../components/ContentCard';
|
5
6
|
import SecondaryTitle from '../components/SecondaryTitle';
|
@@ -99,13 +100,13 @@ export default function Home() {
|
|
99
100
|
desc: t('solutionsDesc2'),
|
100
101
|
},
|
101
102
|
{
|
102
|
-
title: 'Modern.js
|
103
|
-
href: `https://modernjs.dev/
|
103
|
+
title: 'Modern.js Builder',
|
104
|
+
href: `https://modernjs.dev/builder${lang === 'en' ? '/en' : ''}`,
|
104
105
|
desc: t('solutionsDesc3'),
|
105
106
|
},
|
106
107
|
{
|
107
|
-
title: '
|
108
|
-
href: `https://
|
108
|
+
title: 'Rspress',
|
109
|
+
href: `https://rspress.dev${lang === 'en' ? '' : '/zh'}`,
|
109
110
|
desc: t('solutionsDesc4'),
|
110
111
|
},
|
111
112
|
];
|
@@ -116,7 +117,7 @@ export default function Home() {
|
|
116
117
|
<html className="dark"></html>
|
117
118
|
<script>window.MODERN_THEME = 'dark';</script>
|
118
119
|
<style type="text/css">{`
|
119
|
-
.
|
120
|
+
.rspress-doc-appearance {
|
120
121
|
display: none!important;
|
121
122
|
}
|
122
123
|
`}</style>
|