Replace README Gist with CodeSandbox Example

[dan-kez]

Hi All!

Per the request in issue #2590 (comment) I added a codesandbox example for the main Redux gist presently on the README.

[timdorr]

Unfortunately, this won't work, as GitHub won't display the iframe and the readme here is fairly high traffic.

[dan-kez]

Interesting, I didn't realize that github blocks it but it makes sense in retrospect. I'll pick a different code snippet to embed and link to this codesandbox example in the readme.

[timdorr]

Let's not mess with the readme just yet. I'd rather see how it works with a page somewhere inside of the docs. A great place to start would be the examples page, where we already have Codesandbox links: https://redux.js.org/introduction/examples

[markerikson]

Hmm. So I just tried playing around with this for a few minutes with the Counter item in the Examples page:

• <iframe> link: no result or visible content
• direct embed link: just showed the link
• Opened up the page in the Gitbook UI and pasted in the embed link: got a static image of a CodeSandbox logo and some text, but not actually an editor. Clicking it opens the embed view in a new tab, but not in the same page.

Also, when I hit save in the Gitbook editor, it created a commit that touched 140 files, including renaming every markdown file in the repo to lowercase and a bunch of other stuff. Not cool. I reverted that.

I do note that the embed-via-UI attempt produced this:

{% embed data="{\"url\":\"https://codesandbox.io/embed/github/reactjs/redux/tree/master/examples/counter\",\"type\":\"link\",\"title\":\"CodeSandbox\",\"description\":\"CodeSandbox is an online editor       tailored for web applications.\",\"icon\":{\"type\":\"icon\",\"url\":\"https://codesandbox.io/favicon.ico\",\"aspectRatio\":0},\"thumbnail\":{\"type\":\"thumbnail\",\"url\":\"https://codesandbox.io/static/img/banner.png\",\"width\":1200,\"height\":630,\"aspectRatio\":0.525}}" %}

Yes, that's rather ugly. It's an escaped JS object in a string. Ew.

@SamyPesse , is it actually possible to get a CodeSandbox editor embedded in a page? The Gitbook docs page on Embeds shows a CodePen that is editable in page after clicking on it.

[timdorr]

Do both Gitbook and Codesandbox support oEmbed?

[SamyPesse]

GitBook should support Codesandbox embeds (it uses iframely.com).

Since embeds doesn't exist in Markdown, We serialize it as a liquid tag with some JSON ({% embed data="{\"url\":\" ...).

Solution 1: HTML Comments for GitBook specific content

One thing that could work, will be for GitBook to support some special HTML comments that will be hidden on GitHub, but visible on GitBook.

Something like (better syntax ideas are welcome):

<!--ONLY_GITBOOK
{% embed data="{\"url\":\"https://codesandbox.io/embed/github/reactjs/redux/tree/master/examples/counter\",\"type\":\"link\",\"title\":\"CodeSandbox\",\"description\":\"CodeSandbox is an online editor       tailored for web applications.\",\"icon\":{\"type\":\"icon\",\"url\":\"https://codesandbox.io/favicon.ico\",\"aspectRatio\":0},\"thumbnail\":{\"type\":\"thumbnail\",\"url\":\"https://codesandbox.io/static/img/banner.png\",\"width\":1200,\"height\":630,\"aspectRatio\":0.525}}" %}
ONLY_GITBOOK-->

Solution 2: GitBook should parse iframe tags as embeds

Or the other (probably better) solution will be for GitBook to support iframe HTML tags (not as iframe itself, but as embeds). The iframe will be stripped by GitHub, but the embed will be visible on GitBook.

---

Also, when I hit save in the Gitbook editor, it created a commit that touched 140 files, including renaming every markdown file in the repo to lowercase and a bunch of other stuff. Not cool. I reverted that.

Yep sorry, I've mentioned a few months ago that you should not edit on the platform since it'll try to normalize the content (we don't store Markdown on our end).

It works well for repositories that started using GitBook from day one, or are using GitBook as the main source of edits. But it results in a massive first commit for documentation like Redux.

[dan-kez]

Sorry for being MIA for a bit. The last few weeks have been hectic.

I'm happy to spend some time tonight / this week updating the examples Tim linked above. I can use the liquid tag example that Mark & Samy gave if that's desirable.

One thing to note, when I ran gitbook locally, the iframe embed did seem to work. If there is a different way I should be testing please let me know!

[markerikson]

@dan-kez: yeah, if you can play with this a bit more and see if there's a combo that does work right now, I'd appreciate it. Thanks!

[SamyPesse]

We've just released an improvement for embeds, inserting the following code in the README will show the CodeSandbox on GitBook:

{% embed url="https://codesandbox.io/s/zqq52wqj5p" %}

[dan-kez]

I feel terrible - this totally slipped my mind after I got back from vacation. Happy to hear the update @SamyPesse . I will update this PR today.

[dan-kez]

@SamyPesse I just updated the PR to utilize the embed tag you noted above. It works perfectly. The only draw back is that I wasn't able to figure out a way to hide the {% embed url="" %} text on github.

I attempted the following:

• Using the <!-- --> comment block. This resulted in the embed text being hidden on both github and gitbook
• Using <!--ONLY_GITBOOK {% ... %} ONLY_GITBOOK--> (same as above)
• Using a spoiler as noted here Collapsible contents (code block) in comments / spoiler tag dear-github/dear-github#166 (comment) . This resulted in the plain {% embed url="" %} being shown in gitbook

@timdorr I also removed the codesandbox snippet from the README as requested. If we can figure out a way to hide the {% embed url="" %} code in github but not gitbook I'm happy to add it back.

[timdorr]

Closing this out since we're on Docusaurus now. Feel free to rebuild this for that system, though!