Add pagination

gatsby/on-create-node.js

@@ -2,10 +2,13 @@
 
 const _ = require('lodash');
 const { createFilePath } = require('gatsby-source-filesystem');
+const { fmImagesToRelative } = require('gatsby-remark-relative-images');
 
 const onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions;
 
+  fmImagesToRelative(node);
+
   if (node.internal.type === 'MarkdownRemark') {
     if (typeof node.frontmatter.path !== 'undefined') {
       createNodeField({
@@ -23,12 +26,12 @@ const onCreateNode = ({ node, actions, getNode }) => {
     }
 
     if (node.frontmatter.tags) {
-      const tagSlugs = node.frontmatter.tags.map((tag) => `/tags/${_.kebabCase(tag)}/`);
+      const tagSlugs = node.frontmatter.tags.map((tag) => `/tag/${_.kebabCase(tag)}/`);
       createNodeField({ node, name: 'tagSlugs', value: tagSlugs });
     }
 
     if (node.frontmatter.category) {
-      const categorySlug = `/categories/${_.kebabCase(node.frontmatter.category)}/`;
+      const categorySlug = `/category/${_.kebabCase(node.frontmatter.category)}/`;
       createNodeField({ node, name: 'categorySlug', value: categorySlug });
     }
   }

gatsby/pagination/create-categories-pages.js

@@ -6,6 +6,7 @@ const siteConfig = require('../../config.js');
 
 module.exports = async (graphql, actions) => {
   const { createPage } = actions;
+  const { postsPerPage } = siteConfig;
 
   const result = await graphql(`
     {
@@ -21,17 +22,22 @@ module.exports = async (graphql, actions) => {
   `);
 
   _.each(result.data.allMarkdownRemark.group, (category) => {
-    const numPages = Math.ceil(category.totalCount / siteConfig.postsPerPage);
+    const numPages = Math.ceil(category.totalCount / postsPerPage);
+    const categorySlug = `/category/${_.kebabCase(category.fieldValue)}`;
 
     for (let i = 0; i < numPages; i += 1) {
       createPage({
-        path: i === 0 ? `/category/${_.kebabCase(category.fieldValue)}` : `/category/${_.kebabCase(category.fieldValue)}/page/${i}`,
+        path: i === 0 ? categorySlug : `${categorySlug}/page/${i}`,
         component: path.resolve('./src/templates/category-template.js'),
         context: {
-          page: i,
           category: category.fieldValue,
-          limit: siteConfig.postsPerPage,
-          skip: i * siteConfig.postsPerPage,
+          currentPage: i,
+          postsLimit: postsPerPage,
+          postsOffset: i * postsPerPage,
+          prevPagePath: i <= 1 ? categorySlug : `${categorySlug}/page/${i - 1}`,
+          nextPagePath: `/${categorySlug}/page/${i + 1}`,
+          hasPrevPage: i !== 0,
+          hasNextPage: i !== numPages - 1
         }
       });
     }

gatsby/pagination/create-posts-pages.js

@@ -14,16 +14,21 @@ module.exports = async (graphql, actions) => {
     }
   `);
 
-  const numPages = Math.ceil(result.data.allMarkdownRemark.totalCount / siteConfig.postsPerPage);
+  const { postsPerPage } = siteConfig;
+  const numPages = Math.ceil(result.data.allMarkdownRemark.totalCount / postsPerPage);
 
   for (let i = 0; i < numPages; i += 1) {
     createPage({
       path: i === 0 ? '/' : `/page/${i}`,
       component: path.resolve('./src/templates/index-template.js'),
       context: {
-        page: i,
-        limit: siteConfig.postsPerPage,
-        skip: i * siteConfig.postsPerPage,
+        currentPage: i,
+        postsLimit: postsPerPage,
+        postsOffset: i * postsPerPage,
+        prevPagePath: i <= 1 ? '/' : `/page/${i - 1}`,
+        nextPagePath: `/page/${i + 1}`,
+        hasPrevPage: i !== 0,
+        hasNextPage: i !== numPages - 1
       }
     });
   }

gatsby/pagination/create-tags-pages.js

@@ -6,6 +6,7 @@ const siteConfig = require('../../config.js');
 
 module.exports = async (graphql, actions) => {
   const { createPage } = actions;
+  const { postsPerPage } = siteConfig;
 
   const result = await graphql(`
     {
@@ -21,17 +22,22 @@ module.exports = async (graphql, actions) => {
   `);
 
   _.each(result.data.allMarkdownRemark.group, (tag) => {
-    const numPages = Math.ceil(tag.totalCount / siteConfig.postsPerPage);
+    const numPages = Math.ceil(tag.totalCount / postsPerPage);
+    const tagSlug = `/tag/${_.kebabCase(tag.fieldValue)}`;
 
     for (let i = 0; i < numPages; i += 1) {
       createPage({
-        path: i === 0 ? `/tag/${_.kebabCase(tag.fieldValue)}` : `/tag/${_.kebabCase(tag.fieldValue)}/page/${i}`,
+        path: i === 0 ? tagSlug : `${tagSlug}/page/${i}`,
         component: path.resolve('./src/templates/tag-template.js'),
         context: {
-          page: i,
           tag: tag.fieldValue,
-          limit: siteConfig.postsPerPage,
-          skip: i * siteConfig.postsPerPage,
+          currentPage: i,
+          postsLimit: postsPerPage,
+          postsOffset: i * postsPerPage,
+          prevPagePath: i <= 1 ? tagSlug : `${tagSlug}/page/${i - 1}`,
+          nextPagePath: `${tagSlug}/page/${i + 1}`,
+          hasPrevPage: i !== 0,
+          hasNextPage: i !== numPages - 1
         }
       });
     }