docs: replace SC with css modules (#12035)

* Revert "docs: fix homepage flashing (#12029)" This reverts commit 7076342. * docs: replace SC with css modules * ci: fix type
umijs · Jan 10, 2024 · 86b2421 · 86b2421 · vercel · Jan 10, 2024
1 parent f6af8de
commit 86b2421
Show file tree

Hide file tree

Showing 23 changed files with 438 additions and 430 deletions.
diff --git a/docs/.dumi/components/Contributing/index.less b/docs/.dumi/components/Contributing/index.less
@@ -0,0 +1,17 @@
+.contributing {
+  max-width: 1200px;
+  margin: 0 auto 60px;
+
+  :global {
+    p {
+      font-size: 18px;
+      color: #4a5e71;
+      margin-bottom: 16px;
+    }
+
+    p a {
+      color: #0273dc;
+      text-decoration: none;
+    }
+  }
+}
diff --git a/docs/.dumi/components/Contributing/index.tsx b/docs/.dumi/components/Contributing/index.tsx
@@ -1,26 +1,10 @@
-import React from 'react';
-import styled from 'styled-components';
 import { Link } from 'umi';
 import { SectionHeader } from '../SectionHeader';
-
-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;
-  }
-`;
+import styles from './index.less';
 
 export const Contributing = () => {
   return (
-    <ContributingWrapper>
+    <div className={styles.contributing}>
       <SectionHeader title="参与建设" />
       <div>
         <p className="contributing-text">
@@ -37,6 +21,6 @@ export const Contributing = () => {
           </a>
         </div>
       </div>
-    </ContributingWrapper>
+    </div>
   );
 };
diff --git a/docs/.dumi/components/Features/index.less b/docs/.dumi/components/Features/index.less
@@ -0,0 +1,41 @@
+.features {
+  max-width: 1200px;
+  margin: 0 auto;
+
+  :global {
+    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;
+    }
+  }
+}
diff --git a/docs/.dumi/components/Features/index.tsx b/docs/.dumi/components/Features/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import { SectionHeader } from '../SectionHeader';
 import {
   BOX_IMAGE,
@@ -11,53 +10,26 @@ import {
   PRACTICE_IMAGE,
   ROUTER_IMAGE,
 } from './image';
+import styles from './index.less';
 
-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});
-`;
+const FeatureItemPicture = ({
+  imageUrl,
+  children,
+}: React.PropsWithChildren<{ imageUrl: string }>) => {
+  return (
+    <div
+      style={{
+        backgroundImage: imageUrl ? `url(${imageUrl})` : undefined,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
 
 export const Features = () => {
   return (
-    <FeaturesWrapper>
+    <div className={styles.features}>
       <SectionHeader title="主要特性" />
       <ul>
         <li className="feature">
@@ -125,6 +97,6 @@ export const Features = () => {
           </p>
         </li>
       </ul>
-    </FeaturesWrapper>
+    </div>
   );
 };
diff --git a/docs/.dumi/components/Footer/NewsLetterForm.tsx b/docs/.dumi/components/Footer/NewsLetterForm.tsx
@@ -1,52 +1,8 @@
-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%
-    );
-  }
-`;
+import styles from './index.less';
 
 export const NewsLetterForm = () => {
   return (
-    <NewsLetterFormWrapper>
+    <div className={styles.news_letter}>
       <h2>订阅 Umi 的最新动态</h2>
       <form
         action="https://www.getrevue.co/profile/chencheng/add_subscriber"
@@ -62,6 +18,6 @@ export const NewsLetterForm = () => {
           订阅
         </button>
       </form>
-    </NewsLetterFormWrapper>
+    </div>
   );
 };
diff --git a/docs/.dumi/components/Footer/index.less b/docs/.dumi/components/Footer/index.less
@@ -0,0 +1,95 @@
+.footer {
+  padding: 40px 0;
+
+  :global {
+    .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;
+        }
+      }
+    }
+  }
+}
+
+.news_letter {
+  font-size: 18px;
+  margin-bottom: 14px;
+
+  :global {
+    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%
+      );
+    }
+  }
+}