site: site optimization (#43007)

* site: site optimization * Update practical-projects.zh-CN.md
1 year ago · 4a6c09ca2a
8 changed files with 103 additions and 99 deletions
--- a/.dumi/theme/builtins/InstallDependencies/index.tsx
+++ b/.dumi/theme/builtins/InstallDependencies/index.tsx
@ -22,30 +22,30 @@ const InstallDependencies: React.FC<InstallProps> = (props) => {
          key: 'npm',
          children: <SourceCode lang="bash">{npm}</SourceCode>,
          label: (
-            <div className="snippet-label">
+            <span className="snippet-label">
              <NpmLogo />
-              <span>npm</span>
-            </div>
+              npm
+            </span>
          ),
        },
        {
          key: 'yarn',
          children: <SourceCode lang="bash">{yarn}</SourceCode>,
          label: (
-            <div className="snippet-label">
+            <span className="snippet-label">
              <YarnLogo />
-              <span>yarn</span>
-            </div>
+              yarn
+            </span>
          ),
        },
        {
          key: 'pnpm',
          children: <SourceCode lang="bash">{pnpm}</SourceCode>,
          label: (
-            <div className="snippet-label">
+            <span className="snippet-label">
              <PnpmLogo />
-              <span>pnpm</span>
-            </div>
+              pnpm
+            </span>
          ),
        },
      ]}
--- a/.dumi/theme/builtins/InstallDependencies/npm.tsx
+++ b/.dumi/theme/builtins/InstallDependencies/npm.tsx
@ -1,17 +1,27 @@
 import React from 'react';

-const NpmIcon: React.FC = () => (
-  <svg
-    fill="#E53E3E"
-    focusable="false"
-    height="1em"
-    stroke="#E53E3E"
-    strokeWidth="0"
-    viewBox="0 0 16 16"
-    width="1em"
-  >
-    <path d="M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" />
-  </svg>
-);
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const NpmIcon: React.FC<IconProps> = (props) => {
+  const { className, style } = props;
+  return (
+    <svg
+      className={className}
+      style={style}
+      fill="#E53E3E"
+      focusable="false"
+      height="1em"
+      stroke="#E53E3E"
+      strokeWidth="0"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path d="M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" />
+    </svg>
+  );
+};

 export default NpmIcon;
--- a/.dumi/theme/builtins/InstallDependencies/pnpm.tsx
+++ b/.dumi/theme/builtins/InstallDependencies/pnpm.tsx
@ -1,19 +1,29 @@
 import React from 'react';

-const PnpmIcon: React.FC = () => (
-  <svg
-    aria-hidden="true"
-    fill="#F69220"
-    focusable="false"
-    height="1em"
-    role="img"
-    stroke="#F69220"
-    strokeWidth="0"
-    viewBox="0 0 24 24"
-    width="1em"
-  >
-    <path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" />
-  </svg>
-);
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const PnpmIcon: React.FC<IconProps> = (props) => {
+  const { className, style } = props;
+  return (
+    <svg
+      className={className}
+      style={style}
+      aria-hidden="true"
+      fill="#F69220"
+      focusable="false"
+      height="1em"
+      role="img"
+      stroke="#F69220"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" />
+    </svg>
+  );
+};

 export default PnpmIcon;
--- a/.dumi/theme/builtins/InstallDependencies/yarn.tsx
+++ b/.dumi/theme/builtins/InstallDependencies/yarn.tsx
@ -1,18 +1,28 @@
 import React from 'react';

-const YarnIcon: React.FC = () => (
-  <svg
-    aria-hidden="true"
-    fill="#2C8EBB"
-    focusable="false"
-    height="1em"
-    stroke="#2C8EBB"
-    strokeWidth="0"
-    viewBox="0 0 496 512"
-    width="1em"
-  >
-    <path d="M393.9 345.2c-39 9.3-48.4 32.1-104 47.4 0 0-2.7 4-10.4 5.8-13.4 3.3-63.9 6-68.5 6.1-12.4.1-19.9-3.2-22-8.2-6.4-15.3 9.2-22 9.2-22-8.1-5-9-9.9-9.8-8.1-2.4 5.8-3.6 20.1-10.1 26.5-8.8 8.9-25.5 5.9-35.3.8-10.8-5.7.8-19.2.8-19.2s-5.8 3.4-10.5-3.6c-6-9.3-17.1-37.3 11.5-62-1.3-10.1-4.6-53.7 40.6-85.6 0 0-20.6-22.8-12.9-43.3 5-13.4 7-13.3 8.6-13.9 5.7-2.2 11.3-4.6 15.4-9.1 20.6-22.2 46.8-18 46.8-18s12.4-37.8 23.9-30.4c3.5 2.3 16.3 30.6 16.3 30.6s13.6-7.9 15.1-5c8.2 16 9.2 46.5 5.6 65.1-6.1 30.6-21.4 47.1-27.6 57.5-1.4 2.4 16.5 10 27.8 41.3 10.4 28.6 1.1 52.7 2.8 55.3.8 1.4 13.7.8 36.4-13.2 12.8-7.9 28.1-16.9 45.4-17 16.7-.5 17.6 19.2 4.9 22.2zM496 256c0 136.9-111.1 248-248 248S0 392.9 0 256 111.1 8 248 8s248 111.1 248 248zm-79.3 75.2c-1.7-13.6-13.2-23-28-22.8-22 .3-40.5 11.7-52.8 19.2-4.8 3-8.9 5.2-12.4 6.8 3.1-44.5-22.5-73.1-28.7-79.4 7.8-11.3 18.4-27.8 23.4-53.2 4.3-21.7 3-55.5-6.9-74.5-1.6-3.1-7.4-11.2-21-7.4-9.7-20-13-22.1-15.6-23.8-1.1-.7-23.6-16.4-41.4 28-12.2.9-31.3 5.3-47.5 22.8-2 2.2-5.9 3.8-10.1 5.4h.1c-8.4 3-12.3 9.9-16.9 22.3-6.5 17.4.2 34.6 6.8 45.7-17.8 15.9-37 39.8-35.7 82.5-34 36-11.8 73-5.6 79.6-1.6 11.1 3.7 19.4 12 23.8 12.6 6.7 30.3 9.6 43.9 2.8 4.9 5.2 13.8 10.1 30 10.1 6.8 0 58-2.9 72.6-6.5 6.8-1.6 11.5-4.5 14.6-7.1 9.8-3.1 36.8-12.3 62.2-28.7 18-11.7 24.2-14.2 37.6-17.4 12.9-3.2 21-15.1 19.4-28.2z" />
-  </svg>
-);
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const YarnIcon: React.FC<IconProps> = (props) => {
+  const { className, style } = props;
+  return (
+    <svg
+      className={className}
+      style={style}
+      aria-hidden="true"
+      fill="#2C8EBB"
+      focusable="false"
+      height="1em"
+      stroke="#2C8EBB"
+      strokeWidth="0"
+      viewBox="0 0 496 512"
+      width="1em"
+    >
+      <path d="M393.9 345.2c-39 9.3-48.4 32.1-104 47.4 0 0-2.7 4-10.4 5.8-13.4 3.3-63.9 6-68.5 6.1-12.4.1-19.9-3.2-22-8.2-6.4-15.3 9.2-22 9.2-22-8.1-5-9-9.9-9.8-8.1-2.4 5.8-3.6 20.1-10.1 26.5-8.8 8.9-25.5 5.9-35.3.8-10.8-5.7.8-19.2.8-19.2s-5.8 3.4-10.5-3.6c-6-9.3-17.1-37.3 11.5-62-1.3-10.1-4.6-53.7 40.6-85.6 0 0-20.6-22.8-12.9-43.3 5-13.4 7-13.3 8.6-13.9 5.7-2.2 11.3-4.6 15.4-9.1 20.6-22.2 46.8-18 46.8-18s12.4-37.8 23.9-30.4c3.5 2.3 16.3 30.6 16.3 30.6s13.6-7.9 15.1-5c8.2 16 9.2 46.5 5.6 65.1-6.1 30.6-21.4 47.1-27.6 57.5-1.4 2.4 16.5 10 27.8 41.3 10.4 28.6 1.1 52.7 2.8 55.3.8 1.4 13.7.8 36.4-13.2 12.8-7.9 28.1-16.9 45.4-17 16.7-.5 17.6 19.2 4.9 22.2zM496 256c0 136.9-111.1 248-248 248S0 392.9 0 256 111.1 8 248 8s248 111.1 248 248zm-79.3 75.2c-1.7-13.6-13.2-23-28-22.8-22 .3-40.5 11.7-52.8 19.2-4.8 3-8.9 5.2-12.4 6.8 3.1-44.5-22.5-73.1-28.7-79.4 7.8-11.3 18.4-27.8 23.4-53.2 4.3-21.7 3-55.5-6.9-74.5-1.6-3.1-7.4-11.2-21-7.4-9.7-20-13-22.1-15.6-23.8-1.1-.7-23.6-16.4-41.4 28-12.2.9-31.3 5.3-47.5 22.8-2 2.2-5.9 3.8-10.1 5.4h.1c-8.4 3-12.3 9.9-16.9 22.3-6.5 17.4.2 34.6 6.8 45.7-17.8 15.9-37 39.8-35.7 82.5-34 36-11.8 73-5.6 79.6-1.6 11.1 3.7 19.4 12 23.8 12.6 6.7 30.3 9.6 43.9 2.8 4.9 5.2 13.8 10.1 30 10.1 6.8 0 58-2.9 72.6-6.5 6.8-1.6 11.5-4.5 14.6-7.1 9.8-3.1 36.8-12.3 62.2-28.7 18-11.7 24.2-14.2 37.6-17.4 12.9-3.2 21-15.1 19.4-28.2z" />
+    </svg>
+  );
+};

 export default YarnIcon;
--- a/.dumi/theme/common/styles/Markdown.tsx
+++ b/.dumi/theme/common/styles/Markdown.tsx
@ -180,15 +180,25 @@ const GlobalStyle: React.FC = () => {
            line-height: 2;
          }
        }
-
+        .pic-plus {
+          & > * {
+            display: inline-block !important;
+            vertical-align: middle;
+          }
+          span {
+            margin: 0 20px;
+            color: #aaa;
+            font-size: 30px;
+          }
+        }
        .antd-site-snippet {
          .ant-tabs-tab {
            .snippet-label {
              display: flex;
              align-items: center;
              justify-content: center;
-              span {
-                margin-inline-start: 8px;
+              svg {
+                margin-inline-end: 8px;
              }
            }
          }
--- a/docs/react/introduce.en-US.md
+++ b/docs/react/introduce.en-US.md
@ -8,21 +8,9 @@ Following the Ant Design specification, we developed a React UI library `antd` t
 <div class="pic-plus">
  <img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
  <span>+</span>
- <img width="160" src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" />
+  <img width="160" src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" />
 </div>

-<style>
-.pic-plus > * {
-  display: inline-block !important;
-  vertical-align: middle;
-}
-.pic-plus span {
-  margin: 0 20px;
-  color: #aaa;
-  font-size: 30px;
-}
-</style>
-
 ---

 ## ✨ Features
@ -56,17 +44,11 @@ You can subscribe to this feed for new version notifications: https://github.com

 ## Installation

-### Using npm or yarn
-
-**We recommend using npm or yarn to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
+### Using npm or yarn or pnpm

-```bash
-$ npm install antd
-```
+**We recommend using [npm](https://www.npmjs.com/) or [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.

-```bash
-$ yarn add antd
-```
+<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>

 If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).

--- a/docs/react/introduce.zh-CN.md
+++ b/docs/react/introduce.zh-CN.md
@ -11,18 +11,6 @@ title: Ant Design of React
  <img width="160" src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"/>
 </div>

-<style>
-.pic-plus > * {
-  display: inline-block !important;
-  vertical-align: middle;
-}
-.pic-plus span {
-  margin: 0 20px;
-  color: #aaa;
-  font-size: 30px;
-}
-</style>
-
 ---

 ## ✨ 特性
@ -56,17 +44,11 @@ title: Ant Design of React

 ## 安装

-### 使用 npm 或 yarn 安装
-
-**我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
+### 使用 npm 或 yarn 或 pnpm 安装

-```bash
-$ npm install antd --save
-```
+**我们推荐使用 [npm](https://www.npmjs.com/) 或 [yarn](https://github.com/yarnpkg/yarn/) 或 [pnpm](https://pnpm.io/zh/) 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

-```bash
-$ yarn add antd
-```
+<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>

 如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。

--- a/docs/react/practical-projects.zh-CN.md
+++ b/docs/react/practical-projects.zh-CN.md
@ -11,7 +11,7 @@ Umi，中文发音为「乌米」，是可扩展的企业级前端应用框架

 ## 初始化项目

-推荐使用 [pnpm](https://pnpm.io/) 创建 Umi 脚手架，执行以下命令。
+推荐使用 [pnpm](https://pnpm.io/zh/) 创建 Umi 脚手架，执行以下命令。

 ```bash
 $ mkdir myapp && cd myapp
@ -298,7 +298,7 @@ export default function Layout() {
    <ProLayout
      route={clientRoutes[0]}
      location={location}
-      title={'Umi x Ant Design'}
+      title="Umi x Ant Design"
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || menuItemProps.children) {
          return defaultDom;