npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@teaglebuilt/gatsby-theme-binder

v1.0.4

Published

<div align="center"> <h1 style="margin-bottom: 0;">Gatsby Theme Binder</h1> <p style="margin-top: 1em; margin-bottom: 2em; font-size: large;"> Power your gatsby site with kernels from jupyter <a href="https://mybinder.org" alt="drf" target="_b

Downloads

4

Readme

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: `gatsby-theme-binder`,
    options: {
      contentPath: "content",
      types: ["py"],
      binder: {
        repo: "teaglebuilt/Cookbook",
        branch: "master",
        kernelType: "python3"
      }
    }
  }
];
  • 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;