fix onboarding · nekomimi.pet/wisp.place-monorepo@f4359de

+426

apps/main-app/public/editor/onboarding.html

··· 1 + <!DOCTYPE html> 2 + <html lang="en"> 3 + <head> 4 + <meta charset="UTF-8"> 5 + <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 + <title>Get Started - wisp.place</title> 7 + <link rel="icon" type="image/x-icon" href="../favicon.ico"> 8 + <link rel="preconnect" href="https://fonts.googleapis.com"> 9 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 10 + <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> 11 + <style> 12 + * { margin: 0; padding: 0; box-sizing: border-box; } 13 + 14 + :root { 15 + --bg: oklch(0.92 0.012 35); 16 + --bg-alt: oklch(0.88 0.01 35); 17 + --text: oklch(0.15 0.015 30); 18 + --text-muted: oklch(0.35 0.02 30); 19 + --text-subtle: oklch(0.50 0.02 30); 20 + --border: oklch(0.30 0.025 35); 21 + --border-light: oklch(0.65 0.02 30); 22 + --accent: oklch(0.65 0.18 345); 23 + --cta-bg: oklch(0.30 0.025 35); 24 + --cta-text: oklch(0.96 0.008 35); 25 + --code-bg: oklch(0.95 0.008 35); 26 + --success: oklch(0.65 0.20 145); 27 + } 28 + 29 + @media (prefers-color-scheme: dark) { 30 + :root { 31 + --bg: oklch(0.23 0.015 285); 32 + --bg-alt: oklch(0.20 0.015 285); 33 + --text: oklch(0.90 0.005 285); 34 + --text-muted: oklch(0.72 0.01 285); 35 + --text-subtle: oklch(0.55 0.01 285); 36 + --border: oklch(0.90 0.005 285); 37 + --border-light: oklch(0.38 0.02 285); 38 + --accent: oklch(0.85 0.08 5); 39 + --cta-bg: oklch(0.70 0.10 295); 40 + --cta-text: oklch(0.23 0.015 285); 41 + --code-bg: oklch(0.28 0.015 285); 42 + } 43 + } 44 + 45 + body { 46 + font-family: "JetBrains Mono", monospace; 47 + background: var(--bg); 48 + color: var(--text); 49 + line-height: 1.6; 50 + } 51 + .container { max-width: 600px; margin: 0 auto; padding: 3rem 1rem; } 52 + header { 53 + border-bottom: 1px solid var(--border-light); 54 + padding: 1rem 2rem; 55 + background: var(--bg); 56 + position: sticky; 57 + top: 0; 58 + z-index: 100; 59 + } 60 + .logo { font-size: 1.125rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } 61 + .progress { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-bottom: 2rem; } 62 + .step-indicator { 63 + width: 2rem; height: 2rem; border-radius: 50%; 64 + display: flex; align-items: center; justify-content: center; 65 + background: var(--bg-alt); color: var(--text-subtle); 66 + font-weight: 600; 67 + } 68 + .step-indicator.active { background: var(--cta-bg); color: var(--cta-text); } 69 + .step-indicator.complete { background: var(--success); color: var(--bg); } 70 + .progress-line { width: 4rem; height: 2px; background: var(--border-light); } 71 + .card { 72 + background: var(--bg-alt); 73 + border: 1px solid var(--border-light); 74 + border-radius: 0.5rem; 75 + padding: 1.5rem; 76 + } 77 + h1 { font-size: 1.5rem; margin-bottom: 0.5rem; text-align: center; color: var(--text); } 78 + h2 { font-size: 1.25rem; margin-bottom: 1rem; color: var(--text); } 79 + p { color: var(--text-muted); margin-bottom: 1rem; } 80 + .text-center { text-align: center; } 81 + .text-muted { color: var(--text-muted); font-size: 0.875rem; } 82 + label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--text); } 83 + input { 84 + width: 100%; 85 + padding: 0.5rem 0.75rem; 86 + background: var(--bg); 87 + border: 1px solid var(--border-light); 88 + border-radius: 0.375rem; 89 + color: var(--text); 90 + font-size: 0.875rem; 91 + font-family: "JetBrains Mono", monospace; 92 + } 93 + input:focus { outline: 2px solid var(--accent); outline-offset: 2px; } 94 + button { 95 + width: 100%; 96 + padding: 0.5rem 1rem; 97 + background: var(--cta-bg); 98 + color: var(--cta-text); 99 + border: none; 100 + border-radius: 0.375rem; 101 + font-weight: 600; 102 + cursor: pointer; 103 + font-size: 0.875rem; 104 + font-family: "JetBrains Mono", monospace; 105 + } 106 + button:hover { opacity: 0.9; } 107 + button:disabled { opacity: 0.5; cursor: not-allowed; } 108 + button.outline { 109 + background: transparent; 110 + color: var(--text); 111 + border: 1px solid var(--border-light); 112 + } 113 + .input-wrapper { position: relative; margin-bottom: 1rem; } 114 + .input-icon { 115 + position: absolute; 116 + right: 0.75rem; 117 + top: 50%; 118 + transform: translateY(-50%); 119 + } 120 + .spinner { 121 + display: inline-block; 122 + width: 1rem; height: 1rem; 123 + border: 2px solid var(--border-light); 124 + border-top-color: var(--accent); 125 + border-radius: 50%; 126 + animation: spin 0.6s linear infinite; 127 + } 128 + @keyframes spin { to { transform: rotate(360deg); } } 129 + .success { color: var(--success); } 130 + .error { color: var(--accent); } 131 + .hidden { display: none; } 132 + .mb-1 { margin-bottom: 0.5rem; } 133 + .mb-2 { margin-bottom: 1rem; } 134 + .mb-4 { margin-bottom: 1.5rem; } 135 + .mt-4 { margin-top: 1.5rem; } 136 + .flex { display: flex; } 137 + .gap-2 { gap: 0.5rem; } 138 + .upload-zone { 139 + border: 2px dashed var(--border-light); 140 + border-radius: 0.5rem; 141 + padding: 2rem; 142 + text-align: center; 143 + cursor: pointer; 144 + transition: border-color 0.2s; 145 + } 146 + .upload-zone:hover { border-color: var(--accent); } 147 + .alert { 148 + padding: 1rem; 149 + border-radius: 0.5rem; 150 + margin-bottom: 1rem; 151 + } 152 + .alert-success { background: var(--code-bg); border: 1px solid var(--border-light); color: var(--success); } 153 + .alert-info { background: var(--code-bg); color: var(--text-muted); } 154 + </style> 155 + </head> 156 + <body> 157 + <header> 158 + <div class="logo">wisp.place</div> 159 + </header> 160 + 161 + <div class="container"> 162 + <div class="progress mb-4"> 163 + <div class="step-indicator" id="step1">1</div> 164 + <div class="progress-line"></div> 165 + <div class="step-indicator" id="step2">2</div> 166 + </div> 167 + 168 + <h1 id="stepTitle">Claim Your Free Domain</h1> 169 + <p class="text-center text-muted mb-4" id="stepDesc">Choose a subdomain on wisp.place</p> 170 + 171 +  172 + <div id="domainStep" class="card"> 173 + <h2>Choose Your Domain</h2> 174 + <p class="text-muted mb-2">Pick a unique handle for your free *.wisp.place subdomain</p> 175 + 176 + <label for="handle">Your Handle</label> 177 + <div class="input-wrapper"> 178 + <input type="text" id="handle" placeholder="my-awesome-site"> 179 + <span class="input-icon" id="availabilityIcon"></span> 180 + </div> 181 + <p class="text-muted mb-2 hidden" id="domainPreview"></p> 182 + <p class="text-muted error mb-2 hidden" id="domainError"></p> 183 + 184 + <button id="claimBtn" disabled>Claim Domain</button> 185 + </div> 186 + 187 +  188 + <div id="uploadStep" class="card hidden"> 189 + <h2>Deploy Your Site</h2> 190 + <p class="text-muted mb-4">Upload your static site files or start with an empty site</p> 191 + 192 + <div class="alert alert-success mb-4"> 193 + <strong>✓ Domain claimed:</strong> <span id="claimedDomain"></span> 194 + </div> 195 + 196 + <label for="siteName">Site Name</label> 197 + <input type="text" id="siteName" placeholder="my-site" class="mb-1"> 198 + <p class="text-muted mb-4">A unique identifier for this site in your account</p> 199 + 200 + <label>Upload Files (Optional)</label> 201 + <div class="upload-zone mb-1" id="uploadZone"> 202 + <p>📤</p> 203 + <p class="mb-2">Choose Folder</p> 204 + <p class="text-muted" id="fileCount"></p> 205 + </div> 206 + <input type="file" id="fileInput" multiple webkitdirectory directory class="hidden"> 207 + <p class="text-muted mb-2">Supported: HTML, CSS, JS, images, fonts, and more</p> 208 + <p class="text-muted mb-4">Limits: 100MB per file, 300MB total</p> 209 + 210 + <div id="uploadProgress" class="alert alert-info mb-4 hidden"> 211 + <div class="flex gap-2"> 212 + <span class="spinner"></span> 213 + <span id="progressText"></span> 214 + </div> 215 + </div> 216 + 217 + <div class="flex gap-2"> 218 + <button id="skipBtn" class="outline">Skip for Now</button> 219 + <button id="uploadBtn" disabled>Create Empty Site</button> 220 + </div> 221 + </div> 222 + </div> 223 + 224 + <script> 225 + let state = { 226 + step: 'domain', 227 + handle: '', 228 + isAvailable: null, 229 + domain: '', 230 + claimedDomain: '', 231 + siteName: '', 232 + files: null, 233 + checkTimeout: null 234 + }; 235 + 236 + // DOM elements 237 + const step1 = document.getElementById('step1'); 238 + const step2 = document.getElementById('step2'); 239 + const stepTitle = document.getElementById('stepTitle'); 240 + const stepDesc = document.getElementById('stepDesc'); 241 + const domainStep = document.getElementById('domainStep'); 242 + const uploadStep = document.getElementById('uploadStep'); 243 + const handleInput = document.getElementById('handle'); 244 + const availabilityIcon = document.getElementById('availabilityIcon'); 245 + const domainPreview = document.getElementById('domainPreview'); 246 + const domainError = document.getElementById('domainError'); 247 + const claimBtn = document.getElementById('claimBtn'); 248 + const claimedDomainEl = document.getElementById('claimedDomain'); 249 + const siteNameInput = document.getElementById('siteName'); 250 + const uploadZone = document.getElementById('uploadZone'); 251 + const fileInput = document.getElementById('fileInput'); 252 + const fileCount = document.getElementById('fileCount'); 253 + const uploadProgress = document.getElementById('uploadProgress'); 254 + const progressText = document.getElementById('progressText'); 255 + const skipBtn = document.getElementById('skipBtn'); 256 + const uploadBtn = document.getElementById('uploadBtn'); 257 + 258 + // Handle input 259 + handleInput.addEventListener('input', (e) => { 260 + state.handle = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''); 261 + handleInput.value = state.handle; 262 + 263 + clearTimeout(state.checkTimeout); 264 + 265 + if (state.handle.length < 3) { 266 + state.isAvailable = null; 267 + availabilityIcon.innerHTML = ''; 268 + domainPreview.classList.add('hidden'); 269 + domainError.classList.add('hidden'); 270 + claimBtn.disabled = true; 271 + return; 272 + } 273 + 274 + availabilityIcon.innerHTML = '<span class="spinner"></span>'; 275 + state.checkTimeout = setTimeout(checkAvailability, 500); 276 + }); 277 + 278 + async function checkAvailability() { 279 + try { 280 + const res = await fetch(`/api/domain/check?handle=${encodeURIComponent(state.handle)}`); 281 + const data = await res.json(); 282 + state.isAvailable = data.available; 283 + state.domain = data.domain || ''; 284 + 285 + if (state.isAvailable) { 286 + availabilityIcon.innerHTML = '<span class="success">✓</span>'; 287 + domainPreview.textContent = `Your domain will be: ${state.domain}`; 288 + domainPreview.classList.remove('hidden'); 289 + domainError.classList.add('hidden'); 290 + claimBtn.disabled = false; 291 + } else { 292 + availabilityIcon.innerHTML = '<span class="error">✗</span>'; 293 + domainError.textContent = 'This handle is not available or invalid'; 294 + domainError.classList.remove('hidden'); 295 + domainPreview.classList.add('hidden'); 296 + claimBtn.disabled = true; 297 + } 298 + } catch (err) { 299 + console.error(err); 300 + state.isAvailable = false; 301 + availabilityIcon.innerHTML = '<span class="error">✗</span>'; 302 + claimBtn.disabled = true; 303 + } 304 + } 305 + 306 + // Claim domain 307 + claimBtn.addEventListener('click', async () => { 308 + if (!state.isAvailable) return; 309 + 310 + claimBtn.disabled = true; 311 + claimBtn.textContent = 'Claiming...'; 312 + 313 + try { 314 + const res = await fetch('/api/domain/claim', { 315 + method: 'POST', 316 + headers: { 'Content-Type': 'application/json' }, 317 + body: JSON.stringify({ handle: state.handle }) 318 + }); 319 + const data = await res.json(); 320 + 321 + if (data.success) { 322 + state.claimedDomain = data.domain; 323 + state.step = 'upload'; 324 + renderStep(); 325 + } else { 326 + throw new Error(data.error || 'Failed to claim domain'); 327 + } 328 + } catch (err) { 329 + const msg = err.message; 330 + if (msg.includes('Already claimed')) { 331 + alert('You have already claimed a wisp.place subdomain. Redirecting to editor...'); 332 + window.location.href = '/editor'; 333 + } else { 334 + alert(`Failed to claim domain: ${msg}`); 335 + claimBtn.disabled = false; 336 + claimBtn.textContent = 'Claim Domain'; 337 + } 338 + } 339 + }); 340 + 341 + // Upload zone 342 + uploadZone.addEventListener('click', () => fileInput.click()); 343 + fileInput.addEventListener('change', (e) => { 344 + state.files = e.target.files; 345 + if (state.files && state.files.length > 0) { 346 + fileCount.textContent = `${state.files.length} files selected`; 347 + uploadBtn.textContent = 'Upload & Deploy'; 348 + } 349 + }); 350 + 351 + // Site name 352 + siteNameInput.addEventListener('input', (e) => { 353 + state.siteName = e.target.value; 354 + uploadBtn.disabled = !state.siteName; 355 + }); 356 + 357 + // Skip 358 + skipBtn.addEventListener('click', () => { 359 + window.location.href = '/editor'; 360 + }); 361 + 362 + // Upload 363 + uploadBtn.addEventListener('click', async () => { 364 + if (!state.siteName) return; 365 + 366 + uploadBtn.disabled = true; 367 + skipBtn.disabled = true; 368 + uploadProgress.classList.remove('hidden'); 369 + progressText.textContent = 'Preparing files...'; 370 + 371 + try { 372 + const formData = new FormData(); 373 + formData.append('siteName', state.siteName); 374 + 375 + if (state.files) { 376 + for (let i = 0; i < state.files.length; i++) { 377 + formData.append('files', state.files[i]); 378 + } 379 + } 380 + 381 + progressText.textContent = 'Uploading to AT Protocol...'; 382 + const res = await fetch('/wisp/upload-files', { 383 + method: 'POST', 384 + body: formData 385 + }); 386 + const data = await res.json(); 387 + 388 + if (data.success) { 389 + progressText.textContent = 'Upload complete!'; 390 + setTimeout(() => { 391 + window.location.href = `https://${state.claimedDomain}`; 392 + }, 1500); 393 + } else { 394 + throw new Error(data.error || 'Upload failed'); 395 + } 396 + } catch (err) { 397 + alert(`Upload failed: ${err.message}`); 398 + uploadBtn.disabled = false; 399 + skipBtn.disabled = false; 400 + uploadProgress.classList.add('hidden'); 401 + } 402 + }); 403 + 404 + function renderStep() { 405 + if (state.step === 'domain') { 406 + step1.classList.add('active'); 407 + step2.classList.remove('active', 'complete'); 408 + stepTitle.textContent = 'Claim Your Free Domain'; 409 + stepDesc.textContent = 'Choose a subdomain on wisp.place'; 410 + domainStep.classList.remove('hidden'); 411 + uploadStep.classList.add('hidden'); 412 + } else { 413 + step1.classList.remove('active'); 414 + step1.classList.add('complete'); 415 + step1.textContent = '✓'; 416 + step2.classList.add('active'); 417 + stepTitle.textContent = 'Deploy Your First Site'; 418 + stepDesc.textContent = 'Upload your site or start with an empty one'; 419 + domainStep.classList.add('hidden'); 420 + uploadStep.classList.remove('hidden'); 421 + claimedDomainEl.textContent = state.claimedDomain; 422 + } 423 + } 424 + </script> 425 + </body> 426 + </html>

+1 -1

apps/main-app/public/landingpage.html

··· 874 874 <ul> 875 875 <li><a href="https://docs.wisp.place/cli/" target="_blank">CLI Guide</a></li> 876 876 <li><a href="https://docs.wisp.place/api/" target="_blank">API Reference</a></li> 877 - <li><a href="https://tangled.org/nekomimi.pet/wisp.place-monorepo" target="_blank">GitHub</a></li> 877 + <li><a href="https://tangled.org/nekomimi.pet/wisp.place-monorepo" target="_blank">Tangled</a></li> 878 878 </ul> 879 879 </div> 880 880 <div class="footer-col">

+8

apps/main-app/src/index.ts

··· 229 229 .get('/acceptable-use', ({ set }) => { 230 230 set.redirect = '/editor/acceptable-use' 231 231 }) 232 + .get('/onboarding', async ({ set }) => { 233 + set.headers['Content-Type'] = 'text/html; charset=utf-8' 234 + return await Bun.file('./apps/main-app/public/editor/onboarding.html').text() 235 + }) 236 + .get('/editor/onboarding', async ({ set }) => { 237 + set.headers['Content-Type'] = 'text/html; charset=utf-8' 238 + return await Bun.file('./apps/main-app/public/editor/onboarding.html').text() 239 + }) 232 240 .get('/oauth-client-metadata.json', () => { 233 241 return createClientMetadata(config) 234 242 })