Update tags

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>

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";

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";

src/pages/blog/index.astro

@@ -1,17 +1,25 @@
 ---
 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">
   <h1 class="text-4xl font-bold text-center mb-6">Latest Posts</h1>
   <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>

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>