From 0138b89cc7ea80a927f2cd965bc169eb010137ba Mon Sep 17 00:00:00 2001
From: Joan Mira <joanmira@gmail.com>
Date: Thu, 13 Dec 2018 16:32:12 +0100
Subject: [PATCH 1/4] Update gatsby-node.js

---
 gatsby-node.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/gatsby-node.js b/gatsby-node.js
index 7aff098..84ff703 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -137,6 +137,23 @@ exports.createPages = ({ graphql, actions }) => {
             }
           });
         });
+        
+        // Create blog post list pages
+        const postsPerPage = 5;
+        const numPages = Math.ceil(posts.length / postsPerPage);
+
+        _.times(numPages, i => {
+          createPage({
+            path: i === 0 ? `/` : `/${i + 1}`,
+            component: path.resolve("./src/templates/index.js"),
+            context: {
+              limit: postsPerPage,
+              skip: i * postsPerPage,
+              numPages,
+              currentPage: i + 1
+            }
+          });
+        });
       })
     );
   });

From d55d2938f36704a97fd3ce4aae48cc83efed8256 Mon Sep 17 00:00:00 2001
From: Joan Mira <joanmira@gmail.com>
Date: Thu, 13 Dec 2018 16:32:50 +0100
Subject: [PATCH 2/4] Delete index.js

---
 src/pages/index.js | 130 ---------------------------------------------
 1 file changed, 130 deletions(-)
 delete mode 100644 src/pages/index.js

diff --git a/src/pages/index.js b/src/pages/index.js
deleted file mode 100644
index d4b4a61..0000000
--- a/src/pages/index.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { graphql } from "gatsby";
-import { ThemeContext } from "../layouts";
-import Blog from "../components/Blog";
-import Hero from "../components/Hero";
-import Seo from "../components/Seo";
-
-class IndexPage extends React.Component {
-  separator = React.createRef();
-
-  scrollToContent = e => {
-    this.separator.current.scrollIntoView({ block: "start", behavior: "smooth" });
-  };
-
-  render() {
-    const {
-      data: {
-        posts: { edges: posts = [] },
-        bgDesktop: {
-          resize: { src: desktop }
-        },
-        bgTablet: {
-          resize: { src: tablet }
-        },
-        bgMobile: {
-          resize: { src: mobile }
-        },
-        site: {
-          siteMetadata: { facebook }
-        }
-      }
-    } = this.props;
-
-    const backgrounds = {
-      desktop,
-      tablet,
-      mobile
-    };
-
-    return (
-      <React.Fragment>
-        <ThemeContext.Consumer>
-          {theme => (
-            <Hero scrollToContent={this.scrollToContent} backgrounds={backgrounds} theme={theme} />
-          )}
-        </ThemeContext.Consumer>
-
-        <hr ref={this.separator} />
-
-        <ThemeContext.Consumer>
-          {theme => <Blog posts={posts} theme={theme} />}
-        </ThemeContext.Consumer>
-
-        <Seo facebook={facebook} />
-
-        <style jsx>{`
-          hr {
-            margin: 0;
-            border: 0;
-          }
-        `}</style>
-      </React.Fragment>
-    );
-  }
-}
-
-IndexPage.propTypes = {
-  data: PropTypes.object.isRequired
-};
-
-export default IndexPage;
-
-//eslint-disable-next-line no-undef
-export const query = graphql`
-  query IndexQuery {
-    posts: allMarkdownRemark(
-      filter: { fileAbsolutePath: { regex: "//posts/[0-9]+.*--/" } }
-      sort: { fields: [fields___prefix], order: DESC }
-    ) {
-      edges {
-        node {
-          excerpt
-          fields {
-            slug
-            prefix
-          }
-          frontmatter {
-            title
-            category
-            author
-            cover {
-              children {
-                ... on ImageSharp {
-                  fluid(maxWidth: 800, maxHeight: 360) {
-                    ...GatsbyImageSharpFluid_withWebp
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    site {
-      siteMetadata {
-        facebook {
-          appId
-        }
-      }
-    }
-    bgDesktop: imageSharp(fluid: { originalName: { regex: "/hero-background/" } }) {
-      resize(width: 1200, quality: 90, cropFocus: CENTER) {
-        src
-      }
-    }
-    bgTablet: imageSharp(fluid: { originalName: { regex: "/hero-background/" } }) {
-      resize(width: 800, height: 1100, quality: 90, cropFocus: CENTER) {
-        src
-      }
-    }
-    bgMobile: imageSharp(fluid: { originalName: { regex: "/hero-background/" } }) {
-      resize(width: 450, height: 850, quality: 90, cropFocus: CENTER) {
-        src
-      }
-    }
-  }
-`;
-
-//hero-background

From 5976a59b564cdce4cd80f3bea658081a3c3a65f4 Mon Sep 17 00:00:00 2001
From: Joan Mira <joanmira@gmail.com>
Date: Thu, 13 Dec 2018 16:33:28 +0100
Subject: [PATCH 3/4] Create index.js

---
 src/templates/index.js | 191 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 src/templates/index.js

diff --git a/src/templates/index.js b/src/templates/index.js
new file mode 100644
index 0000000..6fe5dab
--- /dev/null
+++ b/src/templates/index.js
@@ -0,0 +1,191 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { Link, graphql } from "gatsby";
+import { ThemeContext } from "../layouts";
+import Blog from "../components/Blog";
+import Hero from "../components/Hero";
+import Seo from "../components/Seo";
+
+class IndexPage extends React.Component {
+  separator = React.createRef();
+
+  scrollToContent = e => {
+    this.separator.current.scrollIntoView({ block: "start", behavior: "smooth" });
+  };
+
+  render() {
+    const { currentPage, numPages } = this.props.pageContext;
+    const isFirst = currentPage === 1 || !currentPage;
+    const isLast = currentPage === numPages;
+    const prevPage = currentPage - 1 === 1 ? "/" : (currentPage - 1).toString();
+    const nextPage = (currentPage + 1).toString();
+
+    const {
+      data: {
+        posts: { edges: posts = [] },
+        bgDesktop: {
+          resize: { src: desktop }
+        },
+        bgTablet: {
+          resize: { src: tablet }
+        },
+        bgMobile: {
+          resize: { src: mobile }
+        }
+      }
+    } = this.props;
+
+    const backgrounds = {
+      desktop,
+      tablet,
+      mobile
+    };
+
+    return (
+      <React.Fragment>
+        {isFirst ? (
+          <React.Fragment>
+            <ThemeContext.Consumer>
+              {theme => (
+                <Hero
+                  scrollToContent={this.scrollToContent}
+                  backgrounds={backgrounds}
+                  theme={theme}
+                />
+              )}
+            </ThemeContext.Consumer>
+
+            <hr ref={this.separator} />
+          </React.Fragment>
+        ) : null}
+
+        <ThemeContext.Consumer>
+          {theme => <Blog posts={posts} theme={theme} />}
+        </ThemeContext.Consumer>
+
+        <div
+          style={{
+            maxWidth: "700px",
+            margin: "0 auto 20px auto",
+            textAlign: "center"
+          }}
+        >
+          {!isFirst && (
+            <Link to={prevPage} rel="prev">
+              ← Previous Page&nbsp;
+            </Link>
+          )}
+
+          {!isLast && (
+            <Link to={nextPage} rel="next">
+              &nbsp;Next Page →
+            </Link>
+          )}
+        </div>
+
+        <ul
+          style={{
+            display: "flex",
+            flexWrap: "wrap",
+            maxWidth: "700px",
+            margin: "0 auto 60px auto",
+            alignItems: "center",
+            listStyle: "none",
+            padding: 0,
+            lineHeight: "30px"
+          }}
+        >
+          {Array.from({ length: numPages }, (_, i) => (
+            <li
+              key={`pagination-number${i + 1}`}
+              style={{
+                margin: 0
+              }}
+            >
+              <Link
+                to={`/${i === 0 ? "" : i + 1}`}
+                style={{
+                  padding: "3px 8px",
+                  borderRadius: "5px",
+                  textDecoration: "none",
+                  color: i + 1 === currentPage ? "#ffffff" : "",
+                  background: i + 1 === currentPage ? "#007acc" : ""
+                }}
+              >
+                {i + 1}
+              </Link>
+            </li>
+          ))}
+        </ul>
+
+        <Seo />
+
+        <style jsx>{`
+          hr {
+            margin: 0;
+            border: 0;
+          }
+        `}</style>
+      </React.Fragment>
+    );
+  }
+}
+
+IndexPage.propTypes = {
+  data: PropTypes.object.isRequired,
+  pageContext: PropTypes.object.isRequired
+};
+
+export default IndexPage;
+
+//eslint-disable-next-line no-undef
+export const query = graphql`
+  query IndexQuery($skip: Int!, $limit: Int!) {
+    posts: allMarkdownRemark(
+      filter: { fileAbsolutePath: { regex: "//posts/[0-9]+.*--/" } }
+      sort: { fields: [fields___prefix], order: DESC }
+      limit: $limit
+      skip: $skip
+    ) {
+      edges {
+        node {
+          excerpt
+          fields {
+            slug
+            prefix
+          }
+          frontmatter {
+            title
+            category
+            cover {
+              children {
+                ... on ImageSharp {
+                  fluid(maxWidth: 800, maxHeight: 360) {
+                    ...GatsbyImageSharpFluid_withWebp
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    bgDesktop: imageSharp(fluid: { originalName: { regex: "/hero-background/" } }) {
+      resize(width: 1200, quality: 90, cropFocus: CENTER) {
+        src
+      }
+    }
+    bgTablet: imageSharp(fluid: { originalName: { regex: "/hero-background/" } }) {
+      resize(width: 800, height: 1100, quality: 90, cropFocus: CENTER) {
+        src
+      }
+    }
+    bgMobile: imageSharp(fluid: { originalName: { regex: "/hero-background/" } }) {
+      resize(width: 450, height: 850, quality: 90, cropFocus: CENTER) {
+        src
+      }
+    }
+  }
+`;
+
+//hero-background

From edbbd86c399b273bb9c7fa3926141478bafb5d2e Mon Sep 17 00:00:00 2001
From: Joan Mira <joanmira@gmail.com>
Date: Thu, 13 Dec 2018 17:11:36 +0100
Subject: [PATCH 4/4] Update Item.js

---
 src/components/Blog/Item.js | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/components/Blog/Item.js b/src/components/Blog/Item.js
index 349c13f..7e20dbe 100644
--- a/src/components/Blog/Item.js
+++ b/src/components/Blog/Item.js
@@ -87,20 +87,6 @@ const Item = props => {
             transition: all ${theme.time.duration.default};
             width: 50%;
           }
-
-          &:first-child {
-            &::before {
-              border-top: 1px solid ${theme.line.color};
-              content: "";
-              height: 0;
-              position: absolute;
-              top: ${`calc(${theme.space.default} * -1.5)`};
-              left: 50%;
-              transform: translateX(-50%);
-              transition: all ${theme.time.duration.default};
-              width: 50%;
-            }
-          }
         }
 
         h1 {