feat: add pagination to category page

astro.config.mjs

@@ -5,6 +5,9 @@ import tailwind from "@astrojs/tailwind";
 // https://astro.build/config
 export default defineConfig({
   site: "https://blog.log101.dev",
+  redirects: {
+    "/category/[category]": "/category/[category]/1",
+  },
   integrations: [
     tailwind({
       applyBaseStyles: false,

package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@astrojs/check": "^0.5.10",
     "@astrojs/tailwind": "^5.1.0",
-    "astro": "^4.7.0",
+    "astro": "^4.10.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
   },

src/components/Post.astro

@@ -39,7 +39,7 @@ switch (componentType) {
 // Options should not mutated further
 Object.freeze(options);
 
-// Format datae
+// Format date
 const postDateFormatted = post.data.date.toLocaleDateString("tr-TR", {
   day: "numeric",
   month: "long",
@@ -47,7 +47,7 @@ const postDateFormatted = post.data.date.toLocaleDateString("tr-TR", {
 });
 
 // Create post link
-const postLink = `/category/${post.data.category}/${post.slug}`;
+const postLink = `/category/${post.data.category}/posts/${post.slug}`;
 
 // Create post content as an astro component
 const { Content } = await post.render();

src/pages/category/[category]/[page].astro

@@ -7,28 +7,29 @@ import Footer from "@/components/Footer.astro";
 import Layout from "@/layouts/Layout.astro";
 import Post from "@/components/Post.astro";
 
-export function getStaticPaths() {
-  return CATEGORIES.map((category) => {
-    return {
+export async function getStaticPaths({ paginate }) {
+  const blogEntries = await getCollection("blog");
+  const filteredPosts = blogEntries.filter((post) => post.data.category);
+
+  return CATEGORIES.flatMap((category) => {
+    return paginate(filteredPosts, {
       params: { category },
-    };
+      pageSize: 3,
+    });
   });
 }
 
-const { category } = Astro.params;
+const { page } = Astro.props;
 
-const allTeknikPosts = await getCollection(
-  "blog",
-  (post) => post.data.category === category
-);
+const posts = page.data as Array<any>;
 ---
 
 <Layout title="log101">
   <Header />
   <div class="posts">
     {
-      allTeknikPosts.length > 0 ? (
-        allTeknikPosts
+      posts.length > 0 ? (
+        posts
           .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
           .map((p) => <Post post={p} componentType="long" />)
       ) : (

src/pages/category/[category]/posts/[slug]/index.astro

@@ -8,7 +8,6 @@ import Post from "@/components/Post.astro";
 import EmojiReactionForm from "@/components/EmojiReactionForm.astro";
 import CommentForm from "@/components/CommentForm.astro";
 import HorizontalLine from "@/components/HorizontalLine.astro";
-import Comment from "@/components/Comment.astro";
 
 const { entry } = Astro.props;
 
@@ -16,6 +15,7 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection("blog");
+
   return blogEntries.map((entry) => ({
     params: { category: entry.data.category, slug: entry.slug },
     props: { entry },