From 13a637ab32c3ea83ed7b7f43fc8b72970306eb9f Mon Sep 17 00:00:00 2001
From: thuanbui <thuanbui87@gmail.com>
Date: Wed, 18 Mar 2026 13:10:21 +0900
Subject: [PATCH] feat: add pagination for tag and category

---
 .../[...page].astro}                          | 41 +++++++++----------
 .../{[tag].astro => [tag]/[...page].astro}    | 37 +++++++++--------
 2 files changed, 39 insertions(+), 39 deletions(-)
 rename src/pages/category/{[category].astro => [category]/[...page].astro} (58%)
 rename src/pages/tag/{[tag].astro => [tag]/[...page].astro} (62%)

diff --git a/src/pages/category/[category].astro b/src/pages/category/[category]/[...page].astro
similarity index 58%
rename from src/pages/category/[category].astro
rename to src/pages/category/[category]/[...page].astro
index f9ccce3..ed319ac 100644
--- a/src/pages/category/[category].astro
+++ b/src/pages/category/[category]/[...page].astro
@@ -3,30 +3,32 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 import { getCollection } from "astro:content";
 import Headline from "@/components/ui/Headline.astro";
 import PostItem from "@/components/blog/PostItem.astro";
+import Pagination from "@/components/ui/Pagination.astro";
+import type { GetStaticPathsOptions } from "astro";
 
-export async function getStaticPaths() {
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
   const allPosts = await getCollection("blog");
-  const posts = allPosts.filter((post) => post.data && post.data.pubDate); // Ensure published
+  const posts = allPosts.filter((post) => post.data && post.data.pubDate);
 
-  const categories = new Set();
+  const categories = new Set<string>();
   posts.forEach((post) => {
-    post.data.categories?.forEach((tag) => categories.add(tag));
+    post.data.categories?.forEach((cat) => categories.add(cat));
   });
 
-  return Array.from(categories).map((category) => {
-    return {
-      params: { category: category as string },
-      props: {
-        category,
-        posts: posts.filter((post) =>
-          post.data.categories?.includes(category as string),
-        ),
-      },
-    };
+  return Array.from(categories).flatMap((category) => {
+    const categoryPosts = posts
+      .filter((post) => post.data.categories?.includes(category))
+      .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+
+    return paginate(categoryPosts, {
+      params: { category },
+      pageSize: 6,
+    });
   });
 }
 
-const { category, posts } = Astro.props;
+const { page } = Astro.props;
+const { category } = Astro.params;
 
 const metadata = {
   title: `Category: ${category}`,
@@ -40,7 +42,7 @@ const metadata = {
       <Headline
         tagline="Category"
         title={category}
-        subtitle={`Showing ${posts.length} article${posts.length === 1 ? "" : "s"}.`}
+        subtitle={`Showing ${page.total} article${page.total === 1 ? "" : "s"}.`}
         classes={{
           container: "mb-12 text-center",
           title:
@@ -54,12 +56,9 @@ const metadata = {
       </div>
 
       <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-        {
-          posts
-            .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
-            .map((post) => <PostItem post={post} />)
-        }
+        {page.data.map((post) => <PostItem post={post} />)}
       </div>
+      <Pagination page={page} />
     </div>
   </section>
 </BaseLayout>
diff --git a/src/pages/tag/[tag].astro b/src/pages/tag/[tag]/[...page].astro
similarity index 62%
rename from src/pages/tag/[tag].astro
rename to src/pages/tag/[tag]/[...page].astro
index 5bed5c4..bffeb93 100644
--- a/src/pages/tag/[tag].astro
+++ b/src/pages/tag/[tag]/[...page].astro
@@ -3,28 +3,32 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 import { getCollection } from "astro:content";
 import Headline from "@/components/ui/Headline.astro";
 import PostItem from "@/components/blog/PostItem.astro";
+import Pagination from "@/components/ui/Pagination.astro";
+import type { GetStaticPathsOptions } from "astro";
 
-export async function getStaticPaths() {
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
   const allPosts = await getCollection("blog");
-  const posts = allPosts.filter((post) => post.data && post.data.pubDate); // Ensure published
+  const posts = allPosts.filter((post) => post.data && post.data.pubDate);
 
-  const tags = new Set();
+  const tags = new Set<string>();
   posts.forEach((post) => {
     post.data.tags?.forEach((tag) => tags.add(tag));
   });
 
-  return Array.from(tags).map((tag) => {
-    return {
-      params: { tag: tag as string },
-      props: {
-        tag,
-        posts: posts.filter((post) => post.data.tags?.includes(tag as string)),
-      },
-    };
+  return Array.from(tags).flatMap((tag) => {
+    const tagPosts = posts
+      .filter((post) => post.data.tags?.includes(tag))
+      .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+
+    return paginate(tagPosts, {
+      params: { tag },
+      pageSize: 6,
+    });
   });
 }
 
-const { tag, posts } = Astro.props;
+const { page } = Astro.props;
+const { tag } = Astro.params;
 
 const metadata = {
   title: `Posts tagged with '${tag}'`,
@@ -38,7 +42,7 @@ const metadata = {
       <Headline
         tagline="Tag"
         title={`#${tag}`}
-        subtitle={`Showing ${posts.length} article${posts.length === 1 ? "" : "s"}.`}
+        subtitle={`Showing ${page.total} article${page.total === 1 ? "" : "s"}.`}
         classes={{
           container: "mb-12 text-center",
           title:
@@ -52,12 +56,9 @@ const metadata = {
       </div>
 
       <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-        {
-          posts
-            .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
-            .map((post) => <PostItem post={post} />)
-        }
+        {page.data.map((post) => <PostItem post={post} />)}
       </div>
+      <Pagination page={page} />
     </div>
   </section>
 </BaseLayout>