From 9c48e7a6955d7768c5380ba4a360fab7d026183a Mon Sep 17 00:00:00 2001
From: Thaddee Tyl <thaddee.tyl@gmail.com>
Date: Fri, 28 Nov 2014 23:48:31 +0100
Subject: [PATCH] beta website: search

Part of #252
---
 beta.html | 81 +++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 58 insertions(+), 23 deletions(-)
diff --git a/beta.html b/beta.html
index bafe34a..d27b0e0 100644
--- 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;
