Pop semvar up

.woodpecker/deploy.yaml

@@ -21,16 +21,16 @@ steps:
       commands:
           - set -e
           - apk add --no-cache jq
-          - APP_VERSION=$(jq -r .version package.json | sed 's/^v//')
+          - APP_VERSION=$(jq -r .version package.json | tr -d '\r\n' | sed 's/^v//')
           - echo "=== Building Docker image ==="
           - 'echo "Commit SHA: ${CI_COMMIT_SHA:0:8}"'
           - 'echo "Registry repo: $REGISTRY_REPO"'
           - 'echo "App version: $APP_VERSION"'
           - |
               docker build \
-                --tag $REGISTRY_REPO:${CI_COMMIT_SHA} \
+                --tag "$REGISTRY_REPO:$CI_COMMIT_SHA" \
-                --tag $REGISTRY_REPO:latest \
+                --tag "$REGISTRY_REPO:latest" \
-                --tag $REGISTRY_REPO:${APP_VERSION} \
+                --tag "$REGISTRY_REPO:$APP_VERSION" \
                 --label "git.commit=${CI_COMMIT_SHA}" \
                 --label "git.branch=${CI_COMMIT_BRANCH}" \
                 .
@@ -87,7 +87,7 @@ steps:
       commands:
           - set -e
           - apk add --no-cache jq
-          - APP_VERSION=$(jq -r .version package.json | sed 's/^v//')
+          - APP_VERSION=$(jq -r .version package.json | tr -d '\r\n' | sed 's/^v//')
           - echo "=== Pushing to registry ==="
           - 'echo "Registry: $REGISTRY_URL"'
           - 'echo "Repository: $REGISTRY_REPO"'
@@ -96,9 +96,9 @@ steps:
               echo "$REGISTRY_PASSWORD" | docker login "$REGISTRY_URL" \
                 -u "$REGISTRY_USERNAME" \
                 --password-stdin
-          - docker push $REGISTRY_REPO:${CI_COMMIT_SHA}
+          - 'docker push $REGISTRY_REPO:$CI_COMMIT_SHA'
-          - docker push $REGISTRY_REPO:latest
+          - 'docker push $REGISTRY_REPO:latest'
-          - docker push $REGISTRY_REPO:${APP_VERSION}
+          - 'docker push $REGISTRY_REPO:$APP_VERSION'
           - echo "✓ Images pushed successfully"
       depends_on:
           - 'Docker image build'

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mifi-ventures-landing",
-    "version": "4.0.0",
+    "version": "4.0.3",
     "private": true,
     "repository": "https://git.mifi.dev/mifi-ventures/landing.git",
     "packageManager": "pnpm@10.31.0+sha512.e3927388bfaa8078ceb79b748ffc1e8274e84d75163e67bc22e06c0d3aed43dd153151cbf11d7f8301ff4acb98c68bdc5cadf6989532801ffafe3b3e4a63c268",
@@ -12,11 +12,11 @@
         "dev": "vite dev",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-        "format": "prettier --write \"src/**/*.{ts,js,svelte,css,json}\"",
+        "format": "prettier --write \"src/**/*.{ts,js,svelte,css,json}\" \"static/**/*.{css,html,js}\"",
         "lint": "eslint .",
         "lint:fix": "eslint . --fix",
-        "lint:css": "stylelint \"src/**/*.css\" \"src/**/*.svelte\"",
+        "lint:css": "stylelint \"src/**/*.css\" \"src/**/*.svelte\" \"static/**/*.css\"",
-        "lint:css:fix": "stylelint \"src/**/*.css\" \"src/**/*.svelte\" --fix",
+        "lint:css:fix": "stylelint \"src/**/*.css\" \"src/**/*.svelte\" \"static/**/*.css\" --fix",
         "preview": "serve dist -p 4173",
         "test": "vitest run",
         "test:unit": "vitest run",

scripts/run-e2e-in-docker.sh

@@ -24,4 +24,5 @@ docker run --rm \
     npx serve dist -p 4173 &
     sleep 2
     pnpm exec playwright test
+    pnpm install --config.confirmModulesPurge=false
   '

scripts/run-e2e.sh

@@ -11,7 +11,9 @@ if [ -n "$CI" ]; then
 fi
 
 if command -v docker >/dev/null 2>&1; then
-    exec bash "$(dirname "$0")/run-e2e-in-docker.sh"
+    bash "$(dirname "$0")/run-e2e-in-docker.sh"
+    pnpm install --config.confirmModulesPurge=false
+    exit 0
 fi
 
 # No Docker: run in current environment (e.g. devcontainer; same image as CI)

scripts/update-e2e-snapshots.sh

@@ -28,6 +28,7 @@ if command -v docker >/dev/null 2>&1; then
         sleep 2
         pnpm exec playwright test --update-snapshots
       '
+    pnpm install --config.confirmModulesPurge=false
 else
     echo "Updating snapshots in the current environment (matches CI when using the devcontainer)."
     echo ""

src/app.css

@@ -131,6 +131,50 @@
     }
 }
 
+/* ========================================
+   Local Font Faces
+   ======================================== */
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-500.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-700.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Fraunces;
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('/assets/fonts/fraunces-v38-latin-600.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Fraunces;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/assets/fonts/fraunces-v38-latin-700.woff2') format('woff2');
+}
+
 /* ========================================
    Base Styles
    ======================================== */
@@ -178,6 +222,11 @@ body {
     text-rendering: optimizeLegibility;
 }
 
+strong,
+b {
+    font-weight: var(--font-weight-bold);
+}
+
 /* ========================================
    Skip Link (Accessibility)
    ======================================== */

src/routes/+layout.svelte

@@ -47,13 +47,6 @@
         type="font/woff2"
         crossorigin="anonymous"
     />
-    <link
-        rel="preload"
-        href="/assets/fonts/fraunces-v38-latin-700.woff2"
-        as="font"
-        type="font/woff2"
-        crossorigin="anonymous"
-    />
     <link
         rel="preload"
         href="/assets/fonts/inter-v20-latin-regular.woff2"
@@ -61,13 +54,6 @@
         type="font/woff2"
         crossorigin="anonymous"
     />
-    <link
-        rel="preload"
-        href="/assets/fonts/inter-v20-latin-italic.woff2"
-        as="font"
-        type="font/woff2"
-        crossorigin="anonymous"
-    />
     <link
         rel="preload"
         href="/assets/fonts/inter-v20-latin-500.woff2"

src/routes/privacy-policy/+page.svelte

@@ -50,7 +50,9 @@
                     <h2 id={`${section.id}-heading`}>{section.heading}</h2>
                     {#each section.body as para}
                         <p>
-                            {#if section.id === 'contact' && para === 'legal@mifi.ventures'}
+                            {#if section.id === 'contact' && para === 'mifi Ventures LLC'}
+                                <strong>{para}</strong>
+                            {:else if section.id === 'contact' && para === 'legal@mifi.ventures'}
                                 <a href="mailto:legal@mifi.ventures"
                                     >legal@mifi.ventures</a
                                 >

src/routes/terms-of-service/+page.svelte

@@ -28,7 +28,9 @@
                     <h2 id={`${section.id}-heading`}>{section.heading}</h2>
                     {#each section.body as para}
                         <p>
-                            {#if section.id === 'contact' && para === 'legal@mifi.ventures'}
+                            {#if section.id === 'contact' && para === 'mifi Ventures LLC'}
+                                <strong>{para}</strong>
+                            {:else if section.id === 'contact' && para === 'legal@mifi.ventures'}
                                 <a href="mailto:legal@mifi.ventures"
                                     >legal@mifi.ventures</a
                                 >

static/404.html

@@ -1,20 +1,66 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+    <head>
-    <meta charset="utf-8">
+        <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>404 Not Found — mifi Ventures</title>
+        <link
-    <meta name="theme-color" content="#0052cc" media="(prefers-color-scheme: light)">
+            rel="preload"
-    <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)">
+            href="/assets/fonts/fraunces-v38-latin-600.woff2"
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+            as="font"
-    <link rel="stylesheet" href="/assets/error-pages.css">
+            type="font/woff2"
-</head>
+            crossorigin="anonymous"
-<body class="error-page">
+        />
-    <main>
+        <link
-        <div class="emoji" aria-hidden="true">🔍</div>
+            rel="preload"
-        <h1>404 Not Found</h1>
+            href="/assets/fonts/inter-v20-latin-regular.woff2"
-        <p>This page went off to find itself. We’re not sure it’s coming back.</p>
+            as="font"
-        <p><a href="/">Back to mifi Ventures →</a></p>
+            type="font/woff2"
-    </main>
+            crossorigin="anonymous"
-</body>
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-500.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-600.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-700.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/fraunces-v38-latin-700.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <title>404 Not Found — mifi Ventures</title>
+        <meta
+            name="theme-color"
+            content="#0052cc"
+            media="(prefers-color-scheme: light)"
+        />
+        <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="stylesheet" href="/assets/error-pages.css" />
+    </head>
+    <body class="error-page">
+        <main>
+            <div class="emoji" aria-hidden="true">🔍</div>
+            <h1 data-testid="404-title">404 Not Found</h1>
+            <p>This page went off to find itself. We’re not sure it’s coming back.</p>
+            <p><a href="/">Back to mifi Ventures →</a></p>
+        </main>
+    </body>
 </html>

static/410.html

@@ -1,20 +1,66 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+    <head>
-    <meta charset="utf-8">
+        <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>410 Gone — mifi Ventures</title>
+        <link
-    <meta name="theme-color" content="#0052cc" media="(prefers-color-scheme: light)">
+            rel="preload"
-    <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)">
+            href="/assets/fonts/fraunces-v38-latin-600.woff2"
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+            as="font"
-    <link rel="stylesheet" href="/assets/error-pages.css">
+            type="font/woff2"
-</head>
+            crossorigin="anonymous"
-<body class="error-page">
+        />
-    <main>
+        <link
-        <div class="emoji" aria-hidden="true">👋</div>
+            rel="preload"
-        <h1>410 Gone</h1>
+            href="/assets/fonts/inter-v20-latin-regular.woff2"
-        <p>This page has left the building. We’ve moved on—and so should you.</p>
+            as="font"
-        <p><a href="/">Back to mifi Ventures →</a></p>
+            type="font/woff2"
-    </main>
+            crossorigin="anonymous"
-</body>
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-500.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-600.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-700.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/fraunces-v38-latin-700.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <title>410 Gone — mifi Ventures</title>
+        <meta
+            name="theme-color"
+            content="#0052cc"
+            media="(prefers-color-scheme: light)"
+        />
+        <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="stylesheet" href="/assets/error-pages.css" />
+    </head>
+    <body class="error-page">
+        <main>
+            <div class="emoji" aria-hidden="true">👋</div>
+            <h1 data-testid="410-title">410 Gone</h1>
+            <p>This page has left the building. We’ve moved on—and so should you.</p>
+            <p><a href="/">Back to mifi Ventures →</a></p>
+        </main>
+    </body>
 </html>

static/assets/error-pages.css

@@ -32,28 +32,47 @@
 }
 
 /* Local fonts — same paths as +layout.svelte preloads */
+
 @font-face {
-    font-family: 'Inter';
+    font-family: Inter;
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
 }
+
 @font-face {
-    font-family: 'Inter';
+    font-family: Inter;
     font-style: normal;
     font-weight: 500;
     font-display: swap;
     src: url('/assets/fonts/inter-v20-latin-500.woff2') format('woff2');
 }
+
 @font-face {
-    font-family: 'Fraunces';
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-700.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Fraunces;
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url('/assets/fonts/fraunces-v38-latin-600.woff2') format('woff2');
 }
 
+@font-face {
+    font-family: Fraunces;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/assets/fonts/fraunces-v38-latin-700.woff2') format('woff2');
+}
+
 /* Error page layout */
 .error-page {
     margin: 0;
@@ -67,15 +86,18 @@
     color: var(--ep-text);
     background-color: var(--ep-bg-alt);
 }
+
 .error-page main {
     text-align: center;
     padding: 2rem 1.5rem;
     max-width: 28rem;
 }
+
 .error-page .emoji {
     font-size: 4rem;
     margin-bottom: 0.5rem;
 }
+
 .error-page h1 {
     font-family: var(--ep-font-heading);
     font-size: 2rem;
@@ -83,19 +105,23 @@
     margin: 0 0 0.75rem;
     color: var(--ep-text);
 }
+
 .error-page p {
     margin: 0 0 1.5rem;
     color: var(--ep-text-secondary);
 }
+
 .error-page a {
     color: var(--ep-primary);
     font-weight: 500;
     text-decoration: none;
 }
+
 .error-page a:hover {
     color: var(--ep-primary-hover);
     text-decoration: underline;
 }
+
 .error-page a:focus-visible {
     outline: 2px solid var(--ep-primary);
     outline-offset: 2px;

static/assets/js/cookie-consent.js

@@ -11,6 +11,43 @@
     var BANNER_VISIBLE_CLASS = 'is-visible';
     var hasLoadedThirdParty = false;
 
+    // Trusted Types support (for CSP `require-trusted-types-for 'script'`)
+    // Clarity's tag script looks up window.trustedTypePolicies[policyName] to load its inner script;
+    // we must expose the policy there for Safari (and other browsers) to avoid TT violations.
+    var ttPolicy = null;
+    try {
+        if (
+            window.trustedTypes &&
+            typeof window.trustedTypes.createPolicy === 'function'
+        ) {
+            ttPolicy = window.trustedTypes.createPolicy('mifi-ventures-policy', {
+                createScriptURL: function (url) {
+                    return url;
+                },
+            });
+
+            if (ttPolicy && !window.trustedTypePolicies) {
+                window.trustedTypePolicies = {};
+            }
+
+            if (ttPolicy) {
+                window.trustedTypePolicies['mifi-ventures-policy'] = ttPolicy;
+            }
+        }
+    } catch (_) {
+        ttPolicy = null;
+    }
+
+    function setScriptSrc(el, url) {
+        if (!el) return;
+        if (ttPolicy) {
+            // When Trusted Types are enforced, wrap URLs via our policy
+            el.src = ttPolicy.createScriptURL(url);
+        } else {
+            el.src = url;
+        }
+    }
+
     function loadThirdPartyAnalytics() {
         if (hasLoadedThirdParty) return;
         hasLoadedThirdParty = true;
@@ -19,14 +56,16 @@
         try {
             var gtagScript = document.createElement('script');
             gtagScript.async = true;
-            gtagScript.src =
+            setScriptSrc(
-                'https://www.googletagmanager.com/gtag/js?id=G-36F29PDKRT';
+                gtagScript,
+                'https://www.googletagmanager.com/gtag/js?id=G-36F29PDKRT',
+            );
 
             gtagScript.onload = function () {
                 // Load the existing ga-init.js helper once gtag is ready
                 var gaInit = document.createElement('script');
                 gaInit.defer = true;
-                gaInit.src = '/assets/js/ga-init.js';
+                setScriptSrc(gaInit, '/assets/js/ga-init.js');
                 document.head.appendChild(gaInit);
             };
 
@@ -36,12 +75,29 @@
             console.error('Failed to load Google Analytics', e);
         }
 
-        // Microsoft Clarity
+        // Microsoft Clarity – use the official loader snippet so that
+        // window.clarity is defined before the tag script runs.
         try {
-            var clarityScript = document.createElement('script');
+            (function (c, l, a, r, i, t, y) {
-            clarityScript.defer = true;
+                c[a] =
-            clarityScript.src = 'https://www.clarity.ms/tag/vuo5q3yf79?ref=bwt';
+                    c[a] ||
-            document.head.appendChild(clarityScript);
+                    function () {
+                        (c[a].q = c[a].q || []).push(arguments);
+                    };
+                t = l.createElement(r);
+                t.async = 1;
+                setScriptSrc(
+                    t,
+                    `https://www.clarity.ms/tag/${i}?trustedTypes=mifi-ventures-policy`,
+                );
+                y = l.getElementsByTagName(r)[0];
+                y.parentNode.insertBefore(t, y);
+            })(window, document, 'clarity', 'script', 'vuo5q3yf79');
+
+            window.clarity('consentv2', {
+                ad_Storage: 'granted',
+                analytics_Storage: 'granted',
+            });
         } catch (e2) {
             console.error('Failed to load Microsoft Clarity', e2);
         }
@@ -110,4 +166,3 @@
         init();
     }
 })();
-

static/assets/js/copyright-year.js

@@ -1,5 +1,5 @@
 (function () {
-  'use strict';
+    'use strict';
-  var el = document.getElementById('copyright-year');
+    var el = document.getElementById('copyright-year');
-  if (el) el.textContent = new Date().getFullYear();
+    if (el) el.textContent = new Date().getFullYear();
 })();

static/assets/js/ga-init.js

@@ -1,8 +1,10 @@
 window.dataLayer = window.dataLayer || [];
-function gtag(){ window.dataLayer.push(arguments); }
+function gtag() {
+    window.dataLayer.push(arguments);
+}
 
-gtag("js", new Date());
+gtag('js', new Date());
-gtag("config", "G-36F29PDKRT", {
+gtag('config', 'G-36F29PDKRT', {
     // optional, but often helpful:
     anonymize_ip: true,
 });

static/assets/js/mobile-menu-helper.js

@@ -1,8 +1,7 @@
 const MOBILE_BREAKPOINT_PX = 768;
 
 /** All focusable elements inside the menu (links). */
-const getMenuFocusables = (menu) =>
+const getMenuFocusables = (menu) => menu.querySelectorAll('a[href]');
-    menu.querySelectorAll('a[href]');
 
 const mobileMenuHelper = () => {
     const mobileMenu = document.getElementById('nav-menu');
@@ -15,10 +14,7 @@ const mobileMenuHelper = () => {
     const syncMenuAriaHidden = () => {
         if (isMobile()) {
             const hidden = !mobileMenuToggle.checked;
-            mobileMenu.setAttribute(
+            mobileMenu.setAttribute('aria-hidden', hidden ? 'true' : 'false');
-                'aria-hidden',
-                hidden ? 'true' : 'false',
-            );
             // inert removes the subtree from the a11y tree and makes descendants non-focusable
             if (hidden) {
                 mobileMenu.setAttribute('inert', '');

static/assets/js/umami-helper.js

@@ -1,9 +1,6 @@
 // Umami: safe track (no-op if script blocked or not loaded)
 function umamiTrack(name, data) {
-    if (
+    if (typeof window.umami !== 'undefined' && typeof window.umami.track === 'function') {
-        typeof window.umami !== 'undefined' &&
-        typeof window.umami.track === 'function'
-    ) {
         if (data != null) window.umami.track(name, data);
         else window.umami.track(name);
     }

tests/unit/cookie-consent.test.ts

@@ -39,7 +39,6 @@ describe('cookie-consent.js', () => {
         dom = createBannerDOM();
 
         const code = readFileSync(SCRIPT_PATH, 'utf8');
-        // eslint-disable-next-line no-eval
         eval(code);
         document.dispatchEvent(new Event('DOMContentLoaded'));
     });
@@ -62,7 +61,6 @@ describe('cookie-consent.js', () => {
         const appendChildSpy = vi.spyOn(document.head, 'appendChild');
 
         const code = readFileSync(SCRIPT_PATH, 'utf8');
-        // eslint-disable-next-line no-eval
         eval(code);
         document.dispatchEvent(new Event('DOMContentLoaded'));
 
@@ -82,7 +80,6 @@ describe('cookie-consent.js', () => {
         const appendChildSpy = vi.spyOn(document.head, 'appendChild');
 
         const code = readFileSync(SCRIPT_PATH, 'utf8');
-        // eslint-disable-next-line no-eval
         eval(code);
         document.dispatchEvent(new Event('DOMContentLoaded'));
 

tests/visual.spec.ts

@@ -140,4 +140,16 @@ test.describe('visual regression', () => {
         await expect(page.locator('#cookie-banner')).not.toBeVisible();
         await expect(page).toHaveScreenshot('terms-of-service.png', { fullPage: true });
     });
+
+    test('404 page matches snapshot', async ({ page }) => {
+        await page.goto('/404');
+        await expect(page).toHaveTitle(/404 | mifi Ventures/);
+        await expect(page).toHaveScreenshot('404.png', { fullPage: true });
+    });
+
+    test('410 page matches snapshot', async ({ page }) => { 
+        await page.goto('/410');
+        await expect(page).toHaveTitle(/410 | mifi Ventures/);
+        await expect(page).toHaveScreenshot('410.png', { fullPage: true });
+    });
 });