Permalink
Browse files

Add support for style option and flat-square style

  • Loading branch information...
exogen committed Sep 20, 2016
1 parent 8718273 commit 8dcd07faee4f78baf6eb46b6530bce23e5ba4146
Showing with 58 additions and 32 deletions.
  1. +32 −15 browsers.svg
  2. +1 −1 package.json
  3. +7 −0 src/browsers.js
  4. +16 −14 src/index.js
  5. +2 −2 src/shields.js
View
@@ -1,12 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width=data.layout.width height="20">
<defs>
- <linearGradient id="smooth" x2="0" y2="100%">
- <stop offset="0" stop-color="#bbb" stop-opacity="0.1"/>
- <stop offset="1" stop-opacity="0.1"/>
- </linearGradient>
- <mask for(badge in data.layout.badges | status-var=loop) id="mask-${ loop.getIndex() }">
- <rect width=badge.width height="20" rx="3" fill="#fff"/>
- </mask>
+ <if(data.layout.style !== "flat-square")>
+ <linearGradient id="smooth" x2="0" y2="100%">
+ <stop offset="0" stop-color="#bbb" stop-opacity="0.1"/>
+ <stop offset="1" stop-opacity="0.1"/>
+ </linearGradient>
+ </if>
+ <if(data.layout.style !== "flat-square")>
+ <mask for(badge in data.layout.badges | status-var=loop) id="mask-${ loop.getIndex() }">
+ <rect width=badge.width height="20" rx="3" fill="#fff"/>
+ </mask>
+ </if>
<!-- Browser icons from Font Awesome by Dave Gandy -->
<!-- http://fontawesome.io via http://icomoon.io -->
<symbol id="android" viewBox="0 0 14 14">
@@ -39,21 +43,30 @@
</symbol>
</defs>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
- <g for(badge in data.layout.badges | status-var=loop) transform="translate(${ badge.translate }, 0)" mask="url(#mask-${ loop.getIndex() })">
+ <g for(badge in data.layout.badges | status-var=loop) transform="translate(${ badge.translate }, 0)"
+ mask=(data.layout.style === "flat-square" ? null : "url(#mask-${ loop.getIndex() })")>
<g transform="translate(${ badge.label.translate }, 0)">
- <rect width=badge.label.width height="20" fill="#555"/>
- <rect width=badge.label.width height="20" fill="url(#smooth)"/>
+ <rect width=badge.label.width height="20" fill="#555"
+ shape-rendering=(data.layout.style === "flat-square" ? "crispEdges" : null)/>
+ <if(data.layout.style !== "flat-square")>
+ <rect width=badge.label.width height="20" fill="url(#smooth)"/>
+ </if>
<if(badge.label.logo)>
- <use xlink:href=badge.label.logo x="5" y="4" width="14" height="14" style="fill: #010101; fill-opacity: 0.3"/>
+ <if(data.layout.style !== "flat-square")>
+ <use xlink:href=badge.label.logo x="5" y="4" width="14" height="14" style="fill: #010101; fill-opacity: 0.3"/>
+ </if>
<use xlink:href=badge.label.logo x="5" y="3" width="14" height="14" style="fill: #bbb"/>
</if>
<if(badge.label.text)>
- <text x=badge.label.x y="15" fill="#010101" fill-opacity="0.3">${ badge.label.text }</text>
+ <if(data.layout.style !== "flat-square")>
+ <text x=badge.label.x y="15" fill="#010101" fill-opacity="0.3">${ badge.label.text }</text>
+ </if>
<text x=badge.label.x y="14">${ badge.label.text }</text>
</if>
</g>
<g for(browser in badge.versions | status-var=loop) transform="translate(${ browser.translate }, 0)">
- <rect width=browser.width height="20" fill=browser.fill/>
+ <rect width=browser.width height="20" fill=browser.fill
+ shape-rendering=(data.layout.style === "flat-square" ? "crispEdges" : null)/>
<if(browser.divider === "line")>
<if(!loop.isFirst())>
<line x1="0.5" x2="0.5" y1="0" y2="20"
@@ -64,8 +77,12 @@
stroke-width="1" stroke="#010101" stroke-opacity="0.1"/>
</if>
</if>
- <rect width=browser.width height="20" fill="url(#smooth)"/>
- <text x=browser.x y="15" fill="#010101" fill-opacity="0.3">${ browser.text }</text>
+ <if(data.layout.style !== "flat-square")>
+ <rect width=browser.width height="20" fill="url(#smooth)"/>
+ </if>
+ <if(data.layout.style !== "flat-square")>
+ <text x=browser.x y="15" fill="#010101" fill-opacity="0.3">${ browser.text }</text>
+ </if>
<text x=browser.x y="14">${ browser.text }</text>
</g>
</g>
View
@@ -27,7 +27,7 @@
"express-interceptor": "^1.1.1",
"gzip-size": "^3.0.0",
"humanize-duration": "^3.9.1",
- "lodash": "^4.13.1",
+ "lodash": "^4.16.0",
"lru-cache": "^4.0.1",
"marko": "^3.8.1",
"object-hash": "^1.1.3",
View
@@ -116,6 +116,11 @@ const VERSION_DIVIDER_OPTIONS = {
false: 'none'
}
+const STYLE_OPTIONS = {
+ flat: 'flat',
+ 'flat-square': 'flat-square'
+}
+
function cleanOptions (options = {}) {
const cleaned = {}
cleaned.logos = LOGOS_OPTIONS[options.logos] || 'inside'
@@ -124,6 +129,7 @@ function cleanOptions (options = {}) {
(cleaned.labels === 'none' ? 'name' : cleaned.labels)
cleaned.versionDivider = VERSION_DIVIDER_OPTIONS[options.versionDivider] ||
'none'
+ cleaned.style = STYLE_OPTIONS[options.style] || 'flat'
if (Array.isArray(options.exclude)) {
cleaned.exclude = options.exclude
} else if (typeof options.exclude === 'string') {
@@ -192,6 +198,7 @@ function getBadgeLayout (browserGroup, options) {
function getBrowsersLayout (context) {
const layout = {}
const options = cleanOptions(context.options)
+ layout.style = options.style
const shouldInclude = (browserGroup) => {
return !options.exclude.length ||
options.exclude.indexOf(browserGroup.browser) === -1
View
@@ -9,33 +9,35 @@ function start (id) {
const _ = require('lodash')
const express = require('express')
const compression = require('compression')
- const TravisClient = require('./travis').default
- const SauceClient = require('./sauce').default
- const getShieldsBadge = require('./shields').default
+ const { default: TravisClient } = require('./travis')
+ const { default: SauceClient } = require('./sauce')
+ const { default: getShieldsBadge } = require('./shields')
const { default: getBrowsersBadge, BROWSERS, getGroupedBrowsers } = require('./browsers')
- const getFileSize = require('./size').default
+ const { default: getFileSize } = require('./size')
const app = express()
app.set('etag', true)
app.use(compression())
function handleBrowsersBadge (req, res, browsers) {
+ const query = { style: req.query.style }
Promise.resolve(browsers).then((browsers) => {
if (browsers.length) {
const options = {
logos: req.query.logos,
labels: req.query.labels,
exclude: req.query.exclude,
sortBy: req.query.sortBy,
- versionDivider: req.query.versionDivider
+ versionDivider: req.query.versionDivider,
+ ...query
}
return getBrowsersBadge({ browsers, options })
} else {
- return getShieldsBadge('browsers', 'unknown', 'lightgrey')
+ return getShieldsBadge('browsers', 'unknown', 'lightgrey', query)
}
}).catch((err) => {
console.error(`Error: ${err}`)
- return getShieldsBadge('browsers', 'unknown', 'lightgrey')
+ return getShieldsBadge('browsers', 'unknown', 'lightgrey', query)
}).then((body) => {
res.write(body)
res.end()
@@ -110,6 +112,7 @@ function start (id) {
const branch = req.query.branch || 'master'
const label = req.query.label || req.params.repo
const travis = new TravisClient(user, repo)
+ const query = { style: req.query.style }
travis.getLatestBranchBuild(branch).then((build) => {
const filters = {
env: req.query.env
@@ -120,10 +123,10 @@ function start (id) {
passed: 'brightgreen',
failed: 'red'
}[status] || 'lightgrey'
- return getShieldsBadge(label, status, color)
+ return getShieldsBadge(label, status, color, query)
}).catch((err) => {
console.error(`Error: ${err}`)
- return getShieldsBadge(label, 'error', 'lightgrey')
+ return getShieldsBadge(label, 'error', 'lightgrey', query)
}).then((body) => {
res.write(body)
res.end()
@@ -157,9 +160,8 @@ function start (id) {
const source = req.params.source
const path = req.params[0]
const color = req.query.color || 'brightgreen'
- const options = {
- gzip: req.query.gzip === 'true'
- }
+ const options = { gzip: req.query.gzip === 'true' }
+ const query = { style: req.query.style }
let url
// Express' path-to-regexp business is too insane to easily do this above.
if (path.match(/^\w/)) {
@@ -171,10 +173,10 @@ function start (id) {
}
const label = req.query.label || (options.gzip ? 'size (gzip)' : 'size')
getFileSize(url, options).then((size) => {
- return getShieldsBadge(label, size, color)
+ return getShieldsBadge(label, size, color, query)
}).catch((err) => {
console.error(`Error: ${err}`)
- return getShieldsBadge(label, 'error', 'lightgrey')
+ return getShieldsBadge(label, 'error', 'lightgrey', query)
}).then((body) => {
res.write(body)
res.end()
View
@@ -4,12 +4,12 @@ function escapeBadge (str) {
return str.replace(/-/g, '--').replace(/_/g, '__')
}
-export default function getShieldsBadge (label, status, color) {
+export default function getShieldsBadge (label, status, color, query) {
const badge = encodeURIComponent([
escapeBadge(label),
escapeBadge(status),
color
].join('-'))
const url = `https://img.shields.io/badge/${badge}.svg`
- return cachedRequest(url, { gzip: true }, 5 * ONE_DAY)
+ return cachedRequest(url, { qs: query, gzip: true }, 5 * ONE_DAY)
}

0 comments on commit 8dcd07f

Please sign in to comment.