Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shvbsle/react-jupyter-viewer
A react component to embed .ipyb notebooks in a blog or something
https://github.com/shvbsle/react-jupyter-viewer
ipython ipython-notebook jupyter jupyter-notebook npm react react-component react-components react-native reactjs
Last synced: 25 days ago
JSON representation
A react component to embed .ipyb notebooks in a blog or something
- Host: GitHub
- URL: https://github.com/shvbsle/react-jupyter-viewer
- Owner: shvbsle
- Created: 2019-10-23T14:06:21.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T04:33:01.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T15:24:31.550Z (25 days ago)
- Topics: ipython, ipython-notebook, jupyter, jupyter-notebook, npm, react, react-component, react-components, react-native, reactjs
- Language: Jupyter Notebook
- Size: 2.41 MB
- Stars: 60
- Watchers: 4
- Forks: 20
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Jupyter-Viewer
## IMPORTANT!!!!
I'm looking for contributors. I noticed that quite a lot of developers find this tool useful and at the same time I feel guilty that I cannot devote enough time to this project due to personal committments. Please reachout in case anyone wants to contribute!
Join the following Slack Workspace for any queries:
https://join.slack.com/t/reactjupytern-0nc7370/shared_invite/zt-140lhgtlg-HaVJNl5OTEdeK1ZomArVZA
### Use jupyter notebooks as a blog
The only reason why I am creating this component is to be able to publish my .ipynb notebooks on my GitHub pages as blog post. I have too many notebooks lying around with my programming notes. I'm too lazy to boot a ipython kernel to view one of my notebooks. Hence, this component.
I like the default notebook viewer provided by github but there are a few features that would make it more usable for me, which are mostly these: **downloading it as a PDF, dark mode, mobile-enabled view and ability to publish my notebooks as blogs**
Drop me a message if anyone wanna contribute.
(cover image src: https://notionpress.com/blog/wp-content/uploads/2018/06/Cover-design.png)
### Feature Roadmap
* [X] Load from local file
* [X] Load from URL
* [X] Code blocks
* [X] Render markdown blocks
* [X] Render image blocks
* [X] Render Error blocks
* [X] Add tags to distinguish outputs
* [X] Cell block numbering
* [X] Header Tab (Showing name of notebook and date etc.)
* [X] Hide code execution number (toggle)
* [X] Theme Toggle
* [X] Markdown Dark Theme
* [X] Resolve Relative Markdown sources for images
* [ ] Split as A4 size pages
* [ ] Side-by-side view
* [ ] Download notebook as pdf (will have to enable wordwrap while downloading it as pdf)
* [ ] text/html code block parser
* [ ] Markdown based index
----
#### Desirable Props
prop | priority | description
---------|----------|-------------
file | Critical | Load a file from storage
url | Critical | Load a file from storage
theme | good to have| Change from dark to light
blog title| Critical | Title for the blog.
blog cover|good to have| An option to put in cover pic for your blog
---
### Usage
Note that the notebook URL must be the raw_notebook url on github. Click on the 'raw' button in github notebook preview to get the raw source.
```javascript
import React from 'react';
import './App.css';
import JupViewer from './JupViewer'
const ipynb = require('./BenchmarkNotebook.ipynb')
class App extends React.Component {
render() {
return (
)
}
}
export default App;
```
---
### Desktop Preview
### Mobile Preview with theme toggle
Dark|Light
----|----
|
---
### Dependencies
* react-ace
* react-markdown
* antd (UI lib cuz I'm too lazy)