add templates support and new flat style option

badge.js

@@ -1,6 +1,7 @@
 var fs = require('fs');
 var path = require('path');
 var SVGO = require('svgo');
+var dot = require('dot');
 
 // Initialize what will be used for automatic text measurement.
 var Canvas = require('canvas');
@@ -14,27 +15,40 @@ try {
 } catch(e) {}
 canvasContext.font = '11px Verdana, "DejaVu Sans"';
 
-// Template crafting action below.
-var dot = require('dot');
-var colorscheme = require(path.join(__dirname, 'colorscheme.json'));
-var template = fs.readFileSync(path.join(__dirname, 'template.svg'));
-var imageTemplate = dot.template(''+template);
+function makeTemplate(colorscheme, template) {
+  // Template crafting action below.
+  var colorscheme = require(path.join(__dirname, 'templates', (colorscheme || 'default') + '-colorscheme.json'));
+  var template = fs.readFileSync(path.join(__dirname, 'templates', (template || 'default') + '-template.svg'));
+  var imageTemplate = dot.template(''+template);
+  imageTemplate.colorscheme = colorscheme;
+  return imageTemplate;
+}
+
+var defaultTemplate = makeTemplate();
 
 function optimize(string, callback) {
   var svgo = new SVGO();
   svgo.optimize(string, callback);
 }
 
-function makeImage(data, cb) {
+function makeImage(data, options, cb) {
+  if (typeof options === 'function') {
+    cb = options
+    options = {}
+  }
+  var template = defaultTemplate;
+  if (options.colorscheme || options.template) {
+    template = makeTemplate(options.colorscheme, options.template);
+  }
   if (data.colorscheme) {
-    data.colorA = colorscheme[data.colorscheme].colorA;
-    data.colorB = colorscheme[data.colorscheme].colorB;
+    data.colorA = template.colorscheme[data.colorscheme].colorA;
+    data.colorB = template.colorscheme[data.colorscheme].colorB;
   }
   data.widths = [
     (canvasContext.measureText(data.text[0]).width|0) + 10,
     (canvasContext.measureText(data.text[1]).width|0) + 10,
   ];
-  var result = imageTemplate(data);
+  var result = template(data);
   // Run the SVG through SVGO.
   optimize(result, function(object) { cb(object.data); });
 }

server.js

@@ -5,10 +5,13 @@ var camp = require('camp').start({
 var https = require('https');
 var request = require('request');
 var fs = require('fs');
+var url = require('url');
 var badge = require('./badge.js');
 var svg2img = require('./svg-to-img.js');
 var serverStartTime = new Date((new Date()).toGMTString());
 
+var validTemplates = ['default', 'flat'];
+
 // Analytics
 
 var redis;
@@ -96,6 +99,16 @@ var cacheFromIndex = Object.create(null);
 
 function cache(f) {
   return function getRequest(data, match, end, ask) {
+    // parse querystring for specifying template
+    var reqURL = url.parse(ask.req.url, true);
+    var badgeOpts = {
+      template: 'default'
+    };
+    var style = reqURL.query.style || 'default';
+    if (style && validTemplates.indexOf(style) > -1) {
+      badgeOpts.template = style;
+    };
+    
     // Cache management - no cache, so it won't be cached by GitHub's CDN.
     ask.res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
     incrMonthlyAnalytics(analytics.vendorMonthly);
@@ -104,7 +117,7 @@ function cache(f) {
     // Should we return the data right away?
     var cached = cacheFromIndex[cacheIndex];
     if (cached != null) {
-      badge(cached.badgeData, makeSend(cached.format, ask.res, end));
+      badge(cached.badgeData, badgeOpts, makeSend(cached.format, ask.res, end));
       return;
     }
 
@@ -114,7 +127,7 @@ function cache(f) {
       var badgeData = getBadgeData('vendor', data);
       badgeData.text[1] = 'unresponsive';
       serverUnresponsive = true;
-      badge(badgeData, makeSend('svg', ask.res, end));
+      badge(badgeData, badgeOpts, makeSend('svg', ask.res, end));
     }, 25000);
 
     f(data, match, function sendBadge(format, badgeData) {

templates/flat-template.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="{{=it.widths[0]+it.widths[1]}}" height="20">
+  <linearGradient id="smooth" x2="0" y2="100%">
+    <stop offset="0"  stop-color="#fff" stop-opacity=".1"/>
+    <stop offset=".1" stop-color="#fff" stop-opacity=".1"/>
+    <stop offset=".9" stop-color="#fff" stop-opacity=".1"/>
+    <stop offset="1"  stop-color="#fff" stop-opacity=".1"/>
+  </linearGradient>
+  <rect width="{{=it.widths[0]+it.widths[1]}}" height="20" fill="{{=it.colorA||"#555"}}"/>
+  <rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="20" fill="{{=it.colorB||"#4c1"}}"/>
+  <rect x="{{=it.widths[0]}}" width="4" height="20" fill="{{=it.colorB||"#4c1"}}"/>
+  <rect width="{{=it.widths[0]+it.widths[1]}}" height="20" fill="url(#smooth)"/>
+  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
+    <text x="{{=it.widths[0]/2+1}}" y="13">{{=it.text[0]}}</text>
+    <text x="{{=it.widths[0]+it.widths[1]/2-1}}" y="13">{{=it.text[1]}}</text>
+  </g>
+</svg>

try.html

@@ -190,6 +190,22 @@ I made the GitHub Badge Service.
   </tr>
 </tbody></table>
 
+<h3> Flat Style </h3>
+<table><tbody>
+  <td><img src='/travis/joyent/node.svg?style=flat' alt=''/></td>
+  <td><code>http://img.shields.io/travis/joyent/node.svg?style=flat</code></td>
+  </tr>
+  <td><img src='/travis/joyent/node/v0.6.svg?style=flat' alt=''/></td>
+  <td><code>http://img.shields.io/travis/joyent/node/v0.6.svg?style=flat</code></td>
+  </tr>
+  <td><img src='/gittip/JSFiddle.svg?style=flat' alt=''/></td>
+  <td><code>http://img.shields.io/gittip/JSFiddle.svg?style=flat</code></td>
+  </tr>
+  <td><img src='/coveralls/jekyll/jekyll.svg?style=flat' alt=''/></td>
+  <td><code>http://img.shields.io/coveralls/jekyll/jekyll.svg?style=flat</code></td>
+  </tr>
+</tbody></table>
+
 <h2> Like This? </h2>
 
 <p>