WIP upgrade to new gatsby-remark-code-repls

gatsby-config.js

@@ -6,6 +6,8 @@
 
 'use strict';
 
+const {join} = require('path');
+
 module.exports = {
   siteMetadata: {
     title: 'React: A JavaScript library for building user interfaces',
@@ -57,15 +59,12 @@ module.exports = {
           },
           'gatsby-remark-autolink-headers',
           {
-            resolve: 'gatsby-remark-codepen-examples',
+            resolve: 'gatsby-remark-code-repls',
             options: {
-              directory: 'examples',
-            },
-          },
-          {
-            resolve: 'gatsby-remark-babel-repl-link',
-            options: {
-              directory: 'examples',
+              defaultText: 'Try it on CodePen',
+              directory: `${__dirname}/examples/`,
+              redirectTemplate: `${__dirname}/src/templates/codepen-example.js`,
+              target: '_blank',
             },
           },
           'gatsby-remark-use-jsx',

gatsby-node.js

@@ -167,24 +167,6 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
     redirectInBrowser: true,
     toPath: newestBlogNode.fields.slug,
   });
-
-  // Create Codepen redirects.
-  // These use the Codepen prefill API to JIT-create Pens.
-  // https://blog.codepen.io/documentation/api/prefill/
-  const files = await recursiveReaddir('./examples');
-  files.forEach(file => {
-    const slug = file.substring(0, file.length - 3); // Trim extension
-    const code = readFileSync(file, 'utf8');
-
-    createPage({
-      path: slug,
-      component: resolve('./src/templates/codepen-example.js'),
-      context: {
-        code,
-        slug,
-      },
-    });
-  });
 };
 
 // Parse date information out of blog post filename.

plugins/gatsby-remark-babel-repl-link/index.js

@@ -1,68 +0,0 @@
-const {existsSync, readFileSync} = require('fs');
-const LZString = require('lz-string');
-const {join} = require('path');
-const map = require('unist-util-map');
-
-const PROTOCOL = 'babel-repl://';
-
-// Matches compression used in Babel REPL
-// https://github.com/babel/website/blob/master/js/repl/UriUtils.js
-const compress = string =>
-  LZString.compressToBase64(string)
-    .replace(/\+/g, '-') // Convert '+' to '-'
-    .replace(/\//g, '_') // Convert '/' to '_'
-    .replace(/=+$/, ''); // Remove ending '='
-
-module.exports = ({markdownAST}, {directory}) => {
-  map(markdownAST, (node, index, parent) => {
-    if (!directory.endsWith('/')) {
-      directory += '/';
-    }
-
-    if (node.type === 'link' && node.url.startsWith(PROTOCOL)) {
-      let filePath = node.url.replace(PROTOCOL, directory);
-      if (!filePath.endsWith('.js')) {
-        filePath += '.js';
-      }
-      filePath = join(__dirname, '../..', filePath);
-
-      // Verify that the specified example file exists.
-      if (!existsSync(filePath)) {
-        console.error(
-          `Invalid Babel REPL link specified; no such file "${filePath}"`,
-        );
-        process.exit(1);
-      }
-
-      const code = compress(readFileSync(filePath, 'utf8'));
-      const href = `https://babeljs.io/repl/#?presets=react&code_lz=${code}`;
-      const text = node.children[0].value;
-
-      const anchorOpenNode = {
-        type: 'html',
-        value: `<a href="${href}" target="_blank">`,
-      };
-
-      const textNode = {
-        type: 'text',
-        value: text,
-      };
-
-      const anchorCloseNode = {
-        type: 'html',
-        value: '</a>',
-      };
-
-      parent.children.splice(
-        index,
-        1,
-        anchorOpenNode,
-        textNode,
-        anchorCloseNode,
-      );
-    }
-
-    // No change
-    return node;
-  });
-};

plugins/gatsby-remark-babel-repl-link/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "gatsby-remark-babel-repl-link",
-  "version": "0.0.1"
-}

plugins/gatsby-remark-codepen-examples/index.js

@@ -1,64 +0,0 @@
-const {existsSync} = require('fs');
-const {join} = require('path');
-const map = require('unist-util-map');
-
-const CODEPEN_PROTOCOL = 'codepen://';
-const DEFAULT_LINK_TEXT = 'Try it on CodePen';
-
-module.exports = ({markdownAST}, {directory}) => {
-  map(markdownAST, (node, index, parent) => {
-    if (!directory.startsWith('/')) {
-      directory = `/${directory}`;
-    }
-
-    if (!directory.endsWith('/')) {
-      directory = `${directory}/`;
-    }
-
-    // eg convert
-    // from: [](codepen:introducing-jsx)
-    // to: <a href="/<directory>/introducing-jsx" target="_blank">Try it on CodePen</a>
-    // from: [Try the Hello World example on CodePen](codepen:hello-world)
-    // to: <a href="/<directory>/hello-world" target="_blank">Try the Hello World example on CodePen</a>
-    if (node.type === 'link' && node.url.startsWith(CODEPEN_PROTOCOL)) {
-      const href = node.url.replace(CODEPEN_PROTOCOL, directory);
-      const text =
-        node.children.length === 0 ? DEFAULT_LINK_TEXT : node.children[0].value;
-
-      // Verify that the specified example file exists.
-      const filePath = join(__dirname, `../../${href}.js`);
-      if (!existsSync(filePath)) {
-        console.error(
-          `Invalid Codepen link specified; no such file "${filePath}"`,
-        );
-        process.exit(1);
-      }
-
-      const anchorOpenNode = {
-        type: 'html',
-        value: `<a href="${href}" target="_blank">`,
-      };
-
-      const textNode = {
-        type: 'text',
-        value: text,
-      };
-
-      const anchorCloseNode = {
-        type: 'html',
-        value: '</a>',
-      };
-
-      parent.children.splice(
-        index,
-        1,
-        anchorOpenNode,
-        textNode,
-        anchorCloseNode,
-      );
-    }
-
-    // No change
-    return node;
-  });
-};

plugins/gatsby-remark-codepen-examples/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "gatsby-remark-codepen-examples",
-  "version": "0.0.1"
-}

src/templates/codepen-example.js

@@ -34,17 +34,7 @@ class CodepenExample extends Component {
   }
 
   render() {
-    // Codepen configuration.
-    // https://blog.codepen.io/documentation/api/prefill/
-    const payload = JSON.stringify({
-      editors: '0010',
-      html: '<div id="root"></div>',
-      js: this.props.pathContext.code,
-      js_external: EXTERNALS.join(';'),
-      js_pre_processor: 'babel',
-      layout: 'left',
-      title: 'reactjs.org example',
-    });
+    const { action, payload } = this.props.pathContext
 
     return (
       <Container>
@@ -54,7 +44,7 @@ class CodepenExample extends Component {
           ref={form => {
             this.codepenForm = form;
           }}
-          action="https://codepen.io/pen/define"
+          action={action}
           method="POST">
           <input type="hidden" name="data" value={payload} />