docs: use Rstack unified homepage

packages/document/docs/en/index.md

@@ -1,38 +1,4 @@
 ---
 pageType: home
-
-hero:
-  name: Rsdoctor
-  text: Analyzer for Rspack & Webpack
-  tagline: Visualize the building process
-  actions:
-    - theme: brand
-      text: Introduction
-      link: /guide/start/intro
-    - theme: alt
-      text: Quick Start
-      link: /guide/start/quick-start
-  image:
-    src: https://assets.rspack.dev/rsdoctor/rsdoctor-logo-960x960.png
-    alt: Rsdoctor Logo
-
-features:
-  - title: Unlimited Framework
-    details: Rsdoctor support all projects built on Webpack or Rspack.
-    icon: 🛠️
-  - title: Compile’s Time
-    details: To display the compile execution time and process in the form of a timing diagram.
-    icon: 🚀
-  - title: Compile’s Actions
-    details: Visually view the compilation changes of each file in each loader.
-    icon: 🦄
-  - title: Bundle Analysis
-    details: Visually view the bundles & modules relationship, module reference relationship and repeated packages in detail.
-    icon: 🎯
-  - title: Bundle Diff
-    details: Through comparison, the deterioration and change of the product are found.
-    icon: 🎨
-  - title: Build Scan
-    details: Built-in build rule scanning, and also supports custom rules.
-    icon: 🔍
+titleSuffix: ' - Build Analyzer'
 ---

packages/document/docs/zh/index.md

@@ -1,38 +1,4 @@
 ---
 pageType: home
-
-hero:
-  name: Rsdoctor
-  text: Rspack & Webpack 构建分析工具
-  tagline: 让构建过程可视化
-  actions:
-    - theme: brand
-      text: 介绍
-      link: /zh/guide/start/intro
-    - theme: alt
-      text: 快速开始
-      link: /zh/guide/start/quick-start
-  image:
-    src: https://assets.rspack.dev/rsdoctor/rsdoctor-logo-960x960.png
-    alt: Rsdoctor Logo
-
-features:
-  - title: 框架无关
-    details: Rsdoctor 支持分析用 Webpack 和 Rspack 构建的项目。
-    icon: 🛠️
-  - title: 构建时分析
-    details: 以时序图的形式显示编译执行时间和过程。
-    icon: 🚀
-  - title: 构建行为分析
-    details: 可视化的查看每个 loader 对每个文件的编译更改。
-    icon: 🦄
-  - title: 构建产物分析
-    details: 直观地详细查看 Bundle 和模块关系、模块引用关系和重复包等产物详情。
-    icon: 🎯
-  - title: 产物对比
-    details: 通过对比发现产物劣化及变动。
-    icon: 🎨
-  - title: 构建扫描
-    details: 内置构建规则扫描，同时支持自定义规则。
-    icon: 🔍
+titleSuffix: ' - 构建分析工具'
 ---

packages/document/i18n.json

@@ -1,10 +1,70 @@
 {
+  "quickStart": {
+    "en": "Quick Start",
+    "zh": "快速上手"
+  },
+  "subtitle": {
+    "en": "Analyzer for Rspack & webpack",
+    "zh": "Rspack & webpack 构建分析工具"
+  },
+  "slogan": {
+    "en": "Visualize the building process",
+    "zh": "让构建过程可视化"
+  },
   "toolStackTitle": {
-    "en": "Tool Stack",
-    "zh": "工具栈"
+    "en": "Rstack",
+    "zh": "Rstack"
   },
   "toolStackDesc": {
-    "en": "High-performance tool stack built around Rspack to boost modern web development",
-    "zh": "围绕 Rspack 打造的高性能工具栈，助力现代 Web 开发"
+    "en": "High-performance toolchain built around Rspack to boost modern web development",
+    "zh": "围绕 Rspack 打造的高性能工具链，助力现代 Web 开发"
+  },
+  "frameworkAgnostic": {
+    "en": "Unlimited Framework",
+    "zh": "框架无关"
+  },
+  "frameworkAgnosticDesc": {
+    "en": "Rsdoctor support all projects built on Webpack or Rspack.",
+    "zh": "Rsdoctor 支持分析用 Rspack 和 webpack 构建的项目。"
+  },
+  "buildTime": {
+    "en": "Compile's Time",
+    "zh": "构建时分析"
+  },
+  "buildTimeDesc": {
+    "en": "To display the compile execution time and process in the form of a timing diagram.",
+    "zh": "以时序图的形式显示编译执行时间和过程。"
+  },
+  "buildActions": {
+    "en": "Compile's Actions",
+    "zh": "构建行为分析"
+  },
+  "buildActionsDesc": {
+    "en": "Visually view the compilation changes of each file in each loader.",
+    "zh": "可视化的查看每个 loader 对每个文件的编译更改。"
+  },
+  "bundleAnalysis": {
+    "en": "Bundle Analysis",
+    "zh": "构建产物分析"
+  },
+  "bundleAnalysisDesc": {
+    "en": "Visually view the bundles & modules relationship, module reference relationship and repeated packages in detail.",
+    "zh": "直观地详细查看 Bundle 和模块关系、模块引用关系和重复包等产物详情。"
+  },
+  "bundleDiff": {
+    "en": "Bundle Diff",
+    "zh": "产物对比"
+  },
+  "bundleDiffDesc": {
+    "en": "Through comparison, the deterioration and change of the product are found.",
+    "zh": "通过对比发现产物劣化及变动。"
+  },
+  "buildScan": {
+    "en": "Build Scan",
+    "zh": "构建扫描"
+  },
+  "buildScanDesc": {
+    "en": "Built-in build rule scanning, and also supports custom rules.",
+    "zh": "内置构建规则扫描，同时支持自定义规则。"
   }
 }

packages/document/package.json

@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@rsdoctor/types": "workspace:*",
-    "@rspress/plugin-rss": "1.41.0",
+    "@rspress/plugin-rss": "1.41.1",
     "@types/node": "^16",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
@@ -38,8 +38,8 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
-    "@rstack-dev/doc-ui": "1.6.0",
+    "@rstack-dev/doc-ui": "1.7.1",
     "react-markdown": "^9.0.3",
-    "rspress": "1.41.0"
+    "rspress": "1.41.1"
   }
 }

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

@@ -0,0 +1,29 @@
+@media (min-width: 640px) {
+  .copyRight {
+    padding: 2rem;
+  }
+}
+
+.copyRight {
+  bottom: 0;
+  margin-top: 6rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+
+  width: 100%;
+  border-top: 1px solid var(--rp-c-divider-light);
+}
+
+.copyRightInner {
+  margin: 0 auto;
+  width: 100%;
+  text-align: center;
+}
+
+.copyRightText {
+  font-weight: 400;
+  font-size: 0.875rem;
+  color: var(--rp-c-text-2);
+}

packages/document/theme/components/Copyright.tsx

@@ -0,0 +1,17 @@
+import styles from './Copyright.module.scss';
+
+export const CopyRight = () => {
+  return (
+    <footer className={styles.copyRight}>
+      <div className={styles.copyRightInner}>
+        <div className={styles.copyRightText}>
+          <p className="mb-2">
+            Rsdoctor is free and open source software released under the MIT
+            license.
+          </p>
+          <p>© 2024-present ByteDance Inc.</p>
+        </div>
+      </div>
+    </footer>
+  );
+};

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

@@ -0,0 +1,12 @@
+:global {
+  .max-w-6xl.flex.m-auto {
+    max-width: 1200px;
+  }
+  html.dark {
+    --rp-home-feature-bg: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.03)
+    );
+  }
+}

packages/document/theme/components/Features.tsx

@@ -0,0 +1,52 @@
+import {
+  containerStyle,
+  innerContainerStyle,
+} from '@rstack-dev/doc-ui/section-style';
+import { useI18n } from 'rspress/runtime';
+import { HomeFeature } from 'rspress/theme';
+import './Features.module.scss';
+
+export function Features() {
+  const t = useI18n<typeof import('i18n')>();
+  const features = {
+    features: [
+      {
+        title: t('frameworkAgnostic'),
+        details: t('frameworkAgnosticDesc'),
+        icon: '🛠️',
+      },
+      {
+        title: t('buildTime'),
+        details: t('buildTimeDesc'),
+        icon: '🚀',
+      },
+      {
+        title: t('buildActions'),
+        details: t('buildActionsDesc'),
+        icon: '🦄',
+      },
+      {
+        title: t('bundleAnalysis'),
+        details: t('bundleAnalysisDesc'),
+        icon: '🎯',
+      },
+      {
+        title: t('bundleDiff'),
+        details: t('bundleDiffDesc'),
+        icon: '🎨',
+      },
+      {
+        title: t('buildScan'),
+        details: t('buildScanDesc'),
+        icon: '🔍',
+      },
+    ],
+  };
+  return (
+    <section className={containerStyle}>
+      <div className={innerContainerStyle}>
+        <HomeFeature frontmatter={features} routePath="/" />
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,8 @@
+:global {
+  .rs-oval {
+    width: 70% !important;
+    height: 70% !important;
+    top: calc(50% + 20px) !important;
+    left: calc(50% + 5px) !important;
+  }
+}

packages/document/theme/components/Hero.tsx

@@ -0,0 +1,25 @@
+import { Hero as BaseHero } from '@rstack-dev/doc-ui/hero';
+import { useI18n, useNavigate } from 'rspress/runtime';
+import { useI18nUrl } from './utils';
+import './Hero.module.scss';
+
+export function Hero() {
+  const navigate = useNavigate();
+  const tUrl = useI18nUrl();
+  const t = useI18n<typeof import('i18n')>();
+  const onClickGetStarted = () => {
+    navigate(tUrl('/guide/start/quick-start'));
+  };
+  return (
+    <BaseHero
+      showStars
+      onClickGetStarted={onClickGetStarted}
+      title="Rsdoctor"
+      subTitle={t('subtitle')}
+      description={t('slogan')}
+      logoUrl="https://assets.rspack.dev/rsdoctor/rsdoctor-logo-960x960.png"
+      getStartedButtonText={t('quickStart')}
+      githubURL="https://github.com/web-infra-dev/rsdoctor"
+    />
+  );
+}