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).
Follow-up to #112, which added the demo/starter showcase on the homepage ("See it running") and the
/examplespage.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 setimage: '/img/demos/<id>.png'on the matching entry inprototypes/docusaurus/src/constants/demos.ts. No component changes are needed —DemoCardswaps the placeholder for the image automatically.Recommended: a clean 16:9 hero shot of the app's main screen.
idmarketplacetanstack-starterlegacy-tutorialhacker-newsgumroadNotes
demoUrlis set in the same data file).