From 23ee543b420d382edb4b5a08494421bfe3859ead Mon Sep 17 00:00:00 2001 From: sunyiteng Date: Tue, 3 Sep 2024 14:23:49 +0800 Subject: [PATCH] chore: adopt suggestions --- website/i18n.json | 28 +++++----- website/theme/components/Hero.module.scss | 8 +++ website/theme/components/Hero.tsx | 34 +++++-------- .../theme/components/ToolStack.module.scss | 51 ------------------- .../theme/components/WhyRsbuild.module.scss | 12 +++++ website/theme/components/WhyRsbuild.tsx | 50 +++++++----------- website/theme/pages/index.tsx | 8 --- 7 files changed, 64 insertions(+), 127 deletions(-) create mode 100644 website/theme/components/Hero.module.scss delete mode 100644 website/theme/components/ToolStack.module.scss create mode 100644 website/theme/components/WhyRsbuild.module.scss diff --git a/website/i18n.json b/website/i18n.json index 16e3c5670c..3299a54ca6 100644 --- 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 new file mode 100644 index 0000000000..972082a0bd --- /dev/null +++ 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 index 93da0c6919..ae0d02c276 100644 --- 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 ( - <> - - - + ); } diff --git a/website/theme/components/ToolStack.module.scss b/website/theme/components/ToolStack.module.scss deleted file mode 100644 index 2134e0c578..0000000000 --- a/website/theme/components/ToolStack.module.scss +++ /dev/null @@ -1,51 +0,0 @@ -.root { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - padding-top: 5rem; - padding-bottom: 6rem; - height: auto; -} - -.header { - display: flex; - align-items: center; - flex-direction: column; -} - -.title { - color: var(--rp-c-text-1); - font-weight: bold; - font-size: 1.875rem; - margin-top: 4rem; -} - -@media (min-width: 640px) { - .title { - font-size: 3rem; - line-height: 1; - } -} - -.desc { - color: var(--rp-c-text-2); - margin-top: 2rem; - margin-bottom: 1.75rem; - margin-left: 1.5rem; - margin-right: 1.5rem; - text-align: center; - font-size: 1.125rem; - max-width: 48rem; -} - -.bottomLink { - display: block; - margin-top: 16px; - font-size: 16px; - color: var(--rp-c-text-2); - - &:hover { - color: var(--rp-c-link); - } -} diff --git a/website/theme/components/WhyRsbuild.module.scss b/website/theme/components/WhyRsbuild.module.scss new file mode 100644 index 0000000000..413b8aefe3 --- /dev/null +++ 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 index 9cc4bacb6b..da459283b4 100644 --- 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(); 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 ( - <> - -
-
- -
-
- +
+
+ +
+
); } diff --git a/website/theme/pages/index.tsx b/website/theme/pages/index.tsx index b67ed66b30..0fb89c6740 100644 --- a/website/theme/pages/index.tsx +++ b/website/theme/pages/index.tsx @@ -32,13 +32,5 @@ export function HomeLayout() { - // - // - // - // - // } - // /> ); }