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-theme-api

v1.1.2

Published

Theme for using GitBook as an API documentation

Downloads

576

Readme

GitBook API Theme

Theme for using GitBook to publish an API documentation.

This theme works perfectly with search plugins (like the default plugin or algolia).

Screenshot

It also integrates well with the default fontsettings plugin to use the Dark theme.

Dark theme

Usage

This theme requires GitBook version 3 or later.

Add the theme to your book's configuration (book.json):

{
    "plugins": ["theme-api"]
}

To use the Dark theme by default:

{
    "plugins": ["theme-api"],
    "pluginsConfig": {
        "theme-api": {
            "theme": "dark"
        }
    }
}

Defining methods

The theme allows to easily define methods with examples for different languages, using the templating blocks syntax.

A method block can contain any number of nested sample and common blocks.

Those nested blocks are documented below.

Sample blocks

While the body of the method block will be used as the definition for your method, each sample will be used to display examples. To do so, each sample block should specify a language using the lang arguments.

This is great for managing examples in different languages, for instance when documenting multiple API clients.

{% method -%}
## Install {#install}

The first thing is to get the GitBook API client.

{% sample lang="js" -%}
```bash
$ npm install gitbook-api
```

{% sample lang="go" -%}
```bash
$ go get github.com/GitbookIO/go-gitbook-api
```
{% endmethod %}

JS Sample Go sample

On each page containing method blocks with samples, a switcher is automatically added at the top-right corner to easily select which language to display.

The name of each language can be configured in your book.json file, with it's lang property corresponding to the sample block lang argument:

{
  "plugins": ["theme-api"],
  "pluginsConfig": {
    "theme-api": {
      "languages": [
        {
          "lang": "js",          // sample lang argument
          "name": "JavaScript",  // corresponding name to be displayed
          "default": true        // default language to show
        },
        {
          "lang": "go",
          "name": "Go"
        }
      ]
    }
  }
}

Language switcher

Most programming languages are supported by default, with name mapping following the highlight.js convention.

Note that a sample block can contain any markdown content to be displayed for this language, not only code blocks, as illustrated below.

Common blocks

Common blocks are used to display content to be displayed for all languages in your examples.

{% method -%}
## Simple method

{% sample lang="js" -%}
This text will only appear for JavaScript.

{% sample lang="go" -%}
This text will only appear for Go.

{% common -%}
This will appear for both JavaScript and Go.
{% endmethod %}

Layout

The theme provides two layouts to display your examples: one-column or two-columns (split).

One column layout

One column

Split layout

Split

The layout can be toggled from the toolbar using the layout icon: Layout icon

The default aspect can also be set in the theme configuration in the book.json file:

{
  "plugins": ["theme-api"],
  "pluginsConfig": {
    "theme-api": {
      "split": true
    }
  }
}