beta website: search

Part of #252
2014-11-28 23:48:31 +01:00 · 2014-11-28 23:48:31 +01:00 · 9c48e7a695
commit 9c48e7a695
parent d9347fffe4
1 changed files with 58 additions and 23 deletions
--- a/beta.html
+++ b/beta.html
@ -1,6 +1,10 @@
 <!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=Lekton' rel='stylesheet'>
 <style>
@ -39,14 +43,17 @@ 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' autofocus placeholder='search / paste your project link'/>
+  <input name='projectSearch' id='projectSearch' autofocus placeholder='search'/>
 </form>
 <hr class='spacing'/>

 <h3> Build </h3>
-<table><tbody>
+<table class='badge'><tbody>
  <tr><th> Travis: </th>
    <td><img src='/travis/joyent/node.svg' alt=''/></td>
    <td><code>https://img.shields.io/travis/joyent/node.svg</code></td>
@ -67,7 +74,7 @@ the search.
    <td><img src='/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>
@ -129,24 +136,24 @@ the search.
  </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='/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='/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='/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='/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='/gem/dt/rails.svg' alt=''/></td>
  <td><code>https://img.shields.io/gem/dt/rails.svg</code></td>
  </tr>
@ -174,15 +181,15 @@ the search.
  <td><img src='/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='/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='/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='/packagist/dt/doctrine/orm.svg' alt=''/></td>
  <td><code>https://img.shields.io/packagist/dt/doctrine/orm.svg</code></td>
  </tr>
@ -220,8 +227,8 @@ the search.
  </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='/npm/v/npm.svg' alt=''/></td>
  <td><code>https://img.shields.io/npm/v/npm.svg</code></td>
  </tr>
@ -233,7 +240,7 @@ the search.
  <td><img src='/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='/gem/v/formatador.svg' alt=''/></td>
  <td><code>https://img.shields.io/gem/v/formatador.svg</code></td>
  </tr>
@ -241,7 +248,7 @@ the search.
  <td><img src='/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='/packagist/v/symfony/symfony.svg' alt=''/></td>
  <td><code>https://img.shields.io/packagist/v/symfony/symfony.svg</code></td>
  </tr>
@ -312,7 +319,7 @@ the search.
 </tbody></table>

 <h3> Miscellaneous </h3>
-<table><tbody>
+<table class='badge'><tbody>
  <tr><th> Gratipay: </th>
    <td><img src='/gratipay/JSFiddle.svg' alt=''/></td>
    <td><code>https://img.shields.io/gratipay/JSFiddle.svg</code></td>
@ -357,11 +364,11 @@ the search.
    <td><img src='/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='/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='/npm/l/express.svg' alt=''/></td>
    <td><code>https://img.shields.io/npm/l/express.svg</code></td>
  </tr>
@ -590,9 +597,33 @@ is where the current server got started.

 <p><small>:wq</small></p>
 <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);
+
+// Custom badge
 function makeImage() {
  var url = document.getElementById('imgUrlPrefix').textContent;
  url += escapeField(imageMaker.subject.value);
@ -601,8 +632,12 @@ function makeImage() {
  url += '.svg';
  document.location = url;
 }
-</script>
-<script>
+
+function escapeField(s) {
+  return encodeURIComponent(s.replace(/-/g, '--').replace(/_/g, '__'));
+}
+
+// Background image
 (function background() {
  var seed = (Math.random() * 1000)|0;
  var domHtml = document.documentElement;