badgen / badgen.net

Fast badge service

Badgen Service

Home of badgen.net, fast badge generating service.

The Badgen Story

That's a service, that's a library, hooorey! - @tunnckoCore

Finally something to replace http://shields.io - @EGOIST

Epic work on Badgen! Porting the @dependabot badges over to it now. ⚡️ - @greybaker

The badgen library was born as an exploration of "is it possible to generate badge SVG markup directly (without using pdfkit/canvas/puppeteer to measure text width)?". The result is better than I expected, Width of Verdana (the de-facto font for badges) text can be calculated precisely with a prebuilt char-width-table, even no need to worry about kerning 🤯

Then, logically, Badgen Service was born. I had a good time with shields.io, but as time goes by Shields gets slower, leaves more and more broken badges in READMEs. Badgen is trying to be a fast alternative with simplicity and flexibility. Its codebase is simple (2K LoCs vs Shields' 22K LoCs), well structured and fun to develop - it is pretty easy to add badge(s) for new service(s).

In the beginning, I was considering both Vercel and Google Cloud Functions. Then Vercel announced Edge Network on the same day as badgen.now.sh (the PoC of Badgen Service)'s reveal, what a fate! Cloudflare powered Vercel Edge Network is a perfect choice for such service, caching and scalability in simplicity. Badgen is the fastest possible badge generating service out there. It's fast, it's reliable, it's globally distributed and cached, thanks to Vercel.

At the time of badgen.now.sh's reveal, it had only four live badges as demonstrations. Since then, thanks to awesome people's help, Badgen keeps getting better at a fast pace. Welcome to join us, let's build the best badge service in the universe 🔥

Anatomy

• Written in TypeScript
• Using badgen library to generate svg on the fly
• Two visual styles
  • https://badgen.net - classic style badges
  • https://flat.badgen.net - flat & square style badges
• Two badge types
  • static badge - URL defined badge (label, status, color)
  • live badge - Show live status from 3rd party services
• Builtin Icons & External Icon Support
  • see badgen-icons
• Docker image amio/badgen

Developing

start dev server

npm run dev

start prod server

npm run build && npm start

run with docker image

docker run -p 3000:3000 amio/badgen

Add Live Badge

If a service you wish to have is still missing here, we welcome new contributions. Basically, you need to add a file in api/[name-of-service].ts and that's it. Take /crates as an example:

• api/crates.ts - main function for crates badges
• libs/badge-list.ts - contains index of all live badges

To ensure that your addition is working correctly, start the development server with npm run dev.

NOTES

• You can create live badge without touching badgen.net's code. Checkout docs for /runkit or /https.

• The /runkit support would be super handy for prototyping a new live badge.

Add Icon

You can contribute icons to badgen-icons. Please make sure new icon is optimized using svgomg.

Tracking Policy

Badgen use Sentry to collect errors for improving service, use Google Analytics on doc pages (home, /github, /packagephobia, etc.) to understand overall usage.

Badgen do not collect any identifying information.

Environments

Supported environment variables for managing a Badgen instance.

• GITHUB_TOKENS - Comma delimited list of Github Tokens. Required for Github Badges
• GITHUB_API - Custom Github API endpoint. e.g., https://github.mycompany.com/api/v3
• GITHUB_API_GRAPHQL - Custom Github GraphQL API endpoint. e.g., https://github.mycompany.com/api/graphql
• NPM_REGISTRY - Custom NPM registry endpoint
• SENTRY_DSN - Sentry Error Monitoring Data Source Name
• GA_MEASUREMENT_ID - Google Analytics Measurement ID

Contributors

Thanks to our contributors 🎉👏

Support Badgen

We are on OpenCollective https://opencollective.com/badgen

Support this project by donation, help Badgen continue and evolving!

[Become a backer]

Sponsors

badgen.net's Issues

Welcome docs

I've added a "Badgen Story" to README.md (@olstenlarck I stole you a word :P), hoping to give new comers a general idea how Badgen comes from.

While I'm not sure I spells everything correctly and didn't cause anything confusion, if you find something weird please let me know 😅

Besides that, do you think there should be a guide(some sort of anatomy of the project) helping new contributor to get hands on this quickly? What should get explained/mentioned in the guide?

[IDEA] Use cloudflare to cache and save on bandwidth

So this is not a real issue but just an idea.

I see that today, loading badgen.net takes 144 KB of bandwidth, and it will become bigger every time new badges are added.

As you said on your comment, the bandwidth usage is already pretty high, and I guess the index page is a big part of it.
Also, the response time on uptime robot is now > 500ms, which is a lot more than a few weeks ago.

Maybe you could use the free plan of Cloudflare to cache live badges for a few minutes, and static badges for a whole week!
Docs and index could also be cached for a few minutes
It could even prevent occasional downtime

GitHub badges get rate limited

Patreon Logo svg

Can we think for adjust it to our needs?

https://www.vectorlogo.zone/logos/patreon/patreon-ar21.svg

I'm not on SVGs too much. ;d We can only get the "P" one, but should somehow invert the colors. Actually... the orange should be white and and the rest transparent?

Internal Server error on npm downloads

I understand that my package kinda don't have downloads and/or api not refreshed yet, but would be better to show dowloads/month | unknown or such like that.

Otherwise badges are broken.

https://github.com/olstenlarck/flow-reporter-codeframe

github "open issues" badge is red even if 0 issues open, should be green

I have a repo with 0 issues open. Unfortunately it's badge shows in red, which is discouraging.

Surely, where to draw the line between red/green is debatable, no question about it. But I'd say that 0 is a certain green.

Personally, 0 green and everything else red suits my needs, because my repo is small and I do intend to keep it on zero and will put a lot of effort on it!

Cache is too long?

Pretty much.. After the last changes related to the cache, it started to feels.

I sometimes am forced to visit the badgen badge url to trigger refresh.
Not to mention this not always works ;d

Even with F5, even with CTRL+R, even with another browser - nothing.

OpenCollective

Official badge documents

https://github.com/opencollective/opencollective/wiki/Github-banner

Preview

• https://opencollective.com/parcel/backers/badge.svg
  
• https://opencollective.com/parcel/sponsors/badge.svg
  

[npm]: downloads/day fails again (shows 0)

Pretty strange. Now it wants to be 3 days before ... ;d wat the heck. I totally should see how Shields handles this.

github open-issues badge showing "unknown"

Check the following badge:

https://badgen.net/github/open-issues/papb/better-promise-error-log

It shows "github | unknown", instead of the expected "open issues | 0".

What could be causing this?

Uptime Robot examples have misspelled "lasy-day"

The Uptime Robot badges incorrectly have lasy-day, e.g. /uptime-robot/lasy-day/m780731617-a9e038618dc1aee36a44c4af

This is incorrect, and gives unknown topic:

It should instead have day:

Docker Badge

Stars, Pulls, Build Status.

And as an example usage of icon.

Bug in badges with scoped packages

Because the "workaround" https://github.com/amio/badgen-service/blob/master/libs/live-fns/npm.js#L96

It seems that https://registry.npmjs.org/@babel%2Fcore/* shows empty object
but removing the star shows all versions.

proof: https://registry.npmjs.org/@babel%2Fcore

It's interesting why with @nestjs/core/* it still works 😆

More live badge support

There are two kinds of live badge in badgen service:

1. Has "official" badge service with same style, like travis, circleci.
   badgen service will respond a 302 redirect to the official address, theoretically that should be the fastest badge service.
2. Has an api for generating badge, like npm version, npm downloads.
   badgen service will respond a 302 redirect to resolved static badge url(In favor of Now CDN, no more perf tricks 🎉💪) the badge, depends on api response, and cache that response data for 60 seconds.

If you would like to propose a badge, please post it here, the api service or the official badge url schema.

There's a long list on shields.io to implement one by one, hope that won't take too long :P

[flat.badgen.net] Usage example alignment

badgen.net:

flat.badgen.net:

Looks like it needs an additional 5 spaces at the beggining of each line (excl the first line) to cover the flat.

Launch badgen.net

🎉🎉🎉

Badgen gets flatten!

• https://flat.badgen.net for flat style
• https://badgen.net for classic style

What about badgen.now.sh?

https://badgen.now.sh will serves exactly the same as badgen.net, as long as badgen.net exists.
Secret: they are all now aliases of same service ;)

New live badges since Badgen’s reveal:

chrome-web-store, circleci, codecov, crates, david, github, homebrew, and uptime-robot, looking foward for more!

Query params support

label, emoji, list, checkout docs for details.

Badgen is on twitter

Say hi @badgen_net 🤗, updates are comming 💪

VSCode Marketplace Badge

Could you add VSCode Marketplace badge like this

Badge to show dependents of a npm package

Would be nice to have a badge to show off how many npm packages depend on my package. For example, the 1717 Dependents number at https://www.npmjs.com/package/got.

You could either:

• Use the API. Example: https://github.com/chrisdickinson/npm-get-dependents
• Scrape. Example: https://github.com/astur/check-npm-dependents

Badge to show dependents of a GitHub repo

The number you find here: https://github.com/chalk/chalk/network/dependents

GitHub has a GraphQL API endpoint for it: https://developer.github.com/changes/2018-04-24-preview-dependency-graph-and-vulnerability-hooks/

Feature Request: Add hackage

Maybe you could add hackage bagdes like shields io

Support for CodeCov

And this service would be just enough and finished :D :)

More GitHub Badges

• Contributors
• Release downloads (total/latest)
• Last commit

Round up coverage percentage if it is like `.0%`

Currently it should shows 100.0% or 76.0% and that's ugly. It should have decimal only if it is different than 0.

Logo exploration

Some exploration on logo 🤗

Title

Inline

How to get uptime robot ID?

I see that the URI for the uptime of badgen-service is

https://badgen.net/uptime-robot/day/m780731617-a9e038618dc1aee36a44c4af

How to find the ID at the end of the URI ? I cannot find it from the stats page, which is https://stats.uptimerobot.com/z6nqBfYGB

Thanks for your help

Support `suffix`, `query` and `uri` query params

Related to one answer in Reddit.

https://www.reddit.com/r/javascript/comments/91m0cn/badgen_fast_badge_generating_service_shieldsio/e2zje8w

SO: https://stackoverflow.com/questions/50122026/how-to-get-the-number-of-people-in-a-getsatisfaction-community-for-shields-io/50122101#50122101

---

The suffix is kinda good idea. But uri may be a bit more complex.

• uri is for replacing the request endpoint, for example, to npm API
• query is for selecting things from the return by uri data
• suffix is value appeded to the right side of the badge

Testing against canary

Run tests on real production environment 💪

Thanks to now alias this can be so easy!

  "scripts": {
    "deploy": "now && now alias badgen-canary",
    "postdeploy": "TARGET=https://badgen-canary.now.sh npm run test"
  }

Rename/consistency for CIs - Circle, Travis, AppVeyor

For consistency, i think it would be good all of the CIs to be build | passing or build | success, or every CI to have label its name, or every CI badge to be same, except icons

• CircleCI or
• TravisCI or
• AppVeyorCI or

Always dreamed about that 😆

Would be awesoome if they include icons by default and be build | passing.

Hm. What about "icon style" at icon.badgen.net? So all badges will have their respective icons (if they have). How cool is that (btw, should add white icons too ;d)

david-dm.org

Docs

https://david-dm.org/

Example

https://david-dm.org/zeit/pkg/
https://david-dm.org/zeit/pkg/info.json
https://david-dm.org/zeit/pkg/dev-info.json
https://david-dm.org/zeit/pkg/peer-info.json
https://david-dm.org/zeit/pkg/optional-info.json

Support github releases/tags

No, seriously, that's all i need :D

Feature request: Support path query param for david-dm badges

david-dm supports passing a path parameter to read package.json related to the github repo + path specified in the parameter.

This makes it possible for monorepos that include multiple packages (mulitple package.json files) to list dependency information via david-dm for the specific packages. Zendesk Garden is a monorepo using this feature of david-dm: https://github.com/zendeskgarden/react-components#installation

Note that zendesk garden is using shields.io for these badges.

This feature request is for adding path support for david-dm badges to badgen.

Here is a valid david-dm URL using path to get dependency info for package in a monorepo:
https://david-dm.org/cerner/terra-framework?path=packages/terra-hookshot

Here is what I'm thinking for the badgen API for this:
https://badgen.net/david/cerner/terra-framework?path=packages/terra-hookshot

Code Climate Badge

https://developer.codeclimate.com/#overview

• Issues
• Maintainability
• Coverage
• Technical Debt

Pass request object as 1st argument to each live badge function

This will allow more flexibility and users of the RunKit will be able to access whatever they need. For example, getting req.path parsing it and getting queryparams so depending on some params, to base some logic.

For builtin ones, this will allow for listening on the registry_uri, for example, in the npm live badge. No need to have global support (inside all live badges) for this or such query params. Even can be more, for example in the npm default export it will be passed only to the /npm/v endpoint, so no security or such issues.

So

module.exports = async function npm (req, method, ...args) {
  switch (method) {
    case 'v':
      return version(req, args)
    case 'dt':
      return download('total', args)
  }
  // code ...
}

async function version (req, args) {
  const registry = qs.parse(req.path, true).registry_uri || 'registry.npmjs.org'

  // code ...
}

So nor other npm endpoints, nor other live badges will have access to that registry_uri query param, it just won't matter.

[idea] bare badge

1. What about a badge without left hand-side label? Like this one with whole blue background:
   

2. The url could be:

   1. /b/:status - b stands for "bare" or shrunk "badge"
   2. /bare/:status
   3. other proposal

The idea comes from this tweet, will it be useful? Maybe use it for twitter badge or something, I think it would be better looking than current social badge.

Take a vote, 👍for useful, 👎for not useful, 😄🎉😕for url options 1/2/3.

travis redirect build unknown

I have a repo: https://github.com/styfle/packagephobia

I tried visiting https://badgen.now.sh/travis/styfle/packagephobia which redirects to https://api.travis-ci.com/styfle/packagephobia.svg?branch=master but that shows "build unknown".

My readme is currently using https://travis-ci.org/styfle/packagephobia.svg?branch=master which redirects to https://api.travis-ci.org/styfle/packagephobia.svg?branch=master and this correctly hows "build passing"

Note the difference here is .com vs .org.

Feature request: For The Badge Style

See https://forthebadge.com/
shields.io does support custom generation (not complete though) of those, what do you think ?

Feature request: social badges

For example:

More: https://shields.io/#/examples/social

Bug in OpenCollective badges

It shows (1,967,277.00) but it is 19,672.77 and same for the yearly income.

but it is a lot smaller ;d

Support for npm downloads total

It seems it's missing.

![](https://img.shields.io/npm/dt/react.svg)

badge:

---

daaaamn, btw.. more often and more often Shields goes too slow.

Runkit Support

Live badge with data from a runkit endpoint.

URL

https://badgen.net/runkit/:endpoint_id/:params

Example Endpoint

RunKit Notebook: https://runkit.com/amio/peoples

RunKit Notebook: https://runkit.com/amio/satisfaction

Coveralls branch percentage bug?

I'm not sure if this is a bug in badgen or Coveralls API, but shields.io seems to be returning the expected 100% while badgen seems to be using a percentage from a recent PR.

Badgen URL: https://flat.badgen.net/coveralls/c/github/expressjs/morgan/master
shields.io URL: https://img.shields.io/coveralls/expressjs/morgan/master.svg?style=flat-square

Rendered:
Badgen:
shields.io:

PageSpeed Badge

Seems there could be a badge for this:

Web Test
https://developers.google.com/speed/pagespeed/insights/?utm_source=analytics&tab=desktop&url=https%3A%2F%2Fbadgen.now.sh%2F

API Explorer
https://developers.google.com/apis-explorer/#p/pagespeedonline/v4/pagespeedonline.pagespeedapi.runpagespeed?url=https%253A%252F%252Fbadgen.net&_h=1&

API Endpoint
https://www.googleapis.com/pagespeedonline/v4/runPagespeed?url=https%3A%2F%2Fbadgen.net

Support for flat icons

I see that you support flat badges in badgen, are they supported here? I'm not seeing anything about flat icons inside the docs.

Doc page for live badges

Finally start building docs for live badges 👻

Starting from packagephobia https://badgen.net/docs/packagephobia

GitHub release/tag is not perfect

More of a note to me.

Currently we get the "first in response array" tag/release.
The Babel example is perferct for showing the problem.

I think with /github/release/owner/repo we should show latest stable release/tag. In the case with Babel latest one happens to be a "prerelease", so it shows it in orange.

I'm thinking for this

• /github/release/owner/repo should show lastest stable release (e.g. Babel's v6), in blue
• /github/release/owner/repo/prerelease show latest prerelease

Or what about /github/prerelease/owner/repo for the prereleases and /github/release for the stable ones?

Perfect would be /github/release and /github/prerelease, because this will allow for static github badges like /github/release/owner/repo/v1.2.3 ... which... actually, not make much sense because you can just /badge/release/v1.2.3/color ;d

Bugs badge

Each issue can have some labels, for example: bug. It'd be very nice to retrieve the amount of open issues labeled bug :) The label doesn't have to be named bug. Note it can be bleeding bug or buggy or something like that :)

Example badge:

Problem with the npm downloads/day

It's always, or mostly always, a zero.

Probably we should use the /range for the previous day, not for the current one.

I can dig what Shields does, but probably is that - for the previous day.

That's problem with the API actually:
https://api.npmjs.org/downloads/point/last-day/react

In most of the time it will show 0, i assume.

Bug in npm badges

Again. :D

@babel/core is cyan, but shouldn't be, because it is latest.

The cyan should be only if non-latest dist-tag is passed, no matter it is scoped or not.

Support Cirrus CI

https://cirrus-ci.org/guide/writing-tasks/#embedded-badges

But not sure for the states. Also not sure which projects uses it so to use for examples.

I'm consider switching to it in near future. The only thing that stopping me currently is environment variables handling, which i highly depend on for my full automation of auto-release, auto-update and auto-publish flow.

The cool thing about CircleCi is that it allows you to have one "global store" of environment variables, so you set it once and every old and new project you setup you can access it.

It's quite slow to do that for each project. Add cirrus config file, go to cirrus dashboard add env to that specific repo and etc. All that was one of the reason i switched from travis.

So yea, Cirrus CI is amazing and fast, but. :D

Update semver colors for -dev

Maybe introduce another color?