Upgrade to Gatsby v2

.nvmrc

@@ -1 +1 @@
-6
+8

gatsby-browser.js

@@ -1,3 +0,0 @@
-exports.clientEntry = function () {
-  require('es6-object-assign').polyfill()
-}

gatsby-config.js

@@ -1,8 +1,12 @@
 module.exports = {
   siteMetadata: {
     title: "Bricolage",
+    description:
+      "Internet home of Kyle Mathews — tech entrepreneur and bricolager",
     author: "Kyle Mathews",
     homeCity: "San Francisco",
+    siteUrl: "https://www.bricolage.io/",
+    twitter: "@kylemathews",
   },
   plugins: [
     {
@@ -12,6 +16,12 @@ module.exports = {
         name: "pages",
       },
     },
+    {
+      resolve: `gatsby-plugin-typography`,
+      options: {
+        pathToConfigModule: `src/utils/typography`,
+      },
+    },
     `gatsby-transformer-sharp`,
     {
       resolve: `gatsby-transformer-remark`,
@@ -61,7 +71,7 @@ module.exports = {
       },
     },
     `gatsby-plugin-offline`,
-    `gatsby-plugin-preact`,
+    // `gatsby-plugin-preact`,
     `gatsby-plugin-react-helmet`,
   ],
 }

gatsby-node.js

@@ -1,12 +1,9 @@
 const _ = require("lodash")
 const Promise = require("bluebird")
 const path = require("path")
-const select = require(`unist-util-select`)
-const precache = require(`sw-precache`)
-const webpackLodashPlugin = require("lodash-webpack-plugin")
 
-exports.createPages = ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
+exports.createPages = ({ graphql, actions }) => {
+  const { createPage } = actions
 
   return new Promise((resolve, reject) => {
     const pages = []
@@ -16,8 +13,8 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
       `
         {
           allMarkdownRemark(
-            limit: 1000,
-            filter: { frontmatter: { draft: { ne: true } } },
+            limit: 1000
+            filter: { frontmatter: { draft: { ne: true } } }
           ) {
             edges {
               node {
@@ -74,11 +71,9 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
   })
 }
 
-//exports.postBuild = require('./post-build')
-
 // Add custom url pathname for blog posts.
-exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
-  const { createNodeField } = boundActionCreators
+exports.onCreateNode = ({ node, actions, getNode }) => {
+  const { createNodeField } = actions
 
   if (node.internal.type === `File`) {
     const parsedFilePath = path.parse(node.absolutePath)
@@ -102,12 +97,3 @@ exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
     }
   }
 }
-
-// Add Lodash plugin
-exports.modifyWebpackConfig = ({ config, stage }) => {
-  if (stage === `build-javascript`) {
-    config.plugin(`Lodash`, webpackLodashPlugin, null)
-  }
-
-  return
-}

package.json

@@ -9,31 +9,36 @@
   "dependencies": {
     "babel-plugin-lodash": "^3.2.11",
     "bluebird": "^3.4.7",
+    "deep-extend": "^0.5.0",
     "es6-object-assign": "^1.0.3",
-    "gatsby": "^1.9.22",
-    "gatsby-link": "^1.6.16",
-    "gatsby-plugin-google-analytics": "^1.0.7",
-    "gatsby-plugin-manifest": "^1.0.7",
-    "gatsby-plugin-offline": "^1.0.9",
-    "gatsby-plugin-preact": "^1.0.6",
-    "gatsby-plugin-react-helmet": "^1.0.6",
-    "gatsby-plugin-sharp": "^1.6.6",
-    "gatsby-remark-copy-linked-files": "^1.5.7",
-    "gatsby-remark-images": "^1.5.10",
-    "gatsby-remark-prismjs": "^1.2.7",
-    "gatsby-remark-responsive-iframe": "^1.4.7",
-    "gatsby-remark-smartypants": "^1.4.7",
-    "gatsby-source-filesystem": "^1.4.12",
-    "gatsby-transformer-remark": "^1.7.6",
-    "gatsby-transformer-sharp": "^1.6.5",
+    "gatsby": "canary",
+    "gatsby-link": "canary",
+    "gatsby-plugin-google-analytics": "canary",
+    "gatsby-plugin-manifest": "canary",
+    "gatsby-plugin-offline": "canary",
+    "gatsby-plugin-preact": "canary",
+    "gatsby-plugin-react-helmet": "canary",
+    "gatsby-plugin-sharp": "canary",
+    "gatsby-plugin-typography": "^2.1.0-alpha.523a4286",
+    "gatsby-remark-copy-linked-files": "canary",
+    "gatsby-remark-images": "canary",
+    "gatsby-remark-prismjs": "canary",
+    "gatsby-remark-responsive-iframe": "canary",
+    "gatsby-remark-smartypants": "canary",
+    "gatsby-source-filesystem": "canary",
+    "gatsby-transformer-remark": "canary",
+    "gatsby-transformer-sharp": "canary",
     "lodash": "^4.17.4",
     "lodash-webpack-plugin": "^0.11.2",
     "prettier": "^1.6.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-helmet": "^5.2.0",
     "react-typography": "^0.16.1",
-    "typeface-alegreya": "^0.0.35",
-    "typeface-alegreya-sans": "^0.0.35",
+    "typeface-alegreya": "0.0.54",
+    "typeface-alegreya-sans": "0.0.54",
     "typography": "^0.16.4",
-    "typography-plugin-code": "^0.15.10",
-    "typography-theme-de-young": "^0.15.10"
+    "typography-plugin-code": "^0.16.11",
+    "typography-theme-de-young": "^0.16.9"
   }
 }

src/components/bio.js

@@ -0,0 +1,44 @@
+import React from "react"
+import { StaticQuery } from "gatsby"
+const profilePic = require("../images/kyle-round-small-pantheon.jpg")
+import typography from "../utils/typography"
+const rhythm = typography.rhythm
+
+export default () => (
+  <StaticQuery
+    query={graphql`
+      query Bio {
+        site {
+          siteMetadata {
+            author
+            homeCity
+          }
+        }
+      }
+    `}
+    render={data => (
+      <p
+        style={{
+          marginBottom: 0,
+        }}
+      >
+        <img
+          src={profilePic}
+          style={{
+            borderRadius: `100%`,
+            float: "left",
+            marginRight: rhythm(1 / 4),
+            marginBottom: 0,
+            width: rhythm(2),
+            height: rhythm(2),
+          }}
+        />
+        <strong>{data.site.siteMetadata.author}</strong> lives and works in{" "}
+        {data.site.siteMetadata.homeCity} building useful things.{" "}
+        <a href="https://twitter.com/kylemathews">
+          You should follow him on Twitter
+        </a>
+      </p>
+    )}
+  />
+)

src/components/read-next.js

@@ -0,0 +1,52 @@
+const React = require("react")
+const Link = require("gatsby-link")
+
+const { rhythm, scale } = require("../utils/typography")
+
+const Component = props => {
+  let { nextPost } = props
+  if (nextPost && nextPost.children && nextPost.children[0]) {
+    nextPost = nextPost.children[0]
+  }
+
+  if (!nextPost) {
+    return null
+  } else {
+    return (
+      <div>
+        <h6
+          style={{
+            ...scale(-0.5),
+            margin: 0,
+            letterSpacing: -0.25,
+          }}
+        >
+          READ THIS NEXT:
+        </h6>
+        <h3
+          style={{
+            margin: 0,
+          }}
+        >
+          <Link to={nextPost.fields.slug}>{nextPost.frontmatter.title}</Link>
+        </h3>
+        <p>{nextPost.excerpt}</p>
+        <hr />
+      </div>
+    )
+  }
+}
+
+export default Component
+
+export const query = graphql`
+  fragment ReadNext on MarkdownRemark {
+    fields {
+      slug
+    }
+    excerpt(pruneLength: 200)
+    frontmatter {
+      title
+    }
+  }
+`

src/components/seo-base.js

@@ -0,0 +1,42 @@
+import React from "react"
+import Helmet from "react-helmet"
+import { StaticQuery } from "gatsby"
+
+export default () => (
+  <StaticQuery
+    query={graphql`
+      query SEOBase {
+        site {
+          siteMetadata {
+            title
+            description
+            siteUrl
+            twitter
+          }
+        }
+      }
+    `}
+    render={data => {
+      console.log(data)
+      const { title, description, siteUrl, twitter } = data.site.siteMetadata
+
+      return (
+        <Helmet defaultTitle={title} titleTemplate={`${title} | %s`}>
+          {/* General tags */}
+          <meta name="description" content={description} />
+
+          {/* OpenGraph tags */}
+          <meta property="og:url" content={siteUrl} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+
+          {/* Twitter Card tags */}
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:creator" content={twitter} />
+          <meta name="twitter:title" content={title} />
+          <meta name="twitter:description" content={description} />
+        </Helmet>
+      )
+    }}
+  />
+)