feat(dashboard): template cards show the board, not a grey wireframe - #21
Merged
Conversation
The cards drew a grid of empty rectangles — the panel LAYOUT and nothing else. Every template has roughly the same layout (a stat row, two mid panels, a table), so all five cards looked identical and told nobody which template to pick. Each card is now a captured picture of the board that template builds, charts and figures included. The figures come from the template's own `sample` block, which the copilot cannot reach, so they can never travel into someone's document — the same rule that lets the eye-preview show numbers at all. A picture rather than a live miniature, for two measured reasons. A board laid out at card width is NOT the same board shrunk: the canvas collapses its columns at ~230px, so a live thumbnail advertises a layout nobody will ever get (tried it; the stat row stacked into a single column). And five chart-drawing boards on the landing page cost a visibly slower first paint for something nobody interacts with. - scripts/capture-template-thumbs.mjs regenerates them from each template's own preview, so they cannot drift into showing a board the template does not build. Run it after changing a template: npm run capture:thumbs -- <baseUrl> - the images are kit DATA, in templates/thumbs/ next to templates.json, staged into public/ by the same vite step. public/ is generated and gitignored, so writing them there would have produced thumbnails that never reached a checkout. - a template with no picture falls back to the layout shape rather than a broken image, and the shape component is kept for exactly that. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01X7VoW2QzfDkxEoudktbjVY
The dashboard build failed on CI with EBADPLATFORM: @rollup/rollup-darwin-arm64 was committed as a hard devDependency, and CI runs linux/x64. I added it locally to work around npm's optional-dependency bug (npm/cli#4828) after wiping node_modules, and it should never have reached the tree — a platform-pinned binary in devDependencies makes the kit uninstallable anywhere but an arm64 Mac. Playwright goes with it. The capture script is a maintenance tool run by hand when a template changes; as a devDependency it would make every install of this kit download browsers. The script's header now says how to run it without one. Verified the way CI runs it, not just locally: rm -rf node_modules && npm ci && npm run build && npm test, all clean with the original two devDependencies restored. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01X7VoW2QzfDkxEoudktbjVY
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 cards drew a grid of empty rectangles — the panel LAYOUT and nothing else. Every template has roughly the same layout (a stat row, two mid panels, a table), so all five cards looked identical and told nobody which template to pick.
Each card is now a captured picture of the board that template builds, charts and figures included. The figures come from the template's own
sampleblock, which the copilot cannot reach, so they can never travel into someone's document — the same rule that lets the eye-preview show numbers at all.A picture rather than a live miniature, for two measured reasons. A board laid out at card width is NOT the same board shrunk: the canvas collapses its columns at ~230px, so a live thumbnail advertises a layout nobody will ever get (tried it; the stat row stacked into a single column). And five chart-drawing boards on the landing page cost a visibly slower first paint for something nobody interacts with.
changing a template: npm run capture:thumbs --
Claude-Session: https://claude.ai/code/session_01X7VoW2QzfDkxEoudktbjVY