Skip to content

Commit c4af63d

Browse files
chenjiahanchenjiahan
authored
docs: showcase CLI commands on the homepage (#480)
1 parent a5294a4 commit c4af63d

13 files changed

Lines changed: 640 additions & 4927 deletions

File tree

‎website/i18n.json‎

Lines changed: 112 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,37 +27,125 @@
2727
"en": "One CLI unifies development, builds, testing, linting, and formatting across all your JavaScript projects. Powered by the Rspack ecosystem.",
2828
"zh": "只需一个 CLI，即可统一所有 JavaScript 项目的开发、构建、测试、代码检查与格式化。由 Rspack 生态驱动。"
2929
},
30-
"unifiedCli": {
31-
"en": "One CLI",
32-
"zh": "统一命令行"
30+
"appCommandTitle": {
31+
"en": "From dev to production, fast",
32+
"zh": "从开发到构建，快人一步"
3333
},
34-
"unifiedCliDesc": {
35-
"en": "Develop, build, test, lint, format code, build libraries, and serve docs with the rs command.",
36-
"zh": "通过 rs 命令完成开发、构建、测试、检查、格式化、库构建和文档开发。"
34+
"appCommandDesc": {
35+
"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.",
36+
"zh": "快速启动开发服务器，轻松构建生产应用。基于 Rsbuild，让 Rspack 的速度贯穿整个开发流程。"
3737
},
38-
"oneConfig": {
39-
"en": "One Configuration",
40-
"zh": "统一配置"
38+
"appCommandHmr": {
39+
"en": "Fast feedback with hot module replacement",
40+
"zh": "热模块替换（HMR），即时反馈代码变更"
4141
},
42-
"oneConfigDesc": {
43-
"en": "Configure the whole toolchain from a single rstack.config.ts file.",
44-
"zh": "在一份 rstack.config.ts 中配置完整工具链。"
42+
"appCommandProduction": {
43+
"en": "Optimized production builds powered by Rspack",
44+
"zh": "由 Rspack 驱动，生成优化的生产产物"
4545
},
46-
"ecosystemPowered": {
47-
"en": "Rstack Powered",
48-
"zh": "Rstack 驱动"
46+
"appCommandConfig": {
47+
"en": "One app configuration for development and builds",
48+
"zh": "开发与构建，共用一份应用配置"
4949
},
50-
"ecosystemPoweredDesc": {
51-
"en": "Built on Rspack, Rsbuild, Rslib, Rstest, Rslint, and Rspress.",
52-
"zh": "基于 Rspack、Rsbuild、Rslib、Rstest、Rslint 和 Rspress。"
50+
"libCommandTitle": {
51+
"en": "Your library, ready to ship",
52+
"zh": "构建你的库，轻松交付"
5353
},
54-
"workflowFriendly": {
55-
"en": "Workflow Friendly",
56-
"zh": "融入现有工作流"
54+
"libCommandDesc": {
55+
"en": "Build JavaScript and TypeScript libraries with Rslib. From reusable utilities to component libraries, bring your code to more projects.",
56+
"zh": "使用 Rslib 构建 JavaScript 和 TypeScript 库。从通用工具到组件库，让你的代码在更多项目中复用。"
5757
},
58-
"workflowFriendlyDesc": {
59-
"en": "Keep using your preferred runtime, package manager, and task runner.",
60-
"zh": "继续使用你熟悉的运行时、包管理器和任务编排工具。"
58+
"libCommandFormats": {
59+
"en": "Flexible output formats, including ESM and CommonJS",
60+
"zh": "灵活的产物格式，支持 ESM 和 CommonJS"
61+
},
62+
"libCommandTypes": {
63+
"en": "Generate TypeScript declarations with --dts",
64+
"zh": "通过 --dts 生成 TypeScript 类型声明"
65+
},
66+
"libCommandWatch": {
67+
"en": "Rebuild on every change with --watch",
68+
"zh": "通过 --watch 监听变更，自动重新构建"
69+
},
70+
"testCommandTitle": {
71+
"en": "Test as fast as you build",
72+
"zh": "测试与开发，同样高效"
73+
},
74+
"testCommandDesc": {
75+
"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.",
76+
"zh": "使用 Rstest 运行测试，及时获得代码反馈。复用构建配置，让测试从本地开发顺畅延伸到 CI。"
77+
},
78+
"testCommandConfig": {
79+
"en": "Automatically inherit app or library configuration",
80+
"zh": "自动继承应用或库的配置"
81+
},
82+
"testCommandWatch": {
83+
"en": "Rerun related tests as your code changes",
84+
"zh": "代码变更时，自动重新运行相关测试"
85+
},
86+
"testCommandCoverage": {
87+
"en": "Collect coverage locally or run once in CI",
88+
"zh": "支持覆盖率收集和适用于 CI 的单次运行"
89+
},
90+
"checkCommandTitle": {
91+
"en": "Consistent code. One command",
92+
"zh": "一个命令，保持代码一致"
93+
},
94+
"checkCommandDesc": {
95+
"en": "Run lint and formatting checks together, with optional TypeScript type checking. Keep your existing code style with support for Prettier options and plugins.",
96+
"zh": "一次完成代码检查与格式校验，按需启用 TypeScript 类型检查。兼容 Prettier 的格式化选项与插件，延续现有代码风格。"
97+
},
98+
"checkCommandTypes": {
99+
"en": "Type-aware linting, with optional type checking",
100+
"zh": "支持类型感知的代码检查，按需启用类型检查"
101+
},
102+
"checkCommandFormat": {
103+
"en": "Parallel formatting with a persistent cache",
104+
"zh": "并行格式化与持久化缓存，加速重复运行"
105+
},
106+
"checkCommandFix": {
107+
"en": "Apply lint and formatting fixes with rs check --fix",
108+
"zh": "通过 rs check --fix 自动修复代码与格式问题"
109+
},
110+
"hooksCommandTitle": {
111+
"en": "Better code in every commit",
112+
"zh": "让每次提交，都经过检查"
113+
},
114+
"hooksCommandDesc": {
115+
"en": "Automatically check and format staged files before committing. Reuse lint-staged task configuration and migrate your existing Git Hooks workflow from Husky.",
116+
"zh": "在提交前自动检查和格式化暂存文件。支持 lint-staged 的任务配置，可从 Husky 迁移现有 Git Hooks 工作流。"
117+
},
118+
"hooksCommandSetup": {
119+
"en": "Manage Git hooks for the whole repository",
120+
"zh": "统一管理整个仓库的 Git Hooks"
121+
},
122+
"hooksCommandStaged": {
123+
"en": "Run checks on staged files before committing",
124+
"zh": "提交前，针对暂存文件运行检查"
125+
},
126+
"hooksCommandTasks": {
127+
"en": "Configure lint, format, and custom tasks by file pattern",
128+
"zh": "按文件模式配置检查、格式化及自定义任务"
129+
},
130+
"docCommandTitle": {
131+
"en": "Great docs, built right in",
132+
"zh": "让文档，融入开发流程"
133+
},
134+
"docCommandDesc": {
135+
"en": "Turn your content into a documentation site with Rspress. Keep your docs alongside your code, with one configuration for the whole workflow.",
136+
"zh": "使用 Rspress 将内容构建为文档站点。让文档与代码一同维护，通过统一配置串联完整工作流。"
137+
},
138+
"docCommandMarkdown": {
139+
"en": "Write in Markdown and add React components with MDX",
140+
"zh": "使用 Markdown 编写文档，通过 MDX 嵌入 React 组件"
141+
},
142+
"docCommandFeatures": {
143+
"en": "Built-in search and multilingual documentation",
144+
"zh": "内置全文搜索，支持多语言文档"
145+
},
146+
"docCommandWorkflow": {
147+
"en": "Develop, build, and preview with one CLI",
148+
"zh": "通过统一命令行完成开发、构建与预览"
61149
},
62150
"guide": {
63151
"en": "Guide",

‎website/theme/components/Commands.module.scss‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
.commands {
2+
--command-title: #111214;
3+
--command-text: #727272;
4+
--command-border: #e8e8e8;
5+
6+
max-width: 72rem;
7+
margin: 0 auto;
8+
padding: 0 2rem;
9+
}
10+
11+
:global(.dark) .commands {
12+
--command-title: #f5f5f5;
13+
--command-text: #9a9a9a;
14+
--command-border: #292929;
15+
}
16+
17+
.section {
18+
display: grid;
19+
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
20+
align-items: center;
21+
gap: clamp(2.5rem, 6vw, 5.5rem);
22+
padding: 5.5rem 0;
23+
border-top: 1px solid var(--command-border);
24+
}
25+
26+
.copy {
27+
min-width: 0;
28+
29+
h2 {
30+
margin: 0;
31+
color: var(--command-title);
32+
font-size: clamp(1.75rem, 2.8vw, 2.25rem);
33+
font-weight: 600;
34+
line-height: 1.2;
35+
letter-spacing: -0.04em;
36+
text-wrap: balance;
37+
}
38+
}
39+
40+
.eyebrow {
41+
display: flex;
42+
flex-wrap: wrap;
43+
align-items: center;
44+
gap: 0.5rem 0.75rem;
45+
margin: 0 0 1.25rem;
46+
color: var(--command-text);
47+
font-family: var(--rp-font-family-mono);
48+
font-size: 0.8125rem;
49+
50+
a {
51+
color: inherit;
52+
white-space: nowrap;
53+
text-underline-offset: 0.25em;
54+
55+
&:hover {
56+
color: var(--command-title);
57+
text-decoration: underline;
58+
}
59+
60+
&:focus-visible {
61+
outline: 2px solid var(--rp-c-brand);
62+
outline-offset: 4px;
63+
border-radius: 2px;
64+
}
65+
}
66+
}
67+
68+
.commandLinkGroup {
69+
display: inline-flex;
70+
align-items: center;
71+
gap: 0.75rem;
72+
}
73+
74+
.description {
75+
margin: 1.25rem 0 0;
76+
color: var(--command-text);
77+
font-size: 1rem;
78+
line-height: 1.75;
79+
}
80+
81+
.highlights {
82+
display: grid;
83+
gap: 0.875rem;
84+
margin: 1.75rem 0 0;
85+
padding: 0;
86+
list-style: none;
87+
color: var(--command-title);
88+
font-size: 0.9375rem;
89+
line-height: 1.6;
90+
91+
li {
92+
position: relative;
93+
padding-left: 1rem;
94+
95+
&::before {
96+
content: '';
97+
position: absolute;
98+
top: calc(0.8em - 2px);
99+
left: 0;
100+
width: 4px;
101+
height: 4px;
102+
border-radius: 50%;
103+
background: var(--command-text);
104+
opacity: 0.7;
105+
}
106+
}
107+
}
108+
109+
.terminal {
110+
// Dracula's terminal palette for ANSI 32 / 34 / 35 / 36 / 90.
111+
// rslog's true-color greeting uses its own mint color below.
112+
--terminal-foreground: #f8f8f2;
113+
--terminal-gray: #6272a4;
114+
--terminal-green: #50fa7b;
115+
--terminal-blue: #bd93f9;
116+
--terminal-magenta: #ff79c6;
117+
--terminal-cyan: #8be9fd;
118+
119+
min-width: 0;
120+
margin: 0;
121+
overflow: hidden;
122+
color: var(--terminal-foreground);
123+
border: 1px solid #252830;
124+
border-radius: 0.75rem;
125+
background: #101115;
126+
}
127+
128+
.output {
129+
margin: 0;
130+
padding: 1.75rem;
131+
overflow-x: auto;
132+
font-family: var(--rp-font-family-mono);
133+
font-size: 0.8125rem;
134+
line-height: 1.9;
135+
tab-size: 2;
136+
137+
code {
138+
padding: 0;
139+
font: inherit;
140+
color: inherit;
141+
background: none;
142+
}
143+
144+
&:focus-visible {
145+
outline: 2px solid var(--terminal-blue);
146+
outline-offset: -3px;
147+
}
148+
}
149+
150+
.command {
151+
color: var(--terminal-foreground);
152+
}
153+
154+
.bold,
155+
.tool {
156+
font-weight: 700;
157+
}
158+
159+
.dim {
160+
opacity: 0.65;
161+
}
162+
163+
.success {
164+
color: var(--terminal-green);
165+
}
166+
167+
.tableHeader {
168+
color: var(--terminal-blue);
169+
}
170+
171+
.tool {
172+
color: #84e1c7;
173+
}
174+
175+
.total {
176+
color: var(--terminal-magenta);
177+
}
178+
179+
.muted {
180+
color: var(--terminal-gray);
181+
}
182+
183+
.accent,
184+
.path {
185+
color: var(--terminal-cyan);
186+
}
187+
188+
@media (max-width: 800px) {
189+
.section {
190+
grid-template-columns: minmax(0, 1fr);
191+
gap: 2rem;
192+
padding: 3.5rem 0;
193+
}
194+
}
195+
196+
@media (max-width: 640px) {
197+
.commands {
198+
padding: 0 1.25rem;
199+
}
200+
201+
.output {
202+
padding: 1.25rem;
203+
font-size: 0.75rem;
204+
}
205+
}

0 commit comments

Comments
 (0)