V2 tutorial fixes

docs/tutorial/part-five/index.md

@@ -108,10 +108,11 @@ created:
 
 ```jsx{4}
 import React from "react"
+import Layout from "../components/layout"
 
 export default ({ data }) => {
   console.log(data)
-  return <div>Hello world</div>
+  return <Layout><div>Hello world</div></Layout>
 }
 
 export const query = graphql`
@@ -145,10 +146,12 @@ Let's add some code to our component to print out the File data.
 
 ```jsx{5-37}
 import React from "react"
+import Layout from "../components/layout"
 
 export default ({ data }) => {
   console.log(data)
   return (
+  <Layout>
     <div>
       <h1>My Site's Files</h1>
       <table>
@@ -180,6 +183,7 @@ export default ({ data }) => {
         </tbody>
       </table>
     </div>
+   <Layout/>
   )
 }
 

docs/tutorial/part-four/index.md

@@ -77,7 +77,7 @@ Markdown support.
 Open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-four`. Then change to this new directory:
 
 ```shell
-gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
 cd tutorial-part-four
 ```
 
@@ -86,7 +86,7 @@ Kirkham + we'll try out a CSS-in-JS library
 [Glamorous](https://glamorous.rocks/):
 
 ```shell
-npm install --save gatsby-plugin-typography gatsby-plugin-glamor glamorous typography-theme-kirkham
+npm install --save gatsby-plugin-typography react-typography typography gatsby-plugin-glamor glamorous typography-theme-kirkham
 ```
 
 Let's set up a site similar to what we ended with in Part Three. This site will have a layout
@@ -96,37 +96,39 @@ component and two page components:
 
 ```jsx
 import React from "react"
+import Layout from "../components/layout"
 
 export default () => (
-  <div>
+  <Layout>
     <h1>Amazing Pandas Eating Things</h1>
     <div>
       <img
         src="https://2.bp.blogspot.com/-BMP2l6Hwvp4/TiAxeGx4CTI/AAAAAAAAD_M/XlC_mY3SoEw/s1600/panda-group-eating-bamboo.jpg"
         alt="Group of pandas eating bamboo"
       />
     </div>
-  </div>
+  </Layout>
 )
 ```
 
 `src/pages/about.js`
 
 ```jsx
 import React from "react"
+import Layout from "../components/layout"
 
 export default () => (
-  <div>
+  <Layout>
     <h1>About Pandas Eating Lots</h1>
     <p>
       We're the only site running on your computer dedicated to showing the best
       photos and videos of pandas eating lots of food.
     </p>
-  </div>
+  </Layout>
 )
 ```
 
-`src/layouts/index.js`
+`src/components/layout.js`
 
 ```jsx
 import React from "react"
@@ -157,7 +159,7 @@ export default ({ children }) => (
     <Link className={linkStyle} to={`/about/`}>
       About
     </Link>
-    {children()}
+    {children}
   </g.Div>
 )
 ```
@@ -171,6 +173,7 @@ import kirkhamTheme from "typography-theme-kirkham"
 const typography = new Typography(kirkhamTheme)
 
 export default typography
+export const typography.rhythm;
 ```
 
 `gatsby-config.js` (must be in the root of your project, not under src)
@@ -263,45 +266,48 @@ export const query = graphql`
 `
 ```
 
-`src/layouts/index.js`
+`src/components/layout.js`
 
-```jsx{10,19,28-33}
+```jsx{4,10-21,28-33,39}
 import React from "react"
 import g from "glamorous"
 import { css } from "glamor"
-import { Link } from "gatsby"
+import { StaticQuery, Link } from "gatsby"
 
 import { rhythm } from "../utils/typography"
 
 const linkStyle = css({ float: `right` })
 
-export default ({ children, data }) =>
-  <g.Div
-    margin={`0 auto`}
-    maxWidth={700}
-    padding={rhythm(2)}
-    paddingTop={rhythm(1.5)}
-  >
-    <Link to={`/`}>
-      <g.H3 marginBottom={rhythm(2)} display={`inline-block`}>
-        {data.site.siteMetadata.title}
-      </g.H3>
-    </Link>
-    <Link className={linkStyle} to={`/about/`}>
-      About
-    </Link>
-    {children()}
-  </g.Div>
-
-export const query = graphql`
-  query LayoutQuery {
-    site {
-      siteMetadata {
-        title
+export default ({ children }) =>
+  <StaticQuery
+    query={graphql`
+      query LayoutQuery {
+        site {
+          siteMetadata {
+            title
+          }
+        }
       }
+    `}
+    render={data =>
+      <g.Div
+        margin={`0 auto`}
+        maxWidth={700}
+        padding={rhythm(2)}
+        paddingTop={rhythm(1.5)}
+      >
+        <Link to={`/`}>
+          <g.H3 marginBottom={rhythm(2)} display={`inline-block`}>
+            {data.site.siteMetadata.title}
+          </g.H3>
+        </Link>
+        <Link className={linkStyle} to={`/about/`}>
+          About
+        </Link>
+        {children}
+      </g.Div>
     }
-  }
-`
+  />
 ```
 
 It worked!! 🎉
@@ -310,8 +316,8 @@ It worked!! 🎉
 
 But let's restore the real title.
 
-One of the core principles of Gatsby is creators need an immediate connection to
-what they're creating
+One of the core principles of Gatsby is _creators need an immediate connection to
+what they're creating_
 ([hat tip to Bret Victor](http://blog.ezyang.com/2012/02/transcript-of-inventing-on-principleb/)).
 Or, in other words, when you make any change to code you should immediately see
 the effect of that change. You manipulate an input of Gatsby and you see the new

docs/tutorial/part-one/index.md

@@ -51,7 +51,7 @@ npm install --global gatsby-cli
 Once that's installed, open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-one` and then move to this new directory:
 
 ```sh
-gatsby new tutorial-part-one https://github.com/gatsbyjs/gatsby-starter-hello-world
+gatsby new tutorial-part-one https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
 cd tutorial-part-one
 ```
 
@@ -68,7 +68,7 @@ following command:
 gatsby develop
 ```
 
-You should shortly see some text, close to the bottom, that says `The development server is listening at:` [http://localhost:8000](http://localhost:8000). Open that address in your
+You should shortly see some text, close to the bottom, that says <code>You can now view <strong>gatsby-starter-hello-world</strong> in the browser</code> [http://localhost:8000](http://localhost:8000). Open that address in your
 browser and...
 
 ![Gatsby.js hello world](hello-world.png)
@@ -150,7 +150,7 @@ First create the link to the new page.
 To do that, import the `<Link>` component from the `gatsby` package that
 was installed along with the starter.
 
-Unlike the normal HTML `<a>` element, Gatsby's `Link` component uses `to` for
+Unlike the normal HTML `<a>` element, Gatsby's `Link` component uses the "`to`" prop for
 specifying the page you want to link to. Let's link to a page with the pathname
 of `/page-2/`. Try adding that. Once you're done, the page component should look
 like:
@@ -204,10 +204,10 @@ _Challenge_: Using the instructions above as hints, see if you can create a thir
 
 ## Interactive page
 
-One nice thing about using Gatsby for building websites vs. other tools is that itʼs easier to add interactivity to your pages. React.js was designed for
+One nice thing about using Gatsby for building websites vs. other tools is that itʼs simple to add interactivity to your pages. Since Gatsby uses React for everything, it's no extra setup work to go beyond normal content templates to rich client interactivity. React excels at building applications as it was designed for
 Facebook.com and is used on many other world-class web applications.
 
-Let's see how to add interactive elements to our pages. Let's start with a counter.
+Let's see how to add interactivity to our pages. Let's start with a counter.
 
 We'll start by creating a new link to a page at `/counter`/ from our original
 `index.js` page component `<Link to="/counter/">Counter</Link>`.
@@ -304,7 +304,7 @@ We're now rendering the current count from the component state.
 
 Let's now change the state when we click on our buttons.
 
-```jsx{14-19}
+```jsx{14-31}
 import React from "react"
 
 class Counter extends React.Component {
@@ -318,11 +318,23 @@ class Counter extends React.Component {
       <div>
         <h1>Counter</h1>
         <p>current count: {this.state.count}</p>
-        <button onClick={() => this.setState({ count: this.state.count +
-          1 })}>plus
+        <button
+          onClick={() =>
+            this.setState({
+              count: this.state.count + 1,
+            })
+          }
+        >
+          plus
         </button>
-        <button onClick={() => this.setState({ count: this.state.count -
-          1 })}>minus
+        <button
+          onClick={() =>
+            this.setState({
+              count: this.state.count - 1,
+            })
+          }
+        >
+          minus
         </button>
       </div>
     )
@@ -334,6 +346,8 @@ export default Counter
 
 There you go! A working React.js counter inside your static website 👌
 
+Because Gatsby is just React, it's easy to add web app features to your Gatsby sites as needed e.g. talk to APIs, add logged-in features, etc.
+
 _Bonus challenge_: One fun thing is that hot reloading isn't just for content and styles; it
 works on code as well. Currently, when you click the buttons on the counter, the numbers go up and down in increments of 1. Try to make the counter go up and down in a different increments (for example, 5).
 
@@ -362,7 +376,7 @@ Next, build your site by running the following command in the terminal at the ro
 gatsby build
 ```
 
-Building should take 15-30 seconds. At this point, it's useful to take a look at the files that the `gatsby build` command just prepared to deploy. Take a look at a list of the generated files by typing in the following terminal command into the root of your site, which will let you look at the `public` directory:
+Building should take 15-30 seconds. Once the build is finished, it's interesting to take a look at the files that the `gatsby build` command just prepared to deploy. Take a look at a list of the generated files by typing in the following terminal command into the root of your site, which will let you look at the `public` directory:
 
 ```bash
 ls public
@@ -379,7 +393,7 @@ Once this finishes running, you should see in your terminal something like:
 ![Screenshot of publishing Gatsby site with Surge](surge-deployment.png)
 
 Open the web address listed on the bottom line (`lowly-pain.surge.sh` in this
-case) and you'll see your newly published site! Good work!
+case) and you'll see your newly published site! Great work!
 
 ## What's coming next?
 

docs/tutorial/part-seven/index.md

@@ -111,8 +111,8 @@ fields.
 ```javascript{3,4,6-11}
 const { createFilePath } = require(`gatsby-source-filesystem`)
 
-exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
-  const { createNodeField } = boundActionCreators
+exports.onCreateNode = ({ node, getNode, actions }) => {
+  const { createNodeField } = actions
   if (node.internal.type === `MarkdownRemark`) {
     const slug = createFilePath({ node, getNode, basePath: `pages` })
     createNodeField({
@@ -151,8 +151,8 @@ our pages—what are their paths, what template component do they use, etc.
 ```javascript{15-34}
 const { createFilePath } = require(`gatsby-source-filesystem`)
 
-exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
-  const { createNodeField } = boundActionCreators
+exports.onCreateNode = ({ node, getNode, actions }) => {
+  const { createNodeField } = actions
   if (node.internal.type === `MarkdownRemark`) {
     const slug = createFilePath({ node, getNode, basePath: `pages` })
     createNodeField({
@@ -163,7 +163,7 @@ exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
   }
 }
 
-exports.createPages = ({ graphql, boundActionCreators }) => {
+exports.createPages = ({ graphql, actions }) => {
   return new Promise((resolve, reject) => {
     graphql(`
       {
@@ -214,8 +214,8 @@ Then update `gatsby-node.js`
 const path = require(`path`)
 const { createFilePath } = require(`gatsby-source-filesystem`)
 
-exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
-  const { createNodeField } = boundActionCreators
+exports.onCreateNode = ({ node, getNode, actions }) => {
+  const { createNodeField } = actions
   if (node.internal.type === `MarkdownRemark`) {
     const slug = createFilePath({ node, getNode, basePath: `pages` })
     createNodeField({
@@ -226,8 +226,8 @@ exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
   }
 }
 
-exports.createPages = ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
+exports.createPages = ({ graphql, actions }) => {
+  const { createPage } = actions
   return new Promise((resolve, reject) => {
     graphql(`
       {