Fix the black-screen export bug; make both deliverables score 100 - #344
Merged
Conversation
…rade
Auditing a real export with Lighthouse turned up a bug I shipped earlier today:
the procedural background threw on first paint and every recipe-driven export
rendered a black screen.
TypeError: Cannot read properties of undefined (reading 'replace')
at hexToRgb -> drawGradient -> drawFrame2D
drawFrame2D takes FrameOptions, with color1/color2/color3. A stored style recipe
holds a colours array. The export emitted the recipe verbatim, so every colour
was undefined. The test that was supposed to cover this built its own options
object in the correct shape and ran the runtime against that, so it passed
against broken output. It now parses the recipe out of the emitted page and runs
what actually ships, and it fails against the old shape.
The page also scored badly on things Lighthouse does measure, and was missing
things it does not:
- No h1 anywhere. Every section emitted an h2, so the document outline started at
level two. The first section carrying a heading is now the h1.
- No main landmark, no skip link, and no focus ring, on a page that overrides its
own colours so the browser default can disappear.
- twitter:card promised a large image with no og:image to show, so every share
rendered as a bare link. The card is now drawn client-side from the site's own
first frame and shipped as og-image.png.
- No favicon and no theme-color.
- The Google Fonts stylesheet was render-blocking on a third-party origin, holding
first contentful paint at 2.9s on a page whose own markup is a few kilobytes.
The ZIP now also carries what a non-technical owner cannot easily produce: a
404 page matching the site, robots.txt, a palette-derived favicon, .nojekyll so
GitHub Pages does not silently drop files, and netlify.toml and vercel.json with
long cache headers on the frames. README.txt becomes a README.md with real
deploy steps for Netlify, Vercel, GitHub Pages and Cloudflare.
Measured on the built export, serving the full file set:
before Performance 99 A11y 100 Best Practices 96 SEO 100 (blank page,
JS exception)
after Performance 100 A11y 100 Best Practices 100 SEO 100 (renders,
no errors)
first contentful paint 2.9s -> 0.9s, CLS 0
The export was fixed and measured in the previous commit; the published page is the other half of the deliverable and had the same defects, plus one of its own. - Every section rendered an h2, so a published site had no h1 and its document outline began at level two. The first section carrying a heading is now the h1. - No main landmark, no skip link, and no focus ring on a page that sets its own palette, where the browser default ring can vanish against the background. - No social image at all, so every share of a customer's published site rendered as a bare link. Adds a per-site opengraph-image route drawn from that site's stored theme. It uses the theme rather than the frames because the frames live in the visitor's browser, not on the server. Measured on the rendered page: accessibility 100, SEO 100.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Auditing a real export with Lighthouse caught a bug I shipped earlier today.
The procedural background threw on every export
drawFrame2DtakesFrameOptions—color1/color2/color3. A stored style recipe holds acolorsarray. The export emitted the recipe verbatim, so every colour wasundefinedand every recipe-driven export rendered a black screen.The test that should have caught this built its own correctly-shaped options object and ran the runtime against that, so it passed while the emitted shape was wrong. It now parses the recipe out of the emitted page and runs exactly what ships — and fails against the old shape (verified by reverting).
Measured, on the built export with the full file set served
The "99 before" was measuring a blank page — fast because it drew nothing.
Gaps closed, in the export and published sites
Both surfaces had the same defects:
<h1>. Every section emitted anh2, so the document outline started at level two — read as a missing title by assistive tech and search engines. The first section carrying a heading is now theh1.<main>landmark, no skip link, no focus ring — on pages that override their own colours, where the browser default ring can disappear entirely.twitter:cardpromisedsummary_large_imagewith noog:image, so every share rendered as a bare link. The export now draws a card client-side from the site's own first frame; published sites get a per-siteopengraph-imageroute drawn from their stored theme (theme rather than frames, because frames live in the visitor's browser).theme-color.media="print" onloadwith a<noscript>fallback.The ZIP now deploys itself
404.htmlmatching the site,robots.txt, a palette-derivedfavicon.svg, the generatedog-image.png,.nojekyll(GitHub Pages silently drops underscore-prefixed files without it), andnetlify.toml+vercel.jsonwith immutable cache headers on the frames.README.txtbecomes aREADME.mdwith real deploy steps for Netlify, Vercel, GitHub Pages and Cloudflare, written for someone who is not a developer. Netlify is now drag-the-folder.Verified
tsc,eslint,next buildclean; suite 507 → 528.h1did not exist when I drafted it, so I added them rather than leave the README lying.