initial commit

2026-07-23 18:06:57 +00:00 · 2026-05-29 20:36:55 +02:00
commit 2f973e9991
28 changed files with 6712 additions and 0 deletions
@@ -0,0 +1,61 @@
+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import Footer from '../components/Footer'
+import Header from '../components/Header'
+
+import appCss from '../styles.css?url'
+
+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 = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'TanStack Start Starter',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+  shellComponent: RootDocument,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
+        <HeadContent />
+      </head>
+      <body className="font-sans antialiased [overflow-wrap:anywhere] selection:bg-[rgba(79,184,178,0.24)]">
+        <Header />
+        {children}
+        <Footer />
+        <TanStackDevtools
+          config={{
+            position: 'bottom-right',
+          }}
+          plugins={[
+            {
+              name: 'Tanstack Router',
+              render: <TanStackRouterDevtoolsPanel />,
+            },
+          ]}
+        />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
@@ -0,0 +1,23 @@
+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">
+        <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">
+          A small starter with room to grow.
+        </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. Use this as a clean foundation, then layer in
+          your own routes, styling, and add-ons.
+        </p>
+      </section>
+    </main>
+  )
+}
@@ -0,0 +1,87 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({ component: App })
+
+function App() {
+  return (
+    <main className="page-wrap px-4 pb-8 pt-14">
+      <section className="island-shell rise-in relative overflow-hidden rounded-[2rem] px-6 py-10 sm:px-10 sm:py-14">
+        <div className="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />
+        <div className="pointer-events-none absolute -bottom-20 -right-20 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.18),transparent_66%)]" />
+        <p className="island-kicker mb-3">TanStack Start Base Template</p>
+        <h1 className="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">
+          Start simple, ship quickly.
+        </h1>
+        <p className="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">
+          This base starter intentionally keeps things light: two routes, clean
+          structure, and the essentials you need to build from scratch.
+        </p>
+        <div className="flex flex-wrap gap-3">
+          <a
+            href="/about"
+            className="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-[var(--lagoon-deep)] no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"
+          >
+            About This Starter
+          </a>
+          <a
+            href="https://tanstack.com/router"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="rounded-full border border-[rgba(23,58,64,0.2)] bg-white/50 px-5 py-2.5 text-sm font-semibold text-[var(--sea-ink)] no-underline transition hover:-translate-y-0.5 hover:border-[rgba(23,58,64,0.35)]"
+          >
+            Router Guide
+          </a>
+        </div>
+      </section>
+
+      <section className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {[
+          [
+            'Type-Safe Routing',
+            'Routes and links stay in sync across every page.',
+          ],
+          [
+            'Server Functions',
+            'Call server code from your UI without creating API boilerplate.',
+          ],
+          [
+            'Streaming by Default',
+            'Ship progressively rendered responses for faster experiences.',
+          ],
+          [
+            'Tailwind Native',
+            'Design quickly with utility-first styling and reusable tokens.',
+          ],
+        ].map(([title, desc], index) => (
+          <article
+            key={title}
+            className="island-shell feature-card rise-in rounded-2xl p-5"
+            style={{ animationDelay: `${index * 90 + 80}ms` }}
+          >
+            <h2 className="mb-2 text-base font-semibold text-[var(--sea-ink)]">
+              {title}
+            </h2>
+            <p className="m-0 text-sm text-[var(--sea-ink-soft)]">{desc}</p>
+          </article>
+        ))}
+      </section>
+
+      <section className="island-shell mt-8 rounded-2xl p-6">
+        <p className="island-kicker mb-2">Quick Start</p>
+        <ul className="m-0 list-disc space-y-2 pl-5 text-sm text-[var(--sea-ink-soft)]">
+          <li>
+            Edit <code>src/routes/index.tsx</code> to customize the home page.
+          </li>
+          <li>
+            Update <code>src/components/Header.tsx</code> and{' '}
+            <code>src/components/Footer.tsx</code> for brand links.
+          </li>
+          <li>
+            Add routes in <code>src/routes</code> and tweak visual tokens in{' '}
+            <code>src/styles.css</code>.
+          </li>
+        </ul>
+      </section>
+    </main>
+  )
+}