From daae80b3b6aae2531ac4045c7e2c80c2e1087774 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 18 Apr 2024 01:34:21 +0800
Subject: [PATCH] Set up content archive and categories pages

---
 src/_includes/main/content-list.njk | 29 ++++++++++
 src/archive/archive.11tydata.json   |  5 ++
 src/archive/archive.njk             |  8 +++
 src/archive/categories-list.njk     | 16 ++++++
 src/archive/categories.njk          | 19 ++++++
 src/sitemap.njk                     | 89 +++++++++++++++--------------
 6 files changed, 124 insertions(+), 42 deletions(-)
 create mode 100644 src/_includes/main/content-list.njk
 create mode 100644 src/archive/archive.11tydata.json
 create mode 100644 src/archive/archive.njk
 create mode 100644 src/archive/categories-list.njk
 create mode 100644 src/archive/categories.njk

diff --git a/src/_includes/main/content-list.njk b/src/_includes/main/content-list.njk
new file mode 100644
index 00000000..23b8723a
--- /dev/null
+++ b/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>
diff --git a/src/archive/archive.11tydata.json b/src/archive/archive.11tydata.json
new file mode 100644
index 00000000..ca5a0dad
--- /dev/null
+++ b/src/archive/archive.11tydata.json
@@ -0,0 +1,5 @@
+{
+    "tags": "archive",
+    "layout": "main/content",
+    "permalink": "/{{ page.fileSlug }}/"
+}
\ No newline at end of file
diff --git a/src/archive/archive.njk b/src/archive/archive.njk
new file mode 100644
index 00000000..00dcbd42
--- /dev/null
+++ b/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" %}
\ No newline at end of file
diff --git a/src/archive/categories-list.njk b/src/archive/categories-list.njk
new file mode 100644
index 00000000..0a39c490
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/archive/categories.njk b/src/archive/categories.njk
new file mode 100644
index 00000000..915b491b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/sitemap.njk b/src/sitemap.njk
index ac9c404d..0c1f51ee 100644
--- a/src/sitemap.njk
+++ b/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>