Merge pull request uidotdev#33 from danedavid/pagination

Add pagination using gatsby-paginate. Fixes uidotdev#4.

Author: gragland

gatsby-node.js

@@ -1,5 +1,6 @@
 const path = require("path");
 const { createFilePath } = require("gatsby-source-filesystem");
+const createPaginatedPages = require('gatsby-paginate');
 
 exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions;
@@ -13,12 +14,24 @@ exports.createPages = ({ actions, graphql }) => {
         edges {
           node {
             id
+            excerpt(pruneLength: 400)
+            html
             fields {
               slug
             }
             frontmatter {
               templateKey
               title
+              date(formatString: "MMMM DD, YYYY")
+              composes
+              gist
+              sandbox
+              links {
+                url
+                name
+                description
+              }
+              code
             }
           }
         }
@@ -32,6 +45,15 @@ exports.createPages = ({ actions, graphql }) => {
 
     let posts = result.data.allMarkdownRemark.edges;
 
+    createPaginatedPages({
+      edges: posts,
+      createPage: createPage,
+      pageTemplate: 'src/templates/index.js',
+      pageLength: 5, // This is optional and defaults to 10 if not used
+      pathPrefix: '', // This is optional and defaults to an empty string if not used
+      context: {}, // This is optional and defaults to an empty object if not used
+    });
+
     posts.forEach((edge, index) => {
       const id = edge.node.id;
 

package-lock.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "babel-plugin-styled-components": "^1.10.0",
     "gatsby": "^2.0.85",
+    "gatsby-paginate": "^1.0.17",
     "gatsby-plugin-catch-links": "^2.0.10",
     "gatsby-plugin-feed": "^2.0.11",
     "gatsby-plugin-react-helmet": "^3.0.5",

package.json

@@ -118,7 +118,7 @@ const GitHubLink = () => {
       href="https://github.com/gragland/usehooks"
     >
       <i
-        class="fab fa-github"
+        className="fab fa-github"
         style={{
           position: "absolute",
           fontSize: "1.5rem",

src/components/Layout.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export default styled.div`
+  display: flex;
+  justify-content: space-between;
+`;

src/components/PaginationContainer.js

@@ -12,8 +12,8 @@ export default ({ value, onChange }) => {
           value={value}
           onChange={({ target: { value } }) => onChange(value)}
         />
-        <span class="icon is-small is-left">
-          <i class="fas fa-search" />
+        <span className="icon is-small is-left">
+          <i className="fas fa-search" />
         </span>
       </div>
     </div>

src/components/Search.js

@@ -2,18 +2,29 @@ import React from "react";
 import styled from "styled-components";
 import { Link } from "gatsby";
 import Layout from "../components/Layout";
+import PaginationContainer from "../components/PaginationContainer";
 import Search from "../components/Search";
 import { PostTemplate } from "../templates/post.js";
 
+const NavLink = props => {
+  if (!props.test) {
+    return <Link to={`/${props.url}`}>{props.text}</Link>
+  } else {
+    return <span>{props.text}</span>
+  }
+};
+
 class IndexPage extends React.Component {
   state = { search: "" };
 
   render() {
-    const { data } = this.props;
+    const { pageContext } = this.props;
+    const { group, index, first, last, pageCount } = pageContext;
+    const previousUrl = index - 1 == 1 ? '' : (index - 1).toString();
+    const nextUrl = (index + 1).toString()
     const { search } = this.state;
-    const { edges: posts } = data.allMarkdownRemark;
 
-    const filteredPosts = search ? searchPosts(posts, search) : posts;
+    // const filteredPosts = search ? searchPosts(posts, search) : posts;
 
     return (
       <Layout>
@@ -24,54 +35,26 @@ class IndexPage extends React.Component {
         />
         */}
 
-        {filteredPosts.map(post => (
+        {group.map(({ node }) => (
           <PostTemplate
-            content={post.node.html}
-            frontmatter={post.node.frontmatter}
-            slug={post.node.fields.slug}
+            key={node.id}
+            content={node.excerpt}
+            frontmatter={node.frontmatter}
+            slug={node.fields.slug}
           />
         ))}
+        <PaginationContainer>
+          <NavLink test={first} url={previousUrl} text="<<< Previous" />
+          <span>{` Page ${index} of ${pageCount}`}</span>
+          <NavLink test={last} url={nextUrl} text="Next >>>" />  
+        </PaginationContainer>
       </Layout>
     );
   }
 }
 
 export default IndexPage;
 
-export const pageQuery = graphql`
-  query IndexQuery {
-    allMarkdownRemark(
-      sort: { order: DESC, fields: [frontmatter___date] }
-      filter: { frontmatter: { templateKey: { eq: "post" } } }
-    ) {
-      edges {
-        node {
-          excerpt(pruneLength: 400)
-          id
-          html
-          fields {
-            slug
-          }
-          frontmatter {
-            templateKey
-            title
-            date(formatString: "MMMM DD, YYYY")
-            composes
-            gist
-            sandbox
-            links {
-              url
-              name
-              description
-            }
-            code
-          }
-        }
-      }
-    }
-  }
-`;
-
 // Quicky and hacky search
 function searchPosts(posts, search) {
   // Store title matches for quick lookup
@@ -104,4 +87,4 @@ function searchPosts(posts, search) {
   // Add description matches to end of results
   const filteredPosts = filterPostsByTitle.concat(filterPostsByDescription);
   return filteredPosts;
-}
+}