A react component to embed .ipyb notebooks in a blog or something
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
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)
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 |
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.
import React from 'react';
import './App.css';
import JupViewer from './JupViewer'
const ipynb = require('./BenchmarkNotebook.ipynb')
class App extends React.Component {
render() {
return (
<div className="App">
<JupViewer
title="Jupyter as a Blog!"
subtitle="I've always wanted to publish my jupyter notebooks as blogs. Finally I can."
coverImg="https://notionpress.com/blog/wp-content/uploads/2018/06/Cover-design.png"
// file={ipynb}
file="https://raw.githubusercontent.com/jakevdp/PythonDataScienceHandbook/master/notebooks/00.00-Preface.ipynb"
/>
</div>
)
}
}
export default App;
Dark | Light |
---|---|