Implemented local search with lunr.js

JS loading is deferred until after page render.

Note: .json compression must be enabled before merging this due to the large size of the search index.md

Author: Otto Chrons

.travis.yml

@@ -1,7 +1,7 @@
 language: ruby
 rvm: 2.2.3
 install:
-  - gem install -N jekyll:3.0.1 jekyll-paginate:1.1.0 jekyll-assets:2.1.2 sass:3.4.20
+  - gem install -N jekyll:3.0.1 jekyll-paginate:1.1.0 jekyll-assets:2.1.2 sass:3.4.20 execjs:2.6.0 uglifier:2.7.2
 script:
   - jekyll build
 after_success:

_assets/css/style.scss

@@ -182,6 +182,7 @@ a:focus {
   color: $primary-color;
 }
 
+.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,
 .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
   color: $primary-color;
   background-color: transparent;
@@ -272,7 +273,7 @@ a:focus {
 
 .hline-w {
   border-bottom: 2px solid #ffffff;
-  margin-bottom: 25px;
+  margin-bottom: 12px;
 }
 
 #headerwrap {
@@ -438,13 +439,11 @@ a:focus {
 }
 
 #footerwrap i {
-  font-size: 30px;
-  color: $footer-content;
-  padding-right: 25px;
+  padding-left: 5px;
 }
 
-#footerwrap i:hover {
-  color: $primary-color;
+#footerwrap a:hover {
+  color: $primary-color !important;
 }
 
 #blue {
@@ -715,3 +714,32 @@ a[name]:before {
   margin-top: 10px;
   margin-bottom: 10px !important;
 }
+
+#search-view {
+  position: relative;
+}
+
+#search-box {
+  display: none;
+  width: 300px;
+  height: 420px;
+  position: absolute;
+  padding: 10px 10px;
+  top: 50px;
+  left: auto;
+  right: 30px;
+  background: white;
+  z-index: 100;
+  box-shadow: 0px 10px 31px -15px rgba(0,0,0,1);
+}
+
+@media (max-width: 767px) {
+  #search-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: auto;
+  }
+}

_assets/js/bundle.js

@@ -2,4 +2,5 @@
 //= require jquery.min
 //= require bootstrap.min
 //= require highlight.pack
+//= require lunr
 //= require custom

_assets/js/custom.js

@@ -1,14 +1,100 @@
 // any link that is not part of the current domain is modified
 
-(function() {
+(function () {
   var links = document.links;
   for (var i = 0; i < links.length; i++) {
-    if (links[i].hostname != window.location.hostname && links[i].target == "" ) {
+    if (links[i].hostname != window.location.hostname && links[i].target == "") {
       links[i].target = '_blank';
     }
   }
 })();
 
+$(document).ready(function () {
+  var index, store;
+
+  $('pre code').each(function(i, block) {
+    hljs.highlightBlock(block);
+  });
+
+  $(".show-snippet-link").click(function (e) {
+    e.preventDefault();
+    var language = $(this).data("language");
+    $(".snippet").hide();
+    $(".snippet-" + language).show();
+    $(".show-snippet-tab").removeClass("active");
+    $(this.parentNode).addClass("active");
+  });
+
+  function switchSearchBox() {
+    if ($("#search-box").is(":visible")) {
+      $("#search-box").fadeOut('fast');
+    } else {
+      $("#search-box").fadeIn('fast');
+      $("#search-term").val("").focus();
+      $("#search-results").empty().hide();
+    }
+  }
+
+  // show search view when icon is clicked
+  $("#search-icon").on("click", function (e) {
+    e.stopPropagation();
+    $(this).blur();
+    switchSearchBox();
+  });
+
+  $("#search-term").on('keyup', function (e) {
+    if (e.keyCode == 27) {
+      switchSearchBox();
+      return;
+    }
+    if (index) {
+      var query = this.value;
+      var result = index.search(query);
+      var resultDiv = $("#search-results");
+      resultDiv.empty();
+      if (result.length == 0) {
+        resultDiv.append("<p class='csmall'>No results</p>");
+      } else {
+        resultDiv.append("<p class='csmall'>Results</p>");
+        for (var i in result.slice(0, 9)) {
+          var ref = result[i].ref;
+          var searchItem = "<p><a href='" + store[ref].href + "'>" + store[ref].title + "</a></p>";
+          resultDiv.append(searchItem);
+        }
+        resultDiv.show();
+      }
+    }
+  });
+
+  // hide search-box when clicked outside it
+  $(document).click(function (event) {
+    if (!$(event.target).closest('#search-box').length) {
+      if ($("#search-box").is(":visible")) {
+        $("#search-box").fadeOut('fast');
+      }
+    }
+  });
+
+  $(".navbar-toggle").on("click", function (e) {
+    // check if menu is collapsed and hide search window as well
+    var btn = $(this);
+    window.setTimeout(function () {
+      // delayed execution to allow Bootstrap code to do its thing first
+      if (btn.hasClass("collapsed")) {
+        $("#search-box").fadeOut();
+      }
+    }, 0);
+  });
+
+  // load search index
+  $.getJSON('/search_data.json', function (response) {
+    // Create index
+    index = lunr.Index.load(response.index);
+    // Create store
+    store = response.store;
+  });
+});
+
 hljs.initHighlightingOnLoad();
 
 $(document).ready(function () {