From 65c976ed93d4ad8d202e51adfcd1537634a9e378 Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Wed, 1 Jan 2025 02:46:16 +0100
Subject: [PATCH] feat: add tags index page

---
 src/components/Navigation.astro  |  1 +
 src/layouts/BlogPostLayout.astro | 29 +++++++++++++++++++++
 src/pages/tags/index.astro       | 44 ++++++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+)
 create mode 100644 src/pages/tags/index.astro

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index a6d94aa..9dfe696 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -2,4 +2,5 @@
   <a href="/">Home</a>
   <a href="/about">About</a>
   <a href="/blog">Blog</a>
+  <a href="/tags">Tags</a>
 </nav>
diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
index 3b3b516..920b134 100644
--- a/src/layouts/BlogPostLayout.astro
+++ b/src/layouts/BlogPostLayout.astro
@@ -8,5 +8,34 @@ const { frontmatter } = Astro.props;
   <p><em>{frontmatter.description}</em></p>
   <p>Written by: {frontmatter.author}</p>
   <img src={frontmatter.image.url} alt={frontmatter.image.alt} width="500" />
+  <div class="tags">
+    {
+      frontmatter.tags.map((tag: any) => (
+        <p class="tag">
+          <a href={`/tags/${tag}`}>{tag}</a>
+        </p>
+      ))
+    }
+  </div>
   <slot />
 </BaseLayout>
+
+<style>
+  a {
+    color: #00539f;
+  }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .tag {
+    margin: 0.25em;
+    border: dotted 1px #a1a1a1;
+    border-radius: 0.5em;
+    padding: 0.5em 1em;
+    font-size: 1.15em;
+    background-color: #f8fcfd;
+  }
+</style>
diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro
new file mode 100644
index 0000000..a58c561
--- /dev/null
+++ b/src/pages/tags/index.astro
@@ -0,0 +1,44 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+
+const tags = [
+  ...new Set(
+    Object.values(import.meta.glob("../posts/*.md", { eager: true })).flatMap(
+      (post: any) => post.frontmatter.tags,
+    ),
+  ),
+];
+---
+
+<BaseLayout pageTitle="Tags">
+  <p>This is a list of all tags.</p>
+  <div class="tags">
+    {
+      tags.map((tag: any) => (
+        <p class="tag">
+          <a href={`/tags/${tag}`}>{tag}</a>
+        </p>
+      ))
+    }
+  </div>
+</BaseLayout>
+
+<style>
+  a {
+    color: #00539f;
+  }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .tag {
+    margin: 0.25em;
+    border: dotted 1px #a1a1a1;
+    border-radius: 0.5em;
+    padding: 0.5em 1em;
+    font-size: 1.15em;
+    background-color: #f8fcfd;
+  }
+</style>