@modern-js/main-doc 0.0.0-next-1681271662872 → 0.0.0-next-1681289437610

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 CHANGED
@@ -1,19 +1,19 @@
1
1
  # @modern-js/main-doc
2
2
 
3
- ## 0.0.0-next-1681271662872
3
+ ## 0.0.0-next-1681289437610
4
4
 
5
5
  ### Patch Changes
6
6
 
7
- - e91ec97bd0: feat(app-tools): export mergeConfig function
7
+ - e91ec97bd: feat(app-tools): export mergeConfig function
8
8
 
9
9
  feat(app-tools): 导出 mergeConfig 函数
10
10
 
11
- - 42700c13bd: chore: improve ssr docs, add more use case for node/web code split
11
+ - 42700c13b: chore: improve ssr docs, add more use case for node/web code split
12
12
  chore: 优化 ssr 文档,为 node/web 代码分割添加更多使用场景
13
- - Updated dependencies [1feacdc7d6]
14
- - Updated dependencies [348306d413]
15
- - Updated dependencies [42700c13bd]
16
- - @modern-js/builder-doc@0.0.0-next-1681271662872
13
+ - Updated dependencies [1feacdc7d]
14
+ - Updated dependencies [348306d41]
15
+ - Updated dependencies [42700c13b]
16
+ - @modern-js/builder-doc@0.0.0-next-1681289437610
17
17
 
18
18
  ## 2.12.0
19
19
 
@@ -9,7 +9,27 @@ sidebar_position: 1
9
9
 
10
10
  Currently, Modern.js includes three solutions, each targeting at different development scenarios: web application development, npm package development, and document site development:
11
11
 
12
- ![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/Solutions-en-0945.png)
12
+ import { SolutionCards } from '@site/src/components/SolutionCards';
13
+
14
+ <SolutionCards
15
+ cards={[
16
+ {
17
+ title: 'Modern.js Framework',
18
+ description: 'For web application development',
19
+ link: 'http://modernjs.dev/en/',
20
+ },
21
+ {
22
+ title: 'Modern.js Module',
23
+ description: 'For npm package development',
24
+ link: 'http://modernjs.dev/module-tools/en/',
25
+ },
26
+ {
27
+ title: 'Modern.js Doc',
28
+ description: 'For document site development',
29
+ link: 'http://modernjs.dev/doc-tools/',
30
+ },
31
+ ]}
32
+ />
13
33
 
14
34
  As a part of the Modern.js engineering system, each of these solutions can be used separately and has its own independent documentation site. Developers can choose one or more solutions as needed.
15
35
 
@@ -9,7 +9,27 @@ sidebar_position: 1
9
9
 
10
10
  目前 Modern.js 包含三个解决方案,分别面向 Web 应用开发场景、npm 包开发场景和文档站开发场景:
11
11
 
12
- ![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/Solutions-1311.png)
12
+ import { SolutionCards } from '@site/src/components/SolutionCards';
13
+
14
+ <SolutionCards
15
+ cards={[
16
+ {
17
+ title: 'Modern.js Framework',
18
+ description: '基于 React 的渐进式 Web 开发框架',
19
+ link: 'http://modernjs.dev/',
20
+ },
21
+ {
22
+ title: 'Modern.js Module',
23
+ description: '易用、高性能的 npm 包开发方案',
24
+ link: 'http://modernjs.dev/module-tools/',
25
+ },
26
+ {
27
+ title: 'Modern.js Doc',
28
+ description: '基于 Rspack 的文档站解决方案',
29
+ link: 'http://modernjs.dev/doc-tools/zh/',
30
+ },
31
+ ]}
32
+ />
13
33
 
14
34
  作为 Modern.js 工程体系的一部分,以上每个解决方案都可以被单独使用,并且各自部署了独立的文档站点。开发者可以按需选择其中的一个或多个解决方案来使用。
15
35
 
package/package.json CHANGED
@@ -11,13 +11,13 @@
11
11
  "modern",
12
12
  "modern.js"
13
13
  ],
14
- "version": "0.0.0-next-1681271662872",
14
+ "version": "0.0.0-next-1681289437610",
15
15
  "publishConfig": {
16
16
  "registry": "https://registry.npmjs.org/",
17
17
  "access": "public"
18
18
  },
19
19
  "peerDependencies": {
20
- "@modern-js/builder-doc": "0.0.0-next-1681271662872"
20
+ "@modern-js/builder-doc": "0.0.0-next-1681289437610"
21
21
  },
22
22
  "devDependencies": {
23
23
  "classnames": "^2",
@@ -29,9 +29,9 @@
29
29
  "fs-extra": "^10",
30
30
  "@types/node": "^16",
31
31
  "@types/fs-extra": "^9",
32
- "@modern-js/builder-doc": "0.0.0-next-1681271662872",
33
- "@modern-js/doc-tools": "0.0.0-next-1681271662872",
34
- "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1681271662872"
32
+ "@modern-js/builder-doc": "0.0.0-next-1681289437610",
33
+ "@modern-js/doc-tools": "0.0.0-next-1681289437610",
34
+ "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1681289437610"
35
35
  },
36
36
  "scripts": {
37
37
  "dev": "modern dev",
@@ -0,0 +1,62 @@
1
+ .root {
2
+ display: flex;
3
+ flex-wrap: wrap;
4
+ justify-content: space-between;
5
+ margin: 1.5rem 0;
6
+ }
7
+
8
+ .card {
9
+ cursor: pointer;
10
+ border: 1px solid var(--modern-c-bg-soft);
11
+ background-color: var(--modern-c-bg-soft);
12
+ transition: color 0.5s, background-color 0.5s;
13
+ padding: 22px;
14
+ border-radius: 16px;
15
+ flex: 0 1 32%;
16
+ font-size: 14px;
17
+ font-weight: 500;
18
+ transition: border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
19
+
20
+ &1 {
21
+ background-color: #e9f5ff;
22
+
23
+ &:hover {
24
+ border-color: #66b9ff;
25
+ }
26
+ }
27
+
28
+ &2 {
29
+ background-color: #f3f4ff;
30
+
31
+ &:hover {
32
+ border-color: #6673ff;
33
+ }
34
+ }
35
+
36
+ &3 {
37
+ background-color: #e9ffed;
38
+
39
+ &:hover {
40
+ border-color: #52e06c;
41
+ }
42
+ }
43
+ }
44
+
45
+ .title {
46
+ font-size: 16px;
47
+ font-weight: 600;
48
+ line-height: 1.4;
49
+ letter-spacing: -0.02em;
50
+ margin: 0 0 0.75em !important;
51
+ color: #213547;
52
+ display: block;
53
+ }
54
+
55
+ .description {
56
+ font-size: 12px;
57
+ margin: 0 !important;
58
+ line-height: 1.7 !important;
59
+ color: rgba(60, 60, 60, 0.75);
60
+ font-weight: 400;
61
+ transition: color 0.5s;
62
+ }
@@ -0,0 +1,26 @@
1
+ import clsx from 'clsx';
2
+ import styles from './index.module.scss';
3
+
4
+ type Card = {
5
+ link: string;
6
+ title: string;
7
+ description: string;
8
+ };
9
+
10
+ export const SolutionCards = ({ cards }: { cards: Card[] }) => {
11
+ const classNames = [styles.card1, styles.card2, styles.card3];
12
+ const renderCards = () =>
13
+ cards.map((card, index) => (
14
+ <a
15
+ key={card.title}
16
+ href={card.link}
17
+ className={clsx([styles.card, classNames[index]])}
18
+ target="_blank"
19
+ >
20
+ <div className={styles.title}>{card.title}</div>
21
+ <div className={styles.description}>{card.description}</div>
22
+ </a>
23
+ ));
24
+
25
+ return <div className={styles.root}>{renderCards()}</div>;
26
+ };