Styles for the Pagination (#7)

* set default value to node.frontmatter.banner

* styles for pagination

* yarn add gatsby-plugin-templated-files

* yarn remove gatsby-plugin-t
emplated-files

* refactor Pagination

* hack flexbox!

* update package.json & yarn.lock

Author: ltclmbdev

gatsby-node.js

@@ -104,18 +104,18 @@ const createPaginatedPages = (createPage, edges, pathPrefix, context) => {
   }, [])
 
   pages.forEach((page, index) => {
-    const previousPagePath = `${pathPrefix}/${index + 1}`
-    const nextPagePath = index === 1 ? pathPrefix : `${pathPrefix}/${index - 1}`
+    const nextPagePath = `${pathPrefix}/${index + 1}`
+    const previousPagePath =
+      index === 1 ? pathPrefix : `${pathPrefix}/${index - 1}`
 
     createPage({
       path: index > 0 ? `${pathPrefix}/${index}` : `${pathPrefix}`,
       component: path.resolve(`src/templates/blog.js`),
       context: {
         pagination: {
           page,
-          nextPagePath: index === 0 ? null : nextPagePath,
-          previousPagePath:
-            index === pages.length - 1 ? null : previousPagePath,
+          nextPagePath: index === pages.length - 1 ? null : nextPagePath,
+          previousPagePath: index === 0 ? null : previousPagePath,
           pageCount: pages.length,
           pathPrefix,
         },
@@ -178,7 +178,7 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
     createNodeField({
       name: 'banner',
       node,
-      banner: node.frontmatter.banner,
+      banner: node.frontmatter.banner || {},
     })
 
     createNodeField({

package.json

@@ -115,19 +115,28 @@ const Blog = ({
             </Link>
           </div>
         ))}
-        <br />
-        <br />
-        <div>
+        <div
+          css={css({
+            marginTop: '50px',
+            display: 'flex',
+            justifyContent: 'space-between',
+            [bpMaxSM]: {
+              marginTop: '30px',
+            },
+          })}
+        >
+          {previousPagePath ? (
+            <Link to={previousPagePath} aria-label="View previous page">
+              ← Previous Page
+            </Link>
+          ) : (
+            <div />
+          )}
           {nextPagePath && (
             <Link to={nextPagePath} aria-label="View next page">
               Next Page →
             </Link>
           )}
-          {previousPagePath && (
-            <Link to={previousPagePath} aria-label="View previous page">
-              ← Previous Page
-            </Link>
-          )}
         </div>
         <hr
           css={css`