From d7089e07dd2fb53753e6b95398eabb54039865d4 Mon Sep 17 00:00:00 2001 From: SoonIter Date: Mon, 2 Sep 2024 20:57:36 +0800 Subject: [PATCH 1/5] chore(deps): upgrade rstack-doc-ui --- packages/document/package.json | 2 +- .../components/Benchmark/ProgressBar.tsx | 54 ------ .../components/Benchmark/index.module.scss | 66 ------- .../theme/components/Benchmark/index.scss | 8 + .../theme/components/Benchmark/index.tsx | 164 +++++++----------- .../theme/components/ToolStack.module.scss | 9 + .../document/theme/components/ToolStack.tsx | 3 +- pnpm-lock.yaml | 51 +----- 8 files changed, 83 insertions(+), 274 deletions(-) delete mode 100644 packages/document/theme/components/Benchmark/ProgressBar.tsx delete mode 100644 packages/document/theme/components/Benchmark/index.module.scss create mode 100644 packages/document/theme/components/Benchmark/index.scss diff --git a/packages/document/package.json b/packages/document/package.json index e01f408e1..d1b5e3fa4 100644 --- a/packages/document/package.json +++ b/packages/document/package.json @@ -17,7 +17,7 @@ "author": "", "license": "MIT", "devDependencies": { - "@rstack-dev/doc-ui": "^1.2.0", + "@rstack-dev/doc-ui": "1.4.0", "@types/react": "^18.3.3", "framer-motion": "11.3.2", "rsbuild-plugin-google-analytics": "^1.0.2", diff --git a/packages/document/theme/components/Benchmark/ProgressBar.tsx b/packages/document/theme/components/Benchmark/ProgressBar.tsx deleted file mode 100644 index 41a9b64e6..000000000 --- a/packages/document/theme/components/Benchmark/ProgressBar.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { useState } from 'react'; -import { motion } from 'framer-motion'; -import styles from './index.module.scss'; - -export function formatTime(time: number, totalTime: number) { - if (totalTime < 1000) { - return `${time.toFixed(0)}ms`; - } - - return `${(time / 1000).toFixed(2)}s`; -} - -export function ProgressBar({ value, max }: { value: number; max: number }) { - const [elapsedTime, setElapsedTime] = useState(0); - const TOTAL_TIME = value * 1000; - const isMobile = window.innerWidth < 768; - const progressBarWidth = isMobile ? 70 : 35; - const variants = { - initial: { width: 0 }, - animate: { width: '100%' }, - }; - const formattedTime = formatTime(elapsedTime, TOTAL_TIME); - return ( -
-
- { - const width = Number.parseFloat(latest.width); - setElapsedTime((width / 100) * TOTAL_TIME); - }} - // 2x speed - transition={{ duration: value / 2, ease: 'linear' }} - /> -
-
- {formattedTime} -
-
- ); -} diff --git a/packages/document/theme/components/Benchmark/index.module.scss b/packages/document/theme/components/Benchmark/index.module.scss deleted file mode 100644 index 10853976d..000000000 --- a/packages/document/theme/components/Benchmark/index.module.scss +++ /dev/null @@ -1,66 +0,0 @@ -.title { - background: linear-gradient(to right, #514fe6, #6a93f1, #2fa5e0); - // line-gradient blue color - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.motion-container { - position: relative; - display: flex; - flex-direction: column; - padding: 40px 0; - margin-top: 60px; - .top-tip { - display: flex; - justify-content: center; - flex-direction: column; - } -} - -.progress-bar-container { - width: 50vw; - height: 50px; - border-radius: var(--rp-radius-small); - padding: 4px; - padding-right: 15px; - border: 1px solid var(--rp-c-gray-light-4); - box-sizing: content-box; -} - -.progress-bar-inner-container { - height: 50px; - background: var(--rp-c-gray-light-4); - border-radius: var(--rp-radius-small); -} - -.progress-bar { - height: 100%; - background: linear-gradient(to right, #514fe6, #6a93f1, #2fa5e0); - border-radius: var(--rp-radius-small); -} - -.font-mono { - font-family: - Menlo, - Monaco, - Lucida Console, - Liberation Mono, - DejaVu Sans Mono, - Bitstream Vera Sans Mono, - Courier New, - monospace; -} - -:global(.dark) { - .progress-bar-inner-container { - background: var(--rp-c-gray-dark-2); - } -} - -@media (max-width: 768px) { - .progress-bar-container, - .progress-bar-inner-container { - height: 30px; - } -} diff --git a/packages/document/theme/components/Benchmark/index.scss b/packages/document/theme/components/Benchmark/index.scss new file mode 100644 index 000000000..be94ff26d --- /dev/null +++ b/packages/document/theme/components/Benchmark/index.scss @@ -0,0 +1,8 @@ +html { + --rs-benchmark-bar-background: linear-gradient( + to right, + #514fe6, + #6a93f1, + #2fa5e0 + ); +} diff --git a/packages/document/theme/components/Benchmark/index.tsx b/packages/document/theme/components/Benchmark/index.tsx index 4c2aaf47e..27c9ecdaa 100644 --- a/packages/document/theme/components/Benchmark/index.tsx +++ b/packages/document/theme/components/Benchmark/index.tsx @@ -1,111 +1,63 @@ -import { useState } from 'react'; -import { Tabs, Tab } from 'rspress/theme'; -import { NoSSR, useI18n } from 'rspress/runtime'; -import { ProgressBar } from './ProgressBar'; +import { + Benchmark as BaseBenchmark, + type BenchmarkData, +} from '@rstack-dev/doc-ui/benchmark'; +import './index.scss'; -const BENCHMARK_DATA = { - start: [ - { - name: 'Rspress', - // The unit is seconds - time: 0.786, - }, - { - name: 'Docusaurus', - time: 8.46, - }, - { - name: 'Nextra', - time: 8.2, - }, - ], - hmr: [ - { - name: 'Rspress', - time: 0.07, - }, - { - name: 'Docusaurus', - time: 0.12, - }, - { - name: 'Nextra', - time: 0.18, - }, - ], - build: [ - { - name: 'Rspress', - time: 2.51, - }, - { - name: 'Docusaurus', - time: 14.91, - }, - { - name: 'Nextra', - time: 17.25, - }, - ], +const BENCHMARK_DATA: BenchmarkData = { + rspress: { + label: 'Rspress', + metrics: [ + { + time: 0.07, + desc: 'hmr', + }, + { + time: 0.786, + desc: 'dev', + }, + { + time: 2.51, + desc: 'build', + }, + ], + }, + docusaurus: { + label: 'Docusaurus', + metrics: [ + { + time: 0.12, + desc: 'hmr', + }, + { + time: 8.46, + desc: 'dev', + }, + { + time: 14.91, + desc: 'build', + }, + ], + }, + nextra: { + label: 'Nextra', + metrics: [ + { + time: 0.18, + desc: 'hmr', + }, + { + time: 8.2, + desc: 'dev', + }, + { + time: 17.25, + desc: 'build', + }, + ], + }, }; export function Benchmark() { - const SCENE = ['start', 'hmr', 'build']; - const t = useI18n(); - const [activeScene, setActiveScene] = - useState('start'); - const performanceInfoList = BENCHMARK_DATA[activeScene]; - return ( - -
-
- ({ - label: t(item as keyof typeof BENCHMARK_DATA), - }))} - onChange={index => - setActiveScene(SCENE[index] as keyof typeof BENCHMARK_DATA) - } - tabPosition="center" - > - {SCENE.map(scene => ( - - {performanceInfoList.map(info => ( -
- { - <> -

- {info.name} -

- info.time), - )} - /> - - } -
- ))} - - ))} - -
-
- - ); + return ; } diff --git a/packages/document/theme/components/ToolStack.module.scss b/packages/document/theme/components/ToolStack.module.scss index 2134e0c57..222355465 100644 --- a/packages/document/theme/components/ToolStack.module.scss +++ b/packages/document/theme/components/ToolStack.module.scss @@ -6,6 +6,15 @@ padding-top: 5rem; padding-bottom: 6rem; height: auto; + + max-width: 72rem; + margin: 0 auto; +} + +@media (min-width: 800px) and (max-width: 1000px) { + .root { + max-width: 800px; + } } .header { diff --git a/packages/document/theme/components/ToolStack.tsx b/packages/document/theme/components/ToolStack.tsx index ccd27f347..09ccc9fe8 100644 --- a/packages/document/theme/components/ToolStack.tsx +++ b/packages/document/theme/components/ToolStack.tsx @@ -1,6 +1,7 @@ import { ToolStack as BaseToolStack } from '@rstack-dev/doc-ui/tool-stack'; -import { useLang, useI18n } from 'rspress/runtime'; import styles from './ToolStack.module.scss'; +import { useLang } from 'rspress/runtime'; +import { useI18n } from 'rspress/runtime'; export function ToolStack() { const t = useI18n(); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 095d6563e..dbcddd742 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -754,8 +754,8 @@ importers: packages/document: devDependencies: '@rstack-dev/doc-ui': - specifier: ^1.2.0 - version: 1.2.0 + specifier: 1.4.0 + version: 1.4.0 '@types/react': specifier: ^18.3.3 version: 18.3.3 @@ -776,7 +776,7 @@ importers: version: 1.0.0 ts-node: specifier: ^10.9.1 - version: 10.9.1(@types/node@22.5.1)(typescript@5.5.3) + version: 10.9.1(@types/node@18.11.17)(typescript@5.5.3) typescript: specifier: ^5.5.3 version: 5.5.3 @@ -4153,8 +4153,8 @@ packages: '@rspress/mdx-rs-win32-x64-msvc': 0.5.7 dev: false - /@rstack-dev/doc-ui@1.2.0: - resolution: {integrity: sha512-/slMk3IPj9EQcdDnVriZce9qGavU+LJiHeylhgThEBfJBJT2MPUig/hMTpERlDtaJ0+Y/YE4THS1R2DsVG/W0A==} + /@rstack-dev/doc-ui@1.4.0: + resolution: {integrity: sha512-Cya3yLkjxyDf2GOCLBSB2ld7GlkocVLWtm4ozL/LrO95+Cz/6BnKjWc0VNrvMx1zrMPz33k4eHNrFCUdTtefPQ==} dependencies: framer-motion: 11.3.8 transitivePeerDependencies: @@ -4378,12 +4378,6 @@ packages: /@types/node@18.11.17: resolution: {integrity: sha512-HJSUJmni4BeDHhfzn6nF0sVmd1SMezP7/4F0Lq+aXzmp2xm9O7WXrUtHW/CHlYVtZUbByEvWidHqRtcJXGF2Ng==} - /@types/node@22.5.1: - resolution: {integrity: sha512-KkHsxej0j9IW1KKOOAA/XBA0z08UFSrRQHErzEfA3Vgq57eXIMYboIlHJuYIfd+lwCQjtKqUu3UnmKbtUc9yRw==} - dependencies: - undici-types: 6.19.8 - dev: true - /@types/normalize-package-data@2.4.1: resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==} @@ -10489,37 +10483,6 @@ packages: yn: 3.1.1 dev: true - /ts-node@10.9.1(@types/node@22.5.1)(typescript@5.5.3): - resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==} - hasBin: true - peerDependencies: - '@swc/core': '>=1.2.50' - '@swc/wasm': '>=1.2.50' - '@types/node': '*' - typescript: '>=2.7' - peerDependenciesMeta: - '@swc/core': - optional: true - '@swc/wasm': - optional: true - dependencies: - '@cspotcode/source-map-support': 0.8.1 - '@tsconfig/node10': 1.0.9 - '@tsconfig/node12': 1.0.11 - '@tsconfig/node14': 1.0.3 - '@tsconfig/node16': 1.0.4 - '@types/node': 22.5.1 - acorn: 8.10.0 - acorn-walk: 8.2.0 - arg: 4.1.3 - create-require: 1.1.1 - diff: 4.0.2 - make-error: 1.3.6 - typescript: 5.5.3 - v8-compile-cache-lib: 3.0.1 - yn: 3.1.1 - dev: true - /tsconfig-paths-webpack-plugin@4.1.0: resolution: {integrity: sha512-xWFISjviPydmtmgeUAuXp4N1fky+VCtfhOkDUFIv5ea7p4wuTomI4QTrXvFBX2S4jZsmyTSrStQl+E+4w+RzxA==} engines: {node: '>=10.13.0'} @@ -10673,10 +10636,6 @@ packages: engines: {node: '>=0.10.0'} dev: false - /undici-types@6.19.8: - resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==} - dev: true - /unified@10.1.2: resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==} dependencies: From 02456d052e58abcc7a299d1b89284149f78bbb1e Mon Sep 17 00:00:00 2001 From: SoonIter Date: Tue, 3 Sep 2024 11:48:00 +0800 Subject: [PATCH 2/5] chore: upgrade 1.4.1 --- packages/document/package.json | 2 +- packages/document/theme/components/ToolStack.module.scss | 6 ------ pnpm-lock.yaml | 8 ++++---- 3 files changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/document/package.json b/packages/document/package.json index d1b5e3fa4..986592588 100644 --- a/packages/document/package.json +++ b/packages/document/package.json @@ -17,7 +17,7 @@ "author": "", "license": "MIT", "devDependencies": { - "@rstack-dev/doc-ui": "1.4.0", + "@rstack-dev/doc-ui": "1.4.1", "@types/react": "^18.3.3", "framer-motion": "11.3.2", "rsbuild-plugin-google-analytics": "^1.0.2", diff --git a/packages/document/theme/components/ToolStack.module.scss b/packages/document/theme/components/ToolStack.module.scss index 222355465..cf278c2fd 100644 --- a/packages/document/theme/components/ToolStack.module.scss +++ b/packages/document/theme/components/ToolStack.module.scss @@ -11,12 +11,6 @@ margin: 0 auto; } -@media (min-width: 800px) and (max-width: 1000px) { - .root { - max-width: 800px; - } -} - .header { display: flex; align-items: center; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dbcddd742..5ed021378 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -754,8 +754,8 @@ importers: packages/document: devDependencies: '@rstack-dev/doc-ui': - specifier: 1.4.0 - version: 1.4.0 + specifier: 1.4.1 + version: 1.4.1 '@types/react': specifier: ^18.3.3 version: 18.3.3 @@ -4153,8 +4153,8 @@ packages: '@rspress/mdx-rs-win32-x64-msvc': 0.5.7 dev: false - /@rstack-dev/doc-ui@1.4.0: - resolution: {integrity: sha512-Cya3yLkjxyDf2GOCLBSB2ld7GlkocVLWtm4ozL/LrO95+Cz/6BnKjWc0VNrvMx1zrMPz33k4eHNrFCUdTtefPQ==} + /@rstack-dev/doc-ui@1.4.1: + resolution: {integrity: sha512-eaalNccM2HJUFLr0BUlyc22UUGDPBcCCovpU/g9/VAjMtIt+QcQGs3Qi6vbDt1dApVWd10g0h0HBYlCL+qV22A==} dependencies: framer-motion: 11.3.8 transitivePeerDependencies: From 7ba8115d7884e6bc47beddb3a45015d05543871b Mon Sep 17 00:00:00 2001 From: SoonIter Date: Tue, 3 Sep 2024 12:05:31 +0800 Subject: [PATCH 3/5] chore: 1.4.2 --- packages/document/package.json | 2 +- pnpm-lock.yaml | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/document/package.json b/packages/document/package.json index 986592588..e71f901c8 100644 --- a/packages/document/package.json +++ b/packages/document/package.json @@ -17,7 +17,7 @@ "author": "", "license": "MIT", "devDependencies": { - "@rstack-dev/doc-ui": "1.4.1", + "@rstack-dev/doc-ui": "1.4.2", "@types/react": "^18.3.3", "framer-motion": "11.3.2", "rsbuild-plugin-google-analytics": "^1.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5ed021378..ae42ca9db 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -754,8 +754,8 @@ importers: packages/document: devDependencies: '@rstack-dev/doc-ui': - specifier: 1.4.1 - version: 1.4.1 + specifier: 1.4.2 + version: 1.4.2 '@types/react': specifier: ^18.3.3 version: 18.3.3 @@ -4153,8 +4153,8 @@ packages: '@rspress/mdx-rs-win32-x64-msvc': 0.5.7 dev: false - /@rstack-dev/doc-ui@1.4.1: - resolution: {integrity: sha512-eaalNccM2HJUFLr0BUlyc22UUGDPBcCCovpU/g9/VAjMtIt+QcQGs3Qi6vbDt1dApVWd10g0h0HBYlCL+qV22A==} + /@rstack-dev/doc-ui@1.4.2: + resolution: {integrity: sha512-dC1L65hIqzO0OwPtKXf7Y+wJJCy5FudEibUf8XW9AAaTM47/izBR768zTdhv+IIwk+40ZsBp7jnIIEsR05BnNQ==} dependencies: framer-motion: 11.3.8 transitivePeerDependencies: From e4b84f2682f3fa274284ac12a26fbd009e80759e Mon Sep 17 00:00:00 2001 From: SoonIter Date: Tue, 3 Sep 2024 15:54:46 +0800 Subject: [PATCH 4/5] chore: sort import --- packages/document/theme/components/ToolStack.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/document/theme/components/ToolStack.tsx b/packages/document/theme/components/ToolStack.tsx index 09ccc9fe8..854ed081d 100644 --- a/packages/document/theme/components/ToolStack.tsx +++ b/packages/document/theme/components/ToolStack.tsx @@ -1,7 +1,6 @@ import { ToolStack as BaseToolStack } from '@rstack-dev/doc-ui/tool-stack'; import styles from './ToolStack.module.scss'; -import { useLang } from 'rspress/runtime'; -import { useI18n } from 'rspress/runtime'; +import { useLang, useI18n } from 'rspress/runtime'; export function ToolStack() { const t = useI18n(); From 04e0e58d8ca34680b0a6a9ccd282e3a376db4d2b Mon Sep 17 00:00:00 2001 From: SoonIter Date: Tue, 3 Sep 2024 15:58:52 +0800 Subject: [PATCH 5/5] chore: run biome sort --- packages/document/rspress.config.ts | 4 ++-- packages/document/theme/components/ToolStack.tsx | 2 +- packages/document/theme/index.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/document/rspress.config.ts b/packages/document/rspress.config.ts index ae8d48138..1baad3284 100644 --- a/packages/document/rspress.config.ts +++ b/packages/document/rspress.config.ts @@ -1,7 +1,7 @@ -import { defineConfig } from 'rspress/config'; -import { pluginOpenGraph } from 'rsbuild-plugin-open-graph'; import { pluginGoogleAnalytics } from 'rsbuild-plugin-google-analytics'; +import { pluginOpenGraph } from 'rsbuild-plugin-open-graph'; import { pluginFontOpenSans } from 'rspress-plugin-font-open-sans'; +import { defineConfig } from 'rspress/config'; export default defineConfig({ root: 'docs', diff --git a/packages/document/theme/components/ToolStack.tsx b/packages/document/theme/components/ToolStack.tsx index 854ed081d..fd6f0471d 100644 --- a/packages/document/theme/components/ToolStack.tsx +++ b/packages/document/theme/components/ToolStack.tsx @@ -1,6 +1,6 @@ import { ToolStack as BaseToolStack } from '@rstack-dev/doc-ui/tool-stack'; +import { useI18n, useLang } from 'rspress/runtime'; import styles from './ToolStack.module.scss'; -import { useLang, useI18n } from 'rspress/runtime'; export function ToolStack() { const t = useI18n(); diff --git a/packages/document/theme/index.tsx b/packages/document/theme/index.tsx index 1b6f1b84f..28f239ea4 100644 --- a/packages/document/theme/index.tsx +++ b/packages/document/theme/index.tsx @@ -1,5 +1,5 @@ -import Theme from 'rspress/theme'; import { NavIcon } from '@rstack-dev/doc-ui/nav-icon'; +import Theme from 'rspress/theme'; import { HomeLayout as BasicHomeLayout } from 'rspress/theme'; import { ToolStack } from './components/ToolStack'; import './index.css';