Upgrades for Gatsby 0.8

.babelrc

@@ -1,3 +0,0 @@
-{
-  "stage": 2,
-}

components/ReadNext.jsx

@@ -1,22 +1,16 @@
 import React from 'react'
 import { Link } from 'react-router'
 import { prune, include as includes } from 'underscore.string'
-import find from 'lodash/collection/find'
+import find from 'lodash/find'
 import { rhythm, fontSizeToMS } from 'utils/typography'
 
-export default class ReadNext extends React.Component {
-  propTypes () {
-    return {
-      post: React.PropTypes.object,
-      pages: React.PropTypes.object,
-    }
-  }
+class ReadNext extends React.Component {
   render () {
     const readNext = this.props.post.readNext
     let nextPost
-    if (readNext !== null) {
+    if (readNext) {
       nextPost = find(this.props.pages, (page) =>
-        includes(page.path, readNext.slice(1, -1))
+        includes(page.path, readNext)
       )
     }
     if (!nextPost) {
@@ -47,8 +41,12 @@ export default class ReadNext extends React.Component {
             }}
           >
             <Link
-              to={nextPost.path}
-              query={{ readNext: true }}
+              to={{
+                pathname: nextPost.path,
+                query: {
+                  readNext: true,
+                },
+              }}
             >
               {nextPost.data.title}
             </Link>
@@ -60,3 +58,10 @@ export default class ReadNext extends React.Component {
     }
   }
 }
+
+ReadNext.propTypes = {
+  post: React.PropTypes.object.isRequired,
+  pages: React.PropTypes.array,
+}
+
+export default ReadNext

package.json

@@ -21,20 +21,24 @@
   },
   "homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
   "dependencies": {
-    "lodash": "^3.10.1",
+    "lodash": "^4.5.0",
     "moment": "^2.10.3",
-    "react": "^0.14.3",
+    "react": "^0.14.7",
     "react-document-title": "^2.0.1",
-    "react-dom": "^0.14.3",
+    "react-dom": "^0.14.7",
     "react-responsive-grid": "^0.3.0",
-    "react-router": "^0.13.5",
+    "react-router": "^2.0.0",
     "safe-access": "^0.1.0",
-    "typography": "^0.6.2",
+    "typography": "^0.7.0",
     "underscore.string": "^3.2.2"
   },
   "devDependencies": {
+    "babel-plugin-react-transform": "^1.1.1",
     "eslint": "^1.10.3",
     "eslint-config-airbnb": "^5.0.1",
-    "eslint-plugin-react": "^4.0.0"
+    "eslint-plugin-react": "^4.0.0",
+    "react-transform-catch-errors": "^1.0.0",
+    "react-transform-hmr": "^1.0.0",
+    "redbox-react": "^1.0.1"
   }
 }

pages/_template.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RouteHandler, Link } from 'react-router'
+import { Link } from 'react-router'
 import { Container } from 'react-responsive-grid'
 import { link } from 'gatsby-helpers'
 import { rhythm, fontSizeToMS } from 'utils/typography'
@@ -7,15 +7,10 @@ import { config } from 'config'
 
 import '../css/styles.css'
 
-export default class extends React.Component {
-  propTypes () {
-    return {
-      route: React.PropTypes.object,
-    }
-  }
+class Template extends React.Component {
   render () {
     let header
-    if (this.props.route.path === link('/')) {
+    if (this.props.location.pathname === link('/')) {
       header = (
         <h1
           style={{
@@ -58,8 +53,16 @@ export default class extends React.Component {
         }}
       >
         {header}
-        <RouteHandler {...this.props}/>
+        {this.props.children}
       </Container>
     )
   }
 }
+
+Template.propTypes = {
+  children: React.PropTypes.any,
+  location: React.PropTypes.object,
+  route: React.PropTypes.object,
+}
+
+export default Template

pages/index.jsx

@@ -7,12 +7,7 @@ import { rhythm } from 'utils/typography'
 import access from 'safe-access'
 import { config } from 'config'
 
-export default class extends React.Component {
-  propTypes () {
-    return {
-      route: React.PropTypes.object,
-    }
-  }
+class BlogIndex extends React.Component {
   render () {
     const pageLinks = []
     // Sort pages.
@@ -20,8 +15,8 @@ export default class extends React.Component {
       access(page, 'data.date')
     ).reverse()
     sortedPages.forEach((page) => {
-      const title = access(page, 'data.title') || page.path
-      if (page.path && page.path !== '/' && access(page, 'file.extension') === '.md') {
+      if (access(page, 'file.ext') === 'md') {
+        const title = access(page, 'data.title') || page.path
         pageLinks.push(
           <li
             key={page.path}
@@ -62,3 +57,9 @@ export default class extends React.Component {
     )
   }
 }
+
+BlogIndex.propTypes = {
+  route: React.PropTypes.object,
+}
+
+export default BlogIndex

wrappers/md.jsx

@@ -8,12 +8,7 @@ import { config } from 'config'
 
 import '../css/zenburn.css'
 
-module.exports = React.createClass({
-  propTypes () {
-    return {
-      route: React.PropTypes.object,
-    }
-  },
+class MarkdownWrapper extends React.Component {
   render () {
     const post = this.props.route.page.data
 
@@ -35,7 +30,7 @@ module.exports = React.createClass({
               marginBottom: rhythm(2),
             }}
           />
-          <ReadNext post={post} {...this.props}/>
+          <ReadNext post={post} pages={this.props.route.pages} />
           <p>
             <img
               src={link('/kyle-round-small-pantheon.jpg')}
@@ -47,10 +42,16 @@ module.exports = React.createClass({
                 height: rhythm(2),
               }}
             />
-            <strong>{this.props.config.authorName}</strong> lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
+            <strong>{config.authorName}</strong> lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
           </p>
         </div>
       </DocumentTitle>
     )
-  },
-})
+  }
+}
+
+MarkdownWrapper.propTypes = {
+  route: React.PropTypes.object,
+}
+
+export default MarkdownWrapper