Use Navigation plugin to render site map

src/archive/archive.11tydata.json

@@ -1,5 +1,10 @@
 {
     "tags": "archive",
     "layout": "main/content",
-    "permalink": "/{{ page.fileSlug }}/"
+    "permalink": "/{{ page.fileSlug }}/",
+    "eleventyComputed":{
+        "eleventyNavigation":{
+            "key": "{{ title }}"
+        }
+    }
 }

src/articles/articles.11tydata.json

@@ -2,6 +2,10 @@
     "tags": ["articles", "contents", "feed items"],
     "layout": "main/article",
     "eleventyComputed": {
-        "title": "{{ articleTitle }} | Articles"
+        "title": "{{ articleTitle }} | Articles",
+        "eleventyNavigation": {
+            "key": "{{ articleTitle }}",
+            "parent": "Articles"
+        }
     }
 }

src/blog/posts.njk

@@ -4,6 +4,9 @@ layout: main/content
 tags: blog pages
 eleventyComputed:
     desc: Archive of blog posts on {{ sitemeta.siteName | safe }}
+eleventyNavigation:
+    key: Blog Archive
+    parent: Blog
 ---
 
 <ul class="blog__postlist">

src/blog/posts/posts.11tydata.json

@@ -2,6 +2,10 @@
     "layout": "main/blogpost",
     "tags": ["posts", "contents", "feed items"],
     "eleventyComputed": {
-        "title": "{{ articleTitle }} | Blog"
+        "title": "{{ articleTitle }} | Blog",
+        "eleventyNavigation": {
+            "key": "{{ articleTitle }}",
+            "parent": "Blog Archive"
+        }
     }
 }

src/changelogs/changelogs.njk

@@ -11,6 +11,8 @@ pagination:
     alias: changelogs
     reverse: true
 permalink: "/{{ page.fileSlug }}{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber + 1 }}{% endif %}/"
+eleventyNavigation:
+    key: Changelogs
 ---
 
 <article>

src/changelogs/pages/2022.njk

@@ -5,7 +5,8 @@ desc: Changelog of my website during the year of 2022.
 changelogNav: 2022
 metadata:
     type: article
-date: 2022-02-02
+eleventyNavigation:
+    order: 2
 ---
 
 {% set changelogList = collections["changelog 2022"] %}

src/changelogs/pages/2023.njk

@@ -5,7 +5,8 @@ desc: Changelog of my website during the year of 2023.
 changelogNav: 2023
 metadata:
     type: article
-date: 2022-02-03
+eleventyNavigation:
+    order: 3
 ---
 
 {% set changelogList = collections["changelog 2023"] %}

src/changelogs/pages/2024.njk

@@ -5,7 +5,8 @@ desc: Changelog of my website during the year of 2024.
 changelogNav: 2024
 metadata:
     type: article
-date: 2022-02-04
+eleventyNavigation:
+    order: 4
 ---
 
 {% set changelogList = collections["changelog 2024"] %}

src/changelogs/pages/layouts.njk

@@ -5,7 +5,8 @@ desc: An archive for the page layout designs mt website has used.
 changelogNav: Website Layouts
 metadata:
     type: article
-date: 2022-02-01
+eleventyNavigation:
+    order: 1
 ---
 
 {%- from "macros/components.njk" import siteLayoutArchive -%}

src/changelogs/pages/pages.11tydata.json

@@ -1,5 +1,11 @@
 {
     "tags": "changelog pages",
     "layout": "main/changelogs",
-    "permalink": "/changelogs/{{ page.fileSlug }}/"
+    "permalink": "/changelogs/{{ page.fileSlug }}/",
+    "eleventyComputed": {
+        "eleventyNavigation": {
+            "key": "{{ changelogNav }}",
+            "parent": "Changelogs"
+        }
+    }
 }

src/index.njk

@@ -7,6 +7,8 @@ metadata:
     title: Home
 date: 2022-01-01
 isContentDivided: true
+eleventyNavigation:
+    key: Home
 ---
 
 <section class="content__section">

src/pages/about.njk

@@ -6,6 +6,8 @@ metadata:
     type: article
 date: 2022-01-02
 isContentDivided: true
+eleventyNavigation:
+    key: About
 ---
 
 <section class="content__section">

src/pages/articles.md

@@ -7,6 +7,8 @@ metadata:
 date: 2022-01-05
 templateEngineOverride: njk, md
 toc: true
+eleventyNavigation:
+    key: Articles
 ---
 
 ## My Articles

src/pages/blog.njk

@@ -12,6 +12,8 @@ pagination:
     alias: postList
     reverse: true
 permalink: "/{{ page.fileSlug }}{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber + 1 }}{% endif %}/"
+eleventyNavigation:
+    key: Blog
 ---
 
 <ul class="blog__posts">

src/pages/links.njk

@@ -6,6 +6,8 @@ metadata:
     type: article
 date: 2022-01-08
 isContentDivided: true
+eleventyNavigation:
+    key: Links
 ---
 
 <section class="content__section">

src/pages/now.md

@@ -6,6 +6,8 @@ metadata:
     type: article
 date: 2022-01-03
 updated: 2024-04-18
+eleventyNavigation:
+    key: Now
 ---
 
 *This page was last updated on {{ updated | niceDate }}.*

src/pages/projects.md

@@ -6,6 +6,8 @@ metadata:
     type: article
 date: 2022-01-06
 toc: true
+eleventyNavigation:
+    key: Projects
 ---
 
 ## My Drawings

src/pages/shrines.md

@@ -5,6 +5,8 @@ desc: Index of my personal e-shrines.
 metadata:
     type: article
 date: 2022-01-07
+eleventyNavigation:
+    key: Shrines
 ---
 
 Internet shrines are website pages dedicated to specific topics or interests. Here is a list of shrines I have made for my own website.

src/pages/sitemap.njk

@@ -8,75 +8,20 @@ eleventyComputed:
 
 <p>This page lists the links to the pages on my website for easier navigation.</p>
 
+{% set navPages = collections.all | eleventyNavigation %}
+{% macro renderNavListItem(entry) -%}
+    <li{% if entry.url == page.url %} class="my-active-class"{% endif %}>
+        <a href="{{ entry.url }}">{{ entry.title }}</a>
+    {%- if entry.children.length -%}
+        <ul>
+            {%- for child in entry.children %}{{ renderNavListItem(child) }}{% endfor -%}
+        </ul>
+    {%- endif -%}
+    </li>
+{%- endmacro %}
+
 <ul role="list" class="sitemap">
-    {% for page in collections.pages %}
+    {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
-        <li>
-            <a href="{{ page.url }}">{{ page.data.title or page.data.metadata.title }}</a>
-        </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 === "Shrines" %}
-            <ul>
-                {% for page in collections["shrine home"] %}
-                    <li>
-                        <a href="{{ page.url }}">{{ page.data.title }}</a>
-                    </li>
-                    <ul>
-                        {% if "asummersend" in page.url %}
-                            {% for page in collections["a summers end shrine page"] %}
-                                <li>
-                                    <a href="{{ page.url }}">{{ page.data.title }}</a>
-                                </li>
-                            {% endfor %}
-                        {% endif %}
-                    </ul>
-                {%- endfor %}
-            </ul>
-        {% endif %}
-    {%- endfor %}
-
-    <li><a href="/changelogs/">Changelogs</a></li>
-    <ul>
-        {% for page in collections["changelog pages"] %}
-            <li>
-                <a href="{{ page.url }}">{{ page.data.changelogNav }}</a>
-            </li>
-        {%- endfor %}
-    </ul>
-
-    {% for archive in collections.archive %}
-        <li><a href="{{ archive.url }}">{{ archive.data.title }}</a></li>
-    {% endfor %}
 </ul>
 
 <style>

src/projects/projects.11tydata.json

@@ -1,3 +1,9 @@
 {
-    "tags": "project pages"
+    "tags": "project pages",
+    "eleventyComputed": {
+        "eleventyNavigation": {
+            "key": "{{ title }}",
+            "parent": "Projects"
+        }
+    }
 }

src/shrines/asummersend.njk

@@ -4,6 +4,9 @@ tags: shrine home
 title: A Summer's End — Hong Kong 1986 Shrine
 desc: My shrine for A Summer's End — Hong Kong 1986
 isContentDivided: true
+eleventyNavigation:
+    key: A Summer's End — Hong Kong 1986 Shrine
+    parent: Shrines
 ---
 
 <section class="content__section">

src/shrines/asummersend/gallery.md

@@ -4,6 +4,10 @@ title: Gallery
 pageTitle: A Summer's End — Hong Kong 1986 Gallery
 desc: My gallery for A Summer's End — Hong Kong 1986.
 tags: a summers end shrine page
+eleventyNavigation:
+    key: Gallery
+    parent: A Summer's End — Hong Kong 1986 Shrine
+    order: 3
 ---
 
 A Summer’s End — Hong Kong 1986 was lovingly crafted by its developer Oracle and Bone with gorgeous art, so i want to make a page dedicated to my appreciation for the visual novel’s art.

src/shrines/asummersend/playlists.md

@@ -5,6 +5,10 @@ pageTitle: A Summer's End — Hong Kong 1986 Playlists
 desc: List of A Summer's End — Hong Kong 1986 playlists.
 tags: a summers end shrine page
 toc: true
+eleventyNavigation:
+    key: Playlists
+    parent: A Summer's End — Hong Kong 1986 Shrine
+    order: 1
 ---
 
 A Summer’s End — Hong Kong 1986 is a gold mine of music. Not only that the visual novel has a great soundtrack (its [official soundtrack](https://www.asummersend.com/original-soundtrack) was released on August 21, 2020), but the developer Oracle and Bone has also compiled playlists related to the game.

src/shrines/asummersend/trivia.md

@@ -5,6 +5,10 @@ pageTitle: A Summer's End — Hong Kong 1986 Trivia
 desc: A collection of trivia about A Summer's End — Hong Kong 1986.
 tags: a summers end shrine page
 toc: true
+eleventyNavigation:
+    key: Trivia
+    parent: A Summer's End — Hong Kong 1986 Shrine
+    order: 2
 ---
 
 Here is a collection of trivia about the characters from A Summer’s End provided by the developer Oracle and Bone on their social media pages, especially [Tumblr](https://oracleandbone.tumblr.com/).