Improve DX with documentation demos
AMBudnik opened this issue · comments
Description
Some of our demos (specific frameworks/packages) are run on the Cloud Sandbox environment, which makes the demos render with a large black space on the page. We should try to change that.
Screenshots
Example of a demo
Related pages in the documentation
- Svelte example - https://hyperformula.handsontable.com/guide/integration-with-svelte.html#demo
- Vue example - https://hyperformula.handsontable.com/guide/integration-with-vue.html
Related articles
- Codesandbox limitations - https://codesandbox.io/docs/learn/sandboxes/embedding#limitations
Current iframe URL:
<iframe
src="https://codesandbox.io/embed/github/handsontable/hyperformula-demos/tree/2.6.x/vue-3-demo
?autoresize=1&fontsize=11&hidenavigation=1&theme=light&view=preview"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="handsontable/hyperformula-demos: vue-demo"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
</iframe>
Devbox embed URL generated by Codesandbox:
<iframe
src="https://codesandbox.io/p/devbox/hyperformula-vue-3-demo-spdjsy
?file=%2Fpackage.json&embed=1"
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
title="hyperformula-vue-3-demo"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
</iframe>
Regular sandbox embed URL generated by CodeSandbox:
<iframe
src="https://codesandbox.io/embed/qzlp7nw34q
?view=Editor+%2B+Preview&module=%2Findex.js"
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
title="Define API - POST Request"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
</iframe>
Codesandbox offers a way to create sandboxes automatically using their CLI or Web API: https://codesandbox.io/docs/learn/sandboxes/cli-api#define-api
This is how Codesandbox determines the typo of the sandbox:
Released with version 2.6.2.