Monorepo for wisp.place. A static site hosting service built on top of the AT Protocol.
wisp.place
nekomimi.pet
1import {
2 Card,
3 CardContent,
4 CardDescription,
5 CardHeader,
6 CardTitle
7} from '@public/components/ui/card'
8import { Badge } from '@public/components/ui/badge'
9import { ExternalLink } from 'lucide-react'
10import { CodeBlock } from '@public/components/ui/code-block'
11
12export 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.1.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">Download CLI</h3>
36 <div className="grid gap-2">
37 <div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
38 <a
39 href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-macos-arm64"
40 target="_blank"
41 rel="noopener noreferrer"
42 className="flex items-center justify-between mb-2"
43 >
44 <span className="font-mono text-sm">macOS (Apple Silicon)</span>
45 <ExternalLink className="w-4 h-4 text-muted-foreground" />
46 </a>
47 <div className="text-xs text-muted-foreground">
48 <span className="font-mono">SHA256: 637e325d9668ca745e01493d80dfc72447ef0a889b313e28913ca65c94c7aaae</span>
49 </div>
50 </div>
51 <div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
52 <a
53 href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-aarch64-linux"
54 target="_blank"
55 rel="noopener noreferrer"
56 className="flex items-center justify-between mb-2"
57 >
58 <span className="font-mono text-sm">Linux (ARM64)</span>
59 <ExternalLink className="w-4 h-4 text-muted-foreground" />
60 </a>
61 <div className="text-xs text-muted-foreground">
62 <span className="font-mono">SHA256: 01561656b64826f95b39f13c65c97da8bcc63ecd9f4d7e4e369c8ba8c903c22a</span>
63 </div>
64 </div>
65 <div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
66 <a
67 href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-linux"
68 target="_blank"
69 rel="noopener noreferrer"
70 className="flex items-center justify-between mb-2"
71 >
72 <span className="font-mono text-sm">Linux (x86_64)</span>
73 <ExternalLink className="w-4 h-4 text-muted-foreground" />
74 </a>
75 <div className="text-xs text-muted-foreground">
76 <span className="font-mono">SHA256: 1ff485b9bcf89bc5721a862863c4843cf4530cbcd2489cf200cb24a44f7865a2</span>
77 </div>
78 </div>
79 </div>
80 </div>
81
82 <div className="space-y-3">
83 <h3 className="text-sm font-semibold">Basic Usage</h3>
84 <CodeBlock
85 code={`# Download and make executable
86curl -O https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-macos-arm64
87chmod +x wisp-cli-macos-arm64
88
89# Deploy your site (will use OAuth)
90./wisp-cli-macos-arm64 your-handle.bsky.social \\
91 --path ./dist \\
92 --site my-site
93
94# Your site will be available at:
95# https://sites.wisp.place/your-handle/my-site`}
96 language="bash"
97 />
98 </div>
99
100 <div className="space-y-3">
101 <h3 className="text-sm font-semibold">CI/CD with Tangled Spindle</h3>
102 <p className="text-xs text-muted-foreground">
103 Deploy automatically on every push using{' '}
104 <a
105 href="https://blog.tangled.org/ci"
106 target="_blank"
107 rel="noopener noreferrer"
108 className="text-accent hover:underline"
109 >
110 Tangled Spindle
111 </a>
112 </p>
113
114 <div className="space-y-4">
115 <div>
116 <h4 className="text-xs font-semibold mb-2 flex items-center gap-2">
117 <span>Example 1: Simple Asset Publishing</span>
118 <Badge variant="secondary" className="text-xs">Copy Files</Badge>
119 </h4>
120 <CodeBlock
121 code={`when:
122 - event: ['push']
123 branch: ['main']
124 - event: ['manual']
125
126engine: 'nixery'
127
128clone:
129 skip: false
130 depth: 1
131
132dependencies:
133 nixpkgs:
134 - coreutils
135 - curl
136
137environment:
138 SITE_PATH: '.' # Copy entire repo
139 SITE_NAME: 'myWebbedSite'
140 WISP_HANDLE: 'your-handle.bsky.social'
141
142steps:
143 - name: deploy assets to wisp
144 command: |
145 # Download Wisp CLI
146 curl https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-linux -o wisp-cli
147 chmod +x wisp-cli
148
149 # Deploy to Wisp
150 ./wisp-cli \\
151 "$WISP_HANDLE" \\
152 --path "$SITE_PATH" \\
153 --site "$SITE_NAME" \\
154 --password "$WISP_APP_PASSWORD"
155
156 # Output
157 #Deployed site 'myWebbedSite': at://did:plc:ttdrpj45ibqunmfhdsb4zdwq/place.wisp.fs/myWebbedSite
158 #Available at: https://sites.wisp.place/did:plc:ttdrpj45ibqunmfhdsb4zdwq/myWebbedSite
159 `}
160 language="yaml"
161 />
162 </div>
163
164 <div>
165 <h4 className="text-xs font-semibold mb-2 flex items-center gap-2">
166 <span>Example 2: React/Vite Build & Deploy</span>
167 <Badge variant="secondary" className="text-xs">Full Build</Badge>
168 </h4>
169 <CodeBlock
170 code={`when:
171 - event: ['push']
172 branch: ['main']
173 - event: ['manual']
174
175engine: 'nixery'
176
177clone:
178 skip: false
179 depth: 1
180 submodules: false
181
182dependencies:
183 nixpkgs:
184 - nodejs
185 - coreutils
186 - curl
187 github:NixOS/nixpkgs/nixpkgs-unstable:
188 - bun
189
190environment:
191 SITE_PATH: 'dist'
192 SITE_NAME: 'my-react-site'
193 WISP_HANDLE: 'your-handle.bsky.social'
194
195steps:
196 - name: build site
197 command: |
198 # necessary to ensure bun is in PATH
199 export PATH="$HOME/.nix-profile/bin:$PATH"
200
201 bun install --frozen-lockfile
202
203 # build with vite, run directly to get around env issues
204 bun node_modules/.bin/vite build
205
206 - name: deploy to wisp
207 command: |
208 # Download Wisp CLI
209 curl https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-linux -o wisp-cli
210 chmod +x wisp-cli
211
212 # Deploy to Wisp
213 ./wisp-cli \\
214 "$WISP_HANDLE" \\
215 --path "$SITE_PATH" \\
216 --site "$SITE_NAME" \\
217 --password "$WISP_APP_PASSWORD"`}
218 language="yaml"
219 />
220 </div>
221 </div>
222
223 <div className="p-3 bg-muted/30 rounded-lg border-l-4 border-accent">
224 <p className="text-xs text-muted-foreground">
225 <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.
226 Generate an app password from your AT Protocol account settings.
227 </p>
228 </div>
229 </div>
230
231 <div className="space-y-3">
232 <h3 className="text-sm font-semibold">Learn More</h3>
233 <div className="grid gap-2">
234 <a
235 href="https://tangled.org/@nekomimi.pet/wisp.place-monorepo/tree/main/cli"
236 target="_blank"
237 rel="noopener noreferrer"
238 className="flex items-center justify-between p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border"
239 >
240 <span className="text-sm">Source Code</span>
241 <ExternalLink className="w-4 h-4 text-muted-foreground" />
242 </a>
243 <a
244 href="https://blog.tangled.org/ci"
245 target="_blank"
246 rel="noopener noreferrer"
247 className="flex items-center justify-between p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border"
248 >
249 <span className="text-sm">Tangled Spindle CI/CD</span>
250 <ExternalLink className="w-4 h-4 text-muted-foreground" />
251 </a>
252 </div>
253 </div>
254 </CardContent>
255 </Card>
256 </div>
257 )
258}