211 lines
7.3 KiB
HTML
211 lines
7.3 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<title> Badge Service </title>
|
|
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
|
<link rel='icon' type='image/png' href='favicon.png'>
|
|
<link href='//fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet'>
|
|
<style>
|
|
:root { text-align: center; font-family: Linux Libertine O, Vollkorn, serif; }
|
|
code { white-space: pre-wrap; }
|
|
code, input { padding: 0 4px; border: 1px solid grey; background: #eef; border-radius: 4px; }
|
|
input { width: 5em; }
|
|
hr { width: 40%; border-width: 1px 0 0 0; }
|
|
a.photo { text-decoration: none; }
|
|
a.photo>img { padding: 2px; border: 1px solid grey; }
|
|
ul { text-align: left; margin-left: 25%; }
|
|
table { width: 50%; margin: auto; }
|
|
th, td { text-align: left; }
|
|
h2::before { content: '☙ '; }
|
|
h2::after { content: ' ❧'; }
|
|
h2 { font-variant: small-caps; }
|
|
hr.spacing { border: 0; display: block; height: 3mm; }
|
|
</style>
|
|
|
|
<img alt='GitHub Badges' src='/logo.svg'/>
|
|
|
|
<hr class='spacing'/>
|
|
<hr/>
|
|
<form action='javascript:makeImage()' id='imageMaker'>
|
|
<input name='subject' placeholder='subject'/>
|
|
<input name='status' placeholder='status'/>
|
|
<input name='color' list='default-colors' placeholder='color'/>
|
|
<datalist id='default-colors'>
|
|
<option value='brightgreen'>
|
|
<option value='green'>
|
|
<option value='yellowgreen'>
|
|
<option value='yellow'>
|
|
<option value='orange'>
|
|
<option value='red'>
|
|
<option value='lightgrey'>
|
|
<option value='blue'>
|
|
</datalist>
|
|
<button>Go!</button>
|
|
</form>
|
|
<hr/>
|
|
<hr class='spacing'/>
|
|
|
|
<h2> Your Badge Service </h2>
|
|
|
|
<img src='/:badge-on!-brightgreen.svg' alt='Badge on!'/>
|
|
<img src='/:license-CC0-red.svg' alt='License: CC0'/>
|
|
|
|
<p>
|
|
Ever wanted to have your own GitHub badges? <br/>
|
|
Maybe you simply wanted to have consistent colors? <br/>
|
|
Maybe you wanted to have them be less blurry? <br/>
|
|
Or look better on high-resolution displays? <br/>
|
|
Maybe you simply love SVG. <br/>
|
|
Maybe you fancy a format that uses less than half the bandwidth.
|
|
</p>
|
|
|
|
<img src='/:happy-hacking%20%E2%98%BA-yellow.svg' alt='Happy hacking!'/>
|
|
|
|
<p>
|
|
As for me, I wanted a format that people can reuse and hack on. <br/>
|
|
I wanted a service for everyone. <br/>
|
|
I made the GitHub Badge Service.
|
|
</p>
|
|
|
|
<img src='/:download-.8%20kB-blue.svg' alt='Download: .5kB'/>
|
|
|
|
<p>
|
|
Here's how it works. <br/>
|
|
<code>http://b.adge.me/:<SUBJECT>-<STATUS>-<COLOR>.svg</code><br/>
|
|
Use two dashes <code>--</code> to have one dash as text. <br/>
|
|
Use two underscores <code>__</code> to have one underscore as text. <br/>
|
|
Use an underscore <code>_</code> if you want a space. Or, you know, use a space.
|
|
</p>
|
|
|
|
<p> Colors: </p>
|
|
<img src='/:color-brightgreen-brightgreen.svg' alt='brightgreen'/>
|
|
<img src='/:color-green-green.svg' alt='green'/>
|
|
<img src='/:color-yellowgreen-yellowgreen.svg' alt='yellowgreen'/>
|
|
<img src='/:color-yellow-yellow.svg' alt='yellow'/>
|
|
<img src='/:color-orange-orange.svg' alt='orange'/>
|
|
<img src='/:color-red-red.svg' alt='red'/>
|
|
<img src='/:color-lightgrey-lightgrey.svg' alt='lightgrey'/>
|
|
<img src='/:color-blue-blue.svg' alt='blue'/>
|
|
<img src='/:color-ff69b4-ff69b4.svg' alt='ff69b4'/>
|
|
|
|
<h2> Supported Services </h2>
|
|
|
|
<table><tbody>
|
|
<tr><th> Travis (repo): </th>
|
|
<td><img src='/travis/joyent/node.svg' alt='Travis-CI'/></td>
|
|
<td><code>http://b.adge.me/travis/joyent/node.svg</code></td>
|
|
</tr>
|
|
<tr><th> Travis (branch): </th>
|
|
<td><img src='/travis/joyent/node/v0.6.svg' alt='Travis-CI'/></td>
|
|
<td><code>http://b.adge.me/travis/joyent/node/v0.6.svg</code></td>
|
|
</tr>
|
|
<tr><th> Gittip: </th>
|
|
<td><img src='/gittip/JSFiddle.svg' alt='Gittip'/></td>
|
|
<td><code>http://b.adge.me/gittip/JSFiddle.svg</code></td>
|
|
</tr>
|
|
<tr><th> Coveralls (repo): </th>
|
|
<td><img src='/coveralls/jekyll/jekyll.svg' alt='Coveralls'/></td>
|
|
<td><code>http://b.adge.me/coveralls/jekyll/jekyll.svg</code></td>
|
|
</tr>
|
|
<tr><th> Coveralls (branch): </th>
|
|
<td><img src='/coveralls/jekyll/jekyll/master.svg' alt='Coveralls'/></td>
|
|
<td><code>http://b.adge.me/coveralls/jekyll/jekyll/master.svg</code></td>
|
|
</tr>
|
|
<tr><th> Code Climate: </th>
|
|
<td><img src='/codeclimate/github/kabisaict/flow.svg' alt='Code Climate'/></td>
|
|
<td><code>http://b.adge.me/codeclimate/github/kabisaict/flow.svg</code></td>
|
|
</tr>
|
|
<tr><th> Gemnasium: </th>
|
|
<td><img src='/gemnasium/mathiasbynens/he.svg' alt='Code Climate'/></td>
|
|
<td><code>http://b.adge.me/gemnasium/mathiasbynens/he.svg</code></td>
|
|
</tr>
|
|
<tr><th> npm: </th>
|
|
<td><img src='/npm/dm/localeval.svg' alt='npm'/></td>
|
|
<td><code>http://b.adge.me/npm/dm/localeval.svg</code></td>
|
|
</tr>
|
|
<tr><th> PyPI: </th>
|
|
<td><img src='/pypi/dm/nine.svg' alt='PyPI'/></td>
|
|
<td><code>http://b.adge.me/pypi/dm/nine.svg</code></td>
|
|
</tr>
|
|
<tr><th> Packagist: </th>
|
|
<td><img src='/packagist/dm/doctrine/orm.svg' alt='Packagist'/></td>
|
|
<td><code>http://b.adge.me/packagist/dm/doctrine/orm.svg</code></td>
|
|
</tr>
|
|
<tr><th> npm: </th>
|
|
<td><img src='/npm/v/npm.svg' alt='npm'/></td>
|
|
<td><code>http://b.adge.me/npm/v/npm.svg</code></td>
|
|
</tr>
|
|
<tr><th> PyPI: </th>
|
|
<td><img src='/pypi/v/nine.svg' alt='PyPI'/></td>
|
|
<td><code>http://b.adge.me/pypi/v/nine.svg</code></td>
|
|
</tr>
|
|
<tr><th> Gem: </th>
|
|
<td><img src='/gem/v/formatador.svg' alt='Gem'/></td>
|
|
<td><code>http://b.adge.me/gem/v/formatador.svg</code></td>
|
|
</tr>
|
|
</tbody></table>
|
|
|
|
<h2> Like This? </h2>
|
|
|
|
<p>
|
|
Tell your favorite badge service to use it! <br/>
|
|
And tell us, we might be able to bring it to you anyway!
|
|
</p>
|
|
|
|
<h2> Known Issues </h2>
|
|
|
|
<ul>
|
|
<li> Chrome/Opera + retina display = blurry.
|
|
<a href='https://code.google.com/p/chromium/issues/detail?id=331387'>
|
|
Known Blink bug</a>.
|
|
<li> Safari + retina display = blurry.
|
|
<a href='https://bugs.webkit.org/show_bug.cgi?id=126398'>Known
|
|
WebKit bug</a>.
|
|
<li> Greenish aura around the text.
|
|
<a href='https://bugzilla.mozilla.org/show_bug.cgi?id=812795'>
|
|
Known Firefox bug</a>. Fixed in Nightly.
|
|
<li> The text can be wider than the box (esp. Firefox + Windows).
|
|
<a href='https://github.com/espadrine/gh-badges/pull/6#issuecomment-31558269'>
|
|
Issue with consistency of text measurement</a>.
|
|
</ul>
|
|
|
|
<h2> Origin </h2>
|
|
|
|
<p>
|
|
<a href='https://github.com/h5bp/lazyweb-requests/issues/150'>This</a>.<br/>
|
|
All the activity and the code sits
|
|
<a href='https://github.com/espadrine/gh-badges'>here</a>.
|
|
</p>
|
|
|
|
<h2> Contributors </h2>
|
|
|
|
<a class='photo' href='https://github.com/espadrine'>
|
|
<img alt='espadrine' src='https://gravatar.com/avatar/8c3bee0764c781e1b0b8c2e53f0f11fe'>
|
|
</a>
|
|
<a class='photo' href='https://github.com/mathiasbynens'>
|
|
<img alt='mathiasbynens' src='https://gravatar.com/avatar/24e08a9ea84deb17ae121074d0f17125'>
|
|
</a>
|
|
<a class='photo' href='https://github.com/stefanjudis'>
|
|
<img alt='stefanjudis' src='https://gravatar.com/avatar/22725c2d3eb331146549bf0d5d3c050c'>
|
|
</a>
|
|
<a class='photo' href='https://github.com/jmalloc'>
|
|
<img alt='jmalloc' src='https://gravatar.com/avatar/7a6666c5798fb54d1d4ebde0600567f3'>
|
|
</a>
|
|
<a class='photo' href='https://github.com/alrra'>
|
|
<img alt='alrra' src='https://gravatar.com/avatar/2fc3f42c9411898f83f3af8ede902591'>
|
|
</a>
|
|
|
|
<p><small>:wq</small></p>
|
|
<script>
|
|
function escapeField(s) {
|
|
return s.replace(/-/g, '--').replace(/_/g, '__');
|
|
}
|
|
function makeImage() {
|
|
var url = '/:';
|
|
url += escapeField(imageMaker.subject.value);
|
|
url += '-' + escapeField(imageMaker.status.value);
|
|
url += '-' + escapeField(imageMaker.color.value);
|
|
url += '.svg';
|
|
document.location = url;
|
|
}
|
|
</script>
|