Skip to content

Commit 116683b

Browse files
justin808claude
justin808
and
claude
authored
Prominently feature demo + starter apps with live deploy links (#112)
* Prominently feature demo + starter apps with live deploy links Surface the maintained React on Rails demo and starter apps so visitors can see them running and jump to the source. - Add a single source of truth for demos in src/constants/demos.ts (name, tagline, repo URL, optional live URL, category, featured flag). - Add a reusable DemoCard component: graphic (screenshot slot with a branded placeholder until screenshots land), tagline, and dual actions (live demo or "Demo coming soon" chip, plus source link). - Homepage: new "See it running" section right after Quick Start, featuring the 3 flagship RSC demos with a "Browse all demos" link. - Examples page: drop the "Decision Path" doc links (not examples) and the stale repo list; show demos grouped as Flagship / Get started / Legacy, each with source + live links. Screenshots for each app are a planned followup; entries set `image` to wire them in with no code change. Live URLs that don't exist yet render as "Demo coming soon". Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Feature the live demos first on the homepage The "See it running" section led with two coming-soon demos. Order the data file so live deployments lead: feature Marketplace, TanStack Starter, and the Legacy tutorial app (all deployed) on the homepage, and move the coming-soon Hacker News and Gumroad demos after them. They still appear under Flagship demos on /examples. Follow-up issue #113 tracks adding real screenshots for each app. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 430013b commit 116683b

7 files changed

Lines changed: 281 additions & 145 deletions

File tree

‎prototypes/docusaurus/src/components/DemoCard/index.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import type {ReactNode} from 'react';
2+
import Link from '@docusaurus/Link';
3+
import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
4+
5+
import type {Demo} from '../../constants/demos';
6+
import styles from './styles.module.css';
7+
8+
export default function DemoCard({demo}: {demo: Demo}): ReactNode {
9+
const {withBaseUrl} = useBaseUrlUtils();
10+
11+
return (
12+
<article className={styles.card}>
13+
<div className={styles.media}>
14+
{demo.image ? (
15+
<img
16+
className={styles.image}
17+
src={withBaseUrl(demo.image)}
18+
alt={`${demo.name} demo screenshot`}
19+
loading="lazy"
20+
/>
21+
) : (
22+
<div className={styles.placeholder} aria-hidden="true">
23+
<span>{demo.name}</span>
24+
</div>
25+
)}
26+
</div>
27+
<div className={styles.body}>
28+
<h3 className={styles.title}>{demo.name}</h3>
29+
<p className={styles.tagline}>{demo.tagline}</p>
30+
<div className={styles.actions}>
31+
{demo.demoUrl ? (
32+
<Link className={styles.demoLink} href={demo.demoUrl}>
33+
View live demo
34+
</Link>
35+
) : (
36+
<span className={styles.comingSoon}>Demo coming soon</span>
37+
)}
38+
<Link className={styles.sourceLink} href={demo.repoUrl}>
39+
View source
40+
</Link>
41+
</div>
42+
</div>
43+
</article>
44+
);
45+
}

‎prototypes/docusaurus/src/components/DemoCard/styles.module.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
.card {
2+
display: flex;
3+
flex-direction: column;
4+
border: 1px solid var(--site-border);
5+
border-radius: 8px;
6+
background: var(--site-surface);
7+
overflow: hidden;
8+
}
9+
10+
.media {
11+
aspect-ratio: 16 / 9;
12+
background: var(--site-soft-surface);
13+
border-bottom: 1px solid var(--site-border);
14+
}
15+
16+
.image {
17+
display: block;
18+
width: 100%;
19+
height: 100%;
20+
object-fit: cover;
21+
}
22+
23+
.placeholder {
24+
display: flex;
25+
align-items: center;
26+
justify-content: center;
27+
width: 100%;
28+
height: 100%;
29+
padding: 1rem;
30+
text-align: center;
31+
background: linear-gradient(
32+
135deg,
33+
var(--ifm-color-primary) 0%,
34+
var(--ifm-color-primary-darker) 100%
35+
);
36+
}
37+
38+
.placeholder span {
39+
color: #fff;
40+
font-weight: 700;
41+
font-size: 1.2rem;
42+
letter-spacing: 0.01rem;
43+
}
44+
45+
.body {
46+
display: flex;
47+
flex-direction: column;
48+
flex: 1;
49+
padding: 0.95rem;
50+
}
51+
52+
.title {
53+
margin-bottom: 0.45rem;
54+
line-height: 1.12;
55+
}
56+
57+
.tagline {
58+
flex: 1;
59+
margin-bottom: 0.9rem;
60+
color: var(--ifm-color-content-secondary);
61+
}
62+
63+
.actions {
64+
display: flex;
65+
align-items: center;
66+
gap: 1rem;
67+
}
68+
69+
.demoLink,
70+
.sourceLink {
71+
display: inline-flex;
72+
align-items: center;
73+
font-weight: 700;
74+
}
75+
76+
.comingSoon {
77+
display: inline-flex;
78+
align-items: center;
79+
font-weight: 700;
80+
color: var(--ifm-color-content-secondary);
81+
}

‎prototypes/docusaurus/src/constants/demos.ts‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
export type DemoCategory = 'flagship' | 'starter' | 'legacy';
2+
3+
export type Demo = {
4+
/** Slug; also used for the screenshot filename under static/img/demos/. */
5+
id: string;
6+
name: string;
7+
tagline: string;
8+
/** GitHub source repository. */
9+
repoUrl: string;
10+
/** Live deployment. Omit when the deployment is not live yet ("Demo coming soon"). */
11+
demoUrl?: string;
12+
/** Screenshot/thumbnail path. Omit to render the branded placeholder. */
13+
image?: string;
14+
category: DemoCategory;
15+
/** When true, the demo is featured in the homepage "Live demos" section. */
16+
featured?: boolean;
17+
};
18+
19+
// Live demos lead so the homepage "See it running" section features apps that
20+
// are actually deployed; coming-soon demos follow and still appear on /examples.
21+
export const demos: Demo[] = [
22+
{
23+
id: 'marketplace',
24+
name: 'Marketplace',
25+
tagline:
26+
'A marketplace performance demo for React on Rails Pro, React 19, and React Server Components.',
27+
repoUrl: 'https://github.com/shakacode/react-on-rails-demo-marketplace-rsc',
28+
demoUrl: 'https://rsc.reactonrails.com',
29+
category: 'flagship',
30+
featured: true,
31+
},
32+
{
33+
id: 'tanstack-starter',
34+
name: 'TanStack Starter',
35+
tagline: 'A minimal React on Rails + TanStack starter template to build from.',
36+
repoUrl: 'https://github.com/shakacode/react-on-rails-starter-tanstack',
37+
demoUrl: 'https://start.reactonrails.com',
38+
category: 'starter',
39+
featured: true,
40+
},
41+
{
42+
id: 'legacy-tutorial',
43+
name: 'Legacy tutorial app',
44+
tagline:
45+
'The original full-app React on Rails tutorial demo, running in production for years.',
46+
repoUrl: 'https://github.com/shakacode/react-webpack-rails-tutorial',
47+
demoUrl: 'https://www.reactrails.com',
48+
category: 'legacy',
49+
featured: true,
50+
},
51+
{
52+
id: 'hacker-news',
53+
name: 'Hacker News',
54+
tagline:
55+
'A Hacker News reader built on React on Rails Pro with React 19 and React Server Components.',
56+
repoUrl: 'https://github.com/shakacode/react-on-rails-demo-hacker-news-rsc',
57+
category: 'flagship',
58+
},
59+
{
60+
id: 'gumroad',
61+
name: 'Gumroad',
62+
tagline:
63+
'A Gumroad-style creator dashboard comparing Inertia and React on Rails Pro with React 19 and RSC.',
64+
repoUrl: 'https://github.com/shakacode/react-on-rails-demo-gumroad-rsc',
65+
category: 'flagship',
66+
},
67+
];
68+
69+
export const featuredDemos = demos.filter((demo) => demo.featured);

‎prototypes/docusaurus/src/pages/examples.module.css‎

Lines changed: 1 addition & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,15 @@
1010
}
1111

1212
.kicker,
13-
.sectionEyebrow,
14-
.cardEyebrow {
13+
.sectionEyebrow {
1514
margin: 0 0 0.55rem;
1615
text-transform: uppercase;
1716
letter-spacing: 0.06rem;
1817
font-size: 0.75rem;
1918
font-weight: 700;
20-
}
21-
22-
.kicker,
23-
.sectionEyebrow {
2419
color: var(--ifm-color-primary-dark);
2520
}
2621

27-
.cardEyebrow {
28-
color: var(--ifm-color-content-secondary);
29-
}
30-
3122
.lead {
3223
max-width: 42rem;
3324
font-size: 1.02rem;
@@ -50,39 +41,11 @@
5041
gap: 0.9rem;
5142
}
5243

53-
.decisionGrid {
54-
margin-bottom: 3rem;
55-
display: grid;
56-
grid-template-columns: repeat(3, minmax(0, 1fr));
57-
gap: 1rem;
58-
}
59-
60-
.card {
61-
border: 1px solid var(--site-border);
62-
border-radius: 8px;
63-
background: var(--site-surface);
64-
padding: 0.95rem;
65-
box-shadow: none;
66-
}
67-
68-
.card h3 {
69-
margin-bottom: 0.45rem;
70-
line-height: 1.12;
71-
}
72-
73-
.cardLink {
74-
display: inline-flex;
75-
align-items: center;
76-
margin-top: 0;
77-
font-weight: 700;
78-
}
79-
8044
@media (max-width: 996px) {
8145
.hero {
8246
padding: 2.1rem 0 1.7rem;
8347
}
8448

85-
.decisionGrid,
8649
.grid {
8750
grid-template-columns: 1fr;
8851
}

0 commit comments

Comments
 (0)