New Blog Post for 12/06/2017 (#3140)

* update build-html.js with log of errors

* new blog post

* remove logs

* Copy tweaks

* format

docs/blog/author.yaml

@@ -50,3 +50,7 @@
   bio: Full Stack Web Developer - https://www.halfelectronic.com
   avatar: avatars/fernando-poumian.jpeg
   twitter: "@fernandopoumian"
+- id: Josh Weaver
+  bio: Developer at By the Book, Inc. Enjoys technology, writing and playing music. Can't turn down a decent board game.
+  avatar: avatars/josh-weaver.jpg
+  twitter: "@3cordguy"

docs/docs/deploy-gatsby.md

@@ -179,7 +179,7 @@ Uncaught Error: Minified React error #32; visit http://facebook.github.io/react/
 ```
 
 This is a new problem when dealing with static sites built with React. This is
-not caused by Gatsby. React uses HTML comments to help identify locations
-of components that do not render anything. If you are using a CDN that minifies
+not caused by Gatsby. React uses HTML comments to help identify locations of
+components that do not render anything. If you are using a CDN that minifies
 your HTML, it will eliminate the HTML comments used by React to take control of
 the page on the client. Cloudflare is a CDN that minifies HTML by default.

docs/docs/querying-with-graphql.md

@@ -6,21 +6,24 @@ title: Querying with GraphQL
 
 # What is GraphQL?
 
-graphql.org describes it as "...a query language for APIs and a runtime for fulfilling those queries with your existing data".
+graphql.org describes it as "...a query language for APIs and a runtime for
+fulfilling those queries with your existing data".
 
-Gatsby uses GraphQL to create a consistent interface between your static site and your data sources, where data sources can be anything from local markdown files to a remote API.
+Gatsby uses GraphQL to create a consistent interface between your static site
+and your data sources, where data sources can be anything from local markdown
+files to a remote API.
 
 Gatsby describes your data by creating GraphQL _schemas_ from your data sources.
 
-GraphQL _queries_ can then be associated with your Gatsby pages, ensuring each page receives exactly the data it needs.
-
+GraphQL _queries_ can then be associated with your Gatsby pages, ensuring each
+page receives exactly the data it needs.
 
 # Why GraphQL?
 
-* As Gatsby runs on both server (at build time) & client,
-need way to specify which data is needed.
-* This is a *build-time only* use of GraphQL. You don't need to run a
-GraphQL server in production.
+* As Gatsby runs on both server (at build time) & client, need way to specify
+  which data is needed.
+* This is a _build-time only_ use of GraphQL. You don't need to run a GraphQL
+  server in production.
 * Convenient way to describe data requirements of component.
 * Why query colocation rocks
 * Uses the Relay Modern compiler behind the scenes
@@ -30,37 +33,39 @@ GraphQL server in production.
 * Types based on file type + way data can be transformed
 * Connections
 * Shallow intro to how data layer works e.g. source and transformer plugins.
-* Compare to webpack loaders — like loaders except create schema that
-can then be queried.
+* Compare to webpack loaders — like loaders except create schema that can then
+  be queried.
 * Named queries?
 * Using query parameters to manipulate results?
 
 # Example queries
 
 Showing off sorting, filtering, picking fields, programmatic transformations
 
-[Some example queries from Gatsby's tests](https://github.com/gatsbyjs/gatsby/blob/52e36b9994a86fc473cd2f966ab6b6f87ee8eedb/packages/gatsby/src/schema/__tests__/infer-graphql-input-type-test.js#L116-L432) - look for \`template literal blocks\` with `allNode{}` in them.
+[Some example queries from Gatsby's tests](https://github.com/gatsbyjs/gatsby/blob/52e36b9994a86fc473cd2f966ab6b6f87ee8eedb/packages/gatsby/src/schema/__tests__/infer-graphql-input-type-test.js#L116-L432) -
+look for \`template literal blocks\` with `allNode{}` in them.
 
 ...
 
 # Further reading
 
 ## Getting started with GraphQL
 
-- http://graphql.org/learn/
-- https://services.github.com/on-demand/graphql/
-- https://apis.guru/graphql-voyager/
-- https://www.howtographql.com/
-- https://reactjs.org/blog/2015/05/01/graphql-introduction.html
-- ...
+* http://graphql.org/learn/
+* https://services.github.com/on-demand/graphql/
+* https://apis.guru/graphql-voyager/
+* https://www.howtographql.com/
+* https://reactjs.org/blog/2015/05/01/graphql-introduction.html
+* ...
 
 ## Advanced readings on GraphQL
 
-- [GraphQL specification](https://facebook.github.io/graphql/October2016/)
-- [Interfaces and Unions](https://medium.com/the-graphqlhub/graphql-tour-interfaces-and-unions-7dd5be35de0d)
-- [Gatsby uses the Relay Compiler](https://facebook.github.io/relay/docs/en/relay-compiler.html)
-- ...
+* [GraphQL specification](https://facebook.github.io/graphql/October2016/)
+* [Interfaces and Unions](https://medium.com/the-graphqlhub/graphql-tour-interfaces-and-unions-7dd5be35de0d)
+* [Gatsby uses the Relay Compiler](https://facebook.github.io/relay/docs/en/relay-compiler.html)
+* ...
 
 ## TODO — create live GraphQL explorer for GatsbyJS.org
 
-* iFrame of graphiql instance for this site running on Heroku so people can run live queries.
+* iFrame of graphiql instance for this site running on Heroku so people can run
+  live queries.

examples/using-hjson/src/pages/index.js

@@ -2,20 +2,35 @@ import React from "react"
 
 class IndexComponent extends React.Component {
   render() {
-    const { example, letters } = this.props.data;
+    const { example, letters } = this.props.data
 
     return (
       <div>
         <h2>Access by filename: example</h2>
         <table>
           <thead>
-            <tr><td>KEY</td><td>VALUE</td></tr>
+            <tr>
+              <td>KEY</td>
+              <td>VALUE</td>
+            </tr>
           </thead>
           <tbody>
-            <tr><td>key</td><td>{example.data.key}</td></tr>
-            <tr><td>contains</td><td>{example.data.contains}</td></tr>
-            <tr><td>list</td><td>{example.data.list.join(`,`)}</td></tr>
-            <tr><td>realist</td><td>{example.data.realist}</td></tr>
+            <tr>
+              <td>key</td>
+              <td>{example.data.key}</td>
+            </tr>
+            <tr>
+              <td>contains</td>
+              <td>{example.data.contains}</td>
+            </tr>
+            <tr>
+              <td>list</td>
+              <td>{example.data.list.join(`,`)}</td>
+            </tr>
+            <tr>
+              <td>realist</td>
+              <td>{example.data.realist}</td>
+            </tr>
           </tbody>
         </table>
         <h2>Access by type: letters</h2>
@@ -31,10 +46,7 @@ export default IndexComponent
 
 export const IndexQuery = graphql`
   query IndexQuery {
-    example: file(
-      name: { eq: "example" }
-      extension: { eq: "hjson" }
-    ) {
+    example: file(name: { eq: "example" }, extension: { eq: "hjson" }) {
       data: childFilesHJson {
         key
         contains

packages/gatsby-image/README.md

@@ -8,7 +8,9 @@ Gatsby's GraphQL queries. It combines
 capabilities with advanced image loading techniques to easily and completely
 optimize image loading for your sites.
 
-*Warning: gatsby-image is **not** a drop-in replacement for `<img/>`. It's optimized for fixed width/height images and images that stretch the full-width of a container. Some ways you can use `<img/>` won't work with gatsby-image.*
+_Warning: gatsby-image is **not** a drop-in replacement for `<img/>`. It's
+optimized for fixed width/height images and images that stretch the full-width
+of a container. Some ways you can use `<img/>` won't work with gatsby-image._
 
 **[Demo](https://using-gatsby-image.gatsbyjs.org)**
 

packages/gatsby-transformer-hjson/README.md

@@ -1,20 +1,20 @@
 # gatsby-transformer-hjson
 
-Parses raw [HJSON](https://hjson.org/) strings into JavaScript objects e.g. from HJSON files. Supports arrays of objects and single objects.
+Parses raw [HJSON](https://hjson.org/) strings into JavaScript objects e.g. from
+HJSON files. Supports arrays of objects and single objects.
 
 ## Install
 
 `npm install --save gatsby-transformer-hjson`
 
-You also need to have `gatsby-source-filesystem` installed and configured so it points to your files.
+You also need to have `gatsby-source-filesystem` installed and configured so it
+points to your files.
 
 ## How to use
 
 ```javascript
 // In your gatsby-config.js
-plugins: [
-  `gatsby-transformer-hjson`,
-]
+plugins: [`gatsby-transformer-hjson`]
 ```
 
 ## Parsing algorithm
@@ -24,16 +24,16 @@ or as single objects spread across multiple files.
 
 ### Array of Objects
 
-The algorithm for arrays is to convert each item in the array into
-a node.
+The algorithm for arrays is to convert each item in the array into a node.
 
-So if your project has a `letters.hjson` with `[{ value: a } { value: b } { value: c }]` then the following three nodes would be created.
+So if your project has a `letters.hjson` with `[{ value: a } { value: b } {
+value: c }]` then the following three nodes would be created.
 
 ```javascript
 [
-  { value: 'a', type: 'Letters' },
-  { value: 'b', type: 'Letters' },
-  { value: 'c', type: 'Letters' },
+  { value: "a", type: "Letters" },
+  { value: "b", type: "Letters" },
+  { value: "c", type: "Letters" },
 ]
 ```
 
@@ -45,13 +45,11 @@ parent directory.
 
 For example, lets say your project has a data layout like:
 
-```
-data/
-    letters/
-        a.hjson
-        b.hjson
-        c.hjson
-```
+    data/
+        letters/
+            a.hjson
+            b.hjson
+            c.hjson
 
 Where each of `a.hjson`, `b.hjson` and `c.hjson` look like:
 
@@ -72,16 +70,16 @@ Then the following three nodes would be created.
 ```javascript
 [
   {
-    value: 'a',
-    type: 'Letters',
+    value: "a",
+    type: "Letters",
   },
   {
-    value: 'b',
-    type: 'Letters',
+    value: "b",
+    type: "Letters",
   },
   {
-    value: 'c',
-    type: 'Letters',
+    value: "c",
+    type: "Letters",
   },
 ]
 ```
@@ -111,19 +109,19 @@ Which would return:
     edges: [
       {
         node: {
-          value: 'a'
-        }
+          value: "a",
+        },
       },
       {
         node: {
-          value: 'b'
-        }
+          value: "b",
+        },
       },
       {
         node: {
-          value: 'c'
-        }
-      }
+          value: "c",
+        },
+      },
     ]
   }
 }

packages/gatsby-transformer-hjson/src/gatsby-node.js

@@ -29,7 +29,10 @@ async function onCreateNode({ node, boundActionCreators, loadNodeContent }) {
   // We only care about HJSON content.
   // NOTE the mime package does not recognize HJSON yet
   // See RFC https://hjson.org/rfc.html#rfc.section.1.3
-  if (node.internal.mediaType !== `text/hjson` && node.internal.mediaType !== `application/hjson`) {
+  if (
+    node.internal.mediaType !== `text/hjson` &&
+    node.internal.mediaType !== `application/hjson`
+  ) {
     return
   }