Rework how tags are working and make them native

3 files changed, 113 insertions, 1 deletions

diff --git a/src/pages/micro/[...page].astro b/src/pages/micro/[...page].astro
index edfecab..8e7e814 100644
--- a/src/pages/micro/[...page].astro
+++ b/src/pages/micro/[...page].astro
@@ -51,7 +51,12 @@ const paginationProps = {
 <PageLayout meta={meta}>
 	<section>
 		<h1 class="title mb-6 flex items-center gap-3">
-			Micro <a class="text-accent" href="/micro/rss.xml" target="_blank">
+			Micro
+			<a class="text-accent" href="/micro/tags/" title="Browse micro tags">
+				<span class="sr-only">Browse tags</span>
+				<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:tag-multiple" />
+			</a>
+			<a class="text-accent" href="/micro/rss.xml" target="_blank">
 				<span class="sr-only">RSS feed</span>
 				<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:rss" />
 			</a>
diff --git a/src/pages/micro/tags/[tag]/[...page].astro b/src/pages/micro/tags/[tag]/[...page].astro
new file mode 100644
index 0000000..3f78663
--- /dev/null
+++ b/src/pages/micro/tags/[tag]/[...page].astro
@@ -0,0 +1,71 @@
+---
+import { getCollection } from "astro:content";
+import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
+import { Icon } from "astro-icon/components";
+import Note from "@/components/note/Note.astro";
+import Pagination from "@/components/Paginator.astro";
+import PageLayout from "@/layouts/Base.astro";
+import { getUniqueMicroTags, sortMicroEntries } from "@/utils/micro";
+
+export const getStaticPaths = (async ({ paginate }) => {
+	const allMicroPosts = await getCollection("micro");
+	const sortedPosts = sortMicroEntries(allMicroPosts);
+	const uniqueTags = getUniqueMicroTags(sortedPosts);
+
+	return uniqueTags.flatMap((tag) => {
+		const postsWithTag = sortedPosts.filter((post) => post.data.tags?.includes(tag));
+		return paginate(postsWithTag, {
+			pageSize: 10,
+			params: { tag },
+		});
+	});
+}) satisfies GetStaticPaths;
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { page } = Astro.props as Props;
+const { tag } = Astro.params;
+
+const meta = {
+	description: `View all micro posts with the tag - ${tag}`,
+	title: `Micro posts about ${tag}`,
+};
+
+const paginationProps = {
+	...(page.url.prev && {
+		prevUrl: {
+			text: "← Previous Page",
+			url: page.url.prev,
+		},
+	}),
+	...(page.url.next && {
+		nextUrl: {
+			text: "Next Page →",
+			url: page.url.next,
+		},
+	}),
+};
+---
+
+<PageLayout meta={meta}>
+	<nav class="mb-8" aria-label="Breadcrumbs">
+		<ul class="flex items-center">
+			<li class="flex items-center">
+				<a class="text-accent" href="/micro/tags/">Micro Tags</a>
+				<Icon aria-hidden="true" name="mdi:chevron-right" class="mx-1.5" />
+			</li>
+			<li aria-current="page" class=""><span aria-hidden="true">#</span>{tag}</li>
+		</ul>
+	</nav>
+	<h1 class="title capitalize">Micro posts about {tag}</h1>
+	<ul class="mt-6 space-y-8 text-start">
+		{
+			page.data.map((note) => (
+				<li class="">
+					<Note note={note} as="h2" isPreview />
+				</li>
+			))
+		}
+	</ul>
+	<Pagination {...paginationProps} />
+</PageLayout>
diff --git a/src/pages/micro/tags/index.astro b/src/pages/micro/tags/index.astro
new file mode 100644
index 0000000..8d39b8a
--- /dev/null
+++ b/src/pages/micro/tags/index.astro
@@ -0,0 +1,36 @@
+---
+import { getCollection } from "astro:content";
+import PageLayout from "@/layouts/Base.astro";
+import { getUniqueMicroTagsWithCount } from "@/utils/micro";
+
+const allMicroPosts = await getCollection("micro");
+const allTags = getUniqueMicroTagsWithCount(allMicroPosts);
+
+const meta = {
+	description: "A list of all the topics I've written about in my micro posts",
+	title: "Micro Tags",
+};
+---
+
+<PageLayout meta={meta}>
+	<h1 class="title mb-6">Micro Tags</h1>
+	<ul class="space-y-6">
+		{
+			allTags.map(([tag, val]) => (
+				<li class="flex items-center gap-x-2">
+					<a
+						class="cactus-link inline-block"
+						data-astro-prefetch
+						href={`/micro/tags/${tag}/`}
+						title={`View micro posts with the tag: ${tag}`}
+					>
+						&#35;{tag}
+					</a>
+					<span class="inline-block">
+						- {val} Post{val > 1 && "s"}
+					</span>
+				</li>
+			))
+		}
+	</ul>
+</PageLayout>