Refactor Codepen payload a little

gatsby-node.js

@@ -167,20 +167,17 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
     toPath: newestBlogNode.fields.slug,
   });
 
-  // Create Codepen example pages
+  // Create Codepen example pages.
   fs.readdirSync('./examples').forEach(file => {
     const slug = file.substring(0, file.length - 3); // Trim extension
-    const jsTemplate = fs.readFileSync(`./examples/${file}`, 'utf8');
+    const code = fs.readFileSync(`./examples/${file}`, 'utf8');
 
     createPage({
       path: `/examples/${slug}`,
       component: resolve('./src/templates/codepen-example.js'),
       context: {
+        code,
         slug,
-        payload: {
-          html: '<div id="root"></div>',
-          js: jsTemplate,
-        },
       },
     });
   });

src/templates/codepen-example.js

@@ -3,7 +3,11 @@
 import React, {Component} from 'react';
 import Container from 'components/Container';
 import {colors} from 'theme';
-// import {version} from '../site-constants';
+
+const EXTERNALS = [
+  'https://unpkg.com/react/umd/react.development.js',
+  'https://unpkg.com/react-dom/umd/react-dom.development.js',
+];
 
 // Copied over styles from ButtonLink for the submit btn
 const primaryStyle = {
@@ -30,13 +34,14 @@ class CodepenExample extends Component {
   }
 
   render() {
-    const {payload} = this.props.pathContext;
-    // Set codepen options
-    payload.js_pre_processor = 'babel';
-    // Only have the JS editor open (default for all examples)
-    payload.editors = '0010';
-    // We can pass @version in the URL for version locking, if desired.
-    payload.js_external = `https://unpkg.com/react/umd/react.development.js;https://unpkg.com/react-dom/umd/react-dom.development.js`;
+    // Codepen configuration
+    const payload = JSON.stringify({
+      editors: '0010', // Open JS editor by default
+      html: '<div id="root"></div>',
+      js: this.props.pathContext.code,
+      js_external: EXTERNALS.join(';'),
+      js_pre_processor: 'babel',
+    });
 
     return (
       <Container>
@@ -48,7 +53,7 @@ class CodepenExample extends Component {
           }}
           action="https://codepen.io/pen/define"
           method="POST">
-          <input type="hidden" name="data" value={JSON.stringify(payload)} />
+          <input type="hidden" name="data" value={payload} />
 
           <input
             style={primaryStyle}