first

Author: elboman

.babelrc

@@ -0,0 +1,18 @@
+{
+  "env": {
+    "production": {
+      "presets": [
+        [
+          "env",
+          {
+            "targets": {
+              "browsers": ["last 4 versions", "safari >= 7", "ie >= 9"],
+              "uglify": true
+            }
+          }
+        ],
+        "react"
+      ]
+    }
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+.vscode
+node_modules
+
+yarn-error.log
+
+/index.js

.npmignore

@@ -0,0 +1,9 @@
+.vsdode
+
+node_modules
+src
+
+.babelrc
+.prettierrc
+
+yarn.lock

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true
+}

README.md

@@ -0,0 +1,106 @@
+# gatsby-remark-embedded-codesandbox
+
+This plugin adds support for generting embedded [Codesandbox](https://codesandbox.io/), specifying a folder in local files to populate the contents of it.
+This enables example code to be stored along side of, and revisioned with, your website content.
+
+This plugin is based on [gatsby-remark-code-repls](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-code-repls).
+
+## Getting started
+
+To embed a Codesandbox editor in you markdown/remark content, simply add a link with the custom protocol pointing to the folder desired folder:
+
+```md
+[embedded example](embedded-codesandbox://example/folder)
+```
+
+It will scan the folder and generate the proper html to include the editor.
+
+## Overview
+
+For example, given the following project directory structure:
+
+```
+examples/
+├── hello-world-example
+│   ├── package.json
+│   ├── index.html
+│   └── index.js
+├── some-other-example
+│   ├── package.json
+│   └── index.js
+```
+
+These example files can be referenced via links in markdown that get transformed
+to embedded editors. For example:
+
+```md
+<!-- before -->
+
+[hello world example](embedded-codesandbox://hello-world-example)
+
+<!-- after -->
+
+<iframe src="https://codesandbox.io/api/v1/sandboxes/define?embed=1&parameters=N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSOWgLYxIgwAe7KsEAF8hAGhARyAE14EAFrTZRmNRgyaIQAHgVKAfFoBGpKQE8DAemNnLuqHuHjJMnsQTIQq-oy6q4tAAIwUlIAgF4AgB0QQzQAJ2iAbmERIA&query=hidenavigation%3D1%26view%3Dpreview" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+```
+
+> NB: Codesandbox [**requires** a `package.json` file](https://codesandbox.io/docs/importing#how-it-works) in order to work!
+> You can define dependencies such as `react` that will be included in the sandbox.
+> If you don't need any just add the minimum required:
+>
+> ```json
+> {
+>   "name": "example",
+>   "dependencies": {}
+> }
+> ```
+
+### How does it work?
+
+CodeSandbox uses 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.
+
+This is than passed to the (awesome) [define api](https://codesandbox.io/docs/importing#define-api) to generate a sandbox on the fly.
+
+## Installation
+
+`yarn add gatsby-remark-embedded-codesandbox`
+
+## Usage
+
+```javascript
+// In your gatsby-config.js
+{
+  resolve: 'gatsby-transformer-remark',
+  options: {
+    plugins: [
+      {
+        resolve: 'gastby-remark-embedded-codesandbox',
+        options: {
+          // Required:
+
+          // Example code folders are relative to this dir.
+          // eg src/_examples/some-example-folder
+          directory: `${__dirname}/src/_examples/`,
+
+          // Optional:
+
+          // Custom protocol for parsing the embedding link
+          // default:
+          protocol: 'embedded-codesandbox://',
+
+          // Customise Codesandbox embedding options:
+          // https://codesandbox.io/docs/embedding#embed-options
+          // default:
+          embedOptions: {
+            view: 'preview',
+            hidenavigation: 1,
+          },
+
+          // Customise the embedding iframe given the generated url
+          // default:
+          getIframe: url => `<iframe src="${url}" class="embedded-codesandbox" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`
+        }
+      }
+    ]
+  }
+}
+```

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "gatsby-remark-embedded-codesandbox",
+  "version": "1.0.0",
+  "description": "Gatsby Remark plugin for embedding Codesandbox given a folder of files",
+  "main": "index.js",
+  "repository": "https://github.com/elboman/gatsby-remark-embedded-codesandbox",
+  "author": "Marco Botto <marco.botto@gmail.com>",
+  "bugs": {
+    "url": "https://github.com/elboman/gatsby-remark-embedded-codesandbox/issues"
+  },
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "remark",
+    "codesandbox",
+    "embed",
+    "embedded"
+  ],
+  "license": "MIT",
+  "private": false,
+  "dependencies": {
+    "jest": "^22.4.3",
+    "lz-string": "^1.4.4",
+    "query-string": "^6.0.0",
+    "unist-util-map": "^1.0.3"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "cross-env": "^5.1.4",
+    "prettier": "^1.12.1",
+    "remark": "^9.0.0"
+  },
+  "scripts": {
+    "test": "jest",
+    "build": "babel src --out-dir . --ignore __tests__",
+    "prepublish": "cross-env NODE_ENV=production yarn build"
+  }
+}

src/__tests__/__snapshots__/index.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`gatsby-remark-embedded-codesandbox generates an embedded sandbox for a nested example folder 1`] = `
+Object {
+  "type": "html",
+  "value": "<iframe src=\\"https://codesandbox.io/api/v1/sandboxes/define?embed=1&parameters=N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSOWgLYxIgwAe7KsEAF8hAGhARyAE14EAFrTZRmNRgyaIQAHgVKAfFoBGpKQE8DAemNnLuqHuHjJMnsQTIQq-oy6q4tAAIwUlIAgF4AgB0QQzQAJ2iAbmERIA&query=hidenavigation%3D1%26view%3Dpreview\\" class=\\"embedded-codesandbox\\" sandbox=\\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\\"></iframe>",
+}
+`;
+
+exports[`gatsby-remark-embedded-codesandbox generates an embedded sandbox for the specified example folder 1`] = `
+Object {
+  "type": "html",
+  "value": "<iframe src=\\"https://codesandbox.io/api/v1/sandboxes/define?embed=1&parameters=N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSOWgLYxIgwAe7KsEAF8hAGhARyAE14EAFrTZRmNRgyaIQAHgVKAfFoBGpKQE8DAemNnLuqHuHjJMnsQTIQq-oy6q4tAAIwUlIAgF4AgB0QQzQAJ2iAbmERIA&query=hidenavigation%3D1%26view%3Dpreview\\" class=\\"embedded-codesandbox\\" sandbox=\\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\\"></iframe>",
+}
+`;
+
+exports[`gatsby-remark-embedded-codesandbox generates an embedded sandbox using a custom getIframe function 1`] = `
+Object {
+  "type": "html",
+  "value": "<iframe src=\\"https://codesandbox.io/api/v1/sandboxes/define?embed=1&parameters=N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSOWgLYxIgwAe7KsEAF8hAGhARyAE14EAFrTZRmNRgyaIQAHgVKAfFoBGpKQE8DAemNnLuqHuHjJMnsQTIQq-oy6q4tAAIwUlIAgF4AgB0QQzQAJ2iAbmERIA&query=hidenavigation%3D1%26view%3Dpreview\\" />",
+}
+`;
+
+exports[`gatsby-remark-embedded-codesandbox generates an embedded sandbox using a custom protocol 1`] = `
+Object {
+  "type": "html",
+  "value": "<iframe src=\\"https://codesandbox.io/api/v1/sandboxes/define?embed=1&parameters=N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSOWgLYxIgwAe7KsEAF8hAGhARyAE14EAFrTZRmNRgyaIQAHgVKAfFoBGpKQE8DAemNnLuqHuHjJMnsQTIQq-oy6q4tAAIwUlIAgF4AgB0QQzQAJ2iAbmERIA&query=hidenavigation%3D1%26view%3Dpreview\\" class=\\"embedded-codesandbox\\" sandbox=\\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\\"></iframe>",
+}
+`;

src/__tests__/index.js

@@ -0,0 +1,83 @@
+jest.mock(`fs`, () => {
+  return {
+    existsSync: jest.fn(),
+    readdirSync: jest.fn(),
+    readFileSync: jest.fn(),
+  };
+});
+
+const fs = require(`fs`);
+const Remark = require(`remark`);
+const plugin = require(`../index`);
+
+const remark = new Remark();
+
+const getNodeContent = node => node.children[0].children[0];
+
+describe('gatsby-remark-embedded-codesandbox', () => {
+  beforeEach(() => {
+    fs.existsSync.mockReset();
+    fs.readdirSync.mockReset();
+    fs.readFileSync.mockReset();
+
+    fs.existsSync.mockReturnValue(true);
+    fs.readdirSync.mockReturnValue(['package.json', 'index.html', 'index.js']);
+    fs.readFileSync
+      .mockReturnValueOnce('{ "name": "example" }')
+      .mockReturnValueOnce('<html><body></body></html>')
+      .mockReturnValueOnce('const foo = "bar";');
+  });
+
+  it(`generates an embedded sandbox for the specified example folder`, async () => {
+    const markdownAST = remark.parse(`[](embedded-codesandbox://example)`);
+    const transformed = plugin({ markdownAST }, { directory: `examples` });
+    expect(getNodeContent(transformed)).toMatchSnapshot();
+  });
+
+  it(`generates an embedded sandbox for a nested example folder`, async () => {
+    const markdownAST = remark.parse(
+      `[](embedded-codesandbox://path/to/folder)`
+    );
+    const transformed = plugin({ markdownAST }, { directory: `examples` });
+    expect(fs.readdirSync).toHaveBeenCalledWith('examples/path/to/folder');
+    expect(getNodeContent(transformed)).toMatchSnapshot();
+  });
+
+  it('generates an embedded sandbox using a custom protocol', async () => {
+    const markdownAST = remark.parse(`[](custom-embedded-protocol://example)`);
+    const transformed = plugin(
+      { markdownAST },
+      { directory: 'examples', protocol: 'custom-embedded-protocol://' }
+    );
+    expect(getNodeContent(transformed)).toMatchSnapshot();
+  });
+
+  it('generates an embedded sandbox using custom embedding options', async () => {
+    const markdownAST = remark.parse(`[](embedded-codesandbox://example)`);
+    const transformed = plugin(
+      { markdownAST },
+      {
+        directory: 'examples',
+        embedOptions: {
+          view: 'split',
+          hidenavigation: 0,
+        },
+      }
+    );
+    expect(getNodeContent(transformed).value).toEqual(
+      expect.stringContaining('query=hidenavigation%3D0%26view%3Dsplit')
+    );
+  });
+
+  it('generates an embedded sandbox using a custom getIframe function', async () => {
+    const markdownAST = remark.parse(`[](embedded-codesandbox://example)`);
+    const transformed = plugin(
+      { markdownAST },
+      {
+        directory: 'examples',
+        getIframe: url => `<iframe src="${url}" />`,
+      }
+    );
+    expect(getNodeContent(transformed)).toMatchSnapshot();
+  });
+});