docs: migrate to dumi (#11269)

* docs: migrate to dumi * docs: migrate to dumi * docs: migrate to dumi * docs: migrate to dumi * docs: migrate to dumi * docs: migrate to dumi * docs: migrate to dumi * docs: migrate to dumi * docs: migrate to dumi * docs: migrate to dumi * docs: migrate to dumi * docs: migrate to dumi * feat(docs): delete loading * feat(docs): Merge branch 'master' into feature/docs-to-dumi * fix(docs): config Message * feat(doc): 暗黑模式 * fix(doc): 文字调整 * feat(docs): 文档首页暗黑模式样式调整 * feat(docs): upgrade dumi * feat(docs): 右侧菜单栏调整
umijs · Aug 16, 2023 · 538fc99 · 538fc99 · vercel · Aug 16, 2023
1 parent 31be984
commit 538fc99
Show file tree

Hide file tree

Showing 103 changed files with 5,194 additions and 2,213 deletions.
diff --git a/docs/.dumi/app.tsx b/docs/.dumi/app.tsx
@@ -0,0 +1,8 @@
+import { Navigate } from 'dumi';
+
+export function patchClientRoutes({ routes }) {
+  routes.push({
+    path: '/docs/tutorials/getting-started',
+    element: <Navigate to="/docs/guides/getting-started" replace />,
+  });
+}
diff --git a/.../components/Contributing/Contributing.tsx → docs/.dumi/components/Contributing/index.tsx b/.../components/Contributing/Contributing.tsx → docs/.dumi/components/Contributing/index.tsx
@@ -1,16 +1,29 @@
-import SectionHeader from '@/docs/components/SectionHeader/SectionHeader';
 import React from 'react';
-// @ts-ignore
+import styled from 'styled-components';
 import { Link } from 'umi';
-// @ts-ignore
-import styles from './Contributing.css';
+import { SectionHeader } from '../SectionHeader';
 
-export default () => {
+const ContributingWrapper = styled.div`
+  max-width: 1200px;
+  margin: 0 auto 60px;
+  p {
+    font-size: 18px;
+    color: #4a5e71;
+    margin-bottom: 16px;
+  }
+
+  p a {
+    color: #0273dc;
+    text-decoration: none;
+  }
+`;
+
+export const Contributing = () => {
   return (
-    <div className={styles.normal}>
+    <ContributingWrapper>
       <SectionHeader title="参与建设" />
       <div>
-        <p>
+        <p className="contributing-text">
           社区有非常多小伙伴在和我们一同建设 Umi，如果你有兴趣，欢迎&nbsp;
           <Link to="/docs/introduce/contributing">加入我们</Link> 。
         </p>
@@ -24,6 +37,6 @@ export default () => {
           </a>
         </div>
       </div>
-    </div>
+    </ContributingWrapper>
   );
 };
diff --git a/docs/.dumi/components/Features/image.ts b/docs/.dumi/components/Features/image.ts
@@ -0,0 +1,23 @@
+export const BOX_IMAGE =
+  'https://img.alicdn.com/imgextra/i1/O1CN01X9PWb51WTrmbiflpT_!!6000000002790-2-tps-200-200.png';
+
+export const COMPANY_IMAGE =
+  'https://img.alicdn.com/imgextra/i3/O1CN01bQ0kTe1EBOjKuXpqp_!!6000000000313-2-tps-200-202.png';
+
+export const PRACTICE_IMAGE =
+  'https://img.alicdn.com/imgextra/i2/O1CN013xl2111M1nLrWyeFh_!!6000000001375-2-tps-200-202.png';
+
+export const EXPAND_IMAGE =
+  'https://img.alicdn.com/imgextra/i2/O1CN01u39OgG1KsLZ2sIJMg_!!6000000001219-2-tps-200-202.png';
+
+export const ROUTER_IMAGE =
+  'https://img.alicdn.com/imgextra/i4/O1CN01h5IQ8c1mll6tVqVhQ_!!6000000004995-2-tps-200-200.png';
+
+export const FAST_IMAGE =
+  'https://img.alicdn.com/imgextra/i1/O1CN01y7KgLZ26MNTamgba7_!!6000000007647-2-tps-200-200.png';
+
+export const ENGINE_IMAGE =
+  'https://img.alicdn.com/imgextra/i4/O1CN016Wo1XZ1dSg4HhJn0M_!!6000000003735-2-tps-200-200.png';
+
+export const PACK_IMAGE =
+  'https://img.alicdn.com/imgextra/i2/O1CN01ub7E7l1QT3O8vEbCq_!!6000000001976-2-tps-200-200.png';
diff --git a/docs/.dumi/components/Features/index.tsx b/docs/.dumi/components/Features/index.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import styled from 'styled-components';
+import { SectionHeader } from '../SectionHeader';
+import {
+  BOX_IMAGE,
+  COMPANY_IMAGE,
+  ENGINE_IMAGE,
+  EXPAND_IMAGE,
+  FAST_IMAGE,
+  PACK_IMAGE,
+  PRACTICE_IMAGE,
+  ROUTER_IMAGE,
+} from './image';
+
+const FeaturesWrapper = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 26px;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    padding-left: 0;
+    justify-content: center;
+  }
+
+  .feature {
+    width: 280px;
+    margin-bottom: 60px;
+    list-style: none;
+  }
+
+  .feature div {
+    width: 100px;
+    height: 100px;
+    background-size: 100px 100px;
+    background-repeat: no-repeat;
+    margin: 0 auto 10px;
+  }
+
+  .feature h3 {
+    font-size: 20px;
+    color: #2a445d;
+    margin-bottom: 12px;
+    text-align: center;
+  }
+  .feature p {
+    font-size: 18px;
+    color: #4a5e71;
+  }
+`;
+
+const FeatureItemPicture = styled.div<{ imageUrl: string }>`
+  background-image: url(${(props) => props.imageUrl});
+`;
+
+export const Features = () => {
+  return (
+    <FeaturesWrapper>
+      <SectionHeader title="主要特性" />
+      <ul>
+        <li className="feature">
+          <FeatureItemPicture imageUrl={BOX_IMAGE}></FeatureItemPicture>
+          <h3>开箱即用</h3>
+          <p>
+            内置路由、构建、部署、测试、Lint 等，仅需一个 Umi 依赖即可上手开发。
+          </p>
+        </li>
+        <li className="feature">
+          <FeatureItemPicture imageUrl={COMPANY_IMAGE}></FeatureItemPicture>
+          <h3>企业级</h3>
+          <p>
+            蚂蚁集团 10000+
+            应用的选择。同时也在阿里、字节、腾讯、网易、美团、快手等公司有大量应用。
+          </p>
+        </li>
+        <li className="feature">
+          <FeatureItemPicture imageUrl={PRACTICE_IMAGE}></FeatureItemPicture>
+          <h3>最佳实践</h3>
+          <p>
+            内置微前端、数据流、权限、国际化、icons 方案、埋点、antd、请求、CSS
+            方案、图表等最佳实践。
+          </p>
+        </li>
+        <li className="feature">
+          <FeatureItemPicture imageUrl={EXPAND_IMAGE}></FeatureItemPicture>
+          <h3>可扩展</h3>
+          <p>
+            Umi 实现了 web 应用开发的完整生命周期，并使之插件化，包括 Umi
+            内部功能也是全由插件实现。
+          </p>
+        </li>
+        <li className="feature">
+          <FeatureItemPicture imageUrl={ROUTER_IMAGE}></FeatureItemPicture>
+          <h3>完备路由</h3>
+          <p>
+            基于 React Router 6，类
+            Remix，支持嵌套、动态、动态可选、预加载、基于路由的请求优化等。
+          </p>
+        </li>
+        <li className="feature">
+          <FeatureItemPicture imageUrl={FAST_IMAGE}></FeatureItemPicture>
+          <h3>默认快</h3>
+          <p>
+            MFSU 解 Webpack 编译慢的问题，通过 esbuild
+            解压缩、配置、测试的性能问题，还有运行时...
+          </p>
+        </li>
+        <li className="feature">
+          <FeatureItemPicture imageUrl={ENGINE_IMAGE}></FeatureItemPicture>
+          <h3>双构建引擎</h3>
+          <p>
+            提供 Vite 和 Webpack
+            两种构建模式供开发者选择，并尽可能保证他们之间功能的一致性。
+          </p>
+        </li>
+        <li className="feature">
+          <FeatureItemPicture imageUrl={PACK_IMAGE}></FeatureItemPicture>
+          <h3>依赖预打包</h3>
+          <p>
+            Umi
+            针对依赖做了预打包处理，彻底地锁定依赖，定期更新，让框架的每个版本在
+            10 年后依旧可用。
+          </p>
+        </li>
+      </ul>
+    </FeaturesWrapper>
+  );
+};
diff --git a/docs/.dumi/components/Footer/NewsLetterForm.tsx b/docs/.dumi/components/Footer/NewsLetterForm.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const NewsLetterFormWrapper = styled.div`
+  font-size: 18px;
+  margin-bottom: 14px;
+  h2 {
+    font-size: 18px;
+    font-weight: 400;
+  }
+  input {
+    background: #ffffff;
+    border: 1px solid #bac1c8;
+    width: 180px;
+    font-size: 14px;
+    height: 28px;
+    line-height: 28px;
+    padding: 0 4px;
+  }
+
+  button {
+    font-size: 14px;
+    color: #ffffff;
+    margin-left: 14px;
+    background-image: linear-gradient(
+      224deg,
+      #0071da 0%,
+      #1890ff 100%,
+      #1890ff 100%
+    );
+    height: 28px;
+    line-height: 28px;
+    padding: 0 10px;
+    border: none;
+  }
+
+  button:hover {
+    background-image: linear-gradient(
+      224deg,
+      #48a4fe 0%,
+      #6fbafe 100%,
+      #8dc9ff 100%
+    );
+  }
+`;
+
+export const NewsLetterForm = () => {
+  return (
+    <NewsLetterFormWrapper>
+      <h2>订阅 Umi 的最新动态</h2>
+      <form
+        action="https://www.getrevue.co/profile/chencheng/add_subscriber"
+        method="post"
+        target="_blank"
+      >
+        <input
+          type="text"
+          name="member[email]"
+          placeholder="请输入电子邮箱地址"
+        />
+        <button type="submit" name="member[subscribe]">
+          订阅
+        </button>
+      </form>
+    </NewsLetterFormWrapper>
+  );
+};
diff --git a/docs/.dumi/components/Footer/index.tsx b/docs/.dumi/components/Footer/index.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'umi';
+import { NewsLetterForm } from './NewsLetterForm';
+
+const FooterWrapper = styled.div`
+  padding: 40px 0;
+  .foot-wrapper {
+    display: flex;
+    max-width: 1200px;
+    margin: 0 auto;
+    .left {
+      flex: 1;
+      .line {
+        line-height: 40px;
+        display: flex;
+      }
+
+      .line h3 {
+        font-size: 18px;
+        width: 92px;
+        margin-right: 66px;
+        margin-top: 0;
+        margin-bottom: 0;
+        font-weight: 400;
+        color: #4a5e71;
+      }
+
+      .line div {
+        flex: 1;
+        color: #4a5e71;
+      }
+
+      .line div a {
+        text-decoration: none;
+        color: #4a5e71;
+      }
+    }
+
+    .right {
+      min-width: 400px;
+      font-size: 16px;
+      .copyright {
+        font-size: 14px;
+        color: #8996a1;
+        line-height: 22px;
+        margin-top: 24px;
+      }
+    }
+  }
+`;
+
+export const Footer = () => {
+  return (
+    <FooterWrapper>
+      <div className="foot-wrapper">
+        <div className="left">
+          <div className="line">
+            <h3>文档和帮助</h3>
+            <div>
+              <a target="_blank" href="https://fb.umijs.org">
+                反馈和交流群
+              </a>{' '}
+              ·{' '}
+              <a target="_blank" href="https://github.com/umijs/umi/issues">
+                给 Umi 提 Bug
+              </a>{' '}
+              · <Link to="/docs/introduce/contributing">向 Umi 贡献代码</Link> ·{' '}
+              <Link to="/docs/introduce/upgrade-to-umi-4">升级到 Umi 4</Link>
+            </div>
+          </div>
+          <div className="line">
+            <h3>Umi 生态</h3>
+            <div>
+              <Link to="/blog/umi-4-rc">开发日志</Link> · 团队 · 里程碑 ·{' '}
+              <a target="_blank" href="https://qiankun.umijs.org/">
+                乾坤
+              </a>
+            </div>
+          </div>
+          <div className="line">
+            <h3>Umi 资源</h3>
+            <div>
+              <Link to="/docs/introduce/introduce">文档</Link> · 示例 · 插件 ·{' '}
+              <a target="_blank" href="https://github.com/umijs/umi/releases">
+                发布日志
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="right">
+          <NewsLetterForm />
+        </div>
+      </div>
+    </FooterWrapper>
+  );
+};