From aab08105c96dea9170f1b72760cf342904e74616 Mon Sep 17 00:00:00 2001
From: DarkCat09 <a.chechkenev@yandex.ru>
Date: Sun, 23 Jul 2023 18:46:51 +0400
Subject: [PATCH] Using default Astro's `paginate` for pages

---
 astro.config.mjs                              |  2 +-
 .../blog/{page[n].astro => page[page].astro}  | 31 +++++++------------
 2 files changed, 13 insertions(+), 20 deletions(-)
 rename src/pages/blog/{page[n].astro => page[page].astro} (55%)

diff --git a/astro.config.mjs b/astro.config.mjs
index 04e7f8d..0e67b84 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -31,6 +31,6 @@ export default defineConfig({
     ],
   },
   redirects: {
-    "/blog": "/blog/page0",
+    "/blog": "/blog/page1",
   }
 });
\ No newline at end of file
diff --git a/src/pages/blog/page[n].astro b/src/pages/blog/page[page].astro
similarity index 55%
rename from src/pages/blog/page[n].astro
rename to src/pages/blog/page[page].astro
index 435334e..f97ab92 100644
--- a/src/pages/blog/page[n].astro
+++ b/src/pages/blog/page[page].astro
@@ -4,29 +4,22 @@ import ArticleCard from "../../components/ArticleCard.astro";
 
 import { getCollection } from "astro:content";
 
-export async function getStaticPaths() {
+export async function getStaticPaths({ paginate }) {
     const POSTS_ON_PAGE = 15;
 
-    const posts = (await getCollection('blog')).sort(
-        // sort by slug (which includes date), desc
-        (a, b) => (a.slug < b.slug) ? 1 : -1
-    );
-    const count = Math.ceil(posts.length / POSTS_ON_PAGE);
-    const paths = [];
+    const posts = (await getCollection('blog'))
+        .sort(  // sort by slug (which includes date), desc
+            (a, b) => (a.slug < b.slug) ? 1 : -1
+        )
+        .map(  // convert to objects
+            p => { return { post: p } }
+        );
 
-    for (let n = 0; n < count; n++) {
-        paths.push({
-            params: { n: n },
-            props: {
-                posts: posts.slice(n, n + POSTS_ON_PAGE + 1),
-            },
-        });
-    }
-
-    return paths;
+    // use Astro's function
+    return paginate(posts, { pageSize: POSTS_ON_PAGE });
 }
 
-const posts: Array<any> = Astro.props.posts;
+const { page } = Astro.props;
 const description =
     "DarkCat09's blog. " +
     "Reading a QR code without a phone, " +
@@ -40,7 +33,7 @@ const description =
         <meta name="robots" content="noindex, follow" />
     </Fragment>
     <div id="articles">
-        {posts.map(post => <ArticleCard post={post} />)}
+        {page.data.map(({ post }) => <ArticleCard post={post} />)}
     </div>
 </BlogLayout>