Jupyter Notebook Integration for Docusaurus
Overview
WARNING This plugin is still a work in progress. The plugin architecture is not setup and the steps to convert the notebook to be browser-renderable are still manual.
Docusaurs 2 supports a plugin architecture. This repo demonstrates the flow of a plugin that could be used to parse a jupyter notebook and seamlessly add it into Docusaurus site. Doing so provides a way for machine learning engineers to easily share their jupyter notebook tutorials on their website.
The plugin converts the notebook to html and renders that in the browser. This is how the plugin works:
- Convert .ipynb → html using nbconvert
- Convert html → jsx using https://github.com/reactjs/react-magic/blob/master/README-htmltojsx.md
- Web-based version https://magic.reactjs.net/htmltojsx.htm
- Add the converted jsx notebook as a component in a mdx doc page
- TestJupyterComponent.js goes into docs/jupyter.mdx
How to use
To test this,
git clone https://github.com/jlin27/docusaurus-plugin-jupyter-notebook
cd my-website
npm run typescript
yarn build
yarn start
Make sure you have all the docusaurus installation setup.
To just test the plugin:
cd my-website/plugin-jupyter-notebook
npm run tsc // Runs Typescript compiler