From d2e2bc8df78803feb91babf1973e156f44479001 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Tue, 4 Jul 2017 10:49:13 -0700
Subject: [PATCH] Just use frontmatter paths for paths + cleanups

---
 gatsby-config.js           |  1 +
 gatsby-node.js             | 34 ++++------------------------------
 package.json               | 13 +++++--------
 src/html.js                |  9 +++------
 src/pages/index.js         | 31 +++++++++++++++----------------
 src/templates/blog-post.js |  8 +++++---
 6 files changed, 33 insertions(+), 63 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index e020bfc..2840389 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -42,5 +42,6 @@ module.exports = {
       },
     },
     `gatsby-plugin-offline`,
+    `gatsby-plugin-react-helmet`,
   ],
 }
diff --git a/gatsby-node.js b/gatsby-node.js
index a35d9a6..b57858d 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -17,8 +17,8 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
         allMarkdownRemark(limit: 1000) {
           edges {
             node {
-              fields {
-                slug
+              frontmatter {
+                path
               }
             }
           }
@@ -34,10 +34,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
         // Create blog posts pages.
         _.each(result.data.allMarkdownRemark.edges, edge => {
           createPage({
-            path: edge.node.fields.slug, // required
+            path: edge.node.frontmatter.path,
             component: blogPost,
             context: {
-              slug: edge.node.fields.slug,
+              path: edge.node.frontmatter.path,
             },
           })
         })
@@ -45,29 +45,3 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
     )
   })
 }
-
-// Add custom slug for blog posts to both File and MarkdownRemark nodes.
-exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
-  const { createNodeField } = boundActionCreators
-
-  switch (node.internal.type) {
-    case 'File':
-      const parsedFilePath = path.parse(node.relativePath)
-      const slug = `/${parsedFilePath.dir}/`
-      createNodeField({
-        node,
-        fieldName: 'slug',
-        fieldValue: slug
-      })
-      return
-
-    case 'MarkdownRemark':
-      const fileNode = getNode(node.parent)
-      createNodeField({
-        node,
-        fieldName: 'slug',
-        fieldValue: fileNode.fields.slug,
-      })
-      return
-  }
-}
diff --git a/package.json b/package.json
index bf50144..42ac128 100644
--- a/package.json
+++ b/package.json
@@ -9,30 +9,27 @@
   "dependencies": {
     "gatsby": "next",
     "gatsby-link": "next",
-    "gatsby-transformer-remark": "next",
-    "gatsby-transformer-sharp": "next",
     "gatsby-plugin-google-analytics": "next",
     "gatsby-plugin-manifest": "next",
     "gatsby-plugin-offline": "next",
     "gatsby-plugin-preact": "next",
+    "gatsby-plugin-react-helmet": "next",
     "gatsby-plugin-sharp": "next",
-    "gatsby-source-filesystem": "next",
     "gatsby-remark-copy-linked-files": "next",
     "gatsby-remark-prismjs": "next",
     "gatsby-remark-responsive-iframe": "next",
     "gatsby-remark-responsive-image": "next",
     "gatsby-remark-smartypants": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-remark": "next",
+    "gatsby-transformer-sharp": "next",
     "lodash": "^4.15.0",
-    "moment": "^2.14.1",
-    "react-helmet": "^4.0.0",
     "react-responsive-grid": "^0.3.3",
     "react-typography": "^0.15.0",
-    "safe-access": "^0.1.0",
     "typeface-merriweather": "^0.0.25",
     "typeface-montserrat": "^0.0.24",
     "typography": "^0.15.8",
-    "typography-theme-wordpress-2016": "^0.15.1",
-    "underscore.string": "^3.2.3"
+    "typography-theme-wordpress-2016": "^0.15.1"
   },
   "devDependencies": {
     "gh-pages": "^0.12.0"
diff --git a/src/html.js b/src/html.js
index cffb9b0..95ee49b 100644
--- a/src/html.js
+++ b/src/html.js
@@ -13,7 +13,7 @@ if (process.env.NODE_ENV === `production`) {
   }
 }
 
-module.exports = React.createClass({
+export default class HTML extends React.Component {
   render() {
     const head = Helmet.rewind()
     let css
@@ -38,9 +38,6 @@ module.exports = React.createClass({
           {this.props.headComponents}
           <TypographyStyle typography={typography} />
           {css}
-          {head.title.toComponent()}
-          {head.meta.toComponent()}
-          {head.link.toComponent()}
         </head>
         <body>
           <div
@@ -51,5 +48,5 @@ module.exports = React.createClass({
         </body>
       </html>
     )
-  },
-})
+  }
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 68c878c..844e87b 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,7 +2,6 @@ import React from "react"
 import Link from "gatsby-link"
 import get from "lodash/get"
 import Helmet from "react-helmet"
-import include from "underscore.string/include"
 
 import Bio from "../components/Bio"
 import { rhythm } from "../utils/typography"
@@ -23,7 +22,7 @@ class BlogIndex extends React.Component {
               marginBottom: rhythm(1 / 4),
             }}
           >
-            <Link style={{ boxShadow: "none" }} to={post.node.fields.slug}>
+            <Link style={{ boxShadow: "none" }} to={post.node.frontmatter.path}>
               {post.node.frontmatter.title}
             </Link>
           </li>
@@ -50,23 +49,23 @@ BlogIndex.propTypes = {
 export default BlogIndex
 
 export const pageQuery = graphql`
-query IndexQuery {
-  site {
-    siteMetadata {
-      title
+  query IndexQuery {
+    site {
+      siteMetadata {
+        title
+      }
     }
-  }
-  allMarkdownRemark {
-    edges {
-      node {
-        fields {
-          slug
-        }
-        frontmatter {
-          title
+    allMarkdownRemark {
+      edges {
+        node {
+          frontmatter {
+            path
+          }
+          frontmatter {
+            title
+          }
         }
       }
     }
   }
-}
 `
diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js
index a5fd0c9..0298c88 100644
--- a/src/templates/blog-post.js
+++ b/src/templates/blog-post.js
@@ -14,7 +14,9 @@ class BlogPostTemplate extends React.Component {
     return (
       <div>
         <Helmet title={`${post.frontmatter.title} | ${siteTitle}`} />
-        <h1>{post.frontmatter.title}</h1>
+        <h1>
+          {post.frontmatter.title}
+        </h1>
         <p
           style={{
             ...scale(-1 / 5),
@@ -40,14 +42,14 @@ class BlogPostTemplate extends React.Component {
 export default BlogPostTemplate
 
 export const pageQuery = graphql`
-  query BlogPostByPath($slug: String!) {
+  query BlogPostByPath($path: String!) {
     site {
       siteMetadata {
         title
         author
       }
     }
-    markdownRemark(fields: { slug: { eq: $slug }}) {
+    markdownRemark(frontmatter: { path: { eq: $path } }) {
       id
       html
       frontmatter {