Merge pull request 'Add changelog link to navigation' (#50) from feat/site-changelog into dev

Reviewed-on: #50

src/components/Nav.astro

@@ -10,6 +10,7 @@ const links = [
     { href: "/now", label: "now" },
     { href: "/uses", label: "uses" },
     { href: "/blog", label: "blog" },
+    { href: "/changelog", label: "changelog" },
 ];
 
 function isActive(href: string, current: string): boolean {

src/pages/changelog.astro

@@ -0,0 +1,313 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+
+const changelogEntries = [
+    {
+        date: "2026-03-07",
+        changes: [
+            "Added this changelog page as a quiet logbook for how the den grows.",
+            "Published Coffee & Code #1 and added series support to the blog.",
+            "Published Things I Learned From Loving Deeply.",
+            "Added a Q&A page for the site's philosophy and tone.",
+            "Expanded the About page and added a gentler Start page for new visitors.",
+        ],
+    },
+    {
+        date: "2026-03-06",
+        changes: [
+            "Added the Now page as a living snapshot of current focus.",
+            "Added a Uses page for the tools, systems, and infrastructure behind the site.",
+            "Refined navigation and layout behavior to support a growing set of pages.",
+        ],
+    },
+    {
+        date: "2026-03-04",
+        changes: [
+            "Published After the Silence.",
+            "Polished the homepage avatar and project card interactions.",
+            "Added dedicated About and Projects pages, along with some nginx hardening.",
+        ],
+    },
+    {
+        date: "2026-03-01",
+        changes: [
+            "Published Welcome to the Den and Love Without Access.",
+            "Expanded the homepage with socials, age, and cryptographic keys.",
+            "Added repository workflows and supporting site infrastructure.",
+        ],
+    },
+    {
+        date: "2026-01-03",
+        changes: [
+            "Reshaped the site into a more personal page with a warmer identity.",
+            "Moved the project further away from a placeholder site and closer to Hidden Den as an actual home.",
+        ],
+    },
+    {
+        date: "2025-12-23",
+        changes: [
+            "Started the Astro-based site with Docker deployment in mind.",
+            "Set up the first pieces of the den: project structure, documentation, and hosting groundwork.",
+        ],
+    },
+];
+---
+
+<BaseLayout
+    title="Changelog - Hidden Den Cafe"
+    description="A quiet logbook of how Cozy Den changes over time."
+>
+    <div class="matrix-bg" aria-hidden="true"></div>
+
+    <main class="main">
+        <div class="container">
+            <header class="header fade-in">
+                <h1 class="title">Changelog</h1>
+                <div class="divider">==============================</div>
+                <p class="lead">
+                    This page keeps a quiet record of changes to the site. New
+                    pages, new writing, design shifts, structural cleanup, and
+                    the slow work of making the den feel more lived in all land
+                    here.
+                </p>
+            </header>
+
+            <section class="section fade-in" aria-labelledby="changelog-list">
+                <h2 id="changelog-list" class="sr-only">Changelog entries</h2>
+                <ol class="changelog-list">
+                    {
+                        changelogEntries.map((entry) => (
+                            <li class="changelog-item">
+                                <time class="entry-date" datetime={entry.date}>
+                                    {entry.date}
+                                </time>
+                                <article
+                                    class="entry-card"
+                                    aria-label={`Changelog entry for ${entry.date}`}
+                                >
+                                    <ul class="entry-changes">
+                                        {entry.changes.map((change) => (
+                                            <li>{change}</li>
+                                        ))}
+                                    </ul>
+                                </article>
+                            </li>
+                        ))
+                    }
+                </ol>
+            </section>
+
+            <section class="section fade-in">
+                <p class="closing-note">
+                    The goal is not to announce polished releases. It is simply
+                    to leave a trail showing how this place changes over time.
+                </p>
+            </section>
+
+            <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: 700px;
+        width: 100%;
+        background: var(--color-glass);
+        backdrop-filter: blur(10px);
+        border: 1px solid var(--color-surface);
+        border-radius: 8px;
+        padding: var(--space-xl);
+    }
+
+    .header {
+        margin-bottom: var(--space-lg);
+    }
+
+    .title {
+        font-size: 2rem;
+        font-weight: 700;
+        letter-spacing: 2px;
+        text-align: center;
+    }
+
+    .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-dim);
+        line-height: 1.75;
+        max-width: 40rem;
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    .section {
+        margin: var(--space-md) 0;
+    }
+
+    .changelog-list {
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-md);
+    }
+
+    .changelog-item {
+        display: flex;
+        gap: var(--space-md);
+        align-items: flex-start;
+    }
+
+    .entry-date {
+        color: var(--color-text-dim);
+        font-size: 0.8rem;
+        white-space: nowrap;
+        padding-top: 2px;
+        min-width: 90px;
+    }
+
+    .entry-card {
+        flex: 1;
+        padding: var(--space-md);
+        border-radius: 8px;
+        background: color-mix(in srgb, var(--color-bg-light) 88%, transparent);
+        border: 1px solid
+            color-mix(in srgb, var(--color-surface) 70%, transparent);
+    }
+
+    .entry-changes {
+        display: grid;
+        gap: var(--space-xs);
+        padding-left: 1.15rem;
+    }
+
+    .entry-changes li {
+        color: var(--color-text-dim);
+        line-height: 1.7;
+    }
+
+    .closing-note {
+        color: var(--color-text-dim);
+        line-height: 1.7;
+        text-align: center;
+        max-width: 42rem;
+        margin: 0 auto;
+    }
+
+    .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;
+    }
+
+    @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;
+        }
+
+        .changelog-item {
+            flex-direction: column;
+            gap: var(--space-xs);
+        }
+
+        .entry-date {
+            min-width: unset;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .matrix-bg {
+            animation: none;
+        }
+
+        .fade-in {
+            animation: none;
+            opacity: 1;
+        }
+    }
+</style>