Skip to content

Commit ea3841c

Browse files
santiago-ramos-02santiago-ramos-02
committed
feat: enhance demo with new branding, improved metadata, and updated styles
1 parent 91d546c commit ea3841c

9 files changed

Lines changed: 312 additions & 93 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,5 @@ temp-*
1717

1818
.tanstack
1919
**/.vitepress/cache
20+
21+
.vercel

‎examples/demo/index.html‎

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,57 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="application-name" content="ClaimDesk Live">
7+
<meta name="author" content="MappTech">
8+
<meta
9+
name="keywords"
10+
content="ClaimDesk Live, claims workspace, insurance adjusters, route cache, TanStack Router, tanstack-router-cache"
11+
>
12+
<meta name="robots" content="index, follow">
13+
<meta name="theme-color" content="#14312d">
614
<meta
715
name="description"
8-
content="Interactive tanstack-router-cache demo for TanStack Router route view caching."
16+
content="ClaimDesk Live is an interactive route-cache demo that keeps insurance claim notes, repair partners, and customer workspaces ready while adjusters move between pages."
17+
>
18+
<meta property="og:site_name" content="ClaimDesk Live">
19+
<meta property="og:type" content="website">
20+
<meta property="og:title" content="ClaimDesk Live | Claims stay ready">
21+
<meta
22+
property="og:description"
23+
content="Explore a claims desk demo where live notes, repair networks, and adjuster workflows stay ready across route changes."
24+
>
25+
<meta property="og:image" content="/og-image.svg">
26+
<meta property="og:image:alt" content="ClaimDesk Live product card">
27+
<meta name="twitter:card" content="summary_large_image">
28+
<meta name="twitter:title" content="ClaimDesk Live | Claims stay ready">
29+
<meta
30+
name="twitter:description"
31+
content="A polished insurance claim workspace demo powered by route view caching."
932
>
10-
<title>tanstack-router-cache demo</title>
33+
<meta name="twitter:image" content="/og-image.svg">
34+
<meta name="twitter:image:alt" content="ClaimDesk Live product card">
35+
<link rel="icon" href="/logo.svg" type="image/svg+xml">
36+
<link rel="apple-touch-icon" href="/logo.svg">
37+
<link rel="manifest" href="/site.webmanifest">
38+
<script type="application/ld+json">
39+
{
40+
"@context": "https://schema.org",
41+
"@type": "SoftwareApplication",
42+
"name": "ClaimDesk Live",
43+
"applicationCategory": "BusinessApplication",
44+
"operatingSystem": "Web",
45+
"description": "Interactive claims workspace demo for route view caching.",
46+
"author": {
47+
"@type": "Organization",
48+
"name": "MappTech"
49+
},
50+
"publisher": {
51+
"@type": "Organization",
52+
"name": "Northline Mutual"
53+
}
54+
}
55+
</script>
56+
<title>ClaimDesk Live | Claims stay ready</title>
1157
</head>
1258
<body>
1359
<div id="root"></div>

‎examples/demo/public/logo.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎examples/demo/public/og-image.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎examples/demo/public/site.webmanifest‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "ClaimDesk Live",
3+
"short_name": "ClaimDesk",
4+
"description": "Interactive claims workspace demo for route view caching.",
5+
"icons": [
6+
{
7+
"src": "/logo.svg",
8+
"sizes": "512x512",
9+
"type": "image/svg+xml",
10+
"purpose": "any maskable"
11+
}
12+
],
13+
"theme_color": "#14312d",
14+
"background_color": "#edf3f1",
15+
"display": "standalone"
16+
}

‎examples/demo/src/app-shell.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,27 @@ export function AppShell() {
1111
</a>
1212
<header className="top-bar">
1313
<div className="brand-block">
14-
<p className="eyebrow">tanstack-router-cache</p>
15-
<h1>Keep a busy page alive.</h1>
14+
<div className="brand-lockup">
15+
<img
16+
alt=""
17+
className="brand-logo"
18+
height="34"
19+
src="/logo.svg"
20+
width="34"
21+
/>
22+
<div className="brand-copy">
23+
<p className="brand-name">ClaimDesk Live</p>
24+
<p className="eyebrow">Northline Mutual</p>
25+
</div>
26+
</div>
1627
</div>
1728
<nav aria-label="Demo areas">
1829
<ul className="nav-list">
1930
<li>
2031
<NavigationLink label="Live case" to="/" />
2132
</li>
2233
<li className="nav-group">
23-
<NavigationLink label="Guided demo" to="/basic" />
34+
<span className="nav-label">Compare</span>
2435
<ul className="nav-children">
2536
<li>
2637
<NavigationLink
@@ -37,7 +48,7 @@ export function AppShell() {
3748
</ul>
3849
</li>
3950
<li className="nav-group">
40-
<NavigationLink label="Advanced" to="/advanced" />
51+
<span className="nav-label">Workbench</span>
4152
<ul className="nav-children">
4253
<li>
4354
<NavigationLink label="Case plan" to="/advanced/draft" />
@@ -48,9 +59,6 @@ export function AppShell() {
4859
to="/advanced/catalog"
4960
/>
5061
</li>
51-
<li>
52-
<NavigationLink label="Fresh page" to="/advanced/regular" />
53-
</li>
5462
</ul>
5563
</li>
5664
</ul>

‎examples/demo/src/components/cache-panel.tsx‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useRouteCacheNavigation, useRouterCache } from "tanstack-router-cache";
2-
import { StatusMetric } from "./status-metric";
32

43
const pageLabels: Record<string, string> = {
54
"/": "Live case",
@@ -29,22 +28,12 @@ export function CachePanel() {
2928
<h2>Saved pages</h2>
3029
</div>
3130

32-
<div className="metric-grid">
33-
<StatusMetric
34-
label="Opening"
35-
value={
36-
activeNavigation ? getPageLabel(activeNavigation.pathname) : "Ready"
37-
}
38-
/>
39-
<StatusMetric
40-
label="Last return"
41-
value={
42-
lastCompletedNavigation
43-
? `${Math.round(lastCompletedNavigation.duration)}ms`
44-
: "None yet"
45-
}
46-
/>
47-
</div>
31+
<p className="shelf-meta">
32+
{activeNavigation ? getPageLabel(activeNavigation.pathname) : "Ready"}
33+
{lastCompletedNavigation
34+
? ` · ${Math.round(lastCompletedNavigation.duration)}ms return`
35+
: ""}
36+
</p>
4837

4938
<div className="cache-list">
5039
{pathnames.length === 0 ? (

‎examples/demo/src/pages/home-page.tsx‎

Lines changed: 27 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,20 @@ import { StatusMetric } from "../components/status-metric";
44

55
const routeApi = getRouteApi("/");
66

7+
const routeCacheSnippet = [
8+
"const liveCase = createRoute({",
9+
' path: "/",',
10+
" staticData: { routeCache: true },",
11+
" staleTime: Number.POSITIVE_INFINITY,",
12+
"});",
13+
"",
14+
"const scratchNote = createRoute({",
15+
' path: "/basic/regular-form",',
16+
" gcTime: 0,",
17+
' loader: { staleReloadMode: "blocking" },',
18+
"});",
19+
].join("\n");
20+
721
export function HomePage() {
822
const claimFile = routeApi.useLoaderData();
923
const [adjuster, setAdjuster] = useState(claimFile.adjuster);
@@ -18,7 +32,7 @@ export function HomePage() {
1832
<header className="case-title">
1933
<div>
2034
<p className="eyebrow">Claim {claimFile.claimNumber}</p>
21-
<h2>The claim file stays exactly where you left it.</h2>
35+
<h2>Edit. Leave. Return.</h2>
2236
</div>
2337
<span className="active-badge">Live case</span>
2438
</header>
@@ -74,47 +88,25 @@ export function HomePage() {
7488
</section>
7589

7690
<aside aria-label="Demo checklist" className="case-brief">
77-
<p className="eyebrow">Try this</p>
91+
<p className="eyebrow">Clip path</p>
92+
<h3>Saved stays. Fresh resets.</h3>
7893
<ol className="step-list">
79-
<li>Change the customer note.</li>
94+
<li>Edit the note.</li>
8095
<li>Open the inbox.</li>
81-
<li>Come back to the live case.</li>
96+
<li>Return here.</li>
8297
</ol>
83-
<div className="metric-grid">
84-
<StatusMetric label="Prepared" value={claimFile.preparedAt} />
85-
<StatusMetric label="First wait" value={`${claimFile.delayMs}ms`} />
86-
<StatusMetric label="Desk id" value={claimFile.deskId} />
87-
<StatusMetric
88-
label="Note size"
89-
value={`${claimNote.length} chars`}
90-
/>
91-
</div>
92-
<p>
93-
The inbox starts fresh. This claim keeps the note, selected status,
94-
checkbox, and scroll position ready for the customer call.
95-
</p>
98+
<StatusMetric label="Note size" value={`${claimNote.length} chars`} />
99+
<details className="code-panel">
100+
<summary>Code</summary>
101+
<pre>
102+
<code>{routeCacheSnippet}</code>
103+
</pre>
104+
</details>
96105
<Link className="text-link" to="/advanced">
97-
Open advanced workbench
106+
Advanced workbench
98107
</Link>
99108
</aside>
100109
</div>
101-
102-
<div className="feature-grid">
103-
<Link className="value-card value-card-accent" to="/basic/saved-form">
104-
<span>Saved claim file</span>
105-
<p>Leave mid-sentence and return with the same work in place.</p>
106-
</Link>
107-
<Link className="value-card" to="/basic/regular-form">
108-
<span>Scratch note</span>
109-
<p>Use the reset page to see how a regular screen behaves.</p>
110-
</Link>
111-
<Link className="value-card" to="/advanced/catalog">
112-
<span>Repair network</span>
113-
<p>
114-
Filter and shortlist vendors, then leave without losing context.
115-
</p>
116-
</Link>
117-
</div>
118110
</section>
119111
);
120112
}

0 commit comments

Comments
 (0)