ComputerSurge/shields
3
0
Fork 0
Code Pull Requests 1 Activity

for the badge style badges (#1166)

Browse Source 
https://forthebadge.com/ style of badges, with link support

Close #818
This commit is contained in:
Danial
2017-10-16 09:52:28 +13:00
committed by Paul Melnikow
parent 3465e7a17b
commit c026ebf235
4 changed files with 32 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/badge-data.js
View File

@@ -31,7 +31,7 @@ function prependPrefix(s, prefix) {
}
function isValidStyle(style) {
const validStyles = ['default', 'plastic', 'flat', 'flat-square', 'social'];
const validStyles = ['default', 'plastic', 'flat', 'flat-square', 'for-the-badge', 'social'];
return style ? validStyles.indexOf(style) >= 0 : false;
}

4
lib/badge.js
View File

@@ -96,6 +96,10 @@ function makeImage(data, cb) {
if (!(data.template + '-' + data.format in templates)) {
data.template = 'flat';
}
if (data.template === 'for-the-badge'){
data.text[0] = data.text[0].toUpperCase();
data.text[1] = data.text[1].toUpperCase();
}
if (data.colorscheme) {
let pickedColorscheme = colorscheme[data.colorscheme];
if (!pickedColorscheme) {

23
templates/for-the-badge-template.svg Normal file
View File

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=(it.widths[0]+=(10+(it.text[0].length*1.5)))+(it.widths[1]+=(10+(it.text[1].length*2)))}}" height="28">
<g shape-rendering="crispEdges">
<rect width="{{=it.widths[0]}}" height="28" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
<rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="28" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="100">
{{?it.logo}}
<image x="9" y="7" width="{{=it.logoWidth}}" height="14" xlink:href="{{=it.logo}}"/>
{{?}}
<text x="{{=((it.widths[0]+it.logoWidth+it.logoPadding)/2)*10}}" y="175" transform="scale(0.1)" textLength="{{=(it.widths[0]-(24+it.logoWidth+it.logoPadding))*10}}" lengthAdjust="spacing">{{=it.escapeXml(it.text[0].toUpperCase())}}</text>
<text x="{{=(it.widths[0]+it.widths[1]/2)*10}}" y="175" font-weight="bold" transform="scale(0.1)" textLength="{{=(it.widths[1]-24)*10}}" lengthAdjust="spacing">{{=it.escapeXml(it.text[1].toUpperCase())}}</text>
</g>
{{?(it.links[0] && it.links[0].length)}}
<a xlink:href="{{=it.links[0]}}">
<rect width="{{=it.widths[0]}}" height="28" fill="rgba(0,0,0,0)"/>
</a>
{{?}}
{{?(it.links[0] && it.links[0].length || it.links[1] && it.links[1].length)}}
<a xlink:href="{{=it.links[1] || it.links[0]}}">
<rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="28" fill="rgba(0,0,0,0)"/>
</a>
{{?}}
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

4
try.html
View File

@@ -1373,6 +1373,10 @@ The following styles are available (flat is the default as of Feb 1st 2015):
<td><code>https://img.shields.io/badge/style-flat--squared-green.svg?style=flat-square</code></td>
</tr>
<tr>
<td><img src='/badge/style-for--the--badge-green.svg?style=for-the-badge' alt=''/></td>
<td><code>https://img.shields.io/badge/style-for--the--badge-green.svg?style=for-the-badge</code></td>
</tr>
<tr>
<td><img src='/badge/style-social-green.svg?style=social' alt=''/></td>
<td><code>https://img.shields.io/badge/style-social-green.svg?style=social</code></td>
</tr>