fix: illustrated 404 and 500 error pages - #183
Merged
Merged
Conversation
Extracts the error-page work from the pilot-32 branch, leaving behind the unrelated perf/lighthouse artifacts and the astro-assets refactor that branch also carried. - Add the sad-doodle illustration and center both error pages around it. The art is white-on-transparent, so it is inverted under the light theme. - Add scripts/build-cf-error-pages.mjs, which emits fully self-contained 404/500 HTML (inline CSS, base64 image) into dist/cloudflare-pages/ for Cloudflare's zone-level Custom Pages slot. Those are served when Pages itself is unreachable, so they must not depend on site assets. - Add functions/500.ts so /500 returns a real HTTP 500 instead of the 200 that CF Pages gives every static route. It serves the generated body directly rather than proxying, which would recurse via clean-URL routing. - Wire the generator into npm run build; gitignore its generated output. The "Report issue" link is pointed at pilot-protocol/pilotprotocol, the org repo used everywhere else on main, rather than the personal fork the original branch referenced. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
|
🚀 Preview deployed to Cloudflare Pages
|
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Extracts the error-page work that was stranded on
pilot-32and lands it cleanly onmain.pilot-32carried this alongside ~25k lines of unrelated perf/lighthouse artifacts and an astro-assets refactor. This branch takes only the 404/500 concern, rebuilt on currentmain.What's here
public/img/sad-doodle.png— both error pages are recentered around it. The art is white-on-transparent, so it's inverted under the light theme.scripts/build-cf-error-pages.mjs— emits fully self-contained 404/500 HTML (inline CSS, base64 image, no external fetches) intodist/cloudflare-pages/for Cloudflare's zone-level Custom Pages slot. Those are served when Pages itself is unreachable, so they can't depend on any asset the site serves. Wired intonpm run build.functions/500.ts— makes/500return an actual HTTP 500. Every static CF Pages route answers 200, which makes the branded 500 useless to a Worker or monitor. It serves the generated body inline rather than proxying/500.html, which 308-redirects back into the same function and returns an empty body (browsers then offer the response as a 0-byte download).Deliberately left out
MarketingLayoutrefactor frompilot-32. The pages here keepmain's existingBaseHead/Nav/Footerscaffolding, so nothing else moves.package-lock.jsondiff from the original commit that only stripped"peer": truemarkers — unrelated churn.Note for review
Two judgment calls worth a look:
TeoSlayer/pilotprotocol, a personal fork. Retargeted topilot-protocol/pilotprotocol, which is what the other 49 GitHub links onmainuse..nf-meta"Status / HTTP 404" footer block from both pages. That was the original branch's design intent (illustration-led, centered), but it does remove copy that's onmaintoday — flagging in case you'd rather keep it.Deploying the standalone pages to the CF Custom Pages slots is a manual dashboard step;
dist/cloudflare-pages/README.mdhas the instructions.Verification
npm ci,npm run check:plain,npm run buildall pass locally — the same three steps CI runs. 372 pages built; generator wrote both standalone pages (~150KB each, well under CF's 1MB cap) with the image inlined. Generatedfunctions/_500-body.tsis gitignored and stays untracked.🤖 Generated with Claude Code