@modern-js/main-doc 2.12.0 → 2.13.0

package/docs/zh/guides/get-started/introduction.mdx

@@ -9,7 +9,27 @@ sidebar_position: 1
 
 目前 Modern.js 包含三个解决方案，分别面向 Web 应用开发场景、npm 包开发场景和文档站开发场景：
 
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/Solutions-1311.png)
+import { SolutionCards } from '@site/src/components/SolutionCards';
+
+<SolutionCards
+  cards={[
+    {
+      title: 'Modern.js Framework',
+      description: '基于 React 的渐进式 Web 开发框架',
+      link: 'http://modernjs.dev/',
+    },
+    {
+      title: 'Modern.js Module',
+      description: '易用、高性能的 npm 包开发方案',
+      link: 'http://modernjs.dev/module-tools/',
+    },
+    {
+      title: 'Modern.js Doc',
+      description: '基于 Rspack 的文档站解决方案',
+      link: 'http://modernjs.dev/doc-tools/zh/',
+    },
+  ]}
+/>
 
 作为 Modern.js 工程体系的一部分，以上每个解决方案都可以被单独使用，并且各自部署了独立的文档站点。开发者可以按需选择其中的一个或多个解决方案来使用。
 

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

@@ -44,7 +44,7 @@ import ReleaseNote from "@site-docs/components/release-note"
 
 对于使用 pnpm 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `pnpm install`：
 
-```json
+```json title="package.json"
 {
   "pnpm": {
     "overrides": {
@@ -58,7 +58,7 @@ import ReleaseNote from "@site-docs/components/release-note"
 
 对于使用 Yarn 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `yarn install`：
 
-```json
+```json title="package.json"
 {
   "resolutions": {
     "package-name": "^1.0.0"
@@ -70,7 +70,7 @@ import ReleaseNote from "@site-docs/components/release-note"
 
 对于使用 Npm 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `npm install`：
 
-```json
+```json title="package.json"
 {
   "overrides": {
     "package-name": "^1.0.0"

package/docs/zh/guides/topic-detail/changesets/release.mdx

@@ -91,7 +91,7 @@ pnpm run release
 执行该命令时，将会依次判断 Monorepo 中所有的 packages 的版本是否在 NPM 中存在，如果不存在将会执行 `publish` 命令发布。
 
 :::warning
-当 Monorepo 中包之间依赖关系使用 workspace 声明时，注意不要直接在 package 对应的子目录直接执行 `npm publish` 发布 package，使用 `relesae` 命令在发布时将会自动去除 workspace 声明，确保 NPM 包发布之后可用。
+当 Monorepo 中包之间依赖关系使用 workspace 声明时，注意不要直接在 package 对应的子目录直接执行 `npm publish` 发布 package，使用 `release` 命令在发布时将会自动去除 workspace 声明，确保 NPM 包发布之后可用。
 
 :::
 
@@ -133,7 +133,7 @@ pnpm run bump -- --ignore module-2 --ignore module-3
 
 ### release 命令参数
 
-- `--otp` 使用 `npm token` 执行 relesae 命令发布对应包
+- `--otp` 使用 `npm token` 执行 release 命令发布对应包
 
 ```bash
 pnpm run relese -- --otp <token>

package/package.json

@@ -11,13 +11,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.12.0",
+  "version": "2.13.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.12.0"
+    "@modern-js/builder-doc": "^2.13.0"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -29,9 +29,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "2.12.0",
-    "@modern-js/doc-tools": "2.12.0",
-    "@modern-js/doc-plugin-auto-sidebar": "2.12.0"
+    "@modern-js/builder-doc": "2.13.0",
+    "@modern-js/doc-tools": "2.13.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.13.0"
   },
   "scripts": {
     "dev": "modern dev",

package/src/components/SolutionCards/index.module.scss

@@ -0,0 +1,62 @@
+.root {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 1.5rem 0;
+}
+
+.card {
+  cursor: pointer;
+  border: 1px solid var(--modern-c-bg-soft);
+  background-color: var(--modern-c-bg-soft);
+  transition: color 0.5s, background-color 0.5s;
+  padding: 22px;
+  border-radius: 16px;
+  flex: 0 1 32%;
+  font-size: 14px;
+  font-weight: 500;
+  transition: border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+  &1 {
+    background-color: #e9f5ff;
+
+    &:hover {
+      border-color: #66b9ff;
+    }
+  }
+
+  &2 {
+    background-color: #f3f4ff;
+
+    &:hover {
+      border-color: #6673ff;
+    }
+  }
+
+  &3 {
+    background-color: #e9ffed;
+
+    &:hover {
+      border-color: #52e06c;
+    }
+  }
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: -0.02em;
+  margin: 0 0 0.75em !important;
+  color: #213547;
+  display: block;
+}
+
+.description {
+  font-size: 12px;
+  margin: 0 !important;
+  line-height: 1.7 !important;
+  color: rgba(60, 60, 60, 0.75);
+  font-weight: 400;
+  transition: color 0.5s;
+}

package/src/components/SolutionCards/index.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import styles from './index.module.scss';
+
+type Card = {
+  link: string;
+  title: string;
+  description: string;
+};
+
+export const SolutionCards = ({ cards }: { cards: Card[] }) => {
+  const classNames = [styles.card1, styles.card2, styles.card3];
+  const renderCards = () =>
+    cards.map((card, index) => (
+      <a
+        key={card.title}
+        href={card.link}
+        className={clsx([styles.card, classNames[index]])}
+        target="_blank"
+      >
+        <div className={styles.title}>{card.title}</div>
+        <div className={styles.description}>{card.description}</div>
+      </a>
+    ));
+
+  return <div className={styles.root}>{renderCards()}</div>;
+};