···
+
} from "@public/components/ui/card";
+
import { Badge } from "@public/components/ui/badge";
+
import { ExternalLink } from "lucide-react";
+
import { CodeBlock } from "@public/components/ui/code-block";
export function CLITab() {
+
<div className="space-y-4 min-h-[400px]">
+
<div className="flex items-center gap-2 mb-2">
+
<CardTitle>Wisp CLI Tool</CardTitle>
+
<Badge variant="secondary" className="text-xs">
+
<Badge variant="outline" className="text-xs">
+
Deploy static sites directly from your terminal
+
<CardContent className="space-y-6">
+
<div className="prose prose-sm max-w-none dark:prose-invert">
+
<p className="text-sm text-muted-foreground">
+
The Wisp CLI is a command-line tool for deploying static websites
+
directly to your AT Protocol account. Authenticate with app
+
password or OAuth and deploy from CI/CD pipelines.
+
<div className="space-y-3">
+
<h3 className="text-sm font-semibold">Features</h3>
+
<ul className="text-sm text-muted-foreground space-y-2 list-disc list-inside">
+
<strong>Deploy:</strong> Push static sites directly from your
+
<strong>Pull:</strong> Download sites from the PDS for
+
<strong>Serve:</strong> Run a local server with real-time
+
<div className="space-y-3">
+
<h3 className="text-sm font-semibold">Download v0.2.0</h3>
+
<div className="grid gap-2">
+
<div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
+
href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-aarch64-darwin"
+
rel="noopener noreferrer"
+
className="flex items-center justify-between mb-2"
+
<span className="font-mono text-sm">
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
+
<div className="text-xs text-muted-foreground">
+
<span className="font-mono">
+
SHA-1: 9281454860f2eb07b39b80f7a9cc8e9bdcff491b
+
<div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
+
href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-aarch64-linux"
+
rel="noopener noreferrer"
+
className="flex items-center justify-between mb-2"
+
<span className="font-mono text-sm">Linux (ARM64)</span>
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
+
<div className="text-xs text-muted-foreground">
+
<span className="font-mono">
+
SHA-1: d460863150c4c162b7e7e3801a67746da3aaf9d9
+
<div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
+
href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-linux"
+
rel="noopener noreferrer"
+
className="flex items-center justify-between mb-2"
+
<span className="font-mono text-sm">Linux (x86_64)</span>
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
+
<div className="text-xs text-muted-foreground">
+
<span className="font-mono">
+
SHA-1: 94968abed20422df826b78c38cb506dd4b1b5885
+
<div className="p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border">
+
href="https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-windows.exe"
+
rel="noopener noreferrer"
+
className="flex items-center justify-between mb-2"
+
<span className="font-mono text-sm">Windows (x86_64)</span>
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
+
<div className="text-xs text-muted-foreground">
+
<span className="font-mono">
+
SHA-1: 45293e47da38b97ef35258a08cb2682eee64a659
+
<div className="space-y-3">
+
<h3 className="text-sm font-semibold">Deploy a Site</h3>
+
code={`# Download and make executable
curl -O https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-aarch64-darwin
chmod +x wisp-cli-aarch64-darwin
···
# Your site will be available at:
# https://sites.wisp.place/your-handle/my-site`}
+
<div className="space-y-3">
+
<h3 className="text-sm font-semibold">Pull a Site from PDS</h3>
+
<p className="text-xs text-muted-foreground">
+
Download a site from the PDS to your local machine (uses OAuth
+
code={`# Pull a site to a specific directory
wisp-cli pull your-handle.bsky.social \\
···
# Opens browser for OAuth authentication on first run`}
+
<div className="space-y-3">
+
<h3 className="text-sm font-semibold">
+
Serve a Site Locally with Real-Time Updates
+
<p className="text-xs text-muted-foreground">
+
Run a local server that monitors the firehose for real-time
+
updates (uses OAuth authentication):
+
code={`# Serve on http://localhost:8080 (default)
wisp-cli serve your-handle.bsky.social \\
···
# Downloads site, serves it, and watches firehose for live updates!`}
+
<div className="space-y-3">
+
<h3 className="text-sm font-semibold">
+
CI/CD with Tangled Spindle
+
<p className="text-xs text-muted-foreground">
+
Deploy automatically on every push using{" "}
+
href="https://blog.tangled.org/ci"
+
rel="noopener noreferrer"
+
className="text-accent hover:underline"
+
<div className="space-y-4">
+
<h4 className="text-xs font-semibold mb-2 flex items-center gap-2">
+
<span>Example 1: Simple Asset Publishing</span>
+
<Badge variant="secondary" className="text-xs">
···
#Deployed site 'myWebbedSite': at://did:plc:ttdrpj45ibqunmfhdsb4zdwq/place.wisp.fs/myWebbedSite
#Available at: https://sites.wisp.place/did:plc:ttdrpj45ibqunmfhdsb4zdwq/myWebbedSite
+
<h4 className="text-xs font-semibold mb-2 flex items-center gap-2">
+
<span>Example 2: React/Vite Build & Deploy</span>
+
<Badge variant="secondary" className="text-xs">
···
--password "$WISP_APP_PASSWORD"`}
+
<div className="p-3 bg-muted/30 rounded-lg border-l-4 border-accent">
+
<p className="text-xs text-muted-foreground">
+
<strong className="text-foreground">Note:</strong> Set{" "}
+
<code className="px-1.5 py-0.5 bg-background rounded text-xs">
+
as a secret in your Tangled Spindle repository settings.
+
Generate an app password from your AT Protocol account settings.
+
<div className="space-y-3">
+
<h3 className="text-sm font-semibold">Learn More</h3>
+
<div className="grid gap-2">
+
href="https://docs.wisp.place/cli"
+
rel="noopener noreferrer"
+
className="flex items-center justify-between p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border"
+
<span className="text-sm">CLI Documentation</span>
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
+
href="https://tangled.org/@nekomimi.pet/wisp.place-monorepo/tree/main/cli"
+
rel="noopener noreferrer"
+
className="flex items-center justify-between p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border"
+
<span className="text-sm">Source Code</span>
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
+
href="https://blog.tangled.org/ci"
+
rel="noopener noreferrer"
+
className="flex items-center justify-between p-3 bg-muted/50 hover:bg-muted rounded-lg transition-colors border border-border"
+
<span className="text-sm">Tangled Spindle CI/CD</span>
+
<ExternalLink className="w-4 h-4 text-muted-foreground" />
nekomimi.pet