feat: add tags index page

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>

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>

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>