Skip to content

Add real screenshots/thumbnails for demo apps (homepage + /examples) #113

Description

@justin808

Follow-up to #112, which added the demo/starter showcase on the homepage ("See it running") and the /examples page.

Each demo currently renders a branded placeholder tile instead of a real graphic. This issue tracks capturing and wiring real screenshots (or thumbnails) for each app.

What to do

For each demo below, capture a screenshot/thumbnail of the running app and add it as static/img/demos/<id>.png, then set image: '/img/demos/<id>.png' on the matching entry in prototypes/docusaurus/src/constants/demos.ts. No component changes are needed — DemoCard swaps the placeholder for the image automatically.

Recommended: a clean 16:9 hero shot of the app's main screen.

Demo id Source Live
Marketplace marketplace react-on-rails-demo-marketplace-rsc https://rsc.reactonrails.com
TanStack Starter tanstack-starter react-on-rails-starter-tanstack https://start.reactonrails.com
Legacy tutorial legacy-tutorial react-webpack-rails-tutorial https://www.reactrails.com
Hacker News hacker-news react-on-rails-demo-hacker-news-rsc deploy pending
Gumroad gumroad react-on-rails-demo-gumroad-rsc deploy pending

Notes

  • The three live demos (Marketplace, TanStack, Legacy) can be screenshotted now.
  • Hacker News and Gumroad need their deployments live first (they also still show "Demo coming soon" until demoUrl is set in the same data file).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions