fix: address PR feedback (thanks @bvaughn!)

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,14 +71,10 @@ 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')]: {
-                flex: '0 0 67%',
               display: 'flex',
               alignItems: 'stretch',
               flexDirection: 'row',
@@ -239,7 +239,6 @@ class CodeEditor extends Component {
           )}
         </div>
       </LiveProvider>
-      </div>
     );
   }
 

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,
               },

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) => (
+                  {examples.edges.map(({node}, index) => {
+                    const snippet = code[node.fileAbsolutePath];
+                    return (
                       <CodeExample
                         key={index}
-                      code={code[node.fileAbsolutePath]}
+                        id={snippet.id}
+                        code={snippet.code}
                         loaded={babelLoaded}>
                         <h3 css={headingStyles}>{node.frontmatter.title}</h3>
                         <div dangerouslySetInnerHTML={{__html: node.html}} />
                       </CodeExample>
-                  ))}
+                    );
+                  })}
                 </div>
               </section>
             </div>