dev.html
177 lines1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
{{template "main.html" .}}
{{define "title"}}Congo Dev — Development Workbench{{end}}
{{define "description"}}Single-server development workbench. Browser IDE, Docker hosting, AI agent, and auto-TLS — all from one place.{{end}}
{{define "content"}}
<!-- Hero -->
<section class="relative min-h-[60vh] flex items-center justify-center px-6">
<div class="hero-glow"></div>
<div class="relative text-center max-w-xl mx-auto">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-6" style="background: rgba(79,142,247,0.08); border: 1px solid rgba(79,142,247,0.12);">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
</div>
<h1 class="text-5xl md:text-6xl font-bold tracking-tight leading-[1.1] mb-5">
Congo <span class="shimmer text-accent">Dev</span>
</h1>
<p class="text-body text-base leading-relaxed mb-8 max-w-md mx-auto">
Your development workbench. Browser IDE, Docker hosting, AI agent, and auto-TLS — all from one server.
</p>
<div class="flex gap-3 justify-center flex-wrap" hx-boost="true">
<a href="/dev/setup" class="btn-glow btn-glow-primary">Setup Guide</a>
<a href="/source/dev" class="btn-glow"><span class="font-mono text-xs mr-1"></></span> View Source</a>
</div>
</div>
</section>
<!-- Features -->
<section class="py-20 px-6">
<div class="max-w-3xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="glow-card p-6">
<div class="inline-flex items-center justify-center w-10 h-10 rounded-lg mb-4" style="background: rgba(79,142,247,0.08);">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
</div>
<h3 class="text-bright font-semibold text-sm mb-2">Browser IDE</h3>
<p class="text-body text-sm leading-relaxed">Full VS Code in your browser. Edit, debug, and run code from anywhere — auth-gated through the dashboard.</p>
</div>
<div class="glow-card p-6">
<div class="inline-flex items-center justify-center w-10 h-10 rounded-lg mb-4" style="background: rgba(79,142,247,0.08);">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
</div>
<h3 class="text-bright font-semibold text-sm mb-2">Docker Hosting</h3>
<p class="text-body text-sm leading-relaxed">Deploy apps from your repos with one click. Auto-TLS, domains, and container management built in.</p>
</div>
<div class="glow-card p-6">
<div class="inline-flex items-center justify-center w-10 h-10 rounded-lg mb-4" style="background: rgba(79,142,247,0.08);">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" /></svg>
</div>
<h3 class="text-bright font-semibold text-sm mb-2">AI Twin</h3>
<p class="text-body text-sm leading-relaxed">A persistent AI developer that runs on a schedule. Monitors health, processes tasks, and builds features while you sleep.</p>
</div>
</div>
</section>
<!-- How it works -->
<section class="section-divide py-20 px-6">
<div class="max-w-3xl mx-auto">
<h2 class="text-2xl font-bold text-center mb-3 tracking-tight">One server, everything included</h2>
<p class="text-muted text-sm text-center mb-14">Congo Dev runs as a single binary with a systemd service. No Docker Compose, no Kubernetes.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<div class="text-accent text-xs font-mono mb-3">01</div>
<div class="code-block mb-3">
<pre><code class="language-bash">doctl compute droplet create</code></pre>
</div>
<p class="text-body text-sm leading-relaxed">Create a DigitalOcean droplet with the cloud-init script. Installs Docker, Go, and Congo.</p>
</div>
<div class="text-center">
<div class="text-accent text-xs font-mono mb-3">02</div>
<div class="code-block mb-3">
<pre><code class="language-bash">ssh your-server</code></pre>
</div>
<p class="text-body text-sm leading-relaxed">Grab the setup token from the login banner and create your admin account.</p>
</div>
<div class="text-center">
<div class="text-accent text-xs font-mono mb-3">03</div>
<div class="code-block mb-3">
<pre><code class="language-bash">open http://your-ip</code></pre>
</div>
<p class="text-body text-sm leading-relaxed">Dashboard, IDE, repos, and deployment — all ready to use.</p>
</div>
</div>
</div>
</section>
<!-- What's in the dashboard -->
<section class="py-20 px-6">
<div class="max-w-3xl mx-auto">
<h2 class="text-2xl font-bold text-center mb-3 tracking-tight">What you get</h2>
<p class="text-muted text-sm text-center mb-14">Everything runs in one dashboard. No switching between tools.</p>
<div class="space-y-4">
<div class="glow-card p-6 flex gap-5">
<div class="shrink-0 inline-flex items-center justify-center w-10 h-10 rounded-lg" style="background: rgba(79,142,247,0.08);">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6z" /><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25z" /><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6z" /></svg>
</div>
<div>
<h3 class="text-bright font-semibold text-sm mb-1">Service Dashboard</h3>
<p class="text-body text-sm leading-relaxed">See all running containers at a glance. CPU, memory, uptime, health status. Deploy new services from your Git repos with one click. Assign custom domains — Caddy handles TLS automatically.</p>
</div>
</div>
<div class="glow-card p-6 flex gap-5">
<div class="shrink-0 inline-flex items-center justify-center w-10 h-10 rounded-lg" style="background: rgba(79,142,247,0.08);">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" /></svg>
</div>
<div>
<h3 class="text-bright font-semibold text-sm mb-1">Git + Code-Server</h3>
<p class="text-body text-sm leading-relaxed">Clone repos from any URL. Full VS Code editor in your browser, auth-gated through the dashboard. Terminal, file explorer, extensions — everything you'd have locally.</p>
</div>
</div>
<div class="glow-card p-6 flex gap-5">
<div class="shrink-0 inline-flex items-center justify-center w-10 h-10 rounded-lg" style="background: rgba(79,142,247,0.08);">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582" /></svg>
</div>
<div>
<h3 class="text-bright font-semibold text-sm mb-1">Domain Routing</h3>
<p class="text-body text-sm leading-relaxed">Assign <code class="text-accent">*.your-domain.com</code> subdomains to any service. Caddy auto-issues TLS certificates. DNS verification built in. Add or remove routes from the UI.</p>
</div>
</div>
<div class="glow-card p-6 flex gap-5">
<div class="shrink-0 inline-flex items-center justify-center w-10 h-10 rounded-lg" style="background: rgba(79,142,247,0.08);">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</div>
<div>
<h3 class="text-bright font-semibold text-sm mb-1">AI Twin System</h3>
<p class="text-body text-sm leading-relaxed">Ships with Claude Code, cron-driven work cycles, health monitoring, and morning briefings out of the box. Your twin checks system health every hour, processes tasks every four hours, and sends you a daily briefing. Persistent across restarts.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Architecture -->
<section class="section-divide py-20 px-6">
<div class="max-w-3xl mx-auto">
<h2 class="text-2xl font-bold text-center mb-3 tracking-tight">Architecture</h2>
<p class="text-muted text-sm text-center mb-10">All containers on an internal Docker network. Only Caddy exposes ports.</p>
<div class="code-block">
<pre><code> INTERNET
|
┌────┴────┐
│ Caddy │ :80/:443
└────┬────┘
┌───────────┼──────────────┐
│ │ │
your.gg app.your.gg dev.your.gg
│ │ │
┌─┴──┐ ┌───┴────┐ ┌────┴────┐
│web │ │ hosted │ │congo-dev│
│app │ │ app │ │ :5001 │
└────┘ └────────┘ └────┬───┘
│ /coder/*
┌────┴─────┐
│code- │
│server │
└──────────┘</code></pre>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-16 px-6">
<div class="max-w-3xl mx-auto text-center">
<div class="flex gap-3 justify-center" hx-boost="true">
<a href="/dev/setup" class="btn-glow btn-glow-primary">Setup Guide</a>
<a href="/philosophy" class="btn-glow">Why Congo</a>
</div>
</div>
</section>
<!-- Mailing List -->
<section class="py-12 px-6">
<div class="max-w-md mx-auto">
{{template "mailing-list.html" .}}
</div>
</section>
{{end}}