Upgrade branch to latest gatsby

components/Bio.js

@@ -3,6 +3,10 @@ import { rhythm } from 'utils/typography'
 import { prefixLink } from 'gatsby-helpers'
 import profilePic from './profile-pic.jpg'
 
+// Import typefaces
+import 'typeface-montserrat'
+import 'typeface-merriweather'
+
 class Bio extends React.Component {
   render () {
     return (
@@ -13,7 +17,7 @@ class Bio extends React.Component {
       >
         <img
           src={prefixLink(profilePic)}
-          alt={`author name`}
+          alt={`Kyle Mathews`}
           style={{
             float: 'left',
             marginRight: rhythm(1/4),
@@ -22,7 +26,7 @@ class Bio extends React.Component {
             height: rhythm(2),
           }}
         />
-        Written by <strong>TODO author name</strong> who lives and works in TODO San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
+        Written by <strong>Kyle Mathews</strong> who lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
       </p>
     )
   }

components/ReadNext.js

@@ -1,53 +0,0 @@
-const React = require('react')
-const { Link } = require('react-router')
-
-const { rhythm, adjustFontSizeToMSValue } = require('utils/typography')
-
-const Component = React.createClass({
-  render () {
-    const { nextPost } = this.props
-    if (!nextPost) {
-      return null
-    } else {
-      return (
-        <div>
-          <h6
-            style={{
-              ...adjustFontSizeToMSValue(-0.5),
-              margin: 0,
-              letterSpacing: -0.25,
-            }}
-          >
-            READ THIS NEXT:
-          </h6>
-          <h3
-            style={{
-              margin: 0,
-            }}
-          >
-            <Link
-              to={nextPost.path}
-            >
-              {nextPost.frontmatter.title}
-            </Link>
-          </h3>
-          <p>{nextPost.excerpt}</p>
-          <hr />
-        </div>
-      )
-    }
-  }
-})
-
-export default Component
-
-export const query = `
-readNext {
-	id
-	excerpt(pruneLength: 200)
-	frontmatter {
-		title
-	}
-}
-`
-

gatsby-config.js

@@ -1,10 +1,49 @@
-const config = {
+module.exports = {
   siteMetadata: {
     title: 'Gatsby Starter Blog',
     author: 'Kyle Mathews',
-    homeCity: 'San Francisco',
   },
-  sources: `${__dirname}/pages/`,
+  plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/pages`,
+        name: 'pages',
+      },
+    },
+    `gatsby-parser-remark`,
+    `gatsby-parser-sharp`,
+    {
+      resolve: `gatsby-typegen-remark`,
+      options: {
+        plugins: [
+          {
+            resolve: `gatsby-typegen-remark-responsive-image`,
+            options: {
+              maxWidth: 590,
+            },
+          },
+          {
+            resolve: `gatsby-typegen-remark-responsive-iframe`,
+            options: {
+              wrapperStyle: `margin-bottom: 1.0725rem`,
+            },
+          },
+          'gatsby-typegen-remark-prismjs',
+          'gatsby-typegen-remark-copy-linked-files',
+          'gatsby-typegen-remark-smartypants',
+        ],
+      },
+    },
+    `gatsby-typegen-filesystem`,
+    `gatsby-typegen-sharp`,
+    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        //trackingId: `ADD YOUR TRACKING ID HERE`,
+      },
+    },
+    `gatsby-plugin-offline`,
+  ],
 }
-
-export default config

gatsby-node.js

@@ -1,46 +1,66 @@
-import _ from 'lodash'
+const _ = require('lodash')
-import Promise from 'bluebird'
+const Promise = require('bluebird')
-import path from 'path'
+const path = require('path')
+const select = require(`unist-util-select`)
+const precache = require(`sw-precache`)
+const fs = require(`fs-extra`)
 
-exports.rewritePath = (parsedFilePath, metadata) => {
+exports.createPages = ({ args }) => {
-  if (parsedFilePath.ext === 'md') {
+  const { graphql } = args
-    return `/${parsedFilePath.dirname.split('---')[1]}/`
-  }
-}
 
-exports.createPages = ({ graphql }) => (
+  return new Promise((resolve, reject) => {
-  new Promise((resolve, reject) => {
     const pages = []
-    const blogPost = path.resolve('./page-templates/blog-post.js')
+    const blogPost = path.resolve('templates/template-blog-post.js')
     graphql(`
       {
-        allMarkdown(first: 1000) {
+        allMarkdownRemark(limit: 1000) {
           edges {
             node {
-              path
+              slug
             }
           }
         }
       }
     `)
-    .then(result => {
+    .then((result) => {
       if (result.errors) {
         console.log(result.errors)
         reject(result.errors)
       }
 
       // Create blog posts pages.
-      _.each(result.data.allMarkdown.edges, (edge) => {
+      _.each(result.data.allMarkdownRemark.edges, (edge) => {
-        if (edge.node.path !== '/404/') {
         pages.push({
-            path: edge.node.path,
+          path: edge.node.slug, // required
           component: blogPost,
+          context: {
+            slug: edge.node.slug,
+          },
         })
-        }
       })
 
-      console.log(pages)
       resolve(pages)
     })
   })
-)
+}
+
+// Add custom url pathname for blog posts.
+exports.modifyAST = ({ args }) => {
+  const { ast } = args
+  const files = select(ast, 'File')
+  files.forEach((file) => {
+    if (file.extension !== `md`) {
+      return
+    }
+    const parsedFilePath = path.parse(file.relativePath)
+    console.log(parsedFilePath)
+    const slug = `/${parsedFilePath.dir}/`
+    console.log(slug)
+    file.slug = slug
+    const markdownNode = select(file, `MarkdownRemark`)[0]
+    if (markdownNode) {
+      markdownNode.slug = slug
+    }
+  })
+  return files
+}

html.js

@@ -1,19 +1,25 @@
 import React from 'react'
-import DocumentTitle from 'react-document-title'
+import { TypographyStyle } from 'react-typography'
-import { prefixLink } from 'gatsby-helpers'
+import Helmet from 'react-helmet'
-import { GoogleFont, TypographyStyle } from 'react-typography'
+
 import typography from './utils/typography'
-import HTMLScripts from 'html-scripts'
+
-import HTMLStyles from 'html-styles'
+let stylesStr
+if (process.env.NODE_ENV === `production`) {
+  try {
+    stylesStr = require(`!raw-loader!./public/styles.css`)
+  } catch (e) {
+    console.log(e)
+  }
+}
 
 module.exports = React.createClass({
-  displayName: 'HTML',
-  propTypes: {
-    body: React.PropTypes.string,
-  },
   render () {
-    const { body } = this.props
+    const head = Helmet.rewind()
-    const title = DocumentTitle.rewind()
+    let css
+    if (process.env.NODE_ENV === `production`) {
+      css = <style id="gatsby-inlined-css" dangerouslySetInnerHTML={{ __html: stylesStr }} />
+    }
 
     return (
       <html lang="en">
@@ -24,14 +30,16 @@ module.exports = React.createClass({
             name="viewport"
             content="width=device-width, initial-scale=1.0"
           />
-          <title>{title}</title>
+          {this.props.headComponents}
           <TypographyStyle typography={typography} />
-          <GoogleFont typography={typography} />
+          {css}
-          <HTMLStyles />
+          {head.title.toComponent()}
+          {head.meta.toComponent()}
+          {head.link.toComponent()}
         </head>
-        <body className="landing-page">
+        <body>
-          <div id="react-mount" dangerouslySetInnerHTML={{ __html: body }} />
+          <div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
-          <HTMLScripts scripts={this.props.scripts} />
+          {this.props.postBodyComponents}
         </body>
       </html>
     )

layouts/default.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from 'react-router'
 import { Container } from 'react-responsive-grid'
 import { prefixLink } from 'gatsby-helpers'
-import { rhythm, adjustFontSizeToMSValue } from 'utils/typography'
+import { rhythm, scale } from 'utils/typography'
 
 class Template extends React.Component {
   render () {
@@ -12,7 +12,7 @@ class Template extends React.Component {
       header = (
         <h1
           style={{
-            ...adjustFontSizeToMSValue(1.5),
+            ...scale(1.5),
             marginBottom: rhythm(1.5),
             marginTop: 0,
           }}
@@ -25,7 +25,7 @@ class Template extends React.Component {
             }}
             to={prefixLink('/')}
           >
-            {'TODO insert blog title here from query'}
+            Gatsby Starter Blog
           </Link>
         </h1>
       )
@@ -35,6 +35,7 @@ class Template extends React.Component {
           style={{
             fontFamily: 'Montserrat, sans-serif',
             marginTop: 0,
+            marginBottom: rhythm(-1),
           }}
         >
           <Link
@@ -45,7 +46,7 @@ class Template extends React.Component {
             }}
             to={prefixLink('/')}
           >
-            {'insert blog title here'}
+            Gatsby Starter Blog
           </Link>
         </h3>
       )

package.json

@@ -7,19 +7,38 @@
     "url": "https://github.com/gatsbyjs/gatsby-starter-blog/issues"
   },
   "dependencies": {
-    "gatsby": "^1.0.0-alpha3",
+    "gatsby": "1.0.0-alpha12",
+    "gatsby-link": "1.0.0-alpha12",
+    "gatsby-parser-remark": "1.0.0-alpha12",
+    "gatsby-parser-sharp": "1.0.0-alpha12",
+    "gatsby-plugin-google-analytics": "1.0.0-alpha12",
+    "gatsby-plugin-manifest": "1.0.0-alpha12",
+    "gatsby-plugin-offline": "1.0.0-alpha12",
+    "gatsby-plugin-preact": "1.0.0-alpha12",
+    "gatsby-plugin-sharp": "1.0.0-alpha12",
+    "gatsby-source-filesystem": "1.0.0-alpha12",
+    "gatsby-typegen-filesystem": "1.0.0-alpha12",
+    "gatsby-typegen-remark": "1.0.0-alpha12",
+    "gatsby-typegen-remark-copy-linked-files": "1.0.0-alpha12",
+    "gatsby-typegen-remark-prismjs": "1.0.0-alpha12",
+    "gatsby-typegen-remark-responsive-iframe": "1.0.0-alpha12",
+    "gatsby-typegen-remark-responsive-image": "1.0.0-alpha12",
+    "gatsby-typegen-remark-smartypants": "1.0.0-alpha12",
+    "gatsby-typegen-sharp": "1.0.0-alpha12",
     "lodash": "^4.15.0",
     "moment": "^2.14.1",
-    "react-document-title": "^2.0.2",
+    "react-helmet": "^4.0.0",
     "react-responsive-grid": "^0.3.3",
-    "react-typography": "^0.12.0",
+    "react-typography": "^0.15.0",
     "safe-access": "^0.1.0",
-    "typography": "^0.13.0",
+    "typeface-merriweather": "^0.0.25",
-    "typography-theme-wordpress-2016": "^0.13.0",
+    "typeface-montserrat": "^0.0.24",
+    "typography": "^0.15.8",
+    "typography-theme-wordpress-2016": "^0.15.1",
     "underscore.string": "^3.2.3"
   },
   "devDependencies": {
-    "gh-pages": "^0.11.0"
+    "gh-pages": "^0.12.0"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
   "keywords": [

page-templates/blog-post.js

@@ -1,71 +0,0 @@
-import React from 'react'
-import DocumentTitle from 'react-document-title'
-import { Link } from 'react-router'
-import get from 'lodash/get'
-import { rhythm, adjustFontSizeToMSValue } from 'utils/typography'
-import ReadNext from '../components/ReadNext'
-//import { query } from '../components/ReadNext'
-import Bio from 'components/Bio'
-const query = `
-readNext {
-  path
-  excerpt(pruneLength: 200)
-  frontmatter {
-    title
-  }
-}
-`
-
-class BlogPostRoute extends React.Component {
-  render () {
-    const post = this.props.data.markdown
-    const siteTitle = get(this.props, 'data.site.siteMetadata.title')
-
-    return (
-      <DocumentTitle title={`${post.frontmatter.title} | ${siteTitle}`}>
-        <div>
-          <h1>{post.frontmatter.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: post.bodyHTML }} />
-          <p
-            style={{
-              ...adjustFontSizeToMSValue(-1/5),
-              display: 'block',
-              marginBottom: rhythm(1),
-            }}
-          >
-            Posted TODO DATE
-          </p>
-          <hr
-            style={{
-              marginBottom: rhythm(1),
-            }}
-          />
-          <ReadNext nextPost={post.frontmatter.readNext} />
-          <Bio />
-        </div>
-      </DocumentTitle>
-    )
-  }
-}
-
-export default BlogPostRoute
-
-export const pageQuery = `
-  query BlogPostByPath($path: String!) {
-    site {
-      siteMetadata {
-        title
-        author
-      }
-    }
-    markdown(path: $path) {
-      id
-      bodyHTML
-      frontmatter {
-        ${query}
-        title
-        #date(formatString: "MMMM DD, YYYY")
-      }
-    }
-  }
-`

pages/404.md

@@ -1,6 +0,0 @@
----
-path: /404.html
----
-# NOT FOUND
-
-You just hit a route that doesn't exist... the sadness.

pages/index.js

@@ -1,16 +1,17 @@
 import React from 'react'
 import { Link } from 'react-router'
 import get from 'lodash/get'
-import DocumentTitle from 'react-document-title'
+import Helmet from 'react-helmet'
-import { prefixLink } from 'gatsby-helpers'
 import { rhythm } from 'utils/typography'
 import include from 'underscore.string/include'
 import Bio from 'components/Bio'
 
 class BlogIndex extends React.Component {
   render () {
+    console.log(this.props)
     const pageLinks = []
-    const posts = get(this, 'props.data.allMarkdown.edges')
+    const siteTitle = get(this, 'props.data.site.siteMetadata.title')
+    const posts = get(this, 'props.data.allMarkdownRemark.edges')
     posts.forEach((post) => {
       if (post.node.path !== '/404/') {
         const title = get(post, 'node.frontmatter.title') || post.node.path
@@ -23,7 +24,7 @@ class BlogIndex extends React.Component {
           >
             <Link
               style={{boxShadow: 'none'}}
-              to={prefixLink(post.node.path)}
+              to={post.node.slug}
             >
               {post.node.frontmatter.title}
             </Link>
@@ -33,14 +34,13 @@ class BlogIndex extends React.Component {
     })
 
     return (
-      <DocumentTitle title={get(this, 'props.data.site.siteMetadata.title')}>
       <div>
+        <Helmet title={get(this, 'props.data.site.siteMetadata.title')} />
         <Bio />
         <ul>
           {pageLinks}
         </ul>
       </div>
-      </DocumentTitle>
     )
   }
 }
@@ -54,15 +54,14 @@ export default BlogIndex
 export const pageQuery = `
 {
   site {
-    buildTime
     siteMetadata {
       title
     }
   }
-  allMarkdown(first: 2000) {
+  allMarkdownRemark {
     edges {
       node {
-        path
+        slug
         frontmatter {
           title
         }

templates/template-blog-post.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import Helmet from 'react-helmet'
+import { Link } from 'react-router'
+import get from 'lodash/get'
+import { rhythm, scale } from 'utils/typography'
+import Bio from 'components/Bio'
+
+class BlogPostRoute extends React.Component {
+  render () {
+    const post = this.props.data.markdownRemark
+    const siteTitle = get(this.props, 'data.site.siteMetadata.title')
+    console.log(this.props)
+
+    return (
+      <div>
+        <Helmet title={`${post.frontmatter.title} | ${siteTitle}`}/>
+        <h1>{post.frontmatter.title}</h1>
+        <p
+          style={{
+            ...scale(-1/5),
+            display: 'block',
+            marginBottom: rhythm(1),
+            marginTop: rhythm(-1),
+          }}
+        >
+          {post.frontmatter.date}
+        </p>
+        <div dangerouslySetInnerHTML={{ __html: post.html }} />
+        <hr
+          style={{
+            marginBottom: rhythm(1),
+          }}
+        />
+        <Bio />
+      </div>
+    )
+  }
+}
+
+export default BlogPostRoute
+
+export const pageQuery = `
+  query BlogPostByPath($slug: String!) {
+    site {
+      siteMetadata {
+        title
+        author
+      }
+    }
+    markdownRemark(slug: { eq: $slug }) {
+      id
+      html
+      frontmatter {
+        title
+        date(formatString: "MMMM DD, YYYY")
+      }
+    }
+  }
+`