Skip to content

Commit

Permalink
docs: add tool stack to homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
chenjiahan committed Jul 18, 2024
1 parent 28b93a4 commit ee9c878
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 24 deletions.
47 changes: 26 additions & 21 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"react-dom": "^18.3.1",
"rsbuild-plugin-google-analytics": "1.0.0",
"rsbuild-plugin-open-graph": "1.0.0",
"rsfamily-doc-ui": "^1.0.2",
"rsfamily-doc-ui": "^1.1.2",
"rspress": "1.26.2",
"rspress-plugin-font-open-sans": "1.0.0",
"rspress-plugin-sitemap": "^1.1.0"
Expand Down
51 changes: 51 additions & 0 deletions website/theme/components/ToolStack.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
.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);
}
}
18 changes: 18 additions & 0 deletions website/theme/components/ToolStack.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { ToolStack as BaseToolStack } from 'rsfamily-doc-ui/tool-stack';
import { useLang } from 'rspress/runtime';
import { useI18n } from '../i18n';
import styles from './ToolStack.module.scss';

export function ToolStack() {
const t = useI18n();
const lang = useLang();
return (
<div className={styles.root}>
<div className={styles.header}>
<h2 className={styles.title}>{t('toolStackTitle')}</h2>
<p className={styles.desc}>{t('toolStackDesc')}</p>
</div>
<BaseToolStack lang={lang === 'zh' ? 'zh' : 'en'} />
</div>
);
}
9 changes: 7 additions & 2 deletions website/theme/i18n.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import { useLang } from 'rspress/runtime';

export const EN_US = {
toolStackTitle: 'Tool Stack',
toolStackDesc:
'High-performance tool stack built around Rspack to boost modern web development',
benchmarkTitle: 'Lightning Fast',
benchmarkDesc:
'Combining Rust and TypeScript with a parallelized architecture to bring you the ultimate developer experience.',
'Combining Rust and TypeScript with a parallelized architecture to bring you the ultimate developer experience',
} as const;

export const ZH_CN: Record<keyof typeof EN_US, string> = {
benchmarkTitle: '极快的构建速度',
toolStackTitle: '工具栈',
toolStackDesc: '围绕 Rspack 打造的高性能工具栈,助力现代 Web 开发',
benchmarkTitle: '构建极快',
benchmarkDesc:
'基于 Rust 和 TypeScript 的高度并行、增量编译架构,构建性能极佳,带来极致的开发体验。',
};
Expand Down
2 changes: 2 additions & 0 deletions website/theme/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { HomeLayout as BasicHomeLayout } from 'rspress/theme';
import { Benchmark } from '../components/Benchmark';
import { ToolStack } from '../components/ToolStack';

export function HomeLayout() {
return (
<BasicHomeLayout
afterFeatures={
<>
<Benchmark />
<ToolStack />
</>
}
/>
Expand Down

0 comments on commit ee9c878

Please sign in to comment.