Update for v2

.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ['react', 'es2015', 'stage-1'],
-  "plugins": ['add-module-exports']
-}

package.json

@@ -7,25 +7,30 @@
     "url": "https://github.com/gatsbyjs/gatsby-starter-blog/issues"
   },
   "dependencies": {
-    "gatsby": "^1.9.250",
+    "gatsby": "next",
-    "gatsby-link": "^1.6.39",
+    "gatsby-link": "next",
-    "gatsby-plugin-feed": "^1.3.20",
+    "gatsby-plugin-feed": "next",
-    "gatsby-plugin-google-analytics": "^1.0.29",
+    "gatsby-plugin-google-analytics": "next",
-    "gatsby-plugin-offline": "^1.0.15",
+    "gatsby-plugin-offline": "next",
-    "gatsby-plugin-react-helmet": "^1.0.8",
+    "gatsby-plugin-react-helmet": "next",
-    "gatsby-plugin-sharp": "^1.6.42",
+    "gatsby-plugin-sharp": "next",
-    "gatsby-plugin-typography": "^1.7.18",
+    "gatsby-plugin-typography": "next",
-    "gatsby-remark-copy-linked-files": "^1.5.31",
+    "gatsby-remark-copy-linked-files": "next",
-    "gatsby-remark-images": "^1.5.61",
+    "gatsby-remark-images": "next",
-    "gatsby-remark-prismjs": "^1.2.24",
+    "gatsby-remark-prismjs": "next",
-    "gatsby-remark-responsive-iframe": "^1.4.18",
+    "gatsby-remark-responsive-iframe": "next",
-    "gatsby-remark-smartypants": "^1.4.12",
+    "gatsby-remark-smartypants": "next",
-    "gatsby-source-filesystem": "^1.5.31",
+    "gatsby-source-filesystem": "next",
-    "gatsby-transformer-remark": "^1.7.40",
+    "gatsby-transformer-remark": "next",
-    "gatsby-transformer-sharp": "^1.6.22",
+    "gatsby-transformer-sharp": "next",
     "lodash": "^4.17.5",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react-helmet": "^5.2.0",
+    "react-typography": "^0.16.13",
     "typeface-merriweather": "0.0.43",
     "typeface-montserrat": "0.0.43",
+    "typography": "^0.16.17",
     "typography-theme-wordpress-2016": "^0.15.10"
   },
   "devDependencies": {

src/components/layout.js

@@ -9,8 +9,11 @@ class Template extends React.Component {
     let header
 
     let rootPath = `/`
-    if (typeof __PREFIX_PATHS__ !== `undefined` && __PREFIX_PATHS__) {
+    if (
-      rootPath = __PATH_PREFIX__ + `/`
+      typeof window.__PREFIX_PATHS__ !== `undefined` &&
+      window.__PREFIX_PATHS__
+    ) {
+      rootPath = window.__PATH_PREFIX__ + `/`
     }
 
     if (location.pathname === rootPath) {
@@ -66,7 +69,7 @@ class Template extends React.Component {
         }}
       >
         {header}
-        {children()}
+        {children}
       </div>
     )
   }

src/pages/index.js

@@ -4,6 +4,7 @@ import get from 'lodash/get'
 import Helmet from 'react-helmet'
 
 import Bio from '../components/Bio'
+import Layout from '../components/layout'
 import { rhythm } from '../utils/typography'
 
 class BlogIndex extends React.Component {
@@ -12,7 +13,7 @@ class BlogIndex extends React.Component {
     const posts = get(this, 'props.data.allMarkdownRemark.edges')
 
     return (
-      <div>
+      <Layout location={this.props.location}>
         <Helmet title={siteTitle} />
         <Bio />
         {posts.map(({ node }) => {
@@ -33,7 +34,7 @@ class BlogIndex extends React.Component {
             </div>
           )
         })}
-      </div>
+      </Layout>
     )
   }
 }

src/templates/blog-post.js

@@ -4,16 +4,17 @@ import Link from 'gatsby-link'
 import get from 'lodash/get'
 
 import Bio from '../components/Bio'
+import Layout from '../components/layout'
 import { rhythm, scale } from '../utils/typography'
 
 class BlogPostTemplate extends React.Component {
   render() {
     const post = this.props.data.markdownRemark
     const siteTitle = get(this.props, 'data.site.siteMetadata.title')
-    const { previous, next } = this.props.pathContext
+    const { previous, next } = this.props.pageContext
 
     return (
-      <div>
+      <Layout location={this.props.location}>
         <Helmet title={`${post.frontmatter.title} | ${siteTitle}`} />
         <h1>{post.frontmatter.title}</h1>
         <p
@@ -59,7 +60,7 @@ class BlogPostTemplate extends React.Component {
             </li>
           )}
         </ul>
-      </div>
+      </Layout>
     )
   }
 }

src/utils/typography.js

@@ -17,3 +17,5 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 export default typography
+export const rhythm = typography.rhythm
+export const scale = typography.scale