+83 -238

client/src/pages/ApiDocs.jsx

reviewed

··· 121 121 The boop.cat API allows you to manage sites and trigger deployments programmatically. This is useful for CI/CD 122 122 pipelines, GitHub Actions, and custom deployment workflows. 123 123 </div> 124 124 - <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}> 125 125 - <div 126 126 - style={{ 127 127 - padding: '8px 16px', 128 128 - background: 'var(--bg-secondary)', 129 129 - borderRadius: 8, 130 130 - fontSize: 13 131 131 - }} 132 132 - > 124 124 + <div className="api-stats-grid"> 125 125 + <div className="api-stat-card"> 133 126 <strong>Base URL:</strong> <code>{baseUrl}/api/v1</code> 134 127 </div> 135 135 - <div 136 136 - style={{ 137 137 - padding: '8px 16px', 138 138 - background: 'var(--bg-secondary)', 139 139 - borderRadius: 8, 140 140 - fontSize: 13 141 141 - }} 142 142 - > 128 128 + <div className="api-stat-card"> 143 129 <strong>Rate Limit:</strong> 100 requests / 15 minutes 144 130 </div> 145 131 </div> ··· 197 183 </div> 198 184 199 185 {endpoints.map((endpoint, i) => ( 200 200 - <div 201 201 - key={i} 202 202 - style={{ 203 203 - borderBottom: i < endpoints.length - 1 ? '1px solid var(--border)' : 'none', 204 204 - paddingBottom: i < endpoints.length - 1 ? 24 : 0, 205 205 - marginBottom: i < endpoints.length - 1 ? 24 : 0 206 206 - }} 207 207 - > 208 208 - <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}> 186 186 + <div key={i} className="api-endpoint-item"> 187 187 + <div className="api-endpoint-header"> 209 188 <span 189 189 + className="api-method-badge" 210 190 style={{ 211 211 - padding: '4px 10px', 212 212 - borderRadius: 6, 213 213 - fontSize: 12, 214 214 - fontWeight: 700, 215 215 - fontFamily: 'monospace', 216 191 background: endpoint.method === 'POST' ? 'rgba(34, 197, 94, 0.15)' : 'rgba(59, 130, 246, 0.15)', 217 192 color: endpoint.method === 'POST' ? '#22c55e' : '#3b82f6' 218 193 }} 219 194 > 220 195 {endpoint.method} 221 196 </span> 222 222 - <code style={{ fontSize: 14, fontWeight: 500 }}>{endpoint.path}</code> 197 197 + <code className="api-path">{endpoint.path}</code> 223 198 </div> 224 224 - <div className="muted" style={{ marginBottom: 12 }}> 199 199 + <div className="muted" style={{ marginBottom: 16 }}> 225 200 {endpoint.description} 226 201 </div> 227 202 228 228 - <div style={{ marginBottom: 12 }}> 229 229 - <div 230 230 - style={{ 231 231 - display: 'flex', 232 232 - justifyContent: 'space-between', 233 233 - alignItems: 'center', 234 234 - marginBottom: 6 235 235 - }} 236 236 - > 203 203 + <div style={{ marginBottom: 16 }}> 204 204 + <div className="api-example-header"> 237 205 <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)' }}>Example Request</span> 238 238 - <button 239 239 - className="iconBtn" 240 240 - style={{ 241 241 - width: 28, 242 242 - height: 28, 243 243 - borderRadius: '50%', 244 244 - background: 'var(--bg-secondary)', 245 245 - border: 'none' 246 246 - }} 247 247 - onClick={() => copyToClipboard(endpoint.example, `example-${i}`)} 248 248 - > 206 206 + <button className="api-copy-btn" onClick={() => copyToClipboard(endpoint.example, `example-${i}`)}> 249 207 {copiedIndex === `example-${i}` ? <Check size={14} /> : <Copy size={14} />} 250 208 </button> 251 209 </div> 252 252 - <pre 253 253 - style={{ 254 254 - background: 'var(--bg-tertiary, #1e1e1e)', 255 255 - padding: 16, 256 256 - borderRadius: 8, 257 257 - fontFamily: 'monospace', 258 258 - fontSize: 12, 259 259 - color: 'var(--code-text, #e0e0e0)', 260 260 - overflowX: 'auto', 261 261 - margin: 0, 262 262 - whiteSpace: 'pre-wrap', 263 263 - wordBreak: 'break-word' 264 264 - }} 265 265 - > 266 266 - {endpoint.example} 267 267 - </pre> 210 210 + <pre className="api-code-block">{endpoint.example}</pre> 268 211 </div> 269 212 270 213 <div> 271 271 - <div 272 272 - style={{ 273 273 - display: 'flex', 274 274 - justifyContent: 'space-between', 275 275 - alignItems: 'center', 276 276 - marginBottom: 6 277 277 - }} 278 278 - > 214 214 + <div className="api-example-header"> 279 215 <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)' }}>Example Response</span> 280 280 - <button 281 281 - className="iconBtn" 282 282 - style={{ 283 283 - width: 28, 284 284 - height: 28, 285 285 - borderRadius: '50%', 286 286 - background: 'var(--bg-secondary)', 287 287 - border: 'none' 288 288 - }} 289 289 - onClick={() => copyToClipboard(endpoint.response, `response-${i}`)} 290 290 - > 216 216 + <button className="api-copy-btn" onClick={() => copyToClipboard(endpoint.response, `response-${i}`)}> 291 217 {copiedIndex === `response-${i}` ? <Check size={14} /> : <Copy size={14} />} 292 218 </button> 293 219 </div> 294 294 - <pre 295 295 - style={{ 296 296 - background: 'var(--bg-tertiary, #1e1e1e)', 297 297 - padding: 16, 298 298 - borderRadius: 8, 299 299 - fontFamily: 'monospace', 300 300 - fontSize: 12, 301 301 - color: 'var(--code-text, #e0e0e0)', 302 302 - overflowX: 'auto', 303 303 - margin: 0 304 304 - }} 305 305 - > 306 306 - {endpoint.response} 307 307 - </pre> 220 220 + <pre className="api-code-block">{endpoint.response}</pre> 308 221 </div> 309 222 </div> 310 223 ))} ··· 320 233 Here's an example workflow to trigger a deployment on every push to main: 321 234 </div> 322 235 323 323 - <div style={{ position: 'relative' }}> 324 324 - <button 325 325 - className="iconBtn" 326 326 - style={{ 327 327 - position: 'absolute', 328 328 - top: 8, 329 329 - right: 8, 330 330 - width: 28, 331 331 - height: 28, 332 332 - borderRadius: '50%', 333 333 - background: 'var(--bg-secondary)', 334 334 - border: 'none' 335 335 - }} 336 336 - onClick={() => 337 337 - copyToClipboard( 338 338 - `name: Deploy to boop.cat 236 236 + <div> 237 237 + <div className="api-example-header"> 238 238 + <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)' }}> 239 239 + .github/workflows/deploy.yml 240 240 + </span> 241 241 + <button 242 242 + className="api-copy-btn" 243 243 + onClick={() => 244 244 + copyToClipboard( 245 245 + `name: Deploy to boop.cat 339 246 340 247 on: 341 248 push: ··· 350 257 curl -X POST \\ 351 258 -H "Authorization: Bearer \${{ secrets.BOOP_CAT_API_KEY }}" \\ 352 259 ${baseUrl}/api/v1/sites/YOUR_SITE_ID/deploy?wait=true`, 353 353 - 'github-actions' 354 354 - ) 355 355 - } 356 356 - > 357 357 - {copiedIndex === 'github-actions' ? <Check size={14} /> : <Copy size={14} />} 358 358 - </button> 359 359 - <pre 360 360 - style={{ 361 361 - background: 'var(--bg-tertiary, #1e1e1e)', 362 362 - padding: 16, 363 363 - borderRadius: 8, 364 364 - fontFamily: 'monospace', 365 365 - fontSize: 12, 366 366 - color: 'var(--code-text, #e0e0e0)', 367 367 - overflowX: 'auto', 368 368 - margin: 0 369 369 - }} 370 370 - > 260 260 + 'github-actions' 261 261 + ) 262 262 + } 263 263 + > 264 264 + {copiedIndex === 'github-actions' ? <Check size={14} /> : <Copy size={14} />} 265 265 + </button> 266 266 + </div> 267 267 + <pre className="api-code-block"> 371 268 {`name: Deploy to boop.cat 372 269 373 270 on: ··· 402 299 For GitLab CI/CD, add this to your <code>.gitlab-ci.yml</code>: 403 300 </div> 404 301 405 405 - <div style={{ position: 'relative' }}> 406 406 - <button 407 407 - className="iconBtn" 408 408 - style={{ 409 409 - position: 'absolute', 410 410 - top: 8, 411 411 - right: 8, 412 412 - width: 28, 413 413 - height: 28, 414 414 - borderRadius: '50%', 415 415 - background: 'var(--bg-secondary)', 416 416 - border: 'none' 417 417 - }} 418 418 - onClick={() => 419 419 - copyToClipboard( 420 420 - `deploy: 302 302 + <div> 303 303 + <div className="api-example-header"> 304 304 + <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)' }}>.gitlab-ci.yml</span> 305 305 + <button 306 306 + className="api-copy-btn" 307 307 + onClick={() => 308 308 + copyToClipboard( 309 309 + `deploy: 421 310 stage: deploy 422 311 image: curlimages/curl 423 312 script: 424 313 - curl -X POST -H "Authorization: Bearer $BOOP_CAT_API_KEY" ${baseUrl}/api/v1/sites/YOUR_SITE_ID/deploy?wait=true 425 314 only: 426 315 - main`, 427 427 - 'gitlab-ci' 428 428 - ) 429 429 - } 430 430 - > 431 431 - {copiedIndex === 'gitlab-ci' ? <Check size={14} /> : <Copy size={14} />} 432 432 - </button> 433 433 - <pre 434 434 - style={{ 435 435 - background: 'var(--bg-tertiary, #1e1e1e)', 436 436 - padding: 16, 437 437 - borderRadius: 8, 438 438 - fontFamily: 'monospace', 439 439 - fontSize: 12, 440 440 - color: 'var(--code-text, #e0e0e0)', 441 441 - overflowX: 'auto', 442 442 - margin: 0 443 443 - }} 444 444 - > 316 316 + 'gitlab-ci' 317 317 + ) 318 318 + } 319 319 + > 320 320 + {copiedIndex === 'gitlab-ci' ? <Check size={14} /> : <Copy size={14} />} 321 321 + </button> 322 322 + </div> 323 323 + <pre className="api-code-block"> 445 324 {`deploy: 446 325 stage: deploy 447 326 image: curlimages/curl ··· 470 349 A simple Node.js script to trigger deployments: 471 350 </div> 472 351 473 473 - <div style={{ position: 'relative' }}> 474 474 - <button 475 475 - className="iconBtn" 476 476 - style={{ 477 477 - position: 'absolute', 478 478 - top: 8, 479 479 - right: 8, 480 480 - width: 28, 481 481 - height: 28, 482 482 - borderRadius: '50%', 483 483 - background: 'var(--bg-secondary)', 484 484 - border: 'none' 485 485 - }} 486 486 - onClick={() => 487 487 - copyToClipboard( 488 488 - `const siteId = 'YOUR_SITE_ID'; 352 352 + <div> 353 353 + <div className="api-example-header"> 354 354 + <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)' }}>deploy.js</span> 355 355 + <button 356 356 + className="api-copy-btn" 357 357 + onClick={() => 358 358 + copyToClipboard( 359 359 + `const siteId = 'YOUR_SITE_ID'; 489 360 const apiKey = process.env.BOOP_CAT_API_KEY; 490 361 491 362 async function deploy() { ··· 501 372 } 502 373 503 374 deploy().catch(console.error);`, 504 504 - 'node-script' 505 505 - ) 506 506 - } 507 507 - > 508 508 - {copiedIndex === 'node-script' ? <Check size={14} /> : <Copy size={14} />} 509 509 - </button> 510 510 - <pre 511 511 - style={{ 512 512 - background: 'var(--bg-tertiary, #1e1e1e)', 513 513 - padding: 16, 514 514 - borderRadius: 8, 515 515 - fontFamily: 'monospace', 516 516 - fontSize: 12, 517 517 - color: 'var(--code-text, #e0e0e0)', 518 518 - overflowX: 'auto', 519 519 - margin: 0 520 520 - }} 521 521 - > 375 375 + 'node-script' 376 376 + ) 377 377 + } 378 378 + > 379 379 + {copiedIndex === 'node-script' ? <Check size={14} /> : <Copy size={14} />} 380 380 + </button> 381 381 + </div> 382 382 + <pre className="api-code-block"> 522 383 {`const siteId = 'YOUR_SITE_ID'; 523 384 const apiKey = process.env.BOOP_CAT_API_KEY; 524 385 ··· 549 410 For Tangled.org (Spindle), create only <code>.tangled/workflows/deploy.yml</code>: 550 411 </div> 551 412 552 552 - <div style={{ position: 'relative' }}> 553 553 - <button 554 554 - className="iconBtn" 555 555 - style={{ 556 556 - position: 'absolute', 557 557 - top: 8, 558 558 - right: 8, 559 559 - width: 28, 560 560 - height: 28, 561 561 - borderRadius: '50%', 562 562 - background: 'var(--bg-secondary)', 563 563 - border: 'none' 564 564 - }} 565 565 - onClick={() => 566 566 - copyToClipboard( 567 567 - `when: 413 413 + <div> 414 414 + <div className="api-example-header"> 415 415 + <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)' }}> 416 416 + .tangled/workflows/deploy.yml 417 417 + </span> 418 418 + <button 419 419 + className="api-copy-btn" 420 420 + onClick={() => 421 421 + copyToClipboard( 422 422 + `when: 568 423 - event: ["push"] 569 424 branch: ["main"] 570 425 ··· 583 438 curl -X POST \\ 584 439 -H "Authorization: Bearer $BOOP_CAT_API_KEY" \\ 585 440 ${baseUrl}/api/v1/sites/YOUR_SITE_ID/deploy?wait=true`, 586 586 - 'tangled-ci' 587 587 - ) 588 588 - } 589 589 - > 590 590 - {copiedIndex === 'tangled-ci' ? <Check size={14} /> : <Copy size={14} />} 591 591 - </button> 592 592 - <pre 593 593 - style={{ 594 594 - background: 'var(--bg-tertiary, #1e1e1e)', 595 595 - padding: 16, 596 596 - borderRadius: 8, 597 597 - fontFamily: 'monospace', 598 598 - fontSize: 12, 599 599 - color: 'var(--code-text, #e0e0e0)', 600 600 - overflowX: 'auto', 601 601 - margin: 0 602 602 - }} 603 603 - > 441 441 + 'tangled-ci' 442 442 + ) 443 443 + } 444 444 + > 445 445 + {copiedIndex === 'tangled-ci' ? <Check size={14} /> : <Copy size={14} />} 446 446 + </button> 447 447 + </div> 448 448 + <pre className="api-code-block"> 604 449 {`when: 605 450 - event: ["push"] 606 451 branch: ["main"]

+115

client/src/styles.css

reviewed

··· 1251 1251 opacity: 0.6; 1252 1252 } 1253 1253 1254 1254 + @media (max-width: 640px) { 1255 1255 + .footer-inner { 1256 1256 + flex-direction: column; 1257 1257 + gap: 20px; 1258 1258 + text-align: center; 1259 1259 + } 1260 1260 + 1261 1261 + .footer-links { 1262 1262 + flex-wrap: wrap; 1263 1263 + justify-content: center; 1264 1264 + gap: 16px 24px; 1265 1265 + } 1266 1266 + } 1267 1267 + 1254 1268 .content-section { 1255 1269 animation: fadeInUp 0.6s ease-out backwards; 1256 1270 } ··· 4281 4295 width: 100%; 4282 4296 } 4283 4297 } 4298 4298 + 4299 4299 + /* ApiDocs Responsive Styles */ 4300 4300 + .api-stats-grid { 4301 4301 + display: flex; 4302 4302 + gap: 12px; 4303 4303 + flex-wrap: wrap; 4304 4304 + } 4305 4305 + 4306 4306 + .api-stat-card { 4307 4307 + padding: 8px 16px; 4308 4308 + background: var(--bg-secondary); 4309 4309 + border-radius: 8px; 4310 4310 + font-size: 13px; 4311 4311 + } 4312 4312 + 4313 4313 + .api-endpoint-item { 4314 4314 + border-bottom: 1px solid var(--border); 4315 4315 + padding-bottom: 24px; 4316 4316 + margin-bottom: 24px; 4317 4317 + } 4318 4318 + 4319 4319 + .api-endpoint-item:last-child { 4320 4320 + border-bottom: none; 4321 4321 + padding-bottom: 0; 4322 4322 + margin-bottom: 0; 4323 4323 + } 4324 4324 + 4325 4325 + .api-endpoint-header { 4326 4326 + display: flex; 4327 4327 + align-items: center; 4328 4328 + gap: 12px; 4329 4329 + margin-bottom: 8px; 4330 4330 + flex-wrap: wrap; 4331 4331 + } 4332 4332 + 4333 4333 + .api-method-badge { 4334 4334 + padding: 4px 10px; 4335 4335 + border-radius: 6px; 4336 4336 + font-size: 12px; 4337 4337 + font-weight: 700; 4338 4338 + font-family: monospace; 4339 4339 + } 4340 4340 + 4341 4341 + .api-path { 4342 4342 + font-size: 14px; 4343 4343 + font-weight: 500; 4344 4344 + word-break: break-all; 4345 4345 + } 4346 4346 + 4347 4347 + .api-example-header { 4348 4348 + display: flex; 4349 4349 + justify-content: space-between; 4350 4350 + align-items: center; 4351 4351 + margin-bottom: 6px; 4352 4352 + } 4353 4353 + 4354 4354 + .api-code-block { 4355 4355 + background: var(--bg-tertiary, #1e1e1e); 4356 4356 + padding: 16px; 4357 4357 + border-radius: 8px; 4358 4358 + font-family: monospace; 4359 4359 + font-size: 12px; 4360 4360 + color: var(--code-text, #e0e0e0); 4361 4361 + overflow-x: auto; 4362 4362 + margin: 0; 4363 4363 + white-space: pre-wrap; 4364 4364 + word-break: break-word; 4365 4365 + } 4366 4366 + 4367 4367 + .api-copy-btn { 4368 4368 + width: 28px; 4369 4369 + height: 28px; 4370 4370 + border-radius: 50%; 4371 4371 + background: var(--bg-secondary); 4372 4372 + border: none; 4373 4373 + display: flex; 4374 4374 + align-items: center; 4375 4375 + justify-content: center; 4376 4376 + cursor: pointer; 4377 4377 + color: var(--card-text); 4378 4378 + transition: background 0.2s; 4379 4379 + } 4380 4380 + 4381 4381 + .api-copy-btn:hover { 4382 4382 + background: var(--sidebar-hover); 4383 4383 + } 4384 4384 + 4385 4385 + @media (max-width: 600px) { 4386 4386 + .api-stats-grid { 4387 4387 + flex-direction: column; 4388 4388 + gap: 8px; 4389 4389 + } 4390 4390 + 4391 4391 + .api-stat-card { 4392 4392 + width: 100%; 4393 4393 + } 4394 4394 + 4395 4395 + .api-example-header { 4396 4396 + margin-bottom: 8px; 4397 4397 + } 4398 4398 + }