Skip to content

Curate the examples catalog around maintained demos #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
justin808 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Curate the examples catalog around maintained demos #102

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf1f070
Replay curated examples page on clean branch head
justin808 Apr 19, 2026
108f9ea
Replay curated examples page on clean branch head
justin808 Apr 19, 2026
e31d8b5
Use canonical repo slugs in examples catalog
justin808 Apr 23, 2026
9c87441
Fix examples catalog docs routing
justin808 Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion prototypes/docusaurus/src/pages/examples.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@
margin-bottom: 0.85rem;
}

.sectionLead {
margin: 0.45rem 0 0;
color: var(--ifm-color-content-secondary);
}

.sectionHeader h2 {
margin-bottom: 0;
}
Expand All @@ -53,7 +58,7 @@
.decisionGrid {
margin-bottom: 3rem;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
Comment thread
justin808 marked this conversation as resolved.
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}

Expand All @@ -70,6 +75,30 @@
line-height: 1.12;
}

.repoMeta {
margin: 0 0 0.55rem;
font-size: 0.88rem;
color: var(--ifm-color-content-secondary);
}

.tagRow {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0.85rem 0 0.2rem;
}

.tag {
display: inline-flex;
align-items: center;
padding: 0.18rem 0.45rem;
border-radius: 999px;
background: var(--site-soft-surface);
border: 1px solid var(--site-border);
font-size: 0.75rem;
font-weight: 700;
}

.cardLink {
display: inline-flex;
align-items: center;
Expand Down
182 changes: 141 additions & 41 deletions prototypes/docusaurus/src/pages/examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,76 +5,150 @@ import Layout from '@theme/Layout';
import {docsRoutes} from '../constants/docsRoutes';
import styles from './examples.module.css';

const evaluationPaths = [
const decisionPaths = [
{
eyebrow: 'Evaluator path',
title: 'Compare setup approaches',
eyebrow: 'Starter path',
title: 'Start a new Rails + React app',
description:
'Start with the docs landing page to choose between new app setup, existing app install, migration, or Pro evaluation.',
'Use the create-app and quick-start docs first, then compare the maintained starter repos for SSR + HMR or React on Rails Pro + RSC.',
href: docsRoutes.docsGuide,
cta: 'Open the docs guide',
cta: 'Open starter docs',
},
{
eyebrow: 'Migration path',
title: 'Move from react-rails',
description:
'Follow a migration sequence validated against a real open-source example app instead of reconstructing it from old guides.',
'Use the migration guide together with the maintained migration reference repos instead of reconstructing the process from older blog posts.',
href: docsRoutes.migrateFromReactRails,
cta: 'Use the react-rails guide',
cta: 'Use the migration guide',
},
{
eyebrow: 'Upgrade path',
title: 'Move from OSS to Pro',
eyebrow: 'Pro path',
title: 'Evaluate React on Rails Pro + RSC',
description:
'If your current app needs more SSR throughput or RSC support, compare OSS and Pro before adding the Pro package.',
'Start with the OSS vs Pro guide, then use the public RSC demos to judge where the added complexity pays for itself.',
href: docsRoutes.ossVsPro,
cta: 'Compare OSS and Pro',
},
];

const exampleApps = [
const catalogSections = [
{
title: 'react_on_rails_demo_ssr_hmr',
eyebrow: 'Starters',
title: 'Current starting points',
description:
'Canonical demo app showing React on Rails setup with SSR and hot reloading workflows.',
href: 'https://github.com/shakacode/react_on_rails_demo_ssr_hmr',
Comment thread
cursor[bot] marked this conversation as resolved.
'These are the best public repos to start from when you want a maintained reference instead of a historical artifact.',
items: [
{
title: 'SSR + HMR tutorial demo',
repo: 'react_on_rails_demo_ssr_hmr',
description:
'Maintained Rails + React + SSR + HMR tutorial repo. This is the reference behind the tutorial and Webpack customization guidance.',
href: 'https://github.com/shakacode/react_on_rails_demo_ssr_hmr',
tags: ['OSS', 'SSR', 'HMR'],
},
{
title: 'React on Rails Pro + RSC starter',
repo: 'react-on-rails-rsc-demo',
description:
'Minimal public sample for React Server Components with React on Rails Pro. Use this when you want the smallest current RSC starting point.',
href: 'https://github.com/shakacode/react-on-rails-rsc-demo',
tags: ['Pro', 'RSC', 'Starter'],
},
],
},
{
title: 'react-rails-example-app',
eyebrow: 'Migrations',
title: 'Adoption and migration references',
description:
'Legacy react-rails app used to validate the migration guide and current Rails-version constraints.',
href: 'https://github.com/shakacode/react-rails-example-app',
'Use these when your question is not “how do I start?” but “how do I move an existing app?”',
items: [
{
title: 'react-rails migration example',
repo: 'react-on-rails-migration-example',
description:
'Focused migration reference showing the shape of moving from react-rails into React on Rails.',
href: 'https://github.com/shakacode/react-on-rails-migration-example',
tags: ['OSS', 'Migration'],
},
{
title: 'Open Flights migration example',
repo: 'react-on-rails-open-flights-example',
description:
'Larger migration reference that shows React on Rails replacing react-rails in a more realistic app.',
href: 'https://github.com/shakacode/react-on-rails-open-flights-example',
tags: ['OSS', 'Migration', 'App'],
},
],
},
{
title: 'vite_ruby/examples/rails',
eyebrow: 'React on Rails Pro',
title: 'RSC and performance demos',
description:
'Official Vite Rails sample app used to document migration preflight and dependency lockfile issues.',
href: 'https://github.com/ElMassimo/vite_ruby/tree/main/examples/rails',
'These public demos use React on Rails Pro and React Server Components. Reach for them when the conversation is about measured user-visible wins.',
items: [
{
title: 'Hacker News RSC demo',
repo: 'react-on-rails-hn-rsc-demo',
description:
'Compact public demo of React on Rails Pro + React Server Components on a familiar read-heavy UI.',
href: 'https://github.com/shakacode/react-on-rails-hn-rsc-demo',
tags: ['Pro', 'RSC', 'Demo'],
},
{
title: 'Marketplace RSC performance demo',
repo: 'react-server-components-marketplace-demo',
description:
'Public performance-oriented RSC demo showing the shape of the user-visible improvement on a marketplace-style surface.',
href: 'https://github.com/shakacode/react-server-components-marketplace-demo',
tags: ['Pro', 'RSC', 'Performance'],
},
],
},
{
eyebrow: 'Legacy',
title: 'Historical full-app reference',
description:
'This repo is still useful when you want to see an older production-style app, but it is no longer the recommended starting point for new work.',
items: [
{
title: 'react-webpack-rails-tutorial',
repo: 'react-webpack-rails-tutorial',
description:
'Older full-app reference with a live demo at reactrails.com. Keep this for historical context rather than as the primary starter.',
href: 'https://github.com/shakacode/react-webpack-rails-tutorial',
tags: ['Legacy', 'Full App'],
},
],
},
];

export default function ExamplesPage(): ReactNode {
return (
<Layout title="Examples" description="React on Rails example applications and references">
<Layout
title="Examples and Demos"
description="React on Rails demos, migration examples, and React on Rails Pro + RSC benchmark apps."
>
<main className={styles.main}>
<section className={styles.hero}>
<div className="container">
<p className={styles.kicker}>Examples and migration references</p>
<h1>Use concrete repos and concrete guides when deciding whether React on Rails fits.</h1>
<p className={styles.kicker}>Examples, demos, and migration references</p>
<h1>Use the maintained public repos when you evaluate React on Rails.</h1>
<p className={styles.lead}>
These links are meant for evaluation, migration, and validation work. They are not a
parallel docs track.
This catalog exists to make adoption easier: choose the path that matches your app,
use the current example repos, and ignore historical artifacts unless you are doing
archaeology.
</p>
</div>
</section>

<section className="container">
<div className={styles.sectionHeader}>
<p className={styles.sectionEyebrow}>Start with a decision path</p>
<h2>Choose the guide that matches your migration or evaluation goal.</h2>
<p className={styles.sectionEyebrow}>Start with the right path</p>
<h2>Choose the guide that matches your evaluation or migration goal.</h2>
</div>
<div className={styles.decisionGrid}>
{evaluationPaths.map((path) => (
{decisionPaths.map((path) => (
<article className={styles.card} key={path.title}>
<p className={styles.cardEyebrow}>{path.eyebrow}</p>
<h3>{path.title}</h3>
Expand All @@ -87,21 +161,47 @@ export default function ExamplesPage(): ReactNode {
</div>
</section>

{catalogSections.map((section) => (
<section className="container" key={section.title}>
<div className={styles.sectionHeader}>
<p className={styles.sectionEyebrow}>{section.eyebrow}</p>
<h2>{section.title}</h2>
<p className={styles.sectionLead}>{section.description}</p>
</div>
<div className={styles.grid}>
{section.items.map((item) => (
<article className={styles.card} key={item.repo}>
<h3>{item.title}</h3>
<p className={styles.repoMeta}>{item.repo}</p>
<p>{item.description}</p>
<div className={styles.tagRow}>
{item.tags.map((tag) => (
<span className={styles.tag} key={tag}>
{tag}
</span>
))}
</div>
<Link className={styles.cardLink} href={item.href}>
Open repository
</Link>
</article>
))}
</div>
</section>
))}

<section className="container">
<div className={styles.sectionHeader}>
<p className={styles.sectionEyebrow}>Reference repos</p>
<h2>Open-source apps that map to the docs.</h2>
</div>
<div className={styles.grid}>
{exampleApps.map((app) => (
<article className={styles.card} key={app.title}>
<h3>{app.title}</h3>
<p>{app.description}</p>
<Link className={styles.cardLink} href={app.href}>
Open repository
</Link>
</article>
))}
<p className={styles.sectionEyebrow}>Source of truth</p>
<h2>Use the docs for taxonomy and this page for curation.</h2>
<p className={styles.sectionLead}>
The canonical docs page for repo taxonomy lives in{' '}
<Link to="/docs/getting-started/examples-and-references">
Comment thread
justin808 marked this conversation as resolved.
Outdated
Comment thread
cursor[bot] marked this conversation as resolved.
Outdated
Examples and migration references
</Link>
. This page is the marketing-forward catalog of the public repos we want people to
find first.
</p>
</div>
</section>
</main>
Expand Down
Loading