diff --git a/website/i18n.json b/website/i18n.json
index f9e061fd..c7d60fd6 100644
--- a/website/i18n.json
+++ b/website/i18n.json
@@ -27,37 +27,125 @@
"en": "One CLI unifies development, builds, testing, linting, and formatting across all your JavaScript projects. Powered by the Rspack ecosystem.",
"zh": "只需一个 CLI，即可统一所有 JavaScript 项目的开发、构建、测试、代码检查与格式化。由 Rspack 生态驱动。"
},
- "unifiedCli": {
- "en": "One CLI",
- "zh": "统一命令行"
+ "appCommandTitle": {
+ "en": "From dev to production, fast",
+ "zh": "从开发到构建，快人一步"
},
- "unifiedCliDesc": {
- "en": "Develop, build, test, lint, format code, build libraries, and serve docs with the rs command.",
- "zh": "通过 rs 命令完成开发、构建、测试、检查、格式化、库构建和文档开发。"
+ "appCommandDesc": {
+ "en": "Start a dev server in an instant and build your app for production. Powered by Rsbuild, with the speed of Rspack at every step.",
+ "zh": "快速启动开发服务器，轻松构建生产应用。基于 Rsbuild，让 Rspack 的速度贯穿整个开发流程。"
},
- "oneConfig": {
- "en": "One Configuration",
- "zh": "统一配置"
+ "appCommandHmr": {
+ "en": "Fast feedback with hot module replacement",
+ "zh": "热模块替换（HMR），即时反馈代码变更"
},
- "oneConfigDesc": {
- "en": "Configure the whole toolchain from a single rstack.config.ts file.",
- "zh": "在一份 rstack.config.ts 中配置完整工具链。"
+ "appCommandProduction": {
+ "en": "Optimized production builds powered by Rspack",
+ "zh": "由 Rspack 驱动，生成优化的生产产物"
},
- "ecosystemPowered": {
- "en": "Rstack Powered",
- "zh": "Rstack 驱动"
+ "appCommandConfig": {
+ "en": "One app configuration for development and builds",
+ "zh": "开发与构建，共用一份应用配置"
},
- "ecosystemPoweredDesc": {
- "en": "Built on Rspack, Rsbuild, Rslib, Rstest, Rslint, and Rspress.",
- "zh": "基于 Rspack、Rsbuild、Rslib、Rstest、Rslint 和 Rspress。"
+ "libCommandTitle": {
+ "en": "Your library, ready to ship",
+ "zh": "构建你的库，轻松交付"
},
- "workflowFriendly": {
- "en": "Workflow Friendly",
- "zh": "融入现有工作流"
+ "libCommandDesc": {
+ "en": "Build JavaScript and TypeScript libraries with Rslib. From reusable utilities to component libraries, bring your code to more projects.",
+ "zh": "使用 Rslib 构建 JavaScript 和 TypeScript 库。从通用工具到组件库，让你的代码在更多项目中复用。"
},
- "workflowFriendlyDesc": {
- "en": "Keep using your preferred runtime, package manager, and task runner.",
- "zh": "继续使用你熟悉的运行时、包管理器和任务编排工具。"
+ "libCommandFormats": {
+ "en": "Flexible output formats, including ESM and CommonJS",
+ "zh": "灵活的产物格式，支持 ESM 和 CommonJS"
+ },
+ "libCommandTypes": {
+ "en": "Generate TypeScript declarations with --dts",
+ "zh": "通过 --dts 生成 TypeScript 类型声明"
+ },
+ "libCommandWatch": {
+ "en": "Rebuild on every change with --watch",
+ "zh": "通过 --watch 监听变更，自动重新构建"
+ },
+ "testCommandTitle": {
+ "en": "Test as fast as you build",
+ "zh": "测试与开发，同样高效"
+ },
+ "testCommandDesc": {
+ "en": "Run your tests with Rstest and keep feedback close to your code. Share your build settings and move from local development to CI with ease.",
+ "zh": "使用 Rstest 运行测试，及时获得代码反馈。复用构建配置，让测试从本地开发顺畅延伸到 CI。"
+ },
+ "testCommandConfig": {
+ "en": "Automatically inherit app or library configuration",
+ "zh": "自动继承应用或库的配置"
+ },
+ "testCommandWatch": {
+ "en": "Rerun related tests as your code changes",
+ "zh": "代码变更时，自动重新运行相关测试"
+ },
+ "testCommandCoverage": {
+ "en": "Collect coverage locally or run once in CI",
+ "zh": "支持覆盖率收集和适用于 CI 的单次运行"
+ },
+ "checkCommandTitle": {
+ "en": "Consistent code. One command",
+ "zh": "一个命令，保持代码一致"
+ },
+ "checkCommandDesc": {
+ "en": "Run lint and formatting checks together, with optional TypeScript type checking. Keep your existing code style with support for Prettier options and plugins.",
+ "zh": "一次完成代码检查与格式校验，按需启用 TypeScript 类型检查。兼容 Prettier 的格式化选项与插件，延续现有代码风格。"
+ },
+ "checkCommandTypes": {
+ "en": "Type-aware linting, with optional type checking",
+ "zh": "支持类型感知的代码检查，按需启用类型检查"
+ },
+ "checkCommandFormat": {
+ "en": "Parallel formatting with a persistent cache",
+ "zh": "并行格式化与持久化缓存，加速重复运行"
+ },
+ "checkCommandFix": {
+ "en": "Apply lint and formatting fixes with rs check --fix",
+ "zh": "通过 rs check --fix 自动修复代码与格式问题"
+ },
+ "hooksCommandTitle": {
+ "en": "Better code in every commit",
+ "zh": "让每次提交，都经过检查"
+ },
+ "hooksCommandDesc": {
+ "en": "Automatically check and format staged files before committing. Reuse lint-staged task configuration and migrate your existing Git Hooks workflow from Husky.",
+ "zh": "在提交前自动检查和格式化暂存文件。支持 lint-staged 的任务配置，可从 Husky 迁移现有 Git Hooks 工作流。"
+ },
+ "hooksCommandSetup": {
+ "en": "Manage Git hooks for the whole repository",
+ "zh": "统一管理整个仓库的 Git Hooks"
+ },
+ "hooksCommandStaged": {
+ "en": "Run checks on staged files before committing",
+ "zh": "提交前，针对暂存文件运行检查"
+ },
+ "hooksCommandTasks": {
+ "en": "Configure lint, format, and custom tasks by file pattern",
+ "zh": "按文件模式配置检查、格式化及自定义任务"
+ },
+ "docCommandTitle": {
+ "en": "Great docs, built right in",
+ "zh": "让文档，融入开发流程"
+ },
+ "docCommandDesc": {
+ "en": "Turn your content into a documentation site with Rspress. Keep your docs alongside your code, with one configuration for the whole workflow.",
+ "zh": "使用 Rspress 将内容构建为文档站点。让文档与代码一同维护，通过统一配置串联完整工作流。"
+ },
+ "docCommandMarkdown": {
+ "en": "Write in Markdown and add React components with MDX",
+ "zh": "使用 Markdown 编写文档，通过 MDX 嵌入 React 组件"
+ },
+ "docCommandFeatures": {
+ "en": "Built-in search and multilingual documentation",
+ "zh": "内置全文搜索，支持多语言文档"
+ },
+ "docCommandWorkflow": {
+ "en": "Develop, build, and preview with one CLI",
+ "zh": "通过统一命令行完成开发、构建与预览"
},
"guide": {
"en": "Guide",
diff --git a/website/theme/components/Commands.module.scss b/website/theme/components/Commands.module.scss
new file mode 100644
index 00000000..a5651b1d
--- /dev/null
+++ b/website/theme/components/Commands.module.scss
@@ -0,0 +1,205 @@
+.commands {
+ --command-title: #111214;
+ --command-text: #727272;
+ --command-border: #e8e8e8;
+
+ max-width: 72rem;
+ margin: 0 auto;
+ padding: 0 2rem;
+}
+
+:global(.dark) .commands {
+ --command-title: #f5f5f5;
+ --command-text: #9a9a9a;
+ --command-border: #292929;
+}
+
+.section {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+ align-items: center;
+ gap: clamp(2.5rem, 6vw, 5.5rem);
+ padding: 5.5rem 0;
+ border-top: 1px solid var(--command-border);
+}
+
+.copy {
+ min-width: 0;
+
+ h2 {
+ margin: 0;
+ color: var(--command-title);
+ font-size: clamp(1.75rem, 2.8vw, 2.25rem);
+ font-weight: 600;
+ line-height: 1.2;
+ letter-spacing: -0.04em;
+ text-wrap: balance;
+ }
+}
+
+.eyebrow {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.5rem 0.75rem;
+ margin: 0 0 1.25rem;
+ color: var(--command-text);
+ font-family: var(--rp-font-family-mono);
+ font-size: 0.8125rem;
+
+ a {
+ color: inherit;
+ white-space: nowrap;
+ text-underline-offset: 0.25em;
+
+ &:hover {
+ color: var(--command-title);
+ text-decoration: underline;
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--rp-c-brand);
+ outline-offset: 4px;
+ border-radius: 2px;
+ }
+ }
+}
+
+.commandLinkGroup {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.description {
+ margin: 1.25rem 0 0;
+ color: var(--command-text);
+ font-size: 1rem;
+ line-height: 1.75;
+}
+
+.highlights {
+ display: grid;
+ gap: 0.875rem;
+ margin: 1.75rem 0 0;
+ padding: 0;
+ list-style: none;
+ color: var(--command-title);
+ font-size: 0.9375rem;
+ line-height: 1.6;
+
+ li {
+ position: relative;
+ padding-left: 1rem;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: calc(0.8em - 2px);
+ left: 0;
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background: var(--command-text);
+ opacity: 0.7;
+ }
+ }
+}
+
+.terminal {
+ // Dracula's terminal palette for ANSI 32 / 34 / 35 / 36 / 90.
+ // rslog's true-color greeting uses its own mint color below.
+ --terminal-foreground: #f8f8f2;
+ --terminal-gray: #6272a4;
+ --terminal-green: #50fa7b;
+ --terminal-blue: #bd93f9;
+ --terminal-magenta: #ff79c6;
+ --terminal-cyan: #8be9fd;
+
+ min-width: 0;
+ margin: 0;
+ overflow: hidden;
+ color: var(--terminal-foreground);
+ border: 1px solid #252830;
+ border-radius: 0.75rem;
+ background: #101115;
+}
+
+.output {
+ margin: 0;
+ padding: 1.75rem;
+ overflow-x: auto;
+ font-family: var(--rp-font-family-mono);
+ font-size: 0.8125rem;
+ line-height: 1.9;
+ tab-size: 2;
+
+ code {
+ padding: 0;
+ font: inherit;
+ color: inherit;
+ background: none;
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--terminal-blue);
+ outline-offset: -3px;
+ }
+}
+
+.command {
+ color: var(--terminal-foreground);
+}
+
+.bold,
+.tool {
+ font-weight: 700;
+}
+
+.dim {
+ opacity: 0.65;
+}
+
+.success {
+ color: var(--terminal-green);
+}
+
+.tableHeader {
+ color: var(--terminal-blue);
+}
+
+.tool {
+ color: #84e1c7;
+}
+
+.total {
+ color: var(--terminal-magenta);
+}
+
+.muted {
+ color: var(--terminal-gray);
+}
+
+.accent,
+.path {
+ color: var(--terminal-cyan);
+}
+
+@media (max-width: 800px) {
+ .section {
+ grid-template-columns: minmax(0, 1fr);
+ gap: 2rem;
+ padding: 3.5rem 0;
+ }
+}
+
+@media (max-width: 640px) {
+ .commands {
+ padding: 0 1.25rem;
+ }
+
+ .output {
+ padding: 1.25rem;
+ font-size: 0.75rem;
+ }
+}
diff --git a/website/theme/components/Commands.tsx b/website/theme/components/Commands.tsx
new file mode 100644
index 00000000..683c2ed8
--- /dev/null
+++ b/website/theme/components/Commands.tsx
@@ -0,0 +1,321 @@
+import { useI18n } from '@rspress/core/runtime';
+import { Link } from '@rspress/core/theme-original';
+import type { ReactNode } from 'react';
+import { useI18nUrl } from './utils';
+import styles from './Commands.module.scss';
+
+function Terminal({ children }: { children: ReactNode }) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+function Prompt({ children }: { children: string }) {
+ return (
+
+ $
+ {children}
+
+ );
+}
+
+function CommandLinks({ commands }: { commands: string[] }) {
+ const tUrl = useI18nUrl();
+
+ return (
+
+ {commands.map((command, index) => (
+
+ {index > 0 && /}
+ rs {command}
+
+ ))}
+
+ );
+}
+
+function LogLabel({ children }: { children: string }) {
+ const color =
+ children === 'info' || children === 'start'
+ ? styles.accent
+ : styles.success;
+ return {children};
+}
+
+function FilePath({
+ path,
+ dimDirectory = true,
+}: {
+ path: string;
+ dimDirectory?: boolean;
+}) {
+ const split = path.lastIndexOf('/') + 1;
+ return (
+ <>
+
+ {path.slice(0, split)}
+
+
+ {path.slice(split)}
+
+
+ );
+}
+
+function OutputFiles({
+ format,
+ files,
+ total = false,
+}: {
+ format: string;
+ files: { path: string; size: number; gzip?: number }[];
+ total?: boolean;
+}) {
+ const pathWidth =
+ Math.max(
+ `File (${format})`.length,
+ ...files.map((file) => file.path.length),
+ ) + 2;
+ const hasGzip = files.every((file) => file.gzip !== undefined);
+ const sizeText = (size: number) => `${size.toFixed(2)} kB`.padStart(9);
+
+ return (
+ <>
+
+ {`File (${format})`.padEnd(pathWidth)}
+ {'Size'.padStart(9)}
+ {hasGzip && 'Gzip'.padStart(9)}
+
+ {files.map((file) => (
+
+ {'\n'}
+
+ {' '.repeat(pathWidth - file.path.length)}
+ {sizeText(file.size)}
+ {hasGzip && sizeText(file.gzip!)}
+
+ ))}
+ {total && (
+ <>
+ {'\n\n'}
+ {'Total:'.padStart(pathWidth)}
+ {sizeText(files.reduce((sum, file) => sum + file.size, 0))}
+ {hasGzip &&
+ sizeText(files.reduce((sum, file) => sum + file.gzip!, 0))}
+
+ )}
+
+ );
+}
+
+// Based on captured CLI output. Omit hashes and secondary logs, normalize
+// version labels, and calculate totals from the files included in the example.
+// Preserve the captured ANSI styles: uncolored numbers, bold build durations,
+// blue table headers, magenta totals, gray test metadata, and dim directories.
+export function Commands() {
+ const t = useI18n();
+
+ return (
+
+
+
+
+
{t('appCommandTitle')}
+
{t('appCommandDesc')}
+
+ - {t('appCommandHmr')}
+ - {t('appCommandProduction')}
+ - {t('appCommandConfig')}
+
+
+
+
+
+
+
{t('libCommandTitle')}
+
{t('libCommandDesc')}
+
+ - {t('libCommandFormats')}
+ - {t('libCommandTypes')}
+ - {t('libCommandWatch')}
+
+
+
+
+
+
{t('testCommandTitle')}
+
{t('testCommandDesc')}
+
+ - {t('testCommandConfig')}
+ - {t('testCommandWatch')}
+ - {t('testCommandCoverage')}
+
+
+
+
+
+
+
{t('checkCommandTitle')}
+
{t('checkCommandDesc')}
+
+ - {t('checkCommandTypes')}
+ - {t('checkCommandFormat')}
+ - {t('checkCommandFix')}
+
+
+
+
+
+
+
{t('hooksCommandTitle')}
+
{t('hooksCommandDesc')}
+
+ - {t('hooksCommandSetup')}
+ - {t('hooksCommandStaged')}
+ - {t('hooksCommandTasks')}
+
+
+
+
+
+
{t('docCommandTitle')}
+
{t('docCommandDesc')}
+
+ - {t('docCommandMarkdown')}
+ - {t('docCommandFeatures')}
+ - {t('docCommandWorkflow')}
+
+
+