mirror
/
badgen
kopia lustrzana https://github.com/badgen/badgen
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

feat: add icon support

pull/6/head
Amio 2018-07-20 10:55:51 +08:00
rodzic 70de0d0a9a
commit 3a7a69e622
4 zmienionych plików z 32 dodań i 15 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

24
lib/index.js
Wyświetl plik

@ -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}"/>`
}

1
preview/docker.svg 100644
Wyświetl plik

@ -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>
Side by Side

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 1.7 KiB

11
preview/preview.md
Wyświetl plik

@ -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)

11
preview/serve.js
Wyświetl plik

@ -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