docs: showcase CLI commands on the homepage

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",

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