Skip to content
Fast svg badge generating service
Branch: master
Clone or download
Latest commit 34068cf Apr 1, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
components
libs
pages
static
test
.codeclimate.yml
.gitignore
.travis.yml
LICENSE.md
README.md
next.config.js
now.json
package-lock.json
package.json
service.js

README.md

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 with JavaScript (without using pdfkit/canvas/puppeteer to measure text length)?". The result is better than I expected, Verdana (the de-facto font for badges) text width 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 Now and Google Cloud Functions. Then Zeit announced Now CDN on the same day as badgen.now.sh (the PoC of Badgen Service)'s reveal, what a fate! Cloudflare powered Now CDN 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 Now.

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 latest, vanilla JavaScript => no build process
  • Using badgen library to generate svg on the fly => fast & stateless
  • Hosted on Now, serving behind Now CDN => faster & reliable
  • Cache less than 4 minutes => fresh & hot
  • Three endpoints in one server
  • Two badge types
    • static badge - URL defined badge (subject, status, color)
    • live badge - show live status from 3rd party services
  • Builtin Icons

Developing

Contributors StandardJS Dependencies Maintainability Code Quality LGTM Alerts

We are using StandardJS style, make sure you have ESLint/Standard plugin on your editor and have autofix enabled.

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 libs/live-fns/[name-of-service].js and that's it. Take crates as an example:

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

YOU MAY NOT NEED TO MAKE PULL REQUEST

You can create arbitrary live badge with RunKit's online IDE, or any https endpoint. Checkout docs: /runkit or /https.

Add icon

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

Deploy to Now

Badgen is stateless (does not rely on DB service). Deploy your own instance to Now with one single command:

now amio/badgen-service -e GH_TOKEN='' -e TRACKING_GA='' -e SENTRY_URI=''

Tracking Policy

Badgen use Google Analytics on doc pages (home, /docs/packagephobia, etc.), log request time to 3rd party service for live badges, like:

2018-08-09T04:16:30.947Z  #npm dt/chalk: 160.519ms
2018-08-09T04:16:31.195Z  #npm dependents/chalk: 365.045ms
2018-08-09T04:16:51.252Z  #david dep/olstenlarck/eslint-config-esmc: 445.893ms

And that's all. No tracking of end users.

About

Made with ❤️ by Amio, built with ⚡️ from badgen.

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

You can’t perform that action at this time.