Replace demo card placeholders with live demo screenshots#117
Conversation
The four live demos rendered a branded text-only placeholder box because none had an `image` set. Capture a real 16:9 hero screenshot from each live deployment and wire it to the demo's `image` field so the homepage "Live demos" section and /examples show what each app actually looks like. - Marketplace -> rsc.reactonrails.com - TanStack Starter -> starter.reactonrails.com - Legacy tutorial -> www.reactrails.com - Hacker News -> hn.reactonrails.com Screenshots are stored as optimized WebP (188 KB total for all four) under static/img/demos/. Gumroad has no live deployment yet, so it keeps the branded placeholder and "Demo coming soon" until it ships. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
WalkthroughThis PR populates the optional ChangesDemo Image References
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Greptile SummaryThis PR wires up real WebP screenshots for the four live demo cards on the homepage and
Confidence Score: 5/5Safe to merge — only data constants and static binary assets are changed; no logic, components, or CSS are modified. The change is minimal: four string literals added to a constants file and four binary WebP files committed. The DemoCard component already handled the image field correctly, the paths follow the Docusaurus static-asset convention, and Gumroad is correctly left without an image since it has no live deployment. No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[demos.ts — Demo object] -->|image field set?| B{Yes / No}
B -->|Yes — four live demos| C[DemoCard renders img\nsrc=withBaseUrl demo.image\nalt=demo.name demo screenshot\nloading=lazy]
B -->|No — Gumroad| D[DemoCard renders\nbranded gradient placeholder\naria-hidden div with demo name]
C --> E[static/img/demos/marketplace.webp]
C --> F[static/img/demos/tanstack-starter.webp]
C --> G[static/img/demos/legacy-tutorial.webp]
C --> H[static/img/demos/hacker-news.webp]
Reviews (1): Last reviewed commit: "Replace demo card placeholders with live..." | Re-trigger Greptile |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
|
Cloudflare preview deployed.
|
1 participant
What
The demo cards on the homepage "Live demos" section and
/examplesrendered abranded text-only placeholder (gradient box with the demo name) because no
demo had an
imageset. This wires up a real 16:9 hero screenshot for each ofthe four live demos.
static/img/demos/marketplace.webpstatic/img/demos/tanstack-starter.webpstatic/img/demos/legacy-tutorial.webpstatic/img/demos/hacker-news.webpGumroad has no live deployment yet, so it intentionally keeps the branded
placeholder and "Demo coming soon" until it ships.
Before / after
demo name as text.
Gumroad keeps the placeholder.
The four screenshots are committed in this PR, so you can review each one
directly in the Files changed tab.
How
match the card's
aspect-ratio: 16 / 9+object-fit: covermedia box.~1.7 MB as PNG) under
static/img/demos/.image: '/img/demos/<id>.webp'line per live demo insrc/constants/demos.ts. No component or CSS changes —DemoCardalreadyrenders
<img>whenimageis set and falls back to the placeholderotherwise.
Verification
Rendered the real
DemoCardmarkup +styles.module.csswith the actual WebPfiles; confirmed all four images load (
naturalWidth > 0), frame cleanly at16:9, and that Gumroad still shows the placeholder.
🤖 Generated with Claude Code
Note
Low Risk
Marketing-site content and static assets only; no runtime logic or auth changes.
Overview
Live demo cards on the homepage and
/examplesnow show real 16:9 WebP screenshots instead of the gradient text placeholder, by settingimage: '/img/demos/<id>.webp'on the four deployed demos indemos.tsand adding the assets understatic/img/demos/.Gumroad is unchanged (no
image, no live URL), so it still uses the branded placeholder and “Demo coming soon.” NoDemoCardor CSS changes—existing logic already prefers<img>whenimageis set.Reviewed by Cursor Bugbot for commit 885bd94. Bugbot is set up for automated code reviews on this repo. Configure here.
Summary by CodeRabbit