chore(docs): rsdoctor docs fix some problem

chore(docs): rsdoctor docs fix some problem

document/docs/en/_meta.json

@@ -1,7 +1,7 @@
 [
   {
     "text": "Guide",
-    "link": "/guide/start/",
+    "link": "/guide/start/intro",
     "activeMatch": "/guide/"
   }
 ]

document/docs/en/guide/start/_meta.json

@@ -1 +1 @@
-["intro"]
+["intro", "quick-start"]

document/docs/en/guide/start/quick-start.mdx

@@ -0,0 +1,4 @@
+# Quick Start
+::: tip
+Working On Progress...
+:::

document/docs/en/index.md

@@ -4,7 +4,7 @@ pageType: home
 hero:
   name: Rsdoctor
   text: Analyzer for Rspack and Webpack.
-  tagline: Let the build behavior be perspective to find the root cause of the problem.
+  tagline: Visualize building behavior
   actions:
     - theme: brand
       text: Introduction

document/docs/zh/_meta.json

@@ -1,7 +1,7 @@
 [
   {
     "text": "Guide",
-    "link": "/guide/start/",
+    "link": "/guide/start/intro",
     "activeMatch": "/guide/"
   }
 ]

document/docs/zh/guide/start/_meta.json

@@ -1 +1 @@
-["intro"]
+["intro", "quick-start"]

document/docs/zh/guide/start/quick-start.mdx

@@ -0,0 +1,4 @@
+# 快速开始
+::: tip
+Working On Progress...
+:::

document/docs/zh/index.md

@@ -4,7 +4,7 @@ pageType: home
 hero:
   name: Rsdoctor
   text: Rspack 和 Webpack 构建分析器
-  tagline: 让构建行为透视化，以发现问题根源
+  tagline: 让构建行为可视化
   actions:
     - theme: brand
       text: 介绍

document/package.json

@@ -13,11 +13,12 @@
     "@types/react-dom": "^18.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rspress": "^1.9.2",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   },
   "dependencies": {
+    "framer-motion": "^10.17.6",
+    "rspress": "^1.9.2",
     "tailwindcss": "^3.4.0"
   }
 }

document/rspress.config.ts

@@ -25,6 +25,7 @@ export default defineConfig({
     // exclude document fragments from routes
     exclude: ['**/zh/shared/**', '**/en/shared/**'],
   },
+  globalStyles: path.join(__dirname, 'theme', 'index.css'),
   themeConfig: {
     footer: {
       message: "Copyright © 2023 Bytedance",

document/theme/components/HomeFeatures/index.module.scss

@@ -0,0 +1,58 @@
+@media (max-width: 640px) {
+  .grid-2,
+  .grid-4,
+  .grid-6 {
+    width: calc(100%);
+  }
+}
+
+@media (min-width: 640px) {
+  .grid-2,
+  .grid-4,
+  .grid-6 {
+    width: calc(100% / 2);
+  }
+}
+
+@media (min-width: 768px) {
+  .grid-2,
+  .grid-4 {
+    width: calc(100% / 2);
+  }
+
+  .grid-3,
+  .grid-6 {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 960px) {
+  .grid-3 {
+    width: calc(100% / 4);
+  }
+  .grid-4 {
+    width: calc(100% / 3);
+  }
+  .grid-6 {
+    width: calc(100% / 2);
+  }
+}
+
+.featureContainer {
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  max-width: 1152px;
+  overflow: hidden;
+}
+
+.featureCard {
+  padding: 32px;
+  height: 100%;
+  background: var(--rp-home-feature-bg);
+  border: 1px solid transparent;
+  transition: all 0.3s;
+  border-radius: 32px;
+}
+

document/theme/components/HomeFeatures/index.tsx

@@ -0,0 +1,69 @@
+import styles from './index.module.scss';
+import { motion } from 'framer-motion';
+const PRESET_COUNT = [2, 3, 4];
+
+const getGridClass = (count?: number): string => {
+  if (!count) {
+    return '';
+  } else if (PRESET_COUNT.includes(count)) {
+    return `grid-${12 / count}`;
+  } else if (count % 3 === 0) {
+    return 'grid-4';
+  } else if (count % 2 === 0) {
+    return 'grid-6';
+  }
+  return '';
+};
+
+export interface Feature {
+  icon: string;
+  title: string;
+  details: string;
+  link?: string;
+}
+
+export function HomeFeature({ features }: { features: Feature[] }) {
+  const gridClass = getGridClass(features?.length);
+
+  return (
+    <div className={styles.featureContainer}>
+      {features?.map((feature, index) => {
+        const { icon, title, details, link } = feature;
+        return (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: index * 0.1 }}
+            key={title}
+            className={`${
+              gridClass ? styles[gridClass] : 'w-full'
+            } rounded-md hover:var(--rp-c-brand) mb-6`}
+          >
+            <div className="p-2 h-full">
+              <article
+                key={title}
+                className={styles.featureCard}
+                style={{
+                  cursor: link ? 'pointer' : 'auto',
+                }}
+                onClick={() => {
+                  if (link) {
+                    window.location.href = link;
+                  }
+                }}
+              >
+                <div className="flex-center">
+                  <div className="w-12 h-12 text-3xl text-center">{icon}</div>
+                </div>
+                <h2 className="font-bold text-center">{title}</h2>
+                <p className="leading-6 pt-2 text-sm text-text-2 font-medium">
+                  {details}
+                </p>
+              </article>
+            </div>
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+}

document/theme/components/HomeFooter/index.tsx

@@ -0,0 +1,9 @@
+export function HomeFooter() {
+  return (
+    <div className="flex flex-col border-t items-center mt-[10px]">
+        <h2 className="font-normal text-sm text-gray-600 dark:text-light-600 py-4">
+          Copyright © 2023 ByteDance Inc.
+        </h2>
+    </div>
+  );
+}

document/theme/components/HomeHero/index.module.scss

@@ -0,0 +1,74 @@
+.clip {
+  background: -webkit-linear-gradient(
+    120deg,
+    var(--rp-c-brand) 30%,
+    #f4f468
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--rp-home-hero-name-color);
+}
+
+.mask {
+  position: absolute;
+  background-image: conic-gradient(
+    from 180deg at 50% 50%,
+    #f37c58 0deg,
+    180deg,
+    #eeea8c 1turn
+  );
+  width: 600px;
+  height: 600px;
+  border-radius: 100%;
+  mixblendmode: normal;
+  opacity: 0.05;
+  filter: blur(60px);
+  top: -200px;
+  transform: translateX(-50%);
+  z-index: 0;
+}
+
+:global(.dark) .mask {
+  opacity: 0.25;
+}
+
+:global(.modern-doc-home-hero-image) {
+  width: 25vw;
+  height: 25vw;
+  max-width: 400px;
+  position: relative;
+  img {
+    position: absolute;
+    width: 100%;
+    object-fit: cover;
+  }
+}
+
+@media (max-width: 768px) {
+  :global(.modern-doc-home-hero-image) {
+    width: 50vw;
+    height: 50vw;
+  }
+}
+
+.imgMask {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 75%;
+  height: 75%;
+  background-image: conic-gradient(
+    from 180deg at 50% 50%,
+    #f37c58 0deg,
+    180deg,
+    #eeea8c 1turn
+  );
+  border-radius: 50%;
+  filter: blur(72px);
+  opacity: 0.5;
+}
+
+:global(.dark) .imgMask {
+  opacity: 1;
+}

document/theme/components/HomeHero/index.tsx

@@ -0,0 +1,69 @@
+import { Button } from 'rspress/theme';
+import { normalizeHrefInRuntime } from 'rspress/runtime';
+import styles from './index.module.scss';
+
+export interface Hero {
+  name: string;
+  text: string;
+  tagline: string;
+  image?: {
+    src: string;
+    alt: string;
+  };
+  actions: {
+    text: string;
+    link: string;
+    theme: 'brand' | 'alt';
+  }[];
+}
+
+export function HomeHero({ hero }: { hero: Hero }) {
+  const hasImage = hero.image !== undefined;
+  return (
+    <div
+      className="m-auto px-6 pb-12 sm:pt-0 sm:px-8  md:px-16 md:pb-16"
+      style={{
+        height: 'calc(100vh - var(--rp-nav-height)))',
+      }}
+    >
+      <div className="max-w-6xl m-auto flex flex-col md:flex-row">
+        <div className="m-auto flex flex-col order-2 md:order-1 justify-center text-center">
+          <h1 className="text-3xl sm:text-6xl md:text-7xl font-bold pb-3 lg:pb-5 z-10">
+            <span className={styles.clip}>{hero.name}</span>
+          </h1>
+          {hero.text?.length && (
+            <p
+              className={`pb-2 mx-auto md:m-0 text-3xl sm:text-5xl md:text-6xl font-bold z-10  max-w-xs sm:max-w-xl`}
+              style={{ lineHeight: '1.15' }}
+            >
+              {hero.text}
+            </p>
+          )}
+
+          <p className="pt-2 m-auto md:m-0 text-sm sm:text-xl md:text-2xl text-text-2 font-medium z-10 whitespace-pre-wrap">
+            {hero.tagline}
+          </p>
+          <div className="justify-center gap-3 flex flex-wrap m--1.5 pt-4 z-10">
+            {hero.actions.map((action) => (
+              <div key={action.link} className="p-1 flex-shrink-0">
+                <Button
+                  type="a"
+                  text={action.text}
+                  href={normalizeHrefInRuntime(action.link)}
+                  theme={action.theme}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {hasImage ? (
+          <div className="modern-doc-home-hero-image m-auto flex-center md:none lg:flex order-1 md:order-2">
+            <div className={styles.imgMask}></div>
+            <img src={'https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/logo/rsdoctor-large.png'} alt={hero.image?.alt} />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}