cookies: popup-banner (implicit samtykke, huskes i localStorage) + /cookies-side + footer-link

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/CookieBanner.astro

@@ -0,0 +1,45 @@
+---
+// Lille cookie-popup: vises 1. gang man besøger siden, huskes derefter i localStorage.
+// Implicit samtykke — ved at bruge siden accepterer man cookies (samme tekst på /cookies).
+---
+<div
+  id="cookie-banner"
+  hidden
+  class="fixed inset-x-0 bottom-0 z-[60] px-4 pb-4"
+  role="dialog"
+  aria-live="polite"
+  aria-label="Cookie-besked"
+>
+  <div class="mx-auto flex max-w-3xl flex-col gap-3 rounded-2xl border border-border bg-surface/95 p-4 shadow-xl backdrop-blur sm:flex-row sm:items-center sm:justify-between">
+    <p class="text-sm text-muted">
+      Denne side bruger cookies til at forbedre din oplevelse og lave anonym statistik over besøg.
+      Ved at bruge siden accepterer du det. <a href="/cookies" class="text-accent underline">Læs mere</a>.
+    </p>
+    <button
+      id="cookie-ok"
+      class="shrink-0 self-start rounded-xl bg-accent px-5 py-2 text-sm font-medium text-bg transition-transform hover:-translate-y-0.5 sm:self-auto"
+    >OK</button>
+  </div>
+</div>
+
+<script is:inline>
+  (function () {
+    var KEY = 'wec_cookie_ack';
+    function wire() {
+      var b = document.getElementById('cookie-banner');
+      if (!b) return;
+      try { if (localStorage.getItem(KEY)) { b.hidden = true; return; } } catch (_) {}
+      b.hidden = false;
+      var ok = document.getElementById('cookie-ok');
+      if (ok && !ok.__wired) {
+        ok.__wired = true;
+        ok.addEventListener('click', function () {
+          try { localStorage.setItem(KEY, '1'); } catch (_) {}
+          b.hidden = true;
+        });
+      }
+    }
+    wire();
+    document.addEventListener('astro:page-load', wire);
+  })();
+</script>

src/components/Footer.astro

@@ -15,6 +15,7 @@ const year = new Date().getFullYear();
       <a class="transition-colors hover:text-accent" href="/rss.xml">RSS</a>
       <a class="transition-colors hover:text-accent" href="/uses">Uses</a>
       <a class="transition-colors hover:text-accent" href="/colophon">Kolofon</a>
+      <a class="transition-colors hover:text-accent" href="/cookies">Cookies</a>
     </div>
   </div>
 </footer>

src/layouts/Base.astro

@@ -4,6 +4,7 @@ import Head from '../components/Head.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 import Palette from '../components/Palette.astro';
+import CookieBanner from '../components/CookieBanner.astro';
 import { SITE } from '../consts';
 import '../styles/global.css';
 interface Props {
@@ -63,6 +64,7 @@ const { title, description, image, type, publishedTime, modifiedTime, tags, json
     </main>
     <Footer />
     <Palette />
+    <CookieBanner />
     <script is:inline>
       // Konami-koden: ↑↑↓↓←→←→BA → terminal-tema + en lille rulle. En klassiker skal æres.
       (() => {

src/pages/cookies.astro

@@ -0,0 +1,43 @@
+---
+import Base from '../layouts/Base.astro';
+---
+<Base title="Cookies" description="Hvilke cookies asger.weirsøe.dk bruger, og hvad de bruges til.">
+  <h1 class="text-4xl font-bold tracking-tight">Cookies</h1>
+  <p class="mt-4 max-w-2xl text-muted">
+    Denne side bruger cookies til at forbedre din oplevelse og lave anonym statistik over,
+    hvordan siden bruges. <strong class="text-text">Ved at bruge siden accepterer du, at der
+    sættes cookies.</strong> Du kan altid slette dem igen i din browser.
+  </p>
+
+  <h2 class="mt-10 text-2xl font-bold tracking-tight">Hvad bruger vi dem til?</h2>
+  <div class="mt-5 grid gap-4">
+    <div class="rounded-2xl border border-border bg-surface/60 p-5">
+      <h3 class="font-semibold tracking-tight">Statistik &amp; analyse</h3>
+      <p class="mt-2 text-sm text-muted">
+        Jeg bruger <strong class="text-text">Matomo</strong> til at se hvor mange der besøger siden,
+        og hvordan den bruges, så jeg kan gøre den bedre. Matomo kører på mine egne servere — dine
+        data bliver <strong class="text-text">ikke delt med tredjeparter</strong> og ikke solgt.
+      </p>
+      <ul class="mt-3 space-y-1 text-sm text-muted">
+        <li><code class="rounded bg-surface-2 px-1.5 py-0.5">_pk_id</code> — et tilfældigt id der tæller dig som samme besøgende over tid (op til 1 år).</li>
+        <li><code class="rounded bg-surface-2 px-1.5 py-0.5">_pk_ses</code> — markerer dit aktuelle besøg (udløber efter ca. 30 minutter).</li>
+        <li><code class="rounded bg-surface-2 px-1.5 py-0.5">WEC_VID</code> — et tilsvarende besøgs-id på mine egne tjenester.</li>
+      </ul>
+    </div>
+
+    <div class="rounded-2xl border border-border bg-surface/60 p-5">
+      <h3 class="font-semibold tracking-tight">Funktionelt</h3>
+      <p class="mt-2 text-sm text-muted">
+        Husker dine valg på siden. Det er ikke sporing, og det forlader aldrig din browser.
+      </p>
+      <ul class="mt-3 space-y-1 text-sm text-muted">
+        <li><code class="rounded bg-surface-2 px-1.5 py-0.5">theme</code> — dit valgte tema (lyst/mørkt/terminal).</li>
+        <li><code class="rounded bg-surface-2 px-1.5 py-0.5">wec_cookie_ack</code> — husker at du har set denne cookie-besked, så den ikke dukker op igen.</li>
+      </ul>
+    </div>
+  </div>
+
+  <p class="mt-8 text-sm text-muted">
+    Spørgsmål? Skriv til <a href="mailto:asger@weirsoe.dk" class="text-accent underline">asger@weirsoe.dk</a>.
+  </p>
+</Base>

src/pages/search-index.json.js

@@ -15,6 +15,7 @@ export async function GET() {
     { type: 'page', title: 'Now', url: '/now' },
     { type: 'page', title: 'Uses', url: '/uses' },
     { type: 'page', title: 'Kolofon', url: '/colophon' },
+    { type: 'page', title: 'Cookies', url: '/cookies' },
     ...posts
       .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
       .map((p) => ({