From b1d3e00a213d9067cc9fd793ecd962e77d5dcddd Mon Sep 17 00:00:00 2001
From: Thaddee Tyl <thaddee.tyl@gmail.com>
Date: Sat, 25 Apr 2015 14:37:41 +0200
Subject: [PATCH] Support for logos in flat design

Closes #401
Part of #337
---
 badge.js                    |  6 +++++-
 package.json                |  2 +-
 server.js                   | 16 ++++++++++++++--
 templates/flat-template.svg |  9 ++++++---
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/badge.js b/badge.js
index d3c6bb8..9a8a437 100644
--- a/badge.js
+++ b/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,
   ];
 
diff --git a/package.json b/package.json
index e3be196..b264df5 100644
--- a/package.json
+++ b/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",
diff --git a/server.js b/server.js
index 5d766b6..10769f3 100644
--- a/server.js
+++ b/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) {
diff --git a/templates/flat-template.svg b/templates/flat-template.svg
index d502832..08dfc47 100644
--- a/templates/flat-template.svg
+++ b/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>
-    <text x="{{=it.widths[0]/2+1}}" y="14">{{=it.escapeXml(it.text[0])}}</text>
+    {{?it.logo}}
+      <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>