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,9 +74,25 @@ exports.createPages = ({ graphql, actions }) => {
           reject(result.errors)
         }
 
-        // Create Posts
         const posts = result.data.allMarkdownRemark.edges
 
+        // Generate posts & posts index
+        generateContent(createPage, posts)
+
+        // 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}`,
@@ -89,7 +103,19 @@ exports.createPages = ({ graphql, actions }) => {
     })
   })
 
-        // Category & Tag Pages
+  // 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()
 
@@ -108,6 +134,14 @@ exports.createPages = ({ graphql, actions }) => {
   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,
@@ -115,8 +149,30 @@ exports.createPages = ({ graphql, actions }) => {
     })
   })
 
-        resolve()
-      })
-    )
-  })
+  // 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