feat(demo): code and config views on every example, and drop picsum - #6
Merged
Merged
Conversation
The StackBlitz starter pulled its images from picsum.photos, and they were not rendering. Verified in a real Chromium against the built starter: 13 failed image requests before, zero after. The fix is what the demo already did — generate the image as an inline SVG data URI. An external image host makes the example depend on someone else's uptime, rate limits and CORS policy, and when it is slow the first thing a visitor sees is an empty grid. Data URIs render instantly, work offline, and still exercise the decode path the grid waits on. Every demo example now sits in a shared frame with a Config toggle, a Code toggle and a copy button. The preview is deliberately never hidden: swapping it out for a tab would take the grid to display:none, where it measures zero and lays out again on the way back — a flicker caused by the demo, in the one place a visitor is judging whether the layout is steady. The panels open above a preview that stays mounted, so the code and the result are readable together. Checked in Chromium across all five examples: both toggles, the copy button against real clipboard contents, and item counts unchanged after toggling (24, 22, 20, 15, 600). No console errors.
|
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.
The StackBlitz starter pulled its images from picsum.photos, and they were not rendering. Verified in a real Chromium against the built starter: 13 failed image requests before, zero after.
The fix is what the demo already did — generate the image as an inline SVG data URI. An external image host makes the example depend on someone else's uptime, rate limits and CORS policy, and when it is slow the first thing a visitor sees is an empty grid. Data URIs render instantly, work offline, and still exercise the decode path the grid waits on.
Every demo example now sits in a shared frame with a Config toggle, a Code toggle and a copy button. The preview is deliberately never hidden: swapping it out for a tab would take the grid to display:none, where it measures zero and lays out again on the way back — a flicker caused by the demo, in the one place a visitor is judging whether the layout is steady. The panels open above a preview that stays mounted, so the code and the result are readable together.
Checked in Chromium across all five examples: both toggles, the copy button against real clipboard contents, and item counts unchanged after toggling (24, 22, 20, 15, 600). No console errors.