Jupyter Notebooks as Blogs

ShivB — Thu, 24 Oct 2019 20:17:44 +0000

I've been a lurker for quite some time and finally decided to make my first post today for the sake of Hacktober Fest. I got into react around 3 weeks ago and quickly started enjoying it. I'm pretty late to the #hacktoberfest party but here is a fun two-day project that I did.

What did I make?

It's a react component that can display a typical jupyter notebook from a file or URL like a blog post. That's pretty much it. It's still a work in progress tho.

(cover image src: https://notionpress.com/blog/wp-content/uploads/2018/06/Cover-design.png)

I've seen a lot of technical blogs with this similar style of representing explanations along with code examples in an interleaved fashion so I thought that it'd be a sweet component to have in my own blog.

Why?

The obvious question one might ask is, "why would you want to do that if there is already a '.ipynb' previewer provided by Jupyter or GitHub?". There were mainly 5 reasons that compelled me to make this component:

1) I was surprised to not find any react package that already did this! I needed a component that was easy to use. This is as easy as it gets:

import React from 'react';
import './App.css';
import JupViewer from './JupViewer'

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="https://raw.githubusercontent.com/jakevdp/PythonDataScienceHandbook/master/notebooks/00.00-Preface.ipynb"
        />
      </div>
    )
  }
}

export default App;

2) I have too many jupyter notebooks with my programming notes, lying around, and I'm too lazy to boot a jupyter notebook for that. I use my jupyter notebooks for note-making or recording some interesting algorithm problems that I've solved. I needed something that was easily accessible.
3) I wanted the ability to download the jupyter notebook as pdf to review my programming notes in free time. Github doesn't allow me to download jupyter notebooks as PDFs. Plus GitHub's mobile view of a jupyter notebook is not very pretty. Looks decent on mobile too.

Dark	Light

4) I wanted to publish some of my programming explorations on my blog and I realized that the ability to embed a jupyter notebook as a blog works out really well as I only have to work with markdown and not care about CSS or HTML. Works pretty well with markdown.

5) I needed a dark theme.

Although the scope of this component, currently, is very specific to my needs, I hope that someone out there with needs similar to mine will be benefited by this.

GitHub Link to Repo: https://github.com/ShivBhosale/React-Jupyter-Viewer

Finally

Your inputs and suggestions are welcome!

Edits

E1: Added updated features

DEV Community: ShivB

Jupyter Notebooks as Blogs

What did I make?

Why?

Finally

Edits