chore: adopt suggestions

web-infra-dev · Sep 3, 2024 · 23ee543 · 23ee543
1 parent 172b51b
commit 23ee543
Show file tree

Hide file tree

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

diff --git a/website/theme/components/Hero.module.scss b/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;
+  }
+}
diff --git a/website/theme/components/Hero.tsx b/website/theme/components/Hero.tsx
@@ -1,6 +1,7 @@
 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();
@@ -13,27 +14,16 @@ export function Hero() {
     navigate(tUrl('/guide/start/quick-start'));
   };
   return (
-    <>
-      <style>
-        {`.rs-oval {
-            width: 70% !important;
-            height: 70% !important;
-            top: calc(50% + 20px) !important;
-            left: calc(50% + 5px) !important;
-          }
-        `}
-      </style>
-      <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')}
-      />
-    </>
+    <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')}
+    />
   );
 }
diff --git a/website/theme/components/ToolStack.module.scss b/website/theme/components/ToolStack.module.scss
diff --git a/website/theme/components/WhyRsbuild.module.scss b/website/theme/components/WhyRsbuild.module.scss
@@ -0,0 +1,12 @@
+:global {
+  .max-w-6xl.flex.m-auto {
+    max-width: 1440px;
+  }
+  html.dark {
+    --rp-home-feature-bg: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.03)
+    );
+  }
+}
diff --git a/website/theme/components/WhyRsbuild.tsx b/website/theme/components/WhyRsbuild.tsx
@@ -4,63 +4,49 @@ import {
 } from '@rstack-dev/doc-ui/section-style';
 import { useI18n } from 'rspress/runtime';
 import { HomeFeature } from 'rspress/theme';
+import './WhyRsbuild.module.scss';
 
 export function WhyRsbuild() {
   const t = useI18n<typeof import('i18n')>();
   const features = {
     features: [
       {
-        title: 'Rspack-based',
-        details: t('RspackBasedDesc'),
+        title: t('rspackBased'),
+        details: t('rspackBasedDesc'),
         icon: '🚀',
       },
       {
-        title: 'Batteries Included',
-        details: t('BatteriesIncludedDesc'),
+        title: t('batteriesIncluded'),
+        details: t('batteriesIncludedDesc'),
         icon: '🦄',
       },
       {
-        title: 'Framework Agnostic',
-        details: t('FrameworkAgnosticDesc'),
+        title: t('frameworkAgnostic'),
+        details: t('frameworkAgnosticDesc'),
         icon: '🎯',
       },
       {
-        title: 'Deep Optimization',
-        details: t('DeepOptimizationDesc'),
+        title: t('deepOptimization'),
+        details: t('deepOptimizationDesc'),
         icon: '🛠️',
       },
       {
-        title: 'Highly Pluggable',
-        details: t('HighlyPluggableDesc'),
+        title: t('highlyPluggable'),
+        details: t('highlyPluggableDesc'),
         icon: '🎨',
       },
       {
-        title: 'Easy to Configure',
-        details: t('EasyToConfigureDesc'),
+        title: t('easyToConfigure'),
+        details: t('easyToConfigureDesc'),
         icon: '🍭',
       },
     ],
   };
   return (
-    <>
-      <style>
-        {`.max-w-6xl.flex.m-auto {
-           max-width: 1440px;
-          }
-          html.dark {
-            --rp-home-feature-bg: linear-gradient(
-              135deg,
-              rgba(255, 255, 255, 0),
-              rgba(255, 255, 255, 0.03)
-            );
-          }
-      `}
-      </style>
-      <section className={containerStyle}>
-        <div className={innerContainerStyle}>
-          <HomeFeature frontmatter={features} routePath="/" />
-        </div>
-      </section>
-    </>
+    <section className={containerStyle}>
+      <div className={innerContainerStyle}>
+        <HomeFeature frontmatter={features} routePath="/" />
+      </div>
+    </section>
   );
 }
diff --git a/website/theme/pages/index.tsx b/website/theme/pages/index.tsx
@@ -32,13 +32,5 @@ export function HomeLayout() {
       <ToolStack />
       <CopyRight />
     </div>
-    //    <BasicHomeLayout
-    //    afterFeatures={
-    //      <>
-    //        <Benchmark />
-    //        <ToolStack />
-    //      </>
-    //    }
-    //  />
   );
 }