diff --git a/gatsby-config.js b/gatsby-config.js index 35a5bf44..78d7fc5a 100644 --- a/gatsby-config.js +++ b/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', - options: { - directory: 'examples', - }, - }, - { - resolve: 'gatsby-remark-babel-repl-link', + resolve: 'gatsby-remark-code-repls', options: { - directory: 'examples', + defaultText: 'Try it on CodePen', + directory: `${__dirname}/examples/`, + redirectTemplate: `${__dirname}/src/templates/codepen-example.js`, + target: '_blank', }, }, 'gatsby-remark-use-jsx', diff --git a/gatsby-node.js b/gatsby-node.js index ca812c78..41c5becb 100644 --- a/gatsby-node.js +++ b/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. diff --git a/plugins/gatsby-remark-babel-repl-link/index.js b/plugins/gatsby-remark-babel-repl-link/index.js deleted file mode 100644 index e3f13e20..00000000 --- a/plugins/gatsby-remark-babel-repl-link/index.js +++ /dev/null @@ -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: ``, - }; - - const textNode = { - type: 'text', - value: text, - }; - - const anchorCloseNode = { - type: 'html', - value: '', - }; - - parent.children.splice( - index, - 1, - anchorOpenNode, - textNode, - anchorCloseNode, - ); - } - - // No change - return node; - }); -}; diff --git a/plugins/gatsby-remark-babel-repl-link/package.json b/plugins/gatsby-remark-babel-repl-link/package.json deleted file mode 100644 index a0318cc5..00000000 --- a/plugins/gatsby-remark-babel-repl-link/package.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "gatsby-remark-babel-repl-link", - "version": "0.0.1" -} \ No newline at end of file diff --git a/plugins/gatsby-remark-codepen-examples/index.js b/plugins/gatsby-remark-codepen-examples/index.js deleted file mode 100644 index 7e4ff332..00000000 --- a/plugins/gatsby-remark-codepen-examples/index.js +++ /dev/null @@ -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: Try it on CodePen - // from: [Try the Hello World example on CodePen](codepen:hello-world) - // to: Try the Hello World example on CodePen - 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: ``, - }; - - const textNode = { - type: 'text', - value: text, - }; - - const anchorCloseNode = { - type: 'html', - value: '', - }; - - parent.children.splice( - index, - 1, - anchorOpenNode, - textNode, - anchorCloseNode, - ); - } - - // No change - return node; - }); -}; diff --git a/plugins/gatsby-remark-codepen-examples/package.json b/plugins/gatsby-remark-codepen-examples/package.json deleted file mode 100644 index f6017a58..00000000 --- a/plugins/gatsby-remark-codepen-examples/package.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "gatsby-remark-codepen-examples", - "version": "0.0.1" -} \ No newline at end of file diff --git a/src/templates/codepen-example.js b/src/templates/codepen-example.js index 615b8f7e..da278db5 100644 --- a/src/templates/codepen-example.js +++ b/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: '
', - 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 ( @@ -54,7 +44,7 @@ class CodepenExample extends Component { ref={form => { this.codepenForm = form; }} - action="https://codepen.io/pen/define" + action={action} method="POST">