suzanne.soy/shields
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Automate creation of SVG badges.

Browse Source 
This is related to bug #2.
This commit is contained in:
Thaddee Tyl 2014-01-02 17:52:05 +01:00
parent 7584b2b820
commit b6e3fa7d1c
7 changed files with 90 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Makefile Normal file
View File

@ -0,0 +1,4 @@
all:
node make
.PHONY: all

8
badges.json Normal file
View File

@ -0,0 +1,8 @@
{
"build-passed": {
"text": [ "build", "passed" ],
"widths": [ 33, 44 ],
"colorA": [ "#aaa", "#666", "#444", "#222" ],
"colorB": [ "#8f6", "#4c1", "#3b0", "#370" ]
}
}

31
build-passed.svg
View File

@ -1,30 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="77" height="19">
<linearGradient id="ggreen" x2="0" y2="100%">
<stop offset="0" stop-color="#8f6"/>
<stop offset=".1" stop-color="#4c1"/>
<stop offset=".9" stop-color="#3b0"/>
<stop offset="1" stop-color="#370"/>
</linearGradient>
<linearGradient id="ggrey" x2="0" y2="100%">
<stop offset="0" stop-color="#aaa"/>
<stop offset=".1" stop-color="#666"/>
<stop offset=".9" stop-color="#444"/>
<stop offset="1" stop-color="#222"/>
</linearGradient>
<filter id='shadow'>
<feOffset dx='0' dy='1' in='SourceAlpha'/>
<feColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0'/>
<feMerge>
<feMergeNode/>
<feMergeNode in='SourceGraphic'/>
<feMergeNode in='SourceGraphic'/>
</feMerge>
</filter>
<rect rx="4" width="77" height="18" fill="url(#ggrey)"/>
<rect rx="4" x="33" width="44" height="18" fill="url(#ggreen)"/>
<rect x="33" width="5" height="18" fill="url(#ggreen)"/>
<g fill="#fff" font-family="Trebuchet MS, sans-serif" font-size="10px">
<text x="5" y="12" filter='url(#shadow)'>build</text>
<text x="39" y="12" filter='url(#shadow)'>passed</text>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="77" height="19"> <linearGradient id="a" x2="0" y2="100%"> <stop offset="0" stop-color="#aaa"/> <stop offset=".1" stop-color="#666"/> <stop offset=".9" stop-color="#444"/> <stop offset="1" stop-color="#222"/> </linearGradient> <linearGradient id="b" x2="0" y2="100%"> <stop offset="0" stop-color="#8f6"/> <stop offset=".1" stop-color="#4c1"/> <stop offset=".9" stop-color="#3b0"/> <stop offset="1" stop-color="#370"/> </linearGradient> <filter id="shadow"> <feOffset dx="0" dy="1" in="SourceAlpha"/> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0"/> <feMerge> <feMergeNode/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> <rect rx="4" width="77" height="18" fill="url(#a)"/> <rect rx="4" x="33" width="44" height="18" fill="url(#b)"/> <rect x="33" width="4" height="18" fill="url(#b)"/> <g fill="#fff" text-anchor="middle" font-family="Trebuchet MS, sans-serif" font-size="10"> <text x="16.5" y="12" filter="url(#shadow)">build</text> <text x="55" y="12" filter="url(#shadow)">passed</text> </g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

33
make.js Normal file
View File

@ -0,0 +1,33 @@
var fs = require('fs');
var dot = require('dot');
var badges = require('./badges.json');
var template = fs.readFileSync('./template.svg');
var imageTemplate = dot.template(''+template);
//console.log(imageTemplate.toString())
// Construct the image sheet.
var imageSheet = './sheet.html';
var resultSheet = '';
function makeImage(name, data) {
var result = imageTemplate(data);
// Put this image on the sheet.
resultSheet += result;
// Write the image individually.
fs.writeFileSync(name + '.svg', result);
}
function buildImages() {
for (var name in badges) {
makeImage(name, badges[name]);
}
}
function main() {
// Write the images individually.
buildImages();
// Write the sheet.
fs.writeFileSync(imageSheet, resultSheet);
}
main();

14
package.json Normal file
View File

@ -0,0 +1,14 @@
{
"author": "Thaddée Tyl <thaddee.tyl@gmail.com",
"name": "gh-badges",
"description": "Github badges implemented in SVG.",
"version": "0.0.1",
"repository": {
"type": "git",
"url": "https://github.com/espadrine/gh-badges"
},
"license": "CC0",
"dependencies": {
"dot": ">=1.0.2"
}
}

1
sheet.html Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="77" height="19"> <linearGradient id="a" x2="0" y2="100%"> <stop offset="0" stop-color="#aaa"/> <stop offset=".1" stop-color="#666"/> <stop offset=".9" stop-color="#444"/> <stop offset="1" stop-color="#222"/> </linearGradient> <linearGradient id="b" x2="0" y2="100%"> <stop offset="0" stop-color="#8f6"/> <stop offset=".1" stop-color="#4c1"/> <stop offset=".9" stop-color="#3b0"/> <stop offset="1" stop-color="#370"/> </linearGradient> <filter id="shadow"> <feOffset dx="0" dy="1" in="SourceAlpha"/> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0"/> <feMerge> <feMergeNode/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> <rect rx="4" width="77" height="18" fill="url(#a)"/> <rect rx="4" x="33" width="44" height="18" fill="url(#b)"/> <rect x="33" width="4" height="18" fill="url(#b)"/> <g fill="#fff" text-anchor="middle" font-family="Trebuchet MS, sans-serif" font-size="10"> <text x="16.5" y="12" filter="url(#shadow)">build</text> <text x="55" y="12" filter="url(#shadow)">passed</text> </g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

29
template.svg Normal file
View File

@ -0,0 +1,29 @@
<svg xmlns="http://www.w3.org/2000/svg" width="{{=it.widths[0]+it.widths[1]}}" height="19">
<linearGradient id="a" x2="0" y2="100%">
<stop offset="0" stop-color="{{=it.colorA[0]||"#aaa"}}"/>
<stop offset=".1" stop-color="{{=it.colorA[1]||"#666"}}"/>
<stop offset=".9" stop-color="{{=it.colorA[2]||"#444"}}"/>
<stop offset="1" stop-color="{{=it.colorA[3]||"#222"}}"/>
</linearGradient>
<linearGradient id="b" x2="0" y2="100%">
<stop offset="0" stop-color="{{=it.colorB[0]}}"/>
<stop offset=".1" stop-color="{{=it.colorB[1]}}"/>
<stop offset=".9" stop-color="{{=it.colorB[2]}}"/>
<stop offset="1" stop-color="{{=it.colorB[3]}}"/>
</linearGradient>
<filter id="shadow">
<feOffset dx="0" dy="1" in="SourceAlpha"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<rect rx="4" width="{{=it.widths[0]+it.widths[1]}}" height="18" fill="url(#a)"/>
<rect rx="4" x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="18" fill="url(#b)"/>
<rect x="{{=it.widths[0]}}" width="4" height="18" fill="url(#b)"/>
<g fill="#fff" text-anchor="middle" font-family="Trebuchet MS, sans-serif" font-size="10">
<text x="{{=it.widths[0]/2}}" y="12" filter="url(#shadow)">{{=it.text[0]}}</text>
<text x="{{=it.widths[0]+it.widths[1]/2}}" y="12" filter="url(#shadow)">{{=it.text[1]}}</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB