Add pages for tags and link to them

src/_includes/layouts/post-layout.njk

@@ -11,7 +11,7 @@ layout: layouts/layout.njk
 	</dt>
 	{% for tag in tags %}
 		{% if tag != "posts" %}
-			<dd>{{ tag }}</dd>
+			<dd><a href="{{ "/posts/tags/" + (tag | slugify) | url }}">{{ tag }}</a></dd>
 		{% endif %}
 	{% endfor %}
 </dl>

src/_includes/posts-list.njk

@@ -0,0 +1,16 @@
+{% if postsList | filterDrafts | IsNotPage(page.url) | length %}
+	{% for post in postsList | filterDrafts | reverse %}
+		<section>
+			<h2><a href={{ post.url }}>{{ post.data.title }}</a></h2>
+			<div>
+				<svg class="icon">
+					<use href="/images/feather-sprite.svg#clock" />
+				</svg>
+				{{ post.date.toLocaleDateString("en-US") }}
+			</div>
+			<p>{{ post.data.description }}</p>
+		</section>
+	{% endfor %}
+{% else %}
+	<p>No posts</p>
+{% endif %}

src/css/Components/_lists.scss

@@ -18,15 +18,23 @@ dl {
 }
 
 dl.tags {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
 	dt {
 		display: inline-flex;
 		flex-direction: row;
 		align-items: center;
-		gap: 0.25em;
 		padding: 0.25em 0;
+
+		.icon {
+			font-size: 1.5em;
+			padding-right: 0.3em;
 		}
 
-	dd {
-		display: inline;
+		&::after {
+			content: ":";
+		}
 	}
 }

src/posts/index.njk

@@ -7,19 +7,5 @@ eleventyNavigation:
   order: 1
 ---
 
-{% if collections.posts | filterDrafts | IsNotPage(page.url) | length %}
-	{% for post in collections.posts | filterDrafts | IsNotPage(page.url) | reverse %}
-		<section>
-			<h2><a href={{ post.url }}>{{ post.data.title }}</a></h2>
-			<div>
-				<svg class="icon">
-					<use href="/images/feather-sprite.svg#clock" />
-				</svg>
-				{{ post.date.toLocaleDateString("en-US") }}
-			</div>
-			<p>{{ post.data.description }}</p>
-		</section>
-	{% endfor %}
-{% else %}
-	<p>No posts</p>
-{% endif %}
+{% set postsList = collections.posts | IsNotPage(page.url) %}
+{% include "posts-list.njk" %}

src/posts/tags.njk

@@ -0,0 +1,14 @@
+---
+layout: layouts/layout.njk
+pagination:
+  data: collections
+  size: 1
+  alias: tag
+  filter: [ all, post, posts, MainPage ]
+eleventyComputed:
+  title: Posts Tagged "{{ tag }}"
+permalink: /posts/tags/{{ tag | slugify }}
+---
+
+{% set postsList = collections[tag] %}
+{% include "posts-list.njk" %}