Add Google Analytics G-LL4RX9KM6Q with cookie consent

docs/.vitepress/env.d.ts

@@ -1,2 +1,7 @@
 declare const __EDIT_REPO__: string;
 declare const __EDIT_BRANCH__: string;
+
+interface Window {
+  dataLayer: any[];
+  gtag: (...args: any[]) => void;
+}

docs/.vitepress/theme/Layout.vue

@@ -2,6 +2,7 @@
 import { useData } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import NotFound from './NotFound.vue'
+import CookieConsent from './components/CookieConsent.vue'
 
 const { Layout } = DefaultTheme
 const { frontmatter } = useData()
@@ -18,5 +19,8 @@ const { frontmatter } = useData()
     <template #not-found>
       <NotFound />
     </template>
+    <template #layout-bottom>
+      <CookieConsent />
+    </template>
   </Layout>
 </template>

docs/.vitepress/theme/components/CookieConsent.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const GA_MEASUREMENT_ID = 'G-LL4RX9KM6Q'
+const CONSENT_KEY = 'mume_cookie_consent'
+
+const showBanner = ref(false)
+
+function initGtag() {
+  if (typeof window === 'undefined') return
+  window.dataLayer = window.dataLayer || []
+  if (!window.gtag) {
+    window.gtag = function () {
+      window.dataLayer.push(arguments)
+    }
+  }
+}
+
+function loadGtagScript() {
+  if (typeof window === 'undefined') return
+  if (document.getElementById('gtag-js')) return
+
+  const script = document.createElement('script')
+  script.id = 'gtag-js'
+  script.async = true
+  script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`
+  document.head.appendChild(script)
+}
+
+function setConsent(granted: boolean) {
+  initGtag()
+  const consentState = granted ? 'granted' : 'denied'
+
+  window.gtag('consent', 'update', {
+    analytics_storage: consentState,
+    ad_storage: consentState,
+    ad_user_data: consentState,
+    ad_personalization: consentState,
+  })
+
+  if (granted) {
+    loadGtagScript()
+    window.gtag('js', new Date())
+    window.gtag('config', GA_MEASUREMENT_ID, {
+      anonymize_ip: true,
+      allow_google_signals: false,
+    })
+  }
+}
+
+onMounted(() => {
+  initGtag()
+
+  // Default consent mode v2 to denied prior to user action
+  window.gtag('consent', 'default', {
+    analytics_storage: 'denied',
+    ad_storage: 'denied',
+    ad_user_data: 'denied',
+    ad_personalization: 'denied',
+  })
+
+  const getStoredConsent = (): string | null => {
+    try {
+      const ls = localStorage.getItem(CONSENT_KEY)
+      if (ls === 'granted' || ls === 'denied') return ls
+    } catch {}
+    const match = document.cookie.match(new RegExp('(?:^|; )' + CONSENT_KEY + '=([^;]*)'))
+    if (!match) return null
+    try {
+      return decodeURIComponent(match[1])
+    } catch {
+      return null
+    }
+  }
+
+  const savedConsent = getStoredConsent()
+  if (savedConsent === 'granted') {
+    setConsent(true)
+  } else if (savedConsent === 'denied') {
+    setConsent(false)
+  } else {
+    showBanner.value = true
+  }
+})
+
+function saveConsentPreference(value: string) {
+  try {
+    localStorage.setItem(CONSENT_KEY, value)
+  } catch {}
+  document.cookie = `${CONSENT_KEY}=${value}; path=/; max-age=31536000; SameSite=Lax`
+}
+
+function accept() {
+  saveConsentPreference('granted')
+  setConsent(true)
+  showBanner.value = false
+}
+
+function decline() {
+  saveConsentPreference('denied')
+  setConsent(false)
+  showBanner.value = false
+}
+</script>
+
+<template>
+  <Transition name="fade">
+    <div v-if="showBanner" class="cookie-consent-banner" role="dialog" aria-label="Cookie Consent">
+      <div class="cookie-consent-content">
+        <p class="cookie-consent-text">
+          We use cookies and Google Analytics to understand site usage and improve your experience.
+        </p>
+        <div class="cookie-consent-actions">
+          <button class="cookie-btn cookie-btn-decline" @click="decline">Decline</button>
+          <button class="cookie-btn cookie-btn-accept" @click="accept">Accept</button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.cookie-consent-banner {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 200;
+  max-width: 420px;
+  width: calc(100% - 3rem);
+  padding: 1.25rem;
+  border-radius: 12px;
+  background-color: var(--vp-c-bg-elv);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--vp-c-divider);
+  box-shadow: var(--vp-shadow-3);
+  font-family: var(--vp-font-family-base);
+}
+
+@media (max-width: 640px) {
+  .cookie-consent-banner {
+    bottom: 1rem;
+    right: 1rem;
+    left: 1rem;
+    width: auto;
+    padding: 1rem;
+  }
+}
+
+.cookie-consent-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.cookie-consent-text {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: var(--vp-c-text-1);
+}
+
+.cookie-consent-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.cookie-btn {
+  padding: 0.4rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.cookie-btn-decline {
+  background-color: transparent;
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.cookie-btn-decline:hover {
+  background-color: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+}
+
+.cookie-btn-accept {
+  background-color: var(--vp-c-brand-1);
+  color: var(--vp-c-white);
+  border: 1px solid var(--vp-c-brand-1);
+}
+
+.cookie-btn-accept:hover {
+  background-color: var(--vp-c-brand-2);
+  border-color: var(--vp-c-brand-2);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -1,17 +1,22 @@
+import { nextTick } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import Layout from './Layout.vue'
 import NotFound from './NotFound.vue'
 import ImageMap from './components/ImageMap.vue'
 import StubNotice from './components/StubNotice.vue'
+import CookieConsent from './components/CookieConsent.vue'
 import './style.css'
 
+const GA_MEASUREMENT_ID = 'G-LL4RX9KM6Q'
+
 export default {
   extends: DefaultTheme,
   Layout: Layout,
   enhanceApp({ app, router }) {
     app.component('ImageMap', ImageMap)
     app.component('NotFound', NotFound)
     app.component('StubNotice', StubNotice)
+    app.component('CookieConsent', CookieConsent)
 
     // Handle 404 redirection from public/404.html shim
     if (typeof window !== 'undefined') {
@@ -25,6 +30,22 @@ export default {
           router.go(redirectedPath)
         }
       }
+
+      // Track page views on route change in SPA mode
+      if (router) {
+        router.onAfterRouteChange = (to) => {
+          nextTick(() => {
+            if (typeof window.gtag === 'function') {
+              window.gtag('event', 'page_view', {
+                page_title: document.title,
+                page_location: window.location.href,
+                page_path: to,
+                send_to: GA_MEASUREMENT_ID,
+              })
+            }
+          })
+        }
+      }
     }
   }
 }

tests/consent.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('Cookie Consent Banner', () => {
+  test('displays banner on desktop and allows accepting', async ({ page }) => {
+    await page.goto('http://localhost:3000/wiki/')
+    const banner = page.locator('.cookie-consent-banner')
+    await expect(banner).toBeVisible()
+
+    const acceptBtn = page.locator('.cookie-btn-accept')
+    await expect(acceptBtn).toBeVisible()
+    await acceptBtn.click()
+
+    await expect(banner).not.toBeVisible()
+
+    const consent = await page.evaluate(() => localStorage.getItem('mume_cookie_consent'))
+    expect(consent).toBe('granted')
+  })
+
+  test('displays correctly on mobile viewport', async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 })
+    await page.goto('http://localhost:3000/wiki/')
+    const banner = page.locator('.cookie-consent-banner')
+    await expect(banner).toBeVisible()
+
+    const declineBtn = page.locator('.cookie-btn-decline')
+    await expect(declineBtn).toBeVisible()
+    await declineBtn.click()
+
+    await expect(banner).not.toBeVisible()
+
+    const consent = await page.evaluate(() => localStorage.getItem('mume_cookie_consent'))
+    expect(consent).toBe('denied')
+  })
+})