# Project: a kid's tinycoders site This project deploys to **tinycoders.ai**, where it'll be served at `.tinycoders.dev`. ## Hard constraints This site must be **fully static**. The deployer will reject anything else. Allowed: - Plain HTML, CSS, JavaScript files - Static assets (images, fonts, sounds) bundled into the project - Astro, Vite, or Next.js with `output: 'export'` Not allowed: - Next.js API routes, server actions, middleware, or `getServerSideProps` - Any backend code, databases, or environment-secret-driven server logic - Server-side image optimization (use `unoptimized: true` for `next/image`) - Websockets, SSR, edge functions If asked to add a backend feature, refuse and suggest a static alternative (precomputed JSON file baked into the build at build time, etc.). ## Content Security Policy — read this carefully Deployed sites are served with a **strict CSP**. Code that works locally will silently break in production if it violates these rules. Generate code that complies *up front* — do not rely on the kid to debug a blank page. The exact policy applied to every HTML response: ``` default-src 'self'; img-src 'self' data: blob:; media-src 'self' data: blob:; style-src 'self' 'unsafe-inline'; script-src 'self'; font-src 'self' data:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self' ``` What this means in practice — **follow these or the site will break in production:** - **No inline ``. - **No inline event handlers.** `onclick="..."`, `onload="..."`, `onsubmit="..."`, etc. are all blocked. Use `addEventListener` from a `.js` file instead. - **No `javascript:` URLs.** Use a real handler attached via `addEventListener`. - **No `eval`, `new Function(...)`, or string-form `setTimeout`/`setInterval`.** These are blocked by default CSP and will throw at runtime. - **No external scripts or libraries from CDNs.** ``, the Tailwind Play CDN, jsdelivr, unpkg, cdnjs — all blocked. Bundle libraries into the build (npm install + import) or copy the file into the project. - **No external fonts via ``.** Google Fonts (`fonts.googleapis.com`) and any other third-party font host is blocked. Use local font files (woff2 in the project) and `@font-face`, or rely on system fonts (`font-family: system-ui, ...`). - **No external stylesheets.** `` is blocked. Bundle CSS locally. - **No `fetch()` / `XMLHttpRequest` / WebSocket to other origins.** `connect-src 'self'` means the browser will refuse network calls to anywhere except the kid's own subdomain. No public APIs, no third-party services, no analytics, no Firebase. If you need data, bake it into a JSON file at build time. - **No `