From 3a7a69e622b8664a9790c1c3b422a843be35cc89 Mon Sep 17 00:00:00 2001
From: Amio <amio.cn@gmail.com>
Date: Fri, 20 Jul 2018 10:55:51 +0800
Subject: [PATCH] feat: add icon support

---
 lib/index.js       | 24 ++++++++++++++----------
 preview/docker.svg |  1 +
 preview/preview.md | 11 +++++++++--
 preview/serve.js   | 11 ++++++++---
 4 files changed, 32 insertions(+), 15 deletions(-)
 create mode 100644 preview/docker.svg

diff --git a/lib/index.js b/lib/index.js
index aecbea2..ccab0cf 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,33 +1,33 @@
 const calcWidth = require('./calc-text-width.js').Verdana11
 const colorPresets = require('./color-presets.js')
 
-module.exports = function ({subject, status, color, style, emoji}) {
+module.exports = function ({subject, status, color, style, emoji, icon}) {
   color = colorPresets[color] || color || colorPresets['blue']
 
   const stTextWidth = calcWidth(status, emoji)
-  const sbRectWidth = calcWidth(subject, emoji) + 10
+  const sbRectWidth = calcWidth(subject, emoji) + 10 + (icon ? 15 : 0)
   const stRectWidth = stTextWidth + 10
   const width = sbRectWidth + stRectWidth
 
   if (style === 'flat') {
     return `
-      <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="20">
+      <svg width="${width}" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <g>
           <rect width="${sbRectWidth}" height="20" fill="#555"/>
           <rect x="${sbRectWidth}" width="${stRectWidth}" height="20" fill="#${color}"/>
         </g>
         <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
-          <text x="6.1" y="14.8" fill="#000" opacity="0.1">${subject}</text>
-          <text x="5.1" y="13.8">${subject}</text>
+          <text x="${icon ? '22' : '6'}" y="14.8" fill="#000" opacity="0.1">${subject}</text>
+          <text x="${icon ? '21' : '5'}" y="13.8">${subject}</text>
           <text x="${sbRectWidth + 5.5}" y="14.8" fill="#000" opacity="0.1" textLength="${stTextWidth}">${status}</text>
           <text x="${sbRectWidth + 4.5}" y="13.8" textLength="${stTextWidth}">${status}</text>
-        </g>
+        </g>${icon ? genIconMarkup(icon) : ''}
       </svg>
     `
   }
 
   return `
-    <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="20">
+    <svg width="${width}" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <linearGradient id="a" x2="0" y2="100%">
         <stop offset="0" stop-color="#EEE" stop-opacity=".1"/>
         <stop offset="1" stop-opacity=".1"/>
@@ -39,11 +39,15 @@ module.exports = function ({subject, status, color, style, emoji}) {
         <rect width="${width}" height="20" fill="url(#a)"/>
       </g>
       <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
-        <text x="6.4" y="14.8" fill="#000" opacity="0.25">${subject}</text>
-        <text x="5.4" y="13.8">${subject}</text>
+        <text x="${icon ? '22' : '6.2'}" y="14.8" fill="#000" opacity="0.25">${subject}</text>
+        <text x="${icon ? '21' : '5.2'}" y="13.8">${subject}</text>
         <text x="${sbRectWidth + 5.5}" y="14.8" fill="#000" opacity="0.25" textLength="${stTextWidth}">${status}</text>
         <text x="${sbRectWidth + 4.5}" y="13.8" textLength="${stTextWidth}">${status}</text>
-      </g>
+      </g>${icon ? genIconMarkup(icon) : ''}
     </svg>
   `
 }
+
+function genIconMarkup (iconB64) {
+  return `<image x="4.5" y="3" width="14" height="14" xlink:href="${iconB64}"/>`
+}
diff --git a/preview/docker.svg b/preview/docker.svg
new file mode 100644
index 0000000..d5b6e37
--- /dev/null
+++ b/preview/docker.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="189" width="221.667"><defs><clipPath id="a"><path d="M0 141.75h166.25V0H0z"/></clipPath><clipPath id="b"><path d="M0 141.75h166.25V0H0z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 0 189)"><path d="M94.268 76.204h15.743v14.312H94.268zm-18.605 0h15.742v14.312H75.663zm-18.605 0h15.743v14.312H57.058zm-18.605 0h15.743v14.312H38.453zm-18.605 0h15.743v14.312H19.848zm18.605 17.173h15.743v14.311H38.453zm18.605 0h15.743v14.311H57.058zm18.605 0h15.742v14.311H75.663zm0 17.174h15.742v14.312H75.663zm81.658-26.003c-3.438 2.3-11.338 3.143-17.417 1.997-.783 5.726-3.974 10.691-9.779 15.179l-3.337 2.225-2.227-3.34c-2.851-4.299-4.275-10.256-3.808-15.967.21-2.01.87-5.603 2.937-8.764-2.066-1.11-6.15-2.64-11.533-2.537H8.622l-.203-1.192c-.973-5.74-.952-23.653 10.678-37.42 8.84-10.464 22.094-15.772 39.392-15.772 37.5 0 65.244 17.263 78.237 48.641 5.109-.102 16.109-.03 21.76 10.766.147.248.486.896 1.473 2.942l.541 1.122z" fill="#ffffff" fill-rule="evenodd"/></g><g clip-path="url(#b)" transform="matrix(1.33333 0 0 -1.33333 0 189)"><path d="M104.137 24.241h.216c.252 0 .456.084.456.288 0 .18-.132.3-.42.3-.12 0-.204-.012-.252-.024zm-.012-1.115h-.456v1.967c.18.036.432.06.756.06.372 0 .539-.06.684-.144a.547.547 0 0 0 .19-.432c0-.216-.167-.384-.406-.455v-.025c.19-.072.3-.215.359-.479.06-.3.096-.42.145-.492h-.492c-.06.072-.096.252-.157.48-.035.216-.155.312-.407.312h-.216zm-1.212 1.032c0-.876.649-1.57 1.536-1.57.864 0 1.499.694 1.499 1.557 0 .876-.635 1.583-1.511 1.583-.875 0-1.524-.707-1.524-1.57m3.538 0c0-1.116-.875-1.99-2.014-1.99-1.127 0-2.027.874-2.027 1.99 0 1.091.9 1.967 2.027 1.967 1.139 0 2.014-.876 2.014-1.967" fill="#ffffff"/></g></svg>
diff --git a/preview/preview.md b/preview/preview.md
index 32cedb0..c23c865 100644
--- a/preview/preview.md
+++ b/preview/preview.md
@@ -34,5 +34,12 @@
 
 | Badge | URL |
 | --- | --- |
-|![](/emoji/💩🤱🦄/cyan?style=flat&emoji=1) | [/emoji/💩🤱🦄/cyan?style=flat&emoji=1](/emoji/💩🤱🦄/cyan?style=flat&emoji=1) |
-|![](/emoji/💩🤱🦄/cyan?emoji=1) | [/emoji/💩🤱🦄/cyan?emoji=1](/emoji/💩🤱🦄/cyan?emoji=1) |
+|![](/emoji/💩🤱🦄/DDD?emoji=1) | [/emoji/💩🤱🦄/DDD?emoji=1](/emoji/💩🤱🦄/DDD?emoji=1) |
+|![](/emoji/💩🤱🦄/DDD?style=flat&emoji=1) | [/emoji/💩🤱🦄/DDD?style=flat&emoji=1](/emoji/💩🤱🦄/DDD?style=flat&emoji=1) |
+
+## Icon
+
+| Badge | URL |
+| --- | --- |
+| ![](/docker/badge?docker=1) | [/docker/badge?docker=1](/docker/badge?docker=1)
+| ![](/docker/badge?docker=1&style=flat) | [/docker/badge?docker=1&style=flat](/docker/badge?docker=1&style=flat)
diff --git a/preview/serve.js b/preview/serve.js
index 1cf0b8c..c1c0968 100644
--- a/preview/serve.js
+++ b/preview/serve.js
@@ -1,21 +1,26 @@
-const http = require('http')
+const fs = require('fs')
 const path = require('path')
+const http = require('http')
 const url = require('url')
 const qs = require('querystring')
 const serveMarked = require('serve-marked')
 const badgen = require('..')
 
+const dockerSVG = fs.readFileSync(path.join(__dirname, 'docker.svg'))
+const dockerIcon = 'data:image/svg+xml;base64,' + dockerSVG.toString('base64')
+
 // @example
 // http://localhost:3000/npm/v1.2.3
 const serveBadge = (req, res) => {
   const { pathname, query } = url.parse(req.url)
-  const { style, emoji } = qs.parse(query)
+  const { style, emoji, docker } = qs.parse(query)
+  const icon = docker && dockerIcon
   const [ subject, status, color ] = pathname.split('/')
     .filter(Boolean)
     .map(s => qs.unescape(s))
 
   res.writeHead(200, { 'Content-Type': 'image/svg+xml;charset=utf-8' })
-  res.end(badgen({subject, status, color, style, emoji}))
+  res.end(badgen({subject, status, color, style, emoji, icon}))
 }
 
 // @example