From ed004bfd8a7f618cdbdf65ab17ae05858b1e5a3c Mon Sep 17 00:00:00 2001
From: Neil Brommer <NeilBrommer@users.noreply.github.com>
Date: Sun, 9 Jul 2023 22:28:59 -0700
Subject: [PATCH] Add pages for tags and link to them

---
 .eleventy.js => eleventy.config.js    |  0
 src/_includes/layouts/post-layout.njk |  2 +-
 src/_includes/posts-list.njk          | 16 ++++++++++++++++
 src/css/Components/_lists.scss        | 16 ++++++++++++----
 src/posts/index.njk                   | 18 ++----------------
 src/posts/tags.njk                    | 14 ++++++++++++++
 6 files changed, 45 insertions(+), 21 deletions(-)
 rename .eleventy.js => eleventy.config.js (100%)
 create mode 100644 src/_includes/posts-list.njk
 create mode 100644 src/posts/tags.njk

diff --git a/.eleventy.js b/eleventy.config.js
similarity index 100%
rename from .eleventy.js
rename to eleventy.config.js
diff --git a/src/_includes/layouts/post-layout.njk b/src/_includes/layouts/post-layout.njk
index 2984a1c..3e382e1 100644
--- a/src/_includes/layouts/post-layout.njk
+++ b/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>
diff --git a/src/_includes/posts-list.njk b/src/_includes/posts-list.njk
new file mode 100644
index 0000000..ad8d9ad
--- /dev/null
+++ b/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 %}
diff --git a/src/css/Components/_lists.scss b/src/css/Components/_lists.scss
index be3aab9..53c798a 100644
--- a/src/css/Components/_lists.scss
+++ b/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;
-	}
 
-	dd {
-		display: inline;
+		.icon {
+			font-size: 1.5em;
+			padding-right: 0.3em;
+		}
+
+		&::after {
+			content: ":";
+		}
 	}
 }
diff --git a/src/posts/index.njk b/src/posts/index.njk
index 3af013b..775e6b8 100644
--- a/src/posts/index.njk
+++ b/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" %}
diff --git a/src/posts/tags.njk b/src/posts/tags.njk
new file mode 100644
index 0000000..f64e474
--- /dev/null
+++ b/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" %}