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

@thebespokepixel/badges

v4.0.8

Published

documentation/readme badge generation and management

Downloads

23

Readme

Badges

Automatically render project badges into readme and documentation files, with consistent styling.

Publishing Status

Status npm Libraries.io
Travis Rollup

Development Status

Travis Libraries.io
Snyk Code-Climate Code-Climate Coverage

Documentation/Help

Twitter

There's a wealth of status badges available out there, but even using a service like https://shields.io still doesn't cover everything and what it covers can be missing functionality…

…how about handling differences in your published and development branches?

…and, of course, you want it all looking organised and consistent, as much as possible…

Doing it properly means too much faffing about, despite it being useful to have 'at-a-glance' status reporting. This module is my attempt to cover off all that badge work into something I can simply include in package.json and move on.

If there are badges you'd like to see included, add an issue above, or better still a PR and I'll add it.

Usage

Installation

npm install --save @thebespokepixel/badges

Example

With this source.markdown:

  Badges:
  ${badges}

Read it in as a template and merge the AST:

/* Import the module… */
import {readFileSync} from 'fs'
import _ from 'lodash'
import remark from 'remark'
import badges from 'badges'

/* …then read the 'badges.readme' stanza from package.json and send the AST into remark etc. */
const content = {
  badges: await badges('readme')
}

const template = _.template(readFileSync('./source.markdown'))
const page = await remark().process(template(content))

Supported badges

  • Status (plus similar aux1 and aux2)
  • Travis (.org and .com)
  • Travis private repos (requires a travis private repo token)
  • Libraries.io [New]
  • Code Climate and Code Climate Coverage (requires a codeclimate repo token)
  • Inch CI
  • npm
  • Rollup
  • Snyk
  • Gitter
  • Twitter

David has been dropped as it seems the site is now dead.

Configuration

In package.json...

...
"badges": {
  "name": "badges", // Package name
  "github": "thebespokepixel", // github user
  "npm": "thebespokepixel", // npm user
  "libraries-io": "TheBespokePixel", // libraries-io github user (seems to use the name)
  "twitter": "thebespokepixel", // twitter user (optional, defaults to github user name)
  "devBranch": "develop", // Development branch name (optional, defaults to 'develop')
  "codeclimate": "a0a755b0fce22eb0b784", // codeclimate repo token (optional)
  "travis": "1a2b3c4d", // Travis 'Pro' private repo token (optional)
  "providers": { // Non-default badge provider configuration
    "status": {
      "text": "beta",
      "color": "blue"
    },
    "aux1": {
      "title": "github",
      "text": "source",
      "color": "4E73B6",
      "link": "https://github.com/MarkGriffiths/badges"
    }
  }
  "readme": { // Section with subtitles as map of arrays
    "Status": [
      [ "status", "npm", "travis-com", "libraries-io-npm" ],
    ],
    "Dev Status": [
      [ "travis-com-dev", "libraries-io-repo" ],
      [ "code-climate", "code-climate-coverage", "snyk" ]
    ],
    "Documentation/Help": [ "inch", "twitter" ]
  },
  "docs": [ // Lines as an array of arrays
    [ "aux1", "travis" ],
    [ "code-climate", "code-climate-coverage" ],
    [ "libraries-io-npm" ]
  ]
}

Full list

|ID|Badge Description|Link| |:-|:-|:-| |status|Generic status| |aux-1|Generic aux 1| |aux-2|Generic aux 2| |gitter|Gitter chat badge|https://gitter.im| |code-climate|Code Climate Maintainability|https://codeclimate.com| |code-climate-coverage|Code Climate Coverage| |libraries-io-npm|Libraries.io latest release dependency status badge|https://libraries.io| |libraries-io-repo|Libraries.io repo deep dependency status badge (dev branch)| |inch|Inch-CI doumentation coverage|https://inch-ci.org| |inch-dev|Inch-CI doumentation coverage (dev branch)| |npm|NPM published version|https://www.npmjs.com| |rollup|Show Rollup/Treeshaking module/mjs support|https://rollupjs.org/guide/en/| |snyk|Show Snyk Vulnerablilities|https://snyk.io| |travis| Travis.org build status|https://travis.org| |travis-dev| Travis.org build status (dev branch)| |travis-com| Travis.com build status|https://travis.com| |travis-com-dev| Travis.com build status (dev branch)| |travis-pro| Travis.com build status with private token| |travis-pro-dev| Travis.com build status with private token (dev branch)|

Where possible, https://shields.io is used, or shields.io 'flat' styling is chosen where available from other providers.