workspace.html
200 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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
{{template "main.html" .}}
{{define "title"}}Workspace — Congo{{end}}
{{define "description"}}Your development workspace. Browser IDE, Docker hosting, AI agent, and auto-TLS — all from one server.{{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">Workspace</span>
</h1>
<p class="text-body text-base leading-relaxed mb-8 max-w-md mx-auto">
Your development workspace. 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="#setup" class="btn-glow btn-glow-primary">Get Started</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 Agent</h3>
<p class="text-body text-sm leading-relaxed">A persistent AI developer that monitors health, processes tasks, and builds features while you sleep.</p>
</div>
</div>
</section>
<!-- What you get -->
<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">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 with automatic TLS.</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. TLS certificates issued automatically. 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 Agent</h3>
<p class="text-body text-sm leading-relaxed">Ships with Claude Code integration. The agent reads tasks from the shared database, executes them, and logs results. Monitors system health and reports via heartbeat.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Architecture -->
<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">Architecture</h2>
<p class="text-muted text-sm text-center mb-10">All containers on an internal Docker network. Go handles TLS via autocert.</p>
<div class="code-block">
<pre><code> INTERNET
|
┌────┴────┐
│ Congo │ :80/:443 (Go autocert)
│ Workspace│
└────┬────┘
┌───────────┼──────────────┐
│ │ │
your.gg app.your.gg code.your.gg
│ │ │
┌─┴──┐ ┌───┴────┐ ┌────┴────┐
│web │ │ hosted │ │ code- │
│app │ │ app │ │ server │
└────┘ └────────┘ └─────────┘</code></pre>
</div>
</div>
</section>
<!-- Setup -->
<section id="setup" class="section-divide py-20 px-6">
<div class="max-w-3xl mx-auto">
<h2 class="text-2xl font-bold mb-2 tracking-tight">Get Started</h2>
<p class="text-muted text-base mb-10">Your own workspace with browser IDE, Docker hosting, and AI agent.</p>
<!-- Option 1: Congo Host -->
<div class="glow-card p-8 mb-6">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background: #4f8ef7;">
<span class="text-white text-sm font-bold">1</span>
</div>
<div>
<h3 class="text-xl font-bold mb-2 tracking-tight">Use Congo Host</h3>
<p class="text-body text-sm leading-relaxed mb-4">Create a server on <a href="https://host.congo.gg" class="text-accent" target="_blank">host.congo.gg</a>. Sign in, pick a size, click create. Congo Workspace is pre-installed — dashboard, IDE, and AI agent running in minutes.</p>
<a href="https://host.congo.gg" class="btn-glow btn-glow-primary" style="padding: 0.5rem 1.5rem; font-size: 0.875rem; border-radius: 0.5rem;" target="_blank">Create Server</a>
</div>
</div>
</div>
<!-- Option 2: DIY -->
<div class="glow-card p-8 mb-14">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background: rgba(79,142,247,0.1); border: 1px solid rgba(79,142,247,0.2);">
<span class="text-accent text-sm font-bold">2</span>
</div>
<div class="w-full">
<h3 class="text-xl font-bold mb-2 tracking-tight">Or Install Yourself</h3>
<p class="text-body text-sm leading-relaxed mb-4">Run the cloud-init script on any fresh Ubuntu 24.04 server. Works on DigitalOcean, AWS, Hetzner, or bare metal.</p>
<div class="code-block mb-4">
<pre><code class="language-bash">curl -fsSL https://congo.gg/cloud-init.sh | bash</code></pre>
</div>
<p class="text-muted text-xs mb-4">Installs Docker, Go, builds the workspace image, and starts everything. Takes about 5 minutes on a 4GB droplet.</p>
<p class="text-body text-sm leading-relaxed mb-2"><strong>After it finishes:</strong></p>
<div class="code-block">
<pre><code class="language-bash"># The setup token is in the login banner:
ssh root@YOUR_SERVER
# Visit http://YOUR_IP in your browser
# Enter the token, create your account, done.</code></pre>
</div>
</div>
</div>
</div>
<!-- After Setup -->
<div>
<h3 class="text-xl font-bold mb-4 tracking-tight">After Setup</h3>
<ol class="space-y-2 text-body text-sm leading-relaxed">
<li class="flex gap-3 items-start"><span class="text-accent font-mono text-xs mt-0.5">1.</span> Open the dashboard — create a project or clone a repo</li>
<li class="flex gap-3 items-start"><span class="text-accent font-mono text-xs mt-0.5">2.</span> Open VS Code — edit code in the browser IDE</li>
<li class="flex gap-3 items-start"><span class="text-accent font-mono text-xs mt-0.5">3.</span> Deploy — one click deploys your app as a Docker container</li>
<li class="flex gap-3 items-start"><span class="text-accent font-mono text-xs mt-0.5">4.</span> Add a domain — point DNS, TLS is automatic</li>
</ol>
</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="/framework" class="btn-glow">Learn the Framework</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}}