fix(site): one nav, one shell, one footer on every page #33
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: CI | |
| # publish.yml only runs on v* tags, so nothing verified ordinary pushes or PRs. | |
| # This builds the framework and runs the accessibility gate on every change, so | |
| # a contrast regression or an undefined token fails before it reaches a release. | |
| on: | |
| push: | |
| branches: ['**'] | |
| pull_request: | |
| jobs: | |
| build: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - uses: actions/checkout@v5 | |
| - uses: actions/setup-node@v5 | |
| with: | |
| node-version: '22' | |
| - name: Install dependencies | |
| run: npm ci | |
| - name: Build CSS and JS | |
| run: npm run build | |
| # Asserts every var(--retro-*) resolves and every text/surface pair in | |
| # both themes clears WCAG AA. Fails the job on any regression. | |
| # Unit tests first: they run in about a second, so a broken bundle fails | |
| # here rather than after a Chromium download. | |
| - name: Unit tests | |
| run: npm test | |
| - name: Accessibility gate | |
| run: npm run check:a11y | |
| # 3.0.0 dropped `border-radius: 0 !important` from the `*` reset, which | |
| # had been suppressing 40-odd hardcoded radius declarations nobody had | |
| # ever seen render. They all came alive at once and shipped a Windows 95 | |
| # framework with 999px nav pills. Static, so it also covers components | |
| # that appear on no demo page -- which is how they accumulated unseen. | |
| - name: Static CSS gate | |
| run: npm run check:css | |
| # check:a11y proves the tokens are sound; this proves the pages built from | |
| # them are. Every defect that reached production in the 2.x line -- a | |
| # modal that threw, tables 1,000,000px wide, input glyphs 19px off centre, | |
| # white-on-white text in dark mode -- was invisible to the token gate and | |
| # found by hand. Needs a real browser, so it installs one. | |
| - name: Install Chromium for the page gate | |
| run: npx playwright install --with-deps chromium | |
| - name: Rendered-page gate | |
| run: npm run check:pages | |
| # check:pages measures what a page looks like; this measures whether it | |
| # can be operated. The framework shipped carousel dots, rating stars, tag | |
| # removes and a file input that a mouse could drive and a keyboard could | |
| # not -- none of it visible to a layout or contrast check. | |
| - name: Keyboard-operability gate | |
| run: npm run check:keyboard | |
| # dist/ is gitignored, so there is no committed artifact to diff against. | |
| # This just proves the build produced what package.json promises to ship. | |
| - name: Verify build output | |
| run: | | |
| for f in dist/retro.css dist/retro.min.css dist/retro.js dist/retro.min.js; do | |
| test -s "$f" || { echo "missing or empty: $f"; exit 1; } | |
| echo "ok $(wc -c < "$f") bytes $f" | |
| done |