@modern-js/main-doc 0.0.0-next-1681268805640 → 0.0.0-next-1681289011835
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,6 +1,6 @@
|
|
|
1
1
|
# @modern-js/main-doc
|
|
2
2
|
|
|
3
|
-
## 0.0.0-next-
|
|
3
|
+
## 0.0.0-next-1681289011835
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
- Updated dependencies [1feacdc7d]
|
|
14
14
|
- Updated dependencies [348306d41]
|
|
15
15
|
- Updated dependencies [42700c13b]
|
|
16
|
-
- @modern-js/builder-doc@0.0.0-next-
|
|
16
|
+
- @modern-js/builder-doc@0.0.0-next-1681289011835
|
|
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
|
-
|
|
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
|
-
|
|
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-
|
|
14
|
+
"version": "0.0.0-next-1681289011835",
|
|
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-
|
|
20
|
+
"@modern-js/builder-doc": "0.0.0-next-1681289011835"
|
|
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-
|
|
33
|
-
"@modern-js/doc-
|
|
34
|
-
"@modern-js/doc-
|
|
32
|
+
"@modern-js/builder-doc": "0.0.0-next-1681289011835",
|
|
33
|
+
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1681289011835",
|
|
34
|
+
"@modern-js/doc-tools": "0.0.0-next-1681289011835"
|
|
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
|
+
};
|