Has anyone any suggestions on how to embed or host Jupyter notebooks, or Jupyter notebooks saved as .html, on 11ty websites?
I've tried downloading notebooks as .html, storing them in ./src/_includes/ and trying to embed them in a markdown page like this:
{% include "notebook.html" %}
Unfortunately, it publishes as raw code:
/-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------/
/*
The following CSS variables define the main, public API ...
I tried an iframe shortcode:
eleventyConfig.addShortcode('getNotebook', (arg) => `<iframe src="${arg}">`);
But it seems the system doesn't care for iframes: Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).
I tried downloading the notebook as markdown but that doesn't work that awfully well - the formatting quickly goes haywire, and interactive graphs are a disaster. If anyone has any suggestions I would greatly appreciate them.
I have found a way around this. It's a bit of a hack, but it works.
My original problem was that using {% include "notebook.html" %} in a markdown file caused the html to render as raw code, rather than html. However, that doesn't happen if the include is in the .njk template, rather than markdown.
So, every notebook I post now has to have its own special template, which is an include directive to an individual notebook. The markdown file contains only the front matter. All the action is in the template, and in a notebooks folder in the src/_includes folder.
It's very McGyver, but as long as it works I'm prepared to live with the loss of elegance.