working front page pagination

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)
+// }

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",

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] }

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 }) => {
             <PostLinkActions slug={slug} linkurl={linkurl} />
           </Fragment>
         )}
+        <div>
+          {previousPagePath ? (
+            <Link to={previousPagePath}>Previous</Link>
+          ) : null}
+          {nextPagePath ? <Link to={nextPagePath}>Next</Link> : null}
+        </div>
       </article>
     )
   })
@@ -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