Migrate site to Astro

[maxelkins]

Migrate site to Astro

Rewrites the project site at /website using Astro, replacing the previous vanilla HTML/JS site at /site.

What changed

New Astro project (/website)

• Astro 6 with TypeScript, Prettier (with prettier-plugin-astro), and a VS Code dev launch config
• .tool-versions updated to Node 24.14.0

Pages & components

• index.astro — homepage/about page
• demo.astro — interactive terminal demo
• Layout.astro — shared HTML shell
• Terminal.astro — wires data and DOM refs to terminal logic

Styles

• Split into separate files: reset.css, variables.css, global.css, utilities.css, compositions.css

Scripts — split and modularised

• picker.ts — interactive picker UI (pure module, no globals)
• terminal.ts — terminal emulator logic (pure module, no globals)

Data generation

• generate-data.sh now outputs to website/src/data/data.js using ES module syntax for use throughout the Astro site
• Version number for the about and demo pages is pulled from data.js

VHS tapes

• Updated to output demo GIFs to both demo/ and website/src/assets/ (for Astro asset optimisation)

E2E tests (Playwright)

• Migrated from site/e2e/ to website/tests/
• Added Firefox and WebKit browser coverage
• Improved copy-to-clipboard test (Chromium only, due to clipboard API inconsistencies in other browsers)
• New GitHub Actions workflow for running tests on PRs

Not included in this PR

• GitHub Pages deployment - the workflow needs updating to build and deploy from /website; see the Astro deployment docs
• Release script - still needs to call generate-data.sh
• VHS gif deduplication - currently GIFs exist in both demo/ and website/src/assets/; the README references demo/. Decision pending on whether to consolidate
• Delete old site - Left this until review is done and/or can be done in a seperate PR with the deployment changes.

Todos

• Init astro
• Migrate/upgrade .tool-versions
• Migrate pages
• Migrate styles
• Migrate js
  • Split UI logic and terminal rendering logic
• Migrate data-generation
  • Now outputs to website/src/data to be used throughout.
  • Now generates using js modules syntax for use on website
  • Ensure release script runs the data-generation script
  • Version number of about and demo is pulled from data.js
• Migreate/update favicon
• Migrate e2e test (still using playwright)
  • Add firefox and webkit coverage
  • Improved copy to clipboard test
• Update project README
• Update site README
• Update GithHub pages deployment
• Update VHS to auto output to Astro assets
  • Decide of we want to dedup demo gif (only keep ones in website folder)

[grega]

@maxelkins I'll happily take the data generation and release script tasks (along with any e2e tests that need doing).

[maxelkins]

@grega nice one 👍

Currently the astro site is functional 🙌

• Still a few bits that would be good to do, but might do that in another PR. e.g. the current js for terminal and picker are purposely bypassing astros post-processing just to get stuff working.
• There's a question on how much you'd like to keep that logic vanilla and isolated vs componentising and using astro templating e.g. generating the options in the sidebar.

I've moved over the e2e tests too and made a couple changes:

• Expanded browser testing to include firefox + webkit
• Added test for checking the copy button copy to clipboard (as well as the UI feedback)
  • Made this so it only checks in in chrome though since its not supported in the others

Not touched the data-generation or release stuff yet.

[maxelkins]

@grega Think the migration is all done now!

New astro site is at /website

What I haven't done:

• Anything to do with deployment. I don't know enough/have access to the github settings so think it's better for you to update that? (docs if sticking with github pages).
• Added anything on the project readme, since it didn't mention the site before. But I've created a new website readme.
• Deduped the vhs gif outputs - currently the readme is relying on it being where it is. We could reference the website one (which is there as it gets optimised by Astro) or just leave it in both places. It makes running vhs clearer when it generates in the same dir too imo.

I'll update the PR description with more detail on changes and why. Feel free to feedback!

[grega]

@maxelkins this is great 👍 I'll happily get this merged, and work on the final few bits separately.

[grega]

• Release process updated for Astro
• Demo GIFs are now copied into the relevant Astro dir at the same time as generating the demo's data.js file (so there's no duplication of GIFs in Git at least - they only persist in the demo/ dir), this happens automatically when Astro is built / served.
• Popped a brief note in the root README about the website