RepoCard: surface live demos with screenshot + caption#26
Merged
Conversation
Three of the featured repos (block-kitchen, slack-block-kit-validator, storybook-addon-slack-block-kit) have publicly hosted live demos that were previously invisible on the landing page. A working demo is the single most persuasive thing a visitor can do with these tools, so we now show a screenshot of each demo on its card with a caption linking to the live URL. What changed: - DEMO_URLS map in src/lib/github.ts maps repo name → demo URL. Adds demoUrl to the Repo type and applies it in both the live-fetch and manual-fallback merge paths. Naming follows a block-kit-* family (block-kitchen.tightknit.dev, block-kit-validator.tightknit.dev, block-kit-storybook.tightknit.dev) so the domains are predictable. - RepoCard.astro renders the screenshot below the title and description with a 3px ink border + 4px hard shadow (smaller than the card's 8px shadow to preserve hierarchy). Image is wrapped in an <a> with relative z-10 so clicks land on the demo URL; the card's title is a stretched-link to the GitHub repo, so every other inch of the card still goes to GitHub. Falls back to a text pill when a demoUrl is set but no screenshot exists yet. - import.meta.glob discovers screenshots from src/assets/demos/ by repo name, so adding a new demo is: drop a PNG, done. astro:assets generates responsive WebP variants (massive: 394KB PNG → 18KB WebP @ 800w). - scripts/capture-demos.ts is a Playwright script that snapshots all three demos at 1600x900 @ 2x DPR. Run via `npm run capture:demos` (Node 22 --experimental-strip-types, no tsx/ts-node dep). Supports --host-rules= for working around stuck local DNS caches. Continues on per-target errors and exits non-zero if any failed. - CLAUDE.md documents the new command and convention. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
tightknit-dev-website | 9708021 | Commit Preview URL Branch Preview URL |
May 18 2026, 03:28 PM |
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.
Summary
block-kitchen,slack-block-kit-validator,storybook-addon-slack-block-kit) have publicly hosted live demos — but the landing page didn't show them. Visitors had no way to know they could click and play with a working thing. This PR surfaces each demo as a screenshot + caption on itsRepoCard, with the screenshot link going to the demo and the rest of the card still going to GitHub.block-kit-*family:block-kitchen.tightknit.dev,block-kit-validator.tightknit.dev,block-kit-storybook.tightknit.dev.src/assets/demos/. Astro's image optimizer generates responsive WebP variants (~18 KB at 800w for the largest demo, down from 394 KB PNG).What changed
src/lib/github.ts— newdemoUrl: string | nullfield onRepoplus aDEMO_URLSmap. Applied in both the live GitHub-fetch path and the manual-fallback merge so it works whether the API responds or we fall back to the hardcoded list.src/components/RepoCard.astro— refactored from<a>wrapper to<article>with a stretched-link on the title (covers the whole card → GitHub). Below the title + description, demo-having cards render a 16:9 framed screenshot with a 3px ink border + 4px hard shadow (smaller than the card's 8px so the hierarchy stays). The screenshot link hasrelative z-10so clicks on the image land on the demo URL, while every other inch of the card still goes to GitHub. A caption below the image reads▶ Live demo · block-kit-validator.tightknit.dev →, with the host + arrow bound as a singlewhitespace-nowrapchunk so the arrow always stays attached to the URL when the caption wraps. Falls back to a text-only pill if ademoUrlis set but no screenshot exists yet.Screenshots are auto-discovered via
import.meta.glob('../assets/demos/*.png')keyed by repo name — adding a new demo is "drop a PNG with the right filename, done."scripts/capture-demos.ts— Playwright script that snapshots all three demos at 1600×900 @ 2× DPR, saved assrc/assets/demos/<repo-name>.png(filename must match the reponameso the glob lookup works). Run vianpm run capture:demos. Uses Node 22's--experimental-strip-typesso notsx/ts-nodedep. Supports--host-rules="MAP host 1.2.3.4"for the rare case of a stuck local mDNS negative cache. Continues on per-target errors; exits non-zero if any failed.CLAUDE.md— documentsnpm run capture:demosand the "demos map + screenshot filename" convention.Click-target audit
Verified via DOM probes at six points per card:
tightknitai / repo-name ↗)▶ Live demo · host →)Build-time image optimization
Astro converts every PNG to 4 responsive WebP variants with srcset. Real numbers from the prod build:
block-kitchen.pngslack-block-kit-validator.pngstorybook-addon-slack-block-kit.pngImages are
loading=\"lazy\"so they don't block first paint.Test plan
npm run dev— featured row shows screenshots above block-kitchen and validator (yellow + cyan cards), with slack-hono (pink, no demo) staying text-only▶ Live demo · ... →caption opens the demo URL in a new tab→arrownpm run typecheckcleannpm run buildproduces 12 WebP variants underdist/_astro/npm run capture:demosre-snapshots all three demos and overwrites the PNGs🤖 Generated with Claude Code