feat: display tags on blog page

Author: milan-codes

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

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>
       ))
     }

src/pages/blog/index.astro

@@ -3,16 +3,20 @@ 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) => {
   const aDate = new Date(a.data.pubDate);
   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>

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>