diff --git a/gatsby-node.js b/gatsby-node.js index 97a13cc..0035aa5 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -94,6 +94,28 @@ exports.createPages = ({ actions, graphql }) => { return Promise.reject(result.errors) } + const categories = result.data.allMarkdownRemark.edges.reduce((acc, { node: { fields: { category }}}) => ({ + ...acc, + [category]: acc.hasOwnProperty(category) ? acc[category] + 1 : 1 + }), {}) + const postsPerPage = 9 + for (let cat in categories) { + const numPages = Math.ceil(categories[cat] / postsPerPage) + for (let i of Array(numPages).keys()) { + createPage({ + path: i === 0 ? `/${cat}` : `/${cat}/${i + 1}`, + component: categoryTemplate, + context: { + category: cat, + skip: i * postsPerPage, + limit: postsPerPage, + numPages, + currentPage: i + 1 + } + }) + } + } + result.data.allMarkdownRemark.edges.forEach(({ node }) => { const { fields: { category, slug } = {}, @@ -102,14 +124,6 @@ exports.createPages = ({ actions, graphql }) => { const url = path.join('/', category.toLowerCase(), pathToMaterial) - createPage({ - path: category, - component: categoryTemplate, - context: { - category, - }, - }) - createPage({ path: slug, component: blogPostTemplate, diff --git a/src/templates/category-page/__snapshots__/spec.js.snap b/src/templates/category-page/__snapshots__/spec.js.snap index 8f6d662..b2ee297 100644 --- a/src/templates/category-page/__snapshots__/spec.js.snap +++ b/src/templates/category-page/__snapshots__/spec.js.snap @@ -7,6 +7,7 @@ exports[`Template matches the snapshot 1`] = `
} > @@ -95,6 +96,55 @@ exports[`Template matches the snapshot 1`] = ` title="New Title 2" /> + diff --git a/src/templates/category-page/index.js b/src/templates/category-page/index.js index c7e09ff..8f781ee 100644 --- a/src/templates/category-page/index.js +++ b/src/templates/category-page/index.js @@ -1,6 +1,6 @@ import React, { useState } from 'react' import Helmet from 'react-helmet' -import { graphql } from 'gatsby' +import { graphql, Link } from 'gatsby' import Fuse from 'fuse.js' import Layout from '../../components/Layout' @@ -13,7 +13,11 @@ import './styles.css' import '../material-page/styles.css' export default function Template({ data = {}, pageContext = {} }) { - const { category } = pageContext + const { category, currentPage, numPages } = pageContext + const isFirst = currentPage === 1 + const isLast = currentPage === numPages + const prevPage = currentPage - 1 <= 1 ? `/${category}` : `/${category}/${(currentPage - 1).toString()}` + const nextPage = `/${category}/${(currentPage + 1).toString()}` const { allMarkdownRemark: { edges = [] } = {} } = data @@ -142,6 +146,29 @@ export default function Template({ data = {}, pageContext = {} }) { ) })} + @@ -150,8 +177,12 @@ export default function Template({ data = {}, pageContext = {} }) { } export const pageQuery = graphql` - query MaterialsByCategory($category: String!) { - allMarkdownRemark(filter: { fields: { category: { eq: $category } } }) { + query MaterialsByCategory($category: String!, $skip: Int!, $limit: Int!) { + allMarkdownRemark( + filter: { fields: { category: { eq: $category } } } + limit: $limit + skip: $skip + ) { edges { node { fields { diff --git a/src/templates/category-page/spec.js b/src/templates/category-page/spec.js index 10d9011..ad3b2a7 100644 --- a/src/templates/category-page/spec.js +++ b/src/templates/category-page/spec.js @@ -56,9 +56,15 @@ const graphResult = { }, } +const pageContext = { + category: 'random', + currentPage: 2, + numPages: 3 +} + describe('Template', () => { it('matches the snapshot', () => { - const wrapper = shallow(