diff --git a/content/meta.yml b/content/meta.yml index f78ab9f3..708a32d4 100644 --- a/content/meta.yml +++ b/content/meta.yml @@ -28,4 +28,4 @@ author: typekitID: msu4qap -itemsPerPage: 15 +itemsPerPage: 10 diff --git a/gatsby-node.js b/gatsby-node.js index 931852bf..8db122a2 100644 --- a/gatsby-node.js +++ b/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, diff --git a/package.json b/package.json index d4c50115..553181fe 100644 --- a/package.json +++ b/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", diff --git a/src/components/atoms/PostLead.module.scss b/src/components/atoms/PostLead.module.scss index 8701c272..1791e74a 100644 --- a/src/components/atoms/PostLead.module.scss +++ b/src/components/atoms/PostLead.module.scss @@ -1,5 +1,5 @@ -@import 'mixins'; +@import 'variables'; .lead { - @include lead(); + font-size: $font-size-large; } diff --git a/src/components/atoms/PostTitle.module.scss b/src/components/atoms/PostTitle.module.scss index 0e9c34f8..e1a1edd3 100644 --- a/src/components/atoms/PostTitle.module.scss +++ b/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; diff --git a/src/components/molecules/Pagination.jsx b/src/components/molecules/Pagination.jsx index 71c34780..d128ad77 100644 --- a/src/components/molecules/Pagination.jsx +++ b/src/components/molecules/Pagination.jsx @@ -8,14 +8,14 @@ const Pagination = ({ pageContext }) => { return (
- {previousPagePath ? ( - - « Newer Posts - - ) : null} {nextPagePath ? ( - Older Posts » + « Older Posts + + ) : null} + {previousPagePath ? ( + + Newer Posts » ) : null}
diff --git a/src/components/molecules/Pagination.module.scss b/src/components/molecules/Pagination.module.scss index 0dcbda2f..34b76656 100644 --- a/src/components/molecules/Pagination.module.scss +++ b/src/components/molecules/Pagination.module.scss @@ -13,4 +13,8 @@ &:last-child { text-align: right; } + + &:only-child { + text-align: left; + } } diff --git a/src/pages/photos.jsx b/src/pages/photos.jsx index 9fee5e12..11af1766 100644 --- a/src/pages/photos.jsx +++ b/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 ( -

Photos

+

Photos

{PhotoThumbs}
 ) diff --git a/src/pages/photos.module.scss b/src/pages/photos.module.scss index dc35045f..a9884e54 100644 --- a/src/pages/photos.module.scss +++ b/src/pages/photos.module.scss @@ -16,3 +16,8 @@ display: block; } } + +.pageTitle { + composes: archiveTitle from '../templates/Posts.module.scss'; + margin-bottom: $spacer * 2; +} diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 1faa57f7..e240910b 100644 --- a/src/styles/_mixins.scss +++ b/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 ///////////////////////////////////// diff --git a/src/templates/Archive.jsx b/src/templates/Archive.jsx deleted file mode 100644 index 07e6fb89..00000000 --- a/src/templates/Archive.jsx +++ /dev/null @@ -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 => ( -
  • - {post.node.frontmatter.title} -
    • - )) - - return ( - -

    {archiveTitle}

    - -     - ) -} - -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") - } - } - } - } - } -` diff --git a/src/templates/Archive.module.scss b/src/templates/Archive.module.scss deleted file mode 100644 index 01d5eadd..00000000 --- a/src/templates/Archive.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import 'variables'; -@import 'mixins'; - -.archiveTitle { - @include heading-band(); - - font-size: $font-size-h3; - margin-top: 0; -} diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss index a2f27400..e839130f 100644 --- a/src/templates/Post.module.scss +++ b/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 diff --git a/src/templates/Posts.jsx b/src/templates/Posts.jsx index 7ffeaa63..070abb93 100644 --- a/src/templates/Posts.jsx +++ b/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 ( -
    +
    {image && ( @@ -49,24 +48,31 @@ const IndexPage = ({ data, location, pageContext }) => { return ( - {humanPageNumber === 1 && } - {Posts} + {location.pathname === '/' && } + {tag &&

    {tag}

    } + {previousPagePath && ( +

    {`Page ${humanPageNumber} / ${numberOfPages}`}

    + )} + {PostsList}     ) } -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 diff --git a/src/templates/Posts.module.scss b/src/templates/Posts.module.scss index 58c5ee54..5e0f4114 100644 --- a/src/templates/Posts.module.scss +++ b/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 /////////////////////////////////////