chore(deps): upgrade @rstack-dev/doc-ui 1.4.2

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.2",
     "@types/react": "^18.3.3",
     "framer-motion": "11.3.2",
     "rsbuild-plugin-google-analytics": "^1.0.2",

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',

packages/document/theme/components/Benchmark/index.scss

@@ -0,0 +1,8 @@
+html {
+  --rs-benchmark-bar-background: linear-gradient(
+    to right,
+    #514fe6,
+    #6a93f1,
+    #2fa5e0
+  );
+}

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<keyof typeof BENCHMARK_DATA>('start');
-  const performanceInfoList = BENCHMARK_DATA[activeScene];
-  return (
-    <NoSSR>
-      <div className="relative flex flex-col justify-center py-10 mt-15 h-auto">
-        <div
-          className="flex flex-col items-center z-1"
-          style={{
-            padding: '16px 0',
-          }}
-        >
-          <Tabs
-            values={SCENE.map(item => ({
-              label: t(item as keyof typeof BENCHMARK_DATA),
-            }))}
-            onChange={index =>
-              setActiveScene(SCENE[index] as keyof typeof BENCHMARK_DATA)
-            }
-            tabPosition="center"
-          >
-            {SCENE.map(scene => (
-              <Tab key={scene}>
-                {performanceInfoList.map(info => (
-                  <div
-                    key={info.name}
-                    className="flex flex-center justify-start flex-col sm:flex-row"
-                    style={{
-                      margin: '16px 16px 16px 0',
-                    }}
-                  >
-                    {
-                      <>
-                        <p
-                          className="mr-2 mb-2 w-20 text-center text-gray-500 dark:text-light-500"
-                          style={{ minWidth: '140px' }}
-                        >
-                          {info.name}
-                        </p>
-                        <ProgressBar
-                          value={info.time}
-                          max={Math.max(
-                            ...performanceInfoList.map(info => info.time),
-                          )}
-                        />
-                      </>
-                    }
-                  </div>
-                ))}
-              </Tab>
-            ))}
-          </Tabs>
-        </div>
-      </div>
-    </NoSSR>
-  );
+  return <BaseBenchmark data={BENCHMARK_DATA} />;
 }

packages/document/theme/components/ToolStack.module.scss

@@ -6,6 +6,9 @@
   padding-top: 5rem;
   padding-bottom: 6rem;
   height: auto;
+
+  max-width: 72rem;
+  margin: 0 auto;
 }
 
 .header {

packages/document/theme/components/ToolStack.tsx

@@ -1,5 +1,5 @@
 import { ToolStack as BaseToolStack } from '@rstack-dev/doc-ui/tool-stack';
-import { useLang, useI18n } from 'rspress/runtime';
+import { useI18n, useLang } from 'rspress/runtime';
 import styles from './ToolStack.module.scss';
 
 export function ToolStack() {

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';