How it works..

[techtonik]

I guess that badges are compiled dynamically on each request and then cached, but how it works in detail?

Assuming the auditory is somebody who wants to tackle #507 without much knowledge of JavaScript and supporting infrastructure.

For the start, https://img.shields.io/ runs a web server. Root request redirects to a https://shields.io/ domain with human instructions. Any other request to https://img.shields.io/ subpaths is handled by ? ... ? which parses URL parameters, ?checks status?, creates SVG and caches it.

How SVG is created?

[techtonik]

Server is implemented with Camp.js, which takes a series of route callbacks that look like:

// Travis integration
camp.route(/^\/travis(-ci)?\/([^\/]+\/[^\/]+)(?:\/(.+))?\.(svg|png|gif|jpg|json)$/,
cache(function(data, match, sendBadge, request) {
  var userRepo = match[2];  // eg, espadrine/sc
  var branch = match[3];
  var format = match[4];
  var options = {
    method: 'HEAD',
    uri: 'https://api.travis-ci.org/' + userRepo + '.svg',
  };
...

[techtonik]

The data argument passed into callback is an object with URL query params, such as style etc. It is parsed by getBadgeData() function;

// data (URL query) can include `label`, `style`, `logo`, `logoWidth`, `link`.
// It can also include `maxAge`.
function getBadgeData(defaultLabel, data) {
  var label = getLabel(defaultLabel, data);
  var template = data.style || 'default';
...

[techtonik]

Finally I found a place where logo data is passed from parsed query (data param) to shields function that returns cached and optimized SVG.

[paulmelnikow]

The production hosting is documented in #2661 and the rest of this is for a legacy interface which we no longer use, so closing this.

Also opened #2684 asking for a high-level code walkthrough.