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;
+ className?: string;
+}
+
+const { tagAmounts, className } = Astro.props;
+---
+
+
+ {
+ Object.entries(tagAmounts)
+ .sort((a, b) => b[1] - a[1])
+ .map(([tag, count], i) => (
+ <>
+ {`${tag}(${count})`}
+ {i < Object.entries(tagAmounts).length - 1 && ", "}
+ >
+ ))
+ }
+
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
+);
---
@@ -12,6 +20,6 @@ const posts = await getCollection("posts");
Tags
- post.data.tags)} />
+
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
- and
+ and
blogging
- about my experiences.
+ about my experiences.