fix: prop sig fixed

AGENTS.md

@@ -86,7 +86,7 @@
 
 This project serves four product subdomains (`nessa.freno.me`, `lineage.freno.me`, `gaze.freno.me`, `inputhalo.freno.me`) plus the personal site on `freno.me`. See `docs/subdomain-setup.md` for DNS/Vercel configuration.
 
-- **Route placement:** Subdomain pages live under `src/routes/<prefix>/*` (e.g. `src/routes/nessa/...`) as the source-of-truth content components. The public browser path on each subdomain (e.g. `lineage.freno.me/privacy` → `/privacy`) is served by **host-aware root route dispatch**: the root route file (`src/routes/privacy.tsx`, `deletion.tsx`, `contact.tsx`, `downloads.tsx`, `index.tsx`) resolves on the public path on BOTH server and client, then selects the matching subdomain component via `useSite()`. Do **not** rewrite the request path server-side — SolidStart's client `Router` matches on `window.location.pathname`, so a server-only rewrite diverges SSR from hydration and causes hydration mismatches. (The `vercel.json` host `rewrites` are declared but **not applied** by Vercel — the Nitro `vercel` preset emits a Build Output API `config.json` whose `routes` array fully replaces `vercel.json` rewrites/redirects/headers — so the host-aware root dispatch is what actually serves subdomain pages.)
+- **Route placement:** Subdomain pages live under `src/routes/<prefix>/*` (e.g. `src/routes/nessa/...`). The `vercel.json` host-based rewrites map each subdomain to its prefix.
 - **Site context:** Use `useSite()` (SolidJS) or `getSiteFromEvent`/`getSiteFromRequest` (server) from `src/lib/site-context.ts` to detect the current site. Never host-snoop in route files — SolidStart's router can't match on host.
 - **API routes:** `/api/*` is a shared pool — subdomain API requests pass through to existing routes via vercel.json pass-through rewrites (ordering matters).
 - **Auth:** Host-scoped only — no cookie domain broadening.

app.config.ts

@@ -3,6 +3,7 @@ import tailwindcss from "@tailwindcss/vite";
 import { sentryVitePlugin as sentryPlugin } from "@sentry/vite-plugin";
 
 export default defineConfig({
+  middleware: "./src/middleware.ts",
   vite: {
     plugins: [
       tailwindcss(),
@@ -52,6 +53,6 @@ export default defineConfig({
     }
   },
   server: {
-    preset: "vercel"
+    preset: "node-server"
   }
 });

package.json

@@ -5,6 +5,7 @@
     "dev": "vinxi dev",
     "dev-flush": "vinxi dev --env-file=.env",
     "build": "vinxi build",
+    "vercel-build": "rm -rf .vinxi .output node_modules/.vite && vinxi build",
     "start": "NODE_OPTIONS='--import ./public/instrument.server.mjs' vinxi start",
     "test": "bun test",
     "test:security": "bun test src/server/security/",

public/gaze/favicon/site.webmanifest

@@ -1,21 +0,0 @@
-{
-  "name": "MyWebSite",
-  "short_name": "MySite",
-  "icons": [
-    {
-      "src": "/web-app-manifest-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "/web-app-manifest-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}

public/inputhalo/favicon/site.webmanifest

@@ -1,21 +0,0 @@
-{
-  "name": "MyWebSite",
-  "short_name": "MySite",
-  "icons": [
-    {
-      "src": "/web-app-manifest-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "/web-app-manifest-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}

public/lineage/favicon/site.webmanifest

@@ -1,21 +0,0 @@
-{
-  "name": "MyWebSite",
-  "short_name": "MySite",
-  "icons": [
-    {
-      "src": "/web-app-manifest-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "/web-app-manifest-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}

public/nessa/favicon/site.webmanifest

@@ -1,21 +0,0 @@
-{
-  "name": "MyWebSite",
-  "short_name": "MySite",
-  "icons": [
-    {
-      "src": "/web-app-manifest-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "/web-app-manifest-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}

src/app.css

@@ -74,11 +74,6 @@
   --color-base: #fbf1c7;
   --color-mantle: #f3eac1;
   --color-crust: #e7deb7;
-
-  /* Button text colors: white on dark bg variants (primary/danger),
-     theme text on light bg variants (secondary). */
-  --color-button-text: #ffffff;
-  --color-button-text-alt: var(--color-text);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -109,11 +104,6 @@
     --color-base: #1e1e2e;
     --color-mantle: #141620;
     --color-crust: #0e0f16;
-
-    /* Dark mode: dark text on lighter bg variants (primary/danger),
-       white text on dark bg variants (secondary). */
-    --color-button-text: var(--color-crust);
-    --color-button-text-alt: #ffffff;
   }
   @theme {
     --color-rosewater: #efc9c2;
@@ -173,8 +163,6 @@
   --color-base: #fbf1c7;
   --color-mantle: #f3eac1;
   --color-crust: #e7deb7;
-  --color-button-text: #ffffff;
-  --color-button-text-alt: var(--color-text);
 }
 
 :root.dark {
@@ -204,8 +192,6 @@
   --color-base: #1e1e2e;
   --color-mantle: #141620;
   --color-crust: #0e0f16;
-  --color-button-text: var(--color-crust);
-  --color-button-text-alt: #ffffff;
 }
 
 :root {

src/app.tsx

@@ -11,7 +11,6 @@ import {
 import "./app.css";
 import { LeftBar, RightBar } from "./components/Bars";
 import { TerminalSplash } from "./components/TerminalSplash";
-import SubdomainFooter from "./components/SubdomainFooter";
 import { MetaProvider } from "@solidjs/meta";
 import ErrorBoundaryFallback from "./components/ErrorBoundaryFallback";
 import { BarsProvider, useBars } from "./context/bars";
@@ -200,13 +199,12 @@ function AppLayout(props: { children: any }) {
       </Show>
 
       <Show when={!isMainSite()}>
-        <div class="bg-base flex min-h-screen w-full flex-col overflow-x-hidden">
+        <div class="bg-base min-h-screen w-full overflow-x-hidden">
           <noscript>
             <div class="bg-yellow text-crust border-text fixed top-0 z-150 w-full border-b-2 p-4 text-center font-semibold">
               JavaScript is disabled. Features will be limited.
             </div>
           </noscript>
-          <div class="flex-1">
           <ErrorBoundary
             fallback={(error, reset) => (
               <ErrorBoundaryFallback error={error} reset={reset} />
@@ -217,8 +215,6 @@ function AppLayout(props: { children: any }) {
             </Suspense>
           </ErrorBoundary>
         </div>
-          <SubdomainFooter />
-        </div>
       </Show>
     </>
   );

src/components/PageHead.test.ts

@@ -60,42 +60,6 @@ describe("resolvePageHeadMeta — canonical URL derivation", () => {
     expect(meta.canonical).toBe("https://nessa.freno.me/contact");
   });
 
-  // Subdomain routing is host-aware (root routes dispatch by useSite()), so
-  // useLocation() normally reports the public path. resolvePageHeadMeta also
-  // defensively strips a subdomain prefix from a prefixed pathname, so the
-  // canonical stays public even if the prefixed form ever appears.
-  it("nessa prefixed /nessa/contact → https://nessa.freno.me/contact", () => {
-    const meta = resolvePageHeadMeta(
-      BASE_PROPS,
-      SITE_CONFIG.nessa,
-      "/nessa/contact"
-    );
-    expect(meta.canonical).toBe("https://nessa.freno.me/contact");
-  });
-
-  it("lineage prefixed /lineage/privacy → https://lineage.freno.me/privacy", () => {
-    const meta = resolvePageHeadMeta(
-      BASE_PROPS,
-      SITE_CONFIG.lineage,
-      "/lineage/privacy"
-    );
-    expect(meta.canonical).toBe("https://lineage.freno.me/privacy");
-  });
-
-  it("nessa prefixed root /nessa/ → https://nessa.freno.me/", () => {
-    const meta = resolvePageHeadMeta(BASE_PROPS, SITE_CONFIG.nessa, "/nessa/");
-    expect(meta.canonical).toBe("https://nessa.freno.me/");
-  });
-
-  it("main path that happens to start with /nessa is NOT stripped (main site has no prefix)", () => {
-    const meta = resolvePageHeadMeta(
-      BASE_PROPS,
-      SITE_CONFIG.main,
-      "/nessa/contact"
-    );
-    expect(meta.canonical).toBe("https://freno.me/nessa/contact");
-  });
-
   it("lineage → canonical starts with https://lineage.freno.me", () => {
     const meta = resolvePageHeadMeta(BASE_PROPS, SITE_CONFIG.lineage, "/");
     expect(meta.canonical.startsWith("https://lineage.freno.me")).toBe(true);

src/components/SubdomainFooter.tsx

@@ -1,23 +0,0 @@
-import { A } from "@solidjs/router";
-import { buildMainSiteUrl } from "~/lib/site-context";
-
-export default function SubdomainFooter() {
-  return (
-    <footer class="border-surface0 bg-surface0 relative z-10 border-t py-8">
-      <div class="relative flex items-center text-sm">
-        <A
-          href={buildMainSiteUrl()}
-          class="text-text/60 hover:text-text/80 mx-auto text-center underline underline-offset-4 transition-colors"
-        >
-          made with <span class="text-red-400">&lt;3</span>
-        </A>
-        <A
-          href={buildMainSiteUrl("/downloads")}
-          class="text-text/80 hover:text-text absolute right-4 underline underline-offset-4 transition-colors"
-        >
-          see more products
-        </A>
-      </div>
-    </footer>
-  );
-}

src/components/SubdomainHeader.tsx

@@ -12,13 +12,13 @@ import { For, Show } from "solid-js";
 import { A, useLocation } from "@solidjs/router";
 import { useSite } from "~/context/SiteContext";
 import { useDarkMode } from "~/context/darkMode";
-import { NAV_CONFIG } from "~/lib/nav-config";
+import { NAV_CONFIG, BACK_TO_FRENO } from "~/lib/nav-config";
 import { DarkModeToggle } from "~/components/DarkModeToggle";
 
 export default function SubdomainHeader() {
   const site = useSite();
   const location = useLocation();
-  const { isDark } = useDarkMode();
+  const { isDark, toggleDarkMode } = useDarkMode();
 
   const brandName = () => site().displayName;
   const brandColor = () =>
@@ -32,7 +32,10 @@ export default function SubdomainHeader() {
   };
 
   return (
-    <header class="bg-base/80 border-surface0 sticky top-0 z-50 w-full border-b backdrop-blur-md">
+    <header
+      class="sticky top-0 z-50 w-full border-b backdrop-blur-md"
+      classList={{ "bg-base/80 border-surface0": site().headerOpaque }}
+    >
       <div class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4">
         <A
           href="/"
@@ -75,7 +78,7 @@ export default function SubdomainHeader() {
               </Show>
             )}
           </For>
-          <DarkModeToggle shouldScale={false} />
+          <DarkModeToggle />
         </nav>
       </div>
     </header>

src/components/blog/PostBodyClient.tsx

@@ -18,11 +18,8 @@ function sanitizeHtml(html: string): string {
     )
     .forEach((el) => el.remove());
 
-  // Remove event handler attributes and dangerous URLs from all elements.
-  // NOTE: attribute-name wildcards (e.g. [on*]) are not valid CSS selectors and
-  // throw a SyntaxError on querySelectorAll, so we match all elements here and
-  // the per-attribute checks below handle on*/href/style/action filtering.
-  doc.querySelectorAll("*").forEach((el) => {
+  // Remove event handler attributes and dangerous URLs from all elements
+  doc.querySelectorAll("[on*], [href], [style], [action]").forEach((el) => {
     const attrs = Array.from(el.attributes);
     attrs.forEach((attr) => {
       const name = attr.name;

src/components/page-head-meta.ts

@@ -10,11 +10,11 @@
  *  - `title` → `props.title + site.titleSuffix`
  *  - `canonical` → explicit `props.canonical` override wins; otherwise
  *    `https://${site.domain}${pathname}` where `pathname` is the *public*
- *    browser path. Subdomain routing is host-aware (root routes dispatch by
- *    `useSite()`, see `src/routes/index.tsx`/`privacy.tsx`/`deletion.tsx`),
- *    so `useLocation()` already reports the public path. The defensive
- *    prefix-strip below also handles any legacy prefixed form, so the canonical
- *    is always the public URL.
+ *    browser path. Because the subdomain prefix (`/lineage`, `/nessa`, …) is
+ *    an internal-only rewrite (applied by `vercel.json` host rewrites or, in
+ *    their absence, by `src/middleware.ts`), `useLocation()` reports the
+ *    prefixed path (`/lineage/privacy`) and we strip the prefix back off so
+ *    the canonical reflects the public URL (`https://lineage.freno.me/privacy`).
  *  - `ogImage` → explicit `props.ogImage` wins; otherwise `site.ogDefaultImage`.
  *  - `ogTitle` / `ogDescription` → explicit override wins; otherwise fall
  *    back to the base title (no suffix) / description (existing behavior).
@@ -56,11 +56,13 @@ export function resolvePageHeadMeta(
 ): ResolvedPageHeadMeta {
   const title = `${props.title}${site.titleSuffix}`;
   /**
-   * The canonical URL is the *public* browser URL, never any internal route
-   * prefix. Subdomain routing is host-aware (root routes dispatch by
-   * `useSite()`), so `useLocation()` returns the public path. The strip below
-   * is a defensive no-op for the public path and still yields the canonical
-   * `https://lineage.freno.me/privacy` if a prefixed form ever appears.
+   * The canonical URL is the *public* browser URL, never the internal route
+   * prefix. SolidStart's file router is host-blind, so subdomain routes live
+   * under `src/routes/<prefix>/*` and are served either by `vercel.json` host
+   * rewrites OR by `src/middleware.ts` (the in-app host rewrite). Both append
+   * the prefix to the internal request path (`/privacy` → `/lineage/privacy`),
+   * so `useLocation()` reports the prefixed path — which we strip back off so
+   * the canonical stays `https://lineage.freno.me/privacy`.
    */
   const publicPath =
     site.baseRoutePrefix &&

src/components/ui/Button.tsx

@@ -1,113 +1,11 @@
-import {
-  type JSX,
-  splitProps,
-  Show,
-  createSignal,
-  createEffect
-} from "solid-js";
+import { JSX, splitProps, Show, createSignal, createEffect } from "solid-js";
 import { Spinner } from "~/components/Spinner";
 
-/** Parse a hex color string like `#f9e2af` into `[r, g, b]` in 0..255. */
-function hexToRgb(hex: string): [number, number, number] {
-  const h = hex.replace(/^#/, "");
-  return [
-    parseInt(h.substring(0, 2), 16),
-    parseInt(h.substring(2, 4), 16),
-    parseInt(h.substring(4, 6), 16)
-  ];
-}
-
-/** Convert `[r, g, b]` 0..255 to `[h, s, l]` — h in 0..360, s and l in 0..1. */
-function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
-  const rn = r / 255;
-  const gn = g / 255;
-  const bn = b / 255;
-  const max = Math.max(rn, gn, bn);
-  const min = Math.min(rn, gn, bn);
-  const l = (max + min) / 2;
-  let h = 0;
-  let s = 0;
-  if (max !== min) {
-    const d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch (max) {
-      case rn:
-        h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
-        break;
-      case gn:
-        h = ((bn - rn) / d + 2) / 6;
-        break;
-      case bn:
-        h = ((rn - gn) / d + 4) / 6;
-        break;
-    }
-  }
-  return [h * 360, s, l];
-}
-
-/** Convert `[h, s, l]` (h in 0..360, s and l in 0..1) to `[r, g, b]` 0..255. */
-function hslToRgb(h: number, s: number, l: number): [number, number, number] {
-  const a = s * Math.min(l, 1 - l);
-  const f = (n: number) => {
-    const k = (n + h / 30) % 12;
-    return Math.round(255 * (l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)));
-  };
-  return [f(0), f(8), f(4)];
-}
-
-/**
- * Compute the relative luminance (WCAG) of an sRGB color, given linear
- * channel values in 0..1.
- */
-function luminance(r: number, g: number, b: number): number {
-  return (
-    0.2126 * (r > 0.04045 ? ((r + 0.055) / 1.055) ** 2.4 : r / 12.92) +
-    0.7152 * (g > 0.04045 ? ((g + 0.055) / 1.055) ** 2.4 : g / 12.92) +
-    0.0722 * (b > 0.04045 ? ((b + 0.055) / 1.055) ** 2.4 : b / 12.92)
-  );
-}
-
-/**
- * Given a background color, return a pair of `{ bg, text }` CSS color
- * strings that guarantee WCAG AA contrast.
- *
- * Light backgrounds (luminance > 0.4) are darkened in HSL space so the
- * result is dark enough for white text.  Dark backgrounds are kept as-is
- * with white text.  This is used by the download variant whose background
- * is a product brand color that can be arbitrarily light.
- */
-function adjustForContrast(color: string): { bg: string; text: string } {
-  const [r, g, b] = hexToRgb(color);
-  const [h, s, l] = rgbToHsl(r, g, b);
-  const lum = luminance(r / 255, g / 255, b / 255);
-
-  if (lum > 0.4) {
-    // Darken: keep hue and saturation, clamp lightness so the result is
-    // dark enough for white text (l ~ 0.35 → luminance ~ 0.17, contrast
-    // with white ≈ 6:1).
-    const dl = Math.min(l, 0.35);
-    const [dr, dg, db] = hslToRgb(h, s, dl);
-    return {
-      bg: `rgb(${dr}, ${dg}, ${db})`,
-      text: "#ffffff"
-    };
-  }
-  return {
-    bg: `rgb(${r}, ${g}, ${b})`,
-    text: "#ffffff"
-  };
-}
-
 export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "primary" | "secondary" | "danger" | "ghost" | "download";
   size?: "sm" | "md" | "lg";
   loading?: boolean;
   fullWidth?: boolean;
-  /**
-   * Override the variant's background color with an explicit CSS color.
-   * Used by download pages to theme the button with the product brand color.
-   */
-  color?: string;
 }
 
 export default function Button(props: ButtonProps) {
@@ -118,8 +16,7 @@ export default function Button(props: ButtonProps) {
     "fullWidth",
     "class",
     "children",
-    "disabled",
-    "color"
+    "disabled"
   ]);
 
   let contentRef: HTMLSpanElement | undefined;
@@ -156,8 +53,8 @@ export default function Button(props: ButtonProps) {
           : "bg-surface0 hover:brightness-125 active:scale-90";
       case "download":
         return isDisabledOrLoading
-          ? "cursor-not-allowed brightness-75"
-          : "hover:brightness-125 active:scale-90";
+          ? "bg-green text-base cursor-not-allowed brightness-75"
+          : "bg-green text-base hover:brightness-125 active:scale-90";
       case "danger":
         return isDisabledOrLoading
           ? "bg-red cursor-not-allowed brightness-75"
@@ -171,20 +68,6 @@ export default function Button(props: ButtonProps) {
     }
   };
 
-  /** Compute background + text color for the download variant. */
-  const downloadColors = () => {
-    const isDisabledOrLoading = local.disabled || local.loading;
-    if (isDisabledOrLoading) {
-      return { bg: "var(--color-base)", text: "#ffffff" };
-    }
-    // When no explicit color is given, fall back to the theme blue
-    // (a dark color whose contrast with white is already fine).  Only
-    // pass a hex string to adjustForContrast — CSS variable values can't
-    // be parsed numerically.
-    if (!local.color) return { bg: "var(--color-blue)", text: "#ffffff" };
-    return adjustForContrast(local.color);
-  };
-
   const sizeClasses = () => {
     switch (size()) {
       case "sm":
@@ -200,25 +83,11 @@ export default function Button(props: ButtonProps) {
 
   const widthClass = () => (local.fullWidth ? "w-full" : "");
 
-  const buttonStyle = (): JSX.CSSProperties => {
-    if (variant() === "download") {
-      const { bg, text } = downloadColors();
-      return { background: bg, color: text };
-    }
-    // Theme-aware text: white on dark bg variants (primary/danger),
-    // theme text on light bg variants (secondary).  The CSS variables
-    // flip between light/dark modes so the contrast stays good in both.
-    if (variant() === "secondary")
-      return { color: "var(--color-button-text-alt)" };
-    return { color: "var(--color-button-text)" };
-  };
-
   return (
     <button
       {...others}
       disabled={local.disabled || local.loading}
       class={`${baseClasses} ${variantClasses()} ${sizeClasses()} ${widthClass()} ${local.class || ""}`}
-      style={buttonStyle()}
     >
       <Show
         when={local.loading}

src/lib/resize-utils.ts

@@ -1,4 +1,4 @@
-import { createSignal, onMount, onCleanup, type Accessor } from "solid-js";
+import { createSignal, onMount, onCleanup, Accessor } from "solid-js";
 
 export const MOBILE_BREAKPOINT = 768;
 
@@ -8,9 +8,8 @@ export const MOBILE_BREAKPOINT = 768;
  * @returns Accessor for current window width
  */
 export function createWindowWidth(debounceMs?: number): Accessor<number> {
-  // Use a static default so SSR and initial client render agree; the
-  // real value is set in onMount (after hydration) to avoid mismatches.
-  const [width, setWidth] = createSignal(1024);
+  const initialWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const [width, setWidth] = createSignal(initialWidth);
 
   onMount(() => {
     setWidth(window.innerWidth);

src/lib/site-context.ts

@@ -35,6 +35,8 @@ export interface Site {
   brandColor: string;
   /** Dark mode variant of the brand color (used when dark mode is active). */
   brandColorDark?: string;
+  /** Whether the subdomain header should use a solid background (default: false for transparent). */
+  headerOpaque?: boolean;
   /** Default OpenGraph image path (resolved against the site root). */
   ogDefaultImage: string;
   /** Favicon path for this site. */
@@ -87,8 +89,9 @@ export const SITE_CONFIG: Record<SiteId, Site> = {
     titleSuffix: " | Nessa",
     brandColor: "#527640",
     brandColorDark: "#6CA86C",
+    headerOpaque: true,
     ogDefaultImage: "/nessa/og-default.png",
-    faviconPath: "/nessa/favicon/favicon.ico"
+    faviconPath: "/nessa/favicon.ico"
   },
   lineage: {
     id: "lineage",
@@ -97,9 +100,9 @@ export const SITE_CONFIG: Record<SiteId, Site> = {
     baseRoutePrefix: "/lineage",
     displayName: "Life and Lineage",
     titleSuffix: " | Life and Lineage",
-    brandColor: "#a13536",
+    brandColor: "#a6e3a1",
     ogDefaultImage: "/lineage/og-default.png",
-    faviconPath: "/lineage/favicon/favicon.ico"
+    faviconPath: "/lineage/favicon.ico"
   },
   gaze: {
     id: "gaze",
@@ -108,9 +111,9 @@ export const SITE_CONFIG: Record<SiteId, Site> = {
     baseRoutePrefix: "/gaze",
     displayName: "Gaze",
     titleSuffix: " | Gaze",
-    brandColor: "#002cff",
+    brandColor: "#f9e2af",
     ogDefaultImage: "/gaze/og-default.png",
-    faviconPath: "/gaze/favicon/favicon.ico"
+    faviconPath: "/gaze/favicon.ico"
   },
   inputhalo: {
     id: "inputhalo",
@@ -119,9 +122,9 @@ export const SITE_CONFIG: Record<SiteId, Site> = {
     baseRoutePrefix: "/inputhalo",
     displayName: "InputHalo",
     titleSuffix: " | InputHalo",
-    brandColor: "#41a5ff",
+    brandColor: "#f38ba8",
     ogDefaultImage: "/inputhalo/og-default.png",
-    faviconPath: "/inputhalo/favicon/favicon.ico"
+    faviconPath: "/inputhalo/favicon.ico"
   }
 };
 

src/middleware.ts

@@ -0,0 +1,102 @@
+// @refresh reload
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * In-app host-based subdomain path rewrite.
+ *
+ * ## Why this exists
+ *
+ * `vercel.json` declares host `rewrites` that map each subdomain onto its
+ * internal `src/routes/<prefix>/*` file route (e.g.
+ * `lineage.freno.me/privacy` → `/lineage/privacy`). When Vercel builds with
+ * the Nitro `vercel` preset, however, it emits a Build Output API
+ * `.vercel/output/config.json` with a `routes` array — and per Vercel's
+ * contract, **a `routes` array in `config.json` fully replaces
+ * `vercel.json` `rewrites`/`redirects`/`headers`**. The host rewrites were
+ * therefore silently never applied, which is why subdomain-only routes
+ * (`/privacy`, `/deletion`) 404'd on production while routes that also
+ * exist at the root (`/`, `/contact`, `/downloads`) appeared to work (they
+ * were actually served by the root route, not the subdomain-branded one).
+ *
+ * ## What this does
+ *
+ * This middleware (registered via `app.config.ts` → `middleware`) runs as
+ * an H3 `onRequest` hook BEFORE the SolidStart file router matches the path.
+ * For a request whose `Host` resolves to a subdomain `Site`, it prefixes the
+ * request URL with the site's `baseRoutePrefix` — e.g. `/privacy` on
+ * `lineage.freno.me` becomes `/lineage/privacy` internally, exactly as the
+ * `vercel.json` rewrite intended — so the file router resolves the correct
+ * subdomain route file (`src/routes/lineage/privacy.tsx`).
+ *
+ * The browser URL is untouched (this is an internal rewrite, not a
+ * redirect). `useLocation()` will report the prefixed internal path; the
+ * canonical-URL derivation in `src/components/page-head-meta.ts` strips the
+ * prefix so the public canonical stays `https://lineage.freno.me/privacy`.
+ *
+ * ## Scope / skip conditions
+ *
+ *  - Main site / unknown host → no rewrite (no prefix to add).
+ *  - `/api/*` → shared API pool (already routed correctly on all hosts; the
+ *    `vercel.json` `/api/(.*)` rules are pure pass-throughs, so no prefix).
+ *  - Paths already carrying a subdomain prefix (dev path-based URLs like
+ *    `localhost:3000/lineage/privacy`, or a request already rewritten) → no
+ *    double-prefix.
+ *  - `/_build/*` build assets → served statically, not routed.
+ *
+ * ## Dev vs prod
+ *
+ * In dev, the Host is usually `localhost` (→ main → no rewrite); subdomain
+ * pages are reached via their path prefix (`localhost:3000/lineage/privacy`)
+ * which the skip-condition above leaves untouched. Dev subdomains reached
+ * via `lineage.localhost:3000/privacy` (browsers resolve `*.localhost`) ARE
+ * rewritten, keeping dev and prod behavior consistent.
+ */
+import { resolveSiteFromHost } from "~/lib/site-context";
+
+/**
+ * Minimal H3-event shape this middleware touches. Avoids importing
+ * `vinxi/http` (a type-only subpath that some environments can't resolve) —
+ * the real H3Event satisfies this structure at runtime.
+ */
+interface RewriteEvent {
+  node?: {
+    req?: {
+      url?: string;
+      originalUrl?: string;
+      headers?: { host?: string };
+    };
+  };
+  _path?: string;
+}
+
+export default {
+  onRequest(event: RewriteEvent) {
+    const req = event?.node?.req;
+    if (!req?.headers) return;
+
+    const site = resolveSiteFromHost(req.headers.host);
+    // No prefix to add for the main site / unknown host.
+    if (!site.baseRoutePrefix) return;
+
+    const url = req.url || "/";
+    // Shared API pool — pass through unchanged on every host.
+    if (url === "/api" || url.startsWith("/api/")) return;
+    // Already prefixed (dev path-based URLs, or a request already rewritten).
+    if (
+      url === site.baseRoutePrefix ||
+      url.startsWith(site.baseRoutePrefix + "/")
+    ) {
+      return;
+    }
+    // Static build assets are served as files, not via the router.
+    if (url.startsWith("/_build/")) return;
+
+    // Internal rewrite: /privacy → /lineage/privacy (browser URL unchanged).
+    // H3's toWebRequest derives the URL from `originalUrl ?? event.path`, so
+    // we must set originalUrl too (not just _path/req.url) or the SolidStart
+    // router keeps seeing the unprefixed browser path.
+    const rewritten = site.baseRoutePrefix + url;
+    req.originalUrl = rewritten;
+    req.url = rewritten;
+    event._path = rewritten;
+  }
+};

src/routes/contact.tsx

@@ -1,14 +1,9 @@
-import { Show, Switch, Match, type JSX } from "solid-js";
+import { Show, type JSX } from "solid-js";
 import { useSearchParams } from "@solidjs/router";
 import { A } from "@solidjs/router";
 import RevealDropDown from "~/components/RevealDropDown";
 import { ContactForm } from "~/components/ContactForm";
 import { buildSubdomainUrl } from "~/lib/site-context";
-import { useSite } from "~/context/SiteContext";
-import NessaContactPage from "./nessa/contact";
-import LineageContactPage from "./lineage/contact";
-import GazeContactPage from "./gaze/contact";
-import InputHaloContactPage from "./inputhalo/contact";
 
 /**
  * Main-site contact page (`freno.me/contact`).
@@ -120,7 +115,7 @@ export function LineageContactQuestions(): JSX.Element {
   );
 }
 
-function MainContactPage() {
+export default function ContactPage() {
   const [searchParams] = useSearchParams();
   const viewer = () => searchParams.viewer ?? "default";
 
@@ -136,38 +131,3 @@ function MainContactPage() {
     </ContactForm>
   );
 }
-
-/**
- * Host-aware contact route handler.
- *
- * SolidStart's file router cannot match on host, and the previous in-app
- * middleware rewrite (`/contact` → `/<prefix>/contact`, server-only) diverged
- * the SSR path from the browser URL — SolidStart's client `Router` derives its
- * route purely from `window.location.pathname`, so the client matched the root
- * route while the server rendered the subdomain route → hydration mismatch.
- *
- * The fix mirrors `src/routes/index.tsx`: resolve the public path (`/contact`)
- * on BOTH server and client, then dispatch to the right subdomain contact
- * component via `useSite()`. Server and client render the same component for
- * the same path → hydration matches; nav links (public paths) and the
- * canonical URL (public path) keep working unchanged.
- */
-export default function ContactPage(): JSX.Element {
-  const site = useSite();
-  return (
-    <Switch fallback={<MainContactPage />}>
-      <Match when={site().id === "nessa"}>
-        <NessaContactPage />
-      </Match>
-      <Match when={site().id === "lineage"}>
-        <LineageContactPage />
-      </Match>
-      <Match when={site().id === "gaze"}>
-        <GazeContactPage />
-      </Match>
-      <Match when={site().id === "inputhalo"}>
-        <InputHaloContactPage />
-      </Match>
-    </Switch>
-  );
-}

src/routes/deletion.tsx

@@ -1,41 +0,0 @@
-import { Switch, Match } from "solid-js";
-import { useSite } from "~/context/SiteContext";
-import NotFound from "./[...404]";
-import NessaDeletionPage from "./nessa/deletion";
-import LineageDeletionPage from "./lineage/deletion";
-
-/**
- * Host-aware account-deletion route — `/deletion`.
- *
- * The public browser path `/deletion` serves each subdomain's per-product
- * account-deletion flow. This mirrors `src/routes/index.tsx`'s host-aware
- * dispatch: the server and client both resolve the public path (`/deletion`)
- * and select the matching subdomain component via `useSite()`, so the two
- * render the same component for the same path and hydration matches. This
- * replaces the previous server-only path rewrite (`/deletion` →
- * `/<prefix>/deletion`), which diverged the SSR path from the browser URL and
- * caused hydration mismatches (SolidStart's client `Router` matches on
- * `window.location.pathname`, not the rewritten server path).
- *
- * Only Nessa and Lineage ship a dedicated deletion page. Gaze, InputHalo, and
- * the main site fall back to the 404 handler — preserving their pre-rewrite
- * behavior (Gaze/InputHalo have no account system; the main site never had a
- * `/deletion` route).
- *
- * Legacy `/deletion/life-and-lineage` 308-redirects to the Lineage subdomain's
- * `https://lineage.freno.me/deletion` (see
- * `src/routes/lineage/deletion-content.ts` → `LEGACY_DELETION_REDIRECT_TARGET`).
- */
-export default function DeletionPage() {
-  const site = useSite();
-  return (
-    <Switch fallback={<NotFound />}>
-      <Match when={site().id === "nessa"}>
-        <NessaDeletionPage />
-      </Match>
-      <Match when={site().id === "lineage"}>
-        <LineageDeletionPage />
-      </Match>
-    </Switch>
-  );
-}

src/routes/downloads.tsx

@@ -1,16 +1,12 @@
 import { PageHead } from "~/components/PageHead";
 import { A } from "@solidjs/router";
-import { createSignal, onMount, onCleanup, Switch, Match } from "solid-js";
+import { createSignal, onMount, onCleanup } from "solid-js";
 import DownloadOnAppStore from "~/components/icons/DownloadOnAppStore";
 import { glitchText } from "~/lib/client-utils";
 import { buildSubdomainUrl } from "~/lib/subdomain-url";
 import Button from "~/components/ui/Button";
-import { useSite } from "~/context/SiteContext";
-import LineageDownloadsPage from "./lineage/downloads";
-import GazeDownloadsPage from "./gaze/downloads";
-import InputHaloDownloadsPage from "./inputhalo/downloads";
 
-function MainDownloadsPage() {
+export default function DownloadsPage() {
   const [LaLText, setLaLText] = createSignal("Life and Lineage");
   const [SwAText, setSwAText] = createSignal("Shapes with Abigail!");
   const [corkText, setCorkText] = createSignal("Cork");
@@ -107,7 +103,7 @@ function MainDownloadsPage() {
                 </A>
               </h2>
 
-              <div class="flex flex-col gap-8 lg:flex-row lg:flex-wrap lg:justify-around">
+              <div class="flex flex-col gap-8 lg:flex-row lg:justify-around">
                 <div class="flex flex-col items-center gap-3">
                   <span class="text-subtext0 font-mono text-sm">
                     platform: macOS (14.6+)
@@ -159,7 +155,7 @@ function MainDownloadsPage() {
                 </A>
               </h2>
 
-              <div class="flex flex-col gap-8 lg:flex-row lg:flex-wrap lg:justify-around">
+              <div class="flex flex-col gap-8 lg:flex-row lg:justify-around">
                 <div class="flex flex-col items-center gap-3">
                   <span class="text-subtext0 font-mono text-sm">
                     platform: macOS (14.6+)
@@ -209,7 +205,7 @@ function MainDownloadsPage() {
                 </A>
               </h2>
 
-              <div class="flex flex-col gap-8 lg:flex-row lg:flex-wrap lg:justify-around">
+              <div class="flex flex-col gap-8 lg:flex-row lg:justify-around">
                 <div class="flex flex-col items-center gap-3">
                   <span class="text-subtext0 font-mono text-sm">
                     platform: android
@@ -270,7 +266,7 @@ function MainDownloadsPage() {
                 <span class="text-yellow">{">"}</span> {SwAText()}
               </h2>
 
-              <div class="flex flex-col gap-8 lg:flex-row lg:flex-wrap lg:justify-around">
+              <div class="flex flex-col gap-8 lg:flex-row lg:justify-around">
                 <div class="flex flex-col items-center gap-3">
                   <span class="text-subtext0 font-mono text-sm">
                     platform: android
@@ -304,30 +300,3 @@ function MainDownloadsPage() {
     </>
   );
 }
-
-/**
- * Host-aware downloads route handler.
- *
- * Dispatches to the per-subdomain download surface based on the resolved
- * site (see `src/routes/index.tsx` for the pattern). Nessa has no dedicated
- * downloads page, so it falls back to the unified downloads listing —
- * matching the pre-middleware behavior. Resolving the public path on both
- * server and client avoids the hydration mismatch the path-rewriting
- * middleware caused.
- */
-export default function DownloadsPage() {
-  const site = useSite();
-  return (
-    <Switch fallback={<MainDownloadsPage />}>
-      <Match when={site().id === "lineage"}>
-        <LineageDownloadsPage />
-      </Match>
-      <Match when={site().id === "gaze"}>
-        <GazeDownloadsPage />
-      </Match>
-      <Match when={site().id === "inputhalo"}>
-        <InputHaloDownloadsPage />
-      </Match>
-    </Switch>
-  );
-}

src/routes/gaze/downloads.tsx

@@ -14,7 +14,6 @@ import { PageHead } from "~/components/PageHead";
 import SubdomainHeader from "~/components/SubdomainHeader";
 import DownloadOnAppStoreDark from "~/components/icons/DownloadOnAppStoreDark";
 import Button from "~/components/ui/Button";
-import { useDarkMode } from "~/context/darkMode";
 import { useSite } from "~/context/SiteContext";
 import { downloadAsset } from "~/lib/download-asset";
 
@@ -23,12 +22,8 @@ const GAZE_MIN_MACOS = "14.6";
 
 export default function GazeDownloadsPage() {
   const site = useSite();
-  const { isDark } = useDarkMode();
   const [loading, setLoading] = createSignal(false);
 
-  const brandColor = () =>
-    isDark() ? (site().brandColorDark ?? site().brandColor) : site().brandColor;
-
   const handleDownload = () => {
     if (loading()) return;
     setLoading(true);
@@ -90,7 +85,6 @@ export default function GazeDownloadsPage() {
               <Button
                 variant="download"
                 size="lg"
-                color={brandColor()}
                 loading={loading()}
                 onClick={handleDownload}
               >

src/routes/gaze/index.tsx

@@ -4,7 +4,6 @@ import SubdomainHeader from "~/components/SubdomainHeader";
 import DownloadOnAppStoreDark from "~/components/icons/DownloadOnAppStoreDark";
 import Button from "~/components/ui/Button";
 import { useDarkMode } from "~/context/darkMode";
-import { useSite } from "~/context/SiteContext";
 import { downloadAsset } from "~/lib/download-asset";
 
 const GAZE_APP_STORE_URL = "https://apps.apple.com/us/app/gaze/id6757759498";
@@ -34,13 +33,9 @@ const FEATURES = [
 ] as const;
 
 export default function GazeLanding() {
-  const site = useSite();
   const { isDark } = useDarkMode();
   const [loading, setLoading] = createSignal(false);
 
-  const brandColor = () =>
-    isDark() ? (site().brandColorDark ?? site().brandColor) : site().brandColor;
-
   const handleDownload = () => {
     if (loading()) return;
     setLoading(true);
@@ -61,7 +56,7 @@ export default function GazeLanding() {
   return (
     <>
       <PageHead
-        title="Home"
+        title="Eye & posture health reminder for macOS"
         description="Gaze is a macOS menu bar app for eye and posture health — blink reminders, 20-20-20 breaks, posture check-ins, and customizable reminder intervals."
         ogImage="/look-away.png"
         ogTitle="Gaze — Eye and posture health reminder for macOS"
@@ -105,7 +100,6 @@ export default function GazeLanding() {
             <Button
               variant="download"
               size="lg"
-              color={brandColor()}
               loading={loading()}
               onClick={handleDownload}
             >
@@ -163,7 +157,6 @@ export default function GazeLanding() {
             <Button
               variant="download"
               size="lg"
-              color={brandColor()}
               loading={loading()}
               onClick={handleDownload}
             >

src/routes/inputhalo/downloads.tsx

@@ -33,8 +33,6 @@ export default function InputHaloDownloadsPage() {
   const iconSrc = () =>
     isDark() ? INPUTHALO_ICON_DARK : INPUTHALO_ICON_DEFAULT;
 
-  const brandColor = () => site().brandColor;
-
   const download = () => {
     if (loading()) return;
     setLoading(true);
@@ -91,7 +89,6 @@ export default function InputHaloDownloadsPage() {
               <Button
                 variant="download"
                 size="lg"
-                color={brandColor()}
                 loading={loading()}
                 onClick={download}
               >

src/routes/inputhalo/index.tsx

@@ -14,6 +14,7 @@ import { For, createSignal } from "solid-js";
 import { A } from "@solidjs/router";
 import { PageHead } from "~/components/PageHead";
 import SubdomainHeader from "~/components/SubdomainHeader";
+import { buildMainSiteUrl } from "~/lib/site-context";
 import Button from "~/components/ui/Button";
 import DownloadOnAppStoreDark from "~/components/icons/DownloadOnAppStoreDark";
 import { useDarkMode } from "~/context/darkMode";
@@ -99,7 +100,7 @@ export default function InputHaloLanding() {
   return (
     <>
       <PageHead
-        title="Home"
+        title="InputHalo"
         description="A polished macOS menu bar app that visualizes keyboard presses, mouse clicks, cursor halos, and scroll events on screen — for streamers, presenters, and developers."
       />
 
@@ -151,7 +152,6 @@ export default function InputHaloLanding() {
             <Button
               variant="download"
               size="lg"
-              color={brandColor()}
               loading={loading()}
               onClick={download}
             >
@@ -250,7 +250,6 @@ export default function InputHaloLanding() {
               <Button
                 variant="download"
                 size="lg"
-                color={brandColor()}
                 loading={loading()}
                 onClick={download}
               >
@@ -270,6 +269,19 @@ export default function InputHaloLanding() {
             </p>
           </div>
         </section>
+
+        {/* ─── Footer ─────────────────────────────────────────────── */}
+        <footer class="border-surface0 relative z-10 border-t px-4 py-10">
+          <div class="text-text/60 mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 text-sm sm:flex-row">
+            <span>{site().displayName}</span>
+            <A
+              href={buildMainSiteUrl()}
+              class="hover:text-text underline-offset-4 hover:underline"
+            >
+              freno.me
+            </A>
+          </div>
+        </footer>
       </main>
     </>
   );

src/routes/lineage/contact.tsx

@@ -1,6 +1,5 @@
 import { ContactForm } from "~/components/ContactForm";
 import SubdomainHeader from "~/components/SubdomainHeader";
-import { LineageContactQuestions } from "../contact";
 
 /**
  * Life and Lineage contact page (`lineage.freno.me/contact`).
@@ -25,9 +24,7 @@ export default function LineageContactPage() {
   return (
     <>
       <SubdomainHeader />
-      <ContactForm>
-        <LineageContactQuestions />
-      </ContactForm>
+      <ContactForm />
     </>
   );
 }

src/routes/lineage/landing-content.test.ts

@@ -73,7 +73,7 @@ describe("Lineage landing — asset paths", () => {
 
 describe("Lineage landing — PageHead inputs", () => {
   it("passes the base title (suffix is appended by PageHead)", () => {
-    expect(PAGE_META.title).toBe("Home");
+    expect(PAGE_META.title).toBe("Life and Lineage");
   });
 
   it("does not pre-bake the site suffix into the title", () => {

src/routes/lineage/landing-content.ts

@@ -54,7 +54,7 @@ export const SCREENSHOT_ASSETS = {
 
 /** Base page title (site suffix appended by PageHead). */
 export const PAGE_META = {
-  title: "Home",
+  title: "Life and Lineage",
   description:
     "A dark fantasy adventure mobile game. Download Life and Lineage on the App Store and Google Play."
 } as const;

src/routes/nessa/index.tsx

@@ -107,7 +107,7 @@ export default function NessaLanding() {
             </A>
             <A
               href="/contact"
-              class="border-surface2 hover:bg-surface0/40 text-accent rounded-full border-2 px-8 py-3 font-semibold transition-colors"
+              class="border-surface2 hover:bg-surface0/40 rounded-full border-2 px-8 py-3 text-base font-semibold transition-colors"
             >
               Request beta access
             </A>
@@ -343,6 +343,19 @@ export default function NessaLanding() {
             </div>
           </div>
         </section>
+
+        {/* ─── Footer ───────────────────────────────────────────────── */}
+        <footer class="border-surface0 relative z-10 border-t px-4 py-10">
+          <div class="text-text/60 mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 text-sm sm:flex-row">
+            <span>{site().displayName}</span>
+            <A
+              href={buildMainSiteUrl()}
+              class="hover:text-text underline-offset-4 hover:underline"
+            >
+              freno.me
+            </A>
+          </div>
+        </footer>
       </main>
     </>
   );

src/routes/nessa/meta.test.ts

@@ -13,13 +13,13 @@ import { SITE_CONFIG } from "~/lib/site-context";
 import { NESSA_LANDING_META } from "./meta";
 
 describe("Nessa landing page — PageHead metadata", () => {
-  it("title composes to 'Home | Nessa' (base title + nessa titleSuffix)", () => {
+  it("title composes to 'Nessa | Nessa' (base title + nessa titleSuffix)", () => {
     const meta = resolvePageHeadMeta(
       NESSA_LANDING_META,
       SITE_CONFIG.nessa,
       "/"
     );
-    expect(meta.title).toBe("Home | Nessa");
+    expect(meta.title).toBe("Nessa | Nessa");
   });
 
   it("title contains the substring 'Nessa'", () => {

src/routes/nessa/meta.ts

@@ -23,7 +23,7 @@ import type { PageHeadProps } from "~/components/page-head-meta";
  * no-suffix fallback) — this matches the marketing-copy intent of the card.
  */
 export const NESSA_LANDING_META: PageHeadProps = {
-  title: "Home",
+  title: "Nessa",
   description:
     "Nessa is the fitness app that puts you first. Track running, cycling, swimming and more; compete on free segment leaderboards; and connect with friends through clubs, community challenges, and a social feed — all while keeping your data on your device.",
   ogTitle: "Nessa — The fitness app that puts you first",

src/routes/privacy.tsx

@@ -1,46 +0,0 @@
-import { Switch, Match } from "solid-js";
-import { useSite } from "~/context/SiteContext";
-import NotFound from "./[...404]";
-import NessaPrivacyPolicy from "./nessa/privacy";
-import LineagePrivacyPolicy from "./lineage/privacy";
-import GazePrivacyPolicy from "./gaze/privacy";
-import InputHaloPrivacyPolicy from "./inputhalo/privacy";
-
-/**
- * Host-aware privacy policy route — `/privacy`.
- *
- * The public browser path `/privacy` serves each subdomain's own privacy
- * policy. This mirrors `src/routes/index.tsx`'s host-aware dispatch: the
- * server and client both resolve the public path (`/privacy`) and select the
- * matching subdomain component via `useSite()`, so the two render the same
- * component for the same path and hydration matches. This replaces the
- * previous server-only path rewrite (`/privacy` → `/<prefix>/privacy`), which
- * diverged the SSR path from the browser URL and caused hydration mismatches
- * (SolidStart's client `Router` matches on `window.location.pathname`, not the
- * rewritten server path).
- *
- * The main site has no `/privacy` page (it uses `/privacy-policy/*`), so
- * `main` falls back to the 404 handler — preserving its pre-rewrite behavior.
- *
- * Legacy `/privacy-policy/<product>` routes 308-redirect to the corresponding
- * subdomain `/privacy` (see `src/routes/privacy-policy/*.tsx`).
- */
-export default function PrivacyPage() {
-  const site = useSite();
-  return (
-    <Switch fallback={<NotFound />}>
-      <Match when={site().id === "nessa"}>
-        <NessaPrivacyPolicy />
-      </Match>
-      <Match when={site().id === "lineage"}>
-        <LineagePrivacyPolicy />
-      </Match>
-      <Match when={site().id === "gaze"}>
-        <GazePrivacyPolicy />
-      </Match>
-      <Match when={site().id === "inputhalo"}>
-        <InputHaloPrivacyPolicy />
-      </Match>
-    </Switch>
-  );
-}