https://github.com/jlin27/docusaurus-plugin-jupyter-notebook

[WIP] Jupyter notebook plugin for docusaurus
https://github.com/jlin27/docusaurus-plugin-jupyter-notebook

Last synced: about 1 month ago
JSON representation

[WIP] Jupyter notebook plugin for docusaurus

• Host: GitHub
• URL: https://github.com/jlin27/docusaurus-plugin-jupyter-notebook
• Owner: jlin27
• Created: 2021-03-12T18:37:28.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-06-23T22:58:30.000Z (over 3 years ago)
• Last Synced: 2024-08-01T13:33:21.204Z (4 months ago)
• Language: HTML
• Homepage:
• Size: 583 KB
• Stars: 5
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-ccamel - jlin27/docusaurus-plugin-jupyter-notebook - [WIP] Jupyter notebook plugin for docusaurus (HTML)

README

        
# 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](https://docusaurus.io/) supports a plugin architecture. This repo demonstrates the flow of a plugin that could be used to parse a [jupyter notebook](https://jupyter.org/) 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:

1. Convert .ipynb → html using nbconvert 

2. Convert html → jsx using https://github.com/reactjs/react-magic/blob/master/README-htmltojsx.md

  * Web-based version https://magic.reactjs.net/htmltojsx.htm

3. Add the converted jsx notebook as a component in a mdx doc page

  * [TestJupyterComponent.js](https://github.com/jlin27/docusaurus-plugin-jupyter-notebook/blob/main/my-website/src/pages/TestJupyterComponent.js) goes into [docs/jupyter.mdx](https://github.com/jlin27/docusaurus-plugin-jupyter-notebook/blob/main/my-website/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](https://v2.docusaurus.io/docs/installation) setup.

To just test the plugin:

```

cd my-website/plugin-jupyter-notebook

npm run tsc // Runs Typescript compiler

```