Rebuild the demo site

[laat]

What

A new demo site for <chess-board>, replacing the list of static examples in index.html. The Preview workflow will post a Cloudflare Pages URL for this branch.

The page

• Hero: the Opera Game (Morphy, 1858) plays itself on a framed board. Every ply is one board.move(from, to) call on the same element; castling is two. Play/pause, step and jump controls, a chess-book style move list you can click into, and it pauses when scrolled out of view. Autoplay is skipped under prefers-reduced-motion.
• Quick start: install, import, markup, each with a copy button, plus a pointer to the import-map instructions for the no-bundler case.
• Playground: one board with toggles for frame, reverse and unicode, preset positions (start, Scholar's mate, Opera Game and Immortal Game finals, Lucena, empty), a FEN field that reports what the parser rejects, and a size slider. The matching markup is generated live with a copy button.
• API: each property and method is a button that runs against a live board and logs the return value or the thrown error to a console panel, including the two failure cases (nine ranks, z9). Attribute and piece reference tables follow.
• Sizing: an inline board in a sentence, and the same position at three sizes.

Design

The board's wood colours are fixed by the component, so the page is the table it sits on: felt green bands top and bottom with a faint checker texture, buff paper in between, the board's own wood as the only accent (current move, play button). Bricolage Grotesque for headings, Source Serif 4 for text and the move list, JetBrains Mono for code, loaded from Google Fonts with local fallbacks. Light and dark colour schemes, keyboard focus styles, and a responsive layout down to phone widths.

Files

• index.html rewritten; styles and script moved to demo/demo.css and demo/demo.js (plain ES module, imports the component from src/ so pnpm dev stays live).
• public/favicon.svg: the knight on a wood tile.
• readme.md: one paragraph on where the demo lives.

The build (pnpm build:pages), Pages and preview workflows are unchanged. pnpm typecheck and pnpm test pass. Checked in headless Chromium at 1360px and 390px, light and dark.

Follow-ups filed while building this

• Styling hooks: square colours are hard-coded and squares cannot be targeted from outside #21 styling hooks (themable square colours, ::part on squares for last-move highlights)
• Accessibility: the position has no text alternative #22 accessible text alternative for the position

🤖 Generated with Claude Code

https://claude.ai/code/session_014hfUBeWECmYHCYf7BpgawG

---

Generated by Claude Code

[github-actions]

Preview for 3763e27: https://2e17724f.chess-board-4mh.pages.dev

Branch alias (always the latest push): https://claude-web-component-demo-si.chess-board-4mh.pages.dev