From 64e0aade1ef68e624adefcfcb25afe9582b0fd70 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Mon, 6 Nov 2017 13:44:45 +0000
Subject: [PATCH] Refactor Codepen payload a little

---
 gatsby-node.js                   |  9 +++------
 src/templates/codepen-example.js | 23 ++++++++++++++---------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/gatsby-node.js b/gatsby-node.js
index 0003ccb70..b43387127 100644
--- a/gatsby-node.js
+++ b/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,
-        },
       },
     });
   });
diff --git a/src/templates/codepen-example.js b/src/templates/codepen-example.js
index 7079cc537..117682baf 100644
--- a/src/templates/codepen-example.js
+++ b/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}