0068: The website's pages are components

On this page

Status: accepted. Replaces the port in 0023.

Context

The landing, Terms and Privacy pages were generated from their canvas boards by scripts/port-boards.py, which had to reproduce src/boards byte for byte. That kept the boards honest, but the landing grew into one 128 KB string with no components: the app window was drawn six times, its interactions ran on hidden inputs read with :has(), and the boards can't hold the scripts the new pages need. The site is becoming a home page and twelve feature pages, each with a scene that plays in the browser (0069).

Decision

  • Pages are Astro components and content. src/layouts/Marketing.astro holds the header, footer and theme; src/components/site/ the shared parts; src/components/kit/ the drawn pieces of Short Leash's window; src/scenes/ each scene. Feature pages and the legal pages are content collections (features, legal) in MDX, so their words live apart from their layout.
  • The boards stay the design, first. A page's board on the "Short Leash — Paper UI" canvas, on its Website and brand page, changes before or with the code. The site's stylesheets (site.css, kit.css, motion.css) are the same files the boards use, so a board and its page draw alike.
  • The port is gone: scripts/port-boards.py, the boards script, src/boards/ and Board.astro.
  • The docs share the header. Starlight's Header is overridden with the site's header; its footer stays the copyright line.

Consequences

  • Copy and structure are edited in the repo like the app's screens, reviewed in pull requests, and checked by the build.
  • A board can drift from its page, as an app board can from its screen; a change to either has to update both.
  • A page's board can also be generated from the built site, its markup and stylesheets at the final frame with the real screenshots, so it shows exactly what ships. The redesign's feature pages, Features, Security, Download, Terms and Privacy got their boards that way, after the first wave was designed on the canvas.
  • Scenes, pages and the docs reuse one set of components instead of copies.