Add Links page, collection, and nav entry

src/components/Nav.astro

@@ -12,6 +12,7 @@ const links = [
     { href: "/blog", label: "blog" },
     { href: "/coffee", label: "coffee" },
     { href: "/library", label: "library" },
+    { href: "/links", label: "links" },
     { href: "/ai", label: "ai" },
     { href: "/changelog", label: "changelog" },
 ];

src/content/config.ts

@@ -29,4 +29,16 @@ const coffee = defineCollection({
     }),
 });
 
-export const collections = { blog, coffee };
+const links = defineCollection({
+    type: "content",
+    schema: z.object({
+        title: z.string(),
+        url: z.string().url(),
+        description: z.string(),
+        category: z.string().optional(),
+        date: z.coerce.date().optional(),
+        draft: z.boolean().optional().default(false),
+    }),
+});
+
+export const collections = { blog, coffee, links };

src/content/links/32bit-cafe.md

@@ -0,0 +1,8 @@
+---
+title: "32-Bit Cafe"
+url: "https://32bit.cafe"
+description: "A warm small-web corner full of personal pages, guides, and gentle encouragement to make something of your own on the internet."
+category: "inspiration"
+date: 2026-03-06
+draft: false
+---

src/content/links/indieweb.md

@@ -0,0 +1,8 @@
+---
+title: "IndieWeb"
+url: "https://indieweb.org"
+description: "A lot of the values behind Hidden Den rhyme with this community: personal sites, ownership, and a web made of real places instead of only platforms."
+category: "blogs"
+date: 2026-03-07
+draft: false
+---

src/content/links/low-tech-magazine.md

@@ -0,0 +1,8 @@
+---
+title: "Low-tech Magazine"
+url: "https://solar.lowtechmagazine.com"
+description: "Thoughtful writing about technology, infrastructure, energy, and limits. It is one of those rare places that feels both technical and deeply reflective."
+category: "essays"
+date: 2026-03-04
+draft: false
+---

src/content/links/privacy-guides.md

@@ -0,0 +1,8 @@
+---
+title: "Privacy Guides"
+url: "https://www.privacyguides.org"
+description: "One of the more practical places for thinking about privacy tools without drifting too far into paranoia or purity spirals."
+category: "tools"
+date: 2026-03-05
+draft: false
+---

src/content/links/the-marginalian.md

@@ -0,0 +1,8 @@
+---
+title: "The Marginalian"
+url: "https://www.themarginalian.org"
+description: "A long-running archive of essays, ideas, and literary wandering. Good when I want to remember that thoughtful writing can still feel generous and alive."
+category: "essays"
+date: 2026-03-03
+draft: false
+---

src/pages/links.astro

@@ -0,0 +1,370 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import { getCollection } from "astro:content";
+
+const links = (await getCollection("links", ({ data }) => !data.draft)).map(
+    (entry) => ({
+        ...entry,
+        host: new URL(entry.data.url).hostname.replace(/^www\./, ""),
+    }),
+);
+
+const categoryOrder = [
+    "blogs",
+    "essays",
+    "tools",
+    "inspiration",
+    "music",
+    "infrastructure",
+];
+
+const compareLinks = (a: (typeof links)[number], b: (typeof links)[number]) => {
+    if (a.data.date && b.data.date) {
+        return b.data.date.valueOf() - a.data.date.valueOf();
+    }
+
+    if (a.data.date) return -1;
+    if (b.data.date) return 1;
+
+    return a.data.title.localeCompare(b.data.title);
+};
+
+const groupedLinks = Array.from(
+    links.reduce((groups, link) => {
+        const category = link.data.category ?? "uncategorized";
+        const current = groups.get(category) ?? [];
+
+        current.push(link);
+        groups.set(category, current);
+        return groups;
+    }, new Map<string, (typeof links)[number][]>()),
+).sort(([a], [b]) => {
+    const leftIndex = categoryOrder.indexOf(a);
+    const rightIndex = categoryOrder.indexOf(b);
+    const normalizedLeft =
+        leftIndex === -1 ? Number.MAX_SAFE_INTEGER : leftIndex;
+    const normalizedRight =
+        rightIndex === -1 ? Number.MAX_SAFE_INTEGER : rightIndex;
+
+    if (normalizedLeft !== normalizedRight) {
+        return normalizedLeft - normalizedRight;
+    }
+
+    return a.localeCompare(b);
+});
+
+for (const [, entries] of groupedLinks) {
+    entries.sort(compareLinks);
+}
+
+function formatCategory(category: string) {
+    if (category === "uncategorized") return "Elsewhere";
+    return category.replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+function formatDate(date?: Date) {
+    if (!date) return null;
+    return date.toISOString().split("T")[0];
+}
+---
+
+<BaseLayout
+    title="Links - Hidden Den Cafe"
+    description="A curated shelf of meaningful links: tools, writing, and corners of the web that resonate with Hidden Den."
+>
+    <div class="matrix-bg" aria-hidden="true"></div>
+
+    <main class="main">
+        <div class="container">
+            <header class="header fade-in">
+                <p class="eyebrow">A wider web</p>
+                <h1 class="title">Links</h1>
+                <div class="divider">==============================</div>
+                <p class="lead">
+                    This is a small cabinet of links that matter to me: tools,
+                    essays, communities, and other corners of the web that have
+                    influenced how I think about building places online. Not a
+                    giant bookmark dump, just a shelf of things worth sharing.
+                </p>
+            </header>
+
+            <div class="groups">
+                {
+                    groupedLinks.map(([category, entries]) => (
+                        <section
+                            class:list={["section", "fade-in"]}
+                            aria-labelledby={`group-${category}`}
+                        >
+                            <h2 id={`group-${category}`}>
+                                {formatCategory(category)}
+                            </h2>
+                            <ul class="link-list">
+                                {entries.map((entry) => (
+                                    <li class="link-item">
+                                        <article class="link-entry">
+                                            <h3>
+                                                <a
+                                                    href={entry.data.url}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                >
+                                                    {entry.data.title}
+                                                </a>
+                                            </h3>
+                                            <p class="link-meta">
+                                                <span>{entry.host}</span>
+                                                {formatDate(
+                                                    entry.data.date,
+                                                ) && (
+                                                    <>
+                                                        <span
+                                                            class="meta-sep"
+                                                            aria-hidden="true"
+                                                        >
+                                                            ·
+                                                        </span>
+                                                        <span>
+                                                            added{" "}
+                                                            {formatDate(
+                                                                entry.data.date,
+                                                            )}
+                                                        </span>
+                                                    </>
+                                                )}
+                                            </p>
+                                            <p class="link-desc">
+                                                {entry.data.description}
+                                            </p>
+                                        </article>
+                                    </li>
+                                ))}
+                            </ul>
+                        </section>
+                    ))
+                }
+            </div>
+
+            <footer class="footer fade-in">
+                <p>Made with love by Latte</p>
+            </footer>
+        </div>
+    </main>
+</BaseLayout>
+
+<style>
+    .matrix-bg {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        opacity: 0.03;
+        background:
+            linear-gradient(var(--color-accent) 1px, transparent 1px),
+            linear-gradient(90deg, var(--color-accent) 1px, transparent 1px);
+        background-size: 50px 50px;
+        animation: grid-move 20s linear infinite;
+    }
+
+    @keyframes grid-move {
+        0% {
+            transform: translate(0, 0);
+        }
+        100% {
+            transform: translate(50px, 50px);
+        }
+    }
+
+    .main {
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--space-lg) var(--space-md);
+        padding-top: calc(var(--space-lg) + 3rem);
+    }
+
+    .container {
+        max-width: 760px;
+        width: 100%;
+        background: var(--color-glass);
+        backdrop-filter: blur(10px);
+        border: 1px solid var(--color-surface);
+        border-radius: 8px;
+        padding: var(--space-xl);
+    }
+
+    .header {
+        text-align: center;
+        margin-bottom: var(--space-lg);
+    }
+
+    .eyebrow {
+        color: var(--color-text-dim);
+        text-transform: uppercase;
+        letter-spacing: 0.24em;
+        font-size: 0.75rem;
+        margin-bottom: var(--space-sm);
+    }
+
+    .title {
+        font-size: 2rem;
+        font-weight: 700;
+        letter-spacing: 2px;
+    }
+
+    .divider {
+        color: var(--color-surface);
+        text-align: center;
+        font-size: 0.75rem;
+        margin: var(--space-md) 0;
+        user-select: none;
+    }
+
+    .lead {
+        color: var(--color-text);
+        line-height: 1.8;
+        max-width: 42rem;
+        margin: 0 auto;
+    }
+
+    .groups {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xl);
+    }
+
+    .section h2 {
+        font-size: 1rem;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        margin-bottom: var(--space-md);
+        color: var(--color-accent);
+    }
+
+    .link-list {
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-md);
+    }
+
+    .link-entry {
+        padding-left: var(--space-md);
+        border-left: 1px solid
+            color-mix(in srgb, var(--color-surface) 75%, transparent);
+    }
+
+    .link-entry h3 {
+        font-size: 1rem;
+        margin-bottom: 0.2rem;
+    }
+
+    .link-entry h3 a {
+        color: var(--color-blue);
+    }
+
+    .link-entry h3 a:hover {
+        color: var(--color-accent-bright);
+    }
+
+    .link-meta {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        flex-wrap: wrap;
+        color: var(--color-text-dim);
+        font-size: 0.8rem;
+        margin-bottom: var(--space-xs);
+    }
+
+    .meta-sep {
+        color: var(--color-surface);
+    }
+
+    .link-desc {
+        color: var(--color-text-dim);
+        line-height: 1.7;
+        max-width: 44rem;
+    }
+
+    .footer {
+        margin-top: var(--space-xl);
+        text-align: center;
+    }
+
+    .footer p {
+        color: var(--color-text-dim);
+        font-size: 0.85rem;
+    }
+
+    .fade-in {
+        animation: fadeIn 0.6s ease-out forwards;
+        opacity: 0;
+    }
+
+    .fade-in:nth-child(1) {
+        animation-delay: 0.1s;
+    }
+
+    .fade-in:nth-child(2) {
+        animation-delay: 0.2s;
+    }
+
+    .fade-in:nth-child(3) {
+        animation-delay: 0.3s;
+    }
+
+    .fade-in:nth-child(4) {
+        animation-delay: 0.4s;
+    }
+
+    .fade-in:nth-child(5) {
+        animation-delay: 0.5s;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @media (max-width: 600px) {
+        .container {
+            padding: var(--space-md);
+        }
+
+        .title {
+            font-size: 1.5rem;
+        }
+
+        .divider {
+            font-size: 0.6rem;
+        }
+
+        .lead {
+            font-size: 0.95rem;
+        }
+
+        .link-entry {
+            padding-left: var(--space-sm);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .matrix-bg {
+            animation: none;
+        }
+
+        .fade-in {
+            animation: none;
+            opacity: 1;
+        }
+    }
+</style>