gatsby-remark-codepen-examples supports 'directory' option

Author: bvaughn

gatsby-config.js

@@ -56,7 +56,12 @@ module.exports = {
             },
           },
           'gatsby-remark-autolink-headers',
-          'gatsby-remark-codepen-examples',
+          {
+            resolve: 'gatsby-remark-codepen-examples',
+            options: {
+              directory: 'examples',
+            },
+          },
           'gatsby-remark-use-jsx',
           {
             resolve: 'gatsby-remark-prismjs',

gatsby-node.js

@@ -171,7 +171,7 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
   // Create Codepen redirects.
   // These use the Codepen prefill API to JIT-create Pens.
   // https://blog.codepen.io/documentation/api/prefill/
-  const files = await recursiveReaddir('./codepen');
+  const files = await recursiveReaddir('./examples');
   files.forEach(file => {
     const slug = file.substring(0, file.length - 3); // Trim extension
     const code = readFileSync(file, 'utf8');

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

@@ -6,15 +6,23 @@ const CODEPEN_PROTOCOL = 'codepen://';
 const DEFAULT_LINK_TEXT = 'Try it on CodePen';
 
 // TODO target="_blank"
-module.exports = ({markdownAST}) => {
+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="/codepen/introducing-jsx" target="_blank">Try it on CodePen</a>
+    // 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="/codepen/hello-world" target="_blank">Try the Hello World example on CodePen</a>
+    // 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, '/codepen/');
+      const href = node.url.replace(CODEPEN_PROTOCOL, `${directory}`);
       const text =
         node.children.length === 0 ? DEFAULT_LINK_TEXT : node.children[0].value;