site: site optimization (#43007)

* site: site optimization

* Update practical-projects.zh-CN.md

.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>
+              npm
-            </div>
+            </span>
           ),
         },
         {
           key: 'yarn',
           children: <SourceCode lang="bash">{yarn}</SourceCode>,
           label: (
-            <div className="snippet-label">
+            <span className="snippet-label">
               <YarnLogo />
-              <span>yarn</span>
+              yarn
-            </div>
+            </span>
           ),
         },
         {
           key: 'pnpm',
           children: <SourceCode lang="bash">{pnpm}</SourceCode>,
           label: (
-            <div className="snippet-label">
+            <span className="snippet-label">
               <PnpmLogo />
-              <span>pnpm</span>
+              pnpm
-            </div>
+            </span>
           ),
         },
       ]}

.dumi/theme/builtins/InstallDependencies/npm.tsx

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

.dumi/theme/builtins/InstallDependencies/pnpm.tsx

@@ -1,19 +1,29 @@
 import React from 'react';
 
-const PnpmIcon: React.FC = () => (
+interface IconProps {
-  <svg
+  className?: string;
-    aria-hidden="true"
+  style?: React.CSSProperties;
-    fill="#F69220"
+}
-    focusable="false"
+
-    height="1em"
+const PnpmIcon: React.FC<IconProps> = (props) => {
-    role="img"
+  const { className, style } = props;
-    stroke="#F69220"
+  return (
-    strokeWidth="0"
+    <svg
-    viewBox="0 0 24 24"
+      className={className}
-    width="1em"
+      style={style}
-  >
+      aria-hidden="true"
-    <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" />
+      fill="#F69220"
-  </svg>
+      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;

.dumi/theme/builtins/InstallDependencies/yarn.tsx

@@ -1,18 +1,28 @@
 import React from 'react';
 
-const YarnIcon: React.FC = () => (
+interface IconProps {
-  <svg
+  className?: string;
-    aria-hidden="true"
+  style?: React.CSSProperties;
-    fill="#2C8EBB"
+}
-    focusable="false"
+
-    height="1em"
+const YarnIcon: React.FC<IconProps> = (props) => {
-    stroke="#2C8EBB"
+  const { className, style } = props;
-    strokeWidth="0"
+  return (
-    viewBox="0 0 496 512"
+    <svg
-    width="1em"
+      className={className}
-  >
+      style={style}
-    <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" />
+      aria-hidden="true"
-  </svg>
+      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;

.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 {
+              svg {
-                margin-inline-start: 8px;
+                margin-inline-end: 8px;
               }
             }
           }

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
+### Using npm or yarn or pnpm
 
-**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.
+**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
+<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
-$ npm install antd
-```
-
-```bash
-$ yarn add antd
-```
 
 If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
 

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 或 pnpm 安装
 
-**我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
+**我们推荐使用 [npm](https://www.npmjs.com/) 或 [yarn](https://github.com/yarnpkg/yarn/) 或 [pnpm](https://pnpm.io/zh/) 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
 
-```bash
+<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
-$ npm install antd --save
-```
-
-```bash
-$ yarn add antd
-```
 
 如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
 

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;