DEV Community

Cover image for New Gatsby theme powered by Jupyter!
dillan teagle
dillan teagle

Posted on • Originally published at teaglebuilt.com

New Gatsby theme powered by Jupyter!

Introducing Gatsby Theme Binder

GitHub logo teaglebuilt / gatsby-theme-binder

šŸŒ” Gatsby theme for interactive remark code blocks powered by jupyter kernels for code execution.

Gatsby Theme Binder

Power your gatsby site with kernels from jupyter Powered by mybinder.org

This project was initially inspired by Min RK's Thebelab package. Then finding Juniper. The goal is take this functionality wrapped into a gatsby package that allows for customization and accesibility.

How it works

The theme will connect to a launched docker image of your chosen github repository as a jupyter notebook. An active connection will persist to the given kernel that is active in your notebook. You can choose which kernel to connect to in your gatsby config. You can use this theme just for a source connection with server sent events, or you can also import the interactive text editor and execute / render results from the kernel itself as a remark component. There are further instructions below.

Note, this is my first gatsby theme and I am not sure if this isā€¦

Many of us know the great benefits of using gatsby. In 2020, writing your content from markdown is very popular and has many different benefits in terms of SEO, delivery, and performance. None the less, able to integrate react components into your static content written in markdown. We all know this.

Well, we also have seen examples of Gatsby used in the context if SSR. It is a little tricky in Gatsby without the capabilities of using Suspense and Lazy loading. Although, with server sent events, we can empower a gatsby static website with an active kernel from Jupyter Notebooks.

What is Jupyter

Jupyter Notebooks are commonly used for data science and bring the capability to build notebooks of code with active execution for discovery purposes.

What is Binder

MyBinder is a website that launches a docker image of your repository with the dependencies as a jupyter notebook. For example, I can launch a repository with python and its project dependencies, and open a jupyter notebook with a python2 or 3 kernel and the project dependencies installed from requirements.txt...

Alt Text

Where are you going with all of this?

In Gatsby Theme Binder we can connect to mybinder from server sent events and power our gatsby website with the given kernel your using. Therefore, you can render a remark "markdown" react component that is a text editor, capable of executing code and rendering results just like a shell and cell from jupyter notebooks.


Alt Text


How to use it

A base folder is created with two child folders...


/whatever_you_name_it
    /code
    /posts

Enter fullscreen mode Exit fullscreen mode

/code will hold the code files that you want to render inside your text editor on page load.

Instructions are noted in the readme of the options needed in your gatsby config. One important note is that you will need to import the renderAST component into your page template or layout component and pass in the htmlAST from graphql. This will enable rendering the component in markdown.

To use the component, simply add it to your markdown post with the name of the file and the language


<codeblock filename="test" lang="python"></codeblock>

Enter fullscreen mode Exit fullscreen mode

Reference of Technologies used

You may of heard of jupyterlab. It is a python package that has interface that far exceeds original notebooks with extensible features for customization. Jupyterlab can be extended using NPM packages to their public api.

Below are two NPM packages that I am using to integrate jupyter notebooks into my gatsby site.

GitHub logo jupyterlab / jupyterlab

JupyterLab computational environment.

Installation | Documentation | Contributing | License | Team | Getting help |

JupyterLab

PyPI version Downloads Build Status Build Status Documentation Status Crowdin GitHub Discourse Gitter Gitpod

Binder

An extensible environment for interactive and reproducible computing, based on the Jupyter Notebook and Architecture. Currently ready for users.

JupyterLab is the next-generation user interface for Project Jupyter offering all the familiar building blocks of the classic Jupyter Notebook (notebook terminal, text editor, file browser, rich outputs, etc.) in a flexible and powerful user interface JupyterLab will eventually replace the classic Jupyter Notebook.

JupyterLab can be extended using npm packages that use our public APIs. The prebuilt extensions can be distributed via PyPI conda, and other package managers. The source extensions can be installed directly from npm (search for jupyterlab-extension) but require additional build step. You can also find JupyterLab extensions exploring GitHub topic jupyterlab-extension. To learn more about extensions, see the user documentation.

The current JupyterLab releases are suitable for generalā€¦


JupyterLab - OutputArea


An interface for interacting with Jupyter, a large project split into packages relative to particular use cases and given functionality.


Jupyterlab - RenderMime


An interface for interacting with Jupyter, a large project split into packages relative to particular use cases and given functionality

So these two packages above is how I retrieve a given running kernel and interact with it directly through Javascripts EventSource() class.

The next challenge is how to render the results generated from the kernel. Originally I have used PrismJS and syntax highlighting to display code in my blog. For the purpose of creating interactive code blocks, I dediced to use CodeMirror.


CodeMirror

An interface for interacting with Jupyter, a large project split into packages relative to particular use cases and given functionality.

GitHub logo codemirror / CodeMirror

In-browser code editor

CodeMirror

Build Status NPM version

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 100 language modes and various addons that implement more advanced editing functionality. Every language comes with fully-featured code and syntax highlighting to help with reading and editing complex code.

A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality.

You can find more information (and the manual) on the project page. For questions and discussion, use the discussion forum.

See CONTRIBUTING.md for contributing guidelines.

The CodeMirror community aims to be welcoming to everybody. We use the Contributor Covenant (1.1) as our code of conduct.

Installation

Either get the zip file with the latest version, or make sure you have Node installed and run:

npm install codemirror

NOTE: This isā€¦

Inspiration

This project was initially inspired by Min RK's
Thebelab package. Then finding Juniper. The goal is take this functionality wrapped into a gatsby package that allows for customization and accesibility.

Top comments (2)

Collapse
 
teaglebuilt profile image
dillan teagle

If anyone happens to try it out. Please let me know your suggestions on how this can improve. This might be a bit early for a first release, but I thought this would be an opportunity for feedback on terms of accessibility and customization.

Collapse
 
saxenanihal95 profile image
Nihal Saxena • Edited

Hey teagle,

I have tried use the plugin but getting error

Drag Racing

Drag Racing