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

gitbook-plugin-github-embed

v1.3.1

Published

Embed github code snippets into gitbook

Downloads

14

Readme

npm version Build Status

Usage

Add this to your gitbook's configuration file to enable the plugin:

// book.js
{
  plugins: ['github-embed']
}

To configure the plugin:

// book.js
{
  pluginsConfig: {
    'github-embed': {
      showLink: boolean [default=true]
      reindent: boolean [default=true]
      cacheDir: string [default=undefined]
    }
  }
}

Embed Github Snippets into Gitbooks

Embed snippet text or whole files from Github repos into a GitBook.

{% github_embed "[github url]", [options] %}{% endgithub_embed %}

Where [github url] is:

https://github.com/[owner]/[repo]/blob/[ref]/[path]#[line numbers]

(You can also provide the url to a Github Enterprise installation)

Will produce something like this given the URL: https://github.com/v5analytics/gitbook-plugin-github-embed/blob/1cd16ac/index.js#L3-L8

website: {
    assets: "./book",
    css: [
        "github-embed.css"
    ]
},

index.js (lines 3–8)

Examples

// Load latest version of file "tag.js"   
{% github_embed "https://github.com/v5analytics/gitbook-plugin-github-embed/blob/master/src/tag.js" %}{% endgithub_embed %}

// Load latest version of file "tag.js" and show line 3
{% github_embed "https://github.com/v5analytics/gitbook-plugin-github-embed/blob/master/src/tag.js#L3" %}{% endgithub_embed %}

// Load latest version of file "tag.js" and show lines 1-5   
{% github_embed "https://github.com/v5analytics/gitbook-plugin-github-embed/blob/master/src/tag.js#L1-L5" %}{% endgithub_embed %}

// Load specific version of file "tag.js" and show lines 1-5   
// Press "Y" key in github to switch from master/latest to last commit
{% github_embed "https://github.com/v5analytics/gitbook-plugin-github-embed/blob/9ef6e532/src/tag.js#L1-L5" %}{% endgithub_embed %}

// Load full file, but hide interior lines
{% github_embed "https://github.com/v5analytics/gitbook-plugin-github-embed/blob/9ef6e532/src/tag.js", hideLines=['15-87'] %}{% endgithub_embed %}

Gitbook Block Options

Keywords specified in embedded snippets will override plugin configuration specified in book.js

  • showLink=true Show a link below the embedded source back to the source file. Defaults to true

      {% github_embed "[url]", showLink=false %}{% endgithub_embed %}
  • reindent=true Re-indent the lines given the line numbers. Defaults to true

      {% github_embed "[url]", reindent=false, showLink=false %}{% endgithub_embed %}
  • hideLines=[] Hide interior lines in a snippet. Should be in ascending order, can contain a range as a string.

      {% github_embed "[url]", hideLines=[2, '4', '7-10'] %}{% endgithub_embed %}

Styling the Link

Use a gitbook style override to adjust the style of the link. The class is .github-embed-caption.

Avoiding Rate Limit Errors

Set an environment variable to avoid rate limits. Create Token

GITBOOK_EMBED_GITHUB_API_TOKEN=[API Token]
# or
GITHUB_API_TOKEN=[API Token]

Adding Configuration For Multiple Github Resources

If you want to provide different configuration for different urls (for instance if you are embedding links to both a public and private repository and would like to use different tokens) you can add it to the plugin configuration like so:

// book.js
{
  pluginsConfig: {
    'github-embed': {
      showLink: false,
      urls: [
        {
          regex: /github\.com\/owner\/repo1/,
          token: '<Github API token>',
          showLink: true
        },
        {
          regex: /github\.com\/owner\/repo2/,
          token: '<Github API token>'
        }
      ]
    }
  }
}

If the plugin finds a link that matches the url configuration regex it will use that configuration.

You can also specify a github key to pass arguments to the github api client

urls: [
  {
    regex: /github\.com\/owner\/repo1/,
    token: '<Github API token>',
    github: {
      // https://github.com/octokit/rest.js#client-options
    }
    showLink: true
  },
]