search

handsontable / hyperformula

HyperFormula is an open-source headless spreadsheet for business web apps. It comes with over 400 formulas, CRUD operations, undo-redo, clipboard support, and sorting.
https://hyperformula.handsontable.com/
Other
1.9k stars 108 forks source link

Improve DX with documentation demos #1358

Closed AMBudnik closed 5 months ago

AMBudnik commented 6 months ago

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

Zrzut ekranu 2023-12-28 o 08 08 36

Related pages in the documentation

Related articles

sequba commented 6 months ago

By default, it does not display the code file. Instead, the top section is just empty black space.

image

sequba commented 6 months ago

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>
sequba commented 6 months ago

Codesandbox offers a way to create sandboxes automatically using their CLI or Web API: https://codesandbox.io/docs/learn/sandboxes/cli-api#define-api

sequba commented 6 months ago

This is how Codesandbox determines the typo of the sandbox:

https://github.com/codesandbox/codesandbox-importers/blob/9a7bd665db755fe7fba200fc62d4c02d7fb6641b/packages/import-utils/src/create-sandbox/templates.ts#L50

sequba commented 5 months ago

Released with version 2.6.2.