archive tweaks

content/meta.yml

@@ -28,4 +28,4 @@ author:
 
 
 typekitID:              msu4qap
-itemsPerPage:           15
+itemsPerPage:           10

gatsby-node.js

@@ -93,9 +93,10 @@ exports.createPages = ({ graphql, actions }) => {
   })
 }
 
+const postsTemplate = path.resolve('src/templates/Posts.jsx')
+
 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 => {
@@ -119,8 +120,6 @@ const generateContent = (createPage, posts) => {
 }
 
 const createTagPages = (createPage, posts) => {
-  const archiveTemplate = path.resolve('src/templates/Archive.jsx')
-
   const tagSet = new Set()
   const tagMap = new Map()
 
@@ -139,17 +138,10 @@ const createTagPages = (createPage, posts) => {
   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
-    // })
+    // Create tag pages
     createPage({
       path: `/tag/${tag}/`,
-      component: archiveTemplate,
+      component: postsTemplate,
       context: { tag }
     })
   })
@@ -164,7 +156,7 @@ const createTagPages = (createPage, posts) => {
   //         page === 1
   //           ? `/tag/${tagName.toLowerCase()}`
   //           : `/tag/${tagName.toLowerCase()}/page/${page}`,
-  //       component: tagTemplate,
+  //       component: postsTemplate,
   //       context: {
   //         posts: paginate(posts[tagName], pageSize, page),
   //         tag: tagName,

package.json

@@ -25,6 +25,8 @@
     "gatsby": "^2.0.0-rc.13",
     "gatsby-awesome-pagination": "^0.1.1",
     "gatsby-image": "^2.0.0-rc.1",
+    "gatsby-paginate": "^1.0.16",
+    "gatsby-pagination": "^1.2.0",
     "gatsby-plugin-catch-links": "^2.0.2-rc.1",
     "gatsby-plugin-lunr": "^1.1.0",
     "gatsby-plugin-matomo": "^0.5.0",

src/components/atoms/PostLead.module.scss

@@ -1,5 +1,5 @@
-@import 'mixins';
+@import 'variables';
 
 .lead {
-    @include lead();
+    font-size: $font-size-large;
 }

src/components/atoms/PostTitle.module.scss

@@ -6,7 +6,6 @@
 
 .hentry__title {
     font-size: $font-size-h1;
-    text-align: center;
     color: $color-headings;
     margin-top: 0;
     margin-bottom: $spacer;

src/components/molecules/Pagination.jsx

@@ -8,14 +8,14 @@ const Pagination = ({ pageContext }) => {
 
   return (
     <div className={styles.pagination}>
-      {previousPagePath ? (
-        <Link className={styles.paginationLink} to={previousPagePath}>
-          &laquo; Newer Posts
-        </Link>
-      ) : null}
       {nextPagePath ? (
         <Link className={styles.paginationLink} to={nextPagePath}>
-          Older Posts &raquo;
+          &laquo; Older Posts
+        </Link>
+      ) : null}
+      {previousPagePath ? (
+        <Link className={styles.paginationLink} to={previousPagePath}>
+          Newer Posts &raquo;
         </Link>
       ) : null}
     </div>

src/components/molecules/Pagination.module.scss

@@ -13,4 +13,8 @@
     &:last-child {
         text-align: right;
     }
+
+    &:only-child {
+        text-align: left;
+    }
 }

src/pages/photos.jsx

@@ -5,7 +5,6 @@ import Layout from '../components/Layout'
 import Image from '../components/atoms/Image'
 
 import styles from './photos.module.scss'
-import stylesArchive from '../templates/Archive.module.scss'
 
 const Photos = ({ data, location }) => {
   const edges = data.photos.edges
@@ -27,7 +26,7 @@ const Photos = ({ data, location }) => {
 
   return (
     <Layout location={location}>
-      <h1 className={stylesArchive.archiveTitle}>Photos</h1>
+      <h1 className={styles.pageTitle}>Photos</h1>
       <section className={styles.photos}>{PhotoThumbs}</section>
     </Layout>
   )

src/pages/photos.module.scss

@@ -16,3 +16,8 @@
         display: block;
     }
 }
+
+.pageTitle {
+    composes: archiveTitle from '../templates/Posts.module.scss';
+    margin-bottom: $spacer * 2;
+}

src/styles/_mixins.scss

@@ -84,7 +84,7 @@
 
 @mixin divider() {
     position: relative;
-    border-bottom: 1px dashed #afc3cb;
+    border-bottom: 1px dashed lighten($brand-grey-light, 7%);
     margin-top: $spacer * $line-height;
     margin-bottom: $spacer * $line-height;
 
@@ -101,7 +101,7 @@
 
 @mixin divider-top() {
     position: relative;
-    border-top: 1px dashed #afc3cb;
+    border-top: 1px dashed lighten($brand-grey-light, 7%);
     margin-top: $spacer * $line-height;
     margin-bottom: $spacer * $line-height;
 
@@ -126,13 +126,6 @@
     margin-left: -100%;
 }
 
-// Lead paragraph
-/////////////////////////////////////
-
-@mixin lead() {
-    font-size: $font-size-large;
-}
-
 // Layout breakout
 /////////////////////////////////////
 

src/templates/Archive.jsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Link, graphql } from 'gatsby'
-import Layout from '../components/Layout'
-import styles from './Archive.module.scss'
-
-const Archive = ({ data, location, pageContext }) => {
-  let posts
-  let archiveTitle
-
-  if (pageContext.category) {
-    posts = data.category.edges
-    archiveTitle = pageContext.category
-  } else {
-    posts = data.tag.edges
-    archiveTitle = pageContext.tag
-  }
-
-  const Posts = posts.map(post => (
-    <li key={post.node.id}>
-      <Link to={post.node.fields.slug}>{post.node.frontmatter.title}</Link>
-    </li>
-  ))
-
-  return (
-    <Layout location={location}>
-      <h1 className={styles.archiveTitle}>{archiveTitle}</h1>
-      <ul>{Posts}</ul>
-    </Layout>
-  )
-}
-
-Archive.propTypes = {
-  data: PropTypes.object.isRequired,
-  location: PropTypes.object.isRequired,
-  pageContext: PropTypes.object.isRequired
-}
-
-export default Archive
-
-export const archiveQuery = graphql`
-  query($tag: String!) {
-    tag: allMarkdownRemark(
-      filter: { frontmatter: { tags: { eq: $tag } } }
-      sort: { order: DESC, fields: [fields___date] }
-    ) {
-      edges {
-        node {
-          id
-          frontmatter {
-            title
-          }
-          fields {
-            slug
-            date(formatString: "MMMM DD, YYYY")
-          }
-        }
-      }
-    }
-  }
-`

src/templates/Archive.module.scss

@@ -1,9 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-.archiveTitle {
-    @include heading-band();
-
-    font-size: $font-size-h3;
-    margin-top: 0;
-}

src/templates/Post.module.scss

@@ -2,31 +2,9 @@
 @import 'mixins';
 
 .hentry {
-    @include divider;
-
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-top: $spacer * 2;
-    padding-bottom: $spacer * 2;
     width: 100%;
-
-    @media (min-width: $screen-sm) {
-        padding-top: $spacer * 3;
-        padding-bottom: $spacer * 3;
-    }
-
-    &:first-child {
-        padding-top: 0;
-    }
-
-    &:only-child,
-    &:last-child {
-        border: 0;
-
-        &::before {
-            display: none;
-        }
-    }
+    padding-top: $spacer;
+    padding-bottom: $spacer * 3;
 }
 
 // Post/photo teaser

src/templates/Posts.jsx

@@ -10,19 +10,18 @@ import PostMore from '../components/atoms/PostMore'
 import PostLinkActions from '../components/atoms/PostLinkActions'
 import Pagination from '../components/molecules/Pagination'
 import Featured from '../components/molecules/Featured'
-import postStyles from '../templates/Post.module.scss'
 import styles from './Posts.module.scss'
 
-const IndexPage = ({ data, location, pageContext }) => {
+const Posts = ({ data, location, pageContext }) => {
   const edges = data.allMarkdownRemark.edges
-  const { humanPageNumber } = pageContext
+  const { tag, previousPagePath, humanPageNumber, numberOfPages } = pageContext
 
-  const Posts = edges.map(({ node }) => {
+  const PostsList = edges.map(({ node }) => {
     const { type, linkurl, title, image } = node.frontmatter
     const { slug } = node.fields
 
     return (
-      <article className={postStyles.hentry} key={node.id}>
+      <article className={styles.hentry} key={node.id}>
         <PostTitle type={type} slug={slug} linkurl={linkurl} title={title} />
 
         {image && (
@@ -49,24 +48,31 @@ const IndexPage = ({ data, location, pageContext }) => {
 
   return (
     <Layout location={location}>
-      {humanPageNumber === 1 && <Featured />}
-      {Posts}
+      {location.pathname === '/' && <Featured />}
+      {tag && <h1 className={styles.archiveTitle}>{tag}</h1>}
+      {previousPagePath && (
+        <h1
+          className={styles.archiveTitle}
+        >{`Page ${humanPageNumber} / ${numberOfPages}`}</h1>
+      )}
+      {PostsList}
       <Pagination pageContext={pageContext} />
     </Layout>
   )
 }
 
-IndexPage.propTypes = {
+Posts.propTypes = {
   data: PropTypes.object.isRequired,
   pageContext: PropTypes.object.isRequired,
   location: PropTypes.object.isRequired
 }
 
-export default IndexPage
+export default Posts
 
 export const indexQuery = graphql`
-  query($skip: Int!, $limit: Int!) {
+  query($tag: String, $skip: Int, $limit: Int) {
     allMarkdownRemark(
+      filter: { frontmatter: { tags: { eq: $tag } } }
       sort: { order: DESC, fields: [fields___date] }
       skip: $skip
       limit: $limit
@@ -85,6 +91,7 @@ export const indexQuery = graphql`
                 ...ImageFluid
               }
             }
+            tags
           }
           fields {
             slug

src/templates/Posts.module.scss

@@ -1,6 +1,34 @@
 @import 'variables';
 @import 'mixins';
 
+.hentry {
+    composes: hentry from '../templates/Post.module.scss';
+
+    @include divider;
+
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: $spacer * 2;
+    padding-bottom: $spacer * 2;
+
+    @media (min-width: $screen-sm) {
+        padding-top: $spacer * 3;
+        padding-bottom: $spacer * 3;
+    }
+}
+
+.archiveTitle {
+    @include heading-band();
+
+    font-size: $font-size-h4;
+    margin-top: 0;
+    margin-bottom: 0;
+
+    @media (min-width: $screen-md) {
+        margin-left: -117%;
+    }
+}
+
 // Post/photo teaser
 /////////////////////////////////////