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()
+ const wrapper = shallow()
expect(wrapper).toMatchSnapshot()
})
})
diff --git a/src/templates/category-page/styles.css b/src/templates/category-page/styles.css
index e3fafe6..0e452f7 100644
--- a/src/templates/category-page/styles.css
+++ b/src/templates/category-page/styles.css
@@ -43,3 +43,16 @@
margin: 25px;
color: #5c5c5c;
}
+
+.content ul.pagination-list {
+ list-style: none;
+}
+
+.content ul.pagination-list,
+.content ul.pagination-list li {
+ margin: 0;
+}
+
+.content ul.pagination-list li *:last-child {
+ margin: .25rem;
+}