goodies page

content/menu.yml

@@ -2,4 +2,4 @@
   link: /photos
 
 - title: Goodies
-  link: /tag/goodies
+  link: /goodies

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}/`,

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);

src/components/molecules/PostMeta.jsx

@@ -35,19 +35,24 @@ const PostMeta = ({ post, meta }) => {
         )}
       </div>
 
-      {type && (
-        <div className={styles.type}>
-          <Link to={`/${slugify(type)}s/`}>{type}s</Link>
-        </div>
-      )}
+      {type &&
+        type === 'photo' && (
+          <div className={styles.type}>
+            <Link to={`/${slugify(type)}s/`}>{type}s</Link>
+          </div>
+        )}
 
       {tags && (
         <div className={styles.tags}>
-          {tags.map(tag => (
-            <Link key={tag} className={styles.tag} to={`/tag/${slugify(tag)}/`}>
-              {tag}
-            </Link>
-          ))}
+          {tags.map(tag => {
+            const to = tag === 'goodies' ? '/goodies' : `/tag/${slugify(tag)}/`
+
+            return (
+              <Link key={tag} className={styles.tag} to={to}>
+                {tag}
+              </Link>
+            )
+          })}
         </div>
       )}
     </footer>

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;

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 (
+      <article className={styles.goodie} key={node.id}>
+        {image && (
+          <Link to={slug}>
+            <h1 className={styles.title}>{title}</h1>
+            <figure className={styles.image}>
+              <Image fluid={image.childImageSharp.fluid} alt={title} />
+            </figure>
+          </Link>
+        )}
+      </article>
+    )
+  })
+
+  return (
+    <Layout location={location}>
+      <h1 className={styles.pageTitle}>Goodies</h1>
+      <section className={styles.goodies}>{GoodiesThumbs}</section>
+    </Layout>
+  )
+}
+
+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
+          }
+        }
+      }
+    }
+  }
+`

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;
+}

src/pages/photos.module.scss

@@ -1,3 +1,4 @@
+@import 'variables';
 @import 'mixins';
 
 .photos {