feat(options): override embedding options via url query

You can now override the plug-in wide embedding options on a per-sandbox basis by specifying them in the link url query:

```js
// gatsby-config.js
{
  resolve: ‘gatsby-remark-embedded-codesandbox’,
  options: {
    embedOptions: { view: 'preview', }
  }
}
```

These embedOptions are applied to every sandbox, but you may want to override them in a single sandbox.
To do this simply add a url query in the generating link:

```md
[code example](embedded-codesandbox://some/example?view=split)
```

The `urlQuery` options will be merged with the `gatsby-config` one.

Author: elboman

src/__tests__/index.js

@@ -80,4 +80,24 @@ describe('gatsby-remark-embedded-codesandbox', () => {
     );
     expect(getNodeContent(transformed)).toMatchSnapshot();
   });
+
+  it('generates an embedded sandbox using the overridable url-query options', () => {
+    const markdownAST = remark.parse(
+      `[](embedded-codesandbox://example?view=split&hidenavigation=0)`
+    );
+    const transformed = plugin({ markdownAST }, { directory: 'examples' });
+    expect(getNodeContent(transformed).value).toEqual(
+      expect.stringContaining('query=hidenavigation%3D0%26view%3Dsplit')
+    );
+  });
+
+  it('overrides url-query options correctly', () => {
+    const markdownAST = remark.parse(
+      `[](embedded-codesandbox://example?hidenavigation=0&foo=bar)`
+    );
+    const transformed = plugin({ markdownAST }, { directory: 'examples' });
+    expect(getNodeContent(transformed).value).toEqual(
+      expect.stringContaining('foo%3Dbar%26hidenavigation%3D0%26view%3Dpreview')
+    );
+  });
 });

src/index.js

@@ -73,14 +73,24 @@ module.exports = (
     return compress(JSON.stringify(params));
   };
 
-  const convertNodeToEmbedded = (node, params) => {
+  const getUrlParts = url => {
+    const splitUrl = url.split('?');
+    return {
+      base: splitUrl[0],
+      query: queryString.parse(splitUrl[1]),
+    };
+  };
+
+  const convertNodeToEmbedded = (node, params, options = {}) => {
     delete node.children;
     delete node.position;
     delete node.title;
     delete node.url;
 
+    // merge the overriding options with the plugin one
+    const mergedOptions = { ...embedOptions, ...options };
     const encodedEmbedOptions = encodeURIComponent(
-      queryString.stringify(embedOptions)
+      queryString.stringify(mergedOptions)
     );
     const sandboxUrl = `https://codesandbox.io/api/v1/sandboxes/define?embed=1&parameters=${params}&query=${encodedEmbedOptions}`;
     const embedded = getIframe(sandboxUrl);
@@ -91,10 +101,15 @@ module.exports = (
 
   map(markdownAST, (node, index, parent) => {
     if (node.type === 'link' && node.url.startsWith(protocol)) {
-      const dir = getDirectoryPath(node.url);
+      // split the url in base and query to allow user
+      // to customise embedding options on a per-node basis
+      const url = getUrlParts(node.url);
+      // get all files in the folder and generate
+      // the embeddeing parameters
+      const dir = getDirectoryPath(url.base);
       const files = getFilesList(dir);
       const params = createParams(files);
-      convertNodeToEmbedded(node, params);
+      convertNodeToEmbedded(node, params, url.query);
     }
 
     return node;