From 3ead525cf71fb4443f6e04ef526a5a5ad1f8dc66 Mon Sep 17 00:00:00 2001
From: Dustin Schau <dustinschau@gmail.com>
Date: Fri, 28 Sep 2018 14:17:15 -0500
Subject: [PATCH 01/11] feat: refactor index page so hot reloading works for
 code examples

---
 src/components/CodeEditor/CodeEditor.js   | 43 +----------
 src/components/CodeExample/CodeExample.js | 54 ++++++++++++++
 src/components/CodeExample/index.js       |  3 +
 src/pages/index.js                        | 90 ++++++-----------------
 4 files changed, 82 insertions(+), 108 deletions(-)
 create mode 100644 src/components/CodeExample/CodeExample.js
 create mode 100644 src/components/CodeExample/index.js

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index f5ef723a7..b199af5ad 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -65,47 +65,8 @@ class CodeEditor extends Component {
     }
 
     return (
+      <div css={{ flex: 1 }}>
       <LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
-        <div
-          css={{
-            [media.greaterThan('xlarge')]: {
-              display: 'flex',
-              flexDirection: 'row',
-            },
-
-            [media.lessThan('large')]: {
-              display: 'block',
-            },
-          }}>
-          {children && (
-            <div
-              css={{
-                flex: '0 0 33%',
-
-                [media.lessThan('xlarge')]: {
-                  marginBottom: 20,
-                },
-
-                '& h3': {
-                  color: colors.dark,
-                  maxWidth: '11em',
-                  paddingTop: 0,
-                },
-
-                '& p': {
-                  marginTop: 15,
-                  marginRight: 40,
-                  lineHeight: 1.7,
-
-                  [media.greaterThan('xlarge')]: {
-                    marginTop: 25,
-                  },
-                },
-              }}>
-              {children}
-            </div>
-          )}
-
           <div
             css={{
               [media.greaterThan('medium')]: {
@@ -273,8 +234,8 @@ class CodeEditor extends Component {
               </div>
             )}
           </div>
-        </div>
       </LiveProvider>
+      </div>
     );
   }
 
diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
new file mode 100644
index 000000000..39b40fc1b
--- /dev/null
+++ b/src/components/CodeExample/CodeExample.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import {colors, media} from 'theme';
+import CodeEditor from '../CodeEditor/CodeEditor';
+
+class CodeExample extends Component {
+  render() {
+    const {children, code, loaded} = this.props;
+    return (
+      <div
+      css={{
+        [media.greaterThan('xlarge')]: {
+          display: 'flex',
+          flexDirection: 'row',
+        },
+
+        [media.lessThan('large')]: {
+          display: 'block',
+        },
+      }}>
+          {children && (
+            <div
+              css={{
+                flex: '0 0 33%',
+
+                [media.lessThan('xlarge')]: {
+                  marginBottom: 20,
+                },
+
+                '& h3': {
+                  color: colors.dark,
+                  maxWidth: '11em',
+                  paddingTop: 0,
+                },
+
+                '& p': {
+                  marginTop: 15,
+                  marginRight: 40,
+                  lineHeight: 1.7,
+
+                  [media.greaterThan('xlarge')]: {
+                    marginTop: 25,
+                  },
+                },
+              }}>
+              {children}
+            </div>
+          )}
+          {loaded ? <CodeEditor code={code} /> : <h4>Loading code example...</h4>}
+      </div>
+    )
+  }
+}
+
+export default CodeExample;
diff --git a/src/components/CodeExample/index.js b/src/components/CodeExample/index.js
new file mode 100644
index 000000000..6bff868c1
--- /dev/null
+++ b/src/components/CodeExample/index.js
@@ -0,0 +1,3 @@
+import CodeExample from './CodeExample';
+
+export default CodeExample;
diff --git a/src/pages/index.js b/src/pages/index.js
index 480d8b0a9..c0bf8fc15 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -7,72 +7,37 @@
 import ButtonLink from 'components/ButtonLink';
 import Container from 'components/Container';
 import Flex from 'components/Flex';
-import mountCodeExample from 'utils/mountCodeExample';
+import CodeExample from 'components/CodeExample';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {graphql} from 'gatsby';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import Layout from 'components/Layout';
+import loadScript from 'utils/loadScript';
 import {colors, media, sharedStyles} from 'theme';
 import createOgUrl from 'utils/createOgUrl';
-import loadScript from 'utils/loadScript';
 import {babelURL} from 'site-constants';
 import ReactDOM from 'react-dom';
 import logoWhiteSvg from 'icons/logo-white.svg';
 
 class Home extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    const {data} = props;
-
-    const code = data.code.edges.reduce((map, {node}) => {
-      map[node.id] = JSON.parse(node.internal.contentDigest);
-
-      return map;
-    }, {});
-
-    const examples = data.examples.edges.map(({node}) => ({
-      content: node.html,
-      id: node.fields.slug.replace(/^.+\//, '').replace('.html', ''),
-      title: node.frontmatter.title,
-    }));
-
-    const marketing = data.marketing.edges.map(({node}) => ({
-      title: node.frontmatter.title,
-      content: node.html,
-    }));
-
-    this.state = {
-      code,
-      examples,
-      marketing,
-    };
-  }
+  state = {
+    babelLoaded: false
+  };
 
   componentDidMount() {
-    const {code, examples} = this.state;
-
-    examples.forEach(({id}) => {
-      renderExamplePlaceholder(id);
-    });
-
-    function mountCodeExamples() {
-      examples.forEach(({id}) => {
-        mountCodeExample(id, code[id]);
+    loadScript(babelURL).then(() => {
+      this.setState({
+        babelLoaded: true
       });
-    }
-
-    loadScript(babelURL).then(mountCodeExamples, error => {
+    }, error => {
       console.error('Babel failed to load.');
-
-      mountCodeExamples();
     });
   }
-
   render() {
-    const {examples, marketing} = this.state;
-    const {location} = this.props;
+    const {babelLoaded} = this.state;
+    const {data, location} = this.props;
+    const {examples, marketing} = data;
 
     return (
       <Layout location={location}>
@@ -217,7 +182,7 @@ class Home extends Component {
                       whiteSpace: 'nowrap',
                     },
                   }}>
-                  {marketing.map((column, index) => (
+                  {marketing.edges.map(({ node: column }, index) => (
                     <div
                       key={index}
                       css={{
@@ -266,9 +231,9 @@ class Home extends Component {
                             },
                           },
                         ]}>
-                        {column.title}
+                        {column.frontmatter.title}
                       </h3>
-                      <div dangerouslySetInnerHTML={{__html: column.content}} />
+                      <div dangerouslySetInnerHTML={{__html: column.html }} />
                     </div>
                   ))}
                 </div>
@@ -283,7 +248,7 @@ class Home extends Component {
               />
               <section css={sectionStyles}>
                 <div id="examples">
-                  {examples.map((example, index) => (
+                  {examples.edges.map(({ node }, index) => (
                     <div
                       key={index}
                       css={{
@@ -297,11 +262,12 @@ class Home extends Component {
                           marginTop: 80,
                         },
                       }}>
-                      <h3 css={headingStyles}>{example.title}</h3>
-                      <div
-                        dangerouslySetInnerHTML={{__html: example.content}}
-                      />
-                      <div id={example.id} />
+                      <CodeExample code={node.code} loaded={babelLoaded}>
+                        <h3 css={headingStyles}>{node.frontmatter.title}</h3>
+                        <div
+                          dangerouslySetInnerHTML={{__html: node.html}}
+                        />
+                      </CodeExample>
                     </div>
                   ))}
                 </div>
@@ -339,7 +305,6 @@ class Home extends Component {
 
 Home.propTypes = {
   data: PropTypes.shape({
-    code: PropTypes.object.isRequired,
     examples: PropTypes.object.isRequired,
     marketing: PropTypes.object.isRequired,
   }).isRequired,
@@ -382,22 +347,13 @@ const CtaItem = ({children, primary = false}) => (
 
 export const pageQuery = graphql`
   query IndexMarkdown {
-    code: allExampleCode {
-      edges {
-        node {
-          id
-          internal {
-            contentDigest
-          }
-        }
-      }
-    }
     examples: allMarkdownRemark(
       filter: {fileAbsolutePath: {regex: "//home/examples//"}}
       sort: {fields: [frontmatter___order], order: ASC}
     ) {
       edges {
         node {
+          code
           fields {
             slug
           }

From 9d6015a871c1a38fe84ae4bebb3d7a3a36cd7edb Mon Sep 17 00:00:00 2001
From: Dustin Schau <dustinschau@gmail.com>
Date: Fri, 28 Sep 2018 14:25:10 -0500
Subject: [PATCH 02/11] fix: refactor plugin to use source-filesystem and
 onCreateNode

---
 gatsby-config.js                              |  4 +-
 .../gatsby-node.js                            | 45 ++++++++++---------
 src/pages/index.js                            | 21 +++++++--
 3 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 7f4982aec..1b8d122eb 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -33,14 +33,14 @@ module.exports = {
     {
       resolve: 'gatsby-source-filesystem',
       options: {
-        path: `${__dirname}/src/pages`,
         name: 'pages',
+        path: `${__dirname}/src/pages`
       },
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
-        name: 'packages',
+        name: 'content',
         path: `${__dirname}/content/`,
       },
     },
diff --git a/plugins/gatsby-transformer-home-example-code/gatsby-node.js b/plugins/gatsby-transformer-home-example-code/gatsby-node.js
index e8d813313..172ea06f8 100644
--- a/plugins/gatsby-transformer-home-example-code/gatsby-node.js
+++ b/plugins/gatsby-transformer-home-example-code/gatsby-node.js
@@ -1,28 +1,29 @@
-const {readdirSync, readFileSync} = require('fs');
-const {join, resolve} = require('path');
+const crypto = require(`crypto`)
+
+// docblock goes here
+const createContentDigest = obj => crypto
+  .createHash(`md5`)
+  .update(obj)
+  .digest(`hex`)
 
 // Store code snippets in GraphQL for the home page examples.
 // Snippets will be matched with markdown templates of the same name.
-exports.sourceNodes = ({graphql, actions}) => {
+exports.onCreateNode = async ({node, loadNodeContent, actions}) => {
   const {createNode} = actions;
+  const {absolutePath, ext, name, relativeDirectory, sourceInstanceName} = node
 
-  const path = resolve(__dirname, '../../content/home/examples');
-  const files = readdirSync(path);
-
-  files.forEach(file => {
-    if (file.match(/\.js$/)) {
-      const code = readFileSync(join(path, file), 'utf8');
-      const id = file.replace(/\.js$/, '');
-
-      createNode({
-        id,
-        children: [],
-        parent: 'EXAMPLES',
-        internal: {
-          type: 'ExampleCode',
-          contentDigest: JSON.stringify(code),
-        },
-      });
-    }
-  });
+  if (sourceInstanceName === 'content' && relativeDirectory === 'home/examples' && ext === '.js') {
+    const code = await loadNodeContent(node);
+    createNode({
+      id: name,
+      children: [],
+      parent: 'EXAMPLES',
+      code,
+      mdAbsolutePath: absolutePath.replace(/\.js$/, '.md'),
+      internal: {
+        type: 'ExampleCode',
+        contentDigest: createContentDigest(JSON.stringify(code)),
+      },
+    });
+  }
 };
diff --git a/src/pages/index.js b/src/pages/index.js
index c0bf8fc15..b4fade2be 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -37,7 +37,12 @@ class Home extends Component {
   render() {
     const {babelLoaded} = this.state;
     const {data, location} = this.props;
-    const {examples, marketing} = data;
+    const {codeExamples, examples, marketing} = data;
+
+    const code = codeExamples.edges.reduce((lookup, { node }) => {
+      lookup[node.mdAbsolutePath] = node.code;
+      return lookup;
+    }, {});
 
     return (
       <Layout location={location}>
@@ -262,7 +267,7 @@ class Home extends Component {
                           marginTop: 80,
                         },
                       }}>
-                      <CodeExample code={node.code} loaded={babelLoaded}>
+                      <CodeExample code={code[node.fileAbsolutePath]} loaded={babelLoaded}>
                         <h3 css={headingStyles}>{node.frontmatter.title}</h3>
                         <div
                           dangerouslySetInnerHTML={{__html: node.html}}
@@ -347,13 +352,23 @@ const CtaItem = ({children, primary = false}) => (
 
 export const pageQuery = graphql`
   query IndexMarkdown {
+    codeExamples: allExampleCode {
+      edges {
+        node {
+          id
+          code
+          mdAbsolutePath
+        }
+      }
+    }
+
     examples: allMarkdownRemark(
       filter: {fileAbsolutePath: {regex: "//home/examples//"}}
       sort: {fields: [frontmatter___order], order: ASC}
     ) {
       edges {
         node {
-          code
+          fileAbsolutePath
           fields {
             slug
           }

From fc0ef96fb6b0f2a185ae7ac5ba232cc5a8b24860 Mon Sep 17 00:00:00 2001
From: Dustin Schau <dustinschau@gmail.com>
Date: Fri, 28 Sep 2018 14:29:44 -0500
Subject: [PATCH 03/11] chore: minor tweaks and run prettier

---
 gatsby-config.js                              |  2 +-
 .../gatsby-node.js                            | 19 ++++---
 src/components/CodeEditor/CodeEditor.js       |  8 +--
 src/components/CodeExample/CodeExample.js     | 41 +++++++++-----
 src/pages/index.js                            | 53 ++++++++-----------
 src/utils/mountCodeExample.js                 | 36 -------------
 6 files changed, 69 insertions(+), 90 deletions(-)
 delete mode 100644 src/utils/mountCodeExample.js

diff --git a/gatsby-config.js b/gatsby-config.js
index 1b8d122eb..ed0799f34 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -34,7 +34,7 @@ module.exports = {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'pages',
-        path: `${__dirname}/src/pages`
+        path: `${__dirname}/src/pages`,
       },
     },
     {
diff --git a/plugins/gatsby-transformer-home-example-code/gatsby-node.js b/plugins/gatsby-transformer-home-example-code/gatsby-node.js
index 172ea06f8..d9659dfa9 100644
--- a/plugins/gatsby-transformer-home-example-code/gatsby-node.js
+++ b/plugins/gatsby-transformer-home-example-code/gatsby-node.js
@@ -1,18 +1,23 @@
-const crypto = require(`crypto`)
+const crypto = require(`crypto`);
 
 // docblock goes here
-const createContentDigest = obj => crypto
-  .createHash(`md5`)
-  .update(obj)
-  .digest(`hex`)
+const createContentDigest = obj =>
+  crypto
+    .createHash(`md5`)
+    .update(obj)
+    .digest(`hex`);
 
 // Store code snippets in GraphQL for the home page examples.
 // Snippets will be matched with markdown templates of the same name.
 exports.onCreateNode = async ({node, loadNodeContent, actions}) => {
   const {createNode} = actions;
-  const {absolutePath, ext, name, relativeDirectory, sourceInstanceName} = node
+  const {absolutePath, ext, name, relativeDirectory, sourceInstanceName} = node;
 
-  if (sourceInstanceName === 'content' && relativeDirectory === 'home/examples' && ext === '.js') {
+  if (
+    sourceInstanceName === 'content' &&
+    relativeDirectory === 'home/examples' &&
+    ext === '.js'
+  ) {
     const code = await loadNodeContent(node);
     createNode({
       id: name,
diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index b199af5ad..e5ebb80c1 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -65,8 +65,10 @@ class CodeEditor extends Component {
     }
 
     return (
-      <div css={{ flex: 1 }}>
-      <LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
+      <div css={{flex: 1}}>
+        <LiveProvider
+          code={showJSX ? code : compiledES6}
+          mountStylesheet={false}>
           <div
             css={{
               [media.greaterThan('medium')]: {
@@ -234,7 +236,7 @@ class CodeEditor extends Component {
               </div>
             )}
           </div>
-      </LiveProvider>
+        </LiveProvider>
       </div>
     );
   }
diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
index 39b40fc1b..7ee7360f4 100644
--- a/src/components/CodeExample/CodeExample.js
+++ b/src/components/CodeExample/CodeExample.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {colors, media} from 'theme';
 import CodeEditor from '../CodeEditor/CodeEditor';
 
@@ -7,16 +7,28 @@ class CodeExample extends Component {
     const {children, code, loaded} = this.props;
     return (
       <div
-      css={{
-        [media.greaterThan('xlarge')]: {
-          display: 'flex',
-          flexDirection: 'row',
-        },
+        css={{
+          marginTop: 40,
 
-        [media.lessThan('large')]: {
-          display: 'block',
-        },
-      }}>
+          '&:first-child': {
+            marginTop: 0,
+          },
+
+          [media.greaterThan('xlarge')]: {
+            marginTop: 80,
+          },
+        }}>
+        <div
+          css={{
+            [media.greaterThan('xlarge')]: {
+              display: 'flex',
+              flexDirection: 'row',
+            },
+
+            [media.lessThan('large')]: {
+              display: 'block',
+            },
+          }}>
           {children && (
             <div
               css={{
@@ -45,9 +57,14 @@ class CodeExample extends Component {
               {children}
             </div>
           )}
-          {loaded ? <CodeEditor code={code} /> : <h4>Loading code example...</h4>}
+          {loaded ? (
+            <CodeEditor code={code} />
+          ) : (
+            <h4>Loading code example...</h4>
+          )}
+        </div>
       </div>
-    )
+    );
   }
 }
 
diff --git a/src/pages/index.js b/src/pages/index.js
index b4fade2be..2d2aa93e4 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -22,24 +22,28 @@ import logoWhiteSvg from 'icons/logo-white.svg';
 
 class Home extends Component {
   state = {
-    babelLoaded: false
+    babelLoaded: false,
   };
 
   componentDidMount() {
-    loadScript(babelURL).then(() => {
-      this.setState({
-        babelLoaded: true
-      });
-    }, error => {
-      console.error('Babel failed to load.');
-    });
+    loadScript(babelURL).then(
+      () => {
+        this.setState({
+          babelLoaded: true,
+        });
+      },
+      error => {
+        console.error('Babel failed to load.');
+      },
+    );
   }
+
   render() {
     const {babelLoaded} = this.state;
     const {data, location} = this.props;
     const {codeExamples, examples, marketing} = data;
 
-    const code = codeExamples.edges.reduce((lookup, { node }) => {
+    const code = codeExamples.edges.reduce((lookup, {node}) => {
       lookup[node.mdAbsolutePath] = node.code;
       return lookup;
     }, {});
@@ -187,7 +191,7 @@ class Home extends Component {
                       whiteSpace: 'nowrap',
                     },
                   }}>
-                  {marketing.edges.map(({ node: column }, index) => (
+                  {marketing.edges.map(({node: column}, index) => (
                     <div
                       key={index}
                       css={{
@@ -238,7 +242,7 @@ class Home extends Component {
                         ]}>
                         {column.frontmatter.title}
                       </h3>
-                      <div dangerouslySetInnerHTML={{__html: column.html }} />
+                      <div dangerouslySetInnerHTML={{__html: column.html}} />
                     </div>
                   ))}
                 </div>
@@ -253,27 +257,14 @@ class Home extends Component {
               />
               <section css={sectionStyles}>
                 <div id="examples">
-                  {examples.edges.map(({ node }, index) => (
-                    <div
+                  {examples.edges.map(({node}, index) => (
+                    <CodeExample
                       key={index}
-                      css={{
-                        marginTop: 40,
-
-                        '&:first-child': {
-                          marginTop: 0,
-                        },
-
-                        [media.greaterThan('xlarge')]: {
-                          marginTop: 80,
-                        },
-                      }}>
-                      <CodeExample code={code[node.fileAbsolutePath]} loaded={babelLoaded}>
-                        <h3 css={headingStyles}>{node.frontmatter.title}</h3>
-                        <div
-                          dangerouslySetInnerHTML={{__html: node.html}}
-                        />
-                      </CodeExample>
-                    </div>
+                      code={code[node.fileAbsolutePath]}
+                      loaded={babelLoaded}>
+                      <h3 css={headingStyles}>{node.frontmatter.title}</h3>
+                      <div dangerouslySetInnerHTML={{__html: node.html}} />
+                    </CodeExample>
                   ))}
                 </div>
               </section>
diff --git a/src/utils/mountCodeExample.js b/src/utils/mountCodeExample.js
deleted file mode 100644
index 41c35eef8..000000000
--- a/src/utils/mountCodeExample.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * @emails react-core
- */
-
-import CodeEditor from '../components/CodeEditor';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-// TODO This is a huge hack.
-// Remark transform this template to split code examples and their targets apart.
-const mountCodeExample = (containerId, code) => {
-  const container = document.getElementById(containerId);
-  const parent = container.parentElement;
-
-  const children = Array.prototype.filter.call(
-    parent.children,
-    child => child !== container,
-  );
-  children.forEach(child => parent.removeChild(child));
-
-  const description = children
-    .map(child => child.outerHTML)
-    .join('')
-    .replace(/`([^`]+)`/g, '<code>$1</code>');
-
-  ReactDOM.render(
-    <CodeEditor code={code}>
-      {<div dangerouslySetInnerHTML={{__html: description}} />}
-    </CodeEditor>,
-    container,
-  );
-};
-
-export default mountCodeExample;

From 57cb7abde1aa304b3cba30480cdd8036790d3d0a Mon Sep 17 00:00:00 2001
From: Dustin Schau <dustinschau@gmail.com>
Date: Fri, 28 Sep 2018 14:32:36 -0500
Subject: [PATCH 04/11] chore: remove outer wrapper div

---
 src/components/CodeExample/CodeExample.js | 75 ++++++++++-------------
 1 file changed, 32 insertions(+), 43 deletions(-)

diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
index 7ee7360f4..24c1e1f8d 100644
--- a/src/components/CodeExample/CodeExample.js
+++ b/src/components/CodeExample/CodeExample.js
@@ -13,56 +13,45 @@ class CodeExample extends Component {
           '&:first-child': {
             marginTop: 0,
           },
-
           [media.greaterThan('xlarge')]: {
+            display: 'flex',
+            flexDirection: 'row',
             marginTop: 80,
           },
+
+          [media.lessThan('large')]: {
+            display: 'block',
+          },
         }}>
-        <div
-          css={{
-            [media.greaterThan('xlarge')]: {
-              display: 'flex',
-              flexDirection: 'row',
-            },
+        {children && (
+          <div
+            css={{
+              flex: '0 0 33%',
 
-            [media.lessThan('large')]: {
-              display: 'block',
-            },
-          }}>
-          {children && (
-            <div
-              css={{
-                flex: '0 0 33%',
+              [media.lessThan('xlarge')]: {
+                marginBottom: 20,
+              },
 
-                [media.lessThan('xlarge')]: {
-                  marginBottom: 20,
+              '& h3': {
+                color: colors.dark,
+                maxWidth: '11em',
+                paddingTop: 0,
+              },
+
+              '& p': {
+                marginTop: 15,
+                marginRight: 40,
+                lineHeight: 1.7,
+
+                [media.greaterThan('xlarge')]: {
+                  marginTop: 25,
                 },
-
-                '& h3': {
-                  color: colors.dark,
-                  maxWidth: '11em',
-                  paddingTop: 0,
-                },
-
-                '& p': {
-                  marginTop: 15,
-                  marginRight: 40,
-                  lineHeight: 1.7,
-
-                  [media.greaterThan('xlarge')]: {
-                    marginTop: 25,
-                  },
-                },
-              }}>
-              {children}
-            </div>
-          )}
-          {loaded ? (
-            <CodeEditor code={code} />
-          ) : (
-            <h4>Loading code example...</h4>
-          )}
-        </div>
+              },
+            }}>
+            {children}
+          </div>
+        )}
+        {loaded ? <CodeEditor code={code} /> : <h4>Loading code example...</h4>}
       </div>
     );
   }

From d83238caf0c9b85f9c789c9f743657c875192a91 Mon Sep 17 00:00:00 2001
From: Dustin Schau <dustinschau@gmail.com>
Date: Fri, 28 Sep 2018 14:52:17 -0500
Subject: [PATCH 05/11] feat: get hot reloading working for js code snippets

---
 plugins/gatsby-transformer-home-example-code/gatsby-node.js | 3 +--
 src/components/CodeEditor/CodeEditor.js                     | 4 ++++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/plugins/gatsby-transformer-home-example-code/gatsby-node.js b/plugins/gatsby-transformer-home-example-code/gatsby-node.js
index d9659dfa9..21a13eb11 100644
--- a/plugins/gatsby-transformer-home-example-code/gatsby-node.js
+++ b/plugins/gatsby-transformer-home-example-code/gatsby-node.js
@@ -1,6 +1,5 @@
 const crypto = require(`crypto`);
 
-// docblock goes here
 const createContentDigest = obj =>
   crypto
     .createHash(`md5`)
@@ -9,7 +8,7 @@ const createContentDigest = obj =>
 
 // Store code snippets in GraphQL for the home page examples.
 // Snippets will be matched with markdown templates of the same name.
-exports.onCreateNode = async ({node, loadNodeContent, actions}) => {
+exports.onCreateNode = async ({actions, node, loadNodeContent}) => {
   const {createNode} = actions;
   const {absolutePath, ext, name, relativeDirectory, sourceInstanceName} = node;
 
diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index e5ebb80c1..0704bfa78 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -35,6 +35,10 @@ class CodeEditor extends Component {
   componentDidUpdate(prevProps, prevState) {
     if (prevState.compiled !== this.state.compiled) {
       this._render();
+    } else if (this.props.code !== prevProps.code) {
+      this.setState({
+        code: this.props.code,
+      });
     }
   }
 

From 169754fb1bf461026c029b2f71234e3d2dfae153 Mon Sep 17 00:00:00 2001
From: Dustin Schau <dustinschau@gmail.com>
Date: Fri, 28 Sep 2018 14:54:26 -0500
Subject: [PATCH 06/11] refactor: tweak to use the _updateState method

---
 src/components/CodeEditor/CodeEditor.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 0704bfa78..28e1a2098 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -36,9 +36,7 @@ class CodeEditor extends Component {
     if (prevState.compiled !== this.state.compiled) {
       this._render();
     } else if (this.props.code !== prevProps.code) {
-      this.setState({
-        code: this.props.code,
-      });
+      this.setState(this._updateState(this.props.code));
     }
   }
 

From 251ef1e752569a4927ec46cbbdcc9e58b57caded Mon Sep 17 00:00:00 2001
From: Dustin Schau <dustinschau@gmail.com>
Date: Fri, 28 Sep 2018 17:59:06 -0500
Subject: [PATCH 07/11] fix: fix the parent node issue :tada:

---
 plugins/gatsby-transformer-home-example-code/gatsby-node.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/gatsby-transformer-home-example-code/gatsby-node.js b/plugins/gatsby-transformer-home-example-code/gatsby-node.js
index 21a13eb11..5965a3ba7 100644
--- a/plugins/gatsby-transformer-home-example-code/gatsby-node.js
+++ b/plugins/gatsby-transformer-home-example-code/gatsby-node.js
@@ -21,7 +21,7 @@ exports.onCreateNode = async ({actions, node, loadNodeContent}) => {
     createNode({
       id: name,
       children: [],
-      parent: 'EXAMPLES',
+      parent: node.id,
       code,
       mdAbsolutePath: absolutePath.replace(/\.js$/, '.md'),
       internal: {

From 12c43455e77145fbc3f86636a6da96c0a69fd196 Mon Sep 17 00:00:00 2001
From: Dustin Schau <dustinschau@gmail.com>
Date: Fri, 28 Sep 2018 18:04:02 -0500
Subject: [PATCH 08/11] chore: add prop-types validation to code example

---
 src/components/CodeExample/CodeExample.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
index 24c1e1f8d..05968a9fd 100644
--- a/src/components/CodeExample/CodeExample.js
+++ b/src/components/CodeExample/CodeExample.js
@@ -1,4 +1,6 @@
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
 import {colors, media} from 'theme';
 import CodeEditor from '../CodeEditor/CodeEditor';
 
@@ -57,4 +59,10 @@ class CodeExample extends Component {
   }
 }
 
+CodeExample.propTypes = {
+  children: PropTypes.node,
+  code: PropTypes.string.isRequired,
+  loaded: PropTypes.bool.isRequired
+};
+
 export default CodeExample;

From 6e2340d1411733568fc00f97f63847dd4db9c25a Mon Sep 17 00:00:00 2001
From: Dustin Schau <dustinschau@gmail.com>
Date: Fri, 28 Sep 2018 18:07:01 -0500
Subject: [PATCH 09/11] style: run prettier

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

diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
index 05968a9fd..2ee9fb977 100644
--- a/src/components/CodeExample/CodeExample.js
+++ b/src/components/CodeExample/CodeExample.js
@@ -62,7 +62,7 @@ class CodeExample extends Component {
 CodeExample.propTypes = {
   children: PropTypes.node,
   code: PropTypes.string.isRequired,
-  loaded: PropTypes.bool.isRequired
+  loaded: PropTypes.bool.isRequired,
 };
 
 export default CodeExample;

From e855f5f50309ac19d679cb8e6c1c7a77cb7b81d5 Mon Sep 17 00:00:00 2001
From: Dustin Schau <dustinschau@gmail.com>
Date: Fri, 28 Sep 2018 18:12:49 -0500
Subject: [PATCH 10/11] chore: rearrange import order

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

diff --git a/src/pages/index.js b/src/pages/index.js
index 2d2aa93e4..1b697cec8 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -13,8 +13,8 @@ import React, {Component} from 'react';
 import {graphql} from 'gatsby';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import Layout from 'components/Layout';
-import loadScript from 'utils/loadScript';
 import {colors, media, sharedStyles} from 'theme';
+import loadScript from 'utils/loadScript';
 import createOgUrl from 'utils/createOgUrl';
 import {babelURL} from 'site-constants';
 import ReactDOM from 'react-dom';

From 3954cfe6f3d2a5e853b862e592ad0eed2fc768d1 Mon Sep 17 00:00:00 2001
From: Dustin Schau <dustinschau@gmail.com>
Date: Fri, 28 Sep 2018 20:39:43 -0500
Subject: [PATCH 11/11] fix: address PR feedback (thanks @bvaughn!)

---
 src/components/CodeEditor/CodeEditor.js   | 301 +++++++++++-----------
 src/components/CodeExample/CodeExample.js |   9 +-
 src/pages/index.js                        |  24 +-
 3 files changed, 171 insertions(+), 163 deletions(-)

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 28e1a2098..9c1aab34e 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -35,8 +35,12 @@ class CodeEditor extends Component {
   componentDidUpdate(prevProps, prevState) {
     if (prevState.compiled !== this.state.compiled) {
       this._render();
-    } else if (this.props.code !== prevProps.code) {
-      this.setState(this._updateState(this.props.code));
+    }
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.code !== nextProps.code) {
+      this.setState(this._updateState(nextProps.code));
     }
   }
 
@@ -67,179 +71,174 @@ class CodeEditor extends Component {
     }
 
     return (
-      <div css={{flex: 1}}>
-        <LiveProvider
-          code={showJSX ? code : compiledES6}
-          mountStylesheet={false}>
+      <LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
+        <div
+          css={{
+            [media.greaterThan('medium')]: {
+              display: 'flex',
+              alignItems: 'stretch',
+              flexDirection: 'row',
+            },
+
+            [media.lessThan('small')]: {
+              display: 'block',
+            },
+          }}>
           <div
             css={{
-              [media.greaterThan('medium')]: {
-                flex: '0 0 67%',
-                display: 'flex',
-                alignItems: 'stretch',
-                flexDirection: 'row',
-              },
+              flex: '0 0 70%',
+              overflow: 'hidden',
+              borderRadius: '10px 0 0 10px',
 
-              [media.lessThan('small')]: {
-                display: 'block',
+              [media.lessThan('medium')]: {
+                borderRadius: '10px 10px 0 0',
               },
             }}>
             <div
               css={{
-                flex: '0 0 70%',
+                padding: '0px 10px',
+                background: colors.darker,
+                color: colors.white,
+              }}>
+              <MetaTitle onDark={true}>
+                Live JSX Editor
+                <label
+                  css={{
+                    fontSize: 14,
+                    float: 'right',
+                    cursor: 'pointer',
+                  }}>
+                  <input
+                    checked={this.state.showJSX}
+                    onChange={event =>
+                      this.setState({showJSX: event.target.checked})
+                    }
+                    type="checkbox"
+                  />{' '}
+                  JSX?
+                </label>
+              </MetaTitle>
+            </div>
+            <div
+              css={{
+                height: '100%',
+                width: '100%',
+                borderRadius: '0',
+                maxHeight: '340px !important',
+                marginTop: '0 !important',
+                marginLeft: '0 !important',
+                paddingLeft: '0 !important',
+                marginRight: '0 !important',
+                paddingRight: '0 !important',
+                marginBottom: '0 !important',
+                paddingBottom: '20px !important',
+                [media.lessThan('medium')]: {
+                  marginBottom: '0 !important',
+                },
+
+                '& pre.prism-code[contenteditable]': {
+                  outline: 0,
+                  overflow: 'auto',
+                  marginRight: '0 !important',
+                  marginBottom: '0 !important',
+                },
+              }}
+              className="gatsby-highlight">
+              <LiveEditor ignoreTabKey={true} onChange={this._onChange} />
+            </div>
+          </div>
+          {error && (
+            <div
+              css={{
+                flex: '0 0 30%',
                 overflow: 'hidden',
-                borderRadius: '10px 0 0 10px',
+                border: `1px solid ${colors.error}`,
+                borderRadius: '0 10px 10px 0',
+                fontSize: 12,
+                lineHeight: 1.5,
 
                 [media.lessThan('medium')]: {
-                  borderRadius: '10px 10px 0 0',
+                  borderRadius: '0 0 10px 10px',
                 },
               }}>
               <div
                 css={{
                   padding: '0px 10px',
-                  background: colors.darker,
+                  background: colors.error,
                   color: colors.white,
                 }}>
-                <MetaTitle onDark={true}>
-                  Live JSX Editor
-                  <label
-                    css={{
-                      fontSize: 14,
-                      float: 'right',
-                      cursor: 'pointer',
-                    }}>
-                    <input
-                      checked={this.state.showJSX}
-                      onChange={event =>
-                        this.setState({showJSX: event.target.checked})
-                      }
-                      type="checkbox"
-                    />{' '}
-                    JSX?
-                  </label>
-                </MetaTitle>
-              </div>
-              <div
-                css={{
-                  height: '100%',
-                  width: '100%',
-                  borderRadius: '0',
-                  maxHeight: '340px !important',
-                  marginTop: '0 !important',
-                  marginLeft: '0 !important',
-                  paddingLeft: '0 !important',
-                  marginRight: '0 !important',
-                  paddingRight: '0 !important',
-                  marginBottom: '0 !important',
-                  paddingBottom: '20px !important',
-                  [media.lessThan('medium')]: {
-                    marginBottom: '0 !important',
-                  },
-
-                  '& pre.prism-code[contenteditable]': {
-                    outline: 0,
-                    overflow: 'auto',
-                    marginRight: '0 !important',
-                    marginBottom: '0 !important',
-                  },
-                }}
-                className="gatsby-highlight">
-                <LiveEditor ignoreTabKey={true} onChange={this._onChange} />
-              </div>
-            </div>
-            {error && (
-              <div
-                css={{
-                  flex: '0 0 30%',
-                  overflow: 'hidden',
-                  border: `1px solid ${colors.error}`,
-                  borderRadius: '0 10px 10px 0',
-                  fontSize: 12,
-                  lineHeight: 1.5,
-
-                  [media.lessThan('medium')]: {
-                    borderRadius: '0 0 10px 10px',
-                  },
-                }}>
-                <div
-                  css={{
-                    padding: '0px 10px',
-                    background: colors.error,
+                <MetaTitle
+                  cssProps={{
                     color: colors.white,
                   }}>
-                  <MetaTitle
-                    cssProps={{
-                      color: colors.white,
-                    }}>
-                    Error
-                  </MetaTitle>
-                </div>
-                <pre
-                  css={{
-                    whiteSpace: 'pre-wrap',
-                    wordBreak: 'break-word',
-                    color: colors.error,
-                    padding: 10,
-                  }}>
-                  {errorMessage}
-                </pre>
+                  Error
+                </MetaTitle>
               </div>
-            )}
-            {!error && (
+              <pre
+                css={{
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-word',
+                  color: colors.error,
+                  padding: 10,
+                }}>
+                {errorMessage}
+              </pre>
+            </div>
+          )}
+          {!error && (
+            <div
+              css={{
+                flex: '0 0 30%',
+                overflow: 'hidden',
+                border: `1px solid ${colors.divider}`,
+                borderRadius: '0 10px 10px 0',
+
+                [media.lessThan('medium')]: {
+                  borderRadius: '0 0 10px 10px',
+                },
+              }}>
               <div
                 css={{
-                  flex: '0 0 30%',
-                  overflow: 'hidden',
-                  border: `1px solid ${colors.divider}`,
-                  borderRadius: '0 10px 10px 0',
-
-                  [media.lessThan('medium')]: {
-                    borderRadius: '0 0 10px 10px',
-                  },
+                  padding: '0 10px',
+                  backgroundColor: colors.divider,
                 }}>
-                <div
-                  css={{
-                    padding: '0 10px',
-                    backgroundColor: colors.divider,
-                  }}>
-                  <MetaTitle>Result</MetaTitle>
-                </div>
-                <div
-                  css={{
-                    padding: 10,
-                    maxHeight: '340px !important',
-                    overflow: 'auto',
-
-                    '& input': {
-                      width: '100%',
-                      display: 'block',
-                      border: '1px solid #ccc', // TODO
-                      padding: 5,
-                    },
-
-                    '& button': {
-                      marginTop: 10,
-                      padding: '5px 10px',
-                    },
-
-                    '& label': {
-                      display: 'block',
-                      marginTop: 10,
-                    },
-
-                    '& textarea': {
-                      width: '100%',
-                      height: 60,
-                      padding: 5,
-                    },
-                  }}
-                  ref={this._setMountRef}
-                />
+                <MetaTitle>Result</MetaTitle>
               </div>
-            )}
-          </div>
-        </LiveProvider>
-      </div>
+              <div
+                css={{
+                  padding: 10,
+                  maxHeight: '340px !important',
+                  overflow: 'auto',
+
+                  '& input': {
+                    width: '100%',
+                    display: 'block',
+                    border: '1px solid #ccc', // TODO
+                    padding: 5,
+                  },
+
+                  '& button': {
+                    marginTop: 10,
+                    padding: '5px 10px',
+                  },
+
+                  '& label': {
+                    display: 'block',
+                    marginTop: 10,
+                  },
+
+                  '& textarea': {
+                    width: '100%',
+                    height: 60,
+                    padding: 5,
+                  },
+                }}
+                ref={this._setMountRef}
+              />
+            </div>
+          )}
+        </div>
+      </LiveProvider>
     );
   }
 
diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
index 2ee9fb977..31fe7e2c6 100644
--- a/src/components/CodeExample/CodeExample.js
+++ b/src/components/CodeExample/CodeExample.js
@@ -6,15 +6,21 @@ import CodeEditor from '../CodeEditor/CodeEditor';
 
 class CodeExample extends Component {
   render() {
-    const {children, code, loaded} = this.props;
+    const {children, code, id, loaded} = this.props;
     return (
       <div
+        id={id}
         css={{
           marginTop: 40,
 
           '&:first-child': {
             marginTop: 0,
           },
+
+          '& .react-live': {
+            width: '100%',
+          },
+
           [media.greaterThan('xlarge')]: {
             display: 'flex',
             flexDirection: 'row',
@@ -29,7 +35,6 @@ class CodeExample extends Component {
           <div
             css={{
               flex: '0 0 33%',
-
               [media.lessThan('xlarge')]: {
                 marginBottom: 20,
               },
diff --git a/src/pages/index.js b/src/pages/index.js
index 1b697cec8..786e37336 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -44,7 +44,7 @@ class Home extends Component {
     const {codeExamples, examples, marketing} = data;
 
     const code = codeExamples.edges.reduce((lookup, {node}) => {
-      lookup[node.mdAbsolutePath] = node.code;
+      lookup[node.mdAbsolutePath] = node;
       return lookup;
     }, {});
 
@@ -257,15 +257,19 @@ class Home extends Component {
               />
               <section css={sectionStyles}>
                 <div id="examples">
-                  {examples.edges.map(({node}, index) => (
-                    <CodeExample
-                      key={index}
-                      code={code[node.fileAbsolutePath]}
-                      loaded={babelLoaded}>
-                      <h3 css={headingStyles}>{node.frontmatter.title}</h3>
-                      <div dangerouslySetInnerHTML={{__html: node.html}} />
-                    </CodeExample>
-                  ))}
+                  {examples.edges.map(({node}, index) => {
+                    const snippet = code[node.fileAbsolutePath];
+                    return (
+                      <CodeExample
+                        key={index}
+                        id={snippet.id}
+                        code={snippet.code}
+                        loaded={babelLoaded}>
+                        <h3 css={headingStyles}>{node.frontmatter.title}</h3>
+                        <div dangerouslySetInnerHTML={{__html: node.html}} />
+                      </CodeExample>
+                    );
+                  })}
                 </div>
               </section>
             </div>