From 207dd6c223dde05c9429b4ccb2e3e35092da8157 Mon Sep 17 00:00:00 2001
From: Ritabrata Ghosh <76sonali40@gmail.com>
Date: Wed, 3 Dec 2025 18:19:15 +0530
Subject: [PATCH 1/2] feat: add pagination to blog page (10 posts per page)

---
 pages/blog/index.page.tsx | 49 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index b46ce6a13..bf3e3635d 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -102,6 +102,7 @@ export default function StaticMarkdownPage({
         .split(',')
         .filter(isValidCategory);
       setCurrentFilterTags(tags.length ? tags : ['All']);
+      setCurrentPage(1);
     }
   }, [router.query]);
 
@@ -190,6 +191,23 @@ export default function StaticMarkdownPage({
   });
   const allTags = ['All', ...Array.from(allTagsSet)];
 
+  // pagination implement
+  const POSTS_PER_PAGE = 10;
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const totalPages = Math.ceil(sortedFilteredPosts.length / POSTS_PER_PAGE);
+
+  useEffect(() => {
+    if (currentPage > totalPages) {
+      setCurrentPage(1);
+    }
+  }, [totalPages]);
+
+  const currentPagePosts = sortedFilteredPosts.slice(
+    (currentPage - 1) * POSTS_PER_PAGE,
+    currentPage * POSTS_PER_PAGE,
+  );
+
   return (
     // @ts-ignore
     <SectionContext.Provider value='blog'>
@@ -298,9 +316,38 @@ export default function StaticMarkdownPage({
           </span>
         </div>
 
+        {/* pagination control */}
+        <div className='flex justify-center items-center gap-4 my-5'>
+          <button
+            className={`px-4 py-2 rounded-md font-semibold ${
+              currentPage === 1
+                ? 'bg-gray-300 dark:bg-slate-600 cursor-not-allowed'
+                : 'bg-blue-600 text-white hover:bg-blue-700'
+            }`}
+            disabled={currentPage === 1}
+            onClick={() => setCurrentPage((p) => p - 1)}
+          >
+            Previous
+          </button>
+          <span className='text-lg font-medium dark:text-white'>
+            Page {currentPage} of {totalPages}
+          </span>
+          <button
+            className={`px-4 py-2 rounded-md font-semibold ${
+              currentPage === totalPages
+                ? 'bg-gray-300 dark:bg-slate-600 cursor-not-allowed'
+                : 'bg-blue-600 text-white hover:bg-blue-700'
+            }`}
+            disabled={currentPage === totalPages}
+            onClick={() => setCurrentPage((p) => p + 1)}
+          >
+            Next
+          </button>
+        </div>
+
         {/* Blog Posts Grid */}
         <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-6 grid-flow-row mb-20 bg-white dark:bg-slate-800 mx-auto p-4'>
-          {sortedFilteredPosts.map((blogPost: any, idx: number) => {
+          {currentPagePosts.map((blogPost: any, idx: number) => {
             const { frontmatter, content } = blogPost;
             const date = new Date(frontmatter.date);
             const postTimeToRead = Math.ceil(readingTime(content).minutes);

From 7e2ccf5b87be2222507adea982e693d39b7650d7 Mon Sep 17 00:00:00 2001
From: Ritabrata Ghosh <76sonali40@gmail.com>
Date: Sun, 7 Dec 2025 13:43:03 +0530
Subject: [PATCH 2/2] pagination navigation fix #1946

---
 pages/blog/index.page.tsx | 59 +++++++++++++++++++--------------------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index bf3e3635d..fca113153 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -316,37 +316,8 @@ export default function StaticMarkdownPage({
           </span>
         </div>
 
-        {/* pagination control */}
-        <div className='flex justify-center items-center gap-4 my-5'>
-          <button
-            className={`px-4 py-2 rounded-md font-semibold ${
-              currentPage === 1
-                ? 'bg-gray-300 dark:bg-slate-600 cursor-not-allowed'
-                : 'bg-blue-600 text-white hover:bg-blue-700'
-            }`}
-            disabled={currentPage === 1}
-            onClick={() => setCurrentPage((p) => p - 1)}
-          >
-            Previous
-          </button>
-          <span className='text-lg font-medium dark:text-white'>
-            Page {currentPage} of {totalPages}
-          </span>
-          <button
-            className={`px-4 py-2 rounded-md font-semibold ${
-              currentPage === totalPages
-                ? 'bg-gray-300 dark:bg-slate-600 cursor-not-allowed'
-                : 'bg-blue-600 text-white hover:bg-blue-700'
-            }`}
-            disabled={currentPage === totalPages}
-            onClick={() => setCurrentPage((p) => p + 1)}
-          >
-            Next
-          </button>
-        </div>
-
         {/* Blog Posts Grid */}
-        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-6 grid-flow-row mb-20 bg-white dark:bg-slate-800 mx-auto p-4'>
+        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-6 grid-flow-row mb-16 bg-white dark:bg-slate-800 mx-auto p-4'>
           {currentPagePosts.map((blogPost: any, idx: number) => {
             const { frontmatter, content } = blogPost;
             const date = new Date(frontmatter.date);
@@ -477,6 +448,34 @@ export default function StaticMarkdownPage({
             );
           })}
         </div>
+        {/* pagination control */}
+        <div className='flex justify-center items-center gap-4'>
+          <button
+            className={`px-4 py-2 rounded-md font-semibold ${
+              currentPage === 1
+                ? 'bg-gray-300 dark:bg-slate-600 cursor-not-allowed'
+                : 'bg-blue-600 text-white hover:bg-blue-700'
+            }`}
+            disabled={currentPage === 1}
+            onClick={() => setCurrentPage((p) => p - 1)}
+          >
+            Previous
+          </button>
+          <span className='text-lg font-medium dark:text-white'>
+            Page {currentPage} of {totalPages}
+          </span>
+          <button
+            className={`px-4 py-2 rounded-md font-semibold ${
+              currentPage === totalPages
+                ? 'bg-gray-300 dark:bg-slate-600 cursor-not-allowed'
+                : 'bg-blue-600 text-white hover:bg-blue-700'
+            }`}
+            disabled={currentPage === totalPages}
+            onClick={() => setCurrentPage((p) => p + 1)}
+          >
+            Next
+          </button>
+        </div>
       </div>
     </SectionContext.Provider>
   );