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.