layouts/ListLayout.js

@@ -6,13 +6,17 @@ import Pagination from '@/components/Pagination'
 
 const postDateTemplate = { year: 'numeric', month: 'long', day: 'numeric' }
 
-export default function ListLayout({ posts, title, pagination }) {
+export default function ListLayout({ posts, title, initialDisplayPosts = [], pagination }) {
   const [searchValue, setSearchValue] = useState('')
   const filteredBlogPosts = posts.filter((frontMatter) => {
     const searchContent = frontMatter.title + frontMatter.summary + frontMatter.tags.join(' ')
     return searchContent.toLowerCase().includes(searchValue.toLowerCase())
   })
 
+  // If initialDisplayPosts exist, display it if no searchValue is specified
+  const displayPosts =
+    initialDisplayPosts.length > 0 && !searchValue ? initialDisplayPosts : filteredBlogPosts
+
   return (
     <>
       <div className="divide-y">
@@ -46,7 +50,7 @@ export default function ListLayout({ posts, title, pagination }) {
         </div>
         <ul>
           {!filteredBlogPosts.length && 'No posts found.'}
-          {filteredBlogPosts.map((frontMatter) => {
+          {displayPosts.map((frontMatter) => {
             const { slug, date, title, summary, tags } = frontMatter
             return (
               <li key={slug} className="py-4">
@@ -82,7 +86,7 @@ export default function ListLayout({ posts, title, pagination }) {
           })}
         </ul>
       </div>
-      {pagination && (
+      {pagination && !searchValue && (
         <Pagination currentPage={pagination.currentPage} totalPages={pagination.totalPages} />
       )}
     </>

pages/blog.js

@@ -3,20 +3,20 @@ import siteMetadata from '@/data/siteMetadata'
 import ListLayout from '@/layouts/ListLayout'
 import { PageSeo } from '@/components/SEO'
 
-export const POSTS_PER_PAGE = 10
+export const POSTS_PER_PAGE = 5
 
 export async function getStaticProps() {
-  const getPosts = await getAllFilesFrontMatter('blog')
-  const posts = getPosts.splice(0, POSTS_PER_PAGE)
+  const posts = await getAllFilesFrontMatter('blog')
+  const initialDisplayPosts = posts.slice(0, POSTS_PER_PAGE)
   const pagination = {
     currentPage: 1,
-    totalPages: Math.ceil(getPosts.length / POSTS_PER_PAGE) + 1,
+    totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
   }
 
-  return { props: { posts, pagination } }
+  return { props: { initialDisplayPosts, posts, pagination } }
 }
 
-export default function Blog({ posts, pagination }) {
+export default function Blog({ posts, initialDisplayPosts, pagination }) {
   return (
     <>
       <PageSeo
@@ -24,7 +24,12 @@ export default function Blog({ posts, pagination }) {
         description={siteMetadata.description}
         url={`${siteMetadata.siteUrl}/blog`}
       />
-      <ListLayout posts={posts} pagination={pagination} title="All Posts" />
+      <ListLayout
+        posts={posts}
+        initialDisplayPosts={initialDisplayPosts}
+        pagination={pagination}
+        title="All Posts"
+      />
     </>
   )
 }

pages/blog/page/[page].js

@@ -8,7 +8,7 @@ export async function getStaticPaths() {
   const totalPosts = await getAllFilesFrontMatter('blog')
   const totalPages = Math.ceil(totalPosts.length / POSTS_PER_PAGE)
   const paths = Array.from({ length: totalPages }, (_, i) => ({
-    params: { page: '' + (i + 1) },
+    params: { page: (i + 1).toString() },
   }))
 
   return {
@@ -21,26 +21,27 @@ export async function getStaticProps(context) {
   const {
     params: { page },
   } = context
-  const getPosts = await getAllFilesFrontMatter('blog')
+  const posts = await getAllFilesFrontMatter('blog')
   const pageNumber = parseInt(page)
-  const postsPerPage = getPosts.slice(
+  const initialDisplayPosts = posts.slice(
     POSTS_PER_PAGE * (pageNumber - 1),
     POSTS_PER_PAGE * pageNumber
   )
   const pagination = {
     currentPage: pageNumber,
-    totalPages: Math.ceil(getPosts.length / POSTS_PER_PAGE),
+    totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
   }
 
   return {
     props: {
-      postsPerPage,
+      posts,
+      initialDisplayPosts,
       pagination,
     },
   }
 }
 
-export default function PostPage({ postsPerPage, pagination }) {
+export default function PostPage({ posts, initialDisplayPosts, pagination }) {
   return (
     <>
       <PageSeo
@@ -48,7 +49,12 @@ export default function PostPage({ postsPerPage, pagination }) {
         description={siteMetadata.description}
         url={`${siteMetadata.siteUrl}/blog/${pagination.currentPage}`}
       />
-      <ListLayout posts={postsPerPage} pagination={pagination} title="All Posts" />
+      <ListLayout
+        posts={posts}
+        initialDisplayPosts={initialDisplayPosts}
+        pagination={pagination}
+        title="All Posts"
+      />
     </>
   )
 }