From 9ddba96348e15f8fca44e2fab8a95ed135c0a19b Mon Sep 17 00:00:00 2001 From: Amio Date: Sun, 15 Jul 2018 17:22:56 +0800 Subject: [PATCH] Add options: {style: 'flat'} --- README.md | 11 +++++++---- bench/index.js | 6 ++++-- lib/index.js | 23 +++++++++++++++++++++-- preview/PREVIEW.md | 37 +++++++++++++++++++++++-------------- preview/serve.js | 4 ++-- 5 files changed, 57 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 8b8e85b..e646cd4 100644 --- a/README.md +++ b/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', // status: 'v1.2.3', // - color: 'blue' // or -}) + color: 'blue' // or , 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) -generate by full params x 1,266,881 ops/sec ±0.76% (91 runs sampled) +[classic] style, long params x 1,071,083 ops/sec ±0.82% (89 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 diff --git a/bench/index.js b/bench/index.js index b71b9da..ee5ef41 100644 --- a/bench/index.js +++ b/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('generate by full params ', () => badgen(fullParams)) + .add('[classic] style, long params ', () => badgen(longParams)) + .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() diff --git a/lib/index.js b/lib/index.js index 51372f6..703eb79 100644 --- a/lib/index.js +++ b/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 ` + + + + + + + ${subject} + ${subject} + ${status} + ${status} + + + ` + } + return ` - + diff --git a/preview/PREVIEW.md b/preview/PREVIEW.md index 82f3321..e2d751d 100644 --- a/preview/PREVIEW.md +++ b/preview/PREVIEW.md @@ -2,21 +2,30 @@ ## Colors -![](http://localhost:3000/color/blue/blue) -![](http://localhost:3000/color/cyan/cyan) -![](http://localhost:3000/color/green/green) -![](http://localhost:3000/color/yellow/yellow) -![](http://localhost:3000/color/orange/orange) -![](http://localhost:3000/color/red/red) -![](http://localhost:3000/color/pink/pink) -![](http://localhost:3000/color/purple/purple) -![](http://localhost:3000/color/grey/grey) +![](/color/blue/blue) +![](/color/cyan/cyan) +![](/color/green/green) +![](/color/yellow/yellow) +![](/color/orange/orange) +![](/color/red/red) +![](/color/pink/pink) +![](/color/purple/purple) +![](/color/grey/grey) -## Badges +## Default Style | Badge | URL | | --- | --- | -|![](http://localhost:3000/chat/gitter/purple) | http://localhost:3000/chat/gitter/purple | -|![](http://localhost:3000/style/standard/f2a) | http://localhost:3000/style/standard/f2a | -|![](http://localhost:3000/license/Apache-2.0/blue) | http://localhost:3000/license/Apache-2.0/blue | -|![](http://localhost:3000/Language/Swift%203.0.1/orange) | http://localhost:3000/Language/Swift%203.0.1/orange | +|![](/chat/gitter/cyan) | [/chat/gitter/cyan](/chat/gitter/cyan) | +|![](/style/standard/f2a) | [/style/standard/f2a](/style/standard/f2a) | +|![](/license/Apache-2.0/blue) | [/license/Apache-2.0/blue](/license/Apache-2.0/blue) | +|![](/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) | diff --git a/preview/serve.js b/preview/serve.js index 28ee319..a699c14 100644 --- a/preview/serve.js +++ b/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