From 98cae1e03464547ffdde196ccf9c46bb825eb024 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 4 Sep 2018 02:57:39 +0200 Subject: [PATCH] working front page pagination --- gatsby-node.js | 132 +++++++++++++----- package.json | 3 +- src/templates/Archive.jsx | 2 +- src/{pages/index.jsx => templates/Posts.jsx} | 20 ++- .../Posts.module.scss} | 0 5 files changed, 113 insertions(+), 44 deletions(-) rename src/{pages/index.jsx => templates/Posts.jsx} (78%) rename src/{pages/index.module.scss => templates/Posts.module.scss} (100%) diff --git a/gatsby-node.js b/gatsby-node.js index 195523e5..8c7c758e 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,5 +1,6 @@ const path = require('path') const { createFilePath } = require('gatsby-source-filesystem') +const { paginate } = require('gatsby-awesome-pagination') // Create slug & date for posts from file path values exports.onCreateNode = ({ node, actions, getNode }) => { @@ -46,9 +47,6 @@ exports.createPages = ({ graphql, actions }) => { const { createPage } = actions return new Promise((resolve, reject) => { - const postTemplate = path.resolve('src/templates/Post.jsx') - const archiveTemplate = path.resolve('src/templates/Archive.jsx') - resolve( graphql( ` @@ -76,47 +74,105 @@ exports.createPages = ({ graphql, actions }) => { reject(result.errors) } - // Create Posts const posts = result.data.allMarkdownRemark.edges - posts.forEach(post => { - createPage({ - path: `${post.node.fields.slug}`, - component: postTemplate, - context: { - slug: post.node.fields.slug - } - }) - }) + // Generate posts & posts index + generateContent(createPage, posts) - // Category & Tag Pages - const tagSet = new Set() - const tagMap = new Map() - - posts.forEach(post => { - if (post.node.frontmatter.tags) { - post.node.frontmatter.tags.forEach(tag => { - tagSet.add(tag) - - const array = tagMap.has(tag) ? tagMap.get(tag) : [] - array.push(post) - tagMap.set(tag, array) - }) - } - }) - - const tagList = Array.from(tagSet) - - tagList.forEach(tag => { - createPage({ - path: `/tag/${tag}/`, - component: archiveTemplate, - context: { tag } - }) - }) + // Generate Tag Pages + createTagPages(createPage, posts) resolve() }) ) }) } + +const generateContent = (createPage, posts) => { + const postTemplate = path.resolve('src/templates/Post.jsx') + const postsTemplate = path.resolve('src/templates/Posts.jsx') + + // Create Post pages + posts.forEach(post => { + createPage({ + path: `${post.node.fields.slug}`, + component: postTemplate, + context: { + slug: post.node.fields.slug + } + }) + }) + + // Create paginated front page + paginate({ + createPage, + items: posts, + itemsPerPage: 5, + pathPrefix: '/', + component: postsTemplate + }) +} + +const createTagPages = (createPage, posts) => { + const archiveTemplate = path.resolve('src/templates/Archive.jsx') + + const tagSet = new Set() + const tagMap = new Map() + + posts.forEach(post => { + if (post.node.frontmatter.tags) { + post.node.frontmatter.tags.forEach(tag => { + tagSet.add(tag) + + const array = tagMap.has(tag) ? tagMap.get(tag) : [] + array.push(post) + tagMap.set(tag, array) + }) + } + }) + + const tagList = Array.from(tagSet) + + tagList.forEach(tag => { + // Create paginated tag pages + // paginate({ + // createPage, + // items: tagList, // An array of objects + // itemsPerPage: 5, + // pathPrefix: `/tag/${tag.toLowerCase()}`, + // component: archiveTemplate + // }) + createPage({ + path: `/tag/${tag}/`, + component: archiveTemplate, + context: { tag } + }) + }) + + // Object.keys(posts).forEach(tagName => { + // const pageSize = 5 + // const pagesSum = Math.ceil(posts[tagName].length / pageSize) + + // for (let page = 1; page <= pagesSum; page++) { + // createPage({ + // path: + // page === 1 + // ? `/tag/${tagName.toLowerCase()}` + // : `/tag/${tagName.toLowerCase()}/page/${page}`, + // component: tagTemplate, + // context: { + // posts: paginate(posts[tagName], pageSize, page), + // tag: tagName, + // pagesSum, + // page + // } + // }) + // } + // }) +} + +// function paginate(array, page_size, page_number) { +// return array +// .slice(0) +// .slice((page_number - 1) * page_size, page_number * page_size) +// } diff --git a/package.json b/package.json index afd00c46..138fb069 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "last 3 versions" ], "dependencies": { - "gatsby": "^2.0.0-rc.8", + "gatsby": "^2.0.0-rc.9", + "gatsby-awesome-pagination": "^0.1.1", "gatsby-image": "^2.0.0-rc.1", "gatsby-plugin-catch-links": "^2.0.2-rc.1", "gatsby-plugin-lunr": "^1.1.0", diff --git a/src/templates/Archive.jsx b/src/templates/Archive.jsx index 5ec53736..07e6fb89 100644 --- a/src/templates/Archive.jsx +++ b/src/templates/Archive.jsx @@ -39,7 +39,7 @@ Archive.propTypes = { export default Archive export const archiveQuery = graphql` - query($tag: String) { + query($tag: String!) { tag: allMarkdownRemark( filter: { frontmatter: { tags: { eq: $tag } } } sort: { order: DESC, fields: [fields___date] } diff --git a/src/pages/index.jsx b/src/templates/Posts.jsx similarity index 78% rename from src/pages/index.jsx rename to src/templates/Posts.jsx index 2151e2e2..7af576c7 100644 --- a/src/pages/index.jsx +++ b/src/templates/Posts.jsx @@ -9,10 +9,11 @@ import PostContent from '../components/atoms/PostContent' import PostMore from '../components/atoms/PostMore' import PostLinkActions from '../components/atoms/PostLinkActions' import postStyles from '../templates/Post.module.scss' -import styles from './index.module.scss' +import styles from './Posts.module.scss' -const IndexPage = ({ data, location }) => { +const IndexPage = ({ data, location, pageContext }) => { const edges = data.allMarkdownRemark.edges + const { previousPagePath, nextPagePath } = pageContext const Posts = edges.map(({ node }) => { const { type, linkurl, title, image } = node.frontmatter @@ -40,6 +41,12 @@ const IndexPage = ({ data, location }) => { )} +
+ {previousPagePath ? ( + Previous + ) : null} + {nextPagePath ? Next : null} +
) }) @@ -49,14 +56,19 @@ const IndexPage = ({ data, location }) => { IndexPage.propTypes = { data: PropTypes.object.isRequired, + pageContext: PropTypes.object.isRequired, location: PropTypes.object.isRequired } export default IndexPage export const indexQuery = graphql` - query { - allMarkdownRemark(sort: { order: DESC, fields: [fields___date] }) { + query($skip: Int!, $limit: Int!) { + allMarkdownRemark( + sort: { order: DESC, fields: [fields___date] } + skip: $skip + limit: $limit + ) { edges { node { id diff --git a/src/pages/index.module.scss b/src/templates/Posts.module.scss similarity index 100% rename from src/pages/index.module.scss rename to src/templates/Posts.module.scss