diff --git a/content/menu.yml b/content/menu.yml index 8abb38bd..1fdba700 100644 --- a/content/menu.yml +++ b/content/menu.yml @@ -2,4 +2,4 @@ link: /photos - title: Goodies - link: /tag/goodies + link: /goodies diff --git a/gatsby-node.js b/gatsby-node.js index 6979ca22..3e2372a6 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -204,6 +204,8 @@ const generateTagPages = (createPage, posts) => { const tagList = Array.from(tagSet) tagList.forEach(tag => { + if (tag === 'goodies') return + // Create tag pages createPage({ path: `/tag/${tag}/`, diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index fe6b2f61..6ee4942f 100644 --- a/src/components/Layout.module.scss +++ b/src/components/Layout.module.scss @@ -43,6 +43,7 @@ margin-bottom: $spacer * 20; // height of footer position: relative; z-index: 2; + min-height: 500px; :global(.has-menu-open) & { transform: translate3d(0, ($spacer * 5), 0); diff --git a/src/components/molecules/PostMeta.jsx b/src/components/molecules/PostMeta.jsx index 71dd51ce..e1a66d0d 100644 --- a/src/components/molecules/PostMeta.jsx +++ b/src/components/molecules/PostMeta.jsx @@ -35,19 +35,24 @@ const PostMeta = ({ post, meta }) => { )} - {type && ( -
- {type}s -
- )} + {type && + type === 'photo' && ( +
+ {type}s +
+ )} {tags && (
- {tags.map(tag => ( - - {tag} - - ))} + {tags.map(tag => { + const to = tag === 'goodies' ? '/goodies' : `/tag/${slugify(tag)}/` + + return ( + + {tag} + + ) + })}
)} diff --git a/src/components/molecules/PostMeta.module.scss b/src/components/molecules/PostMeta.module.scss index 7a7a9b80..8364a20b 100644 --- a/src/components/molecules/PostMeta.module.scss +++ b/src/components/molecules/PostMeta.module.scss @@ -64,9 +64,14 @@ } } +.tags { + margin-top: $spacer / 2; +} + .tag { color: $text-color; - margin-right: 5px; + margin-left: $spacer / 2; + margin-right: $spacer / 2; &::before { color: $brand-grey-dimmed; diff --git a/src/pages/goodies.jsx b/src/pages/goodies.jsx new file mode 100644 index 00000000..f55e49af --- /dev/null +++ b/src/pages/goodies.jsx @@ -0,0 +1,69 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { graphql, Link } from 'gatsby' +import Layout from '../components/Layout' +import Image from '../components/atoms/Image' + +import styles from './goodies.module.scss' + +const Goodies = ({ data, location }) => { + const edges = data.goodies.edges + + const GoodiesThumbs = edges.map(({ node }) => { + const { title, image } = node.frontmatter + const { slug } = node.fields + + return ( +
+ {image && ( + +

{title}

+
+ {title} +
+ + )} +
+ ) + }) + + return ( + +

Goodies

+
{GoodiesThumbs}
+
+ ) +} + +Goodies.propTypes = { + location: PropTypes.object.isRequired, + data: PropTypes.object +} + +export default Goodies + +export const goodiesQuery = graphql` + query { + goodies: allMarkdownRemark( + filter: { frontmatter: { tags: { eq: "goodies" } } } + sort: { order: DESC, fields: [fields___date] } + ) { + edges { + node { + id + frontmatter { + title + image { + childImageSharp { + ...ImageFluid + } + } + } + fields { + slug + } + } + } + } + } +` diff --git a/src/pages/goodies.module.scss b/src/pages/goodies.module.scss new file mode 100644 index 00000000..2ceb4069 --- /dev/null +++ b/src/pages/goodies.module.scss @@ -0,0 +1,28 @@ +@import 'variables'; +@import 'mixins'; + +.image { + @include breakoutviewport; + + max-width: none; +} + +.goodie { + margin-bottom: $spacer * 4; + + a { + display: block; + } +} + +.pageTitle { + composes: archiveTitle from '../templates/Posts.module.scss'; + margin-bottom: $spacer * 2; +} + +.title { + font-size: $font-size-h3; + color: $brand-grey; + margin-top: 0; + margin-bottom: $spacer; +} diff --git a/src/pages/photos.module.scss b/src/pages/photos.module.scss index a9884e54..0b0ae1e4 100644 --- a/src/pages/photos.module.scss +++ b/src/pages/photos.module.scss @@ -1,3 +1,4 @@ +@import 'variables'; @import 'mixins'; .photos {