chore(docs): fix commas and tweak small issues in tutorial

docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md

@@ -20,7 +20,7 @@ rendering][react-dom-server] at build time. This means that your users get all
 the benefits of a static site such as the ability to work without JavaScript,
 search engine friendliness, speedy load times, etc. without losing the dynamism
 and interactivity that is expected of the modern web. Once rendered to static
-HTML, client-site React/JavaScript _can_ take over (if creating stateful
+HTML, client-side React/JavaScript _can_ take over (if creating stateful
 components or logic in `componentDidMount`) and add dynamism to the statically
 generated content.
 
@@ -36,7 +36,7 @@ these new features by creating a static blog. Let's get on it!
 ### Using the CLI
 
 Gatsby ships with a great CLI (command line interface) that contains the
-functionality of scaffolding out a working site, as well as commands to help
+functionality of scaffolding out a working site as well as commands to help
 develop the site once created.
 
 `gatsby new personal-blog && cd $_`
@@ -47,7 +47,7 @@ developed upon. The CLI generates common development scripts to help you get sta
 For example you can run `npm run build` (build a production, statically generated version of the project) or `npm run develop` (launch a hot-reload enabled web development server),
 etc.
 
-We can now begin the exciting task of _actually_ developing on the site, and
+We can now begin the exciting task of _actually_ developing on the site and
 creating a functional, modern blog. You'll generally want to use `npm run develop` to launch the local development server to validate functionality as we
 progress through the steps.
 
@@ -65,14 +65,14 @@ generating a sitemap, etc.) _or_ they extend Gatsby's webpack configuration
 adding support for TypeScript, Sass, etc.
 
 For this particular blog post, we want a single page app-like feel (without page
-reloads), as well as the ability to dynamically change the `title` tag within
+reloads) as well as the ability to dynamically change the `title` tag within
 the `head` tags. As noted, the Gatsby plugin ecosystem is rich, vibrant, and
 growing, so oftentimes a plugin already exists that solves the particular
 problem you're trying to solve. To address the functionality we want for _this_
 blog, we'll use the following plugins:
 
 - [`gatsby-plugin-catch-links`][gatsby-plugin-catch-links]
-  - implements the history `pushState` API, and does not require a page reload
+  - implements the history `pushState` API and does not require a page reload
     on navigating to a different page in the blog
 - [`gatsby-plugin-react-helmet`][gatsby-plugin-react-helmet]
   - [react-helmet][react-helmet] is a tool that allows for modification of the
@@ -103,8 +103,8 @@ module.exports = {
 ```
 
 Without any additional work besides a `yarn install` and editing a config file,
-we now have the ability to edit our site's head tags, as well as implement a
-single page app feel without reloads. Now let's enhance the base functionality
+we now have the ability to edit our site's head tags as well as implement a
+single page app feel without reloads. Now, let's enhance the base functionality
 by implementing a source plugin which can load blog posts from our local file
 system.
 
@@ -117,7 +117,7 @@ workflow often involves using
 disk--e.g. Markdown files--and then specifying a Markdown transformer to
 transform the Markdown into HTML.
 
-Since the bulk of the blog's content, and each article, will be authored in
+Since the bulk of the blog's content and each article will be authored in
 Markdown, let's add that [`gatsby-source-filesystem`][gatsby-source-filesystem]
 plugin. Similarly to our previous step, we'll install the plugin and then inject
 into our `gatsby-config.js`, like so:
@@ -146,16 +146,16 @@ module.exports = {
 ```
 
 Some explanation will be helpful here! An `options` object can be passed to a
-plugin, and we're passing the filesystem `path` (i.e. where our Markdown files
-will be located), and then a `name` for the source files. Now that Gatsby knows
+plugin, and we're passing the filesystem `path` (which is where our Markdown files
+will be located) and then a `name` for the source files. Now that Gatsby knows
 about our source files, we can begin applying some useful transformers to
 convert those files into usable data!
 
 ### Transformer plugins
 
 As mentioned, a transformer plugin takes some underlying data format that is not
-inherently usable in its current form (e.g. Markdown, json, yaml, etc.), and
-transforms it into a format that Gatsby can understand, and that we can query
+inherently usable in its current form (e.g. Markdown, json, yaml, etc.) and
+transforms it into a format that Gatsby can understand and that we can query
 against with GraphQL. Jointly, the filesystem source plugin will load file nodes
 (as Markdown) off of our filesystem, and then the Markdown transformer will take
 over and convert to usable HTML.
@@ -165,7 +165,7 @@ installed.
 
 - [gatsby-transformer-remark][gatsby-transformer-remark]
   - Uses the [remark][remark] Markdown parser to transform .md files on disk
-    into HTML; additionally this transformer can optionally take plugins to
+    into HTML; additionally, this transformer can optionally take plugins to
     further extend functionality--e.g. add syntax highlighting with
     `gatsby-remark-prismjs`, `gatsby-remark-copy-linked-files` to copy relative
     files specified in markdown, `gatsby-remark-images` to compress images and
@@ -205,8 +205,8 @@ module.exports = {
 ```
 
 Whew! Seems like a lot of set up, but collectively these plugins are going to
-super charge Gatsby, and give us an incredibly powerful (yet relatively simple!)
-development environment. We have one more set up step and it's an easy one.
+super charge Gatsby and give us an incredibly powerful (yet relatively simple!)
+development environment. We have one more setup step and it's an easy one.
 We're simply going to create a Markdown file that will contain the content of
 our first blog post. Let's get to it.
 
@@ -217,8 +217,8 @@ to be in `src/pages`, so that's exactly where we'll put it!
 
 Gatsby is not at all prescriptive in naming conventions, but a typical practice
 for blog posts is to name the folder something like `MM-DD-YYYY-title`, e.g.
-`07-12-2017-hello-world`. Let's do just that, and create the folder
-`src/pages/07-12-2017-getting-started`, and place an `index.md` inside!
+`07-12-2017-hello-world`. Let's do just that. Create the folder
+`src/pages/07-12-2017-getting-started` and place an `index.md` inside!
 
 The content of this Markdown file will be our blog post, authored in Markdown
 (of course!). Here's what it'll look like:
@@ -237,7 +237,7 @@ _Fairly_ typical stuff, except for the block surrounded in dashes. What is that?
 That is what is referred to as [`frontmatter`][frontmatter], and the contents of
 the block can be used to inject React components with the specified data, e.g.
 path, date, title, etc. Any piece of data can be injected here (e.g. tags,
-sub-title,draft, etc.), so feel free to experiment and find what necessary
+sub-title, draft, etc.), so feel free to experiment and find what necessary
 pieces of frontmatter are required to achieve an ideal blogging system for your
 usage. One important note is that `path` will be used when we dynamically create
 our pages to specify the URL/path to render the file (in a later step!). In this
@@ -360,7 +360,7 @@ into the query.
 At this point, we have a bunch of plugins installed to load files off of disk,
 transform Markdown to HTML, and other utilities. We have a single, lonely
 Markdown file that will be rendered as a blog post. Finally, we have a React
-template for blog posts, as well as a wired up GraphQL query to query for a blog
+template for blog posts as well as a wired up GraphQL query to query for a blog
 post and inject the React template with the queried data. Next up:
 programmatically creating the necessary static pages (and injecting the
 templates) with Gatsby's Node API. Let's get down to it.
@@ -512,7 +512,7 @@ frontmatter--the result of which will be our stringified and parsed React
 template injected with the data from our GraphQL query. Whoa, it's actually
 starting to come together!
 
-We can run `yarn develop` at this point, and then navigate to
+We can run `yarn develop` at this point and then navigate to
 `http://localhost:8000/hello-world` to see our first blog post, which should
 look something like below:
 
@@ -524,18 +524,18 @@ isn't a blog! We can't expect our users to guess the path of each post, we need
 to have an index or listing page, where we display each blog post, a short
 snippet, and a link to the full blog post. Wouldn't you know it, we can do this
 incredibly easily with Gatsby, using a similar strategy as we used in our blog
-template, e.g. a React component and a GraphQL query.
+template, i.e. a React component and a GraphQL query.
 
 ## Creating the Blog Listing
 
-I won't go into quite as much detail for this section, because we've already
+I won't go into quite as much detail for this section because we've already
 done something very similar for our blog template! Look at us, we're pro
 Gatsby-ers at this point!
 
 Gatsby has a standard for "listing pages," and they're placed in the root of our
 filesystem we specified in `gatsby-source-filesystem`, e.g.
-`src/pages/index.js`. So create that file if it does not exist, and let's get it
-working! Additionally note that any static JavaScript files (that export a React
+`src/pages/index.js`. So, create that file if it does not exist, and let's get it
+working! Additionally, note that any static JavaScript files (that export a React
 component!) will get a corresponding static HTML file. For instance, if we
 create `src/pages/tags.js`, the path `http://localhost:8000/tags/` will be
 available within the browser and the statically generated site.
@@ -590,19 +590,19 @@ export const pageQuery = graphql`
 OK! So we've followed a similar approach to our blog post template, so this
 should hopefully seem pretty familiar. Once more we're exporting `pageQuery`
 which contains a GraphQL query. Note that we're pulling a slightly different
-data set, specifically we are pulling an `excerpt` of 250 characters rather than
-the full HTML, as well as we are formatting the pulled date with a format
+data set -- specifically, we are pulling an `excerpt` of 250 characters rather than
+the full HTML as we are formatting the pulled date with a format
 string! GraphQL is awesome.
 
 The actual React component is fairly trivial, but one important note should be
-made. It's important that when linking to internal content, i.e. other blog
+made. It's important that when linking to internal content, e.g. other blog
 links, that you should always use `Link` from `gatsby`. Gatsby does not work if pages
 are not routed via this utility. Additionally, this utility also works with
-`pathPrefix`, which allows for a Gatsby site to be deployed a non-root domain.
-This is useful if this blog will be hosted on something like GitHub Pages, or
+`pathPrefix`, which allows for a Gatsby site to be deployed on a non-root domain.
+This is useful if this blog will be hosted on something like GitHub Pages or
 perhaps hosted at `/blog`.
 
-Now this is getting exciting and it feels like we're finally getting somewhere!
+Now, this is getting exciting and it feels like we're finally getting somewhere!
 At this point, we have a fully functional blog generated by Gatsby, with real
 content authored in Markdown, a blog listing, and the ability to navigate around
 in the blog. If you run `yarn develop`, `http://localhost:8000` should display a

docs/tutorial/part-eight/index.md

@@ -85,7 +85,7 @@ Quoting [Google](https://developers.google.com/web/fundamentals/web-app-manifest
 npm install --save gatsby-plugin-manifest
 ```
 
-2. Add a favicon for your app under `src/images/icon.png`. The icon is necessary to build all images for the manifest. For more information look at the docs of [`gatsby-plugin-manifest`](/~https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md).
+2. Add a favicon for your app under `src/images/icon.png`. The icon is necessary to build all images for the manifest. For more information, look at the docs for [`gatsby-plugin-manifest`](/~https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md).
 
 3. Add the plugin to the `plugins` array in your `gatsby-config.js` file.
 
@@ -116,7 +116,7 @@ That's all you need to get started with adding a web manifest to a Gatsby site.
 
 Another requirement for a website to qualify as a PWA is the use of a [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API). A service worker runs in the background, deciding to serve network or cached content based on connectivity, allowing for a seamless, managed offline experience.
 
-[Gatsby's offline plugin](/packages/gatsby-plugin-offline/) makes a Gatsby site work offline, and more resistant to bad network conditions, by creating a service worker for your site.
+[Gatsby's offline plugin](/packages/gatsby-plugin-offline/) makes a Gatsby site work offline and more resistant to bad network conditions by creating a service worker for your site.
 
 ### ✋ Using `gatsby-plugin-offline`
 
@@ -148,7 +148,7 @@ That's all you need to get started with service workers with Gatsby.
 
 ## Add page metadata
 
-Adding metadata to pages (such as a title or description) is key in helping search engines like Google understand your content, and decide when to surface it in search results.
+Adding metadata to pages (such as a title or description) is key in helping search engines like Google understand your content and decide when to surface it in search results.
 
 [React Helmet](/~https://github.com/nfl/react-helmet) is a package that provides a React component interface for you to manage your [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head).
 
@@ -206,7 +206,7 @@ Lighthouse is a great tool for site improvements and learning -- Continue lookin
 
 ### Official Documentation
 
-- [Official Documentation](https://www.gatsbyjs.org/docs/): View our Official Documentation for _[Quick Start](https://www.gatsbyjs.org/docs/)_, _[Detailed Guides](https://www.gatsbyjs.org/docs/preparing-your-environment/)_, _[API References](https://www.gatsbyjs.org/docs/gatsby-link/)_ and much more.
+- [Official Documentation](https://www.gatsbyjs.org/docs/): View our Official Documentation for _[Quick Start](https://www.gatsbyjs.org/docs/)_, _[Detailed Guides](https://www.gatsbyjs.org/docs/preparing-your-environment/)_, _[API References](https://www.gatsbyjs.org/docs/gatsby-link/)_, and much more.
 
 ### Official Plugins
 

docs/tutorial/part-four/index.md

@@ -22,11 +22,11 @@ GraphQL, we recommend [How to GraphQL](https://www.howtographql.com/).
 
 ## Data in Gatsby
 
-A website has four parts, HTML, CSS, JS, and data. The first half of the
+A website has four parts: HTML, CSS, JS, and data. The first half of the
 tutorial focused on the first three. Now let’s learn how to use data in Gatsby
 sites.
 
-What is data?
+**What is data?**
 
 A very computer science-y answer would be: data is things like `"strings"`,
 integers (`42`), objects (`{ pizza: true }`), etc.
@@ -85,7 +85,7 @@ Gatsby uses GraphQL to enable components to declare the data they need.
 
 Create another new site for this part of the tutorial. You're going to build a Markdown blog called "Pandas Eating Lots". It's dedicated to showing off the best pictures and videos of pandas eating lots of food. Along the way you'll be dipping your toes into GraphQL and Gatsby's 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`, and navigate to the new directory:
+Open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-four`. Then navigate to the new directory:
 
 ```shell
 gatsby new tutorial-part-four /~https://github.com/gatsbyjs/gatsby-starter-hello-world
@@ -293,7 +293,7 @@ Page queries live outside of the component definition -- by convention at the en
 
 [StaticQuery](/docs/static-query/) is a new API introduced in Gatsby v2 that allows non-page components (like our `layout.js` component), to retrieve data via GraphQL queries.
 
-Go ahead and add a `<StaticQuery />` to your `src/components/layout.js` file, and a `{data.site.siteMetadata.title}` reference that uses this data. When you are done your file looks like this:
+Go ahead and add a `<StaticQuery />` to your `src/components/layout.js` file and a `{data.site.siteMetadata.title}` reference that uses this data. When you are done your file looks like this:
 
 ```jsx:title=src/components/layout.js
 import React from "react"