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 the most effective approach. I would appreciate any feedback on how this theme could improve in terms of usage and accesibility. Thankyou for testing this out and please get in touch with me for feedback.

Install

npm install @teaglebuilt/gatsby-theme-binder

gatsby-config.js

plugins: [
  {
    resolve: `@teaglebuilt/gatsby-theme-binder`,
    options: {
      contentPath: "content",
      types: ["py"],
      binder: {
        repo: "teaglebuilt/Cookbook",
        branch: "master",
        kernelType: "python3"
      }
    }
  }
];

NOTE: If you added a filetype to the types option, you will see an error when you bring up the browser on localhost. This is because the theme created the folder for code, but there is not a file in the directory for the given filetype. Add a file with some code and the error will disappear. This is because the files are loaded into graphql to be queried in the componenmt.

• contentPath - name of parent directory where two folders will be created within.

  • posts ..markdown folder
  • code ..folder for code files...python, rust, javascript, etc...

• types - Your code files will load into graphql so make sure and reference any file types that you want to include that might exist in the code folder.

• binder - list the repo, branch, and kernel that you wish to connect to when binder has launched the docker image with the given kernel.

How to import the markdown component

import loadAst and pass in the htmlAst to render as markdown. Example below

import React from "react";
import { graphql } from "gatsby";
import Layout from "../components/layout";
import { loadAst } from "@teaglebuilt/gatsby-theme-binder/src/markdown";

export const query = graphql`
  query($Slug: String) {
    markdownRemark(fields: { slug: { eq: $Slug } }) {
      htmlAst
      frontmatter {
        id
        title
        description
      }
    }
  }
`;

const PostTemplate = ({ data }) => {
  const markdown = data.markdownRemark;
  const { frontmatter, htmlAst } = markdown;
  const { title, description } = frontmatter;
  const html = loadAst(htmlAst);
  return (
    <Layout title={title} description={description}>
      {html}
    </Layout>
  );
};

export default PostTemplate;