Updating the docs

This site is a Nextra docs app in apps/docs.


npm run dev:docs        # http://localhost:3002
npm run build --workspace=apps/docs

The production build also runs Pagefind to build the search index into public/_pagefind. That folder is generated and ignored by git, so search only works in a production build (npm run build then npm run start), not in next dev.

Layout

Path	What
`content/*/.mdx`	Pages. The file path is the URL.
`content/**/_meta.ts`	Sidebar order and titles for each folder.
`public/screenshots/*.webp`	App screenshots.
`components/screenshots.json`	Width and height of each screenshot.
`components/screenshot.tsx`	The `<Screenshot>` component, available in every page without import.

Screenshots

Use the <Screenshot> component:


<Screenshot
  name="owner-map-editor"
  alt="Describe what the screenshot shows"
  caption="Optional caption"
/>

name must be a key in components/screenshots.json, which TypeScript checks. Portrait images render at phone width, and small crops at their natural size.

To take new screenshots, run the play app fully locally with development auth and drive it with Playwright (Chromium is enough). The existing set was captured at:

Owner: a 1440 × 900 viewport at 2× scale, saved at 1600 pixels wide;
Player: a 390 × 844 mobile viewport at 3× scale with touch enabled, saved at 780 pixels wide.

Hide the Next.js dev indicator before capturing (nextjs-portal { display: none }). Convert to WebP (quality around 80), put the files in public/screenshots/, and add each file’s size to components/screenshots.json.