From bb28c3a8e267a11ad5752edbb2dd855a9a65831a Mon Sep 17 00:00:00 2001
From: milan-codes <milanherke@protonmail.com>
Date: Sat, 2 Nov 2024 18:58:46 +0100
Subject: [PATCH] feat: display tags on blog page

---
 src/components/Navbar.astro |  2 +-
 src/components/Tags.astro   | 13 +++++++------
 src/pages/blog/index.astro  |  4 ++++
 src/pages/tags/[tag].astro  |  4 ++--
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index f3b176e..9c20ada 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -11,7 +11,7 @@ import ArrowUpRight from "./ArrowUpRight.astro";
       <a class="py-2 hover:underline" href="/"> Home </a>
     </li>
     <li>
-      <a class="py-2 hover:underline" href="/blog"> Posts </a>
+      <a class="py-2 hover:underline" href="/blog"> Blog </a>
     </li>
     <li>
       <a
diff --git a/src/components/Tags.astro b/src/components/Tags.astro
index ff511f3..4fb7279 100644
--- a/src/components/Tags.astro
+++ b/src/components/Tags.astro
@@ -1,16 +1,17 @@
 ---
+interface Props {
+  tags: string[];
+}
+
 const { tags } = Astro.props;
 ---
 
 <div>
-  <h1 class="my-8 mb-2 tracking-wider text-gray-900 dark:text-gray-100">
-    Tags
-  </h1>
-  <ul class="flex flex-wrap">
+  <ul class="mb-6 flex flex-wrap">
     {
       tags.map((tag: unknown) => (
-        <li class="mr-3 text-sm font-medium text-gray-400 hover:underline dark:text-gray-600">
-          <a href={`/tags/${tag}`}>{`#${tag}`}</a>
+        <li class="mr-3 text-sm font-medium text-gray-600 hover:underline dark:text-gray-400">
+          <a href={`/tags/${tag}`}>{tag}</a>
         </li>
       ))
     }
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 8dcbcdd..23c18c0 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -3,6 +3,7 @@ import { getCollection } from "astro:content";
 import BlogPostCard from "../../components/BlogPostCard.astro";
 import Navbar from "../../components/Navbar.astro";
 import BaseLayout from "../../layouts/BaseLayout.astro";
+import Tags from "../../components/Tags.astro";
 
 const posts = await getCollection("blog", ({ data }) => data.draft !== true);
 const orderedPosts = posts.sort((a, b) => {
@@ -10,9 +11,12 @@ const orderedPosts = posts.sort((a, b) => {
   const bDate = new Date(b.data.pubDate);
   return bDate.valueOf() - aDate.valueOf();
 });
+const tags = [...new Set(posts.map((post) => post.data.tags).flat())];
 ---
 
 <BaseLayout title="Milán Herke - Blog">
   <Navbar />
+  <h1 class="mb-1 mt-4 lowercase text-gray-900 dark:text-gray-100">Posts</h1>
+  <Tags tags={tags} />
   {orderedPosts.map((post) => <BlogPostCard post={post} />)}
 </BaseLayout>
diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro
index 3605696..9a2a40c 100644
--- a/src/pages/tags/[tag].astro
+++ b/src/pages/tags/[tag].astro
@@ -25,8 +25,8 @@ const allPosts = await getCollection(
 
 <BaseLayout title="Milán Herke - Blog">
   <Navbar />
-  <h1 class="my-8 mb-2 tracking-wider text-gray-900 dark:text-gray-100">
-    Posts with {tag} tag
+  <h1 class="mb-6 mt-4 lowercase text-gray-900 dark:text-gray-100">
+    Posts tagged with {tag}
   </h1>
   {allPosts.map((post) => <BlogPostCard post={post} />)}
 </BaseLayout>