Tag pages.

Author: StormHub

site/_includes/layouts/page.njk

@@ -2,8 +2,8 @@
 layout: layouts/base.njk
 ---
 
-<div class="container d-flex flex-nowrap col-xl-10 col-xxl-8 px-4 py-5 mw-content">
-    <div class="row align-items-center g-lg-6 py-5">
+<div class="container d-flex flex-nowrap col-xl-10 col-xxl-8 px-4 py-4 mw-content">
+    <div class="row align-items-center g-lg-6 pb-5">
         {{ content | safe }}
     </div>
 </div>

site/_includes/postslist.njk

@@ -0,0 +1,16 @@
+<div class="px-3 width-full">
+{%- for post in postslist %}
+    <div class="d-flex flex-items-center flex-column flex-nowrap mb-3">
+        <a href="{{ post.url }}" class="d-flex align-items-center link-body-emphasis text-decoration-none">
+            {% if post.data.title %}
+                <span class="h6 mb-0">{{ post.data.title }}</span>
+            {% else %}
+                <code>{{ post.url }}</code>
+            {% endif %}
+        </a>
+        <time class="text-muted" datetime="{{ post.date | htmlDateString }}">
+            <small>{{ post.date | readableDate("LLLL yyyy") }}</small>
+        </time> 
+    </div>
+{% endfor %}
+</div>

site/content/tag-pages.njk

@@ -0,0 +1,33 @@
+---js
+// <script>
+const pagination = {
+	data: "collections",
+	size: 1,
+	alias: "tag",
+	filter: ["all", "posts"],
+	// addAllPagesToCollections: true,
+};
+
+const eleventyExcludeFromCollections = true;
+
+const eleventyComputed = {
+	title: "Tagged '{{ tag }}'",
+	permalink: function(data) {
+		return `/tags/${this.slugify(data.tag)}/`;
+	}
+};
+---
+<div class="container d-flex flex-nowrap flex-column col-xl-10 col-xxl-8 px-4 py-4 mw-content">
+	<div class="row align-items-center g-lg-6 pb-4">
+		<h2>{{ tag }}</h2>
+	</div>
+
+	<div class="row align-items-center flex-1 g-lg-6 pb-5">
+		{% set postslist = collections[ tag ] %}
+		{% include "postslist.njk" %}
+	</div>
+
+	<div class="row f-flex align-items-center px-1 g-lg-6 pb-5">
+		<a class="text-primary text-decoration-none" href="tags.njk">All tags</a>
+	</div>
+</div>

site/content/tags.njk

@@ -0,0 +1,19 @@
+---js
+const eleventyNavigation = {
+	key: "Tags",
+	order: 1
+};
+---
+<div class="container d-flex flex-nowrap col-xl-10 col-xxl-8 px-4 py-4 mw-content">
+	<div class="row align-items-center g-lg-6 pb-5">
+		<h2>Tags</h2>
+		<div class="d-flex flex-nowrap flex-row fs-4">
+			{% for tag in collections | getKeys | filterTagList %}
+				{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+				<a href="{{ tagUrl }}" class="p-2">
+					<span class="badge rounded-pill bg-secondary text-lowercase py-2 px-3">{{ tag }}</span>
+				</a>
+			{% endfor %}
+		</div>
+	</div>
+</div>