@tanstack/create 0.61.6 → 0.62.0

package/src/frameworks/react/project/base/public/images/lagoon-5.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 5">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0%" stop-color="#9cded4"/>
+      <stop offset="48%" stop-color="#6fb9cf"/>
+      <stop offset="100%" stop-color="#24566b"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <path d="M0 505c160-65 320-65 480 0s320 65 720 0v125H0z" fill="#edf9f4" fill-opacity="0.76"/>
+  <circle cx="260" cy="120" r="102" fill="#fff" fill-opacity="0.2"/>
+</svg>

package/src/frameworks/react/project/base/public/images/lagoon-about.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon about illustration">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0%" stop-color="#bceee3"/>
+      <stop offset="54%" stop-color="#8cc5be"/>
+      <stop offset="100%" stop-color="#3b7b78"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <rect x="160" y="130" width="880" height="370" rx="34" fill="#fff" fill-opacity="0.28"/>
+  <path d="M220 424h760" stroke="#fff" stroke-opacity="0.6" stroke-width="10" stroke-linecap="round"/>
+  <path d="M220 468h600" stroke="#fff" stroke-opacity="0.46" stroke-width="10" stroke-linecap="round"/>
+  <circle cx="980" cy="190" r="72" fill="#fff" fill-opacity="0.22"/>
+</svg>

package/src/frameworks/react/project/base/src/components/Footer.tsx.ejs

@@ -0,0 +1,42 @@
+export default function Footer() {
+  const year = new Date().getFullYear()
+
+  return (
+    <footer className="mt-20 border-t border-[var(--line)] px-4 pb-14 pt-10 text-[var(--sea-ink-soft)]">
+      <div className="page-wrap flex flex-col items-center justify-between gap-4 text-center sm:flex-row sm:text-left">
+        <p className="m-0 text-sm">&copy; {year} Your name here. All rights reserved.</p>
+        <p className="island-kicker m-0">Built with TanStack Start</p>
+      </div>
+      <div className="mt-4 flex justify-center gap-4">
+        <a
+          href="https://x.com/tan_stack"
+          target="_blank"
+          rel="noreferrer"
+          className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
+        >
+          <span className="sr-only">Follow TanStack on X</span>
+          <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
+            <path
+              fill="currentColor"
+              d="M12.6 1h2.2L10 6.48 15.64 15h-4.41L7.78 9.82 3.23 15H1l5.14-5.84L.72 1h4.52l3.12 4.73L12.6 1zm-.77 12.67h1.22L4.57 2.26H3.26l8.57 11.41z"
+            />
+          </svg>
+        </a>
+        <a
+          href="https://github.com/TanStack"
+          target="_blank"
+          rel="noreferrer"
+          className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
+        >
+          <span className="sr-only">Go to TanStack GitHub</span>
+          <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
+            <path
+              fill="currentColor"
+              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+            />
+          </svg>
+        </a>
+      </div>
+    </footer>
+  )
+}

package/src/frameworks/react/project/base/src/components/Header.tsx.ejs

@@ -1,156 +1,110 @@
-<% if (addOns.length === 0 && integrations.length === 0 && routes.length === 0) { ignoreFile() } %>import { Link } from '@tanstack/react-router'
-<% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
-import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
-<% } %><%
-const icons = new Set([
-  "Menu",
-  "X",
-  "Home",
-])
+import { Link } from '@tanstack/react-router'
+<% for (const integration of integrations.filter((i) => i.type === 'header-user')) { %>import <%= integration.jsName %> from '<%= relativePath(integration.path) %>'
+<% } %>import ThemeToggle from './ThemeToggle'
 
-const hasRoutesWithChildren = addOns.some(a => a.routes?.some(r => r.children));
-
-if (hasRoutesWithChildren) {
-  icons.add("ChevronDown");
-  icons.add("ChevronRight");
-}
-
-for(const addOn of addOns) {
-  for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) {
-    icons.add( route.icon || "Globe");
+<%
+const demoRoutes = [];
+for (const addOn of addOns) {
+  for (const route of (addOn?.routes || []).filter((r) => r.url && r.name)) {
+    demoRoutes.push({ url: route.url, name: route.name });
+    for (const child of route.children || []) {
+      if (child?.url && child?.name) {
+        demoRoutes.push({ url: child.url, name: child.name });
+      }
+    }
   }
 }
+const userHeaders = integrations.filter((i) => i.type === 'header-user');
 %>
-import { useState } from 'react';
-import {
-  <%= Array.from(icons).sort().join(", ") %>
-} from "lucide-react";
 
 export default function Header() {
-<%
-const menusWithChildren = addOns.filter(a => a.routes?.some(r => r.children));
-const userHeaders = integrations.filter(i => i.type === 'header-user');
-%>
-  const [isOpen, setIsOpen] = useState(false);
-  <% if (menusWithChildren.length > 0) { %>const [groupedExpanded, setGroupedExpanded] = useState<Record<string, boolean>>({});
-  <% } %>
-
   return (
-    <>
-      <header className="p-4 flex items-center bg-gray-800 text-white shadow-lg">
-        <button
-          onClick={() => setIsOpen(true)}
-          className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
-          aria-label="Open menu"
-        >
-          <Menu size={24} />
-        </button>
-        <h1 className="ml-4 text-xl font-semibold">
-          <Link to="/">
-            <img
-              src="/tanstack-word-logo-white.svg"
-              alt="TanStack Logo"
-              className="h-10"
-            />
+    <header className="sticky top-0 z-50 border-b border-[var(--line)] bg-[var(--header-bg)] px-4 backdrop-blur-lg">
+      <nav className="page-wrap flex flex-wrap items-center gap-x-3 gap-y-2 py-3 sm:py-4">
+        <h2 className="m-0 flex-shrink-0 text-base font-semibold tracking-tight">
+          <Link
+            to="/"
+            className="inline-flex items-center gap-2 rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm text-[var(--sea-ink)] no-underline shadow-[0_8px_24px_rgba(30,90,72,0.08)] sm:px-4 sm:py-2"
+          >
+            <span className="h-2 w-2 rounded-full bg-[linear-gradient(90deg,#56c6be,#7ed3bf)]" />
+            TanStack Start
           </Link>
-        </h1>
-      </header>
+        </h2>
 
-      <aside
-        className={`fixed top-0 left-0 h-full w-80 bg-gray-900 text-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${
-          isOpen ? "translate-x-0" : "-translate-x-full"
-        }`}
-      >
-        <div className="flex items-center justify-between p-4 border-b border-gray-700">
-          <h2 className="text-xl font-bold">Navigation</h2>
-          <button
-            onClick={() => setIsOpen(false)}
-            className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
-            aria-label="Close menu"
+        <div className="ml-auto flex items-center gap-1.5 sm:ml-0 sm:gap-2">
+          <a
+            href="https://x.com/tan_stack"
+            target="_blank"
+            rel="noreferrer"
+            className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block"
+          >
+            <span className="sr-only">Follow TanStack on X</span>
+            <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
+              <path
+                fill="currentColor"
+                d="M12.6 1h2.2L10 6.48 15.64 15h-4.41L7.78 9.82 3.23 15H1l5.14-5.84L.72 1h4.52l3.12 4.73L12.6 1zm-.77 12.67h1.22L4.57 2.26H3.26l8.57 11.41z"
+              />
+            </svg>
+          </a>
+          <a
+            href="https://github.com/TanStack"
+            target="_blank"
+            rel="noreferrer"
+            className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block"
           >
-            <X size={24} />
-          </button>
+            <span className="sr-only">Go to TanStack GitHub</span>
+            <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
+              <path
+                fill="currentColor"
+                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+              />
+            </svg>
+          </a>
+          <% for (const integration of userHeaders) { %><<%= integration.jsName %> />
+          <% } %>
+          <ThemeToggle />
         </div>
 
-        <nav className="flex-1 p-4 overflow-y-auto">
+        <div className="order-3 flex w-full flex-wrap items-center gap-x-4 gap-y-1 pb-1 text-sm font-semibold sm:order-2 sm:w-auto sm:flex-nowrap sm:pb-0">
+          <Link to="/" className="nav-link" activeProps={{ className: 'nav-link is-active' }}>
+            Home
+          </Link>
           <Link
-            to="/"
-            onClick={() => setIsOpen(false)}
-            className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-            activeProps={{
-              className:
-                "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-            }}
+            to="/blog"
+            className="nav-link"
+            activeProps={{ className: 'nav-link is-active' }}
           >
-            <Home size={20} />
-            <span className="font-medium">Home</span>
+            Blog
           </Link>
-
-          {/* Demo Links Start */}
-          <% for(const addOn of addOns) {
-            for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) {
-              if (route.children) { %>
-                <div className="flex flex-row justify-between">
-                  <Link to="<%= route.url %>"
-                    onClick={() => setIsOpen(false)}
-                    className="flex-1 flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-                    activeProps={{
-                      className:
-                        "flex-1 flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-                    }}
-                  >
-                    <<%= route.icon || "Globe" %> size={20} />
-                    <span className="font-medium"><%= route.name %></span>  
-                  </Link>
-                  <button
-                    className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
-                    onClick={() => setGroupedExpanded(prev => ({ ...prev, <%= route.jsName %>: !prev.<%= route.jsName %> }))}>
-                    {groupedExpanded.<%= route.jsName %> ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
-                  </button>
-                </div>
-                {groupedExpanded.<%= route.jsName %> && (
-                  <div className="flex flex-col ml-4">
-                    <% for(const child of route.children) { %>
-                      <Link
-                        to="<%= child.url %>"
-                        onClick={() => setIsOpen(false)}
-                        className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-                        activeProps={{
-                          className:
-                            "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-                        }}
-                      >
-                        <<%= child.icon || "Globe" %> size={20} />
-                        <span className="font-medium"><%= child.name %></span>
-                      </Link>
-                    <% } %>
-                </div>
-                )}
-            <% } else { %>
-              <Link
-                to="<%= route.url %>"
-                onClick={() => setIsOpen(false)}
-                className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-                activeProps={{
-                  className:
-                    "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-                }}
+          <Link
+            to="/about"
+            className="nav-link"
+            activeProps={{ className: 'nav-link is-active' }}
+          >
+            About
+          </Link>
+          <a
+            href="https://tanstack.com/start/latest/docs/framework/react/overview"
+            className="nav-link"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Docs
+          </a>
+          <% if (demoRoutes.length > 0) { %><details className="relative w-full sm:w-auto">
+            <summary className="nav-link list-none cursor-pointer">Demos</summary>
+            <div className="mt-2 min-w-56 rounded-xl border border-[var(--line)] bg-[var(--header-bg)] p-2 shadow-lg sm:absolute sm:right-0">
+              <% for (const route of demoRoutes) { %><a
+                href="<%= route.url %>"
+                className="block rounded-lg px-3 py-2 text-sm text-[var(--sea-ink-soft)] no-underline transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
               >
-                <<%= route.icon || "Globe" %> size={20} />
-                <span className="font-medium"><%= route.name %></span>
-              </Link>
-          <% } } } %>
-          {/* Demo Links End */}
-        </nav>
-
-        <% if (userHeaders.length > 0) { %>
-        <div className="p-4 border-t border-gray-700 bg-gray-800 flex flex-col gap-2">
-          <% for(const integration of userHeaders) { %>
-            <<%= integration.jsName %> />
-          <% } %>
+                <%= route.name %>
+              </a>
+              <% } %>
+            </div>
+          </details><% } %>
         </div>
-        <% } %>
-      </aside>
-    </>
-  );
+      </nav>
+    </header>
+  )
 }

package/src/frameworks/react/project/base/src/components/MdxCallout.tsx.ejs

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+
+export function MdxCallout({
+  title,
+  children,
+}: {
+  title: string
+  children: ReactNode
+}) {
+  return (
+    <aside className="not-prose my-6 rounded-xl border border-[var(--line)] bg-[var(--chip-bg)] p-4">
+      <p className="island-kicker mb-2">{title}</p>
+      <div className="text-sm leading-7 text-[var(--sea-ink-soft)]">{children}</div>
+    </aside>
+  )
+}

package/src/frameworks/react/project/base/src/components/MdxMetrics.tsx.ejs

@@ -0,0 +1,23 @@
+export function MdxMetrics({
+  items,
+}: {
+  items: Array<{ label: string; value: string }>
+}) {
+  return (
+    <div className="not-prose my-6 grid gap-3 sm:grid-cols-3">
+      {items.map((item) => (
+        <div
+          key={item.label}
+          className="rounded-xl border border-[var(--line)] bg-[var(--chip-bg)] px-4 py-3"
+        >
+          <p className="m-0 text-xs uppercase tracking-[0.12em] text-[var(--sea-ink-soft)]">
+            {item.label}
+          </p>
+          <p className="m-0 mt-1 text-lg font-semibold text-[var(--sea-ink)]">
+            {item.value}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/frameworks/react/project/base/src/components/ThemeToggle.tsx.ejs

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react'
+
+type ThemeMode = 'light' | 'dark' | 'auto'
+
+function getInitialMode(): ThemeMode {
+  if (typeof window === 'undefined') {
+    return 'auto'
+  }
+
+  const stored = window.localStorage.getItem('theme')
+  if (stored === 'light' || stored === 'dark' || stored === 'auto') {
+    return stored
+  }
+
+  return 'auto'
+}
+
+function applyThemeMode(mode: ThemeMode) {
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  const resolved = mode === 'auto' ? (prefersDark ? 'dark' : 'light') : mode
+
+  document.documentElement.classList.remove('light', 'dark')
+  document.documentElement.classList.add(resolved)
+
+  if (mode === 'auto') {
+    document.documentElement.removeAttribute('data-theme')
+  } else {
+    document.documentElement.setAttribute('data-theme', mode)
+  }
+
+  document.documentElement.style.colorScheme = resolved
+}
+
+export default function ThemeToggle() {
+  const [mode, setMode] = useState<ThemeMode>('auto')
+
+  useEffect(() => {
+    const initialMode = getInitialMode()
+    setMode(initialMode)
+    applyThemeMode(initialMode)
+  }, [])
+
+  useEffect(() => {
+    if (mode !== 'auto') {
+      return
+    }
+
+    const media = window.matchMedia('(prefers-color-scheme: dark)')
+    const onChange = () => applyThemeMode('auto')
+
+    media.addEventListener('change', onChange)
+    return () => {
+      media.removeEventListener('change', onChange)
+    }
+  }, [mode])
+
+  function toggleMode() {
+    const nextMode: ThemeMode =
+      mode === 'light' ? 'dark' : mode === 'dark' ? 'auto' : 'light'
+    setMode(nextMode)
+    applyThemeMode(nextMode)
+    window.localStorage.setItem('theme', nextMode)
+  }
+
+  const label =
+    mode === 'auto'
+      ? 'Theme mode: auto (system). Click to switch to light mode.'
+      : `Theme mode: ${mode}. Click to switch mode.`
+
+  return (
+    <button
+      type="button"
+      onClick={toggleMode}
+      aria-label={label}
+      title={label}
+      className="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm font-semibold text-[var(--sea-ink)] shadow-[0_8px_22px_rgba(30,90,72,0.08)] transition hover:-translate-y-0.5"
+    >
+      {mode === 'auto' ? 'Auto' : mode === 'dark' ? 'Dark' : 'Light'}
+    </button>
+  )
+}

package/src/frameworks/react/project/base/src/lib/site.ts.ejs

@@ -0,0 +1,4 @@
+export const SITE_TITLE = 'TanStack Start'
+export const SITE_DESCRIPTION =
+  'A tropical, breathable app starter with full-document SSR, server functions, streaming, and type-safe routing.'
+export const SITE_URL = 'https://example.com'

package/src/frameworks/react/project/base/src/main.tsx.ejs

@@ -1,5 +1,4 @@
 <% if (!routerOnly) { ignoreFile() } %>
-import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'

package/src/frameworks/react/project/base/src/routes/__root.tsx.ejs

@@ -33,9 +33,9 @@ import {
   HeadContent, Scripts, <% if (hasContext) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
 import { TanStackDevtools } from '@tanstack/react-devtools'
-<% if (addOns.length) { %>
+import Footer from '../components/Footer'
 import Header from '../components/Header'
-<% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>
+<% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>
 import <%= integration.jsName %> from '<%= relativePath(integration.path, true) %>'
 <% } %><% if (addOnEnabled.paraglide) { %>
 import { getLocale } from '#/paraglide/runtime'
@@ -61,6 +61,8 @@ interface MyRouterContext <% if (addOnEnabled["apollo-client"]) {%> extends Apol
 <% } %>
 }<% } %>
 
+const THEME_INIT_SCRIPT = `(function(){try{var stored=window.localStorage.getItem('theme');var mode=(stored==='light'||stored==='dark'||stored==='auto')?stored:'auto';var prefersDark=window.matchMedia('(prefers-color-scheme: dark)').matches;var resolved=mode==='auto'?(prefersDark?'dark':'light'):mode;var root=document.documentElement;root.classList.remove('light','dark');root.classList.add(resolved);if(mode==='auto'){root.removeAttribute('data-theme')}else{root.setAttribute('data-theme',mode)}root.style.colorScheme=resolved;}catch(e){}})();`
+
 export const Route = <% if (hasContext) { %>createRootRouteWithContext<MyRouterContext>()<% } else { %>createRootRoute<% } %>({
 <% if (addOnEnabled.paraglide) { %>
   beforeLoad: async () => {
@@ -96,14 +98,16 @@ export const Route = <% if (hasContext) { %>createRootRouteWithContext<MyRouterC
 
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
-    <% if (addOnEnabled.paraglide) { %><html lang={getLocale()}><% } else { %><html lang="en"><% } %>
+      <% if (addOnEnabled.paraglide) { %><html lang={getLocale()} suppressHydrationWarning><% } else { %><html lang="en" suppressHydrationWarning><% } %>
       <head>
+        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
         <HeadContent />
       </head>
-      <body>
+      <body className="font-sans antialiased [overflow-wrap:anywhere] selection:bg-[rgba(79,184,178,0.24)]">
         <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>
-        <% } %><% if (addOns.length) { %><Header />  
-        <% } %>{children}
+        <% } %><Header />
+        {children}
+        <Footer />
           <TanStackDevtools
             config={{
               position: 'bottom-right',

package/src/frameworks/react/project/base/src/routes/about.tsx.ejs

@@ -0,0 +1,27 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/about')({
+  component: About,
+})
+
+function About() {
+  return (
+    <main className="page-wrap px-4 py-12">
+      <section className="island-shell rounded-2xl p-6 sm:p-8">
+        <img
+          src="/images/lagoon-about.svg"
+          alt=""
+          className="mb-6 h-56 w-full rounded-2xl object-cover"
+        />
+        <p className="island-kicker mb-2">About</p>
+        <h1 className="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
+          Built for shipping fast.
+        </h1>
+        <p className="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
+          TanStack Start gives you type-safe routing, server functions, and modern SSR
+          defaults so you can focus on product work instead of framework glue.
+        </p>
+      </section>
+    </main>
+  )
+}

package/src/frameworks/react/project/base/src/routes/blog.$slug.tsx.ejs

@@ -0,0 +1,71 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+import { MDXContent } from '@content-collections/mdx/react'
+import { allBlogs } from 'content-collections'
+import { SITE_URL } from '#/lib/site'
+import { MdxCallout } from '#/components/MdxCallout'
+import { MdxMetrics } from '#/components/MdxMetrics'
+
+export const Route = createFileRoute('/blog/$slug')({
+  loader: ({ params }) => {
+    const post = Array.from(
+      new Map(
+        [...allBlogs]
+          .sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf())
+          .map((entry) => [entry.slug, entry]),
+      ).values(),
+    ).find((entry) => entry.slug === params.slug)
+    if (!post) throw notFound()
+    return post
+  },
+  head: ({ loaderData, params }) => {
+    const title = loaderData?.title ?? 'Post'
+    const description = loaderData?.description ?? ''
+    const image = loaderData?.heroImage ?? '/images/lagoon-1.svg'
+    return {
+      links: [{ rel: 'canonical', href: `${SITE_URL}/blog/${params.slug}` }],
+      meta: [
+        { title },
+        { name: 'description', content: description },
+        {
+          property: 'og:image',
+          content: image.startsWith('http') ? image : `${SITE_URL}${image}`,
+        },
+      ],
+    }
+  },
+  component: BlogPost,
+})
+
+function BlogPost() {
+  const post = Route.useLoaderData()
+
+  return (
+    <main className="page-wrap px-4 pb-12 pt-16">
+      <article className="island-shell rounded-2xl p-6 sm:p-8">
+        {post.heroImage ? (
+          <img
+            src={post.heroImage}
+            alt=""
+            className="mb-6 h-64 w-full rounded-2xl object-cover"
+          />
+        ) : null}
+        <p className="island-kicker mb-2">Post</p>
+        <h1 className="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
+          {post.title}
+        </h1>
+        <p className="mb-6 text-sm text-[var(--sea-ink-soft)]">
+          {new Date(post.pubDate).toLocaleDateString()}
+        </p>
+        <div
+          className="prose prose-slate prose-headings:text-[var(--sea-ink)] prose-p:text-[var(--sea-ink-soft)] prose-li:text-[var(--sea-ink-soft)] prose-ul:text-[var(--sea-ink-soft)] prose-ol:text-[var(--sea-ink-soft)] prose-strong:text-[var(--sea-ink)] prose-a:text-[var(--lagoon-deep)] max-w-none"
+        >
+          {post.mdx ? (
+            <MDXContent code={post.mdx} components={{ MdxCallout, MdxMetrics }} />
+          ) : (
+            <div dangerouslySetInnerHTML={{ __html: post.html ?? '' }} />
+          )}
+        </div>
+      </article>
+    </main>
+  )
+}