From 77d762b1967eb9fb3405621aa4cc98077a89a4d3 Mon Sep 17 00:00:00 2001
From: Cassidy Williams <1454517+cassidoo@users.noreply.github.com>
Date: Thu, 26 Jan 2023 23:40:45 -0600
Subject: [PATCH] Update posts by tag, fix ul styling

---
 src/components/HomePosts.astro |  2 +-
 src/components/Tags.astro      | 18 +++++++++++++++++
 src/layouts/BlogPost.astro     |  6 ++++++
 src/pages/index.astro          | 36 ++++------------------------------
 src/pages/posts.astro          |  2 +-
 src/pages/tag/[tag].astro      |  2 +-
 src/scripts/getTags.js         | 23 ++++++++++++++++++++++
 src/style/global.css           |  6 +++++-
 8 files changed, 59 insertions(+), 36 deletions(-)
 create mode 100644 src/components/Tags.astro
 create mode 100644 src/scripts/getTags.js
diff --git a/src/components/HomePosts.astro b/src/components/HomePosts.astro
index 4806e8e..8912b81 100644
--- a/src/components/HomePosts.astro
+++ b/src/components/HomePosts.astro
@@ -16,7 +16,7 @@ let posts = allPosts
 ---
 
 <content>
-	<ul>
+	<ul class="posts-list">
 		{
 			posts.map(
 				({
diff --git a/src/components/Tags.astro b/src/components/Tags.astro
new file mode 100644
index 0000000..f301a5d
--- /dev/null
+++ b/src/components/Tags.astro
@@ -0,0 +1,18 @@
+---
+const { tags } = Astro.props;
+---
+
+<h3>View posts by tag</h3>
+<p>
+	{
+		tags &&
+			tags.map((tag) => (
+				<>
+					<a class="tag" href={`/tag/${tag}`}>
+						#{tag}
+					</a>
+					{` `}
+				</>
+			))
+	}
+</p>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 7a78382..e4ed92c 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -3,6 +3,11 @@ import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import ColorScript from "../components/ColorScript.astro";
+import Tags from "../components/Tags.astro";
+import getTags from "../scripts/getTags";
+
+const posts = await Astro.glob("../posts/*.md");
+const tags = getTags(posts);
 
 const {
 	content: { title, description, added, updatedDate, heroImage },
@@ -30,6 +35,7 @@ const {
 				<slot />
 			</article>
 		</main>
+		<Tags tags={tags} />
 		<Footer />
 		<ColorScript />
 	</body>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9a04661..c88b983 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,29 +4,14 @@ import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import HomePosts from "../components/HomePosts.astro";
 import ColorScript from "../components/ColorScript.astro";
+import Tags from "../components/Tags.astro";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
 import { Content as About } from "./about.md";
+import getTags from "../scripts/getTags";
 
 const posts = await Astro.glob("../posts/*.md");
 
-// Get tags from all posts
-const getTags = posts
-	.map((post) => {
-		const postTags = post.frontmatter.tags;
-		let allTags = [];
-
-		if (postTags.length > 0) {
-			postTags.forEach((tag) => {
-				if (allTags.indexOf(tag) === -1) {
-					allTags.push(tag);
-				}
-			});
-		}
-		return allTags;
-	})
-	.flat(1);
-// Make the tags unique
-let tags = [...new Set(getTags)];
+const tags = getTags(posts);
 ---
 
 <!DOCTYPE html>
@@ -40,20 +25,7 @@ let tags = [...new Set(getTags)];
 			<h3>Here's my most recent posts</h3>
 			<HomePosts allPosts={posts} />
 
-			<h3>View posts by tag</h3>
-			<p>
-				{
-					tags &&
-						tags.map((tag) => (
-							<>
-								<a class="tag" href={`/tag/${tag}`}>
-									#{tag}
-								</a>
-								{` `}
-							</>
-						))
-				}
-			</p>
+			<Tags tags={tags} />
 		</main>
 		<Footer />
 		<ColorScript />
diff --git a/src/pages/posts.astro b/src/pages/posts.astro
index 43f303d..2f65a5a 100644
--- a/src/pages/posts.astro
+++ b/src/pages/posts.astro
@@ -22,7 +22,7 @@ const posts = (await Astro.glob("../posts/*.md")).sort(
 		<Header />
 		<main>
 			<content>
-				<ul>
+				<ul class="posts-list">
 					{
 						posts.map(
 							({
diff --git a/src/pages/tag/[tag].astro b/src/pages/tag/[tag].astro
index cdd16b2..a80995a 100644
--- a/src/pages/tag/[tag].astro
+++ b/src/pages/tag/[tag].astro
@@ -43,7 +43,7 @@ const { tag: currentTag } = Astro.params;
 		<main>
 			<content>
 				<h3>Posts tagged with "{currentTag}"</h3>
-				<ul>
+				<ul class="tags-list">
 					{
 						tag.map(
 							({
diff --git a/src/scripts/getTags.js b/src/scripts/getTags.js
new file mode 100644
index 0000000..3d55210
--- /dev/null
+++ b/src/scripts/getTags.js
@@ -0,0 +1,23 @@
+export default function getTags(posts) {
+	// Get tags from all posts
+	const allTags = posts
+		.map((post) => {
+			const postTags = post.frontmatter.tags;
+			let allTags = [];
+
+			if (postTags.length > 0) {
+				postTags.forEach((tag) => {
+					if (allTags.indexOf(tag) === -1) {
+						allTags.push(tag);
+					}
+				});
+			}
+			return allTags;
+		})
+		.flat(1);
+
+	// Make the tags unique
+	let tags = [...new Set(allTags)];
+
+	return tags;
+}
diff --git a/src/style/global.css b/src/style/global.css
index bc6c8b0..c77b6ac 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -75,10 +75,14 @@ hr {
 }
 
 ul {
-	list-style-type: none;
 	padding: unset;
 }
 
+.posts-list,
+.tags-list {
+	list-style-type: none;
+}
+
 .post {
 	margin: 0 0 30px 0;
 }
