sider: /uses + /colophon (stak og homelab) + footer-links

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

src/components/Footer.astro

@@ -3,13 +3,15 @@ import { SOCIALS, SITE } from '../consts';
 const year = new Date().getFullYear();
 ---
 <footer class="mt-24 border-t border-border/70">
-  <div class="mx-auto flex max-w-3xl flex-col items-center gap-3 px-5 py-10 text-sm text-muted sm:flex-row sm:justify-between">
+  <div class="mx-auto flex max-w-3xl flex-col items-center gap-3 px-5 py-6 text-sm text-muted sm:flex-row sm:justify-between">
     <p>© {year} {SITE.name}</p>
-    <div class="flex gap-4">
+    <div class="flex flex-wrap justify-center gap-4">
       {SOCIALS.map((s) => (
         <a class="transition-colors hover:text-accent" href={s.href} rel="me noopener" target="_blank">{s.label}</a>
       ))}
       <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>
     </div>
   </div>
 </footer>

src/pages/colophon.astro

@@ -0,0 +1,50 @@
+---
+import Base from '../layouts/Base.astro';
+
+const stack = [
+  { k: 'Generator', v: 'Astro 5 — statisk output, view transitions, content collections til bloggen' },
+  { k: 'Runtime', v: 'Bun (build og dev)' },
+  { k: 'CSS', v: 'Tailwind 4 med egne design-tokens; dark/light sat pre-paint uden flash' },
+  { k: 'Typografi', v: 'Inter Variable, self-hosted woff2 (ingen Google Fonts-kald)' },
+  { k: 'JS i browseren', v: 'Ingen frameworks. Lidt vanilla til tema-toggle, paletten og service workeren' },
+  { k: 'PWA', v: 'Workbox service worker — siden virker offline og kan installeres' },
+  { k: 'Kommentarer', v: 'Comentario, self-hosted, login via min egen Authentik' },
+  { k: 'Analytics', v: 'Matomo, self-hosted og first-party — ingen tredjeparts-trackere' },
+  { k: 'Hosting', v: 'Alpine LXC med nginx på min egen Proxmox-node, bag NPMplus som edge' },
+  { k: 'CI/CD', v: 'Gitea Actions på egne runnere: push til master → build → atomisk swap af webroot' },
+  { k: 'Struktureret data', v: 'JSON-LD: Person, ProfilePage, FAQ, BlogPosting, BreadcrumbList — plus llms.txt til LLM’er' },
+];
+---
+<Base title="Kolofon" description="Hvordan denne side er bygget: Astro, Bun, Tailwind, self-hosted alt — og ingen JS-frameworks.">
+  <h1 class="text-4xl font-bold tracking-tight">Kolofon</h1>
+  <p class="mt-4 max-w-2xl text-muted">
+    Hele kæden fra commit til din skærm kører på udstyr jeg selv drifter. Ingen CDN’er,
+    ingen tredjeparts-fonts, ingen eksterne trackere.. bare en statisk side der gør hvad den får besked på.
+  </p>
+
+  <div class="mt-8 overflow-hidden rounded-2xl border border-border">
+    <table class="w-full text-sm">
+      <tbody>
+        {stack.map((row) => (
+          <tr class="border-b border-border/60 last:border-0">
+            <td class="w-40 bg-surface/60 px-4 py-3 font-semibold align-top">{row.k}</td>
+            <td class="px-4 py-3 text-muted">{row.v}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+
+  <section class="mt-10">
+    <h2 class="text-sm font-semibold uppercase tracking-widest text-accent">Sikkerhed</h2>
+    <p class="mt-3 max-w-2xl text-sm text-muted">
+      Fundet noget der ser forkert ud? Skriv til <a class="text-accent hover:underline" href="mailto:asger@weircon.dk">asger@weircon.dk</a>
+      — der ligger også en <a class="text-accent hover:underline" href="/.well-known/security.txt">security.txt</a> (RFC 9116).
+      Og ja, der er en <a class="text-accent hover:underline" href="/humans.txt">humans.txt</a> til de nysgerrige.
+    </p>
+  </section>
+
+  <p class="mt-10 text-sm text-muted">
+    Hvad der ellers kører i racket: se <a class="text-accent hover:underline" href="/uses">uses</a>.
+  </p>
+</Base>

src/pages/uses.astro

@@ -0,0 +1,58 @@
+---
+import Base from '../layouts/Base.astro';
+
+const sections = [
+  {
+    title: 'Homelab',
+    items: [
+      { name: 'Proxmox VE', note: 'Hypervisor på egen hardware. ~50 LXC-containere og et par KVM-VM’er — én tjeneste pr. container.' },
+      { name: 'NPMplus', note: 'Reverse proxy og TLS-terminering på kanten. Alt trafik ind går her igennem.' },
+      { name: 'Authentik', note: 'Self-hosted SSO (OIDC/LDAP). Én identitet til alle tjenester — bygget fra source.' },
+      { name: 'Gitea + Gitea Actions', note: 'Egen git-hosting og CI/CD. Denne side deployes automatisk ved push.' },
+      { name: 'MariaDB / Redis / PostgreSQL', note: 'Databaser som dedikerede containere, host-pinned brugere og det hele.' },
+      { name: 'Matomo', note: 'Self-hosted analytics, first-party og uden tredjeparter.' },
+      { name: 'WireGuard', note: 'Tunneler og netns-baserede egress-profiler til alt der skal ud af huset på en pæn måde.' },
+    ],
+  },
+  {
+    title: 'Udvikling',
+    items: [
+      { name: 'Linux + code-server', note: 'Udvikling foregår i en dedikeret LXC med VS Code i browseren.' },
+      { name: 'Java · Go · Python · TypeScript', note: 'Arbejdshestene. Java til Peppol/eDelivery-verdenen, Python/TS til alt det andet.' },
+      { name: 'Claude Code', note: 'LLM-drevne workflows — fra blogindlæg til Proxmox-administration.' },
+      { name: 'Docker', note: 'Hvor det giver mening. Ellers foretrækker jeg native installationer i LXC.' },
+    ],
+  },
+  {
+    title: 'Denne side',
+    items: [
+      { name: 'Astro 5 + Bun + Tailwind 4', note: 'Statisk output, ingen JS-frameworks i browseren. Se kolofonen for detaljer.' },
+    ],
+  },
+];
+---
+<Base title="Uses" description="Hardware, software og selvhostede tjenester bag mit homelab og denne side.">
+  <h1 class="text-4xl font-bold tracking-tight">Uses</h1>
+  <p class="mt-4 max-w-2xl text-muted">
+    Inspireret af <a class="text-accent hover:underline" href="https://uses.tech" target="_blank" rel="noopener">uses.tech</a>:
+    det jeg faktisk bruger. Kort version: alt der kan selvhostes, bliver selvhostet.
+  </p>
+
+  {sections.map((s) => (
+    <section class="mt-10">
+      <h2 class="text-sm font-semibold uppercase tracking-widest text-accent">{s.title}</h2>
+      <div class="mt-4 space-y-3">
+        {s.items.map((it) => (
+          <div class="rounded-2xl border border-border bg-surface/60 p-4">
+            <span class="font-semibold">{it.name}</span>
+            <p class="mt-1 text-sm text-muted">{it.note}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  ))}
+
+  <p class="mt-10 text-sm text-muted">
+    Nysgerrig på hvordan siden selv er skruet sammen? Se <a class="text-accent hover:underline" href="/colophon">kolofonen</a>.
+  </p>
+</Base>