Upgrade web to Next 16 + Tailwind v4, add Vercel Analytics (#12)

Author: nixrajput

web/.eslintrc.json

@@ -1,17 +1,21 @@
 # siphon web — landing page & docs
 
 The marketing landing page and documentation site for siphon, built with
-Next.js (App Router) + Tailwind and deployed on Vercel. The docs pages render
-the repository's own `docs/*.md` at build time, so the site never drifts from
-the shipped documentation.
+Next.js 16 (App Router, Turbopack) + React 19 + Tailwind CSS v4 and deployed on
+Vercel. The docs pages render the repository's own `docs/*.md` at build time, so
+the site never drifts from the shipped documentation.
+
+Tailwind v4 is configured CSS-first: there is no `tailwind.config.*`. The design
+tokens live as CSS variables in `app/globals.css` (imported via
+`@import "tailwindcss"`), and the PostCSS plugin is `@tailwindcss/postcss`.
 
 ## Develop
 
 ```bash
 cd web
 npm install
-npm run dev           # http://localhost:3000
-npm run build         # production build (also what Vercel runs)
+npm run dev           # http://localhost:3000 (Turbopack)
+npm run build         # production build with Turbopack (also what Vercel runs)
 
 npm run lint          # ESLint
 npm run lint:fix      # ESLint, autofix

web/README.md

@@ -18,19 +18,19 @@ export default function DocsIndex() {
     <main>
       <p className="eyebrow mb-3">documentation</p>
       <h1 className="mb-4 text-4xl">Concepts &amp; guides</h1>
-      <p className="mb-8 max-w-2xl leading-relaxed text-[var(--muted)]">
+      <p className="mb-8 max-w-2xl leading-relaxed text-(--muted)">
         Everything you need to run siphon in anger — from your first backup to continuous
         cross-engine replication. These pages render the same Markdown that ships in the repository,
         so they track the latest source.
       </p>
 
       {/* Quick start: get someone to a working install without leaving the
           Overview, then point them at the first guide. */}
-      <div className="mb-12 rounded-xl border border-[var(--line)] bg-[var(--ink-2)] p-6">
+      <div className="mb-12 rounded-xl border border-(--line) bg-(--ink-2) p-6">
         <p className="eyebrow mb-3">quick start</p>
-        <p className="mb-4 max-w-xl text-sm leading-relaxed text-[var(--muted)]">
+        <p className="mb-4 max-w-xl text-sm leading-relaxed text-(--muted)">
           Install the binary, then head to{" "}
-          <Link href="/docs/getting-started" className="text-[var(--flow)]">
+          <Link href="/docs/getting-started" className="text-(--flow)">
             Getting started
           </Link>{" "}
           for your first backup and sync.
@@ -53,31 +53,31 @@ export default function DocsIndex() {
                 <Link
                   key={d.slug}
                   href={`/docs/${d.slug}`}
-                  className="bg-[var(--ink-2)]/40 group block rounded-xl border border-[var(--line)] p-5 no-underline transition-colors hover:border-[var(--flow)] hover:bg-[var(--ink-2)] hover:no-underline"
+                  className="group block rounded-xl border border-(--line) bg-(--ink-2)/40 p-5 no-underline transition-colors hover:border-(--flow) hover:bg-(--ink-2) hover:no-underline"
                 >
-                  <span className="flex items-center gap-2 text-lg font-semibold text-[var(--paper)]">
+                  <span className="flex items-center gap-2 text-lg font-semibold text-(--paper)">
                     {d.title}
-                    <span className="text-[var(--flow)] opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100">
+                    <span className="text-(--flow) opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100">
                       →
                     </span>
                   </span>
-                  <p className="mt-1.5 text-sm leading-relaxed text-[var(--muted)]">{d.blurb}</p>
+                  <p className="mt-1.5 text-sm leading-relaxed text-(--muted)">{d.blurb}</p>
                 </Link>
               ))}
             </div>
           </section>
         );
       })}
 
-      <div className="mt-12 flex flex-col gap-3 border-t border-[var(--line)] pt-8 text-sm text-[var(--muted)] sm:flex-row sm:items-center sm:justify-between">
+      <div className="mt-12 flex flex-col gap-3 border-t border-(--line) pt-8 text-sm text-(--muted) sm:flex-row sm:items-center sm:justify-between">
         <span>
           Found a gap or a bug?{" "}
-          <ExtLink href={`${REPO_URL}/issues`} className="text-[var(--flow)]">
+          <ExtLink href={`${REPO_URL}/issues`} className="text-(--flow)">
             Open an issue
           </ExtLink>
           .
         </span>
-        <ExtLink href={REPO_URL} className="text-[var(--flow)]">
+        <ExtLink href={REPO_URL} className="text-(--flow)">
           Browse the source ↗
         </ExtLink>
       </div>

web/app/docs/page.tsx

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 /* ── siphon design system ───────────────────────────────────────────────
    Thesis: "the pipe." siphon moves data through a conduit, so the visual
@@ -21,8 +19,8 @@
   --muted: #7e8ca3;
   --line: #25324d;
 
-  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
-    sans-serif;
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
 }
 
@@ -187,7 +185,8 @@
   }
 }
 .flowgrid {
-  background-image: linear-gradient(var(--line) 1px, transparent 1px),
+  background-image:
+    linear-gradient(var(--line) 1px, transparent 1px),
     linear-gradient(90deg, var(--line) 1px, transparent 1px);
   background-size:
     56px 56px,

web/app/globals.css

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { Analytics } from "@vercel/analytics/next";
 import "./globals.css";
 import {
   SITE_URL,
@@ -100,6 +101,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           // Structured data is static, build-time JSON — safe to inline.
           dangerouslySetInnerHTML={{ __html: JSON.stringify(JSON_LD) }}
         />
+        {/* Vercel Web Analytics — privacy-friendly (no cookies). A no-op unless
+            deployed on Vercel with Analytics enabled, so it won't affect the
+            static build or non-Vercel hosting. */}
+        <Analytics />
       </body>
     </html>
   );

web/app/layout.tsx

@@ -80,12 +80,12 @@ export default function Home() {
           <div>
             <p className="eyebrow rise mb-5">backup · restore · sync · cdc</p>
             <h1
-              className="rise text-balance text-[2.6rem] leading-[1.05] sm:text-6xl"
+              className="rise text-[2.6rem] leading-[1.05] text-balance sm:text-6xl"
               style={{ "--rise-delay": "80ms" } as React.CSSProperties}
             >
               Sync any database,
               <br />
-              <span className="bg-gradient-to-r from-[var(--flow)] to-[var(--flow-2)] bg-clip-text text-transparent">
+              <span className="bg-linear-to-r from-(--flow) to-(--flow-2) bg-clip-text text-transparent">
                 anywhere.
               </span>
             </h1>
@@ -94,8 +94,8 @@ export default function Home() {
               style={{ "--rise-delay": "160ms" } as React.CSSProperties}
             >
               One binary that turns the painful sprawl of{" "}
-              <code className="mono text-sm text-[var(--flow)]">pg_dump → pg_restore</code> shell
-              scripts into a guided, observable workflow — across PostgreSQL, MySQL, and MariaDB.
+              <code className="mono text-sm text-(--flow)">pg_dump → pg_restore</code> shell scripts
+              into a guided, observable workflow — across PostgreSQL, MySQL, and MariaDB.
             </p>
             <div className="rise mt-8" style={{ "--rise-delay": "240ms" } as React.CSSProperties}>
               <HeroInstall />
@@ -106,13 +106,13 @@ export default function Home() {
             >
               <Link
                 href="/docs"
-                className="rounded-lg bg-[var(--flow)] px-5 py-3 font-medium text-[var(--ink)] no-underline transition-opacity hover:no-underline hover:opacity-90"
+                className="rounded-lg bg-(--flow) px-5 py-3 font-medium text-(--ink) no-underline transition-opacity hover:no-underline hover:opacity-90"
               >
                 Read the docs
               </Link>
               <ExtLink
                 href={REPO_URL}
-                className="rounded-lg border border-[var(--line)] px-5 py-3 font-medium text-[var(--paper)] no-underline transition-colors hover:border-[var(--flow)] hover:no-underline"
+                className="rounded-lg border border-(--line) px-5 py-3 font-medium text-(--paper) no-underline transition-colors hover:border-(--flow) hover:no-underline"
               >
                 View source ↗
               </ExtLink>
@@ -128,15 +128,15 @@ export default function Home() {
       <section className="mx-auto max-w-6xl px-6 py-12">
         <p className="eyebrow mb-3">how it flows</p>
         <h2 className="mb-10 max-w-2xl text-3xl">Three verbs, one conduit</h2>
-        <div className="grid gap-px overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--line)] md:grid-cols-3">
+        <div className="grid gap-px overflow-hidden rounded-xl border border-(--line) bg-(--line) md:grid-cols-3">
           {FLOW.map((s, i) => (
-            <Reveal key={s.n} delay={i * 90} className="bg-[var(--ink)]">
+            <Reveal key={s.n} delay={i * 90} className="bg-(--ink)">
               <article className="flex h-full flex-col p-6">
-                <span className="mono text-3xl font-bold text-[var(--flow)]">{s.n}</span>
+                <span className="mono text-3xl font-bold text-(--flow)">{s.n}</span>
                 <h3 className="mt-4 text-xl">{s.title}</h3>
-                <p className="mt-2 flex-1 text-sm leading-relaxed text-[var(--muted)]">{s.body}</p>
-                <code className="mt-4 block rounded-md border border-[var(--line)] bg-[#0a111e] px-3 py-2 font-mono text-xs text-[var(--paper)]">
-                  <span className="text-[var(--amber)]">$ </span>
+                <p className="mt-2 flex-1 text-sm leading-relaxed text-(--muted)">{s.body}</p>
+                <code className="mt-4 block rounded-md border border-(--line) bg-[#0a111e] px-3 py-2 font-mono text-xs text-(--paper)">
+                  <span className="text-(--amber)">$ </span>
                   {s.cmd}
                 </code>
               </article>
@@ -151,13 +151,13 @@ export default function Home() {
         <p className="eyebrow mb-10">what it does</p>
         <div className="flex gap-8">
           <div className="flowline hidden shrink-0 sm:block" aria-hidden />
-          <div className="grid gap-px overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--line)] sm:grid-cols-2">
+          <div className="grid gap-px overflow-hidden rounded-xl border border-(--line) bg-(--line) sm:grid-cols-2">
             {FEATURES.map((f, i) => (
-              <Reveal key={f.label} delay={(i % 2) * 90} className="bg-[var(--ink)]">
+              <Reveal key={f.label} delay={(i % 2) * 90} className="bg-(--ink)">
                 <article className="p-6">
                   <p className="eyebrow mb-3">{f.label}</p>
                   <h3 className="mb-2 text-xl">{f.title}</h3>
-                  <p className="text-sm leading-relaxed text-[var(--muted)]">{f.body}</p>
+                  <p className="text-sm leading-relaxed text-(--muted)">{f.body}</p>
                 </article>
               </Reveal>
             ))}
@@ -167,10 +167,10 @@ export default function Home() {
 
       {/* Engines strip: the three databases siphon speaks, stated once. */}
       <section className="mx-auto max-w-6xl px-6 py-12">
-        <div className="flex flex-col items-start justify-between gap-6 rounded-xl border border-[var(--line)] bg-[var(--ink-2)] p-8 sm:flex-row sm:items-center">
+        <div className="flex flex-col items-start justify-between gap-6 rounded-xl border border-(--line) bg-(--ink-2) p-8 sm:flex-row sm:items-center">
           <div>
             <p className="eyebrow mb-2">speaks natively</p>
-            <p className="max-w-md text-sm leading-relaxed text-[var(--muted)]">
+            <p className="max-w-md text-sm leading-relaxed text-(--muted)">
               First-class drivers for each engine — same commands, engine-aware quoting, types, and
               change capture under the hood.
             </p>
@@ -179,7 +179,7 @@ export default function Home() {
             {ENGINES.map((e) => (
               <span
                 key={e}
-                className="rounded-full border border-[var(--line)] bg-[var(--ink)] px-4 py-2 font-mono text-sm text-[var(--flow)]"
+                className="rounded-full border border-(--line) bg-(--ink) px-4 py-2 font-mono text-sm text-(--flow)"
               >
                 {e}
               </span>
@@ -194,29 +194,29 @@ export default function Home() {
         <h2 className="mb-8 text-3xl">Up and running in one line</h2>
         <div className="space-y-6">
           <div>
-            <p className="mb-2 font-mono text-xs uppercase tracking-widest text-[var(--muted)]">
+            <p className="mb-2 font-mono text-xs tracking-widest text-(--muted) uppercase">
               Linux · macOS
             </p>
             <InstallCommand command={INSTALL_CMD} />
           </div>
           <div className="grid gap-6 sm:grid-cols-2">
             <div>
-              <p className="mb-2 font-mono text-xs uppercase tracking-widest text-[var(--muted)]">
+              <p className="mb-2 font-mono text-xs tracking-widest text-(--muted) uppercase">
                 Homebrew
               </p>
               <InstallCommand command="brew install nixrajput/siphon/siphon" />
             </div>
             <div>
-              <p className="mb-2 font-mono text-xs uppercase tracking-widest text-[var(--muted)]">
+              <p className="mb-2 font-mono text-xs tracking-widest text-(--muted) uppercase">
                 Scoop (Windows)
               </p>
               <InstallCommand command="scoop install siphon" />
             </div>
           </div>
-          <p className="text-sm text-[var(--muted)]">
-            Prefer source? <code className="mono text-[var(--flow)]">go install</code> the module,
-            or grab a prebuilt binary from <ExtLink href={`${REPO_URL}/releases`}>Releases</ExtLink>
-            . Every archive has a SHA-256 checksum, and the checksum file is cosign-signed.
+          <p className="text-sm text-(--muted)">
+            Prefer source? <code className="mono text-(--flow)">go install</code> the module, or
+            grab a prebuilt binary from <ExtLink href={`${REPO_URL}/releases`}>Releases</ExtLink>.
+            Every archive has a SHA-256 checksum, and the checksum file is cosign-signed.
           </p>
         </div>
       </section>