diff --git a/index.html b/index.html
index e2c7124702..b597bcab62 100644
--- a/index.html
+++ b/index.html
@@ -1,97 +1,68 @@
-<!doctype html>
-<meta charset=utf-8>
-<title> Badge Service </title>
+<!doctype html><meta charset=utf-8>
+<title> Image Server </title>
 <meta name='viewport' content='width=device-width,initial-scale=1'>
+<meta name='description' content='We serve fast and scalable informational
+images as badges for GitHub, Travis CI, Jenkins, Wordpress and many more
+services. Use them to track the state of your projects, or for promotional
+purposes.'>
 <link rel='icon' type='image/png' href='favicon.png'>
-<link href='//fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet'>
+<link href='//fonts.googleapis.com/css?family=Lekton' rel='stylesheet'>
 <!-- Warning: this file was generated from try.html -->
 <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; }
+html { background-attachment: fixed; transition: background-color 0.5s; }
+:root { text-align: center; font-family: Lekton, sans-serif; color: #534; }
+code, #copyMarkdown, #copyreStructuredText {
+  white-space: pre-wrap; padding: 0 4px; border: 1px solid grey;
+  background: #eef; border-radius: 4px; }
+input.short { width: 5em; }
+input { text-align: center; border: solid #b9a; color: #534; border-width: 0 0 1px 0;
+  width: 40%; background-color: transparent; }
 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; }
+table.centered > tbody > tr > td:first-child { text-align: right; }
 th, td { text-align: left; }
+h1, h2, h3 { font-style: italic; }
 h2::before { content: '☙ '; }
 h2::after { content: ' ❧'; }
-h2 { font-variant: small-caps; }
+h2 { margin-top: 12mm; font-variant: small-caps; }
 hr.spacing { border: 0; display: block; height: 3mm; }
+.highlights { font-style: italic; }
+#copyDialog { display: none; position: fixed; background: rgba(100, 100, 100, 0.5); }
+#copyForm { background: #fafaff; position: fixed; width: 100%;
+  top: 50%; left: 0; transform: translate(0, -75%);
+  border-top: 15px solid #eaeaff;
+  border-bottom: 15px solid #eaeaff;
+}
+table.badge > tbody > tr > td > img { cursor: pointer; }
 </style>
 
-<img alt='GitHub Badges' src='logo.svg'/>
-
+<img alt='Shields IO' 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>
+
+<p class=highlights>
+Pixel-perfect &nbsp; Retina-ready &nbsp; Fast &nbsp; Consistent &nbsp; Hackable &nbsp; No tracking
+</p>
+
+<!-- FIXME: search through vendor badges
+It should detect URLs, call an ajax hook in the server that fetches the project
+data, returns a list of valid badges for the project with copy-and-paste
+markdown, html, etc.
+If it isn't a URL, search through available badges for keywords corresponding to
+the search.
+
+When that is implemented, change the placeholder to
+'search / project URL'
+-->
+<form action='javascript:void 0'>
+  <input name='projectSearch' id='projectSearch' autofocus placeholder='search'/>
 </form>
-<hr/>
 <hr class='spacing'/>
 
-<h2> Your Badge Service </h2>
-
-<p>
-<code><span id='imgUrlPrefix'>http://img.shields.io/badge/</span>&lt;SUBJECT&gt;-&lt;STATUS&gt;-&lt;COLOR&gt;.svg</code>
-</p><p>
-Dashes <code>--</code> → <code>-</code> Dash <br/>
-Underscores <code>__</code> → <code>_</code> Underscore <br/>
-<code>_</code> or Space <code> </code> → <code> </code> Space
-</p>
-
-<p>
-<img src='//img.shields.io/badge/color-brightgreen-brightgreen.svg' alt='brightgreen'/>
-<img src='//img.shields.io/badge/color-green-green.svg' alt='green'/>
-<img src='//img.shields.io/badge/color-yellowgreen-yellowgreen.svg' alt='yellowgreen'/>
-<img src='//img.shields.io/badge/color-yellow-yellow.svg' alt='yellow'/>
-<img src='//img.shields.io/badge/color-orange-orange.svg' alt='orange'/>
-<img src='//img.shields.io/badge/color-red-red.svg' alt='red'/>
-<img src='//img.shields.io/badge/color-lightgrey-lightgrey.svg' alt='lightgrey'/>
-<img src='//img.shields.io/badge/color-blue-blue.svg' alt='blue'/>
-<img src='//img.shields.io/badge/color-ff69b4-ff69b4.svg' alt='ff69b4'/>
-</p>
-
-<img src='//img.shields.io/badge/license-CC0-red.svg' alt='License: CC0'/>
-
-<p>
-Ever wanted to have your own GitHub badges? <br/>
-Maybe you simply wanted visual consistency? <br/>
-Maybe you wanted less blur? <br/>
-Or look good on high-res displays? <br/>
-Maybe you simply love SVG. <br/>
-And you like the smaller download.
-</p>
-
-<img src='//img.shields.io/badge/download-.8%20kB-blue.svg' alt='Download: .5kB'/>
-
-<p>
-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='//img.shields.io/badge/badge-on!-brightgreen.svg' alt='Badge on!'/>
-
-<h2> Supported Services </h2>
-
 <h3> Build </h3>
-<table><tbody>
+<table class='badge'><tbody>
   <tr><th> Travis: </th>
     <td><img src='//img.shields.io/travis/joyent/node.svg' alt=''/></td>
     <td><code>https://img.shields.io/travis/joyent/node.svg</code></td>
@@ -112,7 +83,7 @@ I made the GitHub Badge Service.
     <td><img src='//img.shields.io/teamcity/http/teamcity.jetbrains.com/s/bt345.svg' alt=''/></td>
     <td><code>https://img.shields.io/teamcity/http/teamcity.jetbrains.com/s/bt345.svg</code></td>
   </tr>
-  <tr><th> (full build status): </th>
+  <tr><th data-keywords='teamcity'> (full build status): </th>
     <td>&nbsp;</td>
     <td><code>https://img.shields.io/teamcity/http/teamcity.jetbrains.com/e/bt345.svg</code></td>
   </tr>
@@ -174,24 +145,24 @@ I made the GitHub Badge Service.
   </tr>
 </tbody></table>
 <h3> Downloads </h3>
-<table><tbody>
-  <tr><th> npm: </th>
+<table class='badge'><tbody>
+  <tr><th data-keywords='node'> npm: </th>
   <td><img src='//img.shields.io/npm/dm/localeval.svg' alt=''/></td>
   <td><code>https://img.shields.io/npm/dm/localeval.svg</code></td>
   </tr>
-  <tr><th> Gem: </th>
+  <tr><th data-keywords='ruby'> Gem: </th>
   <td><img src='//img.shields.io/gem/dv/rails/stable.svg' alt=''/></td>
   <td><code>https://img.shields.io/gem/dv/rails/stable.svg</code></td>
   </tr>
-  <tr><th> Gem: </th>
+  <tr><th data-keywords='ruby'> Gem: </th>
   <td><img src='//img.shields.io/gem/dv/rails/4.1.0.svg' alt=''/></td>
   <td><code>https://img.shields.io/gem/dv/rails/4.1.0.svg</code></td>
   </tr>
-  <tr><th> Gem: </th>
+  <tr><th data-keywords='ruby'> Gem: </th>
   <td><img src='//img.shields.io/gem/dtv/rails.svg' alt=''/></td>
   <td><code>https://img.shields.io/gem/dtv/rails.svg</code></td>
   </tr>
-  <tr><th> Gem: </th>
+  <tr><th data-keywords='ruby'> Gem: </th>
   <td><img src='//img.shields.io/gem/dt/rails.svg' alt=''/></td>
   <td><code>https://img.shields.io/gem/dt/rails.svg</code></td>
   </tr>
@@ -219,15 +190,15 @@ I made the GitHub Badge Service.
   <td><img src='//img.shields.io/pypi/dd/Django.svg' alt=''/></td>
   <td><code>https://img.shields.io/pypi/dd/Django.svg</code></td>
   </tr>
-  <tr><th> Packagist: </th>
+  <tr><th data-keywords='PHP'> Packagist: </th>
   <td><img src='//img.shields.io/packagist/dm/doctrine/orm.svg' alt=''/></td>
   <td><code>https://img.shields.io/packagist/dm/doctrine/orm.svg</code></td>
   </tr>
-  <tr><th> Packagist: </th>
+  <tr><th data-keywords='PHP'> Packagist: </th>
   <td><img src='//img.shields.io/packagist/dd/doctrine/orm.svg' alt=''/></td>
   <td><code>https://img.shields.io/packagist/dd/doctrine/orm.svg</code></td>
   </tr>
-  <tr><th> Packagist: </th>
+  <tr><th data-keywords='PHP'> Packagist: </th>
   <td><img src='//img.shields.io/packagist/dt/doctrine/orm.svg' alt=''/></td>
   <td><code>https://img.shields.io/packagist/dt/doctrine/orm.svg</code></td>
   </tr>
@@ -265,8 +236,8 @@ I made the GitHub Badge Service.
   </tr>
 </tbody></table>
 <h3> Version </h3>
-<table><tbody>
-  <tr><th> npm: </th>
+<table class='badge'><tbody>
+  <tr><th data-keywords='node'> npm: </th>
   <td><img src='//img.shields.io/npm/v/npm.svg' alt=''/></td>
   <td><code>https://img.shields.io/npm/v/npm.svg</code></td>
   </tr>
@@ -278,7 +249,7 @@ I made the GitHub Badge Service.
   <td><img src='//img.shields.io/pypi/v/nine.svg' alt=''/></td>
   <td><code>https://img.shields.io/pypi/v/nine.svg</code></td>
   </tr>
-  <tr><th> Gem: </th>
+  <tr><th data-keywords='ruby'> Gem: </th>
   <td><img src='//img.shields.io/gem/v/formatador.svg' alt=''/></td>
   <td><code>https://img.shields.io/gem/v/formatador.svg</code></td>
   </tr>
@@ -286,7 +257,7 @@ I made the GitHub Badge Service.
   <td><img src='//img.shields.io/hackage/v/lens.svg' alt=''/></td>
   <td><code>https://img.shields.io/hackage/v/lens.svg</code></td>
   </tr>
-  <tr><th> Packagist: </th>
+  <tr><th data-keywords='PHP'> Packagist: </th>
   <td><img src='//img.shields.io/packagist/v/symfony/symfony.svg' alt=''/></td>
   <td><code>https://img.shields.io/packagist/v/symfony/symfony.svg</code></td>
   </tr>
@@ -357,7 +328,7 @@ I made the GitHub Badge Service.
 </tbody></table>
 
 <h3> Miscellaneous </h3>
-<table><tbody>
+<table class='badge'><tbody>
   <tr><th> Gratipay: </th>
     <td><img src='//img.shields.io/gratipay/JSFiddle.svg' alt=''/></td>
     <td><code>https://img.shields.io/gratipay/JSFiddle.svg</code></td>
@@ -402,11 +373,11 @@ I made the GitHub Badge Service.
     <td><img src='//img.shields.io/versioneye/d/ruby/rails.svg' alt=''/></td>
     <td><code>https://img.shields.io/versioneye/d/ruby/rails.svg</code></td>
   </tr>
-  <tr><th> Packagist: </th>
+  <tr><th data-keywords='PHP'> Packagist: </th>
     <td><img src='//img.shields.io/packagist/l/doctrine/orm.svg' alt=''/></td>
     <td><code>https://img.shields.io/packagist/l/doctrine/orm.svg</code></td>
   </tr>
-  <tr><th> npm: </th>
+  <tr><th data-keywords='node'> npm: </th>
     <td><img src='//img.shields.io/npm/l/express.svg' alt=''/></td>
     <td><code>https://img.shields.io/npm/l/express.svg</code></td>
   </tr>
@@ -444,7 +415,57 @@ I made the GitHub Badge Service.
   </tr>
 </tbody></table>
 
-<h3> Flat Style </h3>
+<h2> Your Badge </h2>
+
+<form action='javascript:makeImage()' id='imageMaker'>
+  <input class='short' name='subject' placeholder='subject'/>
+  <input class='short' name='status' placeholder='status'/>
+  <input class='short' 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>Make Badge</button>
+</form>
+<hr class='spacing'/>
+
+<p>
+<code><span id='imgUrlPrefix'>http://img.shields.io/badge/</span>&lt;SUBJECT&gt;-&lt;STATUS&gt;-&lt;COLOR&gt;.svg</code>
+</p>
+<table class=centered><tbody>
+  <tr><td>   Dashes <code>--</code>
+  </td><td>  →
+  </td><td>  <code>-</code> Dash
+  </td></tr>
+  <tr><td>   Underscores <code>__</code>
+  </td><td>  →
+  </td><td>  <code>_</code> Underscore <br/>
+  </td></tr>
+  <tr><td>   <code>_</code> or Space <code> </code>
+  </td><td>  →
+  </td><td>  <code> </code> Space
+  </td></tr>
+</tbody></table>
+
+<p>
+<img src='//img.shields.io/badge/color-brightgreen-brightgreen.svg' alt='brightgreen'/>
+<img src='//img.shields.io/badge/color-green-green.svg' alt='green'/>
+<img src='//img.shields.io/badge/color-yellowgreen-yellowgreen.svg' alt='yellowgreen'/>
+<img src='//img.shields.io/badge/color-yellow-yellow.svg' alt='yellow'/>
+<img src='//img.shields.io/badge/color-orange-orange.svg' alt='orange'/>
+<img src='//img.shields.io/badge/color-red-red.svg' alt='red'/>
+<img src='//img.shields.io/badge/color-lightgrey-lightgrey.svg' alt='lightgrey'/>
+<img src='//img.shields.io/badge/color-blue-blue.svg' alt='blue'/>
+<img src='//img.shields.io/badge/color-ff69b4-ff69b4.svg' alt='ff69b4'/>
+</p>
+
+<h2> Styles </h2>
 <p>
 One of those two designs may become the default one. Vote by using them!
 </p>
@@ -460,7 +481,12 @@ One of those two designs may become the default one. Vote by using them!
 </tbody></table>
 
 <p>
-We also support <code>.json</code>, but use that responsively.
+Override the default left-hand-side text with
+<code>?label=wow so healthy</code>.
+</p>
+<p>
+We also support <code>.json</code>, <code>.png</code> and a few others,
+but use that responsively.
 </p>
 
 <h2> Like This? </h2>
@@ -478,13 +504,9 @@ And tell us, we might be able to bring it to you anyway!
   style="border:0; background-color:transparent"
   width="95" height="20"></iframe>
 </p>
-
-<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/badges/shields'>here</a>.
+<a href='https://github.com/h5bp/lazyweb-requests/issues/150'>This</a>
+is where the current server got started.
 </p>
 
 <h2> Contributors </h2>
@@ -495,33 +517,8 @@ All the activity and the code sits
 <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://avatars.githubusercontent.com/u/1223565?s=80'>
-</a>
-<a class='photo' href='https://github.com/ezzatron'>
-  <img alt='ezzatron' src='https://gravatar.com/avatar/95ce5a53e68fe5287fadde649da8c6c7'>
-</a>
-<a class='photo' href='https://github.com/brettcannon'>
-  <img alt='brettcannon' src='https://avatars.githubusercontent.com/u/54418?s=80'>
-</a>
-<a class='photo' href='https://github.com/seanlinsley'>
-  <img alt='seanlinsley' src='https://avatars.githubusercontent.com/u/688886?s=80'>
-</a>
-<br>
-<a class='photo' href='https://github.com/CodeBlock'>
-  <img alt='CodeBlock' src='https://avatars.githubusercontent.com/u/43930?s=80'>
-</a>
-<a class='photo' href='https://github.com/akashivskyy'>
-  <img alt='akashivskyy' src='https://avatars.githubusercontent.com/u/565231?s=80'>
-</a>
-<a class='photo' href='https://github.com/rmasters'>
-  <img alt='rmasters' src='https://avatars.githubusercontent.com/u/34284?s=80'>
+<a class='photo' href='https://github.com/olivierlacan'>
+  <img alt='olivierlacan' src='https://gravatar.com/avatar/6e77509d7891c1d2230f3240a5652b6e'>
 </a>
 <a class='photo' href='https://github.com/nathany'>
   <img alt='nathany' src='https://gravatar.com/avatar/7d0978b275a362d11283396a929aee65'>
@@ -529,19 +526,62 @@ All the activity and the code sits
 <a class='photo' href='https://github.com/whit537'>
   <img alt='whit537' src='https://gravatar.com/avatar/fb054b407a6461e417ee6b6ae084da37'>
 </a>
-<a class='photo' href='https://github.com/olivierlacan'>
-  <img alt='olivierlacan' src='https://gravatar.com/avatar/6e77509d7891c1d2230f3240a5652b6e'>
+<a class='photo' href='https://github.com/kura'>
+  <img alt='kura' src='https://gravatar.com/avatar/6db32988bd24b2f19231a7e88a74455a'>
+</a>
+<a class='photo' href='https://github.com/maxogden'>
+  <img alt='maxogden' src='https://avatars1.githubusercontent.com/u/39759?s=80'>
+</a>
+<a class='photo' href='https://github.com/seanlinsley'>
+  <img alt='seanlinsley' src='https://avatars.githubusercontent.com/u/688886?s=80'>
+</a>
+<br>
+<a class='photo' href='https://github.com/alrra'>
+  <img alt='alrra' src='https://avatars.githubusercontent.com/u/1223565?s=80'>
+</a>
+<a class='photo' href='https://github.com/jublo'>
+  <img alt='jublo' src='https://avatars.githubusercontent.com/u/6348321?s=80'>
+</a>
+<a class='photo' href='https://github.com/sebmck'>
+  <img alt='sebmck' src='https://avatars.githubusercontent.com/u/853712?s=80'>
+</a>
+<a class='photo' href='https://github.com/avanderhoorn'>
+  <img alt='avanderhoorn' src='https://www.gravatar.com/avatar/6af12b64c2fe22af3b27848b8eedd992'>
+</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/ezzatron'>
+  <img alt='ezzatron' src='https://gravatar.com/avatar/95ce5a53e68fe5287fadde649da8c6c7'>
+</a>
+<a class='photo' href='https://github.com/brettcannon'>
+  <img alt='brettcannon' src='https://avatars.githubusercontent.com/u/54418?s=80'>
+</a>
+<a class='photo' href='https://github.com/CodeBlock'>
+  <img alt='CodeBlock' src='https://avatars.githubusercontent.com/u/43930?s=80'>
 </a>
 <a class='photo' href='https://github.com/Mikulas'>
   <img alt='Mikulas' src='https://gravatar.com/avatar/daa06ea257d7820ff84735a55b931ec8'>
 </a>
-<a class='photo' href='https://github.com/kura'>
-  <img alt='kura' src='https://gravatar.com/avatar/6db32988bd24b2f19231a7e88a74455a'>
+<br>
+<a class='photo' href='https://github.com/seggidins'>
+  <img alt='seggidins' src='https://avatars.githubusercontent.com/u/1946610?s=80'>
+</a>
+<a class='photo' href='https://github.com/SonicHedgehog'>
+  <img alt='SonicHedgehog' src='https://avatars.githubusercontent.com/u/652793?s=80'>
+</a>
+<a class='photo' href='https://github.com/akashivskyy'>
+  <img alt='akashivskyy' src='https://avatars.githubusercontent.com/u/565231?s=80'>
+</a>
+<a class='photo' href='https://github.com/rmasters'>
+  <img alt='rmasters' src='https://avatars.githubusercontent.com/u/34284?s=80'>
 </a>
 <a class='photo' href='https://github.com/cainus'>
   <img alt='cainus' src='https://gravatar.com/avatar/c8475420ebca73833e55ccf57d8d7500'>
 </a>
-<br>
 <a class='photo' href='https://github.com/jbowes'>
   <img alt='jbowes' src='https://gravatar.com/avatar/363ada7cda10d5eae5eeb7704278fb51'>
 </a>
@@ -557,24 +597,130 @@ All the activity and the code sits
 <a class='photo' href='https://github.com/qubyte'>
   <img alt='qubyte' src='https://gravatar.com/avatar/2b8729c02bc2fb886b32ed23cb7b0a31'>
 </a>
-<a class='photo' href='https://github.com/maxogden'>
-  <img alt='maxogden' src='https://avatars1.githubusercontent.com/u/39759?s=80'>
-</a>
-<a class='photo' href='https://github.com/avanderhoorn'>
-  <img alt='avanderhoorn' src='https://www.gravatar.com/avatar/6af12b64c2fe22af3b27848b8eedd992'>
-</a>
 <a class='photo' href='https://github.com/khellang'>
   <img alt='khellang' src='https://gravatar.com/avatar/b3616645c168b0b8a65e109a6b1cb010'>
 </a>
 <a class='photo' href='https://github.com/nitram509'>
   <img alt='nitram509' src='https://www.gravatar.com/avatar/fa01e907fd400c42d481f431c4410954.png'>
 </a>
-
 <p><small>:wq</small></p>
+
+<dialog id='copyDialog'>
+<form id='copyForm'>
+  <p><img id='copyImg'>
+  </p><p><label> Link <input type='url' name='url'/></label>
+  </p><p><label> Image <input type='url' name='img'/></label>
+  </p><p><label> Style
+    <select name='style'>
+      <option value='plastic' selected> plastic
+      <option value='flat'>             flat
+      <option value='flat-square'>      flat-square
+    </select>
+  </label>
+  </p><p> Markdown
+  <output id=copyMarkdown>&nbsp;</output>
+  </p><p> reStructuredText
+  <output id=copyreStructuredText>&nbsp;</output>
+</form>
+</dialog>
+
 <script>
-function escapeField(s) {
-  return encodeURIComponent(s.replace(/-/g, '--').replace(/_/g, '__'));
+// Search
+var searchBadgeDb = {index: [], tr: []};
+function searchBadgeDbInit() {
+  var trs = document.querySelectorAll('table.badge tr');
+  for (var i = 0; i < trs.length; i++) {
+    var tr = trs[i];
+    var th = tr.firstElementChild;
+    searchBadgeDb.index.push(th.textContent + ' ' + th.dataset.keywords);
+    searchBadgeDb.tr.push(tr);
+  }
+  projectSearch.addEventListener('input', searchBadge);
 }
+function searchBadge(event) {
+  var query = event.target.value;
+  var regex = new RegExp(query, 'i');
+  for (var i = 0; i < searchBadgeDb.index.length; i++) {
+    if (regex.test(searchBadgeDb.index[i])) {
+      searchBadgeDb.tr[i].removeAttribute('style');
+    } else {
+      searchBadgeDb.tr[i].style.display = 'none';
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', searchBadgeDbInit);
+
+// Markup copier dialog
+function markupDialogInit() {
+  var trs = document.querySelectorAll('table.badge tr');
+  for (var i = 0; i < trs.length; i++) {
+    var tr = trs[i];
+    var target = tr.querySelector('img');
+    if (target) {
+      target.addEventListener('click', makeMarkupDialogListener(tr));
+    }
+  }
+}
+function makeMarkupDialogListener(tr) {
+  return function(event) { markupDialog(tr); event.stopPropagation(); };
+}
+
+document.addEventListener('DOMContentLoaded', markupDialogInit);
+
+var copyFormUrlEventListener;
+
+function markupDialog(tr) {
+  // Set up the data we have.
+  // Trim the ending colon `:`.
+  var trname = tr.firstElementChild.textContent.trim().slice(0, -1);
+  var trimg = tr.querySelector('img').src;
+  copyForm.img.value = trimg;
+  // Set up the input listeners.
+  copyForm.url.removeEventListener('input', copyFormUrlEventListener);
+  copyForm.img.removeEventListener('input', copyFormUrlEventListener);
+  copyForm.style.removeEventListener('change', copyFormUrlEventListener);
+  copyFormUrlEventListener = function(event) {
+    var url = copyForm.url.value;
+    var img = copyForm.img.value;
+    var style = copyForm.style.value;
+    // Default style doesn't show.
+    if (style !== 'plastic') { img += '?style=' + style; }
+    var md = '[![' + trname + '](' + img + ')](' + url + ')';
+    var rst = '.. image:: ' + img + '   :target: ' + url;
+    copyMarkdown.value = md;
+    copyreStructuredText.value = rst;
+    copyImg.src = img;
+  };
+  copyForm.url.addEventListener('input', copyFormUrlEventListener);
+  copyForm.img.addEventListener('input', copyFormUrlEventListener);
+  copyForm.style.addEventListener('change', copyFormUrlEventListener);
+  // Set up the window position
+  var w = document.documentElement.offsetWidth;
+  var h = document.documentElement.offsetHeight;
+  copyDialog.style.top = '0';
+  copyDialog.style.left = '0';
+  copyDialog.style.width = w + 'px';
+  copyDialog.style.height = h + 'px';
+  // Set up hide listener and show.
+  copyFormUrlEventListener();
+  markupDialogShow();
+}
+function markupDialogShow() {
+  document.documentElement.style.backgroundColor = '#777';
+  document.body.addEventListener('click', markupDialogHide);
+  copyDialog.style.display = 'block';
+}
+function markupDialogHide() {
+  document.documentElement.style.backgroundColor = 'white';
+  document.body.removeEventListener('click', markupDialogHide);
+  copyDialog.style.display = 'none';
+}
+copyForm.addEventListener('click', function(event) {
+  event.stopPropagation();
+});
+
+// Custom badge
 function makeImage() {
   var url = document.getElementById('imgUrlPrefix').textContent;
   url += escapeField(imageMaker.subject.value);
@@ -583,4 +729,16 @@ function makeImage() {
   url += '.svg';
   document.location = url;
 }
+
+function escapeField(s) {
+  return encodeURIComponent(s.replace(/-/g, '--').replace(/_/g, '__'));
+}
+
+// Background image
+(function background() {
+  var seed = (Math.random() * 1000)|0;
+  var domHtml = document.documentElement;
+  var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + domHtml.clientWidth + '" height="' + domHtml.clientHeight + '"><filter id="a"><feTurbulence baseFrequency=".08" numOctaves="8" stitchTiles="stitch" seed="' + seed + '"/><feColorMatrix values="1 0 0 0 0  1 0 0 0 0  1 0 0 0 .9  .01 0 0 0 .01"/></filter><rect width="100%" height="100%" filter="url(#a)"/></svg>';
+  domHtml.style.backgroundImage = 'url(data:image/svg+xml;base64,' + btoa(svg) + ')';
+}());
 </script>

(full build status):
Travis:		`https://img.shields.io/travis/joyent/node.svg`		`https://img.shields.io/teamcity/http/teamcity.jetbrains.com/s/bt345.svg`
(full build status):		`https://img.shields.io/teamcity/http/teamcity.jetbrains.com/e/bt345.svg`
Gem:
npm:		`https://img.shields.io/npm/dm/localeval.svg`
Gem:		`https://img.shields.io/gem/dv/rails/stable.svg`
Gem:
Gem:		`https://img.shields.io/gem/dv/rails/4.1.0.svg`
Gem:
Gem:		`https://img.shields.io/gem/dtv/rails.svg`
Gem:
Gem:		`https://img.shields.io/gem/dt/rails.svg`
	`https://img.shields.io/pypi/dd/Django.svg`
Packagist:
Packagist:		`https://img.shields.io/packagist/dm/doctrine/orm.svg`
Packagist:
Packagist:		`https://img.shields.io/packagist/dd/doctrine/orm.svg`
Packagist:
Packagist:		`https://img.shields.io/packagist/dt/doctrine/orm.svg`
Gem:
npm:		`https://img.shields.io/npm/v/npm.svg`
	`https://img.shields.io/pypi/v/nine.svg`
Gem:		`https://img.shields.io/gem/v/formatador.svg`
	`https://img.shields.io/hackage/v/lens.svg`
Packagist:
Packagist:		`https://img.shields.io/packagist/v/symfony/symfony.svg`
Packagist:
Gratipay:	`https://img.shields.io/gratipay/JSFiddle.svg`	`https://img.shields.io/versioneye/d/ruby/rails.svg`
Packagist:	`https://img.shields.io/packagist/l/doctrine/orm.svg`
npm:
npm:	`https://img.shields.io/npm/l/express.svg`
Dashes `--` +	→ +	`-` Dash +
Underscores `__` +	→ +	`_` Underscore +
`_` or Space +	→ +	Space +