Add options: {style: 'flat'}

README.md

@@ -13,12 +13,13 @@ Fast, handcraft, pure JavaScript badge generator.
 
 ```javascript
 const badgen = require('badgen')
+const options = { style: 'flat' }
 
 const svgString = badgen({
   subject: 'npm',   // <Text>
   status: 'v1.2.3', // <Text>
-  color: 'blue'     // <Color RGB> or <Color Name>
+  color: 'blue'     // <Color RGB> or <Color Name>, optional
-})
+}, options)         // options is optional
 ```
 
 Available color names:
@@ -42,8 +43,10 @@ https://badgen.now.sh/
 `npm run bench` on my iMac5K(Late 2014), 3.5G i5, with Node.js 10.5.0:
 
 ```bash
-generate by long params  x 1,046,942 ops/sec ±0.61% (93 runs sampled)
+[classic] style, long params  x 1,071,083 ops/sec ±0.82% (89 runs sampled)
-generate by full params  x 1,266,881 ops/sec ±0.76% (91 runs sampled)
+[classic] style, full params  x 1,332,181 ops/sec ±0.80% (92 runs sampled)
+   [flat] style, long params  x 1,145,825 ops/sec ±0.73% (94 runs sampled)
+   [flat] style, full params  x 1,416,453 ops/sec ±0.69% (91 runs sampled)
 ```
 
 ## License

bench/index.js

@@ -5,7 +5,9 @@ const longParams = { subject: 'build-build-build', status: 'passing-passing-pass
 const fullParams = { subject: 'license', status: 'MIT', color: 'cyan' }
 
 new Suite()
-  .add('generate by long params ', () => badgen(longParams))
+  .add('[classic] style, long params ', () => badgen(longParams))
-  .add('generate by full params ', () => badgen(fullParams))
+  .add('[classic] style, full params ', () => badgen(fullParams))
+  .add('   [flat] style, long params ', () => badgen(longParams, { style: 'flat' }))
+  .add('   [flat] style, full params ', () => badgen(fullParams, { style: 'flat' }))
   .on('cycle', event => console.log(String(event.target)))
   .run()

lib/index.js

@@ -1,20 +1,39 @@
 const calcWidth = require('./calc-text-width.js').Verdana11
 const colorPresets = require('./color-presets.js')
 
-module.exports = function ({subject, status, color}) {
+module.exports = function ({subject, status, color}, opts = {}) {
   color = colorPresets[color] || color || colorPresets['blue']
 
   const sbRectWidth = calcWidth(subject) + 11
   const stRectWidth = calcWidth(status) + 11
   const width = sbRectWidth + stRectWidth
 
+  const { style } = opts
+
+  if (style === 'flat') {
+    return `
+      <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="20">
+        <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="7" y="14.8" fill="#000" opacity="0.15">${subject}</text>
+          <text x="6" y="13.8">${subject}</text>
+          <text x="${sbRectWidth + 5.5}" y="14.8" fill="#000" opacity="0.15">${status}</text>
+          <text x="${sbRectWidth + 4.5}" y="13.8">${status}</text>
+        </g>
+      </svg>
+    `
+  }
+
   return `
     <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="20">
       <linearGradient id="a" x2="0" y2="100%">
         <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
         <stop offset="1" stop-opacity=".1"/>
       </linearGradient>
-        <mask id="m"><rect width="${width}" height="20" rx="3" fill="#FFF"/></mask>
+      <mask id="m"><rect width="${width}" height="20" rx="3" fill="#FFF"/></mask>
       <g mask="url(#m)">
         <rect width="${sbRectWidth}" height="20" fill="#555"/>
         <rect x="${sbRectWidth}" width="${stRectWidth}" height="20" fill="#${color}"/>

preview/PREVIEW.md

@@ -2,21 +2,30 @@
 
 ## Colors
 
-![](http://localhost:3000/color/blue/blue)
+![](/color/blue/blue)
-![](http://localhost:3000/color/cyan/cyan)
+![](/color/cyan/cyan)
-![](http://localhost:3000/color/green/green)
+![](/color/green/green)
-![](http://localhost:3000/color/yellow/yellow)
+![](/color/yellow/yellow)
-![](http://localhost:3000/color/orange/orange)
+![](/color/orange/orange)
-![](http://localhost:3000/color/red/red)
+![](/color/red/red)
-![](http://localhost:3000/color/pink/pink)
+![](/color/pink/pink)
-![](http://localhost:3000/color/purple/purple)
+![](/color/purple/purple)
-![](http://localhost:3000/color/grey/grey)
+![](/color/grey/grey)
 
-## Badges
+## Default Style
 
 | Badge | URL |
 | --- | --- |
-|![](http://localhost:3000/chat/gitter/purple) | http://localhost:3000/chat/gitter/purple |
+|![](/chat/gitter/cyan) | [/chat/gitter/cyan](/chat/gitter/cyan) |
-|![](http://localhost:3000/style/standard/f2a) | http://localhost:3000/style/standard/f2a |
+|![](/style/standard/f2a) | [/style/standard/f2a](/style/standard/f2a) |
-|![](http://localhost:3000/license/Apache-2.0/blue) | http://localhost:3000/license/Apache-2.0/blue |
+|![](/license/Apache-2.0/blue) | [/license/Apache-2.0/blue](/license/Apache-2.0/blue) |
-|![](http://localhost:3000/Language/Swift%203.0.1/orange) | http://localhost:3000/Language/Swift%203.0.1/orange |
+|![](/Language/Swift%203.0.1/orange) | [/Language/Swift%203.0.1/orange](/Language/Swift%203.0.1/orange) |
+
+## Flat Style
+
+| Badge (flat) | URL |
+| --- | --- |
+|![](/chat/gitter/cyan/flat) | [/chat/gitter/cyan/flat](/chat/gitter/cyan/flat) |
+|![](/style/standard/f2a/flat) | [/style/standard/f2a/flat](/style/standard/f2a/flat) |
+|![](/license/Apache-2.0/blue/flat) | [/license/Apache-2.0/blueflat](/license/Apache-2.0/blueflat) |
+|![](/Language/Swift%203.0.1/orange/flat) | [/Language/Swift%203.0.1/orange/flat](/Language/Swift%203.0.1/orange/flat) |

preview/serve.js

@@ -7,12 +7,12 @@ const badgen = require('..')
 // @example
 // http://localhost:3000/npm/v1.2.3
 const serveBadge = (req, res) => {
-  const [ subject, status, color ] = req.url.split('/')
+  const [ subject, status, color, style ] = req.url.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}))
+  res.end(badgen({subject, status, color}, { style }))
 }
 
 // @example