laywill / laywill/laywill.github.io
ci: nothing checks images/og-card.jpg still matches build-og-card.mjs
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 0
- Forks
- 0
- Avg merge
- 8h 17m
- Merged PRs (30d)
- 58
Description
Split out of the #168 review.
assets/css/main.css is generated-and-committed, and css.yml runs npm run css:check so the committed output can't go stale. images/og-card.jpg is generated-and-committed the same way by scripts/build-og-card.mjs, and nothing checks it at all — the script's own header says so:
Not part of CI, and nothing checks the committed JPEG still matches this source: run it by hand after changing the headshot or the wording, and commit the result alongside.
So editing NAME, DOMAIN, ROLES or the card's CSS and forgetting npm run og-card leaves the site shipping the old card, and the only signal is someone looking at a LinkedIn preview. The same edit silently desynchronises og:image:alt, which names the roles the card prints.
This is checkable: during the #168 review, npm run og-card reproduced the committed images/og-card.jpg byte for byte (md5 17932ab290c6e059a50d7a79e56ecabe), so a css:check-style hook is viable in principle:
"og-card:check": "npm run og-card && git diff --exit-code -- images/og-card.jpg"
Two things to settle before wiring it up:
- Is byte-exactness reproducible off this machine? It was stable across four local runs, but it depends on the Chrome build's text rasterisation and on libvips/mozjpeg versions. If a CI runner's Chrome differs, a byte comparison will flap. A perceptual comparison (decode both, compare mean absolute difference under a threshold) would be robust where a byte check isn't.
- Where it runs. It needs Chrome and it writes into the repo tree, so it fits
render.yml(which already has Chrome) better than a pre-commit hook.
Related: #171 tracks sharing the headless-Chrome plumbing between check-render.mjs and build-og-card.mjs; doing that first would make this cheaper.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read scripts/build-og-card.mjs, render.yml, css.yml, and the related #171 discussion; first run npm run og-card and compare the generated image with images/og-card.jpg. Settle whether byte-exact or perceptual comparison is reliable on CI, then wire the check into the workflow. Done means CI detects a stale committed JPEG without flaky results.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- github-actions, javascript, nodejs
- Domain
- build-system, ci-cd
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 50/100