✨ feat: add pagination to blog

Author: NdagiStanley

gatsby-node.js

@@ -85,6 +85,30 @@ exports.createPages = async ({ graphql, actions }) => {
     fromPath: `/chat`,
     toPath: `https://discord.gg/KZRDXmTm9v`,
   })
+
+  createRedirect({
+    fromPath: `/blog/1/`,
+    toPath: `/blog/`,
+  })
+
+  // Create blog-list pages
+  const blogPostListPage = path.resolve('./src/templates/blog-post-list.js');
+  const blogPosts = allMarkdown.data.allMarkdownRemark.edges.filter(({ node }) => node.fields.slug.includes('blog/'));
+  const blogPostsPerPage = 3
+  const numPages = Math.ceil(blogPosts.length / blogPostsPerPage)
+
+  Array.from({ length: numPages }).forEach((_, i) => {
+    createPage({
+      path: i === 0 ? `/blog` : `/blog/${i + 1}`,
+      component: blogPostListPage,
+      context: {
+        limit: blogPostsPerPage,
+        skip: i * blogPostsPerPage,
+        numPages,
+        currentPage: i + 1,
+      },
+    })
+  })
 };
 
 function pad(n) {

src/pages/blog.js src/templates/blog-post-list.jssrc/pages/blog.js renamed to src/templates/blog-post-list.js

@@ -46,10 +46,12 @@ function Blog({ data }) {
 export default Blog;
 
 export const pageQuery = graphql`
-  query blogList {
+  query blogList ($skip: Int!, $limit: Int!) {
     allMarkdownRemark(
       filter: { fields: { slug: { regex: "/blog/" } } }
       sort: { frontmatter: { date: DESC } }
+      limit: $limit
+      skip: $skip
     ) {
       edges {
         node {