nekomimi.pet
-7
.prettierrc
-7
.prettierrc
+241
-203
public/editor/tabs/CLITab.tsx
+241
-203
public/editor/tabs/CLITab.tsx
···
1
import {
2
-
Card,
3
-
CardContent,
4
-
CardDescription,
5
-
CardHeader,
6
-
CardTitle
7
-
} from '@public/components/ui/card'
8
-
import { Badge } from '@public/components/ui/badge'
9
-
import { ExternalLink } from 'lucide-react'
10
-
import { CodeBlock } from '@public/components/ui/code-block'
11
12
export function CLITab() {
13
-
return (
14
-
<div className="space-y-4 min-h-[400px]">
15
-
<Card>
16
-
<CardHeader>
17
-
<div className="flex items-center gap-2 mb-2">
18
-
<CardTitle>Wisp CLI Tool</CardTitle>
19
-
<Badge variant="secondary" className="text-xs">v0.2.0</Badge>
20
-
<Badge variant="outline" className="text-xs">Alpha</Badge>
21
-
</div>
22
-
<CardDescription>
23
-
Deploy static sites directly from your terminal
24
-
</CardDescription>
25
-
</CardHeader>
26
-
<CardContent className="space-y-6">
27
-
<div className="prose prose-sm max-w-none dark:prose-invert">
28
-
<p className="text-sm text-muted-foreground">
29
-
The Wisp CLI is a command-line tool for deploying static websites directly to your AT Protocol account.
30
-
Authenticate with app password or OAuth and deploy from CI/CD pipelines.
31
-
</p>
32
-
</div>
33
34
-
<div className="space-y-3">
35
-
<h3 className="text-sm font-semibold">Features</h3>
36
-
<ul className="text-sm text-muted-foreground space-y-2 list-disc list-inside">
37
-
<li><strong>Deploy:</strong> Push static sites directly from your terminal</li>
38
-
<li><strong>Pull:</strong> Download sites from the PDS for development or backup</li>
39
-
<li><strong>Serve:</strong> Run a local server with real-time firehose updates</li>
40
-
</ul>
41
-
</div>
42
43
-
<div className="space-y-3">
44
-
<h3 className="text-sm font-semibold">Download v0.2.0</h3>
45
-
<div className="grid gap-2">
46
-
<div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
47
-
<a
48
-
href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-aarch64-darwin"
49
-
target="_blank"
50
-
rel="noopener noreferrer"
51
-
className="flex items-center justify-between mb-2"
52
-
>
53
-
<span className="font-mono text-sm">macOS (Apple Silicon)</span>
54
-
<ExternalLink className="w-4 h-4 text-muted-foreground" />
55
-
</a>
56
-
<div className="text-xs text-muted-foreground">
57
-
<span className="font-mono">SHA-1: a8c27ea41c5e2672bfecb3476ece1c801741d759</span>
58
-
</div>
59
-
</div>
60
-
<div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
61
-
<a
62
-
href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-aarch64-linux"
63
-
target="_blank"
64
-
rel="noopener noreferrer"
65
-
className="flex items-center justify-between mb-2"
66
-
>
67
-
<span className="font-mono text-sm">Linux (ARM64)</span>
68
-
<ExternalLink className="w-4 h-4 text-muted-foreground" />
69
-
</a>
70
-
<div className="text-xs text-muted-foreground">
71
-
<span className="font-mono">SHA-1: fd7ee689c7600fc953179ea755b0357c8481a622</span>
72
-
</div>
73
-
</div>
74
-
<div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
75
-
<a
76
-
href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-linux"
77
-
target="_blank"
78
-
rel="noopener noreferrer"
79
-
className="flex items-center justify-between mb-2"
80
-
>
81
-
<span className="font-mono text-sm">Linux (x86_64)</span>
82
-
<ExternalLink className="w-4 h-4 text-muted-foreground" />
83
-
</a>
84
-
<div className="text-xs text-muted-foreground">
85
-
<span className="font-mono">SHA-1: 8bca6992559e19e1d29ab3d2fcc6d09b28e5a485</span>
86
-
</div>
87
-
</div>
88
-
<div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
89
-
<a
90
-
href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-windows.exe"
91
-
target="_blank"
92
-
rel="noopener noreferrer"
93
-
className="flex items-center justify-between mb-2"
94
-
>
95
-
<span className="font-mono text-sm">Windows (x86_64)</span>
96
-
<ExternalLink className="w-4 h-4 text-muted-foreground" />
97
-
</a>
98
-
<div className="text-xs text-muted-foreground">
99
-
<span className="font-mono">SHA-1: 90ea3987a06597fa6c42e1df9009e9758e92dd54</span>
100
-
</div>
101
-
</div>
102
-
</div>
103
-
</div>
104
105
-
<div className="space-y-3">
106
-
<h3 className="text-sm font-semibold">Deploy a Site</h3>
107
-
<CodeBlock
108
-
code={`# Download and make executable
109
curl -O https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-aarch64-darwin
110
chmod +x wisp-cli-aarch64-darwin
111
···
117
118
# Your site will be available at:
119
# https://sites.wisp.place/your-handle/my-site`}
120
-
language="bash"
121
-
/>
122
-
</div>
123
124
-
<div className="space-y-3">
125
-
<h3 className="text-sm font-semibold">Pull a Site from PDS</h3>
126
-
<p className="text-xs text-muted-foreground">
127
-
Download a site from the PDS to your local machine (uses OAuth authentication):
128
-
</p>
129
-
<CodeBlock
130
-
code={`# Pull a site to a specific directory
131
wisp-cli pull your-handle.bsky.social \\
132
--site my-site \\
133
--output ./my-site
···
137
--site my-site
138
139
# Opens browser for OAuth authentication on first run`}
140
-
language="bash"
141
-
/>
142
-
</div>
143
144
-
<div className="space-y-3">
145
-
<h3 className="text-sm font-semibold">Serve a Site Locally with Real-Time Updates</h3>
146
-
<p className="text-xs text-muted-foreground">
147
-
Run a local server that monitors the firehose for real-time updates (uses OAuth authentication):
148
-
</p>
149
-
<CodeBlock
150
-
code={`# Serve on http://localhost:8080 (default)
151
wisp-cli serve your-handle.bsky.social \\
152
--site my-site
153
···
157
--port 3000
158
159
# Downloads site, serves it, and watches firehose for live updates!`}
160
-
language="bash"
161
-
/>
162
-
</div>
163
164
-
<div className="space-y-3">
165
-
<h3 className="text-sm font-semibold">CI/CD with Tangled Spindle</h3>
166
-
<p className="text-xs text-muted-foreground">
167
-
Deploy automatically on every push using{' '}
168
-
<a
169
-
href="https://blog.tangled.org/ci"
170
-
target="_blank"
171
-
rel="noopener noreferrer"
172
-
className="text-accent hover:underline"
173
-
>
174
-
Tangled Spindle
175
-
</a>
176
-
</p>
177
178
-
<div className="space-y-4">
179
-
<div>
180
-
<h4 className="text-xs font-semibold mb-2 flex items-center gap-2">
181
-
<span>Example 1: Simple Asset Publishing</span>
182
-
<Badge variant="secondary" className="text-xs">Copy Files</Badge>
183
-
</h4>
184
-
<CodeBlock
185
-
code={`when:
186
- event: ['push']
187
branch: ['main']
188
- event: ['manual']
···
221
#Deployed site 'myWebbedSite': at://did:plc:ttdrpj45ibqunmfhdsb4zdwq/place.wisp.fs/myWebbedSite
222
#Available at: https://sites.wisp.place/did:plc:ttdrpj45ibqunmfhdsb4zdwq/myWebbedSite
223
`}
224
-
language="yaml"
225
-
/>
226
-
</div>
227
228
-
<div>
229
-
<h4 className="text-xs font-semibold mb-2 flex items-center gap-2">
230
-
<span>Example 2: React/Vite Build & Deploy</span>
231
-
<Badge variant="secondary" className="text-xs">Full Build</Badge>
232
-
</h4>
233
-
<CodeBlock
234
-
code={`when:
235
- event: ['push']
236
branch: ['main']
237
- event: ['manual']
···
279
--path "$SITE_PATH" \\
280
--site "$SITE_NAME" \\
281
--password "$WISP_APP_PASSWORD"`}
282
-
language="yaml"
283
-
/>
284
-
</div>
285
-
</div>
286
287
-
<div className="p-3 bg-muted/30 rounded-lg border-l-4 border-accent">
288
-
<p className="text-xs text-muted-foreground">
289
-
<strong className="text-foreground">Note:</strong> Set <code className="px-1.5 py-0.5 bg-background rounded text-xs">WISP_APP_PASSWORD</code> as a secret in your Tangled Spindle repository settings.
290
-
Generate an app password from your AT Protocol account settings.
291
-
</p>
292
-
</div>
293
-
</div>
294
295
-
<div className="space-y-3">
296
-
<h3 className="text-sm font-semibold">Learn More</h3>
297
-
<div className="grid gap-2">
298
-
<a
299
-
href="https://docs.wisp.place/cli"
300
-
target="_blank"
301
-
rel="noopener noreferrer"
302
-
className="flex items-center justify-between p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border"
303
-
>
304
-
<span className="text-sm">CLI Documentation</span>
305
-
<ExternalLink className="w-4 h-4 text-muted-foreground" />
306
-
</a>
307
-
<a
308
-
href="https://tangled.org/@nekomimi.pet/wisp.place-monorepo/tree/main/cli"
309
-
target="_blank"
310
-
rel="noopener noreferrer"
311
-
className="flex items-center justify-between p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border"
312
-
>
313
-
<span className="text-sm">Source Code</span>
314
-
<ExternalLink className="w-4 h-4 text-muted-foreground" />
315
-
</a>
316
-
<a
317
-
href="https://blog.tangled.org/ci"
318
-
target="_blank"
319
-
rel="noopener noreferrer"
320
-
className="flex items-center justify-between p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border"
321
-
>
322
-
<span className="text-sm">Tangled Spindle CI/CD</span>
323
-
<ExternalLink className="w-4 h-4 text-muted-foreground" />
324
-
</a>
325
-
</div>
326
-
</div>
327
-
</CardContent>
328
-
</Card>
329
-
</div>
330
-
)
331
}
···
1
import {
2
+
Card,
3
+
CardContent,
4
+
CardDescription,
5
+
CardHeader,
6
+
CardTitle,
7
+
} from "@public/components/ui/card";
8
+
import { Badge } from "@public/components/ui/badge";
9
+
import { ExternalLink } from "lucide-react";
10
+
import { CodeBlock } from "@public/components/ui/code-block";
11
12
export function CLITab() {
13
+
return (
14
+
<div className="space-y-4 min-h-[400px]">
15
+
<Card>
16
+
<CardHeader>
17
+
<div className="flex items-center gap-2 mb-2">
18
+
<CardTitle>Wisp CLI Tool</CardTitle>
19
+
<Badge variant="secondary" className="text-xs">
20
+
v0.2.0
21
+
</Badge>
22
+
<Badge variant="outline" className="text-xs">
23
+
Alpha
24
+
</Badge>
25
+
</div>
26
+
<CardDescription>
27
+
Deploy static sites directly from your terminal
28
+
</CardDescription>
29
+
</CardHeader>
30
+
<CardContent className="space-y-6">
31
+
<div className="prose prose-sm max-w-none dark:prose-invert">
32
+
<p className="text-sm text-muted-foreground">
33
+
The Wisp CLI is a command-line tool for deploying static websites
34
+
directly to your AT Protocol account. Authenticate with app
35
+
password or OAuth and deploy from CI/CD pipelines.
36
+
</p>
37
+
</div>
38
39
+
<div className="space-y-3">
40
+
<h3 className="text-sm font-semibold">Features</h3>
41
+
<ul className="text-sm text-muted-foreground space-y-2 list-disc list-inside">
42
+
<li>
43
+
<strong>Deploy:</strong> Push static sites directly from your
44
+
terminal
45
+
</li>
46
+
<li>
47
+
<strong>Pull:</strong> Download sites from the PDS for
48
+
development or backup
49
+
</li>
50
+
<li>
51
+
<strong>Serve:</strong> Run a local server with real-time
52
+
firehose updates
53
+
</li>
54
+
</ul>
55
+
</div>
56
57
+
<div className="space-y-3">
58
+
<h3 className="text-sm font-semibold">Download v0.2.0</h3>
59
+
<div className="grid gap-2">
60
+
<div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
61
+
<a
62
+
href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-aarch64-darwin"
63
+
target="_blank"
64
+
rel="noopener noreferrer"
65
+
className="flex items-center justify-between mb-2"
66
+
>
67
+
<span className="font-mono text-sm">
68
+
macOS (Apple Silicon)
69
+
</span>
70
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
71
+
</a>
72
+
<div className="text-xs text-muted-foreground">
73
+
<span className="font-mono">
74
+
SHA-1: 9281454860f2eb07b39b80f7a9cc8e9bdcff491b
75
+
</span>
76
+
</div>
77
+
</div>
78
+
<div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
79
+
<a
80
+
href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-aarch64-linux"
81
+
target="_blank"
82
+
rel="noopener noreferrer"
83
+
className="flex items-center justify-between mb-2"
84
+
>
85
+
<span className="font-mono text-sm">Linux (ARM64)</span>
86
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
87
+
</a>
88
+
<div className="text-xs text-muted-foreground">
89
+
<span className="font-mono">
90
+
SHA-1: d460863150c4c162b7e7e3801a67746da3aaf9d9
91
+
</span>
92
+
</div>
93
+
</div>
94
+
<div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
95
+
<a
96
+
href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-linux"
97
+
target="_blank"
98
+
rel="noopener noreferrer"
99
+
className="flex items-center justify-between mb-2"
100
+
>
101
+
<span className="font-mono text-sm">Linux (x86_64)</span>
102
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
103
+
</a>
104
+
<div className="text-xs text-muted-foreground">
105
+
<span className="font-mono">
106
+
SHA-1: 94968abed20422df826b78c38cb506dd4b1b5885
107
+
</span>
108
+
</div>
109
+
</div>
110
+
<div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
111
+
<a
112
+
href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-windows.exe"
113
+
target="_blank"
114
+
rel="noopener noreferrer"
115
+
className="flex items-center justify-between mb-2"
116
+
>
117
+
<span className="font-mono text-sm">Windows (x86_64)</span>
118
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
119
+
</a>
120
+
<div className="text-xs text-muted-foreground">
121
+
<span className="font-mono">
122
+
SHA-1: 45293e47da38b97ef35258a08cb2682eee64a659
123
+
</span>
124
+
</div>
125
+
</div>
126
+
</div>
127
+
</div>
128
129
+
<div className="space-y-3">
130
+
<h3 className="text-sm font-semibold">Deploy a Site</h3>
131
+
<CodeBlock
132
+
code={`# Download and make executable
133
curl -O https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-aarch64-darwin
134
chmod +x wisp-cli-aarch64-darwin
135
···
141
142
# Your site will be available at:
143
# https://sites.wisp.place/your-handle/my-site`}
144
+
language="bash"
145
+
/>
146
+
</div>
147
148
+
<div className="space-y-3">
149
+
<h3 className="text-sm font-semibold">Pull a Site from PDS</h3>
150
+
<p className="text-xs text-muted-foreground">
151
+
Download a site from the PDS to your local machine (uses OAuth
152
+
authentication):
153
+
</p>
154
+
<CodeBlock
155
+
code={`# Pull a site to a specific directory
156
wisp-cli pull your-handle.bsky.social \\
157
--site my-site \\
158
--output ./my-site
···
162
--site my-site
163
164
# Opens browser for OAuth authentication on first run`}
165
+
language="bash"
166
+
/>
167
+
</div>
168
169
+
<div className="space-y-3">
170
+
<h3 className="text-sm font-semibold">
171
+
Serve a Site Locally with Real-Time Updates
172
+
</h3>
173
+
<p className="text-xs text-muted-foreground">
174
+
Run a local server that monitors the firehose for real-time
175
+
updates (uses OAuth authentication):
176
+
</p>
177
+
<CodeBlock
178
+
code={`# Serve on http://localhost:8080 (default)
179
wisp-cli serve your-handle.bsky.social \\
180
--site my-site
181
···
185
--port 3000
186
187
# Downloads site, serves it, and watches firehose for live updates!`}
188
+
language="bash"
189
+
/>
190
+
</div>
191
192
+
<div className="space-y-3">
193
+
<h3 className="text-sm font-semibold">
194
+
CI/CD with Tangled Spindle
195
+
</h3>
196
+
<p className="text-xs text-muted-foreground">
197
+
Deploy automatically on every push using{" "}
198
+
<a
199
+
href="https://blog.tangled.org/ci"
200
+
target="_blank"
201
+
rel="noopener noreferrer"
202
+
className="text-accent hover:underline"
203
+
>
204
+
Tangled Spindle
205
+
</a>
206
+
</p>
207
208
+
<div className="space-y-4">
209
+
<div>
210
+
<h4 className="text-xs font-semibold mb-2 flex items-center gap-2">
211
+
<span>Example 1: Simple Asset Publishing</span>
212
+
<Badge variant="secondary" className="text-xs">
213
+
Copy Files
214
+
</Badge>
215
+
</h4>
216
+
<CodeBlock
217
+
code={`when:
218
- event: ['push']
219
branch: ['main']
220
- event: ['manual']
···
253
#Deployed site 'myWebbedSite': at://did:plc:ttdrpj45ibqunmfhdsb4zdwq/place.wisp.fs/myWebbedSite
254
#Available at: https://sites.wisp.place/did:plc:ttdrpj45ibqunmfhdsb4zdwq/myWebbedSite
255
`}
256
+
language="yaml"
257
+
/>
258
+
</div>
259
260
+
<div>
261
+
<h4 className="text-xs font-semibold mb-2 flex items-center gap-2">
262
+
<span>Example 2: React/Vite Build & Deploy</span>
263
+
<Badge variant="secondary" className="text-xs">
264
+
Full Build
265
+
</Badge>
266
+
</h4>
267
+
<CodeBlock
268
+
code={`when:
269
- event: ['push']
270
branch: ['main']
271
- event: ['manual']
···
313
--path "$SITE_PATH" \\
314
--site "$SITE_NAME" \\
315
--password "$WISP_APP_PASSWORD"`}
316
+
language="yaml"
317
+
/>
318
+
</div>
319
+
</div>
320
321
+
<div className="p-3 bg-muted/30 rounded-lg border-l-4 border-accent">
322
+
<p className="text-xs text-muted-foreground">
323
+
<strong className="text-foreground">Note:</strong> Set{" "}
324
+
<code className="px-1.5 py-0.5 bg-background rounded text-xs">
325
+
WISP_APP_PASSWORD
326
+
</code>{" "}
327
+
as a secret in your Tangled Spindle repository settings.
328
+
Generate an app password from your AT Protocol account settings.
329
+
</p>
330
+
</div>
331
+
</div>
332
333
+
<div className="space-y-3">
334
+
<h3 className="text-sm font-semibold">Learn More</h3>
335
+
<div className="grid gap-2">
336
+
<a
337
+
href="https://docs.wisp.place/cli"
338
+
target="_blank"
339
+
rel="noopener noreferrer"
340
+
className="flex items-center justify-between p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border"
341
+
>
342
+
<span className="text-sm">CLI Documentation</span>
343
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
344
+
</a>
345
+
<a
346
+
href="https://tangled.org/@nekomimi.pet/wisp.place-monorepo/tree/main/cli"
347
+
target="_blank"
348
+
rel="noopener noreferrer"
349
+
className="flex items-center justify-between p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border"
350
+
>
351
+
<span className="text-sm">Source Code</span>
352
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
353
+
</a>
354
+
<a
355
+
href="https://blog.tangled.org/ci"
356
+
target="_blank"
357
+
rel="noopener noreferrer"
358
+
className="flex items-center justify-between p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border"
359
+
>
360
+
<span className="text-sm">Tangled Spindle CI/CD</span>
361
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
362
+
</a>
363
+
</div>
364
+
</div>
365
+
</CardContent>
366
+
</Card>
367
+
</div>
368
+
);
369
}