From 48fd08f19504821448d093b0f56eabfa4c91362b Mon Sep 17 00:00:00 2001
From: Jacob Bolda <jbolda@gmail.com>
Date: Thu, 8 Feb 2018 22:15:48 -0600
Subject: [PATCH 01/11] initial commit

---
 .../.gitignore                                |   1 +
 .../.npmignore                                |  34 +++++
 .../README.md                                 | 113 ++++++++++++++
 .../index.js                                  |   1 +
 .../package.json                              |  26 ++++
 .../src/gatsby-node.js                        | 138 ++++++++++++++++++
 .../README.md                                 |   2 +-
 7 files changed, 314 insertions(+), 1 deletion(-)
 create mode 100644 packages/gatsby-transformer-javascript-frontmatter/.gitignore
 create mode 100644 packages/gatsby-transformer-javascript-frontmatter/.npmignore
 create mode 100644 packages/gatsby-transformer-javascript-frontmatter/README.md
 create mode 100644 packages/gatsby-transformer-javascript-frontmatter/index.js
 create mode 100644 packages/gatsby-transformer-javascript-frontmatter/package.json
 create mode 100644 packages/gatsby-transformer-javascript-frontmatter/src/gatsby-node.js

diff --git a/packages/gatsby-transformer-javascript-frontmatter/.gitignore b/packages/gatsby-transformer-javascript-frontmatter/.gitignore
new file mode 100644
index 0000000000000..4e2b171fba82d
--- /dev/null
+++ b/packages/gatsby-transformer-javascript-frontmatter/.gitignore
@@ -0,0 +1 @@
+/gatsby-node.js
diff --git a/packages/gatsby-transformer-javascript-frontmatter/.npmignore b/packages/gatsby-transformer-javascript-frontmatter/.npmignore
new file mode 100644
index 0000000000000..e771d2c9fa299
--- /dev/null
+++ b/packages/gatsby-transformer-javascript-frontmatter/.npmignore
@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples
diff --git a/packages/gatsby-transformer-javascript-frontmatter/README.md b/packages/gatsby-transformer-javascript-frontmatter/README.md
new file mode 100644
index 0000000000000..7216e53deda3f
--- /dev/null
+++ b/packages/gatsby-transformer-javascript-frontmatter/README.md
@@ -0,0 +1,113 @@
+# gatsby-transformer-javascript-frontmatter
+
+Parses JavaScript files to extract data from exports.
+
+## Install
+
+`npm install --save gatsby-transformer-frontmatter`
+
+## How to use
+
+```javascript
+// In your gatsby-config.js
+plugins: [`gatsby-transformer-javascript-frontmatter`];
+```
+
+## Parsing algorithm
+
+The algorithm for uses babylon and traverse (from the babel family of code) to
+statically read the frontmatter exports.
+
+In a .js file, export a frontmatter object to set your metadata variables, like so:
+
+```javascript
+import React from 'react'
+
+exports.frontmatter = {
+    title: 'Choropleth on d3v4',
+    written: '2017-05-04',
+    layoutType: 'post',
+    path: 'choropleth-on-d3v4',
+    category: 'data science',
+    description: 'Things about the choropleth.'
+}
+
+export default MyComponent ...
+```
+
+You can also use a named export for the data object:
+
+```javascript
+export const frontmatter = {
+  title: "Choropleth on d3v4",
+  written: "2017-05-04",
+  layoutType: "post",
+  path: "choropleth-on-d3v4",
+  category: "data science",
+  description: "Things about the choropleth.",
+};
+```
+
+## How to query
+
+You'd be able to query your data like:
+
+```graphql
+{
+  allJavascriptFrontmatter {
+    edges {
+      node {
+        data {
+          error
+          path
+          title
+          written
+          category
+          description
+          updated
+        }
+      }
+    }
+  }
+}
+```
+
+Which would return something like:
+
+```javascript
+{
+  "data": {
+    "allJavascriptFrontmatter": {
+      "edges": [
+        {
+          "node": {
+            "data": {
+              "error": false,
+              "path": "choropleth-on-d3v4",
+              "title": "Choropleth on d3v4",
+              "written": "2017-05-04",
+              "category": "data science",
+              "description": "Things about the choropleth.",
+              "updated": null
+            }
+          }
+        }
+      ]
+    }
+  }
+}
+```
+
+Any attribute on "data" across your js files will be exported. If a file is
+missing it, the value will be null.
+
+The error field will contain `false` or an object with error information just to
+give a surface level view of what the query is pulling out.
+
+```javascript
+"error": {
+          "err": true,
+          "message": "we threw an error",
+          "stack": "This is a stringified stack trace"
+        },
+```
diff --git a/packages/gatsby-transformer-javascript-frontmatter/index.js b/packages/gatsby-transformer-javascript-frontmatter/index.js
new file mode 100644
index 0000000000000..172f1ae6a468c
--- /dev/null
+++ b/packages/gatsby-transformer-javascript-frontmatter/index.js
@@ -0,0 +1 @@
+// noop
diff --git a/packages/gatsby-transformer-javascript-frontmatter/package.json b/packages/gatsby-transformer-javascript-frontmatter/package.json
new file mode 100644
index 0000000000000..2bd57f4c3b432
--- /dev/null
+++ b/packages/gatsby-transformer-javascript-frontmatter/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "gatsby-transformer-javascript-static-exports",
+  "version": "1.3.8",
+  "description": "Gatsby transformer plugin for JavaScript to extract exports.data statically.",
+  "scripts": {
+    "build": "babel src --out-dir . --ignore __tests__",
+    "watch": "babel -w src --out-dir . --ignore __tests__",
+    "prepublish": "cross-env NODE_ENV=production npm run build"
+  },
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "js"
+  ],
+  "author": "Jacob Bolda <me@jacobbolda.com>",
+  "license": "MIT",
+  "dependencies": {
+    "babel-runtime": "^6.26.0",
+    "babel-traverse": "^6.24.1",
+    "babylon": "^6.17.3",
+    "bluebird": "^3.5.0"
+  },
+  "devDependencies": {
+    "cross-env": "^5.0.5"
+  }
+}
diff --git a/packages/gatsby-transformer-javascript-frontmatter/src/gatsby-node.js b/packages/gatsby-transformer-javascript-frontmatter/src/gatsby-node.js
new file mode 100644
index 0000000000000..75abc161ddc33
--- /dev/null
+++ b/packages/gatsby-transformer-javascript-frontmatter/src/gatsby-node.js
@@ -0,0 +1,138 @@
+const _ = require(`lodash`)
+const crypto = require(`crypto`)
+const babylon = require(`babylon`)
+const traverse = require(`babel-traverse`).default
+
+async function onCreateNode({
+  node,
+  getNode,
+  boundActionCreators,
+  loadNodeContent,
+}) {
+  const { createNode, createParentChildLink } = boundActionCreators
+
+  // This only processes javascript files.
+  if (node.internal.mediaType !== `application/javascript`) {
+    return
+  }
+
+  const code = await loadNodeContent(node)
+  const options = {
+    sourceType: `module`,
+    allowImportExportEverywhere: true,
+    plugins: [
+      `jsx`,
+      `doExpressions`,
+      `objectRestSpread`,
+      `decorators`,
+      `classProperties`,
+      `exportExtensions`,
+      `asyncGenerators`,
+      `functionBind`,
+      `functionSent`,
+      `dynamicImport`,
+      `flow`,
+    ],
+  }
+
+  let exportsData, data
+  try {
+    const ast = babylon.parse(code, options)
+
+    const parseData = function parseData(node) {
+      let value
+
+      if (node.type === `TemplateLiteral`) {
+        // Experimental basic support for template literals:
+        // Extract and join any text content; ignore interpolations
+        value = node.quasis.map(quasi => quasi.value.cooked).join(``)
+      } else if (node.type === `ObjectExpression`) {
+        value = {}
+        node.properties.forEach(elem => {
+          value[elem.key.name] = parseData(elem.value)
+        })
+      } else if (node.type === `ArrayExpression`) {
+        value = node.elements.map(elem => parseData(elem))
+      } else {
+        value = node.value
+      }
+
+      return value
+    }
+
+    frontmatter = {}
+    traverse(ast, {
+      AssignmentExpression: function AssignmentExpression(astPath) {
+        if (
+          astPath.node.left.type === `MemberExpression` &&
+          astPath.node.left.property.name === `frontmatter`
+        ) {
+          astPath.node.right.properties.forEach(node => {
+            frontmatter[node.key.name] = parseData(node.value)
+          })
+        }
+      },
+      ExportNamedDeclaration: function ExportNamedDeclaration(astPath) {
+        const { declaration } = astPath.node
+        if (declaration && declaration.type === `VariableDeclaration`) {
+          const dataVariableDeclarator = _.find(
+            declaration.declarations,
+            d => d.id.name === `frontmatter`
+          )
+
+          if (dataVariableDeclarator && dataVariableDeclarator.init) {
+            dataVariableDeclarator.init.properties.forEach(node => {
+              frontmatter[node.key.name] = parseData(node.value)
+            })
+          }
+        }
+      },
+    })
+
+
+    exportsData = {
+      ...frontmatter,
+      error: false,
+    }
+  } catch (e) {
+    // stick the error on the query so the user can
+    // react to an error as they see fit
+    exportsData = {
+      ...frontmatter,
+      error: {
+        err: true,
+        code: e.code,
+        message: e.message,
+        stack: e.stack,
+      },
+    }
+  } finally {
+    const objStr = JSON.stringify(node)
+    const contentDigest = crypto
+      .createHash(`md5`)
+      .update(objStr)
+      .digest(`hex`)
+
+    const nodeData = {
+      id: `${node.id} >>> JavascriptFrontmatter`,
+      children: [],
+      parent: node.id,
+      node: { ...node },
+      internal: {
+        contentDigest,
+        type: `JavascriptFrontmatter`,
+      },
+    }
+
+    nodeData.frontmatter = { ...exportsData }
+
+    if (node.internal.type === `File`) {
+      nodeData.fileAbsolutePath = node.absolutePath
+    }
+
+    createNode(nodeData)
+    createParentChildLink({ parent: node, child: nodeData })
+  }
+}
+
+exports.onCreateNode = onCreateNode
diff --git a/packages/gatsby-transformer-javascript-static-exports/README.md b/packages/gatsby-transformer-javascript-static-exports/README.md
index 13ecd1f050d1a..f4528bd6af9f0 100644
--- a/packages/gatsby-transformer-javascript-static-exports/README.md
+++ b/packages/gatsby-transformer-javascript-static-exports/README.md
@@ -1,4 +1,4 @@
-# gatsby-transformer-javascript-static-exports
+# THIS PACKAGE HAS BEEN DEPRECATED IN FAVOR OF [`GATSBY-TRANSFORMER-JAVASCRIPT-FRONTMATTER`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-javascript-frontmatter)
 
 Parses JavaScript files to extract data from exports.
 

From aba1657ac1522014e0ffa9f8a2005036e6baf64d Mon Sep 17 00:00:00 2001
From: Jacob Bolda <jbolda@gmail.com>
Date: Thu, 8 Feb 2018 22:19:17 -0600
Subject: [PATCH 02/11] update name in package.json

---
 .../gatsby-transformer-javascript-frontmatter/package.json  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/gatsby-transformer-javascript-frontmatter/package.json b/packages/gatsby-transformer-javascript-frontmatter/package.json
index 2bd57f4c3b432..39ee32172e009 100644
--- a/packages/gatsby-transformer-javascript-frontmatter/package.json
+++ b/packages/gatsby-transformer-javascript-frontmatter/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "gatsby-transformer-javascript-static-exports",
-  "version": "1.3.8",
-  "description": "Gatsby transformer plugin for JavaScript to extract exports.data statically.",
+  "name": "gatsby-transformer-javascript-frontmatter",
+  "version": "1.0.0",
+  "description": "Gatsby transformer plugin for JavaScript to extract exports.frontmatter statically.",
   "scripts": {
     "build": "babel src --out-dir . --ignore __tests__",
     "watch": "babel -w src --out-dir . --ignore __tests__",

From 45fce616c556c45184f97e27e07ee140d4177cf9 Mon Sep 17 00:00:00 2001
From: Jacob Bolda <jbolda@gmail.com>
Date: Thu, 8 Feb 2018 23:25:53 -0600
Subject: [PATCH 03/11] start converting example site

---
 .../gatsby-config.js                            |  2 +-
 .../using-javascript-transforms/gatsby-node.js  | 17 ++++++-----------
 .../using-javascript-transforms/package.json    |  2 +-
 .../2017-03-09-choropleth-on-d3v4/index.js      |  8 ++++----
 .../index.js                                    |  8 +++-----
 .../src/components/BlogPostChrome/index.js      |  4 ++--
 .../{layouts => components/Layouts}/blogPost.js |  5 +++--
 .../Layouts}/insetPage.js                       |  7 ++++---
 .../{layouts => components/Layouts}/master.js   |  2 +-
 .../src/mainPages/index.js                      | 14 ++++----------
 .../src/templates/mdBlogPost.js                 | 13 ++++++++-----
 .../src/templates/mdInsetPage.js                |  9 ++++++---
 12 files changed, 43 insertions(+), 48 deletions(-)
 rename examples/using-javascript-transforms/src/{layouts => components/Layouts}/blogPost.js (94%)
 rename examples/using-javascript-transforms/src/{layouts => components/Layouts}/insetPage.js (87%)
 rename examples/using-javascript-transforms/src/{layouts => components/Layouts}/master.js (94%)

diff --git a/examples/using-javascript-transforms/gatsby-config.js b/examples/using-javascript-transforms/gatsby-config.js
index bb489fad75a82..eef87f4cba768 100644
--- a/examples/using-javascript-transforms/gatsby-config.js
+++ b/examples/using-javascript-transforms/gatsby-config.js
@@ -24,7 +24,7 @@ module.exports = {
         path: `${__dirname}/src/articles/`,
       },
     },
-    `gatsby-transformer-javascript-static-exports`,
+    `gatsby-transformer-javascript-frontmatter`,
     `gatsby-transformer-yaml`,
     {
       resolve: `gatsby-transformer-remark`,
diff --git a/examples/using-javascript-transforms/gatsby-node.js b/examples/using-javascript-transforms/gatsby-node.js
index bd0a94a217830..c5534a431602c 100644
--- a/examples/using-javascript-transforms/gatsby-node.js
+++ b/examples/using-javascript-transforms/gatsby-node.js
@@ -5,7 +5,7 @@ exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
   let slug
   if (
     node.internal.type === `MarkdownRemark` ||
-    node.internal.type === `JSFrontmatter`
+    node.internal.type === `JavascriptFrontmatter`
   ) {
     const fileNode = getNode(node.parent)
     const parsedFilePath = path.parse(fileNode.relativePath)
@@ -48,11 +48,11 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
                 }
               }
             }
-            allJsFrontmatter {
+            allJavascriptFrontmatter {
               edges {
                 node {
                   fileAbsolutePath
-                  data {
+                  frontmatter {
                     layoutType
                     path
                   }
@@ -73,11 +73,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
 
         // Create from markdown
         result.data.allMarkdownRemark.edges.forEach(edge => {
-          let frontmatter = edge.node.frontmatter
+          let {frontmatter} = edge.node
           if (frontmatter.layoutType === `post`) {
             createPage({
               path: frontmatter.path, // required
-              layout: `blogPost`, // this matches the filename of src/layouts/blogPost.js, layout created automatically
               component: mdBlogPost,
               context: {
                 slug: edge.node.fields.slug,
@@ -86,7 +85,6 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           } else if (frontmatter.layoutType === `page`) {
             createPage({
               path: frontmatter.path, // required
-              layout: `insetPage`, // this matches the filename of src/layouts/blogPost.js, layout created automatically
               component: mdInsetPage,
               context: {
                 slug: edge.node.fields.slug,
@@ -99,13 +97,12 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
         // Gatsby will, by default, createPages for javascript in the
         //  /pages directory. We purposely don't have a folder with this name
         //  so that we can go full manual mode.
-        result.data.allJsFrontmatter.edges.forEach(edge => {
-          let frontmatter = edge.node.data
+        result.data.allJavascriptFrontmatter.edges.forEach(edge => {
+          let {frontmatter} = edge.node
           // see above
           if (frontmatter.layoutType === `post`) {
             createPage({
               path: frontmatter.path, // required
-              layout: `blogPost`, // this matches the filename of src/layouts/blogPost.js, layout created automatically
               // Note, we can't have a template, but rather require the file directly.
               //  Templates are for converting non-react into react. jsFrontmatter
               //  picks up all of the javascript files. We have only written these in react.
@@ -117,7 +114,6 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           } else if (frontmatter.layoutType === `page`) {
             createPage({
               path: frontmatter.path, // required
-              layout: `insetPage`, // this matches the filename of src/layouts/insetPage.js, layout created automatically
               component: path.resolve(edge.node.fileAbsolutePath),
               context: {
                 slug: edge.node.fields.slug,
@@ -126,7 +122,6 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           } else if (edge.node.fields.slug === `/index/`) {
             createPage({
               path: `/`, // required, we don't have frontmatter for this page hence separate if()
-              layout: `insetPage`, // this matches the filename of src/layouts/insetPage.js, layout created automatically
               component: path.resolve(edge.node.fileAbsolutePath),
               context: {
                 slug: edge.node.fields.slug,
diff --git a/examples/using-javascript-transforms/package.json b/examples/using-javascript-transforms/package.json
index a5a1438d280b6..c4c09677c0bd7 100644
--- a/examples/using-javascript-transforms/package.json
+++ b/examples/using-javascript-transforms/package.json
@@ -36,7 +36,7 @@
     "gatsby-remark-smartypants": "latest",
     "gatsby-source-filesystem": "latest",
     "gatsby-source-contentful": "latest",
-    "gatsby-transformer-javascript-static-exports": "latest",
+    "gatsby-transformer-javascript-frontmatter": "latest",
     "gatsby-transformer-remark": "latest",
     "gatsby-transformer-sharp": "latest",
     "gatsby-transformer-yaml": "latest",
diff --git a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js
index 1b68bcfb497bf..e9050f3580a45 100644
--- a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js
+++ b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js
@@ -4,7 +4,7 @@ import { findDOMNode } from "react-dom"
 var d3 = require(`d3`)
 
 // this is one method to export data and make it usable elsewhere
-exports.data = {
+exports.frontmatter = {
   title: `Choropleth on d3v4`,
   written: `2017-03-09`,
   updated: `2017-04-28`,
@@ -52,7 +52,7 @@ class choroplethBase extends React.Component {
     let html = data.html
 
     return (
-      <BlogPostChrome {...this.props.data.jsFrontmatter.data}>
+      <BlogPostChrome {...this.props.data.JavascriptFrontmatter.frontmatter}>
         <div className="section">
           <div className="container">
             <div id="states" />
@@ -207,8 +207,8 @@ export const pageQuery = graphql`
     ) {
       html
     }
-    jsFrontmatter(fields: { slug: { eq: $slug } }) {
-      ...JSBlogPost_data
+    JavascriptFrontmatter(fields: { slug: { eq: $slug } }) {
+      ...JSBlogPost_frontmatter
     }
   }
 `
diff --git a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js
index 9350bbf9dca2b..97a620dca5cd2 100644
--- a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js
+++ b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js
@@ -4,7 +4,7 @@ import { findDOMNode } from "react-dom"
 var d3 = require(`d3`)
 
 // this is an additional method to export data and make it usable elsewhere
-export const data = {
+export const frontmatter = {
   title: `Alternate Choropleth on d3v4`,
   written: `2017-05-30`,
   layoutType: `post`,
@@ -51,7 +51,7 @@ class choroplethAltBase extends React.Component {
     let html = data.html
 
     return (
-      <BlogPostChrome {...this.props.data.jsFrontmatter.data}>
+      <BlogPostChrome {...this.props.data.JavascriptFrontmatter.frontmatter}>
         <div className="section">
           <div className="container">
             <div id="states" />
@@ -208,8 +208,6 @@ export const pageQuery = graphql`
     ) {
       html
     }
-    jsFrontmatter(fields: { slug: { eq: $slug } }) {
-      ...JSBlogPost_data
-    }
+
   }
 `
diff --git a/examples/using-javascript-transforms/src/components/BlogPostChrome/index.js b/examples/using-javascript-transforms/src/components/BlogPostChrome/index.js
index 309672b454e1e..f26b297b058a5 100644
--- a/examples/using-javascript-transforms/src/components/BlogPostChrome/index.js
+++ b/examples/using-javascript-transforms/src/components/BlogPostChrome/index.js
@@ -35,8 +35,8 @@ export const blogPostFragment = graphql`
     }
   }
 
-  fragment JSBlogPost_data on JSFrontmatter {
-    data {
+  fragment JSBlogPost_frontmatter on JavascriptFrontmatter {
+    frontmatter {
       title
       path
       layoutType
diff --git a/examples/using-javascript-transforms/src/layouts/blogPost.js b/examples/using-javascript-transforms/src/components/Layouts/blogPost.js
similarity index 94%
rename from examples/using-javascript-transforms/src/layouts/blogPost.js
rename to examples/using-javascript-transforms/src/components/Layouts/blogPost.js
index 443f2f132ca09..8f296e9cce604 100644
--- a/examples/using-javascript-transforms/src/layouts/blogPost.js
+++ b/examples/using-javascript-transforms/src/components/Layouts/blogPost.js
@@ -25,7 +25,7 @@ class BlogPostLayout extends React.Component {
       <div>
         <MasterLayout {...this.props}>
           {home}
-          <div className="container">{this.props.children()}</div>
+          <div className="container">{this.props.children}</div>
           <div className="footer container">
             <hr />
             <p>
@@ -42,7 +42,7 @@ class BlogPostLayout extends React.Component {
 }
 
 export default BlogPostLayout
-
+/*
 export const pageQuery = graphql`
   query BlogPostLayoutBySlug {
     site {
@@ -58,3 +58,4 @@ export const pageQuery = graphql`
     }
   }
 `
+*/
\ No newline at end of file
diff --git a/examples/using-javascript-transforms/src/layouts/insetPage.js b/examples/using-javascript-transforms/src/components/Layouts/insetPage.js
similarity index 87%
rename from examples/using-javascript-transforms/src/layouts/insetPage.js
rename to examples/using-javascript-transforms/src/components/Layouts/insetPage.js
index 71703e2e3625e..82d9b9cf26364 100644
--- a/examples/using-javascript-transforms/src/layouts/insetPage.js
+++ b/examples/using-javascript-transforms/src/components/Layouts/insetPage.js
@@ -1,5 +1,5 @@
 import React from "react"
-import SiteSidebar from "../components/SiteSidebar"
+import SiteSidebar from "../SiteSidebar"
 import MasterLayout from "./master"
 
 class InsetPageLayout extends React.Component {
@@ -14,7 +14,7 @@ class InsetPageLayout extends React.Component {
               <div className="column is-one-quarter">
                 <SiteSidebar {...this.props} />
               </div>
-              <div className="column">{this.props.children()}</div>
+              <div className="column">{this.props.children}</div>
             </div>
           </div>
         </MasterLayout>
@@ -24,7 +24,7 @@ class InsetPageLayout extends React.Component {
 }
 
 export default InsetPageLayout
-
+/*
 export const pageQuery = graphql`
   query InsetLayoutBySlug {
     site {
@@ -40,3 +40,4 @@ export const pageQuery = graphql`
     }
   }
 `
+*/
\ No newline at end of file
diff --git a/examples/using-javascript-transforms/src/layouts/master.js b/examples/using-javascript-transforms/src/components/Layouts/master.js
similarity index 94%
rename from examples/using-javascript-transforms/src/layouts/master.js
rename to examples/using-javascript-transforms/src/components/Layouts/master.js
index 0536caf0950a2..c3f75966ed424 100644
--- a/examples/using-javascript-transforms/src/layouts/master.js
+++ b/examples/using-javascript-transforms/src/components/Layouts/master.js
@@ -1,7 +1,7 @@
 import React from "react"
 import * as PropTypes from "prop-types"
 import Helmet from "react-helmet"
-import "../static/css/base.scss"
+import "../../static/css/base.scss"
 
 class MasterLayout extends React.Component {
   render() {
diff --git a/examples/using-javascript-transforms/src/mainPages/index.js b/examples/using-javascript-transforms/src/mainPages/index.js
index 35122c9b6cb23..8f8cfcbde7586 100644
--- a/examples/using-javascript-transforms/src/mainPages/index.js
+++ b/examples/using-javascript-transforms/src/mainPages/index.js
@@ -6,11 +6,12 @@ import moment from "moment"
 
 class SiteIndex extends React.Component {
   render() {
+    console.log(this)
     const pageLinks = []
     let iteratorKey = 0
     let pageRaw = [
       ...this.props.data.allMarkdownRemark.edges,
-      ...this.props.data.allJsFrontmatter.edges,
+      ...this.props.data.allJavascriptFrontmatter.edges,
     ]
     let pageArray = []
     pageRaw.forEach(page => {
@@ -18,13 +19,6 @@ class SiteIndex extends React.Component {
         if (typeof page.node.frontmatter.written !== `undefined`) {
           pageArray.push(page.node.frontmatter)
         }
-      } else if (typeof page.node.data === `object`) {
-        if (
-          typeof page.node.data.written !== `undefined` &&
-          page.node.data.written !== ``
-        ) {
-          pageArray.push(page.node.data)
-        }
       }
     })
 
@@ -90,11 +84,11 @@ export default SiteIndex
 
 export const pageQuery = graphql`
   query allPosts {
-    allJsFrontmatter {
+    allJavascriptFrontmatter {
       edges {
         node {
           fileAbsolutePath
-          data {
+          frontmatter {
             path
             title
             written
diff --git a/examples/using-javascript-transforms/src/templates/mdBlogPost.js b/examples/using-javascript-transforms/src/templates/mdBlogPost.js
index cd5e694024047..4e1bfb35ef751 100644
--- a/examples/using-javascript-transforms/src/templates/mdBlogPost.js
+++ b/examples/using-javascript-transforms/src/templates/mdBlogPost.js
@@ -1,17 +1,20 @@
 import React from "react"
 import moment from "moment"
 import BlogPostChrome from "../components/BlogPostChrome"
+import BlogPostLayout from "../components/Layouts/blogPost"
 
 class mdBlogPost extends React.Component {
   render() {
     const { html, frontmatter } = this.props.data.markdownRemark
 
     return (
-      <BlogPostChrome {...frontmatter}>
-        <div className="container content">
-          <div dangerouslySetInnerHTML={{ __html: html }} />
-        </div>
-      </BlogPostChrome>
+      <BlogPostLayout>
+        <BlogPostChrome {...frontmatter}>
+          <div className="container content">
+            <div dangerouslySetInnerHTML={{ __html: html }} />
+          </div>
+        </BlogPostChrome>
+      </BlogPostLayout>
     )
   }
 }
diff --git a/examples/using-javascript-transforms/src/templates/mdInsetPage.js b/examples/using-javascript-transforms/src/templates/mdInsetPage.js
index d05f39a64801b..fc71b8691d0bd 100644
--- a/examples/using-javascript-transforms/src/templates/mdInsetPage.js
+++ b/examples/using-javascript-transforms/src/templates/mdInsetPage.js
@@ -1,13 +1,16 @@
 import React from "react"
+import InsetPageLayout from "../components/Layouts/insetPage"
 
 class mdInsetPage extends React.Component {
   render() {
     const { html } = this.props.data.markdownRemark
 
     return (
-      <div className="box container content">
-        <div dangerouslySetInnerHTML={{ __html: html }} />
-      </div>
+      <InsetPageLayout>
+        <div className="box container content">
+          <div dangerouslySetInnerHTML={{ __html: html }} />
+        </div>
+      </InsetPageLayout>
     )
   }
 }

From d1b3da77be44279b14b699c56686e4d5c81c7deb Mon Sep 17 00:00:00 2001
From: Jacob Bolda <jbolda@gmail.com>
Date: Fri, 9 Feb 2018 06:37:34 -0600
Subject: [PATCH 04/11] fix gql error on js articles

---
 examples/using-javascript-transforms/package.json               | 1 -
 .../src/articles/2017-03-09-choropleth-on-d3v4/index.js         | 2 +-
 .../articles/2017-05-30-choropleth-on-d3v4-alternate/index.js   | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/examples/using-javascript-transforms/package.json b/examples/using-javascript-transforms/package.json
index c4c09677c0bd7..52810e5a11acd 100644
--- a/examples/using-javascript-transforms/package.json
+++ b/examples/using-javascript-transforms/package.json
@@ -36,7 +36,6 @@
     "gatsby-remark-smartypants": "latest",
     "gatsby-source-filesystem": "latest",
     "gatsby-source-contentful": "latest",
-    "gatsby-transformer-javascript-frontmatter": "latest",
     "gatsby-transformer-remark": "latest",
     "gatsby-transformer-sharp": "latest",
     "gatsby-transformer-yaml": "latest",
diff --git a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js
index e9050f3580a45..9014aced384c0 100644
--- a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js
+++ b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js
@@ -207,7 +207,7 @@ export const pageQuery = graphql`
     ) {
       html
     }
-    JavascriptFrontmatter(fields: { slug: { eq: $slug } }) {
+    javascriptFrontmatter(fields: { slug: { eq: $slug } }) {
       ...JSBlogPost_frontmatter
     }
   }
diff --git a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js
index 97a620dca5cd2..f8a46aeb7851c 100644
--- a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js
+++ b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js
@@ -200,7 +200,7 @@ let mergeData = (d1, d1key, d2, d2key) => {
 //  query for it here, and get the transformed html though because remark transforms
 //  any markdown based node.
 export const pageQuery = graphql`
-  query choroplethOnD3v4Alt($slug: String!) {
+  query choroplethOnD3v4Alt {
     markdownRemark(
       fields: {
         slug: { eq: "/2017-05-30-choropleth-on-d3v4-alternate/_choropleth/" }

From 872e071d28e79cafe5de3263b09362585e22054e Mon Sep 17 00:00:00 2001
From: Jacob Bolda <jbolda@gmail.com>
Date: Fri, 9 Feb 2018 06:56:07 -0600
Subject: [PATCH 05/11] rename intial defined `let`

---
 .../src/gatsby-node.js                                          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-transformer-javascript-frontmatter/src/gatsby-node.js b/packages/gatsby-transformer-javascript-frontmatter/src/gatsby-node.js
index 75abc161ddc33..aecd10140dc5c 100644
--- a/packages/gatsby-transformer-javascript-frontmatter/src/gatsby-node.js
+++ b/packages/gatsby-transformer-javascript-frontmatter/src/gatsby-node.js
@@ -35,7 +35,7 @@ async function onCreateNode({
     ],
   }
 
-  let exportsData, data
+  let exportsData, frontmatter
   try {
     const ast = babylon.parse(code, options)
 

From 8c94717c33384db0ab537db56f056a72889caaf8 Mon Sep 17 00:00:00 2001
From: Jacob Bolda <jbolda@gmail.com>
Date: Fri, 9 Feb 2018 07:05:42 -0600
Subject: [PATCH 06/11] clear out unused deps

---
 .../gatsby-config.js                          | 17 +----------------
 .../using-javascript-transforms/package.json  | 19 ++++++-------------
 .../src/static/css/base.scss                  |  2 +-
 3 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/examples/using-javascript-transforms/gatsby-config.js b/examples/using-javascript-transforms/gatsby-config.js
index eef87f4cba768..852a8d0ee1ab1 100644
--- a/examples/using-javascript-transforms/gatsby-config.js
+++ b/examples/using-javascript-transforms/gatsby-config.js
@@ -25,29 +25,14 @@ module.exports = {
       },
     },
     `gatsby-transformer-javascript-frontmatter`,
-    `gatsby-transformer-yaml`,
     {
       resolve: `gatsby-transformer-remark`,
       options: {
         plugins: [
-          {
-            resolve: `gatsby-remark-images`,
-            options: {
-              maxWidth: 690,
-            },
-          },
-          {
-            resolve: `gatsby-remark-responsive-iframe`,
-            options: {},
-          },
           `gatsby-remark-prismjs`,
-          `gatsby-remark-copy-linked-files`,
-          `gatsby-remark-smartypants`,
         ],
       },
     },
-    `gatsby-plugin-sharp`,
-    `gatsby-plugin-postcss-sass`,
-    `gatsby-plugin-offline`,
+    `gatsby-plugin-sass`,
   ],
 }
diff --git a/examples/using-javascript-transforms/package.json b/examples/using-javascript-transforms/package.json
index 52810e5a11acd..03a8ead40f58b 100644
--- a/examples/using-javascript-transforms/package.json
+++ b/examples/using-javascript-transforms/package.json
@@ -10,11 +10,13 @@
     "serve": "node_modules/.bin/gatsby serve",
     "clean:public": "rm -rf public & mkdir public",
     "clean": "npm run clean:public",
-    "lint":
-      "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
+    "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": ["personal", "blog"],
+  "keywords": [
+    "personal",
+    "blog"
+  ],
   "author": "gatsbyjs",
   "license": "MIT",
   "bugs": {
@@ -26,19 +28,10 @@
     "d3": "4.9.1",
     "gatsby": "latest",
     "gatsby-link": "latest",
-    "gatsby-plugin-offline": "latest",
-    "gatsby-plugin-postcss-sass": "latest",
-    "gatsby-plugin-sharp": "latest",
-    "gatsby-remark-copy-linked-files": "latest",
+    "gatsby-plugin-sass": "^1.0.16",
     "gatsby-remark-prismjs": "latest",
-    "gatsby-remark-responsive-iframe": "latest",
-    "gatsby-remark-images": "latest",
-    "gatsby-remark-smartypants": "latest",
     "gatsby-source-filesystem": "latest",
-    "gatsby-source-contentful": "latest",
     "gatsby-transformer-remark": "latest",
-    "gatsby-transformer-sharp": "latest",
-    "gatsby-transformer-yaml": "latest",
     "moment": "^2.14.1",
     "normalize.css": "^7.0.0",
     "prop-types": "^15.5.8",
diff --git a/examples/using-javascript-transforms/src/static/css/base.scss b/examples/using-javascript-transforms/src/static/css/base.scss
index 9605560ce0c2f..aa250277246df 100644
--- a/examples/using-javascript-transforms/src/static/css/base.scss
+++ b/examples/using-javascript-transforms/src/static/css/base.scss
@@ -1,5 +1,4 @@
 @import '~normalize.css';
-@import 'prismjs/themes/prism-coy.css';
 // Override variables here
 // You can add new ones or update existing ones:
 
@@ -15,3 +14,4 @@ $family-sans-serif: 'Varela Round', sans-serif;
 $family-serif: 'Lora', serif; // Add a serif family
 
 @import '~bulma';
+@import '~prismjs/themes/prism-coy';

From b0f41d2b622a657e0036870454a01b327e7a9149 Mon Sep 17 00:00:00 2001
From: Jacob Bolda <jbolda@gmail.com>
Date: Fri, 9 Feb 2018 07:28:46 -0600
Subject: [PATCH 07/11] begin updating new layout components

---
 .../using-javascript-transforms/package.json  |  1 +
 .../src/components/Layouts/blogPost.js        | 25 ++++++++-----------
 .../src/components/Layouts/insetPage.js       | 24 ++++++++----------
 .../src/components/Layouts/master.js          |  1 +
 .../src/components/SiteSidebar/index.js       |  2 +-
 .../src/mainPages/contact.js                  | 13 ++++++++++
 .../src/mainPages/index.js                    | 10 +++++++-
 .../src/templates/mdInsetPage.js              |  6 ++++-
 8 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/examples/using-javascript-transforms/package.json b/examples/using-javascript-transforms/package.json
index 03a8ead40f58b..9bbd4c849e9e7 100644
--- a/examples/using-javascript-transforms/package.json
+++ b/examples/using-javascript-transforms/package.json
@@ -31,6 +31,7 @@
     "gatsby-plugin-sass": "^1.0.16",
     "gatsby-remark-prismjs": "latest",
     "gatsby-source-filesystem": "latest",
+    "gatsby-transformer-javascript-frontmatter": "latest",
     "gatsby-transformer-remark": "latest",
     "moment": "^2.14.1",
     "normalize.css": "^7.0.0",
diff --git a/examples/using-javascript-transforms/src/components/Layouts/blogPost.js b/examples/using-javascript-transforms/src/components/Layouts/blogPost.js
index 8f296e9cce604..f1b5639432c29 100644
--- a/examples/using-javascript-transforms/src/components/Layouts/blogPost.js
+++ b/examples/using-javascript-transforms/src/components/Layouts/blogPost.js
@@ -42,20 +42,17 @@ class BlogPostLayout extends React.Component {
 }
 
 export default BlogPostLayout
-/*
+
 export const pageQuery = graphql`
-  query BlogPostLayoutBySlug {
-    site {
-      siteMetadata {
-        title
-        siteDescr
-        siteAuthor
-        siteEmailUrl
-        siteEmailPretty
-        siteTwitterUrl
-        siteTwitterPretty
-      }
+  fragment sitemetadata on Site {
+    siteMetadata {
+      title
+      siteDescr
+      siteAuthor
+      siteEmailUrl
+      siteEmailPretty
+      siteTwitterUrl
+      siteTwitterPretty
     }
   }
-`
-*/
\ No newline at end of file
+`
\ No newline at end of file
diff --git a/examples/using-javascript-transforms/src/components/Layouts/insetPage.js b/examples/using-javascript-transforms/src/components/Layouts/insetPage.js
index 82d9b9cf26364..7b5c918917ae6 100644
--- a/examples/using-javascript-transforms/src/components/Layouts/insetPage.js
+++ b/examples/using-javascript-transforms/src/components/Layouts/insetPage.js
@@ -4,6 +4,7 @@ import MasterLayout from "./master"
 
 class InsetPageLayout extends React.Component {
   render() {
+    console.log(this)
     const siteMetadata = this.props.data.site
 
     return (
@@ -24,20 +25,17 @@ class InsetPageLayout extends React.Component {
 }
 
 export default InsetPageLayout
-/*
+
 export const pageQuery = graphql`
-  query InsetLayoutBySlug {
-    site {
-      siteMetadata {
-        title
-        siteDescr
-        siteAuthor
-        siteEmailUrl
-        siteEmailPretty
-        siteTwitterUrl
-        siteTwitterPretty
-      }
+  fragment site_sitemetadata on Site {
+    siteMetadata {
+      title
+      siteDescr
+      siteAuthor
+      siteEmailUrl
+      siteEmailPretty
+      siteTwitterUrl
+      siteTwitterPretty
     }
   }
 `
-*/
\ No newline at end of file
diff --git a/examples/using-javascript-transforms/src/components/Layouts/master.js b/examples/using-javascript-transforms/src/components/Layouts/master.js
index c3f75966ed424..19750a681dbbb 100644
--- a/examples/using-javascript-transforms/src/components/Layouts/master.js
+++ b/examples/using-javascript-transforms/src/components/Layouts/master.js
@@ -5,6 +5,7 @@ import "../../static/css/base.scss"
 
 class MasterLayout extends React.Component {
   render() {
+    console.log(this)
     let siteMetadata = this.props.data.site.siteMetadata
     let location = this.props.location.pathname
 
diff --git a/examples/using-javascript-transforms/src/components/SiteSidebar/index.js b/examples/using-javascript-transforms/src/components/SiteSidebar/index.js
index 62cabcefb996a..314d4a5a2f19b 100644
--- a/examples/using-javascript-transforms/src/components/SiteSidebar/index.js
+++ b/examples/using-javascript-transforms/src/components/SiteSidebar/index.js
@@ -14,7 +14,7 @@ class SiteSidebar extends React.Component {
         <div className="card-image">
           <Link to={`/`}>
             <figure className="image">
-              <img src="https://camo.githubusercontent.com/9c70ec950802d744cd3bccaa97fadbfdd7c8f2a9/68747470733a2f2f7777772e6761747362796a732e6f72672f6761747362792d6e656761746976652e737667" />
+              <img src="https://camo.githubusercontent.com/ac31ac54c2013850b0fb8a3a4926f4718a398fb3/68747470733a2f2f7777772e6761747362796a732e6f72672f6d6f6e6f6772616d2e737667" />
             </figure>
           </Link>
         </div>
diff --git a/examples/using-javascript-transforms/src/mainPages/contact.js b/examples/using-javascript-transforms/src/mainPages/contact.js
index 0fdf0d94a3798..73f3bdfc9506a 100644
--- a/examples/using-javascript-transforms/src/mainPages/contact.js
+++ b/examples/using-javascript-transforms/src/mainPages/contact.js
@@ -1,6 +1,7 @@
 import React from "react"
 import Helmet from "react-helmet"
 import SiteLinks from "../components/SiteLinks"
+import InsetPageLayout from "../components/Layouts/insetPage"
 
 exports.data = {
   layoutType: `page`,
@@ -10,11 +11,23 @@ exports.data = {
 class ContactMe extends React.Component {
   render() {
     return (
+      <InsetPageLayout {...this.props}>
       <div className="box container">
         <p>I would love to hear from you!</p>
       </div>
+      </InsetPageLayout>
     )
   }
 }
 
 export default ContactMe
+
+/*
+export const pageQuery = graphql`
+  query contactUs {
+    site {
+      ...site_sitemetadata
+    }
+  }
+`
+*/
diff --git a/examples/using-javascript-transforms/src/mainPages/index.js b/examples/using-javascript-transforms/src/mainPages/index.js
index 8f8cfcbde7586..e95239b4658a1 100644
--- a/examples/using-javascript-transforms/src/mainPages/index.js
+++ b/examples/using-javascript-transforms/src/mainPages/index.js
@@ -3,6 +3,7 @@ import Link from "gatsby-link"
 import Helmet from "react-helmet"
 import sortBy from "lodash/sortBy"
 import moment from "moment"
+import InsetPageLayout from "../components/Layouts/insetPage"
 
 class SiteIndex extends React.Component {
   render() {
@@ -76,7 +77,11 @@ class SiteIndex extends React.Component {
       }
     })
 
-    return <div>{pageLinks}</div>
+    return (
+      <InsetPageLayout {...this.props}>
+        {pageLinks}
+      </InsetPageLayout>
+    )
   }
 }
 
@@ -121,5 +126,8 @@ export const pageQuery = graphql`
         }
       }
     }
+    site {
+      ...site_sitemetadata
+    }
   }
 `
diff --git a/examples/using-javascript-transforms/src/templates/mdInsetPage.js b/examples/using-javascript-transforms/src/templates/mdInsetPage.js
index fc71b8691d0bd..2f79619be4981 100644
--- a/examples/using-javascript-transforms/src/templates/mdInsetPage.js
+++ b/examples/using-javascript-transforms/src/templates/mdInsetPage.js
@@ -3,10 +3,11 @@ import InsetPageLayout from "../components/Layouts/insetPage"
 
 class mdInsetPage extends React.Component {
   render() {
+    console.log(this)
     const { html } = this.props.data.markdownRemark
 
     return (
-      <InsetPageLayout>
+      <InsetPageLayout {...this.props}>
         <div className="box container content">
           <div dangerouslySetInnerHTML={{ __html: html }} />
         </div>
@@ -22,5 +23,8 @@ export const pageQuery = graphql`
     markdownRemark(fields: { slug: { eq: $slug } }) {
       html
     }
+    site {
+      ...site_sitemetadata
+    }
   }
 `

From 08fff9f69eca065267909517b849a4893438f7b2 Mon Sep 17 00:00:00 2001
From: Jacob Bolda <jbolda@gmail.com>
Date: Fri, 9 Feb 2018 09:00:47 -0600
Subject: [PATCH 08/11] fix all HOC

---
 .../2017-03-09-choropleth-on-d3v4/index.js    |  7 ++++++-
 .../index.js                                  | 11 +++++++++--
 .../src/components/BlogPostChrome/index.js    | 18 ++++++++++--------
 .../src/components/Layouts/blogPost.js        |  4 ++--
 .../src/components/Layouts/insetPage.js       |  1 -
 .../src/components/Layouts/master.js          |  2 --
 .../src/mainPages/contact.js                  | 11 +++++------
 .../src/mainPages/index.js                    |  1 -
 .../src/templates/mdBlogPost.js               | 19 +++++++++++--------
 .../src/templates/mdInsetPage.js              |  1 -
 10 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js
index 9014aced384c0..afbbc2cfb9059 100644
--- a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js
+++ b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js
@@ -52,7 +52,9 @@ class choroplethBase extends React.Component {
     let html = data.html
 
     return (
-      <BlogPostChrome {...this.props.data.JavascriptFrontmatter.frontmatter}>
+      <BlogPostChrome {...{
+        frontmatter: this.props.data.javascriptFrontmatter.frontmatter,
+        site: this.props.data.site}}>
         <div className="section">
           <div className="container">
             <div id="states" />
@@ -210,5 +212,8 @@ export const pageQuery = graphql`
     javascriptFrontmatter(fields: { slug: { eq: $slug } }) {
       ...JSBlogPost_frontmatter
     }
+    site {
+      ...site_sitemetadata
+    }
   }
 `
diff --git a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js
index f8a46aeb7851c..f4e2ac9a15803 100644
--- a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js
+++ b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js
@@ -51,7 +51,9 @@ class choroplethAltBase extends React.Component {
     let html = data.html
 
     return (
-      <BlogPostChrome {...this.props.data.JavascriptFrontmatter.frontmatter}>
+      <BlogPostChrome {...{
+                frontmatter: this.props.data.javascriptFrontmatter.frontmatter,
+                site: this.props.data.site}}>
         <div className="section">
           <div className="container">
             <div id="states" />
@@ -208,6 +210,11 @@ export const pageQuery = graphql`
     ) {
       html
     }
-
+    javascriptFrontmatter {
+      ...JSBlogPost_frontmatter
+    }
+    site {
+      ...site_sitemetadata
+    }
   }
 `
diff --git a/examples/using-javascript-transforms/src/components/BlogPostChrome/index.js b/examples/using-javascript-transforms/src/components/BlogPostChrome/index.js
index f26b297b058a5..b9d08d2185678 100644
--- a/examples/using-javascript-transforms/src/components/BlogPostChrome/index.js
+++ b/examples/using-javascript-transforms/src/components/BlogPostChrome/index.js
@@ -1,21 +1,23 @@
 import React from "react"
 import HelmetBlock from "../HelmetBlock"
 import PostPublished from "../PostPublished"
+import BlogPostLayout from "../Layouts/blogPost"
 
 class BlogPostChrome extends React.Component {
   render() {
-    const frontmatter = this.props
 
     return (
-      <div className="BlogPostChrome">
-        <HelmetBlock {...frontmatter} />
-        <div className="content">
-          <div className="section">
-            <div className="container content">{this.props.children}</div>
+      <BlogPostLayout {...this.props.site}>
+        <div className="BlogPostChrome">
+          <HelmetBlock {...this.props.frontmatter} />
+          <div className="content">
+            <div className="section">
+              <div className="container content">{this.props.children}</div>
+            </div>
           </div>
+          <PostPublished {...this.props.frontmatter} />
         </div>
-        <PostPublished {...frontmatter} />
-      </div>
+      </BlogPostLayout>
     )
   }
 }
diff --git a/examples/using-javascript-transforms/src/components/Layouts/blogPost.js b/examples/using-javascript-transforms/src/components/Layouts/blogPost.js
index f1b5639432c29..3f5d4346f26bb 100644
--- a/examples/using-javascript-transforms/src/components/Layouts/blogPost.js
+++ b/examples/using-javascript-transforms/src/components/Layouts/blogPost.js
@@ -7,7 +7,7 @@ import MasterLayout from "./master"
 
 class BlogPostLayout extends React.Component {
   render() {
-    let siteMetadata = this.props.data.site.siteMetadata
+    let siteMetadata = this.props.siteMetadata
 
     const home = (
       <div className="nav">
@@ -23,7 +23,7 @@ class BlogPostLayout extends React.Component {
 
     return (
       <div>
-        <MasterLayout {...this.props}>
+        <MasterLayout {...{data: {site: {siteMetadata: this.props.siteMetadata}}}}>
           {home}
           <div className="container">{this.props.children}</div>
           <div className="footer container">
diff --git a/examples/using-javascript-transforms/src/components/Layouts/insetPage.js b/examples/using-javascript-transforms/src/components/Layouts/insetPage.js
index 7b5c918917ae6..25fe95a2c3a3a 100644
--- a/examples/using-javascript-transforms/src/components/Layouts/insetPage.js
+++ b/examples/using-javascript-transforms/src/components/Layouts/insetPage.js
@@ -4,7 +4,6 @@ import MasterLayout from "./master"
 
 class InsetPageLayout extends React.Component {
   render() {
-    console.log(this)
     const siteMetadata = this.props.data.site
 
     return (
diff --git a/examples/using-javascript-transforms/src/components/Layouts/master.js b/examples/using-javascript-transforms/src/components/Layouts/master.js
index 19750a681dbbb..87601046b1b76 100644
--- a/examples/using-javascript-transforms/src/components/Layouts/master.js
+++ b/examples/using-javascript-transforms/src/components/Layouts/master.js
@@ -5,9 +5,7 @@ import "../../static/css/base.scss"
 
 class MasterLayout extends React.Component {
   render() {
-    console.log(this)
     let siteMetadata = this.props.data.site.siteMetadata
-    let location = this.props.location.pathname
 
     return (
       <div className="MasterLayout">
diff --git a/examples/using-javascript-transforms/src/mainPages/contact.js b/examples/using-javascript-transforms/src/mainPages/contact.js
index 73f3bdfc9506a..a4a268707a749 100644
--- a/examples/using-javascript-transforms/src/mainPages/contact.js
+++ b/examples/using-javascript-transforms/src/mainPages/contact.js
@@ -3,7 +3,7 @@ import Helmet from "react-helmet"
 import SiteLinks from "../components/SiteLinks"
 import InsetPageLayout from "../components/Layouts/insetPage"
 
-exports.data = {
+exports.frontmatter = {
   layoutType: `page`,
   path: `/contact/`,
 }
@@ -12,9 +12,9 @@ class ContactMe extends React.Component {
   render() {
     return (
       <InsetPageLayout {...this.props}>
-      <div className="box container">
-        <p>I would love to hear from you!</p>
-      </div>
+        <div className="box container">
+          <p>I would love to hear from you!</p>
+        </div>
       </InsetPageLayout>
     )
   }
@@ -22,7 +22,7 @@ class ContactMe extends React.Component {
 
 export default ContactMe
 
-/*
+
 export const pageQuery = graphql`
   query contactUs {
     site {
@@ -30,4 +30,3 @@ export const pageQuery = graphql`
     }
   }
 `
-*/
diff --git a/examples/using-javascript-transforms/src/mainPages/index.js b/examples/using-javascript-transforms/src/mainPages/index.js
index e95239b4658a1..b2a85f51daac3 100644
--- a/examples/using-javascript-transforms/src/mainPages/index.js
+++ b/examples/using-javascript-transforms/src/mainPages/index.js
@@ -7,7 +7,6 @@ import InsetPageLayout from "../components/Layouts/insetPage"
 
 class SiteIndex extends React.Component {
   render() {
-    console.log(this)
     const pageLinks = []
     let iteratorKey = 0
     let pageRaw = [
diff --git a/examples/using-javascript-transforms/src/templates/mdBlogPost.js b/examples/using-javascript-transforms/src/templates/mdBlogPost.js
index 4e1bfb35ef751..0ad8f192689ca 100644
--- a/examples/using-javascript-transforms/src/templates/mdBlogPost.js
+++ b/examples/using-javascript-transforms/src/templates/mdBlogPost.js
@@ -1,20 +1,20 @@
 import React from "react"
 import moment from "moment"
 import BlogPostChrome from "../components/BlogPostChrome"
-import BlogPostLayout from "../components/Layouts/blogPost"
 
 class mdBlogPost extends React.Component {
   render() {
     const { html, frontmatter } = this.props.data.markdownRemark
 
     return (
-      <BlogPostLayout>
-        <BlogPostChrome {...frontmatter}>
-          <div className="container content">
-            <div dangerouslySetInnerHTML={{ __html: html }} />
-          </div>
-        </BlogPostChrome>
-      </BlogPostLayout>
+      <BlogPostChrome {...{
+                      frontmatter: this.props.data.markdownRemark.frontmatter,
+                      site: this.props.data.site
+                      }}>
+        <div className="container content">
+          <div dangerouslySetInnerHTML={{ __html: html }} />
+        </div>
+      </BlogPostChrome>
     )
   }
 }
@@ -27,5 +27,8 @@ export const pageQuery = graphql`
       html
       ...MarkdownBlogPost_frontmatter
     }
+    site {
+      ...site_sitemetadata
+    }
   }
 `
diff --git a/examples/using-javascript-transforms/src/templates/mdInsetPage.js b/examples/using-javascript-transforms/src/templates/mdInsetPage.js
index 2f79619be4981..8fe9e7086871c 100644
--- a/examples/using-javascript-transforms/src/templates/mdInsetPage.js
+++ b/examples/using-javascript-transforms/src/templates/mdInsetPage.js
@@ -3,7 +3,6 @@ import InsetPageLayout from "../components/Layouts/insetPage"
 
 class mdInsetPage extends React.Component {
   render() {
-    console.log(this)
     const { html } = this.props.data.markdownRemark
 
     return (

From ab7e9b447ad497c4f16cb5996d861c39bca73784 Mon Sep 17 00:00:00 2001
From: Jacob Bolda <jbolda@gmail.com>
Date: Fri, 9 Feb 2018 09:11:40 -0600
Subject: [PATCH 09/11] update example readme

---
 examples/using-javascript-transforms/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/using-javascript-transforms/README.md b/examples/using-javascript-transforms/README.md
index a71ed379e7eb8..d868bc286ed73 100644
--- a/examples/using-javascript-transforms/README.md
+++ b/examples/using-javascript-transforms/README.md
@@ -12,7 +12,7 @@ There are two "root" data types that we use. There are routes that are based in
 markdown such as /a-first-post/ found at
 `src/articles/2017-01-22-a-first-post/index.md`. Of greater interest are routes
 based on JavaScript. This is not to be confused with the JavaScript react
-components in `src/layouts/*` or `src/templates/*` or even `src/components/*`.
+components in `src/templates/*` or even `src/components/*`.
 In this example, we use JavaScript for some articles. Check out
 `src/articles/2017-03-09-choropleth-on-d3v4/index.js`. Typically most examples
 will use a JavaScript root data type for the homepage.
@@ -22,8 +22,8 @@ template (`src/templates/*`). In the template, we can include dumb components to
 compose our structure in a DRY manner. The JavaScript routes are used directly
 which means you will need to include some of the route specific structure on
 every JavaScript page. This can be painful, but it can be managed with good use
-of higher order components (see `src/components/BlogPostChrome`) and graphql
-fragments. For further discussion and relevant prototypes see
+of higher order components (see `src/components/BlogPostChrome` and `src/components/Layouts`)
+and graphql fragments. For further discussion and relevant prototypes see
 [#1866](https://github.com/gatsbyjs/gatsby/issues/1866).
 
 The last thing of note is this example's `gatsby-node.js`. Gatsby by default

From 7cbc3119d1ce6b0abd97b4a515e7af7ee456262d Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Wed, 14 Feb 2018 10:35:09 -0800
Subject: [PATCH 10/11] Format

---
 examples/using-javascript-transforms/gatsby-config.js  |  4 +---
 examples/using-javascript-transforms/gatsby-node.js    |  4 ++--
 .../articles/2017-03-09-choropleth-on-d3v4/index.js    |  9 ++++++---
 .../2017-05-30-choropleth-on-d3v4-alternate/index.js   |  9 ++++++---
 .../src/components/BlogPostChrome/index.js             |  1 -
 .../src/components/Layouts/blogPost.js                 |  6 ++++--
 .../src/mainPages/contact.js                           |  1 -
 .../using-javascript-transforms/src/mainPages/index.js |  6 +-----
 .../src/templates/mdBlogPost.js                        | 10 ++++++----
 .../src/gatsby-node.js                                 |  1 -
 10 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/examples/using-javascript-transforms/gatsby-config.js b/examples/using-javascript-transforms/gatsby-config.js
index 852a8d0ee1ab1..16d462c9c07cf 100644
--- a/examples/using-javascript-transforms/gatsby-config.js
+++ b/examples/using-javascript-transforms/gatsby-config.js
@@ -28,9 +28,7 @@ module.exports = {
     {
       resolve: `gatsby-transformer-remark`,
       options: {
-        plugins: [
-          `gatsby-remark-prismjs`,
-        ],
+        plugins: [`gatsby-remark-prismjs`],
       },
     },
     `gatsby-plugin-sass`,
diff --git a/examples/using-javascript-transforms/gatsby-node.js b/examples/using-javascript-transforms/gatsby-node.js
index c5534a431602c..1f73fba7edfe3 100644
--- a/examples/using-javascript-transforms/gatsby-node.js
+++ b/examples/using-javascript-transforms/gatsby-node.js
@@ -73,7 +73,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
 
         // Create from markdown
         result.data.allMarkdownRemark.edges.forEach(edge => {
-          let {frontmatter} = edge.node
+          let { frontmatter } = edge.node
           if (frontmatter.layoutType === `post`) {
             createPage({
               path: frontmatter.path, // required
@@ -98,7 +98,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
         //  /pages directory. We purposely don't have a folder with this name
         //  so that we can go full manual mode.
         result.data.allJavascriptFrontmatter.edges.forEach(edge => {
-          let {frontmatter} = edge.node
+          let { frontmatter } = edge.node
           // see above
           if (frontmatter.layoutType === `post`) {
             createPage({
diff --git a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js
index afbbc2cfb9059..a9effe9ffe30d 100644
--- a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js
+++ b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js
@@ -52,9 +52,12 @@ class choroplethBase extends React.Component {
     let html = data.html
 
     return (
-      <BlogPostChrome {...{
-        frontmatter: this.props.data.javascriptFrontmatter.frontmatter,
-        site: this.props.data.site}}>
+      <BlogPostChrome
+        {...{
+          frontmatter: this.props.data.javascriptFrontmatter.frontmatter,
+          site: this.props.data.site,
+        }}
+      >
         <div className="section">
           <div className="container">
             <div id="states" />
diff --git a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js
index f4e2ac9a15803..350b76e4309ad 100644
--- a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js
+++ b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js
@@ -51,9 +51,12 @@ class choroplethAltBase extends React.Component {
     let html = data.html
 
     return (
-      <BlogPostChrome {...{
-                frontmatter: this.props.data.javascriptFrontmatter.frontmatter,
-                site: this.props.data.site}}>
+      <BlogPostChrome
+        {...{
+          frontmatter: this.props.data.javascriptFrontmatter.frontmatter,
+          site: this.props.data.site,
+        }}
+      >
         <div className="section">
           <div className="container">
             <div id="states" />
diff --git a/examples/using-javascript-transforms/src/components/BlogPostChrome/index.js b/examples/using-javascript-transforms/src/components/BlogPostChrome/index.js
index b9d08d2185678..b816d8c3c26c0 100644
--- a/examples/using-javascript-transforms/src/components/BlogPostChrome/index.js
+++ b/examples/using-javascript-transforms/src/components/BlogPostChrome/index.js
@@ -5,7 +5,6 @@ import BlogPostLayout from "../Layouts/blogPost"
 
 class BlogPostChrome extends React.Component {
   render() {
-
     return (
       <BlogPostLayout {...this.props.site}>
         <div className="BlogPostChrome">
diff --git a/examples/using-javascript-transforms/src/components/Layouts/blogPost.js b/examples/using-javascript-transforms/src/components/Layouts/blogPost.js
index 3f5d4346f26bb..d2dff1c37f265 100644
--- a/examples/using-javascript-transforms/src/components/Layouts/blogPost.js
+++ b/examples/using-javascript-transforms/src/components/Layouts/blogPost.js
@@ -23,7 +23,9 @@ class BlogPostLayout extends React.Component {
 
     return (
       <div>
-        <MasterLayout {...{data: {site: {siteMetadata: this.props.siteMetadata}}}}>
+        <MasterLayout
+          {...{ data: { site: { siteMetadata: this.props.siteMetadata } } }}
+        >
           {home}
           <div className="container">{this.props.children}</div>
           <div className="footer container">
@@ -55,4 +57,4 @@ export const pageQuery = graphql`
       siteTwitterPretty
     }
   }
-`
\ No newline at end of file
+`
diff --git a/examples/using-javascript-transforms/src/mainPages/contact.js b/examples/using-javascript-transforms/src/mainPages/contact.js
index a4a268707a749..ec174963b4e8a 100644
--- a/examples/using-javascript-transforms/src/mainPages/contact.js
+++ b/examples/using-javascript-transforms/src/mainPages/contact.js
@@ -22,7 +22,6 @@ class ContactMe extends React.Component {
 
 export default ContactMe
 
-
 export const pageQuery = graphql`
   query contactUs {
     site {
diff --git a/examples/using-javascript-transforms/src/mainPages/index.js b/examples/using-javascript-transforms/src/mainPages/index.js
index b2a85f51daac3..ac6efa83fc829 100644
--- a/examples/using-javascript-transforms/src/mainPages/index.js
+++ b/examples/using-javascript-transforms/src/mainPages/index.js
@@ -76,11 +76,7 @@ class SiteIndex extends React.Component {
       }
     })
 
-    return (
-      <InsetPageLayout {...this.props}>
-        {pageLinks}
-      </InsetPageLayout>
-    )
+    return <InsetPageLayout {...this.props}>{pageLinks}</InsetPageLayout>
   }
 }
 
diff --git a/examples/using-javascript-transforms/src/templates/mdBlogPost.js b/examples/using-javascript-transforms/src/templates/mdBlogPost.js
index 0ad8f192689ca..137f31d9c1022 100644
--- a/examples/using-javascript-transforms/src/templates/mdBlogPost.js
+++ b/examples/using-javascript-transforms/src/templates/mdBlogPost.js
@@ -7,10 +7,12 @@ class mdBlogPost extends React.Component {
     const { html, frontmatter } = this.props.data.markdownRemark
 
     return (
-      <BlogPostChrome {...{
-                      frontmatter: this.props.data.markdownRemark.frontmatter,
-                      site: this.props.data.site
-                      }}>
+      <BlogPostChrome
+        {...{
+          frontmatter: this.props.data.markdownRemark.frontmatter,
+          site: this.props.data.site,
+        }}
+      >
         <div className="container content">
           <div dangerouslySetInnerHTML={{ __html: html }} />
         </div>
diff --git a/packages/gatsby-transformer-javascript-frontmatter/src/gatsby-node.js b/packages/gatsby-transformer-javascript-frontmatter/src/gatsby-node.js
index aecd10140dc5c..9311a5906e7b0 100644
--- a/packages/gatsby-transformer-javascript-frontmatter/src/gatsby-node.js
+++ b/packages/gatsby-transformer-javascript-frontmatter/src/gatsby-node.js
@@ -89,7 +89,6 @@ async function onCreateNode({
       },
     })
 
-
     exportsData = {
       ...frontmatter,
       error: false,

From 0bc1c7b1db7d637823cf930d6b5ec1892dcaa686 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Wed, 14 Feb 2018 10:35:52 -0800
Subject: [PATCH 11/11] Update README.md

---
 packages/gatsby-transformer-javascript-frontmatter/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-transformer-javascript-frontmatter/README.md b/packages/gatsby-transformer-javascript-frontmatter/README.md
index 7216e53deda3f..b1d1e30344042 100644
--- a/packages/gatsby-transformer-javascript-frontmatter/README.md
+++ b/packages/gatsby-transformer-javascript-frontmatter/README.md
@@ -15,7 +15,7 @@ plugins: [`gatsby-transformer-javascript-frontmatter`];
 
 ## Parsing algorithm
 
-The algorithm for uses babylon and traverse (from the babel family of code) to
+This plugin uses babylon and traverse (from the babel family of code) to
 statically read the frontmatter exports.
 
 In a .js file, export a frontmatter object to set your metadata variables, like so: