- Notifications
You must be signed in to change notification settings - Fork7
A Gatsby Remark plugin for embedding Codesandbox given a folder of files
License
elboman/gatsby-remark-embedded-codesandbox
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This plugin adds support for generating embeddedCodeSandbox, 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 ongatsby-remark-code-repls.
To embed a CodeSandbox editor in you Markdown/remark content, simply add a link with the custom protocol pointing to the folder desired folder:
[embedded example](embedded-codesandbox://example/folder)
It will scan the folder and generate the proper html to include the editor.
For example, given the following project directory structure:
examples/├── hello-world-example│ ├── package.json│ ├── index.html│ └── index.js├── some-other-example│ ├── package.json│ └── index.jsThese example files can be referenced via links in Markdown that get transformedto embedded editors. For example:
<!-- before-->[hello world example](embedded-codesandbox://hello-world-example)<!-- after--><iframesrc="https://codesandbox.io/api/v1/sandboxes/define?embed=1¶meters=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>
Note: If you are usinggatsby-remark-responsive-iframe, it must appearafter this plugin in your configuration or the iframe will not be transformed.
CodeSandboxrequires apackage.json file in order to work.This is useful because you can define dependencies such asreact that will be included in the sandbox.
The plugin will search for thepackage.json file in the example folder.If not found, it will try in the parent folders up until it reaches theexamples root folder.
If nothing is found it fall back to a default one:
{"name":"example","dependencies": {}}It's possible to override the globalembedding options on a per-sandbox basis, by simply passing them as url query in the generating link.
[hello world example](embedded-codesandbox://hello-world-example?view=split)
The options will be merged with the global one.
CodeSandbox uses thesame URL compression schema used by the Babel REPL to embed the local code example in a URL.
This is than passed to the (awesome)define api to generate a sandbox on the fly.
yarn add gatsby-remark-embedded-codesandbox
// In your gatsby-config.js{resolve:'gatsby-transformer-remark',options:{plugins:[{resolve:'gatsby-remark-embedded-codesandbox',options:{// Required:// Example code folders are relative to this dir.// eg src/_examples/some-example-folderdirectory:`${__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}" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`}}]}}
About
A Gatsby Remark plugin for embedding Codesandbox given a folder of files
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.