Set up content archive and categories pages

src/_includes/main/content-list.njk

@@ -0,0 +1,29 @@
+<ul class="content-list">
+    {% for content in contentList %}
+        <li>
+            <p class="content-list__title">
+                <a href="{{ content.url }}">
+                    {% if content.data.title %}{{ content.data.title }}
+                    {% else %}
+                        <code>{{ content.url }}</code>
+                    {% endif %}
+                </a>
+            </p>
+            <time>{{ content.date | niceDate }}</time>
+        </li>
+    {% endfor %}
+</ul>
+
+<style>
+    .content-list {
+        display: grid;
+        gap: 1em;
+        padding-left: 1em;
+    }
+
+    .content-list__title {
+        font-size: clamp(1.55rem, 1rem + 3vw, 1.2rem);
+        line-height: 1.3;
+        margin-bottom: 0.2em;
+    }
+</style>

src/archive/archive.11tydata.json

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

src/archive/archive.njk

@@ -0,0 +1,8 @@
+---
+title: Archive
+eleventyComputed:
+    desc: All contents published on {{ sitemeta.siteName | safe }}.
+---
+
+{% set contentList = collections.contents | reverse %}
+{% include "main/content-list.njk" %}

src/archive/categories-list.njk

@@ -0,0 +1,16 @@
+---
+title: Content Categories
+permalink: /categories/
+eleventyComputed:
+    desc: All content categories on {{ sitemeta.siteName | safe }}.
+---
+
+<ul>
+    {% for category in collections.categories %}
+        {% set categoryUrl %}/categories/{{ category | slugify }}/{% endset %}
+        {% set categoryPostCount = collections.contents | filterByCategory(category) | length %}
+        <li><a href="{{ categoryUrl }}">{{ category }}</a> ({{ categoryPostCount }})</li>
+    {% endfor %}
+</ul>
+
+<p>See all contents on this website in the <a href="/archive/">archive</a>.</p>

src/archive/categories.njk

@@ -0,0 +1,19 @@
+---
+pagination:
+    data: collections.categories
+    size: 1
+    alias: category
+permalink: /categories/{{ category | slugify }}/
+eleventyExcludeFromCollections: true
+eleventyComputed:
+    title: 'Content Category: "{{ category }}"'
+    desc: All contents under the "{{ category }}" category on {{ sitemeta.siteName | safe }}.
+---
+
+{% set contentCount = collections.contents | filterByCategory(category) | length %}
+<h2>{{ contentCount }} Contents Filed Under "{{ category }}"</h2>
+
+{% set contentList = collections.contents | filterByCategory(category) | reverse %}
+{% include "main/content-list.njk" %}
+
+<p>See <a href="/categories/">all content categories</a>.</p>

src/sitemap.njk

@@ -2,7 +2,8 @@
 layout: main/content
 title: Site Map
 eleventyExcludeFromCollections: true
-desc: Site map of Leilukin's Hub.
+eleventyComputed:
+    desc: Site map of {{ sitemeta.siteName | safe }}.
 ---
 
 <p>This page lists the links to the pages on my website for easier navigation.</p>
@@ -11,49 +12,53 @@ desc: Site map of Leilukin's Hub.
     {% for page in collections.pages %}
         <li>
             <a href="{{ page.url }}">{{ page.data.title or page.data.metadata.title }}</a>
-            {% if page.data.title === "Blog" %}
-                <ul>
-                    {% for page in collections["blog pages"] %}
-                        {% if page.data.title !== "Blog" %}
-                            <li>
-                                <a href="{{ page.url }}">{{ page.data.title or page.data.metadata.title }}</a>
-                            </li>
-                        {% endif %}
-                    {%- endfor %}
-                </ul>
-            {% endif %}
-
-            {% if page.data.title === "Articles" %}
-                <ul>
-                    {% for page in collections["articles"] %}
-                        <li>
-                            <a href="{{ page.url }}">{{ page.data.articleTitle }}</a>
-                        </li>
-                    {%- endfor %}
-                </ul>
-            {% endif %}
-
-            {% if page.data.title === "Projects" %}
-                <ul>
-                    {% for page in collections["project pages"] %}
-                        <li>
-                            <a href="{{ page.url }}">{{ page.data.title }}</a>
-                        </li>
-                    {%- endfor %}
-                </ul>
-            {% endif %}
-
-            {% if page.data.title === "Changelogs" %}
-                <ul>
-                    {% for page in collections["changelog pages"] %}
-                        <li>
-                            <a href="{{ page.url }}">{{ page.data.changelogNav }}</a>
-                        </li>
-                    {%- endfor %}
-                </ul>
-            {% endif %}
         </li>
+        {% if page.data.title === "Blog" %}
+            <ul>
+                {% for page in collections["blog pages"] %}
+                    {% if page.data.title !== "Blog" %}
+                        <li>
+                            <a href="{{ page.url }}">{{ page.data.title or page.data.metadata.title }}</a>
+                        </li>
+                    {% endif %}
+                {%- endfor %}
+            </ul>
+        {% endif %}
+
+        {% if page.data.title === "Articles" %}
+            <ul>
+                {% for page in collections["articles"] %}
+                    <li>
+                        <a href="{{ page.url }}">{{ page.data.articleTitle }}</a>
+                    </li>
+                {%- endfor %}
+            </ul>
+        {% endif %}
+
+        {% if page.data.title === "Projects" %}
+            <ul>
+                {% for page in collections["project pages"] %}
+                    <li>
+                        <a href="{{ page.url }}">{{ page.data.title }}</a>
+                    </li>
+                {%- endfor %}
+            </ul>
+        {% endif %}
+
+        {% if page.data.title === "Changelogs" %}
+            <ul>
+                {% for page in collections["changelog pages"] %}
+                    <li>
+                        <a href="{{ page.url }}">{{ page.data.changelogNav }}</a>
+                    </li>
+                {%- endfor %}
+            </ul>
+        {% endif %}
     {%- endfor %}
+
+    {% for archive in collections.archive %}
+        <li><a href="{{ archive.url }}">{{ archive.data.title }}</a></li>
+    {% endfor %}
 </ul>
 
 <style>