docs(landingpage): new landingpage aligned with Rspack

website/docs/en/index.mdx

@@ -5,41 +5,4 @@ titleSuffix: ' - Rspack based build tool'
 link-rss:
   - releases-rss
   - releases-atom
-
-hero:
-  name: Rsbuild
-  text: |
-    The Rspack Powered
-    Build Tool
-  tagline: Build your web application instantly
-  actions:
-    - theme: brand
-      text: Introduction
-      link: /guide/start/
-    - theme: alt
-      text: Quick Start
-      link: /guide/start/quick-start
-  image:
-    src: https://assets.rspack.dev/rsbuild/rsbuild-logo.svg
-    alt: Rsbuild Logo
-
-features:
-  - title: Rspack-based
-    details: Using Rspack to bring you the ultimate development experience.
-    icon: 🚀
-  - title: Batteries Included
-    details: Out-of-the-box integration with the most practical building features in the ecosystem.
-    icon: 🦄
-  - title: Framework Agnostic
-    details: Supports React, Vue, Svelte, and more frameworks.
-    icon: 🎯
-  - title: Deep Optimization
-    details: Automatically optimize static assets to maximizing production performance.
-    icon: 🛠️
-  - title: Highly Pluggable
-    details: Comes with a lightweight plugin system and a set of high quality plugins.
-    icon: 🎨
-  - title: Easy to Configure
-    details: Start with zero configuration and everything is configurable.
-    icon: 🍭
 ---

website/docs/zh/index.mdx

@@ -5,41 +5,4 @@ titleSuffix: ' - 基于 Rspack 的构建工具'
 link-rss:
   - releases-rss-zh
   - releases-atom-zh
-
-hero:
-  name: Rsbuild
-  text: |
-    由 Rspack 驱动的
-    构建工具
-  tagline: 在瞬息之间构建你的 web 应用
-  actions:
-    - theme: brand
-      text: 介绍
-      link: /zh/guide/start/
-    - theme: alt
-      text: 快速上手
-      link: /zh/guide/start/quick-start
-  image:
-    src: https://assets.rspack.dev/rsbuild/rsbuild-logo.svg
-    alt: Rsbuild Logo
-
-features:
-  - title: 基于 Rspack
-    details: 享受 Rspack 带来的极致开发体验。
-    icon: 🚀
-  - title: 开箱即用
-    details: 集成生态中最实用的构建功能。
-    icon: 🦄
-  - title: 框架无关
-    details: 支持 React、Vue、Svelte 等框架。
-    icon: 🎯
-  - title: 深度优化
-    details: 自动优化静态资源，最大化生产性能。
-    icon: 🛠️
-  - title: 灵活插拔
-    details: 提供轻量级插件系统和一系列高质量插件。
-    icon: 🎨
-  - title: 易于配置
-    details: 以零配置启动，然后一切皆可配置。
-    icon: 🍭
 ---

website/i18n.json

@@ -1,4 +1,68 @@
 {
+  "introduction": {
+    "en": "Introduction",
+    "zh": "介绍"
+  },
+  "quickStart": {
+    "en": "Quick Start",
+    "zh": "快速上手"
+  },
+  "subtitle": {
+    "en": "The Rspack Powered Build Tool",
+    "zh": "由 Rspack 驱动的构建工具"
+  },
+  "slogan": {
+    "en": "Build your web application instantly",
+    "zh": "在瞬息之间构建你的 web 应用"
+  },
+  "rspackBased": {
+    "en": "Rspack-based",
+    "zh": "基于 Rspack"
+  },
+  "rspackBasedDesc": {
+    "en": "Using Rspack to bring you the ultimate development experience.",
+    "zh": "享受 Rspack 带来的极致开发体验。"
+  },
+  "batteriesIncluded": {
+    "en": "Batteries Included",
+    "zh": "开箱即用"
+  },
+  "batteriesIncludedDesc": {
+    "en": "Out-of-the-box integration with the most practical building features in the ecosystem.",
+    "zh": "集成生态中最实用的构建功能。"
+  },
+  "frameworkAgnostic": {
+    "en": "Framework Agnostic",
+    "zh": "框架无关"
+  },
+  "frameworkAgnosticDesc": {
+    "en": "Supports React, Vue, Svelte, and more frameworks.",
+    "zh": "支持 React、Vue、Solid、Svelte 等。"
+  },
+  "deepOptimization": {
+    "en": "Deep Optimization",
+    "zh": "深度优化"
+  },
+  "deepOptimizationDesc": {
+    "en": "Automatically optimize static assets to maximizing production performance.",
+    "zh": "自动优化静态资源，最大化生产性能。"
+  },
+  "highlyPluggable": {
+    "en": "Highly Pluggable",
+    "zh": "灵活插拔"
+  },
+  "highlyPluggableDesc": {
+    "en": "Comes with a lightweight plugin system and a set of high quality plugins.",
+    "zh": "提供轻量级插件系统和一系列高质量插件。"
+  },
+  "easyToConfigure": {
+    "en": "EasyToConfigure",
+    "zh": "易于配置"
+  },
+  "easyToConfigureDesc": {
+    "en": "Start with zero configuration and everything is configurable.",
+    "zh": "以零配置启动，然后一切皆可配置。"
+  },
   "toolStackTitle": {
     "en": "Tool Stack",
     "zh": "工具栈"

website/package.json

@@ -19,7 +19,7 @@
     "react-dom": "^18.3.1",
     "rsbuild-plugin-google-analytics": "1.0.2",
     "rsbuild-plugin-open-graph": "1.0.2",
-    "@rstack-dev/doc-ui": "^1.2.0",
+    "@rstack-dev/doc-ui": "1.4.2",
     "rspress": "1.28.3",
     "rspress-plugin-font-open-sans": "1.0.0",
     "rspress-plugin-sitemap": "^1.1.1"

website/rspress.config.ts

@@ -129,6 +129,9 @@ export default defineConfig({
     ],
   },
   builderConfig: {
+    dev: {
+      lazyCompilation: true,
+    },
     plugins: [
       rsbuildPluginOverview,
       pluginGoogleAnalytics({ id: 'G-L6BZ6TKW4R' }),

website/theme/components/Benchmark.module.scss

@@ -21,13 +21,6 @@
   margin-top: 4rem;
 }
 
-.short {
-  // Temp code to fix the width of the graph
-  :global(.container_72b36) {
-    width: 40vw;
-  }
-}
-
 @media (min-width: 640px) {
   .title {
     font-size: 3rem;

website/theme/components/Benchmark.tsx

@@ -2,8 +2,14 @@ import {
   Benchmark as BaseBenchmark,
   type BenchmarkData,
 } from '@rstack-dev/doc-ui/benchmark';
+import {
+  containerStyle,
+  descStyle,
+  innerContainerStyle,
+  titleAndDescStyle,
+  titleStyle,
+} from '@rstack-dev/doc-ui/section-style';
 import { useI18n } from 'rspress/runtime';
-import styles from './Benchmark.module.scss';
 
 // Benchmark data for different cases
 // Unit: second
@@ -79,25 +85,21 @@ const BENCHMARK_DATA: BenchmarkData = {
   },
 };
 
-export function BenchmarkGraph(props: { short?: boolean }) {
-  return props.short ? (
-    <div className={styles.short}>
-      <BaseBenchmark data={BENCHMARK_DATA} />
-    </div>
-  ) : (
-    <BaseBenchmark data={BENCHMARK_DATA} />
-  );
+export function BenchmarkGraph() {
+  return <BaseBenchmark data={BENCHMARK_DATA} />;
 }
 
 export function Benchmark() {
   const t = useI18n<typeof import('i18n')>();
   return (
-    <div className={styles.root}>
-      <div className={styles.header}>
-        <h2 className={styles.title}>{t('benchmarkTitle')}</h2>
-        <p className={styles.desc}>{t('benchmarkDesc')}</p>
+    <section className={containerStyle}>
+      <div className={innerContainerStyle}>
+        <div className={titleAndDescStyle}>
+          <h1 className={titleStyle}>{t('benchmarkTitle')}</h1>
+          <p className={descStyle}>{t('benchmarkDesc')}</p>
+        </div>
+        <BenchmarkGraph />
       </div>
-      <BenchmarkGraph />
-    </div>
+    </section>
   );
 }

website/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);
+}

website/theme/components/Copyright.tsx

@@ -0,0 +1,20 @@
+import { memo } from 'react';
+import { usePageData } from 'rspress/runtime';
+import styles from './Copyright.module.scss';
+
+export const CopyRight = memo(() => {
+  const { siteData } = usePageData();
+  const { message } = siteData.themeConfig.footer || {};
+
+  if (!message) {
+    return null;
+  }
+
+  return (
+    <footer className={styles.copyRight}>
+      <div className={styles.copyRightInner}>
+        <div className={styles.copyRightText}>{message}</div>
+      </div>
+    </footer>
+  );
+});

website/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;
+  }
+}

website/theme/components/Hero.tsx

@@ -0,0 +1,29 @@
+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 handleClickGetStarted = () => {
+    navigate(tUrl('/guide/start/index'));
+  };
+  const handleClickLearnMore = () => {
+    navigate(tUrl('/guide/start/quick-start'));
+  };
+  return (
+    <BaseHero
+      showStars
+      onClickGetStarted={handleClickGetStarted}
+      onClickLearnMore={handleClickLearnMore}
+      title="Rsbuild"
+      subTitle={t('subtitle')}
+      description={t('slogan')}
+      logoUrl="https://assets.rspack.dev/rsbuild/rsbuild-logo.svg"
+      getStartedButtonText={t('introduction')}
+      learnMoreButtonText={t('quickStart')}
+    />
+  );
+}