Host the H5P build page and the library bundles at /h5p/

Merged
AL
5h ago
+1801-14

Closes #7.

The H5P build page and the library bundles move here from embed-my.github.io, in this site's own look.

WasNow
embed-my.github.io/build/h5p/build/
embed-my.github.io/bundles//h5p/bundles/

What changed

  • src/h5p/build/, the page. Its two scripts are embed-my's, unchanged except the stylesheet import and the comments: its styles are now the site's own, a section of site.css. The markup keeps every id and text, inside the docs header's brand, theme switch and footer. The heading is now "Build an H5P activity", the same as the tab title, so it fits on two lines on a phone.
  • vite.config.ts. It runs after Eleventy (pnpm build is tsc && eleventy && vite build). It bundles the page's script with the player, its runtime and the library pack into /h5p/assets/, with the runtime's licence and notice and the pack's licence list beside them. It writes /h5p/bundles/ as embed-my does. _site/ is Eleventy's too, so it empties only the folders it writes.
  • The player's Service Worker lands in /h5p/assets/, so its scope is /h5p/assets/h5p/. The home page and the pdfjs-viewer docs are outside it, and a test checks the scope.
  • base.njk writes an optional csp front-matter value as a <meta> policy, first in <head>. An Eleventy transform adds the hash of each inline script on such a page to script-src, so the policy covers the site's inline color-scheme script too, as embed-my's Vite plugin does for its pages. The build page sets embed-my's policy.
  • The theme switch's markup moves to theme-switch.njk, which the docs layout now includes. The home page's and the docs' HTML are byte-identical before and after.
  • CI: build.yml now runs the browser tests on pull requests. pages.yml is unchanged, and the pnpm build it runs now writes /h5p/ too.
  • Size: _site/ grows from 13 MB to 143 MB: the bundles are 113 MB and the page's assets 17 MB, well within Pages' 1 GB.

Tests

Seven Playwright tests run against the built site:

  • embed-my's five tests for the page and its two for the bundles, at the new paths;
  • new checks that the page has its policy, that site.js runs under it (the theme switch shows), and that the worker's scope is /h5p/assets/h5p/.

All pass locally and in CI. Screenshots in light and dark at 1280 and 390 px were checked, and none had a console error.

Mutation checks:

  • Without the transform's hash, the browser refuses the inline script and the first test fails.
  • The test's PNG is now a valid one (the old one failed its CRC and zlib check), and the test checks the picture reaches the content. Chromium decoded the old PNG too, so this assertion can't tell the two apart.

Review

cubic's four findings, in 5f4902d:

  • the policy first, with hashes;
  • the valid PNG;
  • the README calling embed-my's redirect a step of its own;
  • unzip documented as a prerequisite of pnpm e2e, answered in its thread.

Merge order

  1. This PR first.
  2. Once it is deployed, embed-my's PR that turns /build into a redirect carrying #source=.
  3. Then the h5p-author skill's addresses in h5p-offline-player.

embed-my keeps serving /bundles/ until the next pack release, for copies of the skill installed before the move.


Summary by cubic

Hosts the H5P build page and the library bundles at /h5p/build/ and /h5p/bundles/, moved from embed-my.github.io and now styled like the rest of this site.

  • Vite bundles the page's script with the player, runtime, and library pack into /h5p/assets/, where the Service Worker's scope covers only that folder.
  • base.njk gains an optional csp front-matter value, emitted as a <meta> policy first in <head>; an Eleventy transform hashes each inline script into script-src, since GitHub Pages sends no headers.
  • Adds seven Playwright tests: the page builds, plays, and downloads sources pasted or carried in a link's fragment, and /h5p/bundles/ builds a quiz in an empty folder. build.yml now runs them on pull requests.
  • _site/ grows to 143 MB, within Pages' 1 GB limit.

Migration

  • Existing links with #source= fragments keep working; embed-my's /build will redirect here once this is deployed.
  • embed-my keeps serving /bundles/ until the next pack release, for copies of the h5p-author skill installed before the move.