elboman / gatsby-remark-embedded-codesandbox Goto Github PK
View Code? Open in Web Editor NEWA Gatsby Remark plugin for embedding Codesandbox given a folder of files
License: MIT License
A Gatsby Remark plugin for embedding Codesandbox given a folder of files
License: MIT License
Allow configuration of settings on a per-embed basis (maybe as a query string or something after the path to the examples folder?)
For example, module
is a very nice option to have:
Which module to open by default. Multiple paths comma separated are allowed, in that case we show them as tabs.
Workaround: Add multiple Remark plugin configuration blocks with different protocols (eg. embedded-html-sandbox://
for configuration for html files, embedded-react-sandbox://
for React configuration)
I'm using this with gatsby-mdx plugins and the embed is a black box.
My plugin usage:
{
resolve: 'gatsby-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: 'editor',
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>`
}
},
Here's the link that get's generated:
Reproduction steps:
gatsby clean
and restart the serverFast solution: I suppose the simplest way of dealing with this for now would be to document the fact that files are cached and that you should clear your Gatsby cache every time you make a change.
Good solution: Clean the cache of example directories on every server restart.
The default resolution of package.json is good. However I don't want to use the first package.json it finds by walking up the tree OR specifying a new package.json in each example.
We have a repo which includes application code & docs code. I essentially want to reference the root package.json for the application code rather than the docs package.json with all the gatsby deps.
This will allow packages to stay in sync with docs.
At the moment, some parts of the url such as embed
are hard coded:
It would be nice if this was more customizable. I could imagine either:
getUrl
or similar function to override the URL completelyI am including links in the page instead of embedded sandboxes, and want to link to the full sandbox page.
Manually .replace
the necessary parts of the URL in getIframe
:
options: {
// ...
// Remove all embed options because we're not currently using embeds
embedOptions: {},
// Customize the output of the plugin:
// - Use a link instead of an iFrame
// - Link to the full Sandbox URL instead of the embed version
getIframe: url =>
`<a
href="${url.replace('embed=1&','',)}"
target="_blank"
rel="nofollow,noopener,noreferrer"
>CodeSandbox</a>`,
},
If the content passed to the GET
define API is too large, CodeSandbox will return an HTTP 414 error (URI Too Long).
fetch
ing the POST
define API with ?json=1
(the "Define without Render" option) and then using the resulting URL for the iframe
would be a workable solution:
https://codesandbox.io/docs/importing#xhr-request
This would require running asynchronous code within the transformer function, which can be achieved by returning a promise:
More information about async remark plugins: gatsbyjs/gatsby#16403
I'd like to use this in MDX in a Next.js project, but I guess the API of this plugin conforms to a Gatsby Remark plugin, and not a vanilla Remark plugin (eg. remark-emoji).
Do you know how it would be possible to create a vanilla Remark plugin out of this?
Does this work with v2 of Gatsby? Doesn't seem to, but not sure if I was doing something wrong. ๐ธ
Error: Unable to find plugin "gastby-remark-embedded-codesandbox". Perhaps you need to install its package?
In the Usage section you provide the code to configure the plugin inside the gatsby-config.js
file.
If someone copy/pastes this config like I did they will receive an error when they run their Gatsby app.
Gatsby is spelled incorrectly in the resolve
key.
resolve: 'gastby-remark-embedded-codesandbox',
should be
resolve: 'gatsby-remark-embedded-codesandbox',
This has been fixed on the Readme in the Repo but NOT on npm and therefor not on the Gatsby website either.
Would be great if the plugin used a simple resolution algorithm to resolve the package.json
for the example. It should look in the example's directory, then in the root code directory, then fall-back to the simplest possible config (as outlined in the README):
{
"name": "example",
"dependencies": {}
}
This would:
package.json
to be shared amongst multiple examplesA declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.