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}
+
+
+ )}
+
+ )
+ })
+
+ return (
+
+ Goodies
+
+
+ )
+}
+
+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 {