feat(examples): real canvas screenshots as gallery thumbnails
Replaces the manually-positioned wokwi-element mock (CircuitPreview) in
the /examples gallery with real screenshots of the actual simulator
canvas, so each card shows the example's boards + components + wires
exactly as they appear when you open the example.
How it works
- A new <ExampleThumbnail> component tries
/examples-thumbs/<id>.{webp,png} first. If the image 404s — or no
thumbnail has been captured yet — it falls back to the existing
CircuitPreview component. No-op for examples without a screenshot.
- ExamplesGallery and ExampleDetailPage now render <ExampleThumbnail>
instead of CircuitPreview directly.
- Explicit example.thumbnail field still wins (kept the existing
override path in case someone wants a custom asset).
Capture pipeline
- Generated by velxio-prod's scripts/capture-example-thumbs.mjs
(Playwright + sharp). For each example: opens /examples/<slug>,
clicks "Open in Simulator", waits for [data-board-id] elements,
computes the bbox of all boards + components, sets a transform on
.canvas-world to center and fit them with 12% padding inside the
canvas viewport, screenshots .canvas-content, and re-encodes to
600x360 @2x DPI as .png + .webp.
This commit ships the first batch (102 of ~129 examples — the rest
will follow once the capture completes; missing slugs gracefully
fall back to CircuitPreview in the meantime).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
davidmonterocrespo24
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 176 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 137 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 113 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 116 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 146 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 158 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 157 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 158 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 128 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 135 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 140 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 128 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 158 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 123 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 128 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 128 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 135 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 159 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 147 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 207 KiB |
|
After Width: | Height: | Size: 47 KiB |