forem.dev Community

loading...
Cover image for [REQUEST] Allow embedding CodeSandbox from GitHub urls

[REQUEST] Allow embedding CodeSandbox from GitHub urls

modularcoder profile image Gevorg Harutyunyan ・1 min read

Hello community!

I was writing my first tutorial series in dev.to where I would like to embed some CodeSandbox examples.

Currently this can be done in dev.to via liquid tags, like stated in Editor Guide.

{% codesandbox ppxnl191zx %}
Enter fullscreen mode Exit fullscreen mode

The issues is that embedding seems to work only by sandbox ID, however the CodeSandbox have an awesome feature, that you may run a sandbox from GitHub repo/directory.

https://codesandbox.io/s/github

So we may use this type of url
https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage4-react-router

However embedding this type of sandboxes doesn't seem to work in dev.to

{% codesandbox https://codesandbox.io/s/github/modularcoder/tutorial-react-tree-menu/tree/master/stage4-react-router %}
Enter fullscreen mode Exit fullscreen mode

Would be really amazing to add this support which should be quite easy to implement I suppose.

That helps to embed the sandbox from the github repo, which can be constantly developed, so there is no need to manually update the sandbox contents every time when there are changes in the tutorial repo.

What do you think about this?
Thanks!

Discussion (3)

pic
Editor guide
Collapse
link2twenty profile image
Andrew Bone

Looking at it there are 4 things we need to tell the codesandbox tag in order to get this to work.

We need to tell it:

  • this is github and so not to expect an ID.
  • which repository we're looking for, modularcoder/tutorial-react-tree-menu
  • which branch to use, tree/master
  • which folder to start in, stage4-react-router

The codesandbox tag differs from the jsfiddle and codepen variants in that it only accepts an ID and won't try and work it out from the URL.

I think if we were to add this functionality we would want to be able to take a full URL and extrapolate from that.

Collapse
modularcoder profile image
Gevorg Harutyunyan Author

After looking ad liqud _codesandbox partial render, I suppose if just the tag regexp validation would be extended, this might work out of the box.

github.com/forem/forem/blob/master...

So basically it would be allowing github/{whatever} type of ids validation

Collapse
modularcoder profile image
Gevorg Harutyunyan Author • Edited

What about adding support for these type of ids to validation?

github/{userName}/{repoName}[/optional/part/to/dir]
Enter fullscreen mode Exit fullscreen mode

So wondering if extending codesandbox ID validation regexp will make it work
github.com/forem/forem/blob/master...