chore: minor tweaks and run prettier

gatsby-config.js

@@ -34,7 +34,7 @@ module.exports = {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'pages',
-        path: `${__dirname}/src/pages`
+        path: `${__dirname}/src/pages`,
       },
     },
     {

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,

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>
     );
   }

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>
-    )
+    );
   }
 }
 

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>

src/utils/mountCodeExample.js

@@ -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;