Added search capabilities

_articles/getting-started/change-master-password.md

@@ -1,7 +1,7 @@
 ---
 layout: article
 title: Changing Your Master Password
-category: getting-started
+category: Getting Started
 featured: true
 popular: true
 tags: [password, account]

_categories/getting-started.md

@@ -1,5 +1,5 @@
 ---
 layout: category
-category: getting-started
+title: Getting Started
 featured: true
 ---

_layouts/category.html

@@ -6,7 +6,7 @@ layout: default
     <h1>{{page.title}}</h1>
     <ol>
     {% for article in site.articles %}
-    {% if article.category == page.category %}
+    {% if article.category == page.title %}
         <li><a href="{{article.url}}">{{article.title}}</a></li>
     {% endif %}
     {% endfor %}

index.html

@@ -5,11 +5,11 @@ title: Help, FAQ, and Support
 
 <div class="search-header">
 <div class="container">
-    <form action="search.html" method="get">
+    <form action="/search/" method="get">
         <div class="input-group">
-            <input type="search" class="form-control" placeholder="Type your problem here...">
+            <input type="search" class="form-control" placeholder="Type your problem here..." name="q">
             <span class="input-group-btn">
-                <button class="btn btn-default" type="button">Search</button>
+                <button class="btn btn-default" type="submit">Search</button>
             </span>
         </div>
     </form>
@@ -25,7 +25,7 @@ title: Help, FAQ, and Support
                 <h3>{{category.title}}</h3>
                 <ul>
                 {% for article in site.articles %}
-                {% if article.category == category.category and article.featured == true %}
+                {% if article.category == category.title and article.featured == true %}
                     <li><a href="{{article.url}}">{{article.title}}</a></li>
                 {% endif %}
                 {% endfor %}

search/index.html

@@ -0,0 +1,84 @@
+---
+layout: default
+title: Search Results
+---
+
+<div class="container">
+    <ul id="search-results"></ul>
+</div>
+
+<script src="/scripts/lunr.min.js"></script>
+<script>
+    window.store = {
+    {% for article in site.articles %}
+      "{{ article.url | slugify }}": {
+        "title": "{{ article.title | xml_escape }}",
+        "category": "{{ article.category | xml_escape }}",
+        "content": {{ article.content | strip_html | strip_newlines | jsonify }},
+        "url": "{{ article.url | xml_escape }}"
+      }
+      {% unless forloop.last %},{% endunless %}
+    {% endfor %}
+    };
+
+    (function() {
+      function displaySearchResults(results, store) {
+        var searchResults = document.getElementById('search-results');
+
+        if (results.length) { // Are there any results?
+          var appendString = '';
+
+          for (var i = 0; i < results.length; i++) {  // Iterate over the results
+            var item = store[results[i].ref];
+            appendString += '<li><a href="' + item.url + '"><h3>' + item.title + '</h3></a>';
+            appendString += '<p>' + item.content.substring(0, 150) + '...</p></li>';
+          }
+
+          searchResults.innerHTML = appendString;
+        }
+        else {
+          searchResults.innerHTML = '<li>No results found</li>';
+        }
+      }
+
+      function getQueryVariable(variable) {
+        var query = window.location.search.substring(1);
+        var vars = query.split('&');
+
+        for (var i = 0; i < vars.length; i++) {
+          var pair = vars[i].split('=');
+
+          if (pair[0] === variable) {
+            return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
+          }
+        }
+      }
+
+      var searchTerm = getQueryVariable('q');
+
+      if (searchTerm) {
+        //document.getElementById('search-box').setAttribute("value", searchTerm);
+
+        // Initalize lunr with the fields it will be searching on. I've given title
+        // a boost of 10 to indicate matches on this field are more important.
+        var idx = lunr(function () {
+          this.field('id');
+          this.field('title', { boost: 10 });
+          this.field('category');
+          this.field('content');
+        });
+
+        for (var key in window.store) { // Add the data to lunr
+          idx.add({
+            'id': key,
+            'title': window.store[key].title,
+            'category': window.store[key].category,
+            'content': window.store[key].content
+          });
+
+          var results = idx.search(searchTerm); // Get lunr to perform a search
+          displaySearchResults(results, window.store); // We'll write this in the next section
+        }
+      }
+    })();
+</script>