feat(website): use Geist and put FAQ toggles on the content rail (#5919)

Swap Inter for Geist as the website sans font. FAQ +/− toggles now sit on
the content rail instead of hanging outside it, slightly larger, with
answers indented to the question text.

The website dev server crashed with "createStartHandler is not a function"
on every SSR hot reload. Vite 7's module runner races when re-evaluating
the static import chain behind TanStack Start's server handler
(TanStack/router#7285, fixed upstream in vitejs/vite#22369). The worker
entry now imports the handler at request time until the website moves to
a Vite release with that fix.

package-lock.json

@@ -6330,10 +6330,10 @@
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
-    "node_modules/@fontsource-variable/inter": {
+    "node_modules/@fontsource-variable/geist": {
       "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.3.0.tgz",
-      "integrity": "sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/geist/-/geist-5.3.0.tgz",
+      "integrity": "sha512-j0m+vLQuG5XAYoHtGCVu0spvlGreR3EzpECUVzkFmI1mTVnAO38l/NEPDCFgZ177JxzYJCLSmTQibIiYPilGrA==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
@@ -40144,7 +40144,7 @@
       "dependencies": {
         "@cloudflare/vite-plugin": "^1.29.1",
         "@cloudflare/workers-types": "^4.20260317.1",
-        "@fontsource-variable/inter": "^5.3.0",
+        "@fontsource-variable/geist": "^5.3.0",
         "@tanstack/react-router": "^1.170.16",
         "@tanstack/react-start": "^1.168.26",
         "framer-motion": "^12.35.2",

packages/website/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@cloudflare/vite-plugin": "^1.29.1",
     "@cloudflare/workers-types": "^4.20260317.1",
-    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/geist": "^5.3.0",
     "@tanstack/react-router": "^1.170.16",
     "@tanstack/react-start": "^1.168.26",
     "framer-motion": "^12.35.2",

packages/website/src/components/faq-item.tsx

@@ -3,12 +3,14 @@ import type { ReactNode } from "react";
 export function FAQItem({ question, children }: { question: string; children: ReactNode }) {
   return (
     <details className="group">
-      <summary className="font-medium text-sm cursor-pointer list-none flex items-start gap-2 -ml-4">
-        <span className="font-mono text-white/40 flex-shrink-0 group-open:hidden">+</span>
-        <span className="font-mono text-white/40 flex-shrink-0 hidden group-open:inline">−</span>
+      <summary className="font-medium text-sm cursor-pointer list-none grid grid-cols-[1.25rem_1fr] items-baseline">
+        <span className="font-mono text-lg leading-none text-white/40 group-open:hidden">+</span>
+        <span className="font-mono text-lg leading-none text-white/40 hidden group-open:inline">
+          −
+        </span>
         {question}
       </summary>
-      <div className="text-sm text-muted-foreground space-y-2 mt-2 prose">{children}</div>
+      <div className="text-sm text-muted-foreground space-y-2 mt-2 pl-5 prose">{children}</div>
     </details>
   );
 }

packages/website/src/server-entry.ts

@@ -1,4 +1,5 @@
-import startEntry from "@tanstack/react-start/server-entry";
+import type { Register } from "@tanstack/react-router";
+import type { RequestHandler } from "@tanstack/react-start/server";
 import { getAndroidVersionCode } from "~/android-version";
 import { getCanonicalRedirect } from "~/canonical-url";
 import { getDoc, getLegacyDocsRedirect } from "~/docs";
@@ -59,6 +60,21 @@ function variesByUserAgent(pathname: string, response: Response): boolean {
   return response.headers.get("content-type")?.includes("text/html") ?? false;
 }
 
+// A static import of TanStack Start's server handler breaks every SSR hot reload on
+// Vite 7 with "createStartHandler is not a function". Importing it at request time
+// avoids the race. Remove once the website is on a Vite release with vitejs/vite#22369.
+// https://github.com/TanStack/router/issues/7285
+let cachedStartFetch: RequestHandler<Register> | null = null;
+
+async function getStartFetch(): Promise<RequestHandler<Register>> {
+  if (!cachedStartFetch) {
+    const { createStartHandler, defaultStreamHandler } =
+      await import("@tanstack/react-start/server");
+    cachedStartFetch = createStartHandler(defaultStreamHandler);
+  }
+  return cachedStartFetch;
+}
+
 export default {
   async fetch(request: Request, env: WebsiteEnv, context: ExecutionContext): Promise<Response> {
     const url = new URL(request.url);
@@ -105,7 +121,8 @@ export default {
       return markdownResponse(doc.content);
     }
 
-    const response = await startEntry.fetch(request);
+    const startFetch = await getStartFetch();
+    const response = await startFetch(request);
     return variesByUserAgent(url.pathname, response) ? withoutSharedCaching(response) : response;
   },
 };

packages/website/src/styles.css

@@ -1,5 +1,5 @@
 @import "tailwindcss";
-@import "@fontsource-variable/inter";
+@import "@fontsource-variable/geist";
 
 * {
   scrollbar-color: var(--color-scrollbar-handle) transparent;
@@ -661,7 +661,7 @@
 }
 
 @theme {
-  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
 
   --color-background: #101615;
   --color-foreground: #fafafa;