Switch to formatting markdown with semis so weirdly put semis at fron…

…t of fragments

CHANGELOG.md

@@ -529,7 +529,7 @@ export const pageQuery = `
     }
   }
 }
-`
+`;
 ```
 
 You must now write:
@@ -545,7 +545,7 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 ## [1.0.0-alpha10] - 2016-11-17

docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/index.md

@@ -165,8 +165,8 @@ navigate around, Gatsby loads the JavaScript needed for each route.
 This means that one page with heavy imports:
 
 ```javascript
-import d3 from "d3"
-import threejs from "react-threejs"
+import d3 from "d3";
+import threejs from "react-threejs";
 ```
 
 ...won't affect the performance of the rest of the site.
@@ -281,23 +281,23 @@ the blog posts. Included with the component is an exported `pageQuery`.
 
 ```javascript
 // A simple React component for rendering a blog page.
-import React from "react"
+import React from "react";
 
 class BlogPostTemplate extends React.Component {
   render() {
-    ;<div>
+    <div>
       <h1>{this.props.data.markdown.frontmatter.title}</h1>
       <small>{this.props.data.markdown.frontmatter.date}</small>
       <div
         dangerouslySetInnerHTML={{
           __html: this.props.data.markdown.html,
         }}
       />
-    </div>
+    </div>;
   }
 }
 
-export default BlogPostTemplate
+export default BlogPostTemplate;
 
 export const pageQuery = `
   query BlogPost($slug: String!) {
@@ -311,7 +311,7 @@ export const pageQuery = `
       }
     }
   }
-`
+`;
 ```
 
 All data parsing and processing is plugin-driven. So in time, any imaginable

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

@@ -255,15 +255,15 @@ We'll want to create the file `src/templates/blog-post.js` (please create the
 `src/templates` folder if it does not yet exist!).
 
 ```javascript
-import React from "react"
-import Helmet from "react-helmet"
+import React from "react";
+import Helmet from "react-helmet";
 
 // import '../css/blog-post.css'; // make it pretty!
 
 export default function Template({
   data, // this prop will be injected by the GraphQL query we'll write in a bit
 }) {
-  const { markdownRemark: post } = data // data.markdownRemark holds our post data
+  const { markdownRemark: post } = data; // data.markdownRemark holds our post data
   return (
     <div className="blog-post-container">
       <Helmet title={`Your Blog Name - ${post.frontmatter.title}`} />
@@ -275,7 +275,7 @@ export default function Template({
         />
       </div>
     </div>
-  )
+  );
 }
 ```
 
@@ -377,13 +377,13 @@ Gatsby, as detailed in its [Node API specification][node-spec]. However, we only
 care about one particular API in this instance, `createPages`.
 
 ```javascript
-const path = require("path")
+const path = require("path");
 
 exports.createPages = ({ boundActionCreators, graphql }) => {
-  const { createPage } = boundActionCreators
+  const { createPage } = boundActionCreators;
 
-  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
-}
+  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);
+};
 ```
 
 Nothing super complex yet! We're using the `createPages` API (which Gatsby will
@@ -541,14 +541,14 @@ create `src/pages/tags.js`, the path `http://localhost:8000/tags/` will be
 available within the browser and the statically generated site.
 
 ```javascript
-import React from "react"
-import Link from "gatsby-link"
-import Helmet from "react-helmet"
+import React from "react";
+import Link from "gatsby-link";
+import Helmet from "react-helmet";
 
 // import '../css/index.css'; // add some style if you want!
 
 export default function Index({ data }) {
-  const { edges: posts } = data.allMarkdownRemark
+  const { edges: posts } = data.allMarkdownRemark;
   return (
     <div className="blog-posts">
       {posts
@@ -562,10 +562,10 @@ export default function Index({ data }) {
               <h2>{post.frontmatter.date}</h2>
               <p>{post.excerpt}</p>
             </div>
-          )
+          );
         })}
     </div>
-  )
+  );
 }
 
 export const pageQuery = graphql`
@@ -584,7 +584,7 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 OK! So we've followed a similar approach to our blog post template, so this

docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md

@@ -293,16 +293,16 @@ specify a `pageQuery` that will pass data into the default export of that page.
 
 ```jsx
 // src/pages/index.js
-import React from "react"
+import React from "react";
 
 export default class BlogIndex extends React.Component {
   render() {
     // Handle graphql errors
     if (this.props.errors && this.props.errors.length) {
       this.props.errors.forEach(({ message }) => {
-        console.error(`BlogIndex render errr: ${message}`)
-      })
-      return <h1>Errors found: Check the console for details</h1>
+        console.error(`BlogIndex render errr: ${message}`);
+      });
+      return <h1>Errors found: Check the console for details</h1>;
     }
 
     return (
@@ -312,7 +312,7 @@ export default class BlogIndex extends React.Component {
           <a key={i}>{node.frontmatter.title}</a>
         ))}
       </div>
-    )
+    );
   }
 }
 
@@ -328,7 +328,7 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 This is a simplified example, but there are a few things going on that might not
@@ -352,7 +352,7 @@ Now let's looks specifically at where we render a link for each blog post:
 {
   this.props.data.allMarkdownRemark.edges.map(({ node }, i) => (
     <a key={i}>{node.frontmatter.title}</a>
-  ))
+  ));
 }
 ```
 
@@ -376,7 +376,7 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 This is how you get data from Gatsby into your react components. Make sure you
@@ -441,7 +441,7 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 ```jsx
@@ -450,7 +450,7 @@ export const pageQuery = graphql`
     <Link to={node.frontmatter.url} key={i}>
       {node.frontmatter.title}
     </Link>
-  ))
+  ));
 }
 ```
 
@@ -495,24 +495,24 @@ we add custom fields. Example:
 
 ```js
 // gatsby-node.js
-const { GraphQLString } = require("graphql")
+const { GraphQLString } = require("graphql");
 
 const getURL = node => {
   /* See the source link below for implementation */
-}
+};
 
 exports.setFieldsOnGraphQLNodeType = ({ type }) => {
   if (type.name !== "MarkdownRemark") {
-    return {}
+    return {};
   }
 
   return Promise.resolve({
     url: {
       type: GraphQLString,
       resolve: node => getURL(node),
     },
-  })
-}
+  });
+};
 ```
 
 > Source code for
@@ -564,16 +564,16 @@ case, `createPages`. In the same `gatsby-node.js` file as before:
 // .. other stuff from before...
 
 exports.createPages = ({ boundActionCreators }) => {
-  const { createPage } = boundActionCreators
-  const postTemplate = path.resolve("./src/templates/custom-page.js")
+  const { createPage } = boundActionCreators;
+  const postTemplate = path.resolve("./src/templates/custom-page.js");
 
   // Create a custom page!
   createPage({
     path: `/my-custom-page/`,
     component: postTemplate,
     context: {}, // Context will be passed in to the page query as graphql variables
-  })
-}
+  });
+};
 ```
 
 At the most basic level this method of page creation is quite simple: Grab the
@@ -600,8 +600,8 @@ markdownFiles.forEach(post => {
     context: {
       id: post.id,
     },
-  })
-})
+  });
+});
 ```
 
 I've included the pseudo code to highlight the fact that nothing too magical is
@@ -618,8 +618,8 @@ work.
 // NOTE: I'm using async/await to simplify the code since it's now natively supported
 // in Node 8.x. This means that our function will return a promise
 exports.createPages = async ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
-  const postTemplate = path.resolve("./src/templates/post.js")
+  const { createPage } = boundActionCreators;
+  const postTemplate = path.resolve("./src/templates/post.js");
 
   // Using async await. Query will likely be very similar to your pageQuery in index.js
   const result = await graphql(`
@@ -633,11 +633,11 @@ exports.createPages = async ({ graphql, boundActionCreators }) => {
         }
       }
     }
-  `)
+  `);
 
   if (result.errors) {
-    console.log(result.errors)
-    throw new Error("Things broke, see console output above")
+    console.log(result.errors);
+    throw new Error("Things broke, see console output above");
   }
 
   // Create blog posts pages.
@@ -649,9 +649,9 @@ exports.createPages = async ({ graphql, boundActionCreators }) => {
         // Context will be passed in to the page query as graphql vars
         id: node.id,
       },
-    })
-  })
-}
+    });
+  });
+};
 ```
 
 Notice that the query is very similar to the `pageQuery` in index.js but it's
@@ -671,11 +671,11 @@ Here it is in all it's glory:
 
 ```jsx
 // src/templates/post.js
-import React from "react"
+import React from "react";
 
 export default class BlogPost extends React.Component {
   render() {
-    const post = this.props.data.markdownRemark
+    const post = this.props.data.markdownRemark;
 
     return (
       <div className="Post">
@@ -685,7 +685,7 @@ export default class BlogPost extends React.Component {
           className="content"
         />
       </div>
-    )
+    );
   }
 }
 
@@ -699,7 +699,7 @@ export const pageQuery = graphql`
       html
     }
   }
-`
+`;
 ```
 
 If you're not used to GraphQL syntax the `pageQuery` might be a little

docs/blog/2017-10-05-portfolio-site-gatsby-wordpress/index.md

@@ -81,7 +81,7 @@ export const projectsPageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 Pulling blog posts was even easier! If you’d like to sort them by date, ID,
@@ -103,7 +103,7 @@ export const postQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 ## Wrap up and future