feat(tags): replace pagination with year-grouped single page

Remove pagination from tag pages and show all posts on one page.
Tags with >20 posts group entries by year with headers matching
the main posts page style. Tags with <=20 posts keep a flat list.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

1 files changed, 39 insertions, 43 deletions

diff --git a/src/pages/tags/[tag]/[...page].astro b/src/pages/tags/[tag]/index.astro
index 8ae9716..2f7fa47 100644
--- a/src/pages/tags/[tag]/[...page].astro
+++ b/src/pages/tags/[tag]/index.astro
@@ -1,36 +1,26 @@
 ---
 import { render } from "astro:content";
-import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
+import type { GetStaticPaths } from "astro";
 import { Icon } from "astro-icon/components";
 import PostPreview from "@/components/blog/PostPreview.astro";
-import Pagination from "@/components/Paginator.astro";
-import { getAllPosts, getTagMeta, getUniqueTags } from "@/data/post";
+import { getAllPosts, getTagMeta, getUniqueTags, groupPostsByYear } from "@/data/post";
 import PageLayout from "@/layouts/Base.astro";
 import { collectionDateSort } from "@/utils/date";
 
-export const getStaticPaths = (async ({ paginate }) => {
-	const allPosts = await getAllPosts(true); // Include archived posts (now includes pleroma too)
-
-	// Get unique tags from all posts
+export const getStaticPaths = (async () => {
+	const allPosts = await getAllPosts(true);
 	const allTags = getUniqueTags(allPosts);
 
-	return allTags.flatMap((tag) => {
-		// Filter posts by tag
-		const postsWithTag = allPosts.filter((post) => post.data.tags.includes(tag));
-
-		// Sort chronologically
-		const sortedPosts = postsWithTag.sort(collectionDateSort);
+	return allTags.map((tag) => {
+		const postsWithTag = allPosts
+			.filter((post) => post.data.tags.includes(tag))
+			.sort(collectionDateSort);
 
-		return paginate(sortedPosts, {
-			pageSize: 10,
-			params: { tag },
-		});
+		return { params: { tag }, props: { posts: postsWithTag } };
 	});
 }) satisfies GetStaticPaths;
 
-type Props = InferGetStaticPropsType<typeof getStaticPaths>;
-
-const { page } = Astro.props as Props;
+const { posts } = Astro.props;
 const { tag } = Astro.params;
 const tagMeta = await getTagMeta(tag);
 
@@ -44,20 +34,9 @@ const meta = {
 	title: tagMeta?.data.title ?? `${tagDisplay} posts`,
 };
 
-const paginationProps = {
-	...(page.url.prev && {
-		prevUrl: {
-			text: "← Previous posts",
-			url: page.url.prev,
-		},
-	}),
-	...(page.url.next && {
-		nextUrl: {
-			text: "Next posts →",
-			url: page.url.next,
-		},
-	}),
-};
+const groupedByYear = groupPostsByYear(posts);
+const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
+const useYearGrouping = posts.length > 20;
 ---
 
 <PageLayout meta={meta}>
@@ -86,14 +65,31 @@ const paginationProps = {
 		{tagMeta?.data.description && <p>{tagMeta.data.description}</p>}
 		{TagContent && <TagContent />}
 	</div>
-	<ul class="space-y-6">
-		{
-			page.data.map((post) => (
-				<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
-					<PostPreview as="h2" post={post} />
-				</li>
+	{
+		useYearGrouping ? (
+			descYearKeys.map((yearKey) => (
+				<section aria-labelledby={`year-${yearKey}`}>
+					<h2 id={`year-${yearKey}`} class="title text-lg">
+						<span class="sr-only">Posts in</span>
+						{yearKey}
+					</h2>
+					<ul class="mt-5 mb-16 space-y-6 text-start">
+						{groupedByYear[yearKey]?.map((post) => (
+							<li class="grid gap-2 sm:grid-cols-[auto_1fr] sm:[&_q]:col-start-2">
+								<PostPreview as="h2" post={post} />
+							</li>
+						))}
+					</ul>
+				</section>
 			))
-		}
-	</ul>
-	<Pagination {...paginationProps} />
+		) : (
+			<ul class="space-y-6">
+				{posts.map((post) => (
+					<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
+						<PostPreview as="h2" post={post} />
+					</li>
+				))}
+			</ul>
+		)
+	}
 </PageLayout>