✨ feat: add pagination to blog

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.js

@@ -9,8 +9,14 @@ import MetaInfo from '../components/meta-info';
 import Page from '../components/page';
 import Lead from '../components/lead';
 import theme from '../theme';
+import Button from '../components/button';
 
-function Blog({ data }) {
+function Blog({ data, pageContext }) {
+  const { currentPage, limit, numPages, skip } = pageContext
+  const isFirst = currentPage === 1
+  const isLast = currentPage === numPages
+  const prevPage = currentPage - 1 === 1 ? "" : (currentPage - 1).toString()
+  const nextPage = (currentPage + 1).toString()
   return (
     <Layout>
       <Helmet>
@@ -36,7 +42,25 @@ function Blog({ data }) {
               <Lead>{node.frontmatter.description}</Lead>
             </article>
           ))}
-          {/* TODO: pagination */}
+          <div css={css`
+            display: flex;
+            justify-content: space-between;
+          `}>
+          {!isFirst && (
+            <Button href={`/blog/${prevPage}`} rel="prev" className='primary' css={css`
+              margin: ${theme.space[4]} 0;
+            `}>
+              ← Previous Page
+            </Button>
+          )}
+          {!isLast && (
+            <Button href={`/blog/${nextPage}`} rel="next" className='primary' css={css`
+              margin: ${theme.space[4]} 0;
+            `}>
+              Next Page →
+            </Button>
+          )}
+          </div>
         </Container>
       </Page>
     </Layout>
@@ -46,10 +70,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 {