Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Topic/gatsby remark code repls add ramda #3171

Merged
merged 5 commits into from
Dec 13, 2017
Merged

Topic/gatsby remark code repls add ramda #3171

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7e045c5
Add support for Ramda REPL via ramda:// link protocol
Undistraction Dec 9, 2017
80ef2da
Update docs to include Ramda REPL
Undistraction Dec 9, 2017
688b84d
fix: Bad protocol constant
Undistraction Dec 9, 2017
cbcc196
Fix overlong comment
Undistraction Dec 10, 2017
f947a1a
Format and ignore compiled file
KyleAMathews Dec 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 13 additions & 5 deletions packages/gatsby-remark-code-repls/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
# 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/),
[Codepen](https://codepen.io/), and [CodeSandbox](https://codesandbox.io/). This
enables example code to be stored along side of, and revisioned with, your
website content.
This plug-in adds support for generating links to popular REPLs, using code in
local files to populate the contents of the REPL. This enables example code to
be stored along side of, and revisioned with, your website content.

It currently supports:

* [Babel](https://babeljs.io/repl/)
* [Codepen](https://codepen.io/)
* [CodeSandbox](https://codesandbox.io/)
* [Ramda](http://ramdajs.com/repl)

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):
Expand Down Expand Up @@ -73,6 +78,9 @@ Babel and CodeSandbox links use the
to embed the local code example in a URL that enables it to be viewed directly
within the target REPL.

Ramda links use basic URL encoding to embed the local code example in a URL that
enables it to be viewed directly within Ramda's 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
Expand Down
3 changes: 2 additions & 1 deletion packages/gatsby-remark-code-repls/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
"lz-string": "^1.4.4",
"normalize-path": "^2.1.1",
"recursive-readdir-synchronous": "^0.0.3",
"unist-util-map": "^1.0.3"
"unist-util-map": "^1.0.3",
"urijs": "^1.19.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
Expand Down
210 changes: 210 additions & 0 deletions packages/gatsby-remark-code-repls/src/__tests__/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -713,3 +713,213 @@ Object {
"type": "root",
}
`;

exports[`gatsby-remark-code-repls Ramda remark transform generates a link for files in nested directories 1`] = `
Object {
"children": Array [
Object {
"children": Array [
Object {
"type": "html",
"value": "<a href=\\"http://ramdajs.com/repl/#?const%20foo%20%3D%20%22bar%22%3B\\" >REPL</a>",
},
],
"position": Position {
"end": Object {
"column": 35,
"line": 1,
"offset": 34,
},
"indent": Array [],
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "paragraph",
},
],
"position": Object {
"end": Object {
"column": 35,
"line": 1,
"offset": 34,
},
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "root",
}
`;

exports[`gatsby-remark-code-repls Ramda remark transform generates a link for the specified example file 1`] = `
Object {
"children": Array [
Object {
"children": Array [
Object {
"type": "html",
"value": "<a href=\\"http://ramdajs.com/repl/#?const%20foo%20%3D%20%22bar%22%3B\\" >REPL</a>",
},
],
"position": Position {
"end": Object {
"column": 20,
"line": 1,
"offset": 19,
},
"indent": Array [],
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "paragraph",
},
],
"position": Object {
"end": Object {
"column": 20,
"line": 1,
"offset": 19,
},
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "root",
}
`;

exports[`gatsby-remark-code-repls Ramda remark transform generates a link with the specified default text 1`] = `
Object {
"children": Array [
Object {
"children": Array [
Object {
"type": "html",
"value": "<a href=\\"http://ramdajs.com/repl/#?const%20foo%20%3D%20%22bar%22%3B\\" >Click me</a>",
},
],
"position": Position {
"end": Object {
"column": 20,
"line": 1,
"offset": 19,
},
"indent": Array [],
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "paragraph",
},
],
"position": Object {
"end": Object {
"column": 20,
"line": 1,
"offset": 19,
},
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "root",
}
`;

exports[`gatsby-remark-code-repls Ramda remark transform generates a link with the specified inline text even if default text is specified 1`] = `
Object {
"children": Array [
Object {
"children": Array [
Object {
"type": "html",
"value": "<a href=\\"http://ramdajs.com/repl/#?const%20foo%20%3D%20%22bar%22%3B\\" >Custom link text</a>",
},
],
"position": Position {
"end": Object {
"column": 36,
"line": 1,
"offset": 35,
},
"indent": Array [],
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "paragraph",
},
],
"position": Object {
"end": Object {
"column": 36,
"line": 1,
"offset": 35,
},
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "root",
}
`;

exports[`gatsby-remark-code-repls Ramda remark transform generates a link with the specified target 1`] = `
Object {
"children": Array [
Object {
"children": Array [
Object {
"type": "html",
"value": "<a href=\\"http://ramdajs.com/repl/#?const%20foo%20%3D%20%22bar%22%3B\\" target=\\"_blank\\" rel=\\"noreferrer\\">REPL</a>",
},
],
"position": Position {
"end": Object {
"column": 20,
"line": 1,
"offset": 19,
},
"indent": Array [],
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "paragraph",
},
],
"position": Object {
"end": Object {
"column": 20,
"line": 1,
"offset": 19,
},
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "root",
}
`;
2 changes: 2 additions & 0 deletions packages/gatsby-remark-code-repls/src/__tests__/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,14 @@ const {
PROTOCOL_BABEL,
PROTOCOL_CODEPEN,
PROTOCOL_CODE_SANDBOX,
PROTOCOL_RAMDA,
} = require(`../constants`)

const REMARK_TESTS = {
Babel: PROTOCOL_BABEL,
Codepen: PROTOCOL_CODEPEN,
CodeSandbox: PROTOCOL_CODE_SANDBOX,
Ramda: PROTOCOL_RAMDA,
}

const remark = new Remark()
Expand Down
1 change: 1 addition & 0 deletions packages/gatsby-remark-code-repls/src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,5 @@ module.exports = {
PROTOCOL_BABEL: `babel://`,
PROTOCOL_CODEPEN: `codepen://`,
PROTOCOL_CODE_SANDBOX: `codesandbox://`,
PROTOCOL_RAMDA: `ramda://`,
}
14 changes: 14 additions & 0 deletions packages/gatsby-remark-code-repls/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
"use strict"

const URI = require(`urijs`)

const fs = require(`fs`)
const LZString = require(`lz-string`)
const { join } = require(`path`)
Expand All @@ -12,6 +14,7 @@ const {
PROTOCOL_BABEL,
PROTOCOL_CODEPEN,
PROTOCOL_CODE_SANDBOX,
PROTOCOL_RAMDA,
} = require(`./constants`)

// Matches compression used in Babel and CodeSandbox REPLs
Expand Down Expand Up @@ -130,6 +133,17 @@ module.exports = (
node.children.length === 0 ? defaultText : node.children[0].value

convertNodeToLink(node, text, href, target)
} else if (node.url.startsWith(PROTOCOL_RAMDA)) {
const filePath = getFilePath(node.url, PROTOCOL_RAMDA, directory)

verifyFile(filePath)

// Don't use `compress()` as the Ramda REPL won't understand the output. It uses URI to encode the code for its urls, so we do the same.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Long line. Break into 2?

const code = URI.encode(fs.readFileSync(filePath, `utf8`))
const href = `http://ramdajs.com/repl/#?${code}`
const text =
node.children.length === 0 ? defaultText : node.children[0].value
convertNodeToLink(node, text, href, target)
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-source-filesystem/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use strict";

var fs = require(`fs-extra`);
const fs = require(`fs-extra`);

function loadNodeContent(fileNode) {
return fs.readFile(fileNode.absolutePath, `utf-8`);
Expand Down
2 changes: 1 addition & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12803,7 +12803,7 @@ upper-case@^1.0.3, upper-case@^1.1.0, upper-case@^1.1.1, upper-case@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"

urijs@^1.16.1:
urijs@^1.16.1, urijs@^1.19.0:
version "1.19.0"
resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.0.tgz#d8aa284d0e7469703a6988ad045c4cbfdf08ada0"

Expand Down