Repository navigation
Put the kit on a page people can copy from - #431
Merged
Merged
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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.
Fixes #411, and finishes #410 with it.
/ui shows the six sections from #430, each with a live preview, its HTML and CSS in tabs, and a copy button. The tokens and the shared CSS have their own copy buttons at the top, since a block needs them once.
Every preview is an iframe of the page that block would make on its own, built on the server from the same registry the code blocks come from. Rendering it inline would have let this site's CSS reach into the preview and show somebody a block that behaves differently once pasted, and would have let the page show one thing while the button copied another.
A width switcher moves every preview between 390, 768 and 1180. Of the eleven libraries I looked at, only HyperUI has one. A second switch puts the previews on a light page, which is the ground most people paste onto.
Reachable from the nav and the sitemap, with its own title, description and canonical.
Verified in a browser on a production build: six sections, six frames, twelve code tabs. The first preview renders "Bookkeeping that closes your month in a morning" inside its frame with its own stylesheet. The width switcher takes the frame to 390 and 768. The light switch turns the preview ground white. Clicking Copy HTML put the hero markup on the real system clipboard, confirmed by reading it back, and the button said Copied; a second run with a recording stub confirmed the two copied blocks are the component's own html and the token block, unmodified.
Contrast, after two fixes. The kit had never been measured on a light ground, and three pieces of small text sat under 4.5:1 there: body text at 4.50, the footer legal line at 4.31 and the signup placeholder at 4.10. The light muted token is darker now and the legal line is 15px rather than 14px, so the worst of them is 4.73:1 and the rest sit between 4.89 and 5.51. On the dark ground: headings 16.47:1, body 9.20:1, the primary button 4.75:1. Page chrome between 7.33:1 and 16.77:1.
The probe needed fixing first, and this is worth recording: it took the brightest 5% of pixels as text and the darkest 40% as background, which assumes light text on a dark ground. Pointed at the light page it read dark text on white as 1.00:1. It now splits the crop into its two luminance clusters and compares them, which works either way and is conservative about antialiased edges.
tsc and eslint clean, vitest 705 of 705.