Support for logos in flat design

Closes #401
Part of #337

badge.js

@@ -61,11 +61,15 @@ function makeImage(data, cb) {
     data.colorA = pickedColorscheme.colorA;
     data.colorB = pickedColorscheme.colorB;
   }
+  // Logo.
+  data.logoWidth = +data.logoWidth || (data.logo? 14: 0);
+  data.logoPadding = (data.logo? 3: 0);
   // String coercion.
   data.text[0] = '' + data.text[0];
   data.text[1] = '' + data.text[1];
   data.widths = [
-    (canvasContext.measureText(data.text[0]).width|0) + 10,
+    (canvasContext.measureText(data.text[0]).width|0) + 10
+      + data.logoWidth + data.logoPadding,
     (canvasContext.measureText(data.text[1]).width|0) + 10,
   ];
 

package.json

@@ -16,7 +16,7 @@
     "url": "https://github.com/badges/shields"
   },
   "dependencies": {
-    "dot": "~1.0.2",
+    "dot": "~1.0.3",
     "svgo": "~0.4.2",
     "canvas": "~1.1.2",
     "phantomjs": "~1.9.2-6",

server.js

@@ -174,7 +174,8 @@ function cache(f) {
       incrMonthlyAnalytics(analytics.vendorFlatSquareMonthly);
     }
 
-    var cacheIndex = match[0] + '?label=' + data.label + '&style=' + data.style;
+    var cacheIndex = match[0] + '?label=' + data.label + '&style=' + data.style
+      + '&logo=' + data.logo + '&logoWidth=' + data.logoWidth;
     // Should we return the data right away?
     var cached = requestCache.get(cacheIndex);
     var cachedVersionSent = false;
@@ -3509,6 +3510,7 @@ function getLabel(label, data) {
   return data.label || label;
 }
 
+// data (URL query) can include `label`, `style`, `logo`, `logoWidth`.
 function getBadgeData(defaultLabel, data) {
   var label = getLabel(defaultLabel, data);
   var template = data.style || 'default';
@@ -3516,7 +3518,17 @@ function getBadgeData(defaultLabel, data) {
     template = data.style;
   };
 
-  return {text:[label, 'n/a'], colorscheme:'lightgrey', template:template};
+  if (data.logo !== undefined && !/^data:/.test(data.logo)) {
+    data.logo = 'data:' + data.logo;
+  }
+
+  return {
+    text: [label, 'n/a'],
+    colorscheme: 'lightgrey',
+    template: template,
+    logo: data.logo,
+    logoWidth: +data.logoWidth
+  };
 }
 
 function makeSend(format, askres, end) {

templates/flat-template.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="{{=it.widths[0]+it.widths[1]}}" height="20">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=it.widths[0]+it.widths[1]}}" height="20">
   <linearGradient id="smooth" x2="0" y2="100%">
     <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
     <stop offset="1" stop-opacity=".1"/>
@@ -15,8 +15,11 @@
   </g>
 
   <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="15" fill="#010101" fill-opacity=".3">{{=it.escapeXml(it.text[0])}}</text>
+    {{?it.logo}}
-    <text x="{{=it.widths[0]/2+1}}" y="14">{{=it.escapeXml(it.text[0])}}</text>
+      <image x="5" y="3" width="{{=it.logoWidth}}" height="14" xlink:href="{{=it.logo}}"/>
+    {{?}}
+    <text x="{{=(it.widths[0]+it.logoWidth+it.logoPadding)/2}}" y="15" fill="#010101" fill-opacity=".3">{{=it.escapeXml(it.text[0])}}</text>
+    <text x="{{=(it.widths[0]+it.logoWidth+it.logoPadding)/2}}" y="14">{{=it.escapeXml(it.text[0])}}</text>
     <text x="{{=it.widths[0]+it.widths[1]/2-1}}" y="15" fill="#010101" fill-opacity=".3">{{=it.escapeXml(it.text[1])}}</text>
     <text x="{{=it.widths[0]+it.widths[1]/2-1}}" y="14">{{=it.escapeXml(it.text[1])}}</text>
   </g>