# Deploying this on a server

This project is **100% static** — HTML, CSS, JS, PNG, SVG. No build step, no Node runtime, no
database. Upload the folder and point a web server at it.

## Requirements

- Any static web server (nginx, Apache, Caddy, GitHub Pages, Netlify, S3 + CloudFront, or
  `python3 -m http.server` for a local check).
- **It must be served over HTTP(S), not opened as `file://`.** The UI kits `fetch()` their
  `.jsx` sources and the compiled bundle; `file://` blocks those requests and the pages stay blank.
- Outbound internet access from the *browser* for two CDNs:
  - `fonts.googleapis.com` / `fonts.gstatic.com` — Baloo 2, Fredoka, Nunito
  - `unpkg.com` — React 18.3.1, ReactDOM, Babel standalone (pinned, with integrity hashes)

  If the server must run air-gapped, vendor those five files locally and rewrite the
  `<script src>` / `@import` URLs in `tokens/fonts.css` and the kit `index.html` files.

## Quick local check

```bash
cd popeat-design-system
python3 -m http.server 8080
# then open:
#   http://localhost:8080/ui_kits/website/index.html
#   http://localhost:8080/ui_kits/posters/index.html
```

## nginx example

```nginx
server {
  listen 80;
  server_name design.popeat.es;
  root /var/www/popeat-design-system;
  index readme.md;

  # .jsx and .d.ts are fetched as text by the kits
  types { text/jsx jsx; }
  default_type application/octet-stream;

  location / { try_files $uri $uri/ =404; }

  # long cache for immutable art, short for source we still iterate on
  location ~* \.(png|webp|svg|woff2)$ { expires 30d; add_header Cache-Control "public"; }
  location ~* \.(html|css|js|jsx)$    { expires 5m;  add_header Cache-Control "public"; }
}
```

Apache needs nothing beyond default static serving; add
`AddType text/jsx .jsx` if your build lints MIME types.

## What to publish where

| Audience | Entry point |
|---|---|
| Designers / agents | `readme.md` + `HANDOFF.md` |
| Stakeholders reviewing the site | `ui_kits/website/index.html` |
| Print / social review | `ui_kits/posters/index.html` |
| Developers consuming the system | link **`styles.css`** (it `@import`s every token file) and load `_ds_bundle.js` |

## Performance notes

- The kits use **in-browser Babel** — fine for review and prototyping, wrong for production. If you
  ship any of this to real traffic, precompile the `.jsx` and drop the `babel.min.js` tag; the
  browser console's "in-browser Babel transformer" warning is expected here and only here.
- Total payload is dominated by the poster/menu PNGs in `assets/`. Convert to WebP before putting
  them on a public marketing page.
- Serve with gzip/brotli enabled; everything except the images is text.

## Not included

No server-side code exists, so **the contact form and the booking modal do not send anything** —
they are prototype interactions that show a success state locally. Wiring them up needs a real
endpoint (or the WhatsApp deep link, which is what the live business actually uses:
`https://wa.me/34689743874`).