Umami tracking events

.woodpecker/ci.yml

@@ -7,14 +7,14 @@ when:
     - event: manual
 
 steps:
-    install:
+    - name: install
       image: node:22-bookworm-slim
       commands:
           - corepack enable
           - corepack prepare pnpm@latest --activate
           - pnpm install --frozen-lockfile
 
-    lint:
+    - name: lint
       image: node:22-bookworm-slim
       commands:
           - corepack enable && corepack prepare pnpm@latest --activate
@@ -22,7 +22,25 @@ steps:
       depends_on:
           - install
 
-    check:
+    - name: Send Lint Status Notification (failure)
+      image: curlimages/curl
+      environment:
+          MATTERMOST_BOT_ACCESS_TOKEN:
+              from_secret: mattermost_bot_access_token
+          MATTERMOST_CHANNEL_ID:
+              from_secret: mattermost_tests_channel_id
+          MATTERMOST_POST_API_URL:
+              from_secret: mattermost_post_api_url
+      commands:
+          - |
+              BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Lint failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
+              curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
+      depends_on:
+          - lint
+      when:
+          - status: [failure]
+
+    - name: check
       image: node:22-bookworm-slim
       commands:
           - corepack enable && corepack prepare pnpm@latest --activate
@@ -30,7 +48,25 @@ steps:
       depends_on:
           - lint
 
-    test:
+    - name: Send Svelte Check Status Notification (failure)
+      image: curlimages/curl
+      environment:
+          MATTERMOST_BOT_ACCESS_TOKEN:
+              from_secret: mattermost_bot_access_token
+          MATTERMOST_CHANNEL_ID:
+              from_secret: mattermost_tests_channel_id
+          MATTERMOST_POST_API_URL:
+              from_secret: mattermost_post_api_url
+      commands:
+          - |
+              BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Svelte Check failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
+              curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
+      depends_on:
+          - check
+      when:
+          - status: [failure]
+
+    - name: Unit Tests
       image: node:22-bookworm-slim
       commands:
           - corepack enable && corepack prepare pnpm@latest --activate
@@ -38,15 +74,51 @@ steps:
       depends_on:
           - check
 
-    build:
+    - name: Send Test Status Notification (failure)
+      image: curlimages/curl
+      environment:
+          MATTERMOST_BOT_ACCESS_TOKEN:
+              from_secret: mattermost_bot_access_token
+          MATTERMOST_CHANNEL_ID:
+              from_secret: mattermost_tests_channel_id
+          MATTERMOST_POST_API_URL:
+              from_secret: mattermost_post_api_url
+      commands:
+          - |
+              BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Test failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
+              curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
+      depends_on:
+          - Unit Tests
+      when:
+          - status: [failure]
+
+    - name: build
       image: node:22-bookworm-slim
       commands:
           - corepack enable && corepack prepare pnpm@latest --activate
           - pnpm run build
       depends_on:
-            - test
+          - Unit Tests
 
-    build-full:
+    - name: Send Build Status Notification (failure)
+      image: curlimages/curl
+      environment:
+          MATTERMOST_BOT_ACCESS_TOKEN:
+              from_secret: mattermost_bot_access_token
+          MATTERMOST_CHANNEL_ID:
+              from_secret: mattermost_tests_channel_id
+          MATTERMOST_POST_API_URL:
+              from_secret: mattermost_post_api_url
+      commands:
+          - |
+              BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Build failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
+              curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
+      depends_on:
+          - build
+      when:
+          - status: [failure]
+
+    - name: build-full
       image: node:22-bookworm-slim
       commands:
           - apt-get update
@@ -58,7 +130,25 @@ steps:
       depends_on:
           - build
 
-    e2e:
+    - name: Send Build Full Status Notification (failure)
+      image: curlimages/curl
+      environment:
+          MATTERMOST_BOT_ACCESS_TOKEN:
+              from_secret: mattermost_bot_access_token
+          MATTERMOST_CHANNEL_ID:
+              from_secret: mattermost_tests_channel_id
+          MATTERMOST_POST_API_URL:
+              from_secret: mattermost_post_api_url
+      commands:
+          - |
+              BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Build Full failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
+              curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
+      depends_on:
+          - build-full
+      when:
+          - status: [failure]
+
+    - name: E2E Tests
       image: node:22-bookworm-slim
       commands:
           - corepack enable && corepack prepare pnpm@latest --activate
@@ -66,3 +156,45 @@ steps:
           - pnpm run test:e2e
       depends_on:
           - build
+
+    - name: Send E2E Status Notification (failure)
+      image: curlimages/curl
+      environment:
+          MATTERMOST_BOT_ACCESS_TOKEN:
+              from_secret: mattermost_bot_access_token
+          MATTERMOST_CHANNEL_ID:
+              from_secret: mattermost_tests_channel_id
+          MATTERMOST_POST_API_URL:
+              from_secret: mattermost_post_api_url
+      commands:
+          - |
+              BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] E2E failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
+              curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
+      depends_on:
+          - E2E Tests
+      when:
+          - status: [failure]
+
+    - name: Send CI Pipeline Status Notification (success)
+      image: curlimages/curl
+      environment:
+          MATTERMOST_BOT_ACCESS_TOKEN:
+              from_secret: mattermost_bot_access_token
+          MATTERMOST_CHANNEL_ID:
+              from_secret: mattermost_tests_channel_id
+          MATTERMOST_POST_API_URL:
+              from_secret: mattermost_post_api_url
+      commands:
+          - |
+              BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] CI pipeline success 🎉"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
+              curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
+      depends_on:
+          - install
+          - lint
+          - check
+          - Unit Tests
+          - build
+          - build-full
+          - E2E Tests
+      when:
+          - status: [success]

.woodpecker/deploy.yml

@@ -45,6 +45,42 @@ steps:
               echo "All build attempts failed"
               exit 1
 
+    - name: Send Docker Image Build Status Notification (success)
+      image: curlimages/curl
+      environment:
+          MATTERMOST_BOT_ACCESS_TOKEN:
+              from_secret: mattermost_bot_access_token
+          MATTERMOST_CHANNEL_ID:
+              from_secret: mattermost_pushes_channel_id
+          MATTERMOST_POST_API_URL:
+              from_secret: mattermost_post_api_url
+      commands:
+          - |
+              BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Docker image build success 🎉"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
+              curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
+      depends_on:
+          - Docker image build
+      when:
+          - status: [success]
+
+    - name: Send Docker Image Build Status Notification (failure)
+      image: curlimages/curl
+      environment:
+          MATTERMOST_BOT_ACCESS_TOKEN:
+              from_secret: mattermost_bot_access_token
+          MATTERMOST_CHANNEL_ID:
+              from_secret: mattermost_pushes_channel_id
+          MATTERMOST_POST_API_URL:
+              from_secret: mattermost_post_api_url
+      commands:
+          - |
+              BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Docker image build failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
+              curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
+      depends_on:
+          - Docker image build
+      when:
+          - status: [failure]
+
     - name: Push to registry
       image: docker:latest
       environment:
@@ -72,6 +108,42 @@ steps:
       depends_on:
           - Docker image build
 
+    - name: Send Push to Registry Status Notification (success)
+      image: curlimages/curl
+      environment:
+          MATTERMOST_BOT_ACCESS_TOKEN:
+              from_secret: mattermost_bot_access_token
+          MATTERMOST_CHANNEL_ID:
+              from_secret: mattermost_pushes_channel_id
+          MATTERMOST_POST_API_URL:
+              from_secret: mattermost_post_api_url
+      commands:
+          - |
+              BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Push to registry success 🎉"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
+              curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
+      depends_on:
+          - Push to registry
+      when:
+          - status: [success]
+
+    - name: Send Push to Registry Status Notification (failure)
+      image: curlimages/curl
+      environment:
+          MATTERMOST_BOT_ACCESS_TOKEN:
+              from_secret: mattermost_bot_access_token
+          MATTERMOST_CHANNEL_ID:
+              from_secret: mattermost_pushes_channel_id
+          MATTERMOST_POST_API_URL:
+              from_secret: mattermost_post_api_url
+      commands:
+          - |
+              BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Push to registry failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
+              curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
+      depends_on:
+          - Push to registry
+      when:
+          - status: [failure]
+
     - name: Trigger Portainer stack redeploy
       image: curlimages/curl:latest
       environment:
@@ -91,3 +163,39 @@ steps:
               echo "✓ Portainer redeploy triggered (HTTP $code)"
       depends_on:
           - Push to registry
+
+    - name: Send Deploy Status Notification (success)
+      image: curlimages/curl
+      environment:
+          MATTERMOST_BOT_ACCESS_TOKEN:
+              from_secret: mattermost_bot_access_token
+          MATTERMOST_CHANNEL_ID:
+              from_secret: mattermost_pushes_channel_id
+          MATTERMOST_POST_API_URL:
+              from_secret: mattermost_post_api_url
+      commands:
+          - |
+              BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Production Deploy success 🎉"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
+              curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
+      depends_on:
+          - Trigger Portainer stack redeploy
+      when:
+          - status: [success]
+
+    - name: Send Deploy Status Notification (failure)
+      image: curlimages/curl
+      environment:
+          MATTERMOST_BOT_ACCESS_TOKEN:
+              from_secret: mattermost_bot_access_token
+          MATTERMOST_CHANNEL_ID:
+              from_secret: mattermost_pushes_channel_id
+          MATTERMOST_POST_API_URL:
+              from_secret: mattermost_post_api_url
+      commands:
+          - |
+              BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Production Deploy failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
+              curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
+      depends_on:
+          - Trigger Portainer stack redeploy
+      when:
+          - status: [failure]

docker-compose.yml

@@ -17,7 +17,7 @@ services:
             - 'traefik.http.routers.mifi-dev.rule=Host(`mifi.dev`) || Host(`www.mifi.dev`)'
             - 'traefik.http.routers.mifi-dev.entrypoints=websecure'
             - 'traefik.http.routers.mifi-dev.service=mifi-dev'
-            - 'traefik.http.routers.mifi-dev.middlewares=security-supermax-with-analytics@file,redirect-www-to-non-www@file'
+            - 'traefik.http.routers.mifi-dev.middlewares=gzip@file,security-supermax-with-analytics@file,redirect-www-to-non-www@file'
             - 'traefik.http.routers.mifi-dev.tls=true'
             - 'traefik.http.routers.mifi-dev.tls.certresolver=letsencrypt'
             - 'traefik.http.services.mifi-dev.loadbalancer.server.port=80'
@@ -25,7 +25,7 @@ services:
             - 'traefik.http.routers.mifi-bio.rule=Host(`mifi.bio`) || Host(`www.mifi.bio`)'
             - 'traefik.http.routers.mifi-bio.entrypoints=websecure'
             - 'traefik.http.routers.mifi-bio.service=mifi-bio'
-            - 'traefik.http.routers.mifi-bio.middlewares=security-supermax-with-analytics@file,redirect-www-to-non-www@file'
+            - 'traefik.http.routers.mifi-bio.middlewares=gzip@file,security-supermax-with-analytics@file,redirect-www-to-non-www@file'
             - 'traefik.http.routers.mifi-bio.tls=true'
             - 'traefik.http.routers.mifi-bio.tls.certresolver=letsencrypt'
             - 'traefik.http.services.mifi-bio.loadbalancer.server.port=80'

package.json

@@ -8,9 +8,9 @@
         "build": "vite build && node scripts/minify-static-assets.mjs && node scripts/externalize-inline-script.mjs",
         "build:bio": "CONTENT_VARIANT=bio vite build && node scripts/minify-static-assets.mjs && node scripts/externalize-inline-script.mjs",
         "build:dev": "CONTENT_VARIANT=dev vite build && node scripts/minify-static-assets.mjs && node scripts/externalize-inline-script.mjs",
-        "build:full": "vite build && pnpm run critical-css && node scripts/minify-static-assets.mjs && node scripts/externalize-inline-script.mjs",
+        "build:full": "vite build && node scripts/minify-static-assets.mjs && node scripts/externalize-inline-script.mjs && pnpm run critical-css",
-        "build:full:bio": "CONTENT_VARIANT=bio vite build && pnpm run critical-css && node scripts/minify-static-assets.mjs && node scripts/externalize-inline-script.mjs",
+        "build:full:bio": "CONTENT_VARIANT=bio vite build && node scripts/minify-static-assets.mjs && node scripts/externalize-inline-script.mjs && pnpm run critical-css",
-        "build:full:dev": "CONTENT_VARIANT=dev vite build && pnpm run critical-css && node scripts/minify-static-assets.mjs && node scripts/externalize-inline-script.mjs",
+        "build:full:dev": "CONTENT_VARIANT=dev vite build && node scripts/minify-static-assets.mjs && node scripts/externalize-inline-script.mjs && pnpm run critical-css",
         "preview": "vite preview",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -65,7 +65,7 @@
     "dependencies": {
         "@lucide/svelte": "^0.563.1"
     },
-    "packageManager": "pnpm@10.28.2",
+    "packageManager": "pnpm@10.29.1+sha512.48dae233635a645768a3028d19545cacc1688639eeb1f3734e42d6d6b971afbf22aa1ac9af52a173d9c3a20c15857cfa400f19994d79a2f626fcc73fccda9bbc",
     "repository": {
         "type": "git",
         "url": "https://git.mifi.dev/mifi-holdings/mifi-links.git"

scripts/critical-css.mjs

@@ -6,23 +6,57 @@
  * Usage: node scripts/critical-css.mjs [buildDir]
  *   buildDir: path to build output (default: "build"). Use from repo root.
  */
-import { readFileSync, writeFileSync } from 'node:fs';
+import { existsSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { homedir, platform } from 'node:os';
 import { join } from 'node:path';
 import { cwd } from 'node:process';
 
 const buildDir = join(cwd(), process.argv[2] || 'build');
 const htmlPath = join(buildDir, 'index.html');
 
-// critical/penthouse use a nested puppeteer; point it at our installed Chrome
+// critical/penthouse use a nested puppeteer; point at an installed Chrome/Chromium.
-try {
+// Only set PUPPETEER_EXECUTABLE_PATH if the path exists. Prefer Playwright's Chromium
-    const puppeteer = await import('puppeteer');
+// on arm64 so we use the native binary (Puppeteer's default can be x86 on ARM hosts e.g. OrbStack).
-    const executablePath = puppeteer.default?.executablePath?.();
+function getPlaywrightChromePath() {
-    if (executablePath) {
+    const cacheBase =
-        process.env.PUPPETEER_EXECUTABLE_PATH = executablePath;
+        process.env.PLAYWRIGHT_BROWSERS_PATH || join(homedir(), '.cache', 'ms-playwright');
+    if (!existsSync(cacheBase)) return null;
+    const dirs = readdirSync(cacheBase, { withFileTypes: true });
+    for (const d of dirs) {
+        if (!d.isDirectory() || !d.name.startsWith('chromium-')) continue;
+        const sub = join(cacheBase, d.name);
+        const rel =
+            platform() === 'win32'
+                ? 'chrome-win\\chrome.exe'
+                : platform() === 'darwin'
+                  ? 'chrome-mac/Chromium.app/Contents/MacOS/Chromium'
+                  : 'chrome-linux/chrome';
+        const candidate = join(sub, rel);
+        if (existsSync(candidate)) return candidate;
     }
-} catch {
+    return null;
-    // no top-level puppeteer or no executable; rely on env or default
 }
+async function resolveChromePath() {
+    const isArm64 = process.arch === 'arm64';
+    if (isArm64) {
+        const pw = getPlaywrightChromePath();
+        if (pw) return pw;
+    }
+    try {
+        const puppeteer = await import('puppeteer');
+        const path = puppeteer.default?.executablePath?.();
+        if (path && existsSync(path)) return path;
+    } catch {
+        // ignore
+    }
+    if (!isArm64) {
+        const pw = getPlaywrightChromePath();
+        if (pw) return pw;
+    }
+    return null;
+}
+const chromePath = await resolveChromePath();
+if (chromePath) process.env.PUPPETEER_EXECUTABLE_PATH = chromePath;
 
 try {
     const { generate } = await import('critical');
@@ -45,9 +79,16 @@ try {
 } catch (err) {
     const msg = err instanceof Error ? err.message : String(err);
     console.error('Critical CSS step failed:', msg);
-    if (msg.includes('Browser is not downloaded')) {
+    if (
+        msg.includes('Browser is not downloaded') ||
+        msg.includes('did not find any executable') ||
+        msg.includes('Could not find Chrome')
+    ) {
         console.error('Install Chromium first: pnpm run critical-css:install');
-        console.error('Or run "pnpm run build" without critical CSS.');
+        console.error(
+            '(Dev container: Playwright Chromium is also used if present in ~/.cache/ms-playwright.)',
+        );
+        console.error('Or run "pnpm run build" (without critical CSS) for a working build.');
     }
     process.exit(1);
 }

scripts/minify-static-assets.mjs

@@ -1,5 +1,6 @@
 /**
  * Post-build: minify JS and CSS under build/assets (files copied from static/).
+ * Includes static/assets/js/*.js (e.g. ga-init.js, bootstrap.js) and assets/*.css.
  * Usage: node scripts/minify-static-assets.mjs [buildDir]
  */
 import { existsSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';

src/app.html

@@ -3,10 +3,19 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+
         <script src="/assets/js/bootstrap.js"></script>
         %sveltekit.head%
     </head>
     <body data-sveltekit-preload-data="hover">
         <div style="display: contents">%sveltekit.body%</div>
+        <img
+            src="https://analytics.mifi.holdings/pixel.gif"
+            alt=""
+            width="1"
+            height="1"
+            role="presentation"
+            loading="eager"
+        />
     </body>
 </html>

src/lib/components/ContactPanel.svelte

@@ -34,6 +34,7 @@
                         target="_blank"
                         rel="noopener noreferrer"
                         aria-describedby={link.description ? descriptionId : undefined}
+                        data-umami-event={`contact panel ${link.label} link`}
                     >
                         {#if link.icon}
                             <LinkIcon href={link.href} icon={link.icon} label={link.label} />
@@ -65,7 +66,7 @@
         color: var(--color-secondary-muted);
         display: block;
         font-size: 0.875rem;
-        margin-bottom: 0.5rem;
+        margin-bottom: 1rem;
         text-align: center;
     }
 </style>

src/lib/components/Hero.svelte

@@ -35,6 +35,7 @@
                     contactOpen = true;
                     shareOpen = false;
                 }}
+                data-umami-event="header contact button"
             >
                 <IconContact size={20} />
             </button>
@@ -47,6 +48,7 @@
                 shareOpen = true;
                 contactOpen = false;
             }}
+            data-umami-event="header share button"
         >
             <IconShare size={20} />
         </button>
@@ -98,6 +100,7 @@
                         contactOpen = true;
                         shareOpen = false;
                     }}
+                    data-umami-event="hero contact button"
                 >
                     <IconContact size={20} />
                     <span>Contact</span>
@@ -111,6 +114,7 @@
                     shareOpen = true;
                     contactOpen = false;
                 }}
+                data-umami-event="hero share button"
             >
                 <IconShare size={20} />
                 <span>Share</span>

src/lib/components/Link.svelte

@@ -5,7 +5,7 @@
     let { href, icon, label, description }: ProcessedLink = $props();
 </script>
 
-<a {href} rel="noopener noreferrer" target="_blank" class="link">
+<a {href} rel="noopener noreferrer" target="_blank" class="link" data-umami-event={`${label} link`}>
     <span class="icon" aria-hidden="true">
         <LinkIcon {href} {icon} {label} />
     </span>

src/lib/components/Panel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
     import type { Component } from 'svelte';
     import { tick } from 'svelte';
 
@@ -9,7 +10,7 @@
         open = false,
         title = '',
     }: {
-        children: import('svelte').Snippet;
+        children: Snippet;
         icon?: Component<{ size?: number }>;
         onclose: () => void;
         open: boolean;
@@ -41,6 +42,9 @@
     aria-labelledby="panel-title"
     aria-modal="true"
     onclose={handleDialogClose}
+    onclick={(e) => {
+        if (e.target === dialogEl) onclose();
+    }}
     oncancel={(e) => {
         e.preventDefault();
         onclose();
@@ -105,7 +109,7 @@
         flex-direction: column;
         display: flex;
         max-height: 70vh;
-        padding-bottom: 2rem;
+        padding-bottom: 1rem;
         overflow: hidden;
         width: 100%;
 

src/lib/components/SharePanel.svelte

@@ -50,14 +50,19 @@
             {#if qrCodeImage}
                 <div class="share-qr">
                     <img
-                        src="/assets/images/{qrCodeImage}.png"
+                        src="/assets/images/{qrCodeImage}.svg"
                         alt="QR code for this page"
                         width="160"
                         height="160"
                     />
                 </div>
             {/if}
-            <button type="button" class="panel-btn" onclick={copyLink}>
+            <button
+                type="button"
+                class="panel-btn"
+                onclick={copyLink}
+                data-umami-event="share panel copy"
+            >
                 <IconCopy size={20} />
                 {copied ? 'Copied!' : 'Copy link'}
             </button>
@@ -67,12 +72,18 @@
                 onclick={onclose}
                 target="_blank"
                 rel="noopener noreferrer"
+                data-umami-event="share panel email link"
             >
                 <IconEmail size={20} />
                 Email link
             </a>
             {#if canShare}
-                <button type="button" class="panel-btn" onclick={share}>
+                <button
+                    type="button"
+                    class="panel-btn"
+                    onclick={share}
+                    data-umami-event="share panel device share"
+                >
                     <IconShare size={20} />
                     Share…
                 </button>

src/lib/components/ThemeToggle.svelte

@@ -45,6 +45,7 @@
         aria-label="Close theme menu"
         tabindex="-1"
         onclick={() => (expanded = false)}
+        data-umami-event="theme toggle close"
     ></button>
 {/if}
 
@@ -64,6 +65,7 @@
             aria-current={current === 'light' ? 'true' : undefined}
             title="Light"
             onclick={() => handleClick('light')}
+            data-umami-event="theme toggle light"
         >
             <Sun size={24} />
         </button>
@@ -75,6 +77,7 @@
             aria-current={current === 'dark' ? 'true' : undefined}
             title="Dark"
             onclick={() => handleClick('dark')}
+            data-umami-event="theme toggle dark"
         >
             <Moon size={24} />
         </button>
@@ -86,6 +89,7 @@
             aria-current={current === 'auto' ? 'true' : undefined}
             title="Auto (system)"
             onclick={() => handleClick('auto')}
+            data-umami-event="theme toggle auto"
         >
             <SunMoon size={24} />
         </button>

src/lib/config.ts

@@ -2,6 +2,8 @@
  * App config: own-property hostnames for UTM attribution, variant hostnames, GA IDs.
  */
 
+import { ContentVariant } from './data/constants';
+
 export const OWN_PROPERTY_HOSTS = [
     'mifi.ventures',
     'cal.mifi.ventures',
@@ -9,20 +11,25 @@ export const OWN_PROPERTY_HOSTS = [
     'mifi.bio',
 ] as const;
 
-export const VARIANT_HOSTS: Record<'dev' | 'bio', string> = {
+export const VARIANT_HOSTS: Record<ContentVariant, string> = {
-    dev: 'mifi.dev',
+    [ContentVariant.DEV]: 'mifi.dev',
-    bio: 'mifi.bio',
+    [ContentVariant.BIO]: 'mifi.bio',
 };
 
-export const GA_MEASUREMENT_IDS: Record<'dev' | 'bio', string> = {
+export const GA_MEASUREMENT_IDS: Record<ContentVariant, string> = {
-    dev: 'G-P8V832WDM8',
+    [ContentVariant.DEV]: 'G-P8V832WDM8',
-    bio: 'G-885B0KYWZ1',
+    [ContentVariant.BIO]: 'G-885B0KYWZ1',
+};
+
+export const UMAMI_MEASUREMENT_IDS: Record<ContentVariant, string> = {
+    [ContentVariant.DEV]: 'ac7e751b-4ce3-49f2-80e0-f430b292b72a',
+    [ContentVariant.BIO]: 'cf44669d-10c1-4982-ad79-282aed4237e5',
 };
 
 /** theme-color meta values per variant (match tokens-{variant}.css --color-bg) */
-export const THEME_COLORS: Record<'dev' | 'bio', { light: string; dark: string }> = {
+export const THEME_COLORS: Record<ContentVariant, { light: string; dark: string }> = {
-    dev: { light: '#f5f4f8', dark: '#131118' }, // hsl(260 20% 98%) / hsl(260 18% 8%)
+    [ContentVariant.DEV]: { light: '#f5f4f8', dark: '#131118' }, // hsl(260 20% 98%) / hsl(260 18% 8%)
-    bio: { light: '#f4f6f9', dark: '#111318' }, // hsl(220 22% 98%) / hsl(220 18% 8%)
+    [ContentVariant.BIO]: { light: '#f4f6f9', dark: '#111318' }, // hsl(220 22% 98%) / hsl(220 18% 8%)
 };
 
 export const UTM_MEDIUM = 'link';

src/lib/data/links.json

@@ -20,8 +20,7 @@
                 ]
             },
             "linksHeading": "Professional Links and Profiles",
-            "showContact": true,
+            "qrCodeImage": "qr-mifi-dev"
-            "qrCodeImage": null
         },
         "bio": {
             "title": "mifi.bio — the homepage of the human Mike Fitzpatrick",
@@ -51,8 +50,7 @@
                 ]
             },
             "linksHeading": "Links and Profiles",
-            "showContact": false,
+            "qrCodeImage": "qr-mifi-bio"
-            "qrCodeImage": null
         }
     },
     "contactLinks": [
@@ -124,6 +122,14 @@
                 "dev": 1
             },
             "links": [
+                {
+                    "href": "https://mifi.dev/downloads/resume-2026lf.pdf",
+                    "icon": "Resume",
+                    "label": "Long-form CV",
+                    "description": "My full resume, including all my work experience, education, and skills.",
+                    "utmContent": "resume-lf",
+                    "variants": ["dev", "bio"]
+                },
                 {
                     "href": "https://mifi.dev/downloads/resume-2026c.pdf",
                     "icon": "Resume",

src/lib/data/types.ts

@@ -29,11 +29,7 @@ export interface Site {
         sameAs: string[];
     };
     linksHeading?: string;
-    /** If false, hide Contact button and panel for this variant. Default true. */
-    showContact?: boolean;
-    /** Contact panel links; if omitted, first section links are used. */
     contactLinks?: ContactLink[];
-    /** Optional QR code image path (e.g. /assets/images/qr-mifi-dev.png) for Share panel. */
     qrCodeImage?: string | null;
 }
 

src/routes/+layout.server.ts

@@ -1,5 +1,10 @@
 import contentData from '$lib/data/links.json';
-import { VARIANT_HOSTS, GA_MEASUREMENT_IDS, THEME_COLORS } from '$lib/config';
+import {
+    VARIANT_HOSTS,
+    GA_MEASUREMENT_IDS,
+    THEME_COLORS,
+    UMAMI_MEASUREMENT_IDS,
+} from '$lib/config';
 import type { Site, ContentData, ProcessedLink } from '$lib/data/types';
 import type { LayoutServerLoad } from './$types';
 import { ContentVariant, HeroLayout } from '$lib/data/constants';
@@ -18,6 +23,7 @@ export type LayoutServerDataOut = {
     };
     variant: string;
     gaMeasurementId: string;
+    umamiMeasurementId: string;
     /** theme-color meta values for current variant */
     themeColorLight: string;
     themeColorDark: string;
@@ -57,7 +63,6 @@ export const load: LayoutServerLoad<LayoutServerDataOut> = (): LayoutServerDataO
         location: siteDef?.location,
         person: siteDef?.person,
         linksHeading: siteDef?.linksHeading,
-        showContact: siteDef?.showContact,
         contactLinks: siteDef?.contactLinks,
         qrCodeImage: siteDef?.qrCodeImage ?? undefined,
     };
@@ -68,6 +73,7 @@ export const load: LayoutServerLoad<LayoutServerDataOut> = (): LayoutServerDataO
         links: { sections },
         variant,
         gaMeasurementId: GA_MEASUREMENT_IDS[variant],
+        umamiMeasurementId: UMAMI_MEASUREMENT_IDS[variant],
         themeColorLight: themeColors.light,
         themeColorDark: themeColors.dark,
     };

src/routes/+layout.svelte

@@ -37,6 +37,10 @@
 </script>
 
 <svelte:head>
+    <!-- Google tag (gtag.js): ID passed via data-ga-id for CSP (no inline script) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id={data.gaMeasurementId}"></script>
+    <script defer src="/assets/js/ga-init.js" data-ga-id={data.gaMeasurementId}></script>
+
     <link rel="stylesheet" href="/assets/tokens-{data.variant}.css" />
 
     <link

src/routes/__tests__/layout.server.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
 import { load } from '../+layout.server';
+import { UMAMI_MEASUREMENT_IDS } from '$lib/config';
 import { ContentVariant } from '$lib/data/constants';
 import type { ContentData } from '$lib/data/types';
 
@@ -95,7 +96,9 @@ describe('+layout.server', () => {
     it('gaMeasurementId matches variant', () => {
         process.env.CONTENT_VARIANT = ContentVariant.DEV;
         expect(load().gaMeasurementId).toMatch(/^G-/);
+        expect(load().umamiMeasurementId).toBe(UMAMI_MEASUREMENT_IDS[ContentVariant.DEV]);
         process.env.CONTENT_VARIANT = ContentVariant.BIO;
         expect(load().gaMeasurementId).toMatch(/^G-/);
+        expect(load().umamiMeasurementId).toBe(UMAMI_MEASUREMENT_IDS[ContentVariant.BIO]);
     });
 });

src/routes/__tests__/layout.test.ts

@@ -15,9 +15,12 @@ describe('+layout (LayoutData)', () => {
             links: { sections: [] },
             variant: 'dev',
             gaMeasurementId: 'G-xxx',
+            umamiMeasurementId: 'UM-xxx',
         };
         expect(mockData.site).toHaveProperty('title');
         expect(mockData.site).toHaveProperty('url');
+        expect(mockData).toHaveProperty('umamiMeasurementId');
+        expect(mockData).toHaveProperty('gaMeasurementId');
         expect(mockData).toHaveProperty('variant');
         expect(mockData.links).toHaveProperty('sections');
     });

static/assets/js/ga-init.js

@@ -0,0 +1,11 @@
+(function () {
+    var script = document.currentScript;
+    var id = script && script.getAttribute('data-ga-id');
+    if (!id) return;
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+        window.dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+    gtag('config', id, { anonymize_ip: true });
+})();

test.txt

@@ -1 +0,0 @@
-hello