From 86b2421cbc86b7d09a8a14dbf6e44365ae62a7e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=92=B2=E5=A5=88Sakina?= <59400654+fz6m@users.noreply.github.com> Date: Thu, 11 Jan 2024 04:02:11 +0800 Subject: [PATCH] docs: replace SC with css modules (#12035) * Revert "docs: fix homepage flashing (#12029)" This reverts commit 7076342f05a7df6ed556f63a6e3a96e15ef1dcd4. * docs: replace SC with css modules * ci: fix type --- docs/.dumi/components/Contributing/index.less | 17 +++ docs/.dumi/components/Contributing/index.tsx | 22 +-- docs/.dumi/components/Features/index.less | 41 ++++++ docs/.dumi/components/Features/index.tsx | 62 +++----- .../components/Footer/NewsLetterForm.tsx | 50 +------ docs/.dumi/components/Footer/index.less | 95 ++++++++++++ docs/.dumi/components/Footer/index.tsx | 54 +------ docs/.dumi/components/Hero/image.ts | 17 --- docs/.dumi/components/Hero/index.less | 124 ++++++++++++++++ docs/.dumi/components/Hero/index.tsx | 139 +----------------- .../.dumi/components/SectionHeader/index.less | 22 +++ docs/.dumi/components/SectionHeader/index.tsx | 27 +--- docs/.dumi/components/WhoIsUsing/index.less | 20 +++ docs/.dumi/components/WhoIsUsing/index.tsx | 24 +-- docs/.dumi/pages/index.less | 32 ++++ docs/.dumi/pages/index.tsx | 39 +---- docs/.dumi/theme/slots/HeaderExtra/index.tsx | 2 +- docs/.dumi/typings.d.ts | 14 ++ docs/.dumirc.ts | 3 - docs/package.json | 6 +- docs/plugin.ts | 11 ++ docs/tsconfig.json | 2 +- pnpm-lock.yaml | 45 +++--- 23 files changed, 438 insertions(+), 430 deletions(-) create mode 100644 docs/.dumi/components/Contributing/index.less create mode 100644 docs/.dumi/components/Features/index.less create mode 100644 docs/.dumi/components/Footer/index.less delete mode 100644 docs/.dumi/components/Hero/image.ts create mode 100644 docs/.dumi/components/Hero/index.less create mode 100644 docs/.dumi/components/SectionHeader/index.less create mode 100644 docs/.dumi/components/WhoIsUsing/index.less create mode 100644 docs/.dumi/pages/index.less create mode 100644 docs/.dumi/typings.d.ts create mode 100644 docs/plugin.ts diff --git a/docs/.dumi/components/Contributing/index.less b/docs/.dumi/components/Contributing/index.less new file mode 100644 index 000000000000..e777d1ef628b --- /dev/null +++ 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 index 635fef26d1bc..00f8cff895da 100644 --- 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 ( - +

@@ -37,6 +21,6 @@ export const Contributing = () => {

-
+ ); }; diff --git a/docs/.dumi/components/Features/index.less b/docs/.dumi/components/Features/index.less new file mode 100644 index 000000000000..be95108c98ac --- /dev/null +++ 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 index 633d8fa2047d..4bcee0660402 100644 --- 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 ( +
+ {children} +
+ ); +}; export const Features = () => { return ( - +
  • @@ -125,6 +97,6 @@ export const Features = () => {

- +
); }; diff --git a/docs/.dumi/components/Footer/NewsLetterForm.tsx b/docs/.dumi/components/Footer/NewsLetterForm.tsx index ae4a47f81a06..eb2fbe3e30f8 100644 --- 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 ( - +

订阅 Umi 的最新动态

{ 订阅
- +
); }; diff --git a/docs/.dumi/components/Footer/index.less b/docs/.dumi/components/Footer/index.less new file mode 100644 index 000000000000..8a591a57e59e --- /dev/null +++ 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% + ); + } + } +} diff --git a/docs/.dumi/components/Footer/index.tsx b/docs/.dumi/components/Footer/index.tsx index 6ae19db27bec..622e378021ca 100644 --- a/docs/.dumi/components/Footer/index.tsx +++ b/docs/.dumi/components/Footer/index.tsx @@ -1,58 +1,10 @@ -import React from 'react'; -import styled from 'styled-components'; import { Link } from 'umi'; +import styles from './index.less'; 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 ( - +
@@ -92,6 +44,6 @@ export const Footer = () => {
- +
); }; diff --git a/docs/.dumi/components/Hero/image.ts b/docs/.dumi/components/Hero/image.ts deleted file mode 100644 index f96d7cd73015..000000000000 --- a/docs/.dumi/components/Hero/image.ts +++ /dev/null @@ -1,17 +0,0 @@ -export const BG_IMAGE = - 'https://img.alicdn.com/imgextra/i4/O1CN01Ri0dNS26K5UcRKrrU_!!6000000007642-2-tps-280-1400.png'; - -export const BIG_LOGE_IMAGE = - 'https://img.alicdn.com/imgextra/i4/O1CN01Gk5nSa1nkDO5AjXlN_!!6000000005127-2-tps-920-426.png'; - -export const GITHUB_STAR_IMAGE = - 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTEyIDBDNS4zNzQgMCAwIDUuMzczIDAgMTJjMCA1LjMwMiAzLjQzOCA5LjggOC4yMDcgMTEuMzg3LjU5OS4xMTEuNzkzLS4yNjEuNzkzLS41Nzd2LTIuMjM0Yy0zLjMzOC43MjYtNC4wMzMtMS40MTYtNC4wMzMtMS40MTYtLjU0Ni0xLjM4Ny0xLjMzMy0xLjc1Ni0xLjMzMy0xLjc1Ni0xLjA4OS0uNzQ1LjA4My0uNzI5LjA4My0uNzI5IDEuMjA1LjA4NCAxLjgzOSAxLjIzNyAxLjgzOSAxLjIzNyAxLjA3IDEuODM0IDIuODA3IDEuMzA0IDMuNDkyLjk5Ny4xMDctLjc3NS40MTgtMS4zMDUuNzYyLTEuNjA0LTIuNjY1LS4zMDUtNS40NjctMS4zMzQtNS40NjctNS45MzEgMC0xLjMxMS40NjktMi4zODEgMS4yMzYtMy4yMjEtLjEyNC0uMzAzLS41MzUtMS41MjQuMTE3LTMuMTc2IDAgMCAxLjAwOC0uMzIyIDMuMzAxIDEuMjNBMTEuNTA5IDExLjUwOSAwIDAgMSAxMiA1LjgwM2MxLjAyLjAwNSAyLjA0Ny4xMzggMy4wMDYuNDA0IDIuMjkxLTEuNTUyIDMuMjk3LTEuMjMgMy4yOTctMS4yMy42NTMgMS42NTMuMjQyIDIuODc0LjExOCAzLjE3Ni43Ny44NCAxLjIzNSAxLjkxMSAxLjIzNSAzLjIyMSAwIDQuNjA5LTIuODA3IDUuNjI0LTUuNDc5IDUuOTIxLjQzLjM3Mi44MjMgMS4xMDIuODIzIDIuMjIydjMuMjkzYzAgLjMxOS4xOTIuNjk0LjgwMS41NzZDMjAuNTY2IDIxLjc5NyAyNCAxNy4zIDI0IDEyYzAtNi42MjctNS4zNzMtMTItMTItMTJ6Ii8+PC9zdmc+'; - -export const BIG_SLOGAN1_IMAGE = - 'https://img.alicdn.com/imgextra/i4/O1CN01AYMMmi1d4P4hiTpYK_!!6000000003682-2-tps-468-152.png'; - -export const BIG_SLOGAN2_IMAGE = - 'https://img.alicdn.com/imgextra/i4/O1CN011JiaU21wvVhMqXI4G_!!6000000006370-2-tps-700-116.png'; - -export const BOW_IMAGE = - 'https://img.alicdn.com/imgextra/i3/O1CN01L7phqd1ud4WehHiRc_!!6000000006059-2-tps-760-386.png'; diff --git a/docs/.dumi/components/Hero/index.less b/docs/.dumi/components/Hero/index.less new file mode 100644 index 000000000000..ee58335c5fca --- /dev/null +++ b/docs/.dumi/components/Hero/index.less @@ -0,0 +1,124 @@ +.hero { + height: 640px; + position: relative; + + :global { + .bg { + position: absolute; + left: 0; + top: 0; + width: 100%; + background: url('https://img.alicdn.com/imgextra/i4/O1CN01Ri0dNS26K5UcRKrrU_!!6000000007642-2-tps-280-1400.png') repeat-x; + background-position: 0 -40px; + background-size: 140px 700px; + height: 640px; + z-index: 1; + } + .wrapper { + position: relative; + max-width: 1200px; + margin: 0 auto; + display: flex; + z-index: 2; + .left { + flex: 1; + padding-top: 130px; + padding-left: 90px; + .bigLogo { + width: 460px; + height: 213px; + background: url('https://img.alicdn.com/imgextra/i4/O1CN01Gk5nSa1nkDO5AjXlN_!!6000000005127-2-tps-920-426.png') no-repeat; + background-size: 460px 213px; + } + + .actions { + margin-top: 87px; + display: flex; + .button { + background-image: linear-gradient( + 224deg, + #0071da 0%, + #1890ff 100%, + #1890ff 100% + ); + width: 180px; + height: 54px; + line-height: 54px; + text-align: center; + color: #fff; + font-size: 22px; + margin-left: 27px; + } + .button:hover { + background-image: linear-gradient( + 224deg, + #48a4fe 0%, + #6fbafe 100%, + #8dc9ff 100% + ); + } + .githubStar { + display: flex; + font-size: 18px; + color: #4a5e71; + margin-left: 40px; + line-height: 54px; + /*padding-left: 28px;*/ + /*background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTEyIDBDNS4zNzQgMCAwIDUuMzczIDAgMTJjMCA1LjMwMiAzLjQzOCA5LjggOC4yMDcgMTEuMzg3LjU5OS4xMTEuNzkzLS4yNjEuNzkzLS41Nzd2LTIuMjM0Yy0zLjMzOC43MjYtNC4wMzMtMS40MTYtNC4wMzMtMS40MTYtLjU0Ni0xLjM4Ny0xLjMzMy0xLjc1Ni0xLjMzMy0xLjc1Ni0xLjA4OS0uNzQ1LjA4My0uNzI5LjA4My0uNzI5IDEuMjA1LjA4NCAxLjgzOSAxLjIzNyAxLjgzOSAxLjIzNyAxLjA3IDEuODM0IDIuODA3IDEuMzA0IDMuNDkyLjk5Ny4xMDctLjc3NS40MTgtMS4zMDUuNzYyLTEuNjA0LTIuNjY1LS4zMDUtNS40NjctMS4zMzQtNS40NjctNS45MzEgMC0xLjMxMS40NjktMi4zODEgMS4yMzYtMy4yMjEtLjEyNC0uMzAzLS41MzUtMS41MjQuMTE3LTMuMTc2IDAgMCAxLjAwOC0uMzIyIDMuMzAxIDEuMjNBMTEuNTA5IDExLjUwOSAwIDAgMSAxMiA1LjgwM2MxLjAyLjAwNSAyLjA0Ny4xMzggMy4wMDYuNDA0IDIuMjkxLTEuNTUyIDMuMjk3LTEuMjMgMy4yOTctMS4yMy42NTMgMS42NTMuMjQyIDIuODc0LjExOCAzLjE3Ni43Ny44NCAxLjIzNSAxLjkxMSAxLjIzNSAzLjIyMSAwIDQuNjA5LTIuODA3IDUuNjI0LTUuNDc5IDUuOTIxLjQzLjM3Mi44MjMgMS4xMDIuODIzIDIuMjIydjMuMjkzYzAgLjMxOS4xOTIuNjk0LjgwMS41NzZDMjAuNTY2IDIxLjc5NyAyNCAxNy4zIDI0IDEyYzAtNi42MjctNS4zNzMtMTItMTItMTJ6Ii8+PC9zdmc+) no-repeat 0 center;*/ + /*background-size: 24px 24px;*/ + } + .githubStar:before { + background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTEyIDBDNS4zNzQgMCAwIDUuMzczIDAgMTJjMCA1LjMwMiAzLjQzOCA5LjggOC4yMDcgMTEuMzg3LjU5OS4xMTEuNzkzLS4yNjEuNzkzLS41Nzd2LTIuMjM0Yy0zLjMzOC43MjYtNC4wMzMtMS40MTYtNC4wMzMtMS40MTYtLjU0Ni0xLjM4Ny0xLjMzMy0xLjc1Ni0xLjMzMy0xLjc1Ni0xLjA4OS0uNzQ1LjA4My0uNzI5LjA4My0uNzI5IDEuMjA1LjA4NCAxLjgzOSAxLjIzNyAxLjgzOSAxLjIzNyAxLjA3IDEuODM0IDIuODA3IDEuMzA0IDMuNDkyLjk5Ny4xMDctLjc3NS40MTgtMS4zMDUuNzYyLTEuNjA0LTIuNjY1LS4zMDUtNS40NjctMS4zMzQtNS40NjctNS45MzEgMC0xLjMxMS40NjktMi4zODEgMS4yMzYtMy4yMjEtLjEyNC0uMzAzLS41MzUtMS41MjQuMTE3LTMuMTc2IDAgMCAxLjAwOC0uMzIyIDMuMzAxIDEuMjNBMTEuNTA5IDExLjUwOSAwIDAgMSAxMiA1LjgwM2MxLjAyLjAwNSAyLjA0Ny4xMzggMy4wMDYuNDA0IDIuMjkxLTEuNTUyIDMuMjk3LTEuMjMgMy4yOTctMS4yMy42NTMgMS42NTMuMjQyIDIuODc0LjExOCAzLjE3Ni43Ny44NCAxLjIzNSAxLjkxMSAxLjIzNSAzLjIyMSAwIDQuNjA5LTIuODA3IDUuNjI0LTUuNDc5IDUuOTIxLjQzLjM3Mi44MjMgMS4xMDIuODIzIDIuMjIydjMuMjkzYzAgLjMxOS4xOTIuNjk0LjgwMS41NzZDMjAuNTY2IDIxLjc5NyAyNCAxNy4zIDI0IDEyYzAtNi42MjctNS4zNzMtMTItMTItMTJ6Ii8+PC9zdmc+') no-repeat 0 center; + background-size: 24px 24px; + width: 24px; + height: 54px; + display: inline-block; + content: ''; + margin-right: 6px; + } + } + .actions a { + text-decoration: none; + } + } + .right { + width: 460px; + padding-top: 90px; + margin-right: 40px; + .bigSlogan1 { + background: url('https://img.alicdn.com/imgextra/i4/O1CN01AYMMmi1d4P4hiTpYK_!!6000000003682-2-tps-468-152.png') no-repeat; + width: 234px; + height: 76px; + background-size: 234px 76px; + margin: 0 auto 6px; + } + + .bigSlogan2 { + background: url('https://img.alicdn.com/imgextra/i4/O1CN011JiaU21wvVhMqXI4G_!!6000000006370-2-tps-700-116.png') no-repeat; + width: 350px; + height: 58px; + background-size: 350px 58px; + margin: 0 auto 14px; + } + + .slogan { + font-size: 25px; + color: #708293; + text-align: center; + width: 460px; + } + .slogan strong { + color: #0273dc; + font-weight: normal; + } + .bow { + background: url('https://img.alicdn.com/imgextra/i3/O1CN01L7phqd1ud4WehHiRc_!!6000000006059-2-tps-760-386.png') no-repeat; + width: 380px; + height: 193px; + background-size: 380px 193px; + margin: 8px auto 0; + } + } + } + } +} diff --git a/docs/.dumi/components/Hero/index.tsx b/docs/.dumi/components/Hero/index.tsx index cdf9be263470..60e20a111e30 100644 --- a/docs/.dumi/components/Hero/index.tsx +++ b/docs/.dumi/components/Hero/index.tsx @@ -1,144 +1,11 @@ -import React from 'react'; import { TextLoop } from 'react-text-loop-next'; -import styled from 'styled-components'; import { Link } from 'umi'; import { GithubStar } from './GithubStar'; -import { - BG_IMAGE, - BIG_LOGE_IMAGE, - BIG_SLOGAN1_IMAGE, - BIG_SLOGAN2_IMAGE, - BOW_IMAGE, - GITHUB_STAR_IMAGE, -} from './image'; +import styles from './index.less'; -const HeroWrapper = styled.div` - height: 640px; - position: relative; - .bg { - position: absolute; - left: 0; - top: 0; - width: 100%; - background: url('${BG_IMAGE}') repeat-x; - background-position: 0 -40px; - background-size: 140px 700px; - height: 640px; - z-index: 1; - } - .wrapper { - position: relative; - max-width: 1200px; - margin: 0 auto; - display: flex; - z-index: 2; - .left { - flex: 1; - padding-top: 130px; - padding-left: 90px; - .bigLogo { - width: 460px; - height: 213px; - background: url('${BIG_LOGE_IMAGE}') no-repeat; - background-size: 460px 213px; - } - - .actions { - margin-top: 87px; - display: flex; - .button { - background-image: linear-gradient( - 224deg, - #0071da 0%, - #1890ff 100%, - #1890ff 100% - ); - width: 180px; - height: 54px; - line-height: 54px; - text-align: center; - color: #fff; - font-size: 22px; - margin-left: 27px; - } - .button:hover { - background-image: linear-gradient( - 224deg, - #48a4fe 0%, - #6fbafe 100%, - #8dc9ff 100% - ); - } - .githubStar { - display: flex; - font-size: 18px; - color: #4a5e71; - margin-left: 40px; - line-height: 54px; - /*padding-left: 28px;*/ - /*background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTEyIDBDNS4zNzQgMCAwIDUuMzczIDAgMTJjMCA1LjMwMiAzLjQzOCA5LjggOC4yMDcgMTEuMzg3LjU5OS4xMTEuNzkzLS4yNjEuNzkzLS41Nzd2LTIuMjM0Yy0zLjMzOC43MjYtNC4wMzMtMS40MTYtNC4wMzMtMS40MTYtLjU0Ni0xLjM4Ny0xLjMzMy0xLjc1Ni0xLjMzMy0xLjc1Ni0xLjA4OS0uNzQ1LjA4My0uNzI5LjA4My0uNzI5IDEuMjA1LjA4NCAxLjgzOSAxLjIzNyAxLjgzOSAxLjIzNyAxLjA3IDEuODM0IDIuODA3IDEuMzA0IDMuNDkyLjk5Ny4xMDctLjc3NS40MTgtMS4zMDUuNzYyLTEuNjA0LTIuNjY1LS4zMDUtNS40NjctMS4zMzQtNS40NjctNS45MzEgMC0xLjMxMS40NjktMi4zODEgMS4yMzYtMy4yMjEtLjEyNC0uMzAzLS41MzUtMS41MjQuMTE3LTMuMTc2IDAgMCAxLjAwOC0uMzIyIDMuMzAxIDEuMjNBMTEuNTA5IDExLjUwOSAwIDAgMSAxMiA1LjgwM2MxLjAyLjAwNSAyLjA0Ny4xMzggMy4wMDYuNDA0IDIuMjkxLTEuNTUyIDMuMjk3LTEuMjMgMy4yOTctMS4yMy42NTMgMS42NTMuMjQyIDIuODc0LjExOCAzLjE3Ni43Ny44NCAxLjIzNSAxLjkxMSAxLjIzNSAzLjIyMSAwIDQuNjA5LTIuODA3IDUuNjI0LTUuNDc5IDUuOTIxLjQzLjM3Mi44MjMgMS4xMDIuODIzIDIuMjIydjMuMjkzYzAgLjMxOS4xOTIuNjk0LjgwMS41NzZDMjAuNTY2IDIxLjc5NyAyNCAxNy4zIDI0IDEyYzAtNi42MjctNS4zNzMtMTItMTItMTJ6Ii8+PC9zdmc+) no-repeat 0 center;*/ - /*background-size: 24px 24px;*/ - } - .githubStar:before { - background: url('${GITHUB_STAR_IMAGE}') no-repeat 0 center; - background-size: 24px 24px; - width: 24px; - height: 54px; - display: inline-block; - content: ''; - margin-right: 6px; - } - } - .actions a { - text-decoration: none; - } - } - .right { - width: 460px; - padding-top: 90px; - margin-right: 40px; - .bigSlogan1 { - background: url('${BIG_SLOGAN1_IMAGE}') no-repeat; - width: 234px; - height: 76px; - background-size: 234px 76px; - margin: 0 auto 6px; - } - - .bigSlogan2 { - background: url('${BIG_SLOGAN2_IMAGE}') no-repeat; - width: 350px; - height: 58px; - background-size: 350px 58px; - margin: 0 auto 14px; - } - - .slogan { - font-size: 25px; - color: #708293; - text-align: center; - width: 460px; - } - .slogan strong { - color: #0273dc; - font-weight: normal; - } - .bow { - background: url('${BOW_IMAGE}') no-repeat; - width: 380px; - height: 193px; - background-size: 380px 193px; - margin: 8px auto 0; - } - } - } -`; export const Hero = () => { - // TODO: github stars 存 localStorage - // 采用 stale-while-revalidate 的策略 - localStorage.length; return ( - +
@@ -175,6 +42,6 @@ export const Hero = () => {
- +
); }; diff --git a/docs/.dumi/components/SectionHeader/index.less b/docs/.dumi/components/SectionHeader/index.less new file mode 100644 index 000000000000..e60f7c3f57b2 --- /dev/null +++ b/docs/.dumi/components/SectionHeader/index.less @@ -0,0 +1,22 @@ +.section { + display: flex; + margin-bottom: 40px; + + :global { + div { + flex: 1; + border-top: 1px solid #ebf0f4; + height: 1px; + margin-top: 18px; + } + + h2 { + font-size: 26px; + color: #2a445d; + text-align: center; + padding: 0 20px; + margin: 0; + font-weight: 400; + } + } +} diff --git a/docs/.dumi/components/SectionHeader/index.tsx b/docs/.dumi/components/SectionHeader/index.tsx index 860111c2770e..b3c7a0391152 100644 --- a/docs/.dumi/components/SectionHeader/index.tsx +++ b/docs/.dumi/components/SectionHeader/index.tsx @@ -1,32 +1,11 @@ -import React from 'react'; -import styled from 'styled-components'; - -const SectionHeaderWrapper = styled.div` - display: flex; - margin-bottom: 40px; - div { - flex: 1; - border-top: 1px solid #ebf0f4; - height: 1px; - margin-top: 18px; - } - - h2 { - font-size: 26px; - color: #2a445d; - text-align: center; - padding: 0 20px; - margin: 0; - font-weight: 400; - } -`; +import styles from './index.less'; export const SectionHeader = (props: { title: string }) => { return ( - +

{props.title}

- +
); }; diff --git a/docs/.dumi/components/WhoIsUsing/index.less b/docs/.dumi/components/WhoIsUsing/index.less new file mode 100644 index 000000000000..3929320fe0ca --- /dev/null +++ b/docs/.dumi/components/WhoIsUsing/index.less @@ -0,0 +1,20 @@ +.who_is_using { + max-width: 1200px; + margin: 0 auto 60px; + + :global { + ul { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + list-style: none; + padding: 0; + li img { + width: 224px; + height: 81px; + margin: -8px; + } + } + } +} diff --git a/docs/.dumi/components/WhoIsUsing/index.tsx b/docs/.dumi/components/WhoIsUsing/index.tsx index 56b9317fc4f2..4ca8cdbd2aee 100644 --- a/docs/.dumi/components/WhoIsUsing/index.tsx +++ b/docs/.dumi/components/WhoIsUsing/index.tsx @@ -1,27 +1,9 @@ -import React from 'react'; -import styled from 'styled-components'; import { SectionHeader } from '../SectionHeader'; +import styles from './index.less'; -const WhoIsUsingWrapper = styled.div` - max-width: 1200px; - margin: 0 auto 60px; - ul { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 20px; - list-style: none; - padding: 0; - li img { - width: 224px; - height: 81px; - margin: -8px; - } - } -`; export const WhoIsUsing = () => { return ( - +
  • @@ -85,6 +67,6 @@ export const WhoIsUsing = () => { />
- +
); }; diff --git a/docs/.dumi/pages/index.less b/docs/.dumi/pages/index.less new file mode 100644 index 000000000000..41518721b2f9 --- /dev/null +++ b/docs/.dumi/pages/index.less @@ -0,0 +1,32 @@ +html[data-prefers-color='dark']{ + .bg { + opacity: 0.1; + } + .bigLogo{ + opacity: 0.8; + } + .githubStar,.section-header-title { + color: rgba(255, 255, 255, 0.7) !important; + } + .section-header-line{ + border-top-color: rgba(255, 255, 255, 0.7) !important; + } + .githubStar:before { + filter: invert(80%); + } + .slogan, .contributing-text, .feature h3, .feature p { + color: rgba(255, 255, 255, 0.8)!important; + } + .bow { + opacity: 0.8; + } + .using-list li { + background-color: rgba(255, 255, 255, 0.2); + overflow: auto; + } + .foot-wrapper { + .left .line h3, .left .line div, .left .line div a { + color: rgba(255, 255, 255, 0.8)!important; + } + } +} diff --git a/docs/.dumi/pages/index.tsx b/docs/.dumi/pages/index.tsx index 09ca51ffb08c..99a98cf2e58d 100644 --- a/docs/.dumi/pages/index.tsx +++ b/docs/.dumi/pages/index.tsx @@ -1,53 +1,16 @@ /** * title: UmiJS - 插件化的企业级前端应用框架 */ -import React from 'react'; -import { createGlobalStyle } from 'styled-components'; import { Contributing } from '../components/Contributing'; import { Features } from '../components/Features'; import { Footer } from '../components/Footer'; import { Hero } from '../components/Hero'; import { WhoIsUsing } from '../components/WhoIsUsing'; - -const GlobalStyle = createGlobalStyle` - html[data-prefers-color='dark']{ - .bg { - opacity: 0.1; - } - .bigLogo{ - opacity: 0.8; - } - .githubStar,.section-header-title { - color: rgba(255, 255, 255, 0.7) !important; - } - .section-header-line{ - border-top-color: rgba(255, 255, 255, 0.7) !important; - } - .githubStar:before { - filter: invert(80%); - } - .slogan, .contributing-text, .feature h3, .feature p { - color: rgba(255, 255, 255, 0.8)!important; - } - .bow { - opacity: 0.8; - } - .using-list li { - background-color: rgba(255, 255, 255, 0.2); - overflow: auto; - } - .foot-wrapper { - .left .line h3, .left .line div, .left .line div a { - color: rgba(255, 255, 255, 0.8)!important; - } - } - } -`; +import './index.less'; const Index = () => { return ( <> - diff --git a/docs/.dumi/theme/slots/HeaderExtra/index.tsx b/docs/.dumi/theme/slots/HeaderExtra/index.tsx index 1d2cee0b025a..361b842e51ba 100644 --- a/docs/.dumi/theme/slots/HeaderExtra/index.tsx +++ b/docs/.dumi/theme/slots/HeaderExtra/index.tsx @@ -1,5 +1,5 @@ import { ReactComponent as IconDown } from '@ant-design/icons-svg/inline-svg/outlined/down.svg'; -import React, { type FC } from 'react'; +import { type FC } from 'react'; const HeaderExtra: FC = () => { return ( diff --git a/docs/.dumi/typings.d.ts b/docs/.dumi/typings.d.ts new file mode 100644 index 000000000000..93a065fad667 --- /dev/null +++ b/docs/.dumi/typings.d.ts @@ -0,0 +1,14 @@ +type CSSModuleClasses = { readonly [key: string]: string } +declare module '*.less' { + const classes: CSSModuleClasses + export default classes +} +declare module '*.svg' { + import * as React from 'react'; + export const ReactComponent: React.FunctionComponent & { title?: string }>; + + const src: string + export default src +} diff --git a/docs/.dumirc.ts b/docs/.dumirc.ts index 041b4ba2f25d..9a629d704079 100644 --- a/docs/.dumirc.ts +++ b/docs/.dumirc.ts @@ -32,9 +32,6 @@ export default defineConfig({ define: { 'process.env.UMI_VERSION': version, }, - exportStatic: { - ignorePreRenderError: true, - }, themeConfig: { name: 'UmiJS', socialLinks: { diff --git a/docs/package.json b/docs/package.json index c8c284ed5f7a..8f705078e1bb 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,7 @@ { "name": "@umijs/docs", - "version": "0.0.1", + "version": "1.0.0", + "private": true, "scripts": { "build": "dumi build", "dev": "dumi dev", @@ -9,8 +10,7 @@ }, "dependencies": { "@ant-design/icons-svg": "^4.2.1", - "react-countup": "^6.4.2", - "styled-components": "6.0.0-rc.0" + "react-countup": "^6.4.2" }, "devDependencies": { "dumi": "^2.2.16" diff --git a/docs/plugin.ts b/docs/plugin.ts new file mode 100644 index 000000000000..189e2edf4345 --- /dev/null +++ b/docs/plugin.ts @@ -0,0 +1,11 @@ +import { IApi } from 'dumi'; + +export default (api: IApi) => { + api.modifyBabelPresetOpts((memo) => { + // we do not write UI library so enable it + // https://github.com/umijs/dumi/commit/c5e6c8877f5b57f649e47b664e2a6d2701961f73 + memo.pluginAutoCSSModules = {}; + + return memo; + }); +}; diff --git a/docs/tsconfig.json b/docs/tsconfig.json index 0add10e05c96..3527c37c40ef 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "jsx": "react", + "jsx": "react-jsx", "strict": true, "skipLibCheck": true, "esModuleInterop": true, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f6cd81ccc873..0977496c5413 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -241,9 +241,6 @@ importers: react-countup: specifier: ^6.4.2 version: 6.4.2(react@18.1.0) - styled-components: - specifier: 6.0.0-rc.0 - version: 6.0.0-rc.0(react-dom@18.1.0)(react@18.1.0) devDependencies: dumi: specifier: ^2.2.16 @@ -3018,7 +3015,7 @@ packages: '@emotion/hash': 0.8.0 '@emotion/unitless': 0.7.5 classnames: 2.3.2 - csstype: 3.1.2 + csstype: 3.1.3 rc-util: 5.38.1(react-dom@17.0.2)(react@17.0.2) react: 17.0.2 react-dom: 17.0.2(react@17.0.2) @@ -3039,7 +3036,7 @@ packages: '@emotion/hash': 0.8.0 '@emotion/unitless': 0.7.5 classnames: 2.3.2 - csstype: 3.1.2 + csstype: 3.1.3 rc-util: 5.38.1(react-dom@18.1.0)(react@18.1.0) react: 18.1.0 react-dom: 18.1.0(react@18.1.0) @@ -3061,7 +3058,7 @@ packages: '@emotion/hash': 0.8.0 '@emotion/unitless': 0.7.5 classnames: 2.3.2 - csstype: 3.1.2 + csstype: 3.1.3 rc-util: 5.38.1(react-dom@18.1.0)(react@18.1.0) react: 18.1.0 react-dom: 18.1.0(react@18.1.0) @@ -3105,7 +3102,7 @@ packages: '@emotion/hash': 0.8.0 '@emotion/unitless': 0.7.5 classnames: 2.3.2 - csstype: 3.1.2 + csstype: 3.1.3 rc-util: 5.38.1(react-dom@18.1.0)(react@18.1.0) react: 18.1.0 react-dom: 18.1.0(react@18.1.0) @@ -4455,7 +4452,7 @@ packages: '@antv/scale': 0.3.18 '@antv/util': 2.0.17 fecha: 4.2.3 - tslib: 2.5.0 + tslib: 2.6.2 dev: false /@antv/coord@0.3.1: @@ -4633,7 +4630,7 @@ packages: '@antv/path-util': 2.0.15 '@antv/scale': 0.3.18 '@antv/util': 2.0.17 - tslib: 2.5.0 + tslib: 2.6.2 dev: false /@antv/g2@4.2.7: @@ -4666,7 +4663,7 @@ packages: fmin: 0.0.2 pdfast: 0.2.0 size-sensor: 1.0.1 - tslib: 2.5.0 + tslib: 2.6.2 dev: false /@antv/g2plot@2.4.20: @@ -5102,7 +5099,7 @@ packages: /@antv/x6@1.33.1: resolution: {integrity: sha512-NW3mUDW+Od9hqas0URoaeih0we4gLipqdNEC7ozM7wRFEzpi9CDzfPZerHmhdKasUMwjIyyrN56uJEHGVnrp4Q==} dependencies: - csstype: 3.1.2 + csstype: 3.1.3 jquery: 3.6.1 jquery-mousewheel: 3.1.13 lodash-es: 4.17.21 @@ -12377,7 +12374,7 @@ packages: '@emotion/memoize': 0.8.1 '@emotion/unitless': 0.8.0 '@emotion/utils': 1.2.0 - csstype: 3.1.2 + csstype: 3.1.3 dev: false /@emotion/sheet@1.1.1: @@ -18525,7 +18522,7 @@ packages: react-redux: 8.0.5(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@17.0.2)(react@17.0.2)(redux@4.2.1) redux: 4.2.1 styled-components: 6.1.1(react-dom@17.0.2)(react@17.0.2) - tslib: 2.5.0 + tslib: 2.6.2 warning: 4.0.3 transitivePeerDependencies: - '@babel/core' @@ -19321,7 +19318,7 @@ packages: '@vue/shared': 3.2.45 estree-walker: 2.0.2 magic-string: 0.25.9 - postcss: 8.4.31 + postcss: 8.4.32 source-map: 0.6.1 /@vue/compiler-ssr@3.2.45: @@ -22496,7 +22493,7 @@ packages: path-case: 3.0.4 sentence-case: 3.0.4 snake-case: 3.0.4 - tslib: 2.5.0 + tslib: 2.6.2 dev: true /char-regex@1.0.2: @@ -23582,6 +23579,7 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 dev: false + bundledDependencies: false /create-require@1.1.1: resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==} @@ -29953,7 +29951,7 @@ packages: '@formatjs/ecma402-abstract': 1.11.4 '@formatjs/fast-memoize': 1.2.1 '@formatjs/icu-messageformat-parser': 2.1.0 - tslib: 2.5.0 + tslib: 2.6.2 dev: true /intl@1.2.5: @@ -33982,7 +33980,7 @@ packages: optional: true dependencies: css-tree: 1.1.3 - csstype: 3.1.2 + csstype: 3.1.3 fastest-stable-stringify: 2.0.2 inline-style-prefixer: 6.0.1 react: 18.1.0 @@ -37626,7 +37624,7 @@ packages: util-deprecate: 1.0.2 dev: true - /postcss-sorting@6.0.0(postcss@8.4.31): + /postcss-sorting@6.0.0(postcss@8.4.32): resolution: {integrity: sha512-bYJ0vgAiGbjCBKi7B07CzsBc9eM84nLEbavUmwNp8rAa+PNyrgdH+6PpnqTtciLuUs99c4rFQQmCaYgeBQYmSQ==} peerDependencies: postcss: ^8.0.4 @@ -37635,7 +37633,7 @@ packages: optional: true dependencies: lodash: 4.17.21 - postcss: 8.4.31 + postcss: 8.4.32 dev: true /postcss-svgo@5.1.0(postcss@8.4.21): @@ -37827,7 +37825,6 @@ packages: nanoid: 3.3.7 picocolors: 1.0.0 source-map-js: 1.0.2 - dev: true /potpack@1.0.2: resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==} @@ -37946,9 +37943,9 @@ packages: peerDependencies: prettier: '>= 2.0.0' dependencies: - postcss: 8.4.31 + postcss: 8.4.32 postcss-less: 4.0.1 - postcss-sorting: 6.0.0(postcss@8.4.31) + postcss-sorting: 6.0.0(postcss@8.4.32) prettier: 2.8.8 dev: true @@ -44108,7 +44105,7 @@ packages: /rxjs@7.8.0: resolution: {integrity: sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==} dependencies: - tslib: 2.5.0 + tslib: 2.6.2 dev: true /sade@1.8.1: @@ -46153,7 +46150,7 @@ packages: engines: {node: ^14.18.0 || >=16.0.0} dependencies: '@pkgr/utils': 2.4.0 - tslib: 2.5.0 + tslib: 2.6.2 /systemjs@6.14.2: resolution: {integrity: sha512-1TlOwvKWdXxAY9vba+huLu99zrQURDWA8pUTYsRIYDZYQbGyK+pyEP4h4dlySsqo7ozyJBmYD20F+iUHhAltEg==}