Add search functionality.

_includes/searchbox.html

@@ -1,5 +1,5 @@
 <div role="search">
   <form id ="rtd-search-form" class="wy-form" action="{{ base_url }}/search.html" method="get">
-    <input type="text" name="q" placeholder="Search docs" title="Type search term here" />
+    <input type="text" name="q" id="search-query" placeholder="Search docs" title="Type search term here" />
   </form>
 </div>

_layouts/base.html

@@ -119,9 +119,9 @@
   <script src="{{ 'assets/js/theme.js' | absolute_url }}" defer></script>
   <script type="text/javascript" defer>
     hljs.initHighlightingOnLoad();
-    window.onload = function () {
+    window.addEventListener('load', function() {
       SphinxRtdTheme.Navigation.enable({{ site.sticky_navigation | default: 'false' }});
-    };
+    });
   </script>
   <!-- Build Date: {{ site.time | date: "%Y-%m-%d %H:%M" }} -->
 </body>

docs/configuration.md

@@ -29,6 +29,7 @@ google_analytics: UA-XXXXX-Y
 hljs_style: github-gist
 ```
 
+## Front Matter
 
 ```yml
 ---
@@ -41,8 +42,10 @@ title: Page Title Goes Here
 
 ```yml
 ---
-nav_order: 4
 description: Short description to include for SEO
+nav_order: 4
+nav_exclude: false
 canonical_url: https://www.google.com
+search_exclude: false
 ---
 ```

docs/index.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Index
-nav_order: 1
+nav_order: 2
 ---
 
 # Index Page Main Title Header

docs/mysection/test-page.md

@@ -1,8 +1,8 @@
 ---
 layout: default
 title: A Page Inside MySection
-nav_order: 4
 description: A sample description for SEO.
+nav_order: 4
 ---
 
 # A Page Inside MySection Title Header

docs/test-page.md

@@ -1,15 +1,14 @@
 ---
+# This example file is based on index-test.md from Just the Docs Jekyll Theme.
+# Original file copyright (c) 2016 Patrick Marsceill:
+# https://github.com/pmarsceill/just-the-docs/blob/v0.2.7-r/docs/index-test.md
+
 layout: default
 title: Markdown Kitchen Sink Example
-nav_order: 2
+description: A sample description for SEO.
+nav_order: 1
 ---
 
-<!---
-This example file is based on index-test.md from Just the Docs Jekyll Theme.
-Original file copyright (c) 2016 Patrick Marsceill:
-https://github.com/pmarsceill/just-the-docs/blob/v0.2.7-r/docs/index-test.md
--->
-
 Text can be **bold**, _italic_, or ~~strikethrough~~.
 
 [Link to another page](another-page).

search.html

@@ -1,14 +1,89 @@
 ---
 layout: base
+title: Search
+nav_exclude: true
+search_exclude: true
 ---
 
   <h1 id="search">Search Results</h1>
 
-  <form id="content_search" action="search.html">
-    <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
-    <input name="q" id="mkdocs-search-query" type="text" class="search_input search-query ui-autocomplete-input" placeholder="Search the Docs" autocomplete="off" autofocus title="Type search term here">
-  </form>
-
-  <div id="mkdocs-search-results" class="search-results">
-    Searching...
+  <div id="search-results" class="search-results">
+    Enter a search query in the search box on the left.
   </div>
+
+  <!-- We only need to load the search dependencies in this page. -->
+  <script src="https://unpkg.com/lunr/lunr.js"></script>
+  <script type="text/javascript">
+    "use strict";
+
+    // First we figure out if there is a search query and show a "searching..." animation
+    var getQueryVariable = function(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 searchResults = document.getElementById('search-results');
+    var searchQuery = getQueryVariable('q');
+    var dotAnimation = null;
+    if (searchQuery) {
+      document.getElementById('search-query').setAttribute('value', searchQuery);
+      var dotsCount = 0;
+      dotAnimation = setInterval(function() {
+        dotsCount++;
+        var dots = new Array(dotsCount % 5).join('.');
+        searchResults.innerHTML = '<li>Searching' + dots + '</li>';
+      }, 500);
+    }
+
+    // Then we perform the search on page load
+    window.addEventListener('load', function() {
+      var displaySearchResults = function(results, store) {
+        clearInterval(dotAnimation);
+        if (results.length) {
+          var appendString = '';
+          for (var i = 0; i < results.length; i++) {
+            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>Your search did not match any documents. Please make sure that all words are spelled correctly and that you\'ve selected enough categories.</li>';
+        }
+      };
+
+      if (searchQuery) {
+        var idx = lunr(function() {
+          this.field('id');
+          this.field('title', { boost: 10 });
+          this.field('author');
+          this.field('content');
+        });
+        $.getJSON('/search_data.json').then(function(search_data) {
+          var idx = lunr(function() {
+            this.field('id');
+            this.field('title', { boost: 10 });
+            this.field('author');
+            this.field('content');
+
+            for (var key in search_data) {
+              this.add({
+                'id': key,
+                'title': search_data[key].title,
+                'author': search_data[key].author,
+                'content': search_data[key].content
+              });
+            }
+          });
+
+          var results = idx.search(searchQuery);
+          displaySearchResults(results, search_data);
+        });
+      }
+    });
+  </script>

search_data.json

@@ -0,0 +1,31 @@
+---
+layout: null
+search_exclude: true
+---
+{
+{%- for site_page in site.pages %}
+{%- unless site_page.search_exclude == true %}
+    "{{ site_page.url | slugify }}": {
+        "title": "{{ site_page.title | xml_escape }}",
+        "content": {{site_page.content | markdownify | newline_to_br | replace: '<br />', ' ' | strip_html | normalize_whitespace | jsonify }},
+        "url": " {{ site_page.url | xml_escape }}",
+        "author": "{{ site_page.author | xml_escape }}"
+    },
+{%- endunless %}
+{%- endfor %}
+{%- for site_post in site.posts %}
+{%- unless site_page.search_exclude == true %}
+    "{{ site_post.url | slugify }}": {
+        "title": "{{ site_post.title | xml_escape }}",
+        "content": {{site_post.content | markdownify | newline_to_br | replace: '<br />', ' ' | strip_html | normalize_whitespace | jsonify }},
+        "url": " {{ site_post.url | xml_escape }}",
+        "author": "{{ site_post.author | xml_escape }}"
+    }{%- unless forloop.last %},{%- endunless %}
+{%- endunless %}
+{%- else %}
+    {%- comment %} Dirty trick: There is a comma at the end of the sites loop, so we need at least one entry after {% endcomment %}
+    ".": {
+        ".": "."
+    }
+{%- endfor %}
+}