Upgrade and migrate according to the docs

gatsby-node.js

@@ -1,12 +1,10 @@
 const _ = require('lodash')
 const Promise = require('bluebird')
 const path = require('path')
-const lost = require('lost')
-const pxtorem = require('postcss-pxtorem')
 const slash = require('slash')
 
-exports.createPages = ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
+exports.createPages = ({ graphql, actions }) => {
+  const { createPage } = actions
 
   return new Promise((resolve, reject) => {
     const postTemplate = path.resolve('./src/templates/post-template.jsx')
@@ -93,8 +91,8 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
   })
 }
 
-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)

package.json

@@ -25,30 +25,30 @@
   "license": "MIT",
   "dependencies": {
     "bluebird": "^3.5.1",
-    "gatsby": "^2.0.0-alpha.12",
-    "gatsby-link": "^1.6.34",
-    "gatsby-plugin-catch-links": "^1.0.14",
-    "gatsby-plugin-feed": "^1.3.15",
-    "gatsby-plugin-google-analytics": "^1.0.15",
+    "gatsby": "^2.0.22",
+    "gatsby-plugin-catch-links": "^2.0.4",
+    "gatsby-plugin-feed": "^2.0.8",
+    "gatsby-plugin-google-analytics": "^2.0.6",
     "gatsby-plugin-google-fonts": "latest",
-    "gatsby-plugin-offline": "^1.0.12",
-    "gatsby-plugin-react-css-modules": "^1.0.15",
-    "gatsby-plugin-react-helmet": "^2.0.3",
-    "gatsby-plugin-sass": "^2.0.0-alpha.5",
-    "gatsby-plugin-sharp": "^1.6.25",
-    "gatsby-plugin-sitemap": "^1.2.10",
-    "gatsby-remark-copy-linked-files": "^1.5.25",
-    "gatsby-remark-images": "^1.5.37",
-    "gatsby-remark-prismjs": "^1.2.12",
-    "gatsby-remark-responsive-iframe": "^1.4.16",
-    "gatsby-remark-smartypants": "^1.4.10",
-    "gatsby-source-filesystem": "^2.0.0-alpha.4",
-    "gatsby-transformer-remark": "^1.7.28",
-    "gatsby-transformer-sharp": "^1.6.16",
+    "gatsby-plugin-offline": "^2.0.6",
+    "gatsby-plugin-react-helmet": "^3.0.0",
+    "gatsby-plugin-sass": "^2.0.1",
+    "gatsby-plugin-sharp": "^2.0.6",
+    "gatsby-plugin-sitemap": "^2.0.1",
+    "gatsby-remark-copy-linked-files": "^2.0.5",
+    "gatsby-remark-images": "^2.0.4",
+    "gatsby-remark-prismjs": "^3.0.2",
+    "gatsby-remark-responsive-iframe": "^2.0.5",
+    "gatsby-remark-smartypants": "^2.0.5",
+    "gatsby-source-filesystem": "^2.0.3",
+    "gatsby-transformer-remark": "^2.1.7",
+    "gatsby-transformer-sharp": "^2.1.3",
     "lodash": "^4.17.4",
-    "react": "^16.3.0",
-    "react-disqus-comments": "^1.1.1",
-    "react-dom": "^16.3.0",
+    "node-sass": "^4.9.3",
+    "prismjs": "^1.15.0",
+    "react": "^16.5.2",
+    "react-disqus-comments": "^1.2.0",
+    "react-dom": "^16.5.2",
     "react-helmet": "^5.2.0"
   },
   "devDependencies": {

src/layouts/index.jsx → src/components/Layout/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Helmet from 'react-helmet'
-import '../assets/scss/init.scss'
+import '../../assets/scss/init.scss'
 
 class Layout extends React.Component {
   render() {
@@ -9,7 +9,7 @@ class Layout extends React.Component {
     return (
       <div className="layout">
         <Helmet defaultTitle="Blog by John Doe" />
-        {children()}
+        {children}
       </div>
     )
   }

src/components/Menu/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from 'gatsby-link'
+import { Link } from 'gatsby'
 import './style.scss'
 
 class Menu extends React.Component {
@@ -11,7 +11,6 @@ class Menu extends React.Component {
         {menu.map(item => (
           <li className="menu__list-item" key={item.path}>
             <Link
-              exact
               to={item.path}
               className="menu__list-item-link"
               activeClassName="menu__list-item-link menu__list-item-link--active"

src/components/Post/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from 'gatsby-link'
+import { Link } from 'gatsby'
 import moment from 'moment'
 import './style.scss'
 

src/components/PostTemplateDetails/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from 'gatsby-link'
+import { Link } from 'gatsby'
 import moment from 'moment'
 import Disqus from '../Disqus/Disqus'
 import './style.scss'

src/components/Sidebar/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import get from 'lodash/get'
-import Link from 'gatsby-link'
+import { Link } from 'gatsby'
 import Menu from '../Menu'
 import Links from '../Links'
 import profilePic from '../../pages/photo.jpg'

src/components/TagTemplateDetails/index.jsx

@@ -15,7 +15,9 @@ class TagTemplateDetails extends React.Component {
         <div className="content__inner">
           <div className="page">
             <h1 className="page__title">
-              All Posts tagged as &quot;{tagTitle}&quot;
+              All Posts tagged as &quot;
+              {tagTitle}
+              &quot;
             </h1>
             <div className="page__body">{items}</div>
           </div>

src/pages/404.jsx

@@ -1,24 +1,28 @@
 import React from 'react'
+import { graphql } from 'gatsby'
 import Sidebar from '../components/Sidebar'
+import Layout from '../components/Layout'
 
 class NotFoundRoute extends React.Component {
   render() {
     return (
-      <div>
-        <Sidebar {...this.props} />
-        <div className="content">
-          <div className="content__inner">
-            <div className="page">
-              <h1 className="page__title">NOT FOUND</h1>
-              <div className="page__body">
-                <p>
-                  You just hit a route that doesn&#39;t exist... the sadness.
-                </p>
+      <Layout>
+        <div>
+          <Sidebar {...this.props} />
+          <div className="content">
+            <div className="content__inner">
+              <div className="page">
+                <h1 className="page__title">NOT FOUND</h1>
+                <div className="page__body">
+                  <p>
+                    You just hit a route that doesn&#39;t exist... the sadness.
+                  </p>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </Layout>
     )
   }
 }

src/pages/categories.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import Link from 'gatsby-link'
+import { Link, graphql } from 'gatsby'
 import Helmet from 'react-helmet'
+import Layout from '../components/Layout'
 import kebabCase from 'lodash/kebabCase'
 import Sidebar from '../components/Sidebar'
 
@@ -10,36 +11,40 @@ class CategoriesRoute extends React.Component {
     const categories = this.props.data.allMarkdownRemark.group
 
     return (
-      <div>
-        <Helmet title={`All Categories - ${title}`} />
-        <Sidebar {...this.props} />
-        <div className="content">
-          <div className="content__inner">
-            <div className="page">
-              <h1 className="page__title">Categories</h1>
-              <div className="page__body">
-                <div className="categories">
-                  <ul className="categories__list">
-                    {categories.map(category => (
-                      <li
-                        key={category.fieldValue}
-                        className="categories__list-item"
-                      >
-                        <Link
-                          to={`/categories/${kebabCase(category.fieldValue)}/`}
-                          className="categories__list-item-link"
+      <Layout>
+        <div>
+          <Helmet title={`All Categories - ${title}`} />
+          <Sidebar {...this.props} />
+          <div className="content">
+            <div className="content__inner">
+              <div className="page">
+                <h1 className="page__title">Categories</h1>
+                <div className="page__body">
+                  <div className="categories">
+                    <ul className="categories__list">
+                      {categories.map(category => (
+                        <li
+                          key={category.fieldValue}
+                          className="categories__list-item"
                         >
-                          {category.fieldValue} ({category.totalCount})
-                        </Link>
-                      </li>
-                    ))}
-                  </ul>
+                          <Link
+                            to={`/categories/${kebabCase(
+                              category.fieldValue
+                            )}/`}
+                            className="categories__list-item-link"
+                          >
+                            {category.fieldValue} ({category.totalCount})
+                          </Link>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </Layout>
     )
   }
 }

src/pages/index.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
 import Helmet from 'react-helmet'
+import { graphql } from 'gatsby'
+import Layout from '../components/Layout'
 import Post from '../components/Post'
 import Sidebar from '../components/Sidebar'
 
@@ -13,16 +15,18 @@ class IndexRoute extends React.Component {
     })
 
     return (
-      <div>
-        <Helmet>
-          <title>{title}</title>
-          <meta name="description" content={subtitle} />
-        </Helmet>
-        <Sidebar {...this.props} />
-        <div className="content">
-          <div className="content__inner">{items}</div>
+      <Layout>
+        <div>
+          <Helmet>
+            <title>{title}</title>
+            <meta name="description" content={subtitle} />
+          </Helmet>
+          <Sidebar {...this.props} />
+          <div className="content">
+            <div className="content__inner">{items}</div>
+          </div>
         </div>
-      </div>
+      </Layout>
     )
   }
 }

src/pages/tags.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import Link from 'gatsby-link'
+import { Link, graphql } from 'gatsby'
 import Helmet from 'react-helmet'
 import kebabCase from 'lodash/kebabCase'
+import Layout from '../components/Layout'
 import Sidebar from '../components/Sidebar'
 
 class TagsRoute extends React.Component {
@@ -10,33 +11,35 @@ class TagsRoute extends React.Component {
     const tags = this.props.data.allMarkdownRemark.group
 
     return (
-      <div>
-        <Helmet title={`All Tags - ${title}`} />
-        <Sidebar {...this.props} />
-        <div className="content">
-          <div className="content__inner">
-            <div className="page">
-              <h1 className="page__title">Tags</h1>
-              <div className="page__body">
-                <div className="tags">
-                  <ul className="tags__list">
-                    {tags.map(tag => (
-                      <li key={tag.fieldValue} className="tags__list-item">
-                        <Link
-                          to={`/tags/${kebabCase(tag.fieldValue)}/`}
-                          className="tags__list-item-link"
-                        >
-                          {tag.fieldValue} ({tag.totalCount})
-                        </Link>
-                      </li>
-                    ))}
-                  </ul>
+      <Layout>
+        <div>
+          <Helmet title={`All Tags - ${title}`} />
+          <Sidebar {...this.props} />
+          <div className="content">
+            <div className="content__inner">
+              <div className="page">
+                <h1 className="page__title">Tags</h1>
+                <div className="page__body">
+                  <div className="tags">
+                    <ul className="tags__list">
+                      {tags.map(tag => (
+                        <li key={tag.fieldValue} className="tags__list-item">
+                          <Link
+                            to={`/tags/${kebabCase(tag.fieldValue)}/`}
+                            className="tags__list-item-link"
+                          >
+                            {tag.fieldValue} ({tag.totalCount})
+                          </Link>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </Layout>
     )
   }
 }

src/templates/category-template.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
 import Helmet from 'react-helmet'
+import { graphql } from 'gatsby'
+import Layout from '../components/Layout'
 import Sidebar from '../components/Sidebar'
 import CategoryTemplateDetails from '../components/CategoryTemplateDetails'
 
@@ -9,11 +11,13 @@ class CategoryTemplate extends React.Component {
     const { category } = this.props.pageContext
 
     return (
-      <div>
-        <Helmet title={`${category} - ${title}`} />
-        <Sidebar {...this.props} />
-        <CategoryTemplateDetails {...this.props} />
-      </div>
+      <Layout>
+        <div>
+          <Helmet title={`${category} - ${title}`} />
+          <Sidebar {...this.props} />
+          <CategoryTemplateDetails {...this.props} />
+        </div>
+      </Layout>
     )
   }
 }