This PR is the result of my exploration of embedding a JupyterLite notebook inside a Vue component (or web page, generally). It doesn't work great, but as far as I can tell this is the best we can do. I've set this PR to draft mode because it is likely a dead end that we won't want to merge.
I started out by searching how to embed JupyterLite notebooks into a web page. The resources I found (example) showed how to embed an interactive JupyterLite shell (REPL) into a page, but not an already-made notebook. There was no magic here, just an HTML iframe.
If iframes are good enough for an interactive Python shell, I figured I'd try using a similar approach to embed our JupyterLite notebooks directly into a Vue component.
The good news:
It does actually work! Executing the notebook works just fine and produces the expected outputs.
I discovered that you can use the path HTTP GET parameter to load specific notebooks from the GitHub repository via JupyterLab.
The bad news:
Stuffing an entire Jupyter notebook into an iframe with an arbitrary height is clunky, as expected. It might be possible to use some fringe JavaScript tricks to make the iframe height adjust to the content, but this wouldn't bode well for long-term maintenance IMO.
There appears to be no way to hide the file navigation sidebar (through an HTTP GET parameter or otherwise) without the user doing this manually.
The browser back button stops working as soon as you embed JupyterLab into an iframe, and I found no obvious way through Nuxt routing, Vue lifecycle hooks, running the iframe in sandbox mode, etc. to restore its functionality. Disabling the browser's back button appears to be a deliberate decision by JupyterLab.
So, I think the bad outweighs the good here and it would be better to link to Jupyter notebooks directly (via JupyterLab) from the item teaser "card" without an intermediate ARDAC page.
This PR is the result of my exploration of embedding a JupyterLite notebook inside a Vue component (or web page, generally). It doesn't work great, but as far as I can tell this is the best we can do. I've set this PR to draft mode because it is likely a dead end that we won't want to merge.
I started out by searching how to embed JupyterLite notebooks into a web page. The resources I found (example) showed how to embed an interactive JupyterLite shell (REPL) into a page, but not an already-made notebook. There was no magic here, just an HTML iframe.
If iframes are good enough for an interactive Python shell, I figured I'd try using a similar approach to embed our JupyterLite notebooks directly into a Vue component.
The good news:
pathHTTP GET parameter to load specific notebooks from the GitHub repository via JupyterLab.The bad news:
So, I think the bad outweighs the good here and it would be better to link to Jupyter notebooks directly (via JupyterLab) from the item teaser "card" without an intermediate ARDAC page.