[joshchen-dev]

Summary

A public product page for Raidy, deployed with GitHub Pages: / is the product page and /demo/ is the live demo from #17.

• The hero is the product. The real availability grid sits next to a faithful copy of the Discord post, which follows renderAnnouncement. The visitor plays the "You" row, and every tap updates the counts and status in both, using the server's rule that a confirmed night needs everyone.
• The rest of the page:
  • six terse features
  • three setup steps
  • screenshots of the real app in light and dark, captured from the demo at deploy time and kept out of git
  • an open-source section
  • a short FAQ
  • an Open Graph image for link previews
• Build:
  • vite.product.config.ts builds web/product/. The page reuses the app's tokens, components and demo sample data.
  • npm run build:pages builds the page and the demo into web/dist-pages.
  • npm run screenshots captures the screenshots.
• Deploy: .github/workflows/pages.yml captures screenshots, builds and deploys on every merge to main. CI also checks that the site builds.

Release v0.0.18.

One-time setup

1. In the repo's Settings → Pages, set Source to GitHub Actions.
2. Point a subdomain's CNAME record at joshchen-dev.github.io.
3. After the first deploy, set that subdomain as the Custom domain and tick Enforce HTTPS.

The site uses root paths, so it needs the custom domain rather than joshchen-dev.github.io/raidy/.

Tests

A new Playwright product project checks:

• the hero and its links
• tapping a night updates the Discord post ("8/8 · Confirmed" → "7/8 · Attention required")
• no sideways scroll on a phone

npm run check, format:check, build, build:pages, screenshots, and the full Playwright suite (31 passed) all pass locally. I checked the page with screenshots at 1440 px and on a Pixel 7, in light and dark.