Updates for using Algolia search

Gemfile.lock

@@ -59,5 +59,9 @@ PLATFORMS
 DEPENDENCIES
   jekyll (~> 1.0)
   less (~> 2.5.0)
+  safe_yaml (~> 1.0.4)
   sass (~> 3.0)
   therubyracer
+
+BUNDLED WITH
+   1.10.6

src/_includes/icons/filter.html

@@ -1,30 +0,0 @@
-<div class="filter-parent" id="search">
-  <label for="filter-by"><i class="fa fa-search"></i></label>
-  <input placeholder="Search icons" id="filter-by" class="form-control input-lg" tabindex="1">
-  <a href="#" id="filter-clear" class="fa fa-times"></a>
-</div>
-<script>
-  try {
-    window.filterSet = JSON.parse('{{ icons | flattenIconFilters | jsonify }}');
-  } catch (e) {
-    console.error('Invalid JSON data!');
-    window.filterSet = [];
-  }
-</script>
-<section id="filter">
-  <h2 class="page-header text-muted">Search for '<span class="text-color-default" id="filter-val"></span>'</h2>
-
-  <div class="row fontawesome-icon-list">
-    {% for icon in icons %}
-    <div class="fa-hover col-md-3 col-sm-4 filter-icon"
-      data-filter="{{ icon.class }}{% for alias in icon.aliases %}|{{ alias }}{% endfor %}{% for filter in icon.filter %}|{{ filter }}{% endfor %}">
-      <a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a>
-    </div>
-    {% endfor %}
-  </div>
-  <div id="no-search-results">
-    <div class="alert alert-warning" role="alert"><i class="fa fa-warning margin-right-sm"></i>No icons matching <strong>'<span></span>'</strong> were found.</div>
-  </div>
-  <div class="alert alert-info" role="alert"><i class="fa fa-exclamation-circle margin-right-sm"></i>Tags are added by the community. Do you think your search query should return an icon? Send a pull request on <a href="https://github.com/FortAwesome/Font-Awesome/blob/master/CONTRIBUTING.md#suggesting-icon-keyword-additionremoval">GitHub</a>!</div>
-
-</section>

src/_layouts/base.html

@@ -59,7 +59,11 @@
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/{{ site.jquery.version }}/jquery.min.js"></script>
   <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/{{ site.jquery_validate.version }}/jquery.validate.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/js/bootstrap.min.js"></script>
-  <script src="{{ page.relative_path}}assets/js/tabcomplete.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/algoliasearch.helper/2/algoliasearch.helper.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
   <script src="{{ page.relative_path }}assets/js/site.js"></script>
+  <script src="{{ page.relative_path }}assets/js/search.js"></script>
   </body>
 </html>

src/assets/js/search.js

@@ -0,0 +1,62 @@
+$(function() {
+    var SearchView = Backbone.View.extend({
+
+        template: _.template($("#results-template").html()),
+
+        events: {
+            "keyup #search-input": "search",
+            "click #search-clear": "clear"
+        },
+
+        initialize: function() {
+            this.algolia = algoliasearch("M19DXW5X0Q", "c79b2e61519372a99fa5890db070064c");
+            this.algoliaHelper = algoliasearchHelper(this.algolia, "font_awesome");
+
+            this.$searchInput = this.$("#search-input");
+            this.$searchResultsSection = this.$("#search-results");
+            this.$searchInputClear = this.$("#search-clear");
+            this.$iconsSection = this.$("#icons");
+
+            this.algoliaHelper.on("result", _.bind(this.showResults, this));
+        },
+
+        search: function(event) {
+            var query = this.$searchInput.val();
+
+            if (query !== "") {
+                this. algoliaHelper.setQuery(query).search();
+            } else {
+                this.clearResults();
+            }
+        },
+
+        clear: function(event) {
+            event.preventDefault();
+
+            this.clearResults();
+        },
+
+        showResults: function(content, state) {
+            this.$searchResultsSection.html("");
+            this.$searchResultsSection.removeClass("hide");
+            this.$searchInputClear.removeClass("hide");
+            this.$iconsSection.addClass("hide");
+            this.$searchResultsSection.html(this.template({results: content}));
+        },
+
+        clearResults: function() {
+            this.$searchInput.val("").focus();
+            this.$searchResultsSection.addClass("hide");
+            this.$searchResultsSection.html("");
+            this.$searchInputClear.addClass("hide");
+            this.$iconsSection.removeClass("hide");
+        }
+    });
+
+
+    var $searchViewElement = $("[data-view=search]");
+
+    if ($searchViewElement.length > 0) {
+        new SearchView({ el: $searchViewElement });
+    }
+});

src/assets/js/site.js

@@ -1,144 +1,64 @@
-$(function() {
-  $("#newsletter").validate();
-
-  var ads = [
-    {
-      quote: "Take your icon game to the next level. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
-      class: "fonticons",
-      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.4_update",
-      btn_text: "Gimme Some!"
-    },
-    {
-      quote: "Make your icons load 10x faster! Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
-      class: "fonticons",
-      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.4_update",
-      btn_text: "Gimme Some!"
-    },
-    {
-      quote: "Looking for other great icon sets? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
-      class: "fonticons",
-      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.4_update",
-      btn_text: "Gimme Some!"
-    },
-    {
-      quote: "Want to add your own icon? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
-      class: "fonticons",
-      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.4_update",
-      btn_text: "Gimme Some!"
-    },
-
-
-
-    {
-      quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
-      class: "black-tie",
-      url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.4_update",
-      btn_text: "Check it Out!"
-    },
-    {
-      quote: "Want clean, minimalist icons? Check out <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
-      class: "black-tie",
-      url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.4_update",
-      btn_text: "Check it Out!"
-    }
-  ];
-
-  selectFonticonsAd();
-
-  // start the icon carousel
-  $('#icon-carousel').carousel({
-    interval: 5000
-  });
-
-  $('[data-toggle="popover"]').popover();
-
-  var $filter_by = $('#filter-by');
-
-  // Filter icons
-  if($filter_by.length) {
-    var $filter_val = $('#filter-val');
-    var $filter = $('#filter');
-    var $other = $('#new, #web-application, #hand, #transportation, #gender, #form-control, #medical, #currency, #text-editor, #directional, #video-player, #brand, #file-type, #spinner, #payment, #chart');
-    var $clear = $('#filter-clear');
-    var $no_results = $('#no-search-results');
-
-    var $icons = $('.filter-icon', $filter);
-
-    // Add tab completion
-    $filter_by.tabcomplete(filterSet, {
-      arrowKeys: true
-    });
+$(function () {
+    $("#newsletter").validate();
+
+    var ads = [
+        {
+            quote: "Take your icon game to the next level. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+            class: "fonticons",
+            url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.4_update",
+            btn_text: "Gimme Some!"
+        },
+        {
+            quote: "Make your icons load 10x faster! Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+            class: "fonticons",
+            url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.4_update",
+            btn_text: "Gimme Some!"
+        },
+        {
+            quote: "Looking for other great icon sets? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+            class: "fonticons",
+            url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.4_update",
+            btn_text: "Gimme Some!"
+        },
+        {
+            quote: "Want to add your own icon? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+            class: "fonticons",
+            url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.4_update",
+            btn_text: "Gimme Some!"
+        },
+
+
+        {
+            quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
+            class: "black-tie",
+            url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.4_update",
+            btn_text: "Check it Out!"
+        },
+        {
+            quote: "Want clean, minimalist icons? Check out <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
+            class: "black-tie",
+            url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.4_update",
+            btn_text: "Check it Out!"
+        }
+    ];
 
-    $clear.on('click', function(e) {
-      e.preventDefault();
-      $filter_by
-        .val('')
-        .trigger('input')
-        .trigger('keyup')
-        .focus();
+    selectFonticonsAd();
 
-      $clear.addClass('hide'); // Hide clear button
+    // start the icon carousel
+    $('#icon-carousel').carousel({
+        interval: 5000
     });
 
+    $('[data-toggle="popover"]').popover();
 
-    $filter_by.on('keyup', function() {
-      var $this = $(this);
-      var val = $this.val().toLowerCase();
-      $filter.toggle(!!val);
-      $other.toggle(!val);
-      $clear.toggleClass('hide', !val);
-      $filter_val.text(val);
-
-      if(!val) return;
+    function selectFonticonsAd() {
+        random_number = Math.floor(Math.random() * ads.length);
+        random_ad = ads[random_number];
 
-      var resultsCount = 0;
-      $icons.each(function() {
-        var filter = $(this).attr('data-filter').split('|');
-        var show = inFilter(val, filter);
-        if (!show) {
-          if (val.slice(-1) === 's') {
-            // Try to be smart. Make plural terms singular.
-            show = inFilter(val.slice(0, -1), filter);
-          }
-        }
-        if (show) resultsCount++;
-        $(this).toggle(!!show);
-      });
-
-      if( resultsCount == 0 && val.length != 0 ) {
-        $no_results.find('span').text(val);
-        $no_results.show();
-      } else {
-        $no_results.hide();
-      }
-    });
-  }
-
-  function inFilter(val, filter) {
-    for (var i = 0; i < filter.length; i++) {
-      if (filter[i].match(val)) return true;
+        $('#banner').addClass(random_ad.class);
+        $('#rotating-message').html(random_ad.quote);
+        $('#rotating-url').attr("href", random_ad.url);
+        $('#rotating-url').html(random_ad.btn_text);
+        $('#banner').collapse('show');
     }
-    return false;
-  }
-
-  $filter_by
-    .val('')
-    .trigger('input')
-    .trigger('keyup')
-    .focus();
-
-  if ($clear) {
-    $clear.addClass('hide'); // Hide clear button
-  }
-
-  function selectFonticonsAd() {
-    random_number = Math.floor( Math.random() * ads.length );
-    random_ad = ads[random_number];
-
-    $('#banner').addClass(random_ad.class);
-    $('#rotating-message').html(random_ad.quote);
-    $('#rotating-url').attr("href", random_ad.url);
-    $('#rotating-url').html(random_ad.btn_text);
-    $('#banner').collapse('show');
-  }
 });

src/assets/less/site/search.less

@@ -1,25 +1,34 @@
-.filter-parent {
+#search {
   position: relative;
   font-size: 18px;
   padding-top: 40px;
-  margin: -20px auto 50px;
+  margin: -20px auto 0px;
+
   label {
     position: absolute;
     left: 17px;
     top: 50px;
   }
-  #filter-by, .hint {
+
+  #search-input, .hint {
     padding-left: 43px;
     padding-right: 43px;
     border-radius: 23px;
   }
+
   .hint {
     color: #aaa;
   }
-  #filter-clear {
+
+  #search-clear {
     text-decoration: none;
     position: absolute;
     right: 18px;
     top: 53px;
   }
 }
+
+.algolia {
+  margin-top: -20px;
+  padding-top: 45px;
+}

src/icons.html

@@ -10,7 +10,7 @@ relative_path: ../
 {% include jumbotron.html %}
 {% include stripe-social.html %}
 
-<div class="container">
+<div class="container" data-view="search">
   {% capture stripe_ad_content %}
   <p class="lead">
     You asked, Font Awesome delivers with {{ icons | version:site.fontawesome.minor_version | size }} shiny new icons in version {{ site.fontawesome.minor_version }}.
@@ -21,22 +21,54 @@ relative_path: ../
   {% endcapture %}
   {% include stripe-ad.html %}
 
-  {% include icons/filter.html %}
+  <div class="row">
+    <div class="col-md-10">
+      <section id="search">
+        <label for="search-input"><i class="fa fa-search"></i></label>
+        <input id="search-input" class="form-control input-lg" placeholder="Search icons" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">
+        <a id="search-clear" href="#" class="fa fa-times hide"></a>
+      </section>
+    </div>
+    <div class="col-md-2">
+      <div class="algolia">
+        by <a href="https://www.algolia.com"><img src="{{ page.relative_path }}assets/img/algolia.png" width=100" height="32"></a>
+      </div>
+    </div>
+  </div>
 
-  {% include icons/new.html %}
-  {% include icons/web-application.html %}
-  {% include icons/hand.html %}
-  {% include icons/transportation.html %}
-  {% include icons/gender.html %}
-  {% include icons/file-type.html %}
-  {% include icons/spinner.html %}
-  {% include icons/form-control.html %}
-  {% include icons/payment.html %}
-  {% include icons/chart.html %}
-  {% include icons/currency.html %}
-  {% include icons/text-editor.html %}
-  {% include icons/directional.html %}
-  {% include icons/video-player.html %}
-  {% include icons/brand.html %}
-  {% include icons/medical.html %}
+  <div id="search-results" class="hide"></div>
+  <div id="icons">
+    {% include icons/new.html %}
+    {% include icons/web-application.html %}
+    {% include icons/hand.html %}
+    {% include icons/transportation.html %}
+    {% include icons/gender.html %}
+    {% include icons/file-type.html %}
+    {% include icons/spinner.html %}
+    {% include icons/form-control.html %}
+    {% include icons/payment.html %}
+    {% include icons/chart.html %}
+    {% include icons/currency.html %}
+    {% include icons/text-editor.html %}
+    {% include icons/directional.html %}
+    {% include icons/video-player.html %}
+    {% include icons/brand.html %}
+    {% include icons/medical.html %}
+  </div>
+  <script type="text/template" id="results-template">
+    <h2 class="page-header">Search for '<span class="text-color-default"><%= results.query %></span>'</h2>
+    <% if (results.nbHits > 0) { %>
+      <div class="row fontawesome-icon-list">
+      <% _.each(results.hits, function(icon) { %>
+        <div class="fa-hover col-md-3 col-sm-4">
+          <a href="{{ page.relative_path }}icon/<%= icon.name %>">
+            <i class="fa <%= icon.css_class %>"></i> <%= icon.name %>
+          </a>
+        </div>
+      <% }); %>
+    <% } else { %>
+        No Results
+    <% } %>
+    </div>
+  </script>
 </div>