From fc0e583da0d71127395c26cac805ee213099312f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Altu=C4=9F=20Bakan?= <mail@alt.ug>
Date: Fri, 23 Feb 2024 19:38:04 +0100
Subject: [PATCH] Update tags

---
 src/components/TagList.astro               | 25 ++++++++++++++++++++++
 src/content/posts/day-in-rotterdam.mdx     |  4 ++--
 src/content/posts/multiple-observables.mdx |  2 +-
 src/pages/blog/index.astro                 | 12 +++++++++--
 src/pages/index.astro                      |  4 ++--
 5 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 src/components/TagList.astro

diff --git a/src/components/TagList.astro b/src/components/TagList.astro
new file mode 100644
index 0000000..5ff4d7a
--- /dev/null
+++ b/src/components/TagList.astro
@@ -0,0 +1,25 @@
+---
+interface Props {
+  tagAmounts: Record<string, number>;
+  className?: string;
+}
+
+const { tagAmounts, className } = Astro.props;
+---
+
+<span class={className}>
+  {
+    Object.entries(tagAmounts)
+      .sort((a, b) => b[1] - a[1])
+      .map(([tag, count], i) => (
+        <>
+          <a
+            href={`/tags/${tag}`}
+            class="hover:underline"
+            aria-label={`Posts tagged ${tag}`}
+          >{`${tag}(${count})`}</a>
+          {i < Object.entries(tagAmounts).length - 1 && ", "}
+        </>
+      ))
+  }
+</span>
diff --git a/src/content/posts/day-in-rotterdam.mdx b/src/content/posts/day-in-rotterdam.mdx
index d0da22a..d2e4b6b 100644
--- a/src/content/posts/day-in-rotterdam.mdx
+++ b/src/content/posts/day-in-rotterdam.mdx
@@ -1,8 +1,8 @@
 ---
 title: A Day in Rotterdam
-description: A day spent travelling Rotterdam.
+description: A day spent traveling Rotterdam.
 date: 2023-12-12
-tags: [travelling]
+tags: [traveling]
 ---
 
 import BlogImage from "../../components/BlogImage.astro";
diff --git a/src/content/posts/multiple-observables.mdx b/src/content/posts/multiple-observables.mdx
index 091d3b1..8b47455 100644
--- a/src/content/posts/multiple-observables.mdx
+++ b/src/content/posts/multiple-observables.mdx
@@ -2,7 +2,7 @@
 title: Processing Multiple Observables
 description: Using an RxJS Observable response to make multiple endpoint calls.
 date: 2023-12-14
-tags: [rxjs, programming]
+tags: [angular, rxjs, programming]
 ---
 
 import BlogImage from "../../components/BlogImage.astro";
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 2c2beda..94d58d8 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,10 +1,18 @@
 ---
 import LatestPosts from "../../components/LatestPosts.astro";
-import Tags from "../../components/Tags.astro";
+import TagList from "../../components/TagList.astro";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import { getCollection } from "astro:content";
 
 const posts = await getCollection("posts");
+const tags = posts.flatMap((post) => post.data.tags);
+const tagAmounts = tags.reduce(
+  (acc, tag) => {
+    acc[tag] = (acc[tag] || 0) + 1;
+    return acc;
+  },
+  {} as Record<string, number>
+);
 ---
 
 <BaseLayout title="Altuğ's Blog">
@@ -12,6 +20,6 @@ const posts = await getCollection("posts");
   <LatestPosts count={5} />
   <h1 class="text-4xl font-bold text-center my-6">Tags</h1>
   <p class="flex flex-row flex-wrap gap-2">
-    <Tags tags={posts.flatMap((post) => post.data.tags)} />
+    <TagList {tagAmounts} />
   </p>
 </BaseLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e4c9476..aa91110 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -16,13 +16,13 @@ import BaseLayout from "../layouts/BaseLayout.astro";
       >
         open-source projects</a
       >
-       and
+      and
       <a
         class="text-blue-700 dark:text-blue-500 hover:underline"
         href="/blog"
         aria-label="blogging">blogging</a
       >
-       about my experiences.
+      about my experiences.
     </p>
     <Socials />
   </section>