New plug-in added: gatsby-remark-code-repls (gatsbyjs#2848)

* Added gatsby-remark-code-repls plugin with Babel REPL support

* Added Codepen support to Remark transform

* DRYed Remark tests a little

* Removed unused test-fixtures folder

* Added another test for directory option to remark tests

* Added gatsby-remark-code-repls/gatsby-node and tests. Refactored files and tests to share constants.

* Added some additional options, docs, and tests

* Removed built source from repo

* Fixed API named params issue discovered while testing

* Fixed more edge cases discovered while testing integration

* Reverted accidental change to packages/gatsby-source-filesystem/index.js

* Directory is a required parameter now. Tests added.

* Added rel="noreferrer" to targeted links

* README tweak

* Changed behavior of externals config option

* Added more detail to README

* Changed redirect links for Codepen to use 'redirect-to-codepen' prefix (instead of 'codepen')

* README tweak

* README tweak

* Removed unused OPTION_DEFAULT_DIRECTORY const

packages/gatsby-remark-code-repls/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    ["../../.babelrc.js", { "browser": true }]
+  ]
+}

packages/gatsby-remark-code-repls/.gitignore

@@ -0,0 +1,4 @@
+/constants.js
+/default-redirect-template.js
+/gatsby-node.js
+/index.js

packages/gatsby-remark-code-repls/.npmignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples

packages/gatsby-remark-code-repls/README.md

@@ -0,0 +1,86 @@
+# gatsby-remark-code-repls
+
+This plug-in adds support for directly embedding code examples as links to popular REPLs such as [Babel](https://babeljs.io/repl/) and [Codepen](https://codepen.io/). This enables example code to be stored along side of, and revisioned with, your website content.
+
+This plug-in was created to solve a couple of problems the React team has faced with [reactjs.org](https://github.com/reactjs/reactjs.org):
+* Examples were stored separately from documentation (eg in Codepen) which made it more difficult to coordinate updates. (It was easy to forget to update an example when an API changes.)
+* Examples (eg Codepens) were owned by a single author, so the community couldn't contribute PRs to update them without forking and fragmenting ownership.
+* It was easy to create invalid links (eg Babel REPL links that _don't quite work).
+
+
+## Overview
+
+For example, given the following project directory structure:
+```
+./examples/
+├── components-and-props
+│   ├── composing-components.js
+│   ├── extracting-components.js
+│   └── rendering-a-component.js
+├── hello-world.js
+├── introducing-jsx.js
+```
+
+These example files can be referenced via links in markdown that get transformed to HTML links that open the embedded code examples in a REPL. For example:
+```html
+<!-- before -->
+[Try it on CodePen](codepen://components-and-props/rendering-a-component)
+
+<!-- after -->
+<a href="/redirect-to-codepen/components-and-props/rendering-a-component">
+  Try it on CodePen
+</a>
+
+<!-- before -->
+[See it in Babel](babel://hello-world)
+
+<!-- after -->
+<a href="https://babeljs.io/repl/#?presets=react&code_lz=...">
+  See it in Babel
+</a>
+```
+
+### How does it work?
+
+Codepen links point to Gatsby pages (also created by this plug-in) that redirect using [Codepen's prefill API](https://blog.codepen.io/documentation/api/prefill/) to create a working pen with the linked example code.
+
+Babel links use the [same URL compression schema used by the Babel REPL](https://github.com/babel/website/blob/c9dd1f516985f7267eb58c286789e0c66bc0a21d/js/repl/UriUtils.js#L22-L26) to embed the local code example in a URL that enables it to be viewed directly within the REPL.
+
+All example links are also verified to ensure that they reference valid example files. For example, if there is a link to `codepen://components-and-props/rendering-a-component`, this plug-in will verify that a file `components-and-props/rendering-a-component.js` exists within the specified examples directory. (This will avoid broken links at runtime.)
+
+## Installation
+
+`npm install --save gatsby-remark-code-repls`
+
+## Usage
+
+```javascript
+// In your gatsby-config.js
+{
+  resolve: 'gatsby-remark-code-repls',
+  options: {
+    // Optional default link text.
+    // eg <a href="...">Click here</a>
+    defaultText: 'Click here',
+
+    // Example code links are relative to this dir.
+    // eg examples/path/to/file.js
+    directory: `${__dirname}/examples/`,
+
+    // Optional externals to load from a CDN.
+    // This option only applies to REPLs that support it (eg Codepen).
+    // eg '//unpkg.com/react/umd/react.development.js'
+    externals: [],
+
+    // Optional path to a custom redirect template.
+    // The redirect page is only shown briefly,
+    // But you can use this setting to override its CSS styling.
+    redirectTemplate: `${__dirname}/src/redirect-template.js`),
+
+    // Optional link target.
+    // Note that if a target is specified, "noreferrer" will also be added.
+    // eg <a href="..." target="_blank" rel="noreferrer">...</a>
+    target: '_blank',
+  },
+},
+```

packages/gatsby-remark-code-repls/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "gatsby-remark-code-repls",
+  "description": "Gatsby plugin to auto-generate links to popular REPLs like Babel and Codepen",
+  "version": "1.0.0",
+  "author": "Brian Vaughn <[email protected]>",
+  "dependencies": {
+    "babel-runtime": "^6.26.0",
+    "lz-string": "^1.4.4",
+    "recursive-readdir-synchronous": "^0.0.3",
+    "unist-util-map": "^1.0.3"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "cross-env": "^5.0.5"
+  },
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "remark",
+    "babel",
+    "codepen",
+    "repl"
+  ],
+  "license": "MIT",
+  "main": "index.js",
+  "scripts": {
+    "build": "babel src --out-dir . --ignore __tests__",
+    "watch": "babel -w src --out-dir . --ignore __tests__",
+    "prepublish": "cross-env NODE_ENV=production npm run build"
+  }
+}