feat: Update theme based on cookies consent

app/fastify-entry.ts

@@ -1,6 +1,9 @@
+import type { Theme } from "@/contexts/ThemeContext";
+
 import { createHandler } from "@universal-middleware/fastify";
 import { telefuncHandler } from "./server/telefunc-handler";
 import { vikeHandler } from "./server/vike-handler";
+import fastifyCookie from "@fastify/cookie";
 import { fileURLToPath } from "node:url";
 import { dirname } from "node:path";
 import Fastify from "fastify";
@@ -12,9 +15,29 @@ const hmrPort = process.env.HMR_PORT ? parseInt(process.env.HMR_PORT, 10) : 2467
 const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;
 const root = __dirname;
 
+declare global {
+  namespace Vike {
+    interface PageContext {
+      cookies: {
+        consent: {
+          analytics: boolean;
+          customization: boolean;
+        };
+        theme: Theme;
+      };
+    }
+  }
+}
+
 async function startServer() {
   const app = Fastify();
 
+  app.register(fastifyCookie, {
+    secret: "todo",
+    hook: "onRequest",
+    parseOptions: {},
+  });
+
   // Avoid pre-parsing body, otherwise it will cause issue with universal handlers
   // This will probably change in the future though, you can follow https://github.com/magne4000/universal-middleware for updates
   app.removeAllContentTypeParsers();

app/layouts/LayoutDefault.tsx

@@ -75,11 +75,11 @@ function Header() {
 }
 
 export default function DefaultLayout({ children }: { children: React.ReactNode }) {
-  const { urlPathname } = usePageContext();
+  const { urlPathname, cookies } = usePageContext();
   const isHomePage = urlPathname === "/";
 
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultTheme={cookies.theme}>
       <div className="flex w-full flex-col font-sans">
         <Header />
 

app/package.json

@@ -7,6 +7,7 @@
     "prod": "npm-run-all build preview"
   },
   "dependencies": {
+    "@fastify/cookie": "^11.0.2",
     "@fastify/middie": "^9.0.3",
     "@fastify/static": "^8.1.1",
     "@fontsource-variable/inter": "^5.2.5",

app/pages/+Head.tsx

@@ -1,10 +1,28 @@
+import { usePageContext } from "vike-react/usePageContext";
 import logoUrl from "@/assets/logo.svg";
 import React from "react";
 
 export default function HeadDefault() {
+  const { cookies } = usePageContext();
+
   return (
     <>
       <link rel="icon" href={logoUrl} />
+      {cookies.consent.analytics && (
+        <>
+          <script defer src="https://cloud.umami.is/script.js" data-website-id="ba70261e-d145-4dd1-b0e8-27cbf4927b74" />
+
+          <script async src={`https://www.googletagmanager.com/gtag/js?id=GTM-NRMKQ68K`} />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', 'GTM-NRMKQ68K');`,
+            }}
+          />
+        </>
+      )}
     </>
   );
 }

app/pages/+config.ts

@@ -25,7 +25,7 @@ export default {
 
   image: "/og.webp",
 
-  // prerender: true,
+  passToClient: ["cookies"],
   prefetchStaticAssets: "hover",
 
   extends: vikeReact,

app/pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@fastify/cookie':
+        specifier: ^11.0.2
+        version: 11.0.2
       '@fastify/middie':
         specifier: ^9.0.3
         version: 9.0.3
@@ -94,7 +97,7 @@ importers:
         version: 1.2.1
       telefunc:
         specifier: ^0.1.87
-        version: 0.1.87(@babel/core@7.26.10)(@babel/parser@7.27.0)(@babel/types@7.27.0)(react-streaming@0.3.50(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)
+        version: 0.1.87(@babel/core@7.7.4)(@babel/parser@7.27.0)(@babel/types@7.27.0)(react-streaming@0.3.50(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)
       unplugin-fonts:
         specifier: ^1.3.1
         version: 1.3.1(vite@6.2.6(@types/node@18.19.86)(jiti@2.4.2)(lightningcss@1.29.2)(tsx@4.19.3))
@@ -1301,6 +1304,9 @@ packages:
   '@fastify/ajv-compiler@4.0.2':
     resolution: {integrity: sha512-Rkiu/8wIjpsf46Rr+Fitd3HRP+VsxUFDDeag0hs9L0ksfnwx2g7SPQQTFL0E8Qv+rfXzQOxBJnjUB9ITUDjfWQ==}
 
+  '@fastify/cookie@11.0.2':
+    resolution: {integrity: sha512-GWdwdGlgJxyvNv+QcKiGNevSspMQXncjMZ1J8IvuDQk0jvkzgWWZFNC2En3s+nHndZBGV8IbLwOI/sxCZw/mzA==}
+
   '@fastify/error@4.1.0':
     resolution: {integrity: sha512-KeFcciOr1eo/YvIXHP65S94jfEEqn1RxTRBT1aJaHxY5FK0/GDXYozsQMMWlZoHgi8i0s+YtrLsgj/JkUUjSkQ==}
 
@@ -9754,6 +9760,11 @@ snapshots:
       ajv-formats: 3.0.1(ajv@8.17.1)
       fast-uri: 3.0.6
 
+  '@fastify/cookie@11.0.2':
+    dependencies:
+      cookie: 1.0.2
+      fastify-plugin: 5.0.1
+
   '@fastify/error@4.1.0': {}
 
   '@fastify/fast-json-stringify-compiler@5.0.3':
@@ -10506,10 +10517,10 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@typescript-eslint/eslint-plugin@2.34.0(@typescript-eslint/parser@8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)':
+  '@typescript-eslint/eslint-plugin@2.34.0(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/experimental-utils': 2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/parser': 8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
+      '@typescript-eslint/parser': 2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
       eslint: 9.24.0(jiti@2.4.2)
       functional-red-black-tree: 1.0.1
       regexpp: 3.2.0
@@ -12828,13 +12839,13 @@ snapshots:
 
   eslint-config-react-app@5.2.1(@typescript-eslint/eslint-plugin@2.34.0(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(babel-eslint@10.0.3(eslint@9.24.0(jiti@2.4.2)))(eslint-plugin-flowtype@3.13.0(eslint@9.24.0(jiti@2.4.2)))(eslint-plugin-import@2.18.2(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2)))(eslint-plugin-jsx-a11y@6.2.3(eslint@9.24.0(jiti@2.4.2)))(eslint-plugin-react-hooks@1.7.0(eslint@9.24.0(jiti@2.4.2)))(eslint-plugin-react@7.16.0(eslint@9.24.0(jiti@2.4.2)))(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 2.34.0(@typescript-eslint/parser@8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
+      '@typescript-eslint/eslint-plugin': 2.34.0(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
       '@typescript-eslint/parser': 2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
       babel-eslint: 10.0.3(eslint@9.24.0(jiti@2.4.2))
       confusing-browser-globals: 1.0.11
       eslint: 9.24.0(jiti@2.4.2)
       eslint-plugin-flowtype: 3.13.0(eslint@9.24.0(jiti@2.4.2))
-      eslint-plugin-import: 2.18.2(@typescript-eslint/parser@8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2))
+      eslint-plugin-import: 2.18.2(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2))
       eslint-plugin-jsx-a11y: 6.2.3(eslint@9.24.0(jiti@2.4.2))
       eslint-plugin-react: 7.16.0(eslint@9.24.0(jiti@2.4.2))
       eslint-plugin-react-hooks: 1.7.0(eslint@9.24.0(jiti@2.4.2))
@@ -12859,11 +12870,11 @@ snapshots:
       schema-utils: 2.7.1
       webpack: 4.41.2
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint@9.24.0(jiti@2.4.2)):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint@9.24.0(jiti@2.4.2)):
     dependencies:
       debug: 3.2.7(supports-color@6.1.0)
     optionalDependencies:
-      '@typescript-eslint/parser': 8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
+      '@typescript-eslint/parser': 2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
       eslint: 9.24.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
@@ -12874,7 +12885,7 @@ snapshots:
       eslint: 9.24.0(jiti@2.4.2)
       lodash: 4.17.21
 
-  eslint-plugin-import@2.18.2(@typescript-eslint/parser@8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2)):
+  eslint-plugin-import@2.18.2(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2)):
     dependencies:
       array-includes: 3.1.8
       contains-path: 0.1.0
@@ -12882,14 +12893,14 @@ snapshots:
       doctrine: 1.5.0
       eslint: 9.24.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint@9.24.0(jiti@2.4.2))
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint@9.24.0(jiti@2.4.2))
       has: 1.0.4
       minimatch: 3.1.2
       object.values: 1.2.1
       read-pkg-up: 2.0.0
       resolve: 1.22.10
     optionalDependencies:
-      '@typescript-eslint/parser': 8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
+      '@typescript-eslint/parser': 2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -16363,7 +16374,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.7.4
       '@svgr/webpack': 4.3.3
-      '@typescript-eslint/eslint-plugin': 2.34.0(@typescript-eslint/parser@8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
+      '@typescript-eslint/eslint-plugin': 2.34.0(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
       '@typescript-eslint/parser': 2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
       babel-eslint: 10.0.3(eslint@9.24.0(jiti@2.4.2))
       babel-jest: 24.9.0(@babel/core@7.7.4)
@@ -16379,7 +16390,7 @@ snapshots:
       eslint-config-react-app: 5.2.1(@typescript-eslint/eslint-plugin@2.34.0(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(babel-eslint@10.0.3(eslint@9.24.0(jiti@2.4.2)))(eslint-plugin-flowtype@3.13.0(eslint@9.24.0(jiti@2.4.2)))(eslint-plugin-import@2.18.2(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2)))(eslint-plugin-jsx-a11y@6.2.3(eslint@9.24.0(jiti@2.4.2)))(eslint-plugin-react-hooks@1.7.0(eslint@9.24.0(jiti@2.4.2)))(eslint-plugin-react@7.16.0(eslint@9.24.0(jiti@2.4.2)))(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
       eslint-loader: 3.0.2(eslint@9.24.0(jiti@2.4.2))(webpack@4.41.2)
       eslint-plugin-flowtype: 3.13.0(eslint@9.24.0(jiti@2.4.2))
-      eslint-plugin-import: 2.18.2(@typescript-eslint/parser@8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2))
+      eslint-plugin-import: 2.18.2(@typescript-eslint/parser@2.34.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2))
       eslint-plugin-jsx-a11y: 6.2.3(eslint@9.24.0(jiti@2.4.2))
       eslint-plugin-react: 7.16.0(eslint@9.24.0(jiti@2.4.2))
       eslint-plugin-react-hooks: 1.7.0(eslint@9.24.0(jiti@2.4.2))
@@ -17435,7 +17446,7 @@ snapshots:
 
   tapable@2.2.1: {}
 
-  telefunc@0.1.87(@babel/core@7.26.10)(@babel/parser@7.27.0)(@babel/types@7.27.0)(react-streaming@0.3.50(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0):
+  telefunc@0.1.87(@babel/core@7.7.4)(@babel/parser@7.27.0)(@babel/types@7.27.0)(react-streaming@0.3.50(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0):
     dependencies:
       '@brillout/import': 0.2.6
       '@brillout/json-serializer': 0.5.15
@@ -17444,7 +17455,7 @@ snapshots:
       es-module-lexer: 1.6.0
       ts-morph: 19.0.0
     optionalDependencies:
-      '@babel/core': 7.26.10
+      '@babel/core': 7.7.4
       '@babel/parser': 7.27.0
       '@babel/types': 7.27.0
       react: 19.1.0

app/providers/ThemeProvider.tsx

@@ -1,4 +1,5 @@
 import { ThemeContext, type Theme } from "@/contexts/ThemeContext";
+import { usePageContext } from "vike-react/usePageContext";
 import React, { useEffect, useState } from "react";
 
 type ThemeProviderProps = {
@@ -7,6 +8,7 @@ type ThemeProviderProps = {
 };
 
 export function ThemeProvider(props: ThemeProviderProps) {
+  const { cookies } = usePageContext();
   const [theme, setTheme] = useState<Theme>(props.defaultTheme || "light");
 
   useEffect(() => {
@@ -14,6 +16,10 @@ export function ThemeProvider(props: ThemeProviderProps) {
 
     rootElement.classList.toggle("dark", theme === "dark");
     rootElement.classList.toggle("light", theme === "light");
+
+    if (cookies.consent.customization) {
+      // TODO: update the theme in the cookies
+    }
   }, [theme]);
 
   return <ThemeContext.Provider value={{ theme, setTheme }}>{props.children}</ThemeContext.Provider>;

app/server/vike-handler.ts

@@ -1,10 +1,27 @@
 /// <reference lib="webworker" />
-import { renderPage } from "vike/server";
+
 // TODO: stop using universal-middleware and directly integrate server middlewares instead. (Bati generates boilerplates that use universal-middleware https://github.com/magne4000/universal-middleware to make Bati's internal logic easier. This is temporary and will be removed soon.)
 import type { Get, UniversalHandler } from "@universal-middleware/core";
 
+import { CookieParser } from "@/services/CookieParser";
+import { renderPage } from "vike/server";
+
 export const vikeHandler: Get<[], UniversalHandler> = () => async (request, context, runtime) => {
-  const pageContextInit = { ...context, ...runtime, urlOriginal: request.url, headersOriginal: request.headers };
+  const cookies = new CookieParser(request.headers.get("cookie") || "");
+
+  const pageContextInit = {
+    ...context,
+    ...runtime,
+    urlOriginal: request.url,
+    headersOriginal: request.headers,
+    cookies: {
+      consent: {
+        analytics: cookies.get("consent-analytics", Boolean) || false,
+        customization: cookies.get("consent-customization", Boolean) || false,
+      },
+      theme: cookies.get("theme") || "light",
+    },
+  };
   const pageContext = await renderPage(pageContextInit);
   const response = pageContext.httpResponse;
 

app/services/CookieParser.ts

@@ -0,0 +1,28 @@
+export class CookieParser {
+  private rawCookies: string;
+  private cookies: Record<string, string>;
+
+  constructor(rawCookies: string) {
+    this.rawCookies = rawCookies;
+    this.cookies = {};
+    this.parse();
+  }
+
+  parse(): Record<string, string> {
+    return this.rawCookies.split("; ").reduce(
+      (acc, cookie) => {
+        const [key, value] = cookie.split("=");
+        acc[key] = decodeURIComponent(value);
+        return acc;
+      },
+      {} as Record<string, string>,
+    );
+  }
+
+  get(key: string, formatter?: Function): string | undefined {
+    const value = this.cookies[key];
+
+    if (formatter) return formatter(value);
+    return value;
+  }
+}