Initial commit: Full Crawl API implementation

frontend/app/docs/page.tsx

@@ -0,0 +1,106 @@
+import Link from 'next/link'
+
+export default function Docs() {
+  return (
+    <main style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 20px' }}>
+      <nav style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 60 }}>
+        <Link href="/" style={{ fontSize: 24, fontWeight: 700, color: '#fff', textDecoration: 'none' }}>Crawl API</Link>
+        <Link href="/" style={{ color: '#888', textDecoration: 'none' }}>← Back</Link>
+      </nav>
+
+      <h1 style={{ fontSize: 42, marginBottom: 16 }}>API Documentation</h1>
+      <p style={{ color: '#888', marginBottom: 48 }}>
+        API reference for Crawl API — 9 endpoints for crawling, scraping, screenshots, PDFs, and more.
+      </p>
+
+      <section style={{ marginBottom: 48 }}>
+        <h2 style={{ fontSize: 24, marginBottom: 16 }}>Base URL</h2>
+        <code style={{ background: '#111', padding: '12px 16px', borderRadius: 8, display: 'block' }}>
+          https://crawlapi.dev
+        </code>
+      </section>
+
+      <section style={{ marginBottom: 48 }}>
+        <h2 style={{ fontSize: 24, marginBottom: 16 }}>Authentication</h2>
+        <p style={{ color: '#888', marginBottom: 12 }}>All requests require an API key sent via the x-api-key header.</p>
+        <code style={{ background: '#111', padding: '12px 16px', borderRadius: 8, display: 'block' }}>
+          x-api-key: YOUR_API_KEY
+        </code>
+      </section>
+
+      <section style={{ marginBottom: 48 }}>
+        <h2 style={{ fontSize: 24, marginBottom: 16 }}>Request format</h2>
+        <p style={{ color: '#888', marginBottom: 12 }}>Every endpoint accepts a POST request with a JSON body. The url field is always required.</p>
+        <pre style={{ background: '#111', padding: 16, borderRadius: 8, overflow: 'auto' }}>
+{`curl -X POST https://crawlapi.dev/api/screenshot \\
+  -H "Content-Type: application/json" \\
+  -H "x-api-key: YOUR_API_KEY" \\
+  -d '{"url": "https://example.com"}'`}
+        </pre>
+      </section>
+
+      <section style={{ marginBottom: 48 }}>
+        <h2 style={{ fontSize: 24, marginBottom: 16 }}>Endpoints</h2>
+        {[
+          { path: '/api/crawl', desc: 'Full JS-rendered page crawl' },
+          { path: '/api/content', desc: 'Raw HTML content' },
+          { path: '/api/screenshot', desc: 'PNG screenshot' },
+          { path: '/api/pdf', desc: 'PDF export' },
+          { path: '/api/markdown', desc: 'Markdown extraction' },
+          { path: '/api/snapshot', desc: 'HTML + screenshot' },
+          { path: '/api/scrape', desc: 'CSS selector extraction' },
+          { path: '/api/json', desc: 'Structured JSON' },
+          { path: '/api/links', desc: 'Extract all links' },
+        ].map((ep) => (
+          <div key={ep.path} style={{ background: '#111', borderRadius: 8, padding: 16, marginBottom: 12 }}>
+            <span style={{ color: '#4ade80', fontWeight: 600 }}>POST</span>{' '}
+            <code>{ep.path}</code>
+            <div style={{ color: '#888', marginTop: 4 }}>{ep.desc}</div>
+          </div>
+        ))}
+      </section>
+
+      <section style={{ marginBottom: 48 }}>
+        <h2 style={{ fontSize: 24, marginBottom: 16 }}>Rate limits</h2>
+        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+          <tbody>
+            {[
+              { label: 'Requests per minute', value: '60' },
+              { label: 'Max concurrent', value: '10' },
+              { label: 'Request timeout', value: '30s' },
+            ].map((row) => (
+              <tr key={row.label} style={{ borderBottom: '1px solid #222' }}>
+                <td style={{ padding: '12px 0', color: '#888' }}>{row.label}</td>
+                <td style={{ padding: '12px 0', textAlign: 'right' }}>{row.value}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </section>
+
+      <section>
+        <h2 style={{ fontSize: 24, marginBottom: 16 }}>Error handling</h2>
+        <pre style={{ background: '#111', padding: 16, borderRadius: 8, overflow: 'auto' }}>
+{`{ "success": false, "error": "Missing or invalid API key" }`}
+        </pre>
+        <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: 16 }}>
+          <tbody>
+            {[
+              { code: '400', meaning: 'Missing or invalid URL / bad options' },
+              { code: '401', meaning: 'Missing or invalid API key' },
+              { code: '403', meaning: 'Insufficient credits' },
+              { code: '405', meaning: 'Wrong HTTP method (use POST)' },
+              { code: '429', meaning: 'Rate limit exceeded' },
+              { code: '500', meaning: 'Server error' },
+            ].map((row) => (
+              <tr key={row.code} style={{ borderBottom: '1px solid #222' }}>
+                <td style={{ padding: '12px 0' }}>{row.code}</td>
+                <td style={{ padding: '12px 0', color: '#888' }}>{row.meaning}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </section>
+    </main>
+  )
+}