swadhin / opencodehub public

✨ feat: update cli.astro page

swadhinbiswas committed 3 months ago
76746f9
1 parent 627260e
commit 76746f9
1 file changed
+200 -227
Showing 1 changed file+200-227
src/pages/cli.astro
▼src/pages/cli.astro
+200-227
@@ -7,286 +7,259 @@ import {
7
7
Share2,
8
8
Layers,
9
9
CheckCircle2,
10
+ GitPullRequest,
11
+ Bug,
12
+ Shield,
13
+ Zap,
14
+ Search,
15
+ Settings,
10
16
} from "lucide-react";
11
17
12
-const commands = [
18
+const commandGroups = [
13
19
{
14
- cmd: "och init",
15
- desc: "Initialize OpenCodeHub in your repository",
20
+ title: "Authentication",
21
+ icon: Shield,
22
+ color: "text-green-500",
23
+ bg: "bg-green-500/10",
24
+ commands: [
25
+ { cmd: "och auth login --url <server>", desc: "Login to OpenCodeHub" },
26
+ { cmd: "och auth status", desc: "Check authentication status" },
27
+ { cmd: "och auth logout", desc: "Logout from server" },
28
+ ],
16
29
},
17
30
{
18
- cmd: "och auth login",
19
- desc: "Authenticate with your OpenCodeHub instance",
31
+ title: "Repositories",
32
+ icon: GitBranch,
33
+ color: "text-blue-500",
34
+ bg: "bg-blue-500/10",
35
+ commands: [
36
+ { cmd: "och repo create <name>", desc: "Create a new repository" },
37
+ { cmd: "och repo clone <owner/repo>", desc: "Clone a repository" },
38
+ { cmd: "och repo push --branch main", desc: "Push to OpenCodeHub" },
39
+ { cmd: "och repo list", desc: "List your repositories" },
40
+ ],
20
41
},
21
42
{
22
- cmd: "och stack create <name>",
23
- desc: "Create a new stacked branch",
43
+ title: "Pull Requests",
44
+ icon: GitPullRequest,
45
+ color: "text-purple-500",
46
+ bg: "bg-purple-500/10",
47
+ commands: [
48
+ { cmd: "och pr create --title \"feat: X\"", desc: "Create a pull request" },
49
+ { cmd: "och pr list --state open", desc: "List pull requests" },
50
+ { cmd: "och pr checkout <number>", desc: "Checkout a PR locally" },
51
+ { cmd: "och pr merge <number>", desc: "Merge a pull request" },
52
+ ],
24
53
},
25
54
{
26
- cmd: "och stack submit",
27
- desc: "Push changes and create/update PRs",
55
+ title: "Stacked PRs",
56
+ icon: Layers,
57
+ color: "text-primary",
58
+ bg: "bg-primary/10",
59
+ commands: [
60
+ { cmd: "och stack create <branch>", desc: "Create stacked branch" },
61
+ { cmd: "och stack submit", desc: "Push & create/update PRs" },
62
+ { cmd: "och stack sync", desc: "Rebase stack on main" },
63
+ { cmd: "och stack log", desc: "Visualize stack tree" },
64
+ ],
28
65
},
29
66
{
30
- cmd: "och stack sync",
31
- desc: "Rebase stack on latest main",
67
+ title: "Issues",
68
+ icon: Bug,
69
+ color: "text-yellow-500",
70
+ bg: "bg-yellow-500/10",
71
+ commands: [
72
+ { cmd: "och issue create --title \"Bug: X\"", desc: "Create an issue" },
73
+ { cmd: "och issue list --state open", desc: "List issues" },
74
+ { cmd: "och issue close <number>", desc: "Close an issue" },
75
+ ],
32
76
},
33
77
{
34
- cmd: "och status",
35
- desc: "View current stack visualization",
78
+ title: "CI/CD & Merge Queue",
79
+ icon: Zap,
80
+ color: "text-cyan-500",
81
+ bg: "bg-cyan-500/10",
82
+ commands: [
83
+ { cmd: "och ci list", desc: "List pipeline runs" },
84
+ { cmd: "och queue add <pr-number>", desc: "Add PR to merge queue" },
85
+ { cmd: "och queue list", desc: "View merge queue" },
86
+ ],
87
+ },
88
+ {
89
+ title: "Search & Config",
90
+ icon: Search,
91
+ color: "text-orange-500",
92
+ bg: "bg-orange-500/10",
93
+ commands: [
94
+ { cmd: "och search repos \"query\"", desc: "Search repositories" },
95
+ { cmd: "och config list", desc: "Show CLI configuration" },
96
+ { cmd: "och config set serverUrl <url>", desc: "Set server URL" },
97
+ ],
36
98
},
37
99
];
100
+
101
+const quickStart = [
102
+ { step: 1, title: "Install", code: "npm install -g opencodehub-cli" },
103
+ { step: 2, title: "Login", code: "och auth login --url http://your-server:3000" },
104
+ { step: 3, title: "Create Repo", code: "och repo create my-project --description \"My project\"" },
105
+ { step: 4, title: "Push Code", code: "och repo push --branch main" },
106
+];
38
107
---
39
108
40
-<BaseLayout title="OpenCodeHub CLI - Stack-First Workflows">
109
+<BaseLayout title="OpenCodeHub CLI - Command Line Interface">
41
110
<div class="relative overflow-hidden">
42
111
<!-- Hero Section -->
43
- <section class="container pt-24 pb-20 text-center relative z-10">
44
- <div
45
- class="inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm font-medium text-primary mb-8 animate-in fade-in slide-in-from-bottom-4 duration-500"
46
- >
112
+ <section class="container pt-24 pb-16 text-center relative z-10">
113
+ <div class="inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm font-medium text-primary mb-8">
47
114
<Terminal className="mr-2 h-4 w-4" />
48
- Now Available v1.0
115
+ CLI v1.0
49
116
</div>
50
117
51
- <h1
52
- class="mx-auto max-w-4xl text-5xl font-bold tracking-tight text-foreground sm:text-7xl mb-8 animate-in fade-in slide-in-from-bottom-5 duration-700 delay-100"
53
- >
54
- Master your workflow with <span
55
- class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-400"
56
- >OCH CLI</span
57
- >
118
+ <h1 class="mx-auto max-w-4xl text-4xl font-bold tracking-tight text-foreground sm:text-5xl mb-6">
119
+ OpenCodeHub <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-400">CLI</span>
58
120
</h1>
59
121
60
- <p
61
- class="mx-auto max-w-2xl text-lg text-muted-foreground mb-12 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-200"
62
- >
63
- The command-line interface for OpenCodeHub. Manage stacked PRs,
64
- sync branches, and streamline your code review process directly
65
- from your terminal.
122
+ <p class="mx-auto max-w-2xl text-lg text-muted-foreground mb-8">
123
+ Manage repositories, pull requests, stacked PRs, and more from your terminal.
124
+ A GitHub CLI-like experience for OpenCodeHub.
66
125
</p>
67
126
68
- <div
69
- class="flex flex-col sm:flex-row items-center justify-center gap-4 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-300"
70
- >
71
- <div
72
- class="flex items-center gap-3 rounded-lg border bg-card px-4 py-3 font-mono text-sm text-foreground shadow-sm"
73
- >
127
+ <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
128
+ <div class="flex items-center gap-3 rounded-lg border bg-card px-4 py-3 font-mono text-sm text-foreground shadow-sm">
74
129
<span class="text-primary">$</span>
75
- npm install -g opencodehub-cli
130
+ <span id="install-cmd">npm install -g opencodehub-cli</span>
76
131
<button
77
- class="ml-4 rounded-md p-1.5 hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
132
+ class="ml-2 rounded-md p-1.5 hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
78
133
onclick="navigator.clipboard.writeText('npm install -g opencodehub-cli')"
79
- title="Copy to clipboard"
134
+ title="Copy"
80
135
>
81
- <svg
82
- xmlns="http://www.w3.org/2000/svg"
83
- width="14"
84
- height="14"
85
- viewBox="0 0 24 24"
86
- fill="none"
87
- stroke="currentColor"
88
- stroke-width="2"
89
- stroke-linecap="round"
90
- stroke-linejoin="round"
91
- ><rect
92
- width="14"
93
- height="14"
94
- x="8"
95
- y="8"
96
- rx="2"
97
- ry="2"></rect><path
98
- d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
99
- ></path></svg
100
- >
136
+ <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
101
137
</button>
102
138
</div>
103
- <a
104
- href="#docs"
105
- class="text-sm font-medium text-primary hover:underline underline-offset-4"
106
- >
107
- Read the docs →
108
- </a>
109
139
</div>
110
140
</section>
111
-
112
- <!-- Background Gradients -->
113
- <div class="absolute top-0 -z-10 h-full w-full bg-background">
114
- <div
115
- class="absolute top-[-10%] right-[-5%] h-[500px] w-[500px] rounded-full bg-primary/5 blur-[100px]"
116
- >
117
- </div>
118
- <div
119
- class="absolute bottom-[-10%] left-[-5%] h-[500px] w-[500px] rounded-full bg-purple-500/5 blur-[100px]"
120
- >
121
- </div>
122
- </div>
123
141
</div>
124
142
125
- <!-- Features Grid -->
126
- <section class="container py-20 border-t border-border/40">
127
- <div class="grid md:grid-cols-3 gap-8">
128
- <div class="bg-card/50 border rounded-xl p-6 backdrop-blur-sm">
129
- <div
130
- class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-4"
131
- >
132
- <Layers className="h-6 w-6" />
133
- </div>
134
- <h3 class="text-xl font-semibold mb-2">Stacked PRs</h3>
135
- <p class="text-muted-foreground">
136
- Create and manage dependent branches easily. `och stack
137
- create` handles parent linking automatically.
138
- </p>
139
- </div>
140
- <div class="bg-card/50 border rounded-xl p-6 backdrop-blur-sm">
141
- <div
142
- class="h-12 w-12 rounded-lg bg-purple-500/10 flex items-center justify-center text-purple-400 mb-4"
143
- >
144
- <Share2 className="h-6 w-6" />
145
- </div>
146
- <h3 class="text-xl font-semibold mb-2">One-Command Sync</h3>
147
- <p class="text-muted-foreground">
148
- `och stack submit` pushes your entire stack and updates all
149
- PRs in the chain at once.
150
- </p>
151
- </div>
152
- <div class="bg-card/50 border rounded-xl p-6 backdrop-blur-sm">
153
- <div
154
- class="h-12 w-12 rounded-lg bg-blue-500/10 flex items-center justify-center text-blue-400 mb-4"
155
- >
156
- <GitBranch className="h-6 w-6" />
143
+ <!-- Quick Start -->
144
+ <section class="container py-12 border-t border-border/40">
145
+ <h2 class="text-2xl font-bold mb-8 text-center">Quick Start</h2>
146
+ <div class="grid md:grid-cols-4 gap-6">
147
+ {quickStart.map((item) => (
148
+ <div class="relative bg-card border rounded-xl p-5">
149
+ <div class="absolute -top-3 -left-1 h-7 w-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-bold">
150
+ {item.step}
151
+ </div>
152
+ <h3 class="font-semibold text-foreground mb-2 mt-1">{item.title}</h3>
153
+ <code class="text-xs font-mono text-muted-foreground bg-muted px-2 py-1 rounded block break-all">
154
+ {item.code}
155
+ </code>
157
156
</div>
158
- <h3 class="text-xl font-semibold mb-2">Smart Rebase</h3>
159
- <p class="text-muted-foreground">
160
- Rebase your whole stack onto main with `och stack sync`.
161
- Conflicts are detected and handled gracefully.
162
- </p>
163
- </div>
157
+ ))}
164
158
</div>
165
159
</section>
166
160
167
- <!-- Commands Section -->
168
- <section id="docs" class="container py-20">
169
- <div class="grid lg:grid-cols-2 gap-16 items-start">
170
- <div>
171
- <h2 class="text-3xl font-bold mb-6">Quick Start Guide</h2>
172
- <div
173
- class="space-y-8 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-border before:to-transparent"
174
- >
175
- <div class="relative flex items-start group">
176
- <div
177
- class="absolute left-0 ml-5 -translate-x-1/2 rounded-full border border-border bg-background p-1"
178
- >
179
- <div class="h-2 w-2 rounded-full bg-primary"></div>
180
- </div>
181
- <div class="ml-12">
182
- <h3 class="text-lg font-semibold mb-2">
183
- 1. Installation
184
- </h3>
185
- <div
186
- class="rounded-md bg-muted px-4 py-2 font-mono text-sm border border-border"
187
- >
188
- npm install -g opencodehub-cli
189
- </div>
161
+ <!-- Command Groups -->
162
+ <section class="container py-12">
163
+ <h2 class="text-2xl font-bold mb-8 text-center">Commands</h2>
164
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
165
+ {commandGroups.map((group) => (
166
+ <div class="bg-card border rounded-xl p-5 hover:border-primary/30 transition-colors">
167
+ <div class="flex items-center gap-3 mb-4">
168
+ <div class={`h-10 w-10 rounded-lg ${group.bg} flex items-center justify-center ${group.color}`}>
169
+ <group.icon className="h-5 w-5" />
190
170
</div>
171
+ <h3 class="font-semibold text-foreground">{group.title}</h3>
191
172
</div>
192
-
193
- <div class="relative flex items-start group">
194
- <div
195
- class="absolute left-0 ml-5 -translate-x-1/2 rounded-full border border-border bg-background p-1"
196
- >
197
- <div class="h-2 w-2 rounded-full bg-primary"></div>
198
- </div>
199
- <div class="ml-12">
200
- <h3 class="text-lg font-semibold mb-2">
201
- 2. Authentication
202
- </h3>
203
- <p class="text-muted-foreground mb-2 text-sm">
204
- Login with your credentials or a token.
205
- </p>
206
- <div
207
- class="rounded-md bg-muted px-4 py-2 font-mono text-sm border border-border"
208
- >
209
- och auth login
173
+ <div class="space-y-2">
174
+ {group.commands.map((cmd) => (
175
+ <div class="flex items-start gap-2 text-sm">
176
+ <code class="font-mono text-primary bg-primary/10 px-1.5 py-0.5 rounded text-xs whitespace-nowrap">
177
+ {cmd.cmd}
178
+ </code>
179
+ <span class="text-muted-foreground text-xs mt-0.5">{cmd.desc}</span>
210
180
</div>
211
- </div>
181
+ ))}
212
182
</div>
183
+ </div>
184
+ ))}
185
+ </div>
186
+ </section>
213
187
214
- <div class="relative flex items-start group">
215
- <div
216
- class="absolute left-0 ml-5 -translate-x-1/2 rounded-full border border-border bg-background p-1"
217
- >
218
- <div class="h-2 w-2 rounded-full bg-primary"></div>
219
- </div>
220
- <div class="ml-12">
221
- <h3 class="text-lg font-semibold mb-2">
222
- 3. Initialization
223
- </h3>
224
- <p class="text-muted-foreground mb-2 text-sm">
225
- Run this once in your repository.
226
- </p>
227
- <div
228
- class="rounded-md bg-muted px-4 py-2 font-mono text-sm border border-border"
229
- >
230
- och init
231
- </div>
232
- </div>
233
- </div>
188
+ <!-- Common Workflows -->
189
+ <section class="container py-12 border-t border-border/40">
190
+ <h2 class="text-2xl font-bold mb-8 text-center">Common Workflows</h2>
191
+ <div class="grid md:grid-cols-2 gap-8">
192
+ <!-- New Repository -->
193
+ <div class="bg-card border rounded-xl p-6">
194
+ <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
195
+ <GitBranch className="h-5 w-5 text-primary" />
196
+ New Repository
197
+ </h3>
198
+ <div class="rounded-lg bg-muted p-4 font-mono text-sm space-y-1">
199
+ <div><span class="text-green-500">$</span> och auth login --url http://your-server:3000</div>
200
+ <div><span class="text-green-500">$</span> mkdir my-project && cd my-project</div>
201
+ <div><span class="text-green-500">$</span> git init</div>
202
+ <div><span class="text-green-500">$</span> och repo create my-project</div>
203
+ <div><span class="text-green-500">$</span> # Add files, commit, then:</div>
204
+ <div><span class="text-green-500">$</span> och repo push --branch main</div>
205
+ </div>
206
+ </div>
234
207
235
- <div class="relative flex items-start group">
236
- <div
237
- class="absolute left-0 ml-5 -translate-x-1/2 rounded-full border border-border bg-background p-1"
238
- >
239
- <div class="h-2 w-2 rounded-full bg-primary"></div>
240
- </div>
241
- <div class="ml-12">
242
- <h3 class="text-lg font-semibold mb-2">
243
- 4. Start Stacking
244
- </h3>
245
- <p class="text-muted-foreground mb-2 text-sm">
246
- Create specific feature branches.
247
- </p>
248
- <div
249
- class="rounded-md bg-muted px-4 py-2 font-mono text-sm border border-border"
250
- >
251
- och stack create feature-a
252
- </div>
253
- </div>
254
- </div>
208
+ <!-- Stacked PRs -->
209
+ <div class="bg-card border rounded-xl p-6">
210
+ <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
211
+ <Layers className="h-5 w-5 text-purple-500" />
212
+ Stacked PRs
213
+ </h3>
214
+ <div class="rounded-lg bg-muted p-4 font-mono text-sm space-y-1">
215
+ <div><span class="text-green-500">$</span> och stack create feature/part-1</div>
216
+ <div><span class="text-green-500">$</span> # Work on part 1...</div>
217
+ <div><span class="text-green-500">$</span> och stack submit</div>
218
+ <div><span class="text-green-500">$</span> och stack create feature/part-2</div>
219
+ <div><span class="text-green-500">$</span> # Work on part 2...</div>
220
+ <div><span class="text-green-500">$</span> och stack submit</div>
221
+ <div><span class="text-green-500">$</span> och stack log</div>
255
222
</div>
256
223
</div>
257
224
258
- <div>
259
- <h2 class="text-3xl font-bold mb-6">Command Reference</h2>
260
- <div class="rounded-xl border bg-card overflow-hidden">
261
- {
262
- commands.map((item, i) => (
263
- <div
264
- class={`flex flex-col sm:flex-row sm:items-center justify-between p-4 ${i !== commands.length - 1 ? "border-b border-border/50" : ""} hover:bg-muted/50 transition-colors`}
265
- >
266
- <code class="text-sm font-mono text-primary bg-primary/10 px-2 py-1 rounded w-fit mb-2 sm:mb-0">
267
- {item.cmd}
268
- </code>
269
- <span class="text-sm text-muted-foreground text-right">
270
- {item.desc}
271
- </span>
272
- </div>
273
- ))
274
- }
225
+ <!-- Daily Development -->
226
+ <div class="bg-card border rounded-xl p-6">
227
+ <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
228
+ <Zap className="h-5 w-5 text-yellow-500" />
229
+ Daily Development
230
+ </h3>
231
+ <div class="rounded-lg bg-muted p-4 font-mono text-sm space-y-1">
232
+ <div><span class="text-green-500">$</span> och git sync</div>
233
+ <div><span class="text-green-500">$</span> och branch checkout feature-x</div>
234
+ <div><span class="text-green-500">$</span> # Make changes, commit...</div>
235
+ <div><span class="text-green-500">$</span> och git push</div>
236
+ <div><span class="text-green-500">$</span> och pr create --title "feat: X"</div>
275
237
</div>
238
+ </div>
276
239
277
- <div
278
- class="mt-8 p-4 rounded-lg bg-secondary/50 border border-secondary text-sm text-muted-foreground"
279
- >
280
- <p class="flex items-center gap-2">
281
- <CheckCircle2 className="h-4 w-4 text-green-500" />
282
- <span
283
- >Pro Tip: Use <code class="text-foreground"
284
- >och status</code
285
- > frequently to visualize your stack.</span
286
- >
287
- </p>
240
+ <!-- Code Review -->
241
+ <div class="bg-card border rounded-xl p-6">
242
+ <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
243
+ <CheckCircle2 className="h-5 w-5 text-green-500" />
244
+ Code Review
245
+ </h3>
246
+ <div class="rounded-lg bg-muted p-4 font-mono text-sm space-y-1">
247
+ <div><span class="text-green-500">$</span> och pr list</div>
248
+ <div><span class="text-green-500">$</span> och pr checkout 42</div>
249
+ <div><span class="text-green-500">$</span> # Review code locally...</div>
250
+ <div><span class="text-green-500">$</span> och pr merge 42</div>
288
251
</div>
289
252
</div>
290
253
</div>
291
254
</section>
255
+
256
+ <!-- Footer -->
257
+ <section class="container py-12 text-center border-t border-border/40">
258
+ <p class="text-muted-foreground mb-4">
259
+ Run <code class="text-foreground bg-muted px-2 py-1 rounded">och --help</code> for the full command reference.
260
+ </p>
261
+ <p class="text-sm text-muted-foreground">
262
+ <a href="/docs/reference/cli-overview" class="text-primary hover:underline">Full Documentation →</a>
263
+ </p>
264
+ </section>
292
265
</BaseLayout>
293
266