kopia lustrzana https://github.com/badgen/badgen
Add options: {style: 'flat'}
Amio
rodzic
6c6ac785df
commit
9ddba96348
11
README.md
11
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)
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
23
lib/index.js
23
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}"/>
|
||||
|
|
|
|||
|
|
@ -2,21 +2,30 @@
|
|||
|
||||
## Colors
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Badges
|
||||
## Default Style
|
||||
|
||||
| Badge | URL |
|
||||
| --- | --- |
|
||||
| | http://localhost:3000/chat/gitter/purple |
|
||||
| | http://localhost:3000/style/standard/f2a |
|
||||
| | http://localhost:3000/license/Apache-2.0/blue |
|
||||
| | http://localhost:3000/Language/Swift%203.0.1/orange |
|
||||
| | [/chat/gitter/cyan](/chat/gitter/cyan) |
|
||||
| | [/style/standard/f2a](/style/standard/f2a) |
|
||||
| | [/license/Apache-2.0/blue](/license/Apache-2.0/blue) |
|
||||
| | [/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) |
|
||||
| | [/style/standard/f2a/flat](/style/standard/f2a/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) |
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue