Set up changelog pages

src/_includes/main/changelog.njk

@@ -0,0 +1,75 @@
+---
+layout: main/content
+---
+
+{% set currentUrl %}{{ page.url }}{% endset %}
+
+<nav class="changelog__nav">
+    <p class="changelog__nav--title">Changelog Archive:</p>
+    <ul class="changelog__nav--links">
+        {% for page in collections["changelog pages"] | reverse %}
+            <li>
+                <a
+                    {% if currentUrl === page.url %}
+                        aria-current="page"
+                    {% endif %}
+                    href="{{ page.url }}">
+                        {{ page.data.changelogNav }}
+                </a>
+            </li>
+            {% if not loop.last %}|{% endif %}
+        {%- endfor %}
+    </ul>
+</nav>
+
+<p>To get notified of the updates on this website, you can subscribe to the <a href="/feed.xml" target="blank">Leilukin's Hub RSS feed</a>, which contains new articles, blog posts and website changelog, or follow <a href="https://neocities.org/site/leilukin" target="_blank">my Neocities profile</a>.</p>
+<div class="web-btn-wrapper center-el" style="margin-top: 0.7em;">
+    <a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed">
+        <img src="/assets/buttons/rss-button.gif" alt="RSS feed button">
+    </a>
+</div>
+
+{{ content | safe }}
+
+<style>
+    .changelog__nav,
+    .changelog__nav--links {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .changelog__nav {
+        flex-direction: column;
+        gap: 0.2em;
+        align-self: center;
+        font-weight: 600;
+    }
+
+    .changelog__nav--links {
+        margin: 0;
+        padding: 0;
+    }
+
+    .changelog__nav--links {
+        list-style: none;
+        gap: 0.5em;
+    }
+
+    .changelog__nav--links li {
+        text-align: center;
+        align-self: center;
+    }
+
+    .changelog__nav--links [aria-current="page"] {
+        text-decoration: none;
+        color: var(--clr-bold-txt);
+    }
+
+    @media (min-width: 640px) {
+        .changelog__nav {
+            flex-direction: row;
+            gap: 1.5em;
+        }
+    }
+</style>

src/changelog/2022/2022.11tydata.json

@@ -0,0 +1,4 @@
+{
+    "tags": "changelog 2022",
+    "permalink": false
+}

src/changelog/2023/2023.11tydata.json

@@ -0,0 +1,4 @@
+{
+    "tags": "changelog 2023",
+    "permalink": false
+}

src/changelog/2024/2024.11tydata.json

@@ -0,0 +1,4 @@
+{
+    "tags": "changelog 2024",
+    "permalink": false
+}

src/changelog/pages/2022.njk

@@ -0,0 +1,19 @@
+---
+layout: main/changelog
+title: "Website Changelog Archive: 2022"
+desc: Changelog of my website during the year of 2022.
+changelogNav: 2022
+metadata:
+    type: article
+date: 2022-01-02
+---
+
+<article>
+    {% for log in collections["changelog 2022"] | reverse %}
+        <div class="heading-wrapper h2">
+            <h2 id="{{ log.fileSlug }}">{{ log.data.title }}</h2>
+            <a class="heading-anchor" href="#{{ log.fileSlug }}" aria-labelledby="{{ log.fileSlug }}"><span hidden="">#</span></a>
+        </div>
+        {{ log.templateContent | safe }}
+    {%- endfor %}
+</article>

src/changelog/pages/pages.11tydata.json

@@ -0,0 +1,5 @@
+{
+    "tags": "changelog pages",
+    "layout": "main/changelog",
+    "permalink": "/changelog/{{ page.fileSlug }}/"
+}

src/pages/changelog.njk

@@ -0,0 +1,17 @@
+---
+layout: main/changelog
+title: Changelog
+pageTitle: Website Changelog
+desc: Changelog of my website.
+metadata:
+    type: article
+date: 2023-01-09
+---
+
+<h2>Latest Changelog:</h2>
+<article>
+    {% for log in collections["changelog 2024"]  | reverse %}
+        <h3>{{ log.data.title }}</h3>
+        {{ log.templateContent | safe }}
+    {%- endfor %}
+</article>