From 0c9678c2e6d12b2c7316860c6a4bb263f7ae5725 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sat, 30 Nov 2019 17:35:09 +0100
Subject: [PATCH 01/36] Fix search issues

---
 assets/js/search-data.json      | 12 ------------
 assets/js/zzzz-search-data.json | 13 +++++++++++++
 2 files changed, 13 insertions(+), 12 deletions(-)
 delete mode 100644 assets/js/search-data.json
 create mode 100644 assets/js/zzzz-search-data.json

diff --git a/assets/js/search-data.json b/assets/js/search-data.json
deleted file mode 100644
index 0532f7c..0000000
--- a/assets/js/search-data.json
+++ /dev/null
@@ -1,12 +0,0 @@
----
----
-{
-  {% assign comma = false %}
-  {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
-    "title": "{{ page.title | replace: '&amp;', '&' }}",
-    "content": "{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```'  | remove: '---' | replace: '\', ' ' | replace: ' .  .  . ', ' . ' | replace: ' .  . ', ' . ' | normalize_whitespace }}",
-    "url": "{{ page.url | absolute_url }}",
-    "relUrl": "{{ page.url }}"
-  }{% assign comma = true %}
-  {% endif %}{% endfor %}
-}
\ No newline at end of file
diff --git a/assets/js/zzzz-search-data.json b/assets/js/zzzz-search-data.json
new file mode 100644
index 0000000..d38a42f
--- /dev/null
+++ b/assets/js/zzzz-search-data.json
@@ -0,0 +1,13 @@
+---
+permalink: /assets/js/search-data.json
+---
+{
+  {% assign comma = false %}
+  {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
+    "title": "{{ page.title | escape_once }}",
+    "content": "{{ page.content | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | replace: '\', ' ' | replace: ' .  .  . ', ' . ' | replace: ' .  . ', ' . ' | normalize_whitespace }}",
+    "url": "{{ page.url | absolute_url }}",
+    "relUrl": "{{ page.url }}"
+  }{% assign comma = true %}
+  {% endif %}{% endfor %}
+}
\ No newline at end of file

From 5d87f3a9dfbc57af3497f6bb49b1388ac89df500 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sun, 1 Dec 2019 15:51:48 +0100
Subject: [PATCH 02/36] Prefixed svg ids to not clash with normal ids

---
 _includes/nav.html    |  4 ++--
 _layouts/default.html | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/_includes/nav.html b/_includes/nav.html
index a2fda59..d064b48 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -8,7 +8,7 @@
             {%- assign first_level_url = node.url | absolute_url -%}
           {%- endif -%}
           {%- if node.has_children -%}
-            <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
+            <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
           {%- endif -%}
           <a href="{{ node.url | absolute_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
           {%- if node.has_children -%}
@@ -20,7 +20,7 @@
                   {%- assign second_level_url = child.url | absolute_url -%}
                 {%- endif -%}
                 {%- if child.has_children -%}
-                  <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
+                  <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
                 {%- endif -%}
                 <a href="{{ child.url | absolute_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
                 {%- if child.has_children -%}
diff --git a/_layouts/default.html b/_layouts/default.html
index c6fd128..bc4ee27 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -8,19 +8,19 @@ layout: table_wrappers
 {% include head.html %}
 <body>
   <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-    <symbol id="link" viewBox="0 0 16 16">
+    <symbol id="svg-link" viewBox="0 0 16 16">
       <title>Link</title>
       <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
     </symbol>
-    <symbol id="search" viewBox="0 0 24 24">
+    <symbol id="svg-search" viewBox="0 0 24 24">
       <title>Menu</title>
       <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/>
     </symbol>
-    <symbol id="menu" viewBox="0 0 24 24">
+    <symbol id="svg-menu" viewBox="0 0 24 24">
       <title>Search</title>
       <path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
     </symbol>
-    <symbol id="arrow-right" viewBox="0 0 24 24">
+    <symbol id="svg-arrow-right" viewBox="0 0 24 24">
       <title>Expand</title>
       <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/>
     </symbol>
@@ -30,7 +30,7 @@ layout: table_wrappers
     <div class="site-header">
       <a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include title.html %}</a>
       <a href="#" id="menu-button" class="site-button">
-        <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#menu"></use></svg>
+        <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
       </a>
     </div>
     <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
@@ -46,7 +46,7 @@ layout: table_wrappers
         <div class="search">
           <div class="search-input-wrap">
             <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
-            <svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#search"></use></svg>
+            <svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg>
           </div>
           <div id="search-results" class="search-results"></div>
         </div>
@@ -79,7 +79,7 @@ layout: table_wrappers
       {% endunless %}
       <div id="main-content" class="main-content" role="main">
         {% if site.heading_anchors != false %}
-          {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#link\"></use></svg>" anchorClass="anchor-heading" %}
+          {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" %}
         {% else %}
           {{ content }}
         {% endif %}
@@ -112,7 +112,7 @@ layout: table_wrappers
 
   {% if site.search_enabled != false %}
     <a href="#" id="search-button" class="search-button">
-      <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#search"></use></svg>
+      <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
     </a>
   {% endif %}
 

From d66ebdec4b40d42da888d5dd21c2dffb757a5dc0 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sun, 1 Dec 2019 16:26:23 +0100
Subject: [PATCH 03/36] Improved showing/hiding search results on focus/blur

---
 assets/js/just-the-docs.js | 158 +++++++++++++++++++------------------
 1 file changed, 80 insertions(+), 78 deletions(-)

diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 939392f..e254300 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -73,49 +73,42 @@ function initSearch() {
 
   request.onload = function(){
     if (request.status >= 200 && request.status < 400) {
-      // Success!
-      var data = JSON.parse(request.responseText);
+      var docs = JSON.parse(request.responseText);
       
-      {% if site.search_tokenizer_separator != nil %}
-      lunr.tokenizer.separator = {{ site.search_tokenizer_separator }}
-      {% else %}
-      lunr.tokenizer.separator = /[\s\-/]+/
-      {% endif %}
-      
-      var index = lunr(function () {
+      lunr.tokenizer.separator = {{ site.search_tokenizer_separator | default: "/[\s\-/]+/" }}
+
+      var index = lunr(function(){
         this.ref('id');
         this.field('title', { boost: 200 });
         this.field('content', { boost: 2 });
         this.field('url');
         this.metadataWhitelist = ['position']
 
-        for (var i in data) {
+        for (var i in docs) {
           this.add({
             id: i,
-            title: data[i].title,
-            content: data[i].content,
-            url: data[i].url
+            title: docs[i].title,
+            content: docs[i].content,
+            url: docs[i].url
           });
         }
       });
 
-      searchResults(index, data);
+      searchLoaded(index, docs);
     } else {
-      // We reached our target server, but it returned an error
       console.log('Error loading ajax request. Request status:' + request.status);
     }
   };
 
   request.onerror = function(){
-    // There was a connection error of some sort
     console.log('There was a connection error');
   };
 
   request.send();
 
-  function searchResults(index, data) {
+  function searchLoaded(index, docs) {
     var index = index;
-    var docs = data;
+    var docs = docs;
     var searchInput = document.getElementById('search-input');
     var searchResults = document.getElementById('search-results');
     var mainContentWrap = document.getElementById('main-content-wrap');
@@ -126,66 +119,10 @@ function initSearch() {
       mainContentWrap.classList.remove('blur');
     }
 
-    jtd.addEvent(searchInput, 'keydown', function(e){
-      switch (e.keyCode) {
-        case 38: // arrow up
-          e.preventDefault();
-          var active = document.querySelector('.search-result.active');
-          if (active) {
-            active.classList.remove('active');
-            if (active.parentElement.previousSibling) {
-              var previous = active.parentElement.previousSibling.querySelector('.search-result');
-              previous.classList.add('active');
-            }
-          }
-          return;
-        case 40: // arrow down
-          e.preventDefault();
-          var active = document.querySelector('.search-result.active');
-          if (active) {
-            if (active.parentElement.nextSibling) {
-              var next = active.parentElement.nextSibling.querySelector('.search-result');
-              active.classList.remove('active');
-              next.classList.add('active');
-            }
-          } else {
-            var next = document.querySelector('.search-result');
-            if (next) {
-              next.classList.add('active');
-            }
-          }
-          return;
-        case 13: // enter
-          e.preventDefault();
-          var active = document.querySelector('.search-result.active');
-          if (active) {
-            active.click();
-          } else {
-            var first = document.querySelector('.search-result');
-            if (first) {
-              first.click();
-            }
-          }
-          return;
-      }
-    });
-
-    jtd.addEvent(searchInput, 'keyup', function(e){
-      switch (e.keyCode) {
-        case 27: // When esc key is pressed, hide the results and clear the field
-          hideResults();
-          searchInput.value = '';
-          return;
-        case 38: // arrow up
-        case 40: // arrow down
-        case 13: // enter
-          e.preventDefault();
-          return;
-      }
-
+    function update() {
       hideResults();
 
-      var input = this.value;
+      var input = searchInput.value;
       if (input === '') {
         return;
       }
@@ -297,10 +234,75 @@ function initSearch() {
           }
         }
       }
+    }
+
+    jtd.addEvent(searchInput, 'focus', function(){
+      setTimeout(update, 0);
     });
 
-    jtd.addEvent(searchInput, 'blur', function(){
-      setTimeout(function(){ hideResults() }, 300);
+    jtd.addEvent(searchInput, 'keyup', function(e){
+      switch (e.keyCode) {
+        case 27: // When esc key is pressed, hide the results and clear the field
+          hideResults();
+          searchInput.value = '';
+          return;
+        case 38: // arrow up
+        case 40: // arrow down
+        case 13: // enter
+          e.preventDefault();
+          return;
+      }
+      update();
+    });
+
+    jtd.addEvent(searchInput, 'keydown', function(e){
+      switch (e.keyCode) {
+        case 38: // arrow up
+          e.preventDefault();
+          var active = document.querySelector('.search-result.active');
+          if (active) {
+            active.classList.remove('active');
+            if (active.parentElement.previousSibling) {
+              var previous = active.parentElement.previousSibling.querySelector('.search-result');
+              previous.classList.add('active');
+            }
+          }
+          return;
+        case 40: // arrow down
+          e.preventDefault();
+          var active = document.querySelector('.search-result.active');
+          if (active) {
+            if (active.parentElement.nextSibling) {
+              var next = active.parentElement.nextSibling.querySelector('.search-result');
+              active.classList.remove('active');
+              next.classList.add('active');
+            }
+          } else {
+            var next = document.querySelector('.search-result');
+            if (next) {
+              next.classList.add('active');
+            }
+          }
+          return;
+        case 13: // enter
+          e.preventDefault();
+          var active = document.querySelector('.search-result.active');
+          if (active) {
+            active.click();
+          } else {
+            var first = document.querySelector('.search-result');
+            if (first) {
+              first.click();
+            }
+          }
+          return;
+      }
+    });
+
+    jtd.addEvent(document, 'click', function(e){
+      if (e.target != searchInput) {
+        hideResults();
+      }
     });
   }
 }

From 804cad6c4d611c0c893381296cd86181b6863a02 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Tue, 3 Dec 2019 09:12:54 +0100
Subject: [PATCH 04/36] Improved search interface

---
 _layouts/default.html         |   6 +-
 _sass/code.scss               |   2 +-
 _sass/layout.scss             |  27 ++++---
 _sass/navigation.scss         |  31 +++-----
 _sass/search.scss             | 135 +++++++++++++++++++++++-----------
 _sass/support/_variables.scss |   6 +-
 assets/js/just-the-docs.js    |   9 +--
 7 files changed, 134 insertions(+), 82 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index bc4ee27..4a66b45 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -46,7 +46,7 @@ layout: table_wrappers
         <div class="search">
           <div class="search-input-wrap">
             <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
-            <svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg>
+            <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
           </div>
           <div id="search-results" class="search-results"></div>
         </div>
@@ -55,7 +55,7 @@ layout: table_wrappers
         <nav aria-label="Auxiliary" class="aux-nav">
           <ul class="aux-nav-list">
             {% for link in site.aux_links %}
-              <li class="aux-nav-list-item"><a href="{{ link.last }}">{{ link.first }}</a></li>
+              <li class="aux-nav-list-item"><a href="{{ link.last }}" class="site-button">{{ link.first }}</a></li>
             {% endfor %}
           </ul>
         </nav>
@@ -114,6 +114,8 @@ layout: table_wrappers
     <a href="#" id="search-button" class="search-button">
       <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
     </a>
+
+    <div class="search-overlay"></div>
   {% endif %}
 
 </body>
diff --git a/_sass/code.scss b/_sass/code.scss
index 4acbf5d..614fa31 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -15,6 +15,7 @@ pre.highlight,
 figure.highlight {
   padding: $sp-3;
   margin-bottom: 0;
+  border-radius: $border-radius;
   -webkit-overflow-scrolling: touch;
   background-color: $code-background-color;
 
@@ -26,7 +27,6 @@ figure.highlight {
 
 .highlighter-rouge {
   margin-bottom: $sp-3;
-  border-radius: $border-radius;
 }
 
 .highlight .c { color: #586e75; } // comment //
diff --git a/_sass/layout.scss b/_sass/layout.scss
index eaf0487..793394b 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -3,7 +3,7 @@
 //
 
 .side-bar {
-  z-index: 100;
+  z-index: 0;
   display: flex;
   flex-wrap: wrap;
   background-color: $sidebar-color;
@@ -48,15 +48,13 @@
 }
 
 .main-header {
-  @include container;
+  z-index: 0;
   display: none;
-  padding-top: $gutter-spacing-sm;
-  padding-bottom: $gutter-spacing-sm;
   background-color: $sidebar-color;
 
   @include mq(md) {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
     height: $header-height;
     background-color: $body-background-color;
     border-bottom: $border $border-color;
@@ -83,7 +81,14 @@
 }
 
 .site-nav {
+  display: none;
+
+  &.nav-open {
+    display: block;
+  }
+
   @include mq(md) {
+    display: block;
     padding-top: $sp-8;
     padding-bottom: $gutter-spacing-sm;
     overflow-y: auto;
@@ -97,7 +102,6 @@
   align-items: center;
 
   @include mq(md) {
-    z-index: 101;
     height: $header-height;
     max-height: $header-height;
     border-bottom: $border $border-color;
@@ -137,17 +141,22 @@
   height: 100%;
   padding: $gutter-spacing-sm;
   align-items: center;
+}
 
-  @include mq(md) {
+@include mq(md) {
+  .site-header .site-button {
     display: none;
   }
 }
 
-.site-title:hover,
-.site-button:hover {
+.site-title:hover {
   background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%);
 }
 
+.site-button:hover {
+  background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 100%);
+}
+
 // stylelint-disable selector-max-type
 
 body {
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 16ff5f0..32ac4b9 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -125,37 +125,30 @@
   }
 }
 
-// Small screen nav
-
-.site-nav {
-  display: none;
-
-  &.nav-open {
-    display: block;
-  }
-  @include mq(md) {
-    display: block;
-  }
-}
+// Aux nav
 
 .aux-nav {
-  align-self: center;
+  height: 100%;
+  overflow-x: auto;
+  @include fs-2;
 
   .aux-nav-list {
+    display: flex;
+    height: 100%;
     padding: 0;
     margin: 0;
     list-style: none;
-    @include fs-2;
   }
 
   .aux-nav-list-item {
     display: inline-block;
-    margin-right: $sp-2;
-    @include fs-2;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+  }
 
-    &:last-child {
-      margin-right: 0;
-    }
+  @include mq(md) {
+    padding-right: $gutter-spacing-sm;
   }
 }
 
diff --git a/_sass/search.scss b/_sass/search.scss
index e0d66fe..bbd5cf8 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -4,85 +4,99 @@
 
 .search {
   position: relative;
-  z-index: 99;
+  z-index: 2;
   flex-grow: 1;
-  height: 100%;
-  margin-bottom: $sp-3;
+  height: $sp-10;
+  padding-top: $sp-2;
+  padding-bottom: $sp-2;
 
   @include mq(md) {
-    margin-bottom: 0;
+    height: 100%;
+    max-width: $search-results-width;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 }
 
 .search-input-wrap {
-  display: flex;
+  position: relative;
   height: 100%;
-  padding: $sp-2;
-  background-color: $search-background-color;
-  border-radius: $border-radius;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+  margin-right: $sp-2;
+  margin-left: $sp-2;
+  transition: margin linear 100ms;
 
   @include mq(md) {
-    padding-top: 0;
-    padding-right: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    background-color: $body-background-color;
-    border-radius: 0;
-    box-shadow: none;
+    margin-right: 0;
+    margin-left: 0;
+    transition: none;
   }
 }
 
 .search-input {
-  align-self: center;
+  position: absolute;
   width: 100%;
-  padding-top: $sp-1;
-  padding-bottom: $sp-1;
+  height: 100%;
+  padding-top: $sp-2;
+  padding-right: $gutter-spacing-sm;
+  padding-bottom: $sp-2;
+  padding-left: #{$gutter-spacing-sm + $sp-4 * 1.2 + $sp-2};
   background-color: $search-background-color;
   border-top: 0;
   border-right: 0;
   border-bottom: 0;
   border-left: 0;
-  order: 2;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+  transition: width ease 200ms;
   @include fs-4;
 
+  @include mq(md) {
+    max-width: $search-results-width;
+    padding-left: #{$gutter-spacing + $sp-5};
+    background-color: $body-background-color;
+    border-radius: 0;
+    box-shadow: none;
+    @include fs-3;
+  }
+
   &:focus {
     outline: 0;
-    box-shadow: none;
 
-    + .search-icon {
+    + .search-label .search-icon {
       fill: $link-color;
     }
   }
-
-  @include mq(md) {
-    background-color: $body-background-color;
-    @include fs-3;
-  }
 }
 
-.search-icon {
-  width: 1.2rem;
-  height: 1.2rem;
-  align-self: center;
-  margin-right: $sp-2;
-  fill: $grey-dk-000;
-  order: 1;
+.search-label {
+  position: absolute;
+  display: flex;
+  height: 100%;
+  padding-left: $gutter-spacing-sm;
+
+  @include mq(md) {
+    padding-left: $gutter-spacing;
+  }
+
+  .search-icon {
+    width: #{$sp-4 * 1.2};
+    height: #{$sp-4 * 1.2};
+    align-self: center;
+    fill: $grey-dk-000;
+  }
 }
 
 .search-results {
   position: absolute;
-  z-index: 100;
   display: none;
   width: 100%;
+  max-height: calc(100vh - 100%);
+  overflow-y: auto;
   background: $search-background-color;
-  border-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
 
-  &.active {
-    display: block;
-  }
-
   @include mq(md) {
     width: $search-results-width;
   }
@@ -90,7 +104,6 @@
 
 .search-results-list {
   padding-left: 0;
-  margin-top: $sp-1;
   margin-bottom: $sp-1;
   list-style: none;
   @include fs-4;
@@ -187,6 +200,42 @@
   border: 1px solid rgba($link-color, 0.3);
 }
 
-.blur {
-  filter: blur(5px);
+.search-overlay {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  background-color: rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  transition: opacity ease 200ms;
+}
+
+.search-active {
+  overflow: hidden;
+
+  .search-input-wrap {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .search-input {
+    border-radius: 0;
+    box-shadow: none;
+
+    @include mq(md) {
+      width: $search-results-width;
+    }
+  }
+
+  .search-results {
+    display: block;
+  }
+
+  .search-overlay {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+  }
 }
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 026b91f..ef14a18 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -94,8 +94,8 @@ $sp-5: map-get($spacers, sp-5) !default; // 1.5  rem == 24px
 $sp-6: map-get($spacers, sp-6) !default; // 2    rem == 32px
 $sp-7: map-get($spacers, sp-7) !default; // 2.5  rem == 40px
 $sp-8: map-get($spacers, sp-8) !default; // 3    rem == 48px
-$sp-9: map-get($spacers, sp-9) !default; // 4    rem == 48px
-$sp-10: map-get($spacers, sp-10) !default; // 4.5  rem == 48px
+$sp-9: map-get($spacers, sp-9) !default; // 3.5  rem == 56px
+$sp-10: map-get($spacers, sp-10) !default; // 4  rem == 64px
 
 //
 // Borders
@@ -118,7 +118,7 @@ $nav-list-item-height-sm: $sp-8 !default;
 $nav-list-expander-right: true;
 $content-width: 800px !default;
 $header-height: 60px !default;
-$search-results-width: 500px !default;
+$search-results-width: $content-width - $nav-width !default;
 
 //
 // Media queries in pixels
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index e254300..fb3a473 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -111,12 +111,10 @@ function initSearch() {
     var docs = docs;
     var searchInput = document.getElementById('search-input');
     var searchResults = document.getElementById('search-results');
-    var mainContentWrap = document.getElementById('main-content-wrap');
 
     function hideResults() {
       searchResults.innerHTML = '';
-      searchResults.classList.remove('active');
-      mainContentWrap.classList.remove('blur');
+      document.body.classList.remove('search-active');
     }
 
     function update() {
@@ -138,8 +136,9 @@ function initSearch() {
       });
 
       if (results.length > 0) {
-        searchResults.classList.add('active');
-        mainContentWrap.classList.add('blur');
+        window.scroll(0, window.scrollY + searchInput.getBoundingClientRect().top);
+        document.body.classList.add('search-active');
+
         var resultsList = document.createElement('ul');
         resultsList.classList.add('search-results-list');
         searchResults.appendChild(resultsList);

From c057771cca53e1cfd9497fc374b677a643599f75 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Tue, 3 Dec 2019 09:20:22 +0100
Subject: [PATCH 05/36] Fixed css style

---
 _sass/code.scss   | 2 +-
 _sass/search.scss | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/_sass/code.scss b/_sass/code.scss
index 614fa31..22eb315 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -15,9 +15,9 @@ pre.highlight,
 figure.highlight {
   padding: $sp-3;
   margin-bottom: 0;
+  background-color: $code-background-color;
   border-radius: $border-radius;
   -webkit-overflow-scrolling: touch;
-  background-color: $code-background-color;
 
   code {
     padding: 0;
diff --git a/_sass/search.scss b/_sass/search.scss
index bbd5cf8..7eef79d 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -11,8 +11,8 @@
   padding-bottom: $sp-2;
 
   @include mq(md) {
-    height: 100%;
     max-width: $search-results-width;
+    height: 100%;
     padding-top: 0;
     padding-bottom: 0;
   }
@@ -93,8 +93,8 @@
   max-height: calc(100vh - 100%);
   overflow-y: auto;
   background: $search-background-color;
-  border-bottom-left-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
 
   @include mq(md) {
@@ -202,11 +202,11 @@
 
 .search-overlay {
   position: fixed;
-  z-index: 1;
   top: 0;
   left: 0;
   width: 0;
   height: 0;
+  z-index: 1;
   background-color: rgba(0, 0, 0, 0.2);
   opacity: 0;
   transition: opacity ease 200ms;

From abb7f557947887097304e7d152a0d7261397d295 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Tue, 3 Dec 2019 09:21:35 +0100
Subject: [PATCH 06/36] Fixed css style

---
 _sass/search.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index 7eef79d..5e75a90 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -204,9 +204,9 @@
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 1;
   width: 0;
   height: 0;
-  z-index: 1;
   background-color: rgba(0, 0, 0, 0.2);
   opacity: 0;
   transition: opacity ease 200ms;

From ab7e53b63f773250993578c6fefa87f310aa3f9b Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Tue, 3 Dec 2019 10:52:17 +0100
Subject: [PATCH 07/36] Fixed transition of search overlay

---
 _sass/search.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index 5e75a90..25f40db 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -209,7 +209,7 @@
   height: 0;
   background-color: rgba(0, 0, 0, 0.2);
   opacity: 0;
-  transition: opacity ease 200ms;
+  transition: opacity ease 200ms, width 0s 200ms, height 0s 200ms
 }
 
 .search-active {
@@ -237,5 +237,6 @@
     width: 100%;
     height: 100%;
     opacity: 1;
+    transition: opacity ease 200ms, width 0s, height 0s;
   }
 }

From 9d24b14ba196bab01c7338a3b49d535a50bc2542 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Tue, 3 Dec 2019 10:55:36 +0100
Subject: [PATCH 08/36] Fixed css style

---
 _sass/search.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index 25f40db..2471491 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -209,7 +209,7 @@
   height: 0;
   background-color: rgba(0, 0, 0, 0.2);
   opacity: 0;
-  transition: opacity ease 200ms, width 0s 200ms, height 0s 200ms
+  transition: opacity ease 200ms, width 0s 200ms, height 0s 200ms;
 }
 
 .search-active {

From 1d1564e5c0edd2b4e2d34b57426b715b8ec8005d Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Wed, 4 Dec 2019 10:39:30 +0100
Subject: [PATCH 09/36] Improved search layout: scrolling, mobile

---
 _sass/layout.scss          |  1 +
 _sass/search.scss          | 51 +++++++++++++++++++++++++-------------
 assets/js/just-the-docs.js | 15 ++++++-----
 3 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/_sass/layout.scss b/_sass/layout.scss
index 793394b..391455d 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -162,6 +162,7 @@
 body {
   position: relative;
   padding-bottom: $sp-10;
+  overflow-y: scroll;
 
   @include mq(md) {
     position: static;
diff --git a/_sass/search.scss b/_sass/search.scss
index 2471491..ee06089 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -7,27 +7,25 @@
   z-index: 2;
   flex-grow: 1;
   height: $sp-10;
-  padding-top: $sp-2;
-  padding-bottom: $sp-2;
+  padding: $sp-2;
+  transition: padding linear 100ms;
 
   @include mq(md) {
-    max-width: $search-results-width;
-    height: 100%;
-    padding-top: 0;
-    padding-bottom: 0;
+    position: relative !important;
+    width: auto !important;
+    height: 100% !important;
+    padding: 0;
+    transition: none;
   }
 }
 
 .search-input-wrap {
   position: relative;
-  height: 100%;
-  margin-right: $sp-2;
-  margin-left: $sp-2;
-  transition: margin linear 100ms;
+  height: $sp-8;
+  transition: height linear 100ms;
 
   @include mq(md) {
-    margin-right: 0;
-    margin-left: 0;
+    height: 100% !important;
     transition: none;
   }
 }
@@ -47,15 +45,17 @@
   border-left: 0;
   border-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
-  transition: width ease 200ms;
   @include fs-4;
 
   @include mq(md) {
     max-width: $search-results-width;
+    padding-top: $gutter-spacing-sm;
     padding-left: #{$gutter-spacing + $sp-5};
+    padding-bottom: $gutter-spacing-sm;
     background-color: $body-background-color;
     border-radius: 0;
     box-shadow: none;
+    transition: width ease 200ms;
     @include fs-3;
   }
 
@@ -88,9 +88,10 @@
 
 .search-results {
   position: absolute;
+  left: 0;
   display: none;
   width: 100%;
-  max-height: calc(100vh - 100%);
+  max-height: calc(100% - #{$sp-10});
   overflow-y: auto;
   background: $search-background-color;
   border-bottom-right-radius: $border-radius;
@@ -99,6 +100,7 @@
 
   @include mq(md) {
     width: $search-results-width;
+    max-height: calc(100vh - 200%) !important;
   }
 }
 
@@ -213,11 +215,17 @@
 }
 
 .search-active {
-  overflow: hidden;
+  .search {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
 
   .search-input-wrap {
-    margin-right: 0;
-    margin-left: 0;
+    height: $sp-10;
   }
 
   .search-input {
@@ -239,4 +247,13 @@
     opacity: 1;
     transition: opacity ease 200ms, width 0s, height 0s;
   }
+
+  @include mq(md) {
+    .main {
+      position: absolute;
+      height: 100vh;
+      width: 100vw;
+      overflow: hidden;
+    }
+  }
 }
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index fb3a473..1d4277c 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -112,13 +112,17 @@ function initSearch() {
     var searchInput = document.getElementById('search-input');
     var searchResults = document.getElementById('search-results');
 
-    function hideResults() {
+    function clearResults() {
       searchResults.innerHTML = '';
-      document.body.classList.remove('search-active');
+      hideResults();
+    }
+
+    function hideResults() {
+      document.documentElement.classList.remove('search-active');
     }
 
     function update() {
-      hideResults();
+      clearResults();
 
       var input = searchInput.value;
       if (input === '') {
@@ -136,8 +140,7 @@ function initSearch() {
       });
 
       if (results.length > 0) {
-        window.scroll(0, window.scrollY + searchInput.getBoundingClientRect().top);
-        document.body.classList.add('search-active');
+        document.documentElement.classList.add('search-active');
 
         var resultsList = document.createElement('ul');
         resultsList.classList.add('search-results-list');
@@ -242,7 +245,7 @@ function initSearch() {
     jtd.addEvent(searchInput, 'keyup', function(e){
       switch (e.keyCode) {
         case 27: // When esc key is pressed, hide the results and clear the field
-          hideResults();
+          clearResults();
           searchInput.value = '';
           return;
         case 38: // arrow up

From 8310df593c5461974dd029e6cc470544846c834c Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Wed, 4 Dec 2019 18:11:44 +0100
Subject: [PATCH 10/36] Fixed css style

---
 _sass/search.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index ee06089..10eb5b2 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -50,8 +50,8 @@
   @include mq(md) {
     max-width: $search-results-width;
     padding-top: $gutter-spacing-sm;
-    padding-left: #{$gutter-spacing + $sp-5};
     padding-bottom: $gutter-spacing-sm;
+    padding-left: #{$gutter-spacing + $sp-5};
     background-color: $body-background-color;
     border-radius: 0;
     box-shadow: none;
@@ -251,8 +251,8 @@
   @include mq(md) {
     .main {
       position: absolute;
-      height: 100vh;
       width: 100vw;
+      height: 100vh;
       overflow: hidden;
     }
   }

From a6f2ed8c6c70d51953c2b6f1c1ce54b113ede332 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Wed, 4 Dec 2019 22:27:43 +0100
Subject: [PATCH 11/36] Improved search on mobile

---
 _sass/search.scss          | 8 ++++++++
 assets/js/just-the-docs.js | 2 ++
 2 files changed, 10 insertions(+)

diff --git a/_sass/search.scss b/_sass/search.scss
index 10eb5b2..256eb7f 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -248,6 +248,14 @@
     transition: opacity ease 200ms, width 0s, height 0s;
   }
 
+  body {
+    overflow-y: hidden;
+
+    @include mq(md) {
+      overflow-y: scroll;
+    }
+  }
+
   @include mq(md) {
     .main {
       position: absolute;
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 1d4277c..49479f6 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -111,6 +111,7 @@ function initSearch() {
     var docs = docs;
     var searchInput = document.getElementById('search-input');
     var searchResults = document.getElementById('search-results');
+    var mainHeader = document.getElementById('main-header');
 
     function clearResults() {
       searchResults.innerHTML = '';
@@ -140,6 +141,7 @@ function initSearch() {
       });
 
       if (results.length > 0) {
+        window.scroll(0, window.scrollY + mainHeader.getBoundingClientRect().top);
         document.documentElement.classList.add('search-active');
 
         var resultsList = document.createElement('ul');

From 3576cb4a89e02476275ee36706e7035d7f3891d8 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Wed, 4 Dec 2019 22:35:45 +0100
Subject: [PATCH 12/36] Fixed stylelint

---
 _sass/search.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/_sass/search.scss b/_sass/search.scss
index 256eb7f..ad3987b 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -248,6 +248,8 @@
     transition: opacity ease 200ms, width 0s, height 0s;
   }
 
+  // stylelint-disable selector-max-type
+
   body {
     overflow-y: hidden;
 

From b5c13965a735ffb08fa0828dfc2c935a9fe0bf5a Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Wed, 18 Dec 2019 20:28:38 +0100
Subject: [PATCH 13/36] Improved search css

---
 _sass/search.scss | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index ad3987b..7315e26 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -93,7 +93,7 @@
   width: 100%;
   max-height: calc(100% - #{$sp-10});
   overflow-y: auto;
-  background: $search-background-color;
+  background-color: $search-background-color;
   border-bottom-right-radius: $border-radius;
   border-bottom-left-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
@@ -191,17 +191,13 @@
   width: $sp-9;
   height: $sp-9;
   background-color: $search-background-color;
+  border: 1px solid rgba($link-color, 0.3);
   border-radius: #{$sp-9 / 2};
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
   align-items: center;
   justify-content: center;
 }
 
-.search-results,
-.search-button {
-  border: 1px solid rgba($link-color, 0.3);
-}
-
 .search-overlay {
   position: fixed;
   top: 0;
@@ -229,6 +225,7 @@
   }
 
   .search-input {
+    background-color: $search-background-color;
     border-radius: 0;
     box-shadow: none;
 
@@ -263,7 +260,7 @@
       position: absolute;
       width: 100vw;
       height: 100vh;
-      overflow: hidden;
+      overflow: visible;
     }
   }
 }

From 0b4ed96f585555ef1e034d3dc2e1169dc2a45a70 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Wed, 18 Dec 2019 21:02:07 +0100
Subject: [PATCH 14/36] Added transition-duration scss variable

---
 _sass/search.scss             | 10 +++++-----
 _sass/support/_variables.scss |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index 7315e26..3d75b9d 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -8,7 +8,7 @@
   flex-grow: 1;
   height: $sp-10;
   padding: $sp-2;
-  transition: padding linear 100ms;
+  transition: padding linear #{$transition-duration / 2};
 
   @include mq(md) {
     position: relative !important;
@@ -22,7 +22,7 @@
 .search-input-wrap {
   position: relative;
   height: $sp-8;
-  transition: height linear 100ms;
+  transition: height linear #{$transition-duration / 2};
 
   @include mq(md) {
     height: 100% !important;
@@ -55,7 +55,7 @@
     background-color: $body-background-color;
     border-radius: 0;
     box-shadow: none;
-    transition: width ease 200ms;
+    transition: width ease $transition-duration;
     @include fs-3;
   }
 
@@ -207,7 +207,7 @@
   height: 0;
   background-color: rgba(0, 0, 0, 0.2);
   opacity: 0;
-  transition: opacity ease 200ms, width 0s 200ms, height 0s 200ms;
+  transition: opacity ease $transition-duration, width 0s $transition-duration, height 0s $transition-duration;
 }
 
 .search-active {
@@ -242,7 +242,7 @@
     width: 100%;
     height: 100%;
     opacity: 1;
-    transition: opacity ease 200ms, width 0s, height 0s;
+    transition: opacity ease $transition-duration, width 0s, height 0s;
   }
 
   // stylelint-disable selector-max-type
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index ef14a18..96dcccb 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -119,6 +119,7 @@ $nav-list-expander-right: true;
 $content-width: 800px !default;
 $header-height: 60px !default;
 $search-results-width: $content-width - $nav-width !default;
+$transition-duration: 400ms;
 
 //
 // Media queries in pixels

From 38689d07b112ee7ec8b2010850df0656be66c4e3 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Wed, 18 Dec 2019 21:32:33 +0100
Subject: [PATCH 15/36] Improved search css

---
 _sass/search.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index 3d75b9d..6d47609 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -257,10 +257,8 @@
 
   @include mq(md) {
     .main {
-      position: absolute;
-      width: 100vw;
       height: 100vh;
-      overflow: visible;
+      overflow-y: hidden;
     }
   }
 }

From 7f5b1f14f1890d4cb62553c4a57aa2e28f581474 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sun, 29 Dec 2019 19:19:00 +0100
Subject: [PATCH 16/36] Search for sections (configurable via
 search.heading_level) Added more search configurations Display "no results
 found"

---
 _config.yml                     |  5 ++
 _layouts/default.html           |  4 ++
 _sass/search.scss               | 47 ++++++++++++++---
 assets/js/just-the-docs.js      | 91 +++++++++++++++++++++++----------
 assets/js/zzzz-search-data.json | 55 ++++++++++++++++++--
 5 files changed, 161 insertions(+), 41 deletions(-)

diff --git a/_config.yml b/_config.yml
index a090670..c021b35 100644
--- a/_config.yml
+++ b/_config.yml
@@ -26,6 +26,11 @@ exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "pac
 
 # Enable or disable the site search
 search_enabled: true
+search:
+  heading_level: 2
+  preview_words_before: 5
+  preview_words_after: 10
+  rel_url: false
 
 # Set the search token separator for hyphenated-word search:
 search_tokenizer_separator: /[\s/]+/
diff --git a/_layouts/default.html b/_layouts/default.html
index 4a66b45..81dd721 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -24,6 +24,10 @@ layout: table_wrappers
       <title>Expand</title>
       <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/>
     </symbol>
+    <symbol id="svg-doc" viewBox="0 0 24 24">
+      <title>Document</title>
+      <path fill="none" d="M0 0h24v24H0V0z"/><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/>
+    </symbol>
   </svg>
 
   <div class="side-bar">
diff --git a/_sass/search.scss b/_sass/search.scss
index 6d47609..54f3211 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -131,29 +131,50 @@
   &.active {
     background-color: $feedback-color;
   }
-
-  @include mq(md) {
-    padding-right: $sp-4;
-    padding-left: $sp-4;
-  }
 }
 
 .search-result-title {
   display: block;
   padding-top: $sp-2;
-  padding-right: $sp-4;
   padding-bottom: $sp-2;
 
   @include mq(sm) {
     display: inline-block;
     width: 40%;
+    padding-right: $sp-2;
     word-wrap: break-word;
     vertical-align: top;
   }
 }
 
+.search-result-doc {
+  display: flex;
+  align-items: center;
+
+  &.search-result-doc-parent {
+    opacity: 0.5;
+    @include fs-3;
+
+    @include mq(md) {
+      @include fs-2;
+    }
+  }
+
+  .search-result-icon {
+    width: $sp-4;
+    height: $sp-4;
+    margin-right: $sp-2;
+    fill: $link-color;
+  }
+}
+
+.search-result-section {
+  margin-left: #{$sp-4 + $sp-2};
+}
+
 .search-result-rel-url {
   display: block;
+  margin-left: #{$sp-4 + $sp-2};
   overflow: hidden;
   color: $search-result-preview-color;
   text-overflow: ellipsis;
@@ -166,6 +187,7 @@
   padding-top: $sp-2;
   padding-bottom: $sp-2;
   padding-left: $sp-4;
+  margin-left: $sp-2;
   color: $search-result-preview-color;
   border-left: $border;
   border-left-color: $border-color;
@@ -174,13 +196,22 @@
   @include mq(sm) {
     display: inline-block;
     width: 60%;
+    padding-left: $sp-2;
+    margin-left: 0;
     vertical-align: top;
   }
 }
 
 .search-result-highlight {
   font-weight: bold;
-  color: $link-color;
+}
+
+.search-no-result {
+  padding-top: $sp-2;
+  padding-right: $sp-3;
+  padding-bottom: $sp-2;
+  padding-left: $sp-3;
+  @include fs-3;
 }
 
 .search-button {
@@ -205,7 +236,7 @@
   z-index: 1;
   width: 0;
   height: 0;
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, 0.3);
   opacity: 0;
   transition: opacity ease $transition-duration, width 0s $transition-duration, height 0s $transition-duration;
 }
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 49479f6..0d2593b 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -81,7 +81,9 @@ function initSearch() {
         this.ref('id');
         this.field('title', { boost: 200 });
         this.field('content', { boost: 2 });
-        this.field('url');
+        {% if site.search.rel_url != false -%}
+        this.field('relUrl');
+        {%- endif %}
         this.metadataWhitelist = ['position']
 
         for (var i in docs) {
@@ -89,7 +91,9 @@ function initSearch() {
             id: i,
             title: docs[i].title,
             content: docs[i].content,
-            url: docs[i].url
+            {% if site.search.rel_url != false -%}
+            relUrl: docs[i].relUrl
+            {%- endif %}
           });
         }
       });
@@ -112,20 +116,29 @@ function initSearch() {
     var searchInput = document.getElementById('search-input');
     var searchResults = document.getElementById('search-results');
     var mainHeader = document.getElementById('main-header');
+    var currentInput;
 
-    function clearResults() {
-      searchResults.innerHTML = '';
-      hideResults();
+    function showSearch() {
+      document.documentElement.classList.add('search-active');
     }
 
-    function hideResults() {
+    function hideSearch() {
       document.documentElement.classList.remove('search-active');
     }
 
     function update() {
-      clearResults();
-
       var input = searchInput.value;
+      if (input === '') {
+        hideSearch();
+      } else {
+        showSearch();
+        window.scroll(0, window.scrollY + mainHeader.getBoundingClientRect().top);
+      }
+      if (input === currentInput) {
+        return;
+      }
+      currentInput = input;
+      searchResults.innerHTML = '';
       if (input === '') {
         return;
       }
@@ -140,10 +153,13 @@ function initSearch() {
         });
       });
 
-      if (results.length > 0) {
-        window.scroll(0, window.scrollY + mainHeader.getBoundingClientRect().top);
-        document.documentElement.classList.add('search-active');
+      if (results.length == 0) {
+        var noResultsDiv = document.createElement('div');
+        noResultsDiv.classList.add('search-no-result');
+        noResultsDiv.innerText = 'No results found';
+        searchResults.appendChild(noResultsDiv);
 
+      } else {
         var resultsList = document.createElement('ul');
         resultsList.classList.add('search-results-list');
         searchResults.appendChild(resultsList);
@@ -163,13 +179,26 @@ function initSearch() {
 
           var resultTitle = document.createElement('div');
           resultTitle.classList.add('search-result-title');
-          resultTitle.innerText = doc.title;
           resultLink.appendChild(resultTitle);
 
-          var resultRelUrl = document.createElement('span');
-          resultRelUrl.classList.add('search-result-rel-url');
-          resultRelUrl.innerText = doc.relUrl;
-          resultTitle.appendChild(resultRelUrl);
+          var resultDoc = document.createElement('div');
+          resultDoc.classList.add('search-result-doc');
+          resultDoc.innerHTML = '<svg viewBox="0 0 24 24" class="search-result-icon"><use xlink:href="#svg-doc"></use></svg>';
+          resultTitle.appendChild(resultDoc);
+
+          var resultDocSpan = document.createElement('span');
+          resultDocSpan.innerText = doc.doc;
+          resultDoc.appendChild(resultDocSpan);
+          var resultDocOrSection = resultDocSpan;
+
+          if (doc.doc != doc.title) {
+            resultDoc.classList.add('search-result-doc-parent');
+            var resultSection = document.createElement('div');
+            resultSection.classList.add('search-result-section');
+            resultSection.innerText = doc.title;
+            resultTitle.appendChild(resultSection);
+            resultDocOrSection = resultSection;
+          }
 
           var metadata = result.matchData.metadata;
           var contentFound = false;
@@ -178,9 +207,9 @@ function initSearch() {
               var position = metadata[j].title.position[0];
               var start = position[0];
               var end = position[0] + position[1];
-              resultTitle.innerHTML = doc.title.substring(0, start) + '<span class="search-result-highlight">' + doc.title.substring(start, end) + '</span>' + doc.title.substring(end, doc.title.length)+'<span class="search-result-rel-url">'+doc.relUrl+'</span>';
-
-            } else if (metadata[j].content && !contentFound) {
+              resultDocOrSection.innerHTML = doc.title.substring(0, start) + '<span class="search-result-highlight">' + doc.title.substring(start, end) + '</span>' + doc.title.substring(end, doc.title.length);
+            }
+            if (metadata[j].content && !contentFound) {
               contentFound = true;
 
               var position = metadata[j].content.position[0];
@@ -190,10 +219,10 @@ function initSearch() {
               var previewEnd = end;
               var ellipsesBefore = true;
               var ellipsesAfter = true;
-              for (var k = 0; k < 3; k++) {
+              for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) {
                 var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
-                var nextDot = doc.content.lastIndexOf('.', previewStart - 2);
-                if ((nextDot > 0) && (nextDot > nextSpace)) {
+                var nextDot = doc.content.lastIndexOf('. ', previewStart - 2);
+                if ((nextDot >= 0) && (nextDot > nextSpace)) {
                   previewStart = nextDot + 1;
                   ellipsesBefore = false;
                   break;
@@ -205,10 +234,10 @@ function initSearch() {
                 }
                 previewStart = nextSpace + 1;
               }
-              for (var k = 0; k < 10; k++) {
+              for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) {
                 var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
-                var nextDot = doc.content.indexOf('.', previewEnd + 1);
-                if ((nextDot > 0) && (nextDot < nextSpace)) {
+                var nextDot = doc.content.indexOf('. ', previewEnd + 1);
+                if ((nextDot >= 0) && (nextDot < nextSpace)) {
                   previewEnd = nextDot;
                   ellipsesAfter = false;
                   break;
@@ -236,6 +265,13 @@ function initSearch() {
               resultLink.appendChild(resultPreview);
             }
           }
+
+          {% if site.search.rel_url != false -%}
+          var resultRelUrl = document.createElement('span');
+          resultRelUrl.classList.add('search-result-rel-url');
+          resultRelUrl.innerText = doc.relUrl;
+          resultTitle.appendChild(resultRelUrl);
+          {%- endif %}
         }
       }
     }
@@ -247,9 +283,8 @@ function initSearch() {
     jtd.addEvent(searchInput, 'keyup', function(e){
       switch (e.keyCode) {
         case 27: // When esc key is pressed, hide the results and clear the field
-          clearResults();
           searchInput.value = '';
-          return;
+          break;
         case 38: // arrow up
         case 40: // arrow down
         case 13: // enter
@@ -305,7 +340,7 @@ function initSearch() {
 
     jtd.addEvent(document, 'click', function(e){
       if (e.target != searchInput) {
-        hideResults();
+        hideSearch();
       }
     });
   }
diff --git a/assets/js/zzzz-search-data.json b/assets/js/zzzz-search-data.json
index d38a42f..d336e8c 100644
--- a/assets/js/zzzz-search-data.json
+++ b/assets/js/zzzz-search-data.json
@@ -2,12 +2,57 @@
 permalink: /assets/js/search-data.json
 ---
 {
-  {% assign comma = false %}
-  {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
+  {%- assign i = 0 -%}
+  {% for page in site.html_pages %}
+    {%- if page.title and page.search_exclude != true -%}
+      {%- assign page_content = page.content -%}
+      {%- assign heading_level = site.search.heading_level | default: 1 -%}
+      {%- for j in (2..heading_level) -%}
+        {%- assign tag = '<h' | append: j -%}
+        {%- assign closing_tag = '</h' | append: j -%}
+        {%- assign page_content = page_content | replace: tag, '<h1' | replace: closing_tag, '</h1' -%}
+      {%- endfor -%}
+      {%- assign parts = page_content | split: '<h1' -%}
+      {%- assign title_found = false -%}
+      {% for part in parts offset: 1 %}
+        {%- assign titleAndContent = part | split: '</h1>' -%}
+        {%- assign title = titleAndContent[0] | replace_first: '>', '<h1>' | split: '<h1>' -%}
+        {%- assign title = title[1] | strip_html -%}
+        {%- assign content = titleAndContent[1] -%}
+        {%- assign url = page.url -%}
+        {%- if title == page.title and parts[0] == '' -%}
+          {%- assign title_found = true -%}
+        {%- else -%}
+          {%- assign id = titleAndContent[0] -%}
+          {%- assign id = id | split: 'id="' -%}
+          {%- if id.size == 2 -%}
+            {%- assign id = id[1] -%}
+            {%- assign id = id | split: '"' -%}
+            {%- assign id = id[0] -%}
+            {%- capture url -%}{{ url | append: '#' | append: id }}{%- endcapture -%}
+          {%- endif -%}
+        {%- endif -%}
+  {%- unless i == 0 -%},{%- endunless -%}
+  "{{ i }}": {
+    "doc": "{{ page.title | escape_once }}",
+    "title": "{{ title | escape_once }}",
+    "content": "{{ content | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '<ul', ' . <ul' | replace: '</ul', ' . </ul' | replace: '<ol', ' . <ol' | replace: '</ol', ' . </ol' | replace: '</tr', ' . </tr' | replace: '<li', ' | <li' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | replace: '<td', ' | <td' | replace: '</th', ' | </th' | replace: '<th', ' | <th' | strip_html | escape_once | remove: 'Table of contents' | replace: '\', '&bsol;' | replace: ' .  .  . ', ' . ' | replace: ' .  . ', ' . ' | normalize_whitespace | replace: '| |', '|' }}",
+    "url": "{{ url | absolute_url }}",
+    "relUrl": "{{ url }}"
+  }
+        {%- assign i = i | plus: 1 -%}
+      {%- endfor -%}
+      {%- unless title_found -%}
+  {%- unless i == 0 -%},{%- endunless -%}
+  "{{ i }}": {
+    "doc": "{{ page.title | escape_once }}",
     "title": "{{ page.title | escape_once }}",
-    "content": "{{ page.content | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | replace: '\', ' ' | replace: ' .  .  . ', ' . ' | replace: ' .  . ', ' . ' | normalize_whitespace }}",
+    "content": "{{ parts[0] | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '<ul', ' . <ul' | replace: '</ul', ' . </ul' | replace: '<ol', ' . <ol' | replace: '</ol', ' . </ol' | replace: '</tr', ' . </tr' | replace: '<li', ' | <li' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | replace: '<td', ' | <td' | replace: '</th', ' | </th' | replace: '<th', ' | <th' | strip_html | escape_once | remove: 'Table of contents' | replace: '\', '&bsol;' | replace: ' .  .  . ', ' . ' | replace: ' .  . ', ' . ' | normalize_whitespace | replace: '| |', '|' }}",
     "url": "{{ page.url | absolute_url }}",
     "relUrl": "{{ page.url }}"
-  }{% assign comma = true %}
-  {% endif %}{% endfor %}
+  }
+        {%- assign i = i | plus: 1 -%}
+      {%- endunless -%}
+    {%- endif -%}
+  {% endfor %}
 }
\ No newline at end of file

From ff305527486ff4114b11a90a3d7a676ffa3970d5 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sun, 29 Dec 2019 20:08:34 +0100
Subject: [PATCH 17/36] Moved config search_tokenizer_separator ->
 search.tokenizer_separator

---
 404.html                   | 2 +-
 _config.yml                | 4 +---
 assets/js/just-the-docs.js | 2 +-
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/404.html b/404.html
index 56efce4..1e7a37e 100644
--- a/404.html
+++ b/404.html
@@ -8,4 +8,4 @@ search_exclude: true
 
 <h1>Page not found</h1>
 
-<p>The page you requested could not be found. Try using the navigation {% if site.search_enabled %}or search {% endif %}to find what you're looking for or go to this <a href="{{ site.url }}{{ site.baseurl }}">site's home page</a>.</p>
+<p>The page you requested could not be found. Try using the navigation {% if site.search_enabled != false %}or search {% endif %}to find what you're looking for or go to this <a href="{{ '/' | absolute_url }}">site's home page</a>.</p>
diff --git a/_config.yml b/_config.yml
index c021b35..470fe5d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -31,9 +31,7 @@ search:
   preview_words_before: 5
   preview_words_after: 10
   rel_url: false
-
-# Set the search token separator for hyphenated-word search:
-search_tokenizer_separator: /[\s/]+/
+  tokenizer_separator: /[\s/]+/ # Set the search token separator for hyphenated-word search
 
 # Enable or disable heading anchors
 heading_anchors: true
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 0d2593b..e9b497c 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -75,7 +75,7 @@ function initSearch() {
     if (request.status >= 200 && request.status < 400) {
       var docs = JSON.parse(request.responseText);
       
-      lunr.tokenizer.separator = {{ site.search_tokenizer_separator | default: "/[\s\-/]+/" }}
+      lunr.tokenizer.separator = {{ site.search.tokenizer_separator | default: site.search_tokenizer_separator | default: "/[\s\-/]+/" }}
 
       var index = lunr(function(){
         this.ref('id');

From 2ef0029068e7c96ac83c1bccb1189759037269cc Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sun, 29 Dec 2019 21:08:15 +0100
Subject: [PATCH 18/36] Add documentation for search configurations

---
 _config.yml           | 10 +++++-----
 docs/configuration.md |  9 ++++++---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/_config.yml b/_config.yml
index 470fe5d..7bd5727 100644
--- a/_config.yml
+++ b/_config.yml
@@ -27,11 +27,11 @@ exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "pac
 # Enable or disable the site search
 search_enabled: true
 search:
-  heading_level: 2
-  preview_words_before: 5
-  preview_words_after: 10
-  rel_url: false
-  tokenizer_separator: /[\s/]+/ # Set the search token separator for hyphenated-word search
+  heading_level: 2              # Split documents into sections that can be individually searched
+  preview_words_before: 5       # Maximum amount of words to display before a matched word in the preview
+  preview_words_after: 10       # Maximum amount of words to display after a matched word in the preview
+  rel_url: false                # Include the relative url in the search: true (default) or false
+  tokenizer_separator: /[\s/]+/ # Enable support for hyphenated search words
 
 # Enable or disable heading anchors
 heading_anchors: true
diff --git a/docs/configuration.md b/docs/configuration.md
index eb43a08..4c175e8 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -36,9 +36,12 @@ logo: "/assets/images/just-the-docs.png"
 # Supports true (default) or false
 search_enabled: true
 
-# Enable support for hyphenated search words:
-search_tokenizer_separator: /[\s/]+/
-
+search:
+  heading_level: 2              # Split documents into sections that can be individually searched
+  preview_words_before: 5       # Maximum amount of words to display before a matched word in the preview
+  preview_words_after: 10       # Maximum amount of words to display after a matched word in the preview
+  rel_url: false                # Include the relative url in the search: true (default) or false
+  tokenizer_separator: /[\s/]+/ # Enable support for hyphenated search words
 ```
 
 ## Aux links

From 82b3f1544391be82cb141efe2cb9ca03bcc886a8 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sun, 29 Dec 2019 21:30:44 +0100
Subject: [PATCH 19/36] Added search.button configuration Improved
 documentation for search configurations

---
 _config.yml                     | 23 ++++++++++++++++++-----
 _layouts/default.html           |  8 +++++---
 assets/js/just-the-docs.js      |  2 +-
 assets/js/zzzz-search-data.json |  2 +-
 docs/configuration.md           | 23 ++++++++++++++++++-----
 5 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/_config.yml b/_config.yml
index 7bd5727..854aa4f 100644
--- a/_config.yml
+++ b/_config.yml
@@ -27,11 +27,24 @@ exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "pac
 # Enable or disable the site search
 search_enabled: true
 search:
-  heading_level: 2              # Split documents into sections that can be individually searched
-  preview_words_before: 5       # Maximum amount of words to display before a matched word in the preview
-  preview_words_after: 10       # Maximum amount of words to display after a matched word in the preview
-  rel_url: false                # Include the relative url in the search: true (default) or false
-  tokenizer_separator: /[\s/]+/ # Enable support for hyphenated search words
+  # Split documents into sections that can be individually searched
+  # Supports 1 - 6, default: 2
+  heading_level: 2
+  # Maximum amount of words to display before a matched word in the preview
+  # Default: 5
+  preview_words_before: 5
+  # Maximum amount of words to display after a matched word in the preview
+  # Default: 10
+  preview_words_after: 10
+  # Include the relative url in the search
+  # Supports true (default) or false
+  rel_url: false
+  # Enable support for hyphenated search words
+  # Default: /[\s\-/]+/
+  tokenizer_separator: /[\s/]+/
+  # Enable or disable the search button
+  # Supports true or false (default)
+  button: true
 
 # Enable or disable heading anchors
 heading_anchors: true
diff --git a/_layouts/default.html b/_layouts/default.html
index 81dd721..32a1c99 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -115,9 +115,11 @@ layout: table_wrappers
   </div>
 
   {% if site.search_enabled != false %}
-    <a href="#" id="search-button" class="search-button">
-      <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
-    </a>
+    {% if site.search.button %}
+      <a href="#" id="search-button" class="search-button">
+        <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
+      </a>
+    {% endif %}
 
     <div class="search-overlay"></div>
   {% endif %}
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index e9b497c..343e261 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -51,7 +51,7 @@ function initNav() {
     }
   });
 
-  {% if site.search_enabled != false -%}
+  {% if site.search_enabled != false and site.search.button -%}
   const searchInput = document.getElementById('search-input');
   const searchButton = document.getElementById('search-button');
 
diff --git a/assets/js/zzzz-search-data.json b/assets/js/zzzz-search-data.json
index d336e8c..60aa26e 100644
--- a/assets/js/zzzz-search-data.json
+++ b/assets/js/zzzz-search-data.json
@@ -6,7 +6,7 @@ permalink: /assets/js/search-data.json
   {% for page in site.html_pages %}
     {%- if page.title and page.search_exclude != true -%}
       {%- assign page_content = page.content -%}
-      {%- assign heading_level = site.search.heading_level | default: 1 -%}
+      {%- assign heading_level = site.search.heading_level | default: 2 -%}
       {%- for j in (2..heading_level) -%}
         {%- assign tag = '<h' | append: j -%}
         {%- assign closing_tag = '</h' | append: j -%}
diff --git a/docs/configuration.md b/docs/configuration.md
index 4c175e8..d3facd2 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -37,11 +37,24 @@ logo: "/assets/images/just-the-docs.png"
 search_enabled: true
 
 search:
-  heading_level: 2              # Split documents into sections that can be individually searched
-  preview_words_before: 5       # Maximum amount of words to display before a matched word in the preview
-  preview_words_after: 10       # Maximum amount of words to display after a matched word in the preview
-  rel_url: false                # Include the relative url in the search: true (default) or false
-  tokenizer_separator: /[\s/]+/ # Enable support for hyphenated search words
+  # Split documents into sections that can be individually searched
+  # Supports 1 - 6, default: 2
+  heading_level: 2
+  # Maximum amount of words to display before a matched word in the preview
+  # Default: 5
+  preview_words_before: 5
+  # Maximum amount of words to display after a matched word in the preview
+  # Default: 10
+  preview_words_after: 10
+  # Include the relative url in the search
+  # Supports true (default) or false
+  rel_url: false
+  # Enable support for hyphenated search words
+  # Default: /[\s\-/]+/
+  tokenizer_separator: /[\s/]+/
+  # Enable or disable the search button
+  # Supports true or false (default)
+  button: true
 ```
 
 ## Aux links

From c907e792519153d9d6a9baf410dec0647e847c58 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Wed, 1 Jan 2020 00:21:19 +0100
Subject: [PATCH 20/36] Improved padding of active search input

---
 _sass/search.scss          | 12 ++++++++++--
 assets/js/just-the-docs.js | 12 ++++++------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index 54f3211..34c1cd5 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -37,7 +37,7 @@
   padding-top: $sp-2;
   padding-right: $gutter-spacing-sm;
   padding-bottom: $sp-2;
-  padding-left: #{$gutter-spacing-sm + $sp-4 * 1.2 + $sp-2};
+  padding-left: #{$gutter-spacing-sm + $sp-5};
   background-color: $search-background-color;
   border-top: 0;
   border-right: 0;
@@ -55,7 +55,7 @@
     background-color: $body-background-color;
     border-radius: 0;
     box-shadow: none;
-    transition: width ease $transition-duration;
+    transition: padding-left linear #{$transition-duration / 2}, width ease $transition-duration;
     @include fs-3;
   }
 
@@ -76,6 +76,7 @@
 
   @include mq(md) {
     padding-left: $gutter-spacing;
+    transition: padding-left linear #{$transition-duration / 2};
   }
 
   .search-icon {
@@ -261,10 +262,17 @@
     box-shadow: none;
 
     @include mq(md) {
+      padding-left: #{$sp-4 * 1.25 + $sp-5};
       width: $search-results-width;
     }
   }
 
+  .search-label {
+    @include mq(md) {
+      padding-left: #{$sp-4 * 1.25};
+    }
+  }
+
   .search-results {
     display: block;
   }
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 343e261..c4aed2d 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -51,7 +51,7 @@ function initNav() {
     }
   });
 
-  {% if site.search_enabled != false and site.search.button -%}
+  {%- if site.search_enabled != false and site.search.button %}
   const searchInput = document.getElementById('search-input');
   const searchButton = document.getElementById('search-button');
 
@@ -64,9 +64,9 @@ function initNav() {
   {%- endif %}
 }
 
+{%- if site.search_enabled != false %}
 // Site search
 
-{% if site.search_enabled != false -%}
 function initSearch() {
   var request = new XMLHttpRequest();
   request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true);
@@ -81,7 +81,7 @@ function initSearch() {
         this.ref('id');
         this.field('title', { boost: 200 });
         this.field('content', { boost: 2 });
-        {% if site.search.rel_url != false -%}
+        {%- if site.search.rel_url != false %}
         this.field('relUrl');
         {%- endif %}
         this.metadataWhitelist = ['position']
@@ -91,7 +91,7 @@ function initSearch() {
             id: i,
             title: docs[i].title,
             content: docs[i].content,
-            {% if site.search.rel_url != false -%}
+            {%- if site.search.rel_url != false %}
             relUrl: docs[i].relUrl
             {%- endif %}
           });
@@ -266,7 +266,7 @@ function initSearch() {
             }
           }
 
-          {% if site.search.rel_url != false -%}
+          {%- if site.search.rel_url != false %}
           var resultRelUrl = document.createElement('span');
           resultRelUrl.classList.add('search-result-rel-url');
           resultRelUrl.innerText = doc.relUrl;
@@ -351,7 +351,7 @@ function initSearch() {
 
 jtd.onReady(function(){
   initNav();
-  {% if site.search_enabled != false -%}
+  {%- if site.search_enabled != false %}
   initSearch();
   {%- endif %}
 });

From 74681aeb21d34366a846b241dd261d82f7beee67 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Wed, 1 Jan 2020 16:50:31 +0100
Subject: [PATCH 21/36] Improved js function nesting

---
 assets/js/just-the-docs.js | 464 ++++++++++++++++++-------------------
 1 file changed, 232 insertions(+), 232 deletions(-)

diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index c4aed2d..5adeccb 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -109,241 +109,241 @@ function initSearch() {
   };
 
   request.send();
+}
 
-  function searchLoaded(index, docs) {
-    var index = index;
-    var docs = docs;
-    var searchInput = document.getElementById('search-input');
-    var searchResults = document.getElementById('search-results');
-    var mainHeader = document.getElementById('main-header');
-    var currentInput;
+function searchLoaded(index, docs) {
+  var index = index;
+  var docs = docs;
+  var searchInput = document.getElementById('search-input');
+  var searchResults = document.getElementById('search-results');
+  var mainHeader = document.getElementById('main-header');
+  var currentInput;
 
-    function showSearch() {
-      document.documentElement.classList.add('search-active');
-    }
-
-    function hideSearch() {
-      document.documentElement.classList.remove('search-active');
-    }
-
-    function update() {
-      var input = searchInput.value;
-      if (input === '') {
-        hideSearch();
-      } else {
-        showSearch();
-        window.scroll(0, window.scrollY + mainHeader.getBoundingClientRect().top);
-      }
-      if (input === currentInput) {
-        return;
-      }
-      currentInput = input;
-      searchResults.innerHTML = '';
-      if (input === '') {
-        return;
-      }
-
-      var results = index.query(function (query) {
-        var tokens = lunr.tokenizer(input)
-        query.term(tokens, {
-          boost: 10
-        });
-        query.term(tokens, {
-          wildcard: lunr.Query.wildcard.TRAILING
-        });
-      });
-
-      if (results.length == 0) {
-        var noResultsDiv = document.createElement('div');
-        noResultsDiv.classList.add('search-no-result');
-        noResultsDiv.innerText = 'No results found';
-        searchResults.appendChild(noResultsDiv);
-
-      } else {
-        var resultsList = document.createElement('ul');
-        resultsList.classList.add('search-results-list');
-        searchResults.appendChild(resultsList);
-
-        for (var i in results) {
-          var result = results[i];
-          var doc = docs[result.ref];
-
-          var resultsListItem = document.createElement('li');
-          resultsListItem.classList.add('search-results-list-item');
-          resultsList.appendChild(resultsListItem);
-
-          var resultLink = document.createElement('a');
-          resultLink.classList.add('search-result');
-          resultLink.setAttribute('href', doc.url);
-          resultsListItem.appendChild(resultLink);
-
-          var resultTitle = document.createElement('div');
-          resultTitle.classList.add('search-result-title');
-          resultLink.appendChild(resultTitle);
-
-          var resultDoc = document.createElement('div');
-          resultDoc.classList.add('search-result-doc');
-          resultDoc.innerHTML = '<svg viewBox="0 0 24 24" class="search-result-icon"><use xlink:href="#svg-doc"></use></svg>';
-          resultTitle.appendChild(resultDoc);
-
-          var resultDocSpan = document.createElement('span');
-          resultDocSpan.innerText = doc.doc;
-          resultDoc.appendChild(resultDocSpan);
-          var resultDocOrSection = resultDocSpan;
-
-          if (doc.doc != doc.title) {
-            resultDoc.classList.add('search-result-doc-parent');
-            var resultSection = document.createElement('div');
-            resultSection.classList.add('search-result-section');
-            resultSection.innerText = doc.title;
-            resultTitle.appendChild(resultSection);
-            resultDocOrSection = resultSection;
-          }
-
-          var metadata = result.matchData.metadata;
-          var contentFound = false;
-          for (var j in metadata) {
-            if (metadata[j].title) {
-              var position = metadata[j].title.position[0];
-              var start = position[0];
-              var end = position[0] + position[1];
-              resultDocOrSection.innerHTML = doc.title.substring(0, start) + '<span class="search-result-highlight">' + doc.title.substring(start, end) + '</span>' + doc.title.substring(end, doc.title.length);
-            }
-            if (metadata[j].content && !contentFound) {
-              contentFound = true;
-
-              var position = metadata[j].content.position[0];
-              var start = position[0];
-              var end = position[0] + position[1];
-              var previewStart = start;
-              var previewEnd = end;
-              var ellipsesBefore = true;
-              var ellipsesAfter = true;
-              for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) {
-                var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
-                var nextDot = doc.content.lastIndexOf('. ', previewStart - 2);
-                if ((nextDot >= 0) && (nextDot > nextSpace)) {
-                  previewStart = nextDot + 1;
-                  ellipsesBefore = false;
-                  break;
-                }
-                if (nextSpace < 0) {
-                  previewStart = 0;
-                  ellipsesBefore = false;
-                  break;
-                }
-                previewStart = nextSpace + 1;
-              }
-              for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) {
-                var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
-                var nextDot = doc.content.indexOf('. ', previewEnd + 1);
-                if ((nextDot >= 0) && (nextDot < nextSpace)) {
-                  previewEnd = nextDot;
-                  ellipsesAfter = false;
-                  break;
-                }
-                if (nextSpace < 0) {
-                  previewEnd = doc.content.length;
-                  ellipsesAfter = false;
-                  break;
-                }
-                previewEnd = nextSpace;
-              }
-              var preview = doc.content.substring(previewStart, start);
-              if (ellipsesBefore) {
-                preview = '... ' + preview;
-              }
-              preview += '<span class="search-result-highlight">' + doc.content.substring(start, end) + '</span>';
-              preview += doc.content.substring(end, previewEnd);
-              if (ellipsesAfter) {
-                preview += ' ...';
-              }
-
-              var resultPreview = document.createElement('div');
-              resultPreview.classList.add('search-result-preview');
-              resultPreview.innerHTML = preview;
-              resultLink.appendChild(resultPreview);
-            }
-          }
-
-          {%- if site.search.rel_url != false %}
-          var resultRelUrl = document.createElement('span');
-          resultRelUrl.classList.add('search-result-rel-url');
-          resultRelUrl.innerText = doc.relUrl;
-          resultTitle.appendChild(resultRelUrl);
-          {%- endif %}
-        }
-      }
-    }
-
-    jtd.addEvent(searchInput, 'focus', function(){
-      setTimeout(update, 0);
-    });
-
-    jtd.addEvent(searchInput, 'keyup', function(e){
-      switch (e.keyCode) {
-        case 27: // When esc key is pressed, hide the results and clear the field
-          searchInput.value = '';
-          break;
-        case 38: // arrow up
-        case 40: // arrow down
-        case 13: // enter
-          e.preventDefault();
-          return;
-      }
-      update();
-    });
-
-    jtd.addEvent(searchInput, 'keydown', function(e){
-      switch (e.keyCode) {
-        case 38: // arrow up
-          e.preventDefault();
-          var active = document.querySelector('.search-result.active');
-          if (active) {
-            active.classList.remove('active');
-            if (active.parentElement.previousSibling) {
-              var previous = active.parentElement.previousSibling.querySelector('.search-result');
-              previous.classList.add('active');
-            }
-          }
-          return;
-        case 40: // arrow down
-          e.preventDefault();
-          var active = document.querySelector('.search-result.active');
-          if (active) {
-            if (active.parentElement.nextSibling) {
-              var next = active.parentElement.nextSibling.querySelector('.search-result');
-              active.classList.remove('active');
-              next.classList.add('active');
-            }
-          } else {
-            var next = document.querySelector('.search-result');
-            if (next) {
-              next.classList.add('active');
-            }
-          }
-          return;
-        case 13: // enter
-          e.preventDefault();
-          var active = document.querySelector('.search-result.active');
-          if (active) {
-            active.click();
-          } else {
-            var first = document.querySelector('.search-result');
-            if (first) {
-              first.click();
-            }
-          }
-          return;
-      }
-    });
-
-    jtd.addEvent(document, 'click', function(e){
-      if (e.target != searchInput) {
-        hideSearch();
-      }
-    });
+  function showSearch() {
+    document.documentElement.classList.add('search-active');
   }
+
+  function hideSearch() {
+    document.documentElement.classList.remove('search-active');
+  }
+
+  function update() {
+    var input = searchInput.value;
+    if (input === '') {
+      hideSearch();
+    } else {
+      showSearch();
+      window.scroll(0, window.scrollY + mainHeader.getBoundingClientRect().top);
+    }
+    if (input === currentInput) {
+      return;
+    }
+    currentInput = input;
+    searchResults.innerHTML = '';
+    if (input === '') {
+      return;
+    }
+
+    var results = index.query(function (query) {
+      var tokens = lunr.tokenizer(input)
+      query.term(tokens, {
+        boost: 10
+      });
+      query.term(tokens, {
+        wildcard: lunr.Query.wildcard.TRAILING
+      });
+    });
+
+    if (results.length == 0) {
+      var noResultsDiv = document.createElement('div');
+      noResultsDiv.classList.add('search-no-result');
+      noResultsDiv.innerText = 'No results found';
+      searchResults.appendChild(noResultsDiv);
+
+    } else {
+      var resultsList = document.createElement('ul');
+      resultsList.classList.add('search-results-list');
+      searchResults.appendChild(resultsList);
+
+      for (var i in results) {
+        var result = results[i];
+        var doc = docs[result.ref];
+
+        var resultsListItem = document.createElement('li');
+        resultsListItem.classList.add('search-results-list-item');
+        resultsList.appendChild(resultsListItem);
+
+        var resultLink = document.createElement('a');
+        resultLink.classList.add('search-result');
+        resultLink.setAttribute('href', doc.url);
+        resultsListItem.appendChild(resultLink);
+
+        var resultTitle = document.createElement('div');
+        resultTitle.classList.add('search-result-title');
+        resultLink.appendChild(resultTitle);
+
+        var resultDoc = document.createElement('div');
+        resultDoc.classList.add('search-result-doc');
+        resultDoc.innerHTML = '<svg viewBox="0 0 24 24" class="search-result-icon"><use xlink:href="#svg-doc"></use></svg>';
+        resultTitle.appendChild(resultDoc);
+
+        var resultDocSpan = document.createElement('span');
+        resultDocSpan.innerText = doc.doc;
+        resultDoc.appendChild(resultDocSpan);
+        var resultDocOrSection = resultDocSpan;
+
+        if (doc.doc != doc.title) {
+          resultDoc.classList.add('search-result-doc-parent');
+          var resultSection = document.createElement('div');
+          resultSection.classList.add('search-result-section');
+          resultSection.innerText = doc.title;
+          resultTitle.appendChild(resultSection);
+          resultDocOrSection = resultSection;
+        }
+
+        var metadata = result.matchData.metadata;
+        var contentFound = false;
+        for (var j in metadata) {
+          if (metadata[j].title) {
+            var position = metadata[j].title.position[0];
+            var start = position[0];
+            var end = position[0] + position[1];
+            resultDocOrSection.innerHTML = doc.title.substring(0, start) + '<span class="search-result-highlight">' + doc.title.substring(start, end) + '</span>' + doc.title.substring(end, doc.title.length);
+          }
+          if (metadata[j].content && !contentFound) {
+            contentFound = true;
+
+            var position = metadata[j].content.position[0];
+            var start = position[0];
+            var end = position[0] + position[1];
+            var previewStart = start;
+            var previewEnd = end;
+            var ellipsesBefore = true;
+            var ellipsesAfter = true;
+            for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) {
+              var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
+              var nextDot = doc.content.lastIndexOf('. ', previewStart - 2);
+              if ((nextDot >= 0) && (nextDot > nextSpace)) {
+                previewStart = nextDot + 1;
+                ellipsesBefore = false;
+                break;
+              }
+              if (nextSpace < 0) {
+                previewStart = 0;
+                ellipsesBefore = false;
+                break;
+              }
+              previewStart = nextSpace + 1;
+            }
+            for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) {
+              var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
+              var nextDot = doc.content.indexOf('. ', previewEnd + 1);
+              if ((nextDot >= 0) && (nextDot < nextSpace)) {
+                previewEnd = nextDot;
+                ellipsesAfter = false;
+                break;
+              }
+              if (nextSpace < 0) {
+                previewEnd = doc.content.length;
+                ellipsesAfter = false;
+                break;
+              }
+              previewEnd = nextSpace;
+            }
+            var preview = doc.content.substring(previewStart, start);
+            if (ellipsesBefore) {
+              preview = '... ' + preview;
+            }
+            preview += '<span class="search-result-highlight">' + doc.content.substring(start, end) + '</span>';
+            preview += doc.content.substring(end, previewEnd);
+            if (ellipsesAfter) {
+              preview += ' ...';
+            }
+
+            var resultPreview = document.createElement('div');
+            resultPreview.classList.add('search-result-preview');
+            resultPreview.innerHTML = preview;
+            resultLink.appendChild(resultPreview);
+          }
+        }
+
+        {%- if site.search.rel_url != false %}
+        var resultRelUrl = document.createElement('span');
+        resultRelUrl.classList.add('search-result-rel-url');
+        resultRelUrl.innerText = doc.relUrl;
+        resultTitle.appendChild(resultRelUrl);
+        {%- endif %}
+      }
+    }
+  }
+
+  jtd.addEvent(searchInput, 'focus', function(){
+    setTimeout(update, 0);
+  });
+
+  jtd.addEvent(searchInput, 'keyup', function(e){
+    switch (e.keyCode) {
+      case 27: // When esc key is pressed, hide the results and clear the field
+        searchInput.value = '';
+        break;
+      case 38: // arrow up
+      case 40: // arrow down
+      case 13: // enter
+        e.preventDefault();
+        return;
+    }
+    update();
+  });
+
+  jtd.addEvent(searchInput, 'keydown', function(e){
+    switch (e.keyCode) {
+      case 38: // arrow up
+        e.preventDefault();
+        var active = document.querySelector('.search-result.active');
+        if (active) {
+          active.classList.remove('active');
+          if (active.parentElement.previousSibling) {
+            var previous = active.parentElement.previousSibling.querySelector('.search-result');
+            previous.classList.add('active');
+          }
+        }
+        return;
+      case 40: // arrow down
+        e.preventDefault();
+        var active = document.querySelector('.search-result.active');
+        if (active) {
+          if (active.parentElement.nextSibling) {
+            var next = active.parentElement.nextSibling.querySelector('.search-result');
+            active.classList.remove('active');
+            next.classList.add('active');
+          }
+        } else {
+          var next = document.querySelector('.search-result');
+          if (next) {
+            next.classList.add('active');
+          }
+        }
+        return;
+      case 13: // enter
+        e.preventDefault();
+        var active = document.querySelector('.search-result.active');
+        if (active) {
+          active.click();
+        } else {
+          var first = document.querySelector('.search-result');
+          if (first) {
+            first.click();
+          }
+        }
+        return;
+    }
+  });
+
+  jtd.addEvent(document, 'click', function(e){
+    if (e.target != searchInput) {
+      hideSearch();
+    }
+  });
 }
 {%- endif %}
 

From f1c306c8146d6c26d5830136a2e046d26734a681 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Thu, 2 Jan 2020 11:55:38 +0100
Subject: [PATCH 22/36] Multi search match highlight Added multiple previews,
 configurable by site.search.previews Improved search-data.json

---
 _config.yml                     |   3 +
 _sass/search.scss               |   6 +-
 assets/js/just-the-docs.js      | 175 ++++++++++++++++++++++----------
 assets/js/zzzz-search-data.json |  12 +--
 docs/configuration.md           |   3 +
 5 files changed, 136 insertions(+), 63 deletions(-)

diff --git a/_config.yml b/_config.yml
index 854aa4f..5979283 100644
--- a/_config.yml
+++ b/_config.yml
@@ -30,6 +30,9 @@ search:
   # Split documents into sections that can be individually searched
   # Supports 1 - 6, default: 2
   heading_level: 2
+  # Maximum amount of previews to display
+  # Default: 3
+  previews: 3
   # Maximum amount of words to display before a matched word in the preview
   # Default: 5
   preview_words_before: 5
diff --git a/_sass/search.scss b/_sass/search.scss
index 34c1cd5..032c28d 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -183,7 +183,7 @@
   @include fs-1;
 }
 
-.search-result-preview {
+.search-result-previews {
   display: block;
   padding-top: $sp-2;
   padding-bottom: $sp-2;
@@ -203,6 +203,10 @@
   }
 }
 
+.search-result-preview + .search-result-preview {
+  margin-top: $sp-1;
+}
+
 .search-result-highlight {
   font-weight: bold;
 }
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 5adeccb..126822e 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -188,7 +188,7 @@ function searchLoaded(index, docs) {
         resultTitle.appendChild(resultDoc);
 
         var resultDocSpan = document.createElement('span');
-        resultDocSpan.innerText = doc.doc;
+        resultDocSpan.innerHTML = doc.doc;
         resultDoc.appendChild(resultDocSpan);
         var resultDocOrSection = resultDocSpan;
 
@@ -196,74 +196,119 @@ function searchLoaded(index, docs) {
           resultDoc.classList.add('search-result-doc-parent');
           var resultSection = document.createElement('div');
           resultSection.classList.add('search-result-section');
-          resultSection.innerText = doc.title;
+          resultSection.innerHTML = doc.title;
           resultTitle.appendChild(resultSection);
           resultDocOrSection = resultSection;
         }
 
         var metadata = result.matchData.metadata;
-        var contentFound = false;
+        var titlePositions = [];
+        var contentPositions = [];
         for (var j in metadata) {
-          if (metadata[j].title) {
-            var position = metadata[j].title.position[0];
-            var start = position[0];
-            var end = position[0] + position[1];
-            resultDocOrSection.innerHTML = doc.title.substring(0, start) + '<span class="search-result-highlight">' + doc.title.substring(start, end) + '</span>' + doc.title.substring(end, doc.title.length);
+          var meta = metadata[j];
+          if (meta.title) {
+            var positions = meta.title.position;
+            for (var k in positions) {
+              titlePositions.push(positions[k]);
+            }
           }
-          if (metadata[j].content && !contentFound) {
-            contentFound = true;
+          if (meta.content) {
+            var positions = meta.content.position;
+            for (var k in positions) {
+              var position = positions[k];
+              var previewStart = position[0];
+              var previewEnd = position[0] + position[1];
+              var ellipsesBefore = true;
+              var ellipsesAfter = true;
+              for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) {
+                var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
+                var nextDot = doc.content.lastIndexOf('. ', previewStart - 2);
+                if ((nextDot >= 0) && (nextDot > nextSpace)) {
+                  previewStart = nextDot + 1;
+                  ellipsesBefore = false;
+                  break;
+                }
+                if (nextSpace < 0) {
+                  previewStart = 0;
+                  ellipsesBefore = false;
+                  break;
+                }
+                previewStart = nextSpace + 1;
+              }
+              for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) {
+                var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
+                var nextDot = doc.content.indexOf('. ', previewEnd + 1);
+                if ((nextDot >= 0) && (nextDot < nextSpace)) {
+                  previewEnd = nextDot;
+                  ellipsesAfter = false;
+                  break;
+                }
+                if (nextSpace < 0) {
+                  previewEnd = doc.content.length;
+                  ellipsesAfter = false;
+                  break;
+                }
+                previewEnd = nextSpace;
+              }
+              contentPositions.push({
+                highlight: position,
+                previewStart: previewStart, previewEnd: previewEnd,
+                ellipsesBefore: ellipsesBefore, ellipsesAfter: ellipsesAfter
+              });
+            }
+          }
+        }
 
-            var position = metadata[j].content.position[0];
-            var start = position[0];
-            var end = position[0] + position[1];
-            var previewStart = start;
-            var previewEnd = end;
-            var ellipsesBefore = true;
-            var ellipsesAfter = true;
-            for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) {
-              var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
-              var nextDot = doc.content.lastIndexOf('. ', previewStart - 2);
-              if ((nextDot >= 0) && (nextDot > nextSpace)) {
-                previewStart = nextDot + 1;
-                ellipsesBefore = false;
-                break;
+        if (titlePositions.length > 0) {
+          titlePositions.sort(function(p1, p2){ return p1[0] - p2[0] });
+          resultDocOrSection.innerHTML = '';
+          addHighlightedText(resultDocOrSection, doc.title, 0, doc.title.length, titlePositions);
+        }
+
+        if (contentPositions.length > 0) {
+          contentPositions.sort(function(p1, p2){ return p1.highlight[0] - p2.highlight[0] });
+          var contentPosition = contentPositions[0];
+          var previewPosition = {
+            highlight: [contentPosition.highlight],
+            previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
+            ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
+          };
+          var previewPositions = [previewPosition];
+          for (var j = 1; j < contentPositions.length; j++) {
+            contentPosition = contentPositions[j];
+            if (previewPosition.previewEnd < contentPosition.previewStart) {
+              previewPosition = {
+                highlight: [contentPosition.highlight],
+                previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
+                ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
               }
-              if (nextSpace < 0) {
-                previewStart = 0;
-                ellipsesBefore = false;
-                break;
-              }
-              previewStart = nextSpace + 1;
-            }
-            for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) {
-              var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
-              var nextDot = doc.content.indexOf('. ', previewEnd + 1);
-              if ((nextDot >= 0) && (nextDot < nextSpace)) {
-                previewEnd = nextDot;
-                ellipsesAfter = false;
-                break;
-              }
-              if (nextSpace < 0) {
-                previewEnd = doc.content.length;
-                ellipsesAfter = false;
-                break;
-              }
-              previewEnd = nextSpace;
-            }
-            var preview = doc.content.substring(previewStart, start);
-            if (ellipsesBefore) {
-              preview = '... ' + preview;
-            }
-            preview += '<span class="search-result-highlight">' + doc.content.substring(start, end) + '</span>';
-            preview += doc.content.substring(end, previewEnd);
-            if (ellipsesAfter) {
-              preview += ' ...';
+              previewPositions.push(previewPosition);
+            } else {
+              previewPosition.highlight.push(contentPosition.highlight);
+              previewPosition.previewEnd = contentPosition.previewEnd;
+              previewPosition.ellipsesAfter = contentPosition.ellipsesAfter;
             }
+          }
+
+          var resultPreviews = document.createElement('div');
+          resultPreviews.classList.add('search-result-previews');
+          resultLink.appendChild(resultPreviews);
+
+          var content = doc.content;
+          for (var j = 0; j < Math.min(previewPositions.length, {{ site.search.previews | default: 3 }}); j++) {
+            var position = previewPositions[j];
 
             var resultPreview = document.createElement('div');
             resultPreview.classList.add('search-result-preview');
-            resultPreview.innerHTML = preview;
-            resultLink.appendChild(resultPreview);
+            resultPreviews.appendChild(resultPreview);
+
+            if (position.ellipsesBefore) {
+              resultPreview.appendChild(document.createTextNode('... '));
+            }
+            addHighlightedText(resultPreview, content, position.previewStart, position.previewEnd, position.highlight);
+            if (position.ellipsesAfter) {
+              resultPreview.appendChild(document.createTextNode(' ...'));
+            }
           }
         }
 
@@ -275,6 +320,24 @@ function searchLoaded(index, docs) {
         {%- endif %}
       }
     }
+
+    function addHighlightedText(parent, text, start, end, positions) {
+      var index = start;
+      for (var i in positions) {
+        var position = positions[i];
+        var span = document.createElement('span');
+        span.innerHTML = text.substring(index, position[0]);
+        parent.appendChild(span);
+        index = position[0] + position[1];
+        var highlight = document.createElement('span');
+        highlight.classList.add('search-result-highlight');
+        highlight.innerHTML = text.substring(position[0], index);
+        parent.appendChild(highlight);
+      }
+      var span = document.createElement('span');
+      span.innerHTML = text.substring(index, end);
+      parent.appendChild(span);
+    }
   }
 
   jtd.addEvent(searchInput, 'focus', function(){
diff --git a/assets/js/zzzz-search-data.json b/assets/js/zzzz-search-data.json
index 60aa26e..225a764 100644
--- a/assets/js/zzzz-search-data.json
+++ b/assets/js/zzzz-search-data.json
@@ -34,9 +34,9 @@ permalink: /assets/js/search-data.json
         {%- endif -%}
   {%- unless i == 0 -%},{%- endunless -%}
   "{{ i }}": {
-    "doc": "{{ page.title | escape_once }}",
-    "title": "{{ title | escape_once }}",
-    "content": "{{ content | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '<ul', ' . <ul' | replace: '</ul', ' . </ul' | replace: '<ol', ' . <ol' | replace: '</ol', ' . </ol' | replace: '</tr', ' . </tr' | replace: '<li', ' | <li' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | replace: '<td', ' | <td' | replace: '</th', ' | </th' | replace: '<th', ' | <th' | strip_html | escape_once | remove: 'Table of contents' | replace: '\', '&bsol;' | replace: ' .  .  . ', ' . ' | replace: ' .  . ', ' . ' | normalize_whitespace | replace: '| |', '|' }}",
+    "doc": {{ page.title | jsonify }},
+    "title": {{ title | jsonify }},
+    "content": {{ content | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '<ul', ' . <ul' | replace: '</ul', ' . </ul' | replace: '<ol', ' . <ol' | replace: '</ol', ' . </ol' | replace: '</tr', ' . </tr' | replace: '<li', ' | <li' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | replace: '<td', ' | <td' | replace: '</th', ' | </th' | replace: '<th', ' | <th' | strip_html | remove: 'Table of contents' | normalize_whitespace | replace: '. . .', '.' | replace: '. .', '.' | replace: '| |', '|' | append: ' ' | jsonify }},
     "url": "{{ url | absolute_url }}",
     "relUrl": "{{ url }}"
   }
@@ -45,9 +45,9 @@ permalink: /assets/js/search-data.json
       {%- unless title_found -%}
   {%- unless i == 0 -%},{%- endunless -%}
   "{{ i }}": {
-    "doc": "{{ page.title | escape_once }}",
-    "title": "{{ page.title | escape_once }}",
-    "content": "{{ parts[0] | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '<ul', ' . <ul' | replace: '</ul', ' . </ul' | replace: '<ol', ' . <ol' | replace: '</ol', ' . </ol' | replace: '</tr', ' . </tr' | replace: '<li', ' | <li' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | replace: '<td', ' | <td' | replace: '</th', ' | </th' | replace: '<th', ' | <th' | strip_html | escape_once | remove: 'Table of contents' | replace: '\', '&bsol;' | replace: ' .  .  . ', ' . ' | replace: ' .  . ', ' . ' | normalize_whitespace | replace: '| |', '|' }}",
+    "doc": {{ page.title | jsonify }},
+    "title": {{ page.title | jsonify }},
+    "content": {{ parts[0] | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '<ul', ' . <ul' | replace: '</ul', ' . </ul' | replace: '<ol', ' . <ol' | replace: '</ol', ' . </ol' | replace: '</tr', ' . </tr' | replace: '<li', ' | <li' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | replace: '<td', ' | <td' | replace: '</th', ' | </th' | replace: '<th', ' | <th' | strip_html | remove: 'Table of contents' | normalize_whitespace | replace: '. . .', '.' | replace: '. .', '.' | replace: '| |', '|' | append: ' ' | jsonify }},
     "url": "{{ page.url | absolute_url }}",
     "relUrl": "{{ page.url }}"
   }
diff --git a/docs/configuration.md b/docs/configuration.md
index d3facd2..47d9106 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -40,6 +40,9 @@ search:
   # Split documents into sections that can be individually searched
   # Supports 1 - 6, default: 2
   heading_level: 2
+  # Maximum amount of previews to display
+  # Default: 3
+  previews: 3
   # Maximum amount of words to display before a matched word in the preview
   # Default: 5
   preview_words_before: 5

From a3d8c14609d6b7806346a2c49b6b24fba329f2d4 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Thu, 2 Jan 2020 11:59:52 +0100
Subject: [PATCH 23/36] Fixed css style

---
 _sass/search.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index 032c28d..04cf3da 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -266,8 +266,8 @@
     box-shadow: none;
 
     @include mq(md) {
-      padding-left: #{$sp-4 * 1.25 + $sp-5};
       width: $search-results-width;
+      padding-left: #{$sp-4 * 1.25 + $sp-5};
     }
   }
 

From 538591dddb6992d12ead75e426cd3e8eeb7018dd Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Thu, 2 Jan 2020 13:18:39 +0100
Subject: [PATCH 24/36] Fixed search result word wrap

---
 _sass/search.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index 04cf3da..8c18149 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -143,7 +143,6 @@
     display: inline-block;
     width: 40%;
     padding-right: $sp-2;
-    word-wrap: break-word;
     vertical-align: top;
   }
 }
@@ -151,6 +150,7 @@
 .search-result-doc {
   display: flex;
   align-items: center;
+  word-wrap: break-word;
 
   &.search-result-doc-parent {
     opacity: 0.5;
@@ -171,6 +171,7 @@
 
 .search-result-section {
   margin-left: #{$sp-4 + $sp-2};
+  word-wrap: break-word;
 }
 
 .search-result-rel-url {

From 757742e79c0b62cfe1045194027bd03fcbdb668d Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Thu, 2 Jan 2020 14:20:09 +0100
Subject: [PATCH 25/36] Fixed search result word wrap

---
 _sass/search.scss          |  5 +++++
 assets/js/just-the-docs.js | 21 +++++++++------------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index 8c18149..42ff90d 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -166,6 +166,11 @@
     height: $sp-4;
     margin-right: $sp-2;
     fill: $link-color;
+    flex-shrink: 0;
+  }
+
+  .search-result-doc-title {
+    overflow: auto;
   }
 }
 
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 126822e..b0be84e 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -187,16 +187,17 @@ function searchLoaded(index, docs) {
         resultDoc.innerHTML = '<svg viewBox="0 0 24 24" class="search-result-icon"><use xlink:href="#svg-doc"></use></svg>';
         resultTitle.appendChild(resultDoc);
 
-        var resultDocSpan = document.createElement('span');
-        resultDocSpan.innerHTML = doc.doc;
-        resultDoc.appendChild(resultDocSpan);
-        var resultDocOrSection = resultDocSpan;
+        var resultDocTitle = document.createElement('div');
+        resultDocTitle.classList.add('search-result-doc-title');
+        resultDocTitle.innerText = doc.doc;
+        resultDoc.appendChild(resultDocTitle);
+        var resultDocOrSection = resultDocTitle;
 
         if (doc.doc != doc.title) {
           resultDoc.classList.add('search-result-doc-parent');
           var resultSection = document.createElement('div');
           resultSection.classList.add('search-result-section');
-          resultSection.innerHTML = doc.title;
+          resultSection.innerText = doc.title;
           resultTitle.appendChild(resultSection);
           resultDocOrSection = resultSection;
         }
@@ -325,18 +326,14 @@ function searchLoaded(index, docs) {
       var index = start;
       for (var i in positions) {
         var position = positions[i];
-        var span = document.createElement('span');
-        span.innerHTML = text.substring(index, position[0]);
-        parent.appendChild(span);
+        parent.appendChild(document.createTextNode(text.substring(index, position[0])));
         index = position[0] + position[1];
         var highlight = document.createElement('span');
         highlight.classList.add('search-result-highlight');
-        highlight.innerHTML = text.substring(position[0], index);
+        highlight.innerText = text.substring(position[0], index);
         parent.appendChild(highlight);
       }
-      var span = document.createElement('span');
-      span.innerHTML = text.substring(index, end);
-      parent.appendChild(span);
+      parent.appendChild(document.createTextNode(text.substring(index, end)));
     }
   }
 

From 19e35329d2ae08e0e3fb522fd53c6d5f92817dbb Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Thu, 2 Jan 2020 14:32:51 +0100
Subject: [PATCH 26/36] Fixed search result word wrap

---
 assets/js/just-the-docs.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index b0be84e..666f442 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -189,7 +189,7 @@ function searchLoaded(index, docs) {
 
         var resultDocTitle = document.createElement('div');
         resultDocTitle.classList.add('search-result-doc-title');
-        resultDocTitle.innerText = doc.doc;
+        resultDocTitle.innerHTML = doc.doc;
         resultDoc.appendChild(resultDocTitle);
         var resultDocOrSection = resultDocTitle;
 
@@ -197,7 +197,7 @@ function searchLoaded(index, docs) {
           resultDoc.classList.add('search-result-doc-parent');
           var resultSection = document.createElement('div');
           resultSection.classList.add('search-result-section');
-          resultSection.innerText = doc.title;
+          resultSection.innerHTML = doc.title;
           resultTitle.appendChild(resultSection);
           resultDocOrSection = resultSection;
         }
@@ -326,14 +326,18 @@ function searchLoaded(index, docs) {
       var index = start;
       for (var i in positions) {
         var position = positions[i];
-        parent.appendChild(document.createTextNode(text.substring(index, position[0])));
+        var span = document.createElement('span');
+        span.innerHTML = text.substring(index, position[0]);
+        parent.appendChild(span);
         index = position[0] + position[1];
         var highlight = document.createElement('span');
         highlight.classList.add('search-result-highlight');
-        highlight.innerText = text.substring(position[0], index);
+        highlight.innerHTML = text.substring(position[0], index);
         parent.appendChild(highlight);
       }
-      parent.appendChild(document.createTextNode(text.substring(index, end)));
+      var span = document.createElement('span');
+      span.innerHTML = text.substring(index, end);
+      parent.appendChild(span);
     }
   }
 

From 157e3ff94569a5bd4b9cb8e7aeb4c6de1a580c6a Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Fri, 3 Jan 2020 08:54:16 +0100
Subject: [PATCH 27/36] Fixed search result word wrap

---
 _sass/search.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_sass/search.scss b/_sass/search.scss
index 42ff90d..3160a4a 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -198,6 +198,7 @@
   color: $search-result-preview-color;
   border-left: $border;
   border-left-color: $border-color;
+  word-wrap: break-word;
   @include fs-2;
 
   @include mq(sm) {

From d357532b4eb7dbf7262b3810cb576ccdb33951b1 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Fri, 3 Jan 2020 08:57:29 +0100
Subject: [PATCH 28/36] Fixed stylelint

---
 _sass/search.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index 3160a4a..3586912 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -195,10 +195,10 @@
   padding-bottom: $sp-2;
   padding-left: $sp-4;
   margin-left: $sp-2;
+  word-wrap: break-word;
   color: $search-result-preview-color;
   border-left: $border;
   border-left-color: $border-color;
-  word-wrap: break-word;
   @include fs-2;
 
   @include mq(sm) {

From b13b44f18bac3e606e3d1415d352a9cb8642b390 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Fri, 3 Jan 2020 08:58:38 +0100
Subject: [PATCH 29/36] Fixed stylelint

---
 _sass/search.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index 3586912..b9b4fe0 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -195,8 +195,8 @@
   padding-bottom: $sp-2;
   padding-left: $sp-4;
   margin-left: $sp-2;
-  word-wrap: break-word;
   color: $search-result-preview-color;
+  word-wrap: break-word;
   border-left: $border;
   border-left-color: $border-color;
   @include fs-2;

From e2e01effa64341d3653c735981760574739809b4 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Fri, 3 Jan 2020 22:44:04 +0100
Subject: [PATCH 30/36] Add fuzzy search if no results were found

---
 assets/js/just-the-docs.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 666f442..ac24dd2 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -154,6 +154,15 @@ function searchLoaded(index, docs) {
       });
     });
 
+    if ((results.length == 0) && (input.length > 2)) {
+      results = index.query(function (query) {
+        var tokens = lunr.tokenizer(input)
+        query.term(tokens, {
+          editDistance: Math.round(Math.sqrt(input.length / 2 - 1))
+        });
+      });
+    }
+
     if (results.length == 0) {
       var noResultsDiv = document.createElement('div');
       noResultsDiv.classList.add('search-no-result');

From 672de29f2e332a9350af7237e4fb6693c848989e Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sun, 2 Feb 2020 20:54:02 +0100
Subject: [PATCH 31/36] Exclude pages without title from nav (e.g. redirects)

---
 _includes/nav.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_includes/nav.html b/_includes/nav.html
index d064b48..b0afa73 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -2,7 +2,7 @@
   {%- assign pages_list = site.html_pages | sort: "nav_order" -%}
   {%- for node in pages_list -%}
     {%- unless node.nav_exclude -%}
-      {%- if node.parent == nil -%}
+      {%- if node.parent == nil and node.title -%}
         <li class="nav-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
           {%- if page.parent == node.title or page.grand_parent == node.title -%}
             {%- assign first_level_url = node.url | absolute_url -%}

From f5e6573e16f160f7e4447ed688b197db0577487a Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Wed, 25 Mar 2020 00:23:17 +0100
Subject: [PATCH 32/36] Removed unnecessary rake command and files Improved
 search documentation

---
 Rakefile              |  1 -
 _config.yml           | 16 ++++----
 bin/just-the-docs     | 16 --------
 docs/configuration.md | 13 +++---
 docs/search.md        | 92 +++++++++++++++++++++++++++----------------
 lib/tasks/search.rake | 27 -------------
 6 files changed, 75 insertions(+), 90 deletions(-)
 delete mode 100644 Rakefile
 delete mode 100755 bin/just-the-docs
 delete mode 100644 lib/tasks/search.rake

diff --git a/Rakefile b/Rakefile
deleted file mode 100644
index b8b42c4..0000000
--- a/Rakefile
+++ /dev/null
@@ -1 +0,0 @@
-Dir.glob('lib/tasks/*.rake').each {|r| import r}
diff --git a/_config.yml b/_config.yml
index 5979283..5f7e9d8 100644
--- a/_config.yml
+++ b/_config.yml
@@ -19,18 +19,19 @@ baseurl: "/just-the-docs" # the subpath of your site, e.g. /blog
 url: "https://pmarsceill.github.io" # the base hostname & protocol for your site, e.g. http://example.com
 
 permalink: pretty
-exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json",  "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]
+exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json", "script/", "LICENSE.txt", "README.md"]
 
 # Set a path/url to a logo that will be displayed instead of the title
 #logo: "/assets/images/just-the-docs.png"
 
 # Enable or disable the site search
+# Supports true (default) or false
 search_enabled: true
 search:
-  # Split documents into sections that can be individually searched
+  # Split pages into sections that can be searched individually
   # Supports 1 - 6, default: 2
   heading_level: 2
-  # Maximum amount of previews to display
+  # Maximum amount of previews per search result
   # Default: 3
   previews: 3
   # Maximum amount of words to display before a matched word in the preview
@@ -39,12 +40,13 @@ search:
   # Maximum amount of words to display after a matched word in the preview
   # Default: 10
   preview_words_after: 10
-  # Include the relative url in the search
+  # Set the search token separator
+  # Default: /[\s\-/]+/
+  # Example: enable support for hyphenated search words
+  tokenizer_separator: /[\s/]+/
+  # Display the relative url in search results
   # Supports true (default) or false
   rel_url: false
-  # Enable support for hyphenated search words
-  # Default: /[\s\-/]+/
-  tokenizer_separator: /[\s/]+/
   # Enable or disable the search button
   # Supports true or false (default)
   button: true
diff --git a/bin/just-the-docs b/bin/just-the-docs
deleted file mode 100755
index 5a62290..0000000
--- a/bin/just-the-docs
+++ /dev/null
@@ -1,16 +0,0 @@
-#!/usr/bin/env ruby
-
-gem_dir = File.expand_path("..",File.dirname(__FILE__))
-$LOAD_PATH.unshift gem_dir # Look in gem directory for resources first.
-exec_type = ARGV[0]
-
-if exec_type == 'rake' then
-    require 'rake'
-    require 'pp'
-    pwd=Dir.pwd
-    Dir.chdir(gem_dir) # We'll load rakefile from the gem's dir.
-    Rake.application.init
-    Rake.application.load_rakefile
-    Dir.chdir(pwd) # Revert to original pwd for any path args passed to task.
-    Rake.application.invoke_task(ARGV[1])
-end
diff --git a/docs/configuration.md b/docs/configuration.md
index 47d9106..f9170fa 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -37,10 +37,10 @@ logo: "/assets/images/just-the-docs.png"
 search_enabled: true
 
 search:
-  # Split documents into sections that can be individually searched
+  # Split pages into sections that can be searched individually
   # Supports 1 - 6, default: 2
   heading_level: 2
-  # Maximum amount of previews to display
+  # Maximum amount of previews per search result
   # Default: 3
   previews: 3
   # Maximum amount of words to display before a matched word in the preview
@@ -49,12 +49,13 @@ search:
   # Maximum amount of words to display after a matched word in the preview
   # Default: 10
   preview_words_after: 10
-  # Include the relative url in the search
+  # Set the search token separator
+  # Default: /[\s\-/]+/
+  # Example: enable support for hyphenated search words
+  tokenizer_separator: /[\s/]+/
+  # Display the relative url in search results
   # Supports true (default) or false
   rel_url: false
-  # Enable support for hyphenated search words
-  # Default: /[\s\-/]+/
-  tokenizer_separator: /[\s/]+/
   # Enable or disable the search button
   # Supports true or false (default)
   button: true
diff --git a/docs/search.md b/docs/search.md
index 3556786..32732b2 100644
--- a/docs/search.md
+++ b/docs/search.md
@@ -15,62 +15,88 @@ nav_order: 7
 
 ---
 
-Just the Docs uses [lunr.js](http://lunrjs.com) to add a client-side search interface powered by a JSON index that Jekyll generates. All search results are shown in an auto-complete style interface (there is no search results page). By default, all generated HTML pages are indexed using the following data points:
+Just the Docs uses [lunr.js](http://lunrjs.com) to add a client-side search interface powered by a JSON index that Jekyll generates.
+All search results are shown in an auto-complete style interface (there is no search results page).
+By default, all generated HTML pages are indexed using the following data points:
 
 - Page title
 - Page content
 - Page URL
 
-## Set up search
-
-### Generate search index
-
-Before you can use search, you must initialize the feature by running this `rake` command that comes with `just-the-docs`:
-
-```bash
-$ bundle exec just-the-docs rake search:init
-```
-
-This command creates the `search-data.json` file that Jekyll uses to create your search index. Alternatively, you can create the file manually in the `assets/js/` directory of your Jekyll site with this content:
-
-```liquid
-{% raw %}---
----
-{
-  {% assign comma = false %}
-  {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
-    "title": "{{ page.title | replace: '&amp;', '&' }}",
-    "content": "{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```'  | remove: '---' | replace: '\', ' ' | replace: ' .  .  . ', ' . ' | replace: ' .  . ', ' . ' | normalize_whitespace }}",
-    "url": "{{ page.url | absolute_url }}",
-    "relUrl": "{{ page.url }}"
-  }{% assign comma = true %}
-  {% endif %}{% endfor %}
-}{% endraw %}
-```
-
-_Note: If you don't run this rake command or create this file manually, search will not work (or it will use the search index data from this docs site, not your site's content)._
-
-### Enable search in configuration
+## Enable search in configuration
 
 In your site's `_config.yml`, enable search:
 
 ```yaml
 # Enable or disable the site search
+# Supports true (default) or false
 search_enabled: true
 ```
 
+### Search granularity
+
+Pages are split into sections that can be searched individually.
+The sections are defined by the headings on the page.
+Each section is displayed in a separate search result.
+
+```yaml
+# Split pages into sections that can be searched individually
+# Supports 1 - 6, default: 2
+search.heading_level: 2
+```
+
+### Search previews
+
+A search result can contain previews that show where the search words are found in the specific section.
+
+```yaml
+# Maximum amount of previews per search result
+# Default: 3
+search.previews: 3
+
+# Maximum amount of words to display before a matched word in the preview
+# Default: 5
+search.preview_words_before: 5
+
+# Maximum amount of words to display after a matched word in the preview
+# Default: 10
+search.preview_words_after: 10
+```
+
+### Search tokenizer
+
 The default is for hyphens to separate tokens in search terms:
 `gem-based` is equivalent to `gem based`, matching either word.
 To allow search for hyphenated words:
 
 ```yaml
 # Set the search token separator
-search_tokenizer_separator: /[\s/]+/
+# Default: /[\s\-/]+/
+# Example: enable support for hyphenated search words
+search.tokenizer_separator: /[\s/]+/
 ```
 
+### Display URL in search results 
+
+```yaml
+# Display the relative url in search results
+# Supports true (default) or false
+search.rel_url: false
+```
+
+### Display search button
+
+```yaml
+# Enable or disable the search button
+# Supports true or false (default)
+search.button: true
+```
+
+
 ## Hiding pages from search
 
-Sometimes you might have a page that you don't want to be indexed for the search nor to show up in search results, e.g, a 404 page. To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter:
+Sometimes you might have a page that you don't want to be indexed for the search nor to show up in search results, e.g, a 404 page.
+To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter:
 
 #### Example
 {: .no_toc }
diff --git a/lib/tasks/search.rake b/lib/tasks/search.rake
deleted file mode 100644
index 82dcfb6..0000000
--- a/lib/tasks/search.rake
+++ /dev/null
@@ -1,27 +0,0 @@
-namespace :search do
-  desc 'Generate the files needed for search functionality'
-  task :init do
-    puts 'Creating search data json file...'
-    mkdir_p 'assets/js'
-    touch 'assets/js/search-data.json'
-    content = %Q[{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```'  | remove: '---' | replace: '\', ' ' | replace: ' .  .  . ', ' . ' | replace: ' .  . ', ' . ' | normalize_whitespace }}]
-    puts 'Done.'
-    puts 'Generating content...'
-
-    File.open('assets/js/search-data.json', 'w') do |f|
-      f.puts '---
----
-{
-  {% assign comma = false %}
-  {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
-    "title": "{{ page.title | replace: '&amp;', '&' }}",
-    "content": "'+content+'",
-    "url": "{{ page.url | absolute_url }}",
-    "relUrl": "{{ page.url }}"
-  }{% assign comma = true %}
-  {% endif %}{% endfor %}
-}'
-    end
-    puts 'Done.'
-  end
-end

From da9276121add41bc4700225ad828e2fa9cdf3d99 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sat, 13 Jun 2020 22:35:07 +0200
Subject: [PATCH 33/36] Improved search input for mobile - font size 16px to
 prevent zooming on iOS Safari - search input is scrolled into view on iOS
 Safari - box-shadow is displayed correctly

---
 _layouts/default.html      | 19 +++++++-------
 _sass/search.scss          | 52 +++++++++++++++++++++-----------------
 assets/js/just-the-docs.js |  4 ++-
 3 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index 32a1c99..9c67f6e 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -112,17 +112,16 @@ layout: table_wrappers
 
       </div>
     </div>
-  </div>
 
-  {% if site.search_enabled != false %}
-    {% if site.search.button %}
-      <a href="#" id="search-button" class="search-button">
-        <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
-      </a>
+    {% if site.search_enabled != false %}
+      {% if site.search.button %}
+        <a href="#" id="search-button" class="search-button">
+          <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
+        </a>
+      {% endif %}
+
+      <div class="search-overlay"></div>
     {% endif %}
-
-    <div class="search-overlay"></div>
-  {% endif %}
-
+  </div>
 </body>
 </html>
diff --git a/_sass/search.scss b/_sass/search.scss
index b9b4fe0..fb0ae74 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -21,12 +21,21 @@
 
 .search-input-wrap {
   position: relative;
+  z-index: 1;
   height: $sp-8;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
   transition: height linear #{$transition-duration / 2};
 
   @include mq(md) {
+    position: absolute;
+    width: 100%;
+    max-width: $search-results-width;
     height: 100% !important;
-    transition: none;
+    border-radius: 0;
+    box-shadow: none;
+    transition: width ease $transition-duration;
   }
 }
 
@@ -43,20 +52,16 @@
   border-right: 0;
   border-bottom: 0;
   border-left: 0;
-  border-radius: $border-radius;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
-  @include fs-4;
+  border-radius: 0;
+  font-size: 16px;
 
   @include mq(md) {
-    max-width: $search-results-width;
     padding-top: $gutter-spacing-sm;
     padding-bottom: $gutter-spacing-sm;
     padding-left: #{$gutter-spacing + $sp-5};
     background-color: $body-background-color;
-    border-radius: 0;
-    box-shadow: none;
-    transition: padding-left linear #{$transition-duration / 2}, width ease $transition-duration;
-    @include fs-3;
+    transition: padding-left linear #{$transition-duration / 2};
+    font-size: 14px;
   }
 
   &:focus {
@@ -100,6 +105,7 @@
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
 
   @include mq(md) {
+    top: 100%;
     width: $search-results-width;
     max-height: calc(100vh - 200%) !important;
   }
@@ -265,15 +271,18 @@
 
   .search-input-wrap {
     height: $sp-10;
+    border-radius: 0;
+
+    @include mq(md) {
+      width: $search-results-width;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+    }
   }
 
   .search-input {
     background-color: $search-background-color;
-    border-radius: 0;
-    box-shadow: none;
 
     @include mq(md) {
-      width: $search-results-width;
       padding-left: #{$sp-4 * 1.25 + $sp-5};
     }
   }
@@ -295,20 +304,17 @@
     transition: opacity ease $transition-duration, width 0s, height 0s;
   }
 
-  // stylelint-disable selector-max-type
-
-  body {
-    overflow-y: hidden;
-
-    @include mq(md) {
-      overflow-y: scroll;
+  @include mq(md) {
+    .main {
+      position: fixed;
     }
   }
 
-  @include mq(md) {
-    .main {
-      height: 100vh;
-      overflow-y: hidden;
+  .main-header {
+    padding-top: $sp-10;
+
+    @include mq(md) {
+      padding-top: 0;
     }
   }
 }
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index ac24dd2..2753273 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -133,7 +133,9 @@ function searchLoaded(index, docs) {
       hideSearch();
     } else {
       showSearch();
-      window.scroll(0, window.scrollY + mainHeader.getBoundingClientRect().top);
+      // scroll search input into view, workaround for iOS Safari
+      window.scroll(0, -1);
+      setTimeout(function(){ window.scroll(0, 0); }, 0);
     }
     if (input === currentInput) {
       return;

From b7a5458375c595e6de26373c6eb38b35bf109f12 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sat, 13 Jun 2020 22:37:39 +0200
Subject: [PATCH 34/36] Fixed fuzzy search hangs for long words

---
 assets/js/just-the-docs.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 2753273..ca91555 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -157,12 +157,16 @@ function searchLoaded(index, docs) {
     });
 
     if ((results.length == 0) && (input.length > 2)) {
-      results = index.query(function (query) {
-        var tokens = lunr.tokenizer(input)
-        query.term(tokens, {
-          editDistance: Math.round(Math.sqrt(input.length / 2 - 1))
+      var tokens = lunr.tokenizer(input).filter(function(token, i) {
+        return token.str.length < 20;
+      })
+      if (tokens.length > 0) {
+        results = index.query(function (query) {
+          query.term(tokens, {
+            editDistance: Math.round(Math.sqrt(input.length / 2 - 1))
+          });
         });
-      });
+      }
     }
 
     if (results.length == 0) {

From 0421ab7f8234fe8f7e493151063ae50861ca66a7 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sat, 13 Jun 2020 22:44:30 +0200
Subject: [PATCH 35/36] Fixed stylelint

---
 _sass/search.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/_sass/search.scss b/_sass/search.scss
index fb0ae74..2a4d4e8 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -23,9 +23,9 @@
   position: relative;
   z-index: 1;
   height: $sp-8;
+  overflow: hidden;
   border-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
   transition: height linear #{$transition-duration / 2};
 
   @include mq(md) {
@@ -47,21 +47,21 @@
   padding-right: $gutter-spacing-sm;
   padding-bottom: $sp-2;
   padding-left: #{$gutter-spacing-sm + $sp-5};
+  font-size: 16px;
   background-color: $search-background-color;
   border-top: 0;
   border-right: 0;
   border-bottom: 0;
   border-left: 0;
   border-radius: 0;
-  font-size: 16px;
 
   @include mq(md) {
     padding-top: $gutter-spacing-sm;
     padding-bottom: $gutter-spacing-sm;
     padding-left: #{$gutter-spacing + $sp-5};
+    font-size: 14px;
     background-color: $body-background-color;
     transition: padding-left linear #{$transition-duration / 2};
-    font-size: 14px;
   }
 
   &:focus {

From 16628f2b8ef92a5378afd4797e504562e21a58d9 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sun, 14 Jun 2020 20:25:22 +0200
Subject: [PATCH 36/36] Improved search responsiveness for many results

---
 assets/js/just-the-docs.js | 325 ++++++++++++++++++++-----------------
 1 file changed, 172 insertions(+), 153 deletions(-)

diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index ca91555..da6c0b0 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -118,6 +118,7 @@ function searchLoaded(index, docs) {
   var searchResults = document.getElementById('search-results');
   var mainHeader = document.getElementById('main-header');
   var currentInput;
+  var currentSearchIndex = 0;
 
   function showSearch() {
     document.documentElement.classList.add('search-active');
@@ -128,6 +129,8 @@ function searchLoaded(index, docs) {
   }
 
   function update() {
+    currentSearchIndex++;
+
     var input = searchInput.value;
     if (input === '') {
       hideSearch();
@@ -180,161 +183,177 @@ function searchLoaded(index, docs) {
       resultsList.classList.add('search-results-list');
       searchResults.appendChild(resultsList);
 
-      for (var i in results) {
-        var result = results[i];
-        var doc = docs[result.ref];
+      addResults(resultsList, results, 0, 10, 100, currentSearchIndex);
+    }
 
-        var resultsListItem = document.createElement('li');
-        resultsListItem.classList.add('search-results-list-item');
-        resultsList.appendChild(resultsListItem);
-
-        var resultLink = document.createElement('a');
-        resultLink.classList.add('search-result');
-        resultLink.setAttribute('href', doc.url);
-        resultsListItem.appendChild(resultLink);
-
-        var resultTitle = document.createElement('div');
-        resultTitle.classList.add('search-result-title');
-        resultLink.appendChild(resultTitle);
-
-        var resultDoc = document.createElement('div');
-        resultDoc.classList.add('search-result-doc');
-        resultDoc.innerHTML = '<svg viewBox="0 0 24 24" class="search-result-icon"><use xlink:href="#svg-doc"></use></svg>';
-        resultTitle.appendChild(resultDoc);
-
-        var resultDocTitle = document.createElement('div');
-        resultDocTitle.classList.add('search-result-doc-title');
-        resultDocTitle.innerHTML = doc.doc;
-        resultDoc.appendChild(resultDocTitle);
-        var resultDocOrSection = resultDocTitle;
-
-        if (doc.doc != doc.title) {
-          resultDoc.classList.add('search-result-doc-parent');
-          var resultSection = document.createElement('div');
-          resultSection.classList.add('search-result-section');
-          resultSection.innerHTML = doc.title;
-          resultTitle.appendChild(resultSection);
-          resultDocOrSection = resultSection;
-        }
-
-        var metadata = result.matchData.metadata;
-        var titlePositions = [];
-        var contentPositions = [];
-        for (var j in metadata) {
-          var meta = metadata[j];
-          if (meta.title) {
-            var positions = meta.title.position;
-            for (var k in positions) {
-              titlePositions.push(positions[k]);
-            }
-          }
-          if (meta.content) {
-            var positions = meta.content.position;
-            for (var k in positions) {
-              var position = positions[k];
-              var previewStart = position[0];
-              var previewEnd = position[0] + position[1];
-              var ellipsesBefore = true;
-              var ellipsesAfter = true;
-              for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) {
-                var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
-                var nextDot = doc.content.lastIndexOf('. ', previewStart - 2);
-                if ((nextDot >= 0) && (nextDot > nextSpace)) {
-                  previewStart = nextDot + 1;
-                  ellipsesBefore = false;
-                  break;
-                }
-                if (nextSpace < 0) {
-                  previewStart = 0;
-                  ellipsesBefore = false;
-                  break;
-                }
-                previewStart = nextSpace + 1;
-              }
-              for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) {
-                var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
-                var nextDot = doc.content.indexOf('. ', previewEnd + 1);
-                if ((nextDot >= 0) && (nextDot < nextSpace)) {
-                  previewEnd = nextDot;
-                  ellipsesAfter = false;
-                  break;
-                }
-                if (nextSpace < 0) {
-                  previewEnd = doc.content.length;
-                  ellipsesAfter = false;
-                  break;
-                }
-                previewEnd = nextSpace;
-              }
-              contentPositions.push({
-                highlight: position,
-                previewStart: previewStart, previewEnd: previewEnd,
-                ellipsesBefore: ellipsesBefore, ellipsesAfter: ellipsesAfter
-              });
-            }
-          }
-        }
-
-        if (titlePositions.length > 0) {
-          titlePositions.sort(function(p1, p2){ return p1[0] - p2[0] });
-          resultDocOrSection.innerHTML = '';
-          addHighlightedText(resultDocOrSection, doc.title, 0, doc.title.length, titlePositions);
-        }
-
-        if (contentPositions.length > 0) {
-          contentPositions.sort(function(p1, p2){ return p1.highlight[0] - p2.highlight[0] });
-          var contentPosition = contentPositions[0];
-          var previewPosition = {
-            highlight: [contentPosition.highlight],
-            previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
-            ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
-          };
-          var previewPositions = [previewPosition];
-          for (var j = 1; j < contentPositions.length; j++) {
-            contentPosition = contentPositions[j];
-            if (previewPosition.previewEnd < contentPosition.previewStart) {
-              previewPosition = {
-                highlight: [contentPosition.highlight],
-                previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
-                ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
-              }
-              previewPositions.push(previewPosition);
-            } else {
-              previewPosition.highlight.push(contentPosition.highlight);
-              previewPosition.previewEnd = contentPosition.previewEnd;
-              previewPosition.ellipsesAfter = contentPosition.ellipsesAfter;
-            }
-          }
-
-          var resultPreviews = document.createElement('div');
-          resultPreviews.classList.add('search-result-previews');
-          resultLink.appendChild(resultPreviews);
-
-          var content = doc.content;
-          for (var j = 0; j < Math.min(previewPositions.length, {{ site.search.previews | default: 3 }}); j++) {
-            var position = previewPositions[j];
-
-            var resultPreview = document.createElement('div');
-            resultPreview.classList.add('search-result-preview');
-            resultPreviews.appendChild(resultPreview);
-
-            if (position.ellipsesBefore) {
-              resultPreview.appendChild(document.createTextNode('... '));
-            }
-            addHighlightedText(resultPreview, content, position.previewStart, position.previewEnd, position.highlight);
-            if (position.ellipsesAfter) {
-              resultPreview.appendChild(document.createTextNode(' ...'));
-            }
-          }
-        }
-
-        {%- if site.search.rel_url != false %}
-        var resultRelUrl = document.createElement('span');
-        resultRelUrl.classList.add('search-result-rel-url');
-        resultRelUrl.innerText = doc.relUrl;
-        resultTitle.appendChild(resultRelUrl);
-        {%- endif %}
+    function addResults(resultsList, results, start, batchSize, batchMillis, searchIndex) {
+      if (searchIndex != currentSearchIndex) {
+        return;
       }
+      for (var i = start; i < (start + batchSize); i++) {
+        if (i == results.length) {
+          return;
+        }
+        addResult(resultsList, results[i]);
+      }
+      setTimeout(function() {
+        addResults(resultsList, results, start + batchSize, batchSize, batchMillis, searchIndex);
+      }, batchMillis);
+    }
+
+    function addResult(resultsList, result) {
+      var doc = docs[result.ref];
+
+      var resultsListItem = document.createElement('li');
+      resultsListItem.classList.add('search-results-list-item');
+      resultsList.appendChild(resultsListItem);
+
+      var resultLink = document.createElement('a');
+      resultLink.classList.add('search-result');
+      resultLink.setAttribute('href', doc.url);
+      resultsListItem.appendChild(resultLink);
+
+      var resultTitle = document.createElement('div');
+      resultTitle.classList.add('search-result-title');
+      resultLink.appendChild(resultTitle);
+
+      var resultDoc = document.createElement('div');
+      resultDoc.classList.add('search-result-doc');
+      resultDoc.innerHTML = '<svg viewBox="0 0 24 24" class="search-result-icon"><use xlink:href="#svg-doc"></use></svg>';
+      resultTitle.appendChild(resultDoc);
+
+      var resultDocTitle = document.createElement('div');
+      resultDocTitle.classList.add('search-result-doc-title');
+      resultDocTitle.innerHTML = doc.doc;
+      resultDoc.appendChild(resultDocTitle);
+      var resultDocOrSection = resultDocTitle;
+
+      if (doc.doc != doc.title) {
+        resultDoc.classList.add('search-result-doc-parent');
+        var resultSection = document.createElement('div');
+        resultSection.classList.add('search-result-section');
+        resultSection.innerHTML = doc.title;
+        resultTitle.appendChild(resultSection);
+        resultDocOrSection = resultSection;
+      }
+
+      var metadata = result.matchData.metadata;
+      var titlePositions = [];
+      var contentPositions = [];
+      for (var j in metadata) {
+        var meta = metadata[j];
+        if (meta.title) {
+          var positions = meta.title.position;
+          for (var k in positions) {
+            titlePositions.push(positions[k]);
+          }
+        }
+        if (meta.content) {
+          var positions = meta.content.position;
+          for (var k in positions) {
+            var position = positions[k];
+            var previewStart = position[0];
+            var previewEnd = position[0] + position[1];
+            var ellipsesBefore = true;
+            var ellipsesAfter = true;
+            for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) {
+              var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
+              var nextDot = doc.content.lastIndexOf('. ', previewStart - 2);
+              if ((nextDot >= 0) && (nextDot > nextSpace)) {
+                previewStart = nextDot + 1;
+                ellipsesBefore = false;
+                break;
+              }
+              if (nextSpace < 0) {
+                previewStart = 0;
+                ellipsesBefore = false;
+                break;
+              }
+              previewStart = nextSpace + 1;
+            }
+            for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) {
+              var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
+              var nextDot = doc.content.indexOf('. ', previewEnd + 1);
+              if ((nextDot >= 0) && (nextDot < nextSpace)) {
+                previewEnd = nextDot;
+                ellipsesAfter = false;
+                break;
+              }
+              if (nextSpace < 0) {
+                previewEnd = doc.content.length;
+                ellipsesAfter = false;
+                break;
+              }
+              previewEnd = nextSpace;
+            }
+            contentPositions.push({
+              highlight: position,
+              previewStart: previewStart, previewEnd: previewEnd,
+              ellipsesBefore: ellipsesBefore, ellipsesAfter: ellipsesAfter
+            });
+          }
+        }
+      }
+
+      if (titlePositions.length > 0) {
+        titlePositions.sort(function(p1, p2){ return p1[0] - p2[0] });
+        resultDocOrSection.innerHTML = '';
+        addHighlightedText(resultDocOrSection, doc.title, 0, doc.title.length, titlePositions);
+      }
+
+      if (contentPositions.length > 0) {
+        contentPositions.sort(function(p1, p2){ return p1.highlight[0] - p2.highlight[0] });
+        var contentPosition = contentPositions[0];
+        var previewPosition = {
+          highlight: [contentPosition.highlight],
+          previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
+          ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
+        };
+        var previewPositions = [previewPosition];
+        for (var j = 1; j < contentPositions.length; j++) {
+          contentPosition = contentPositions[j];
+          if (previewPosition.previewEnd < contentPosition.previewStart) {
+            previewPosition = {
+              highlight: [contentPosition.highlight],
+              previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
+              ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
+            }
+            previewPositions.push(previewPosition);
+          } else {
+            previewPosition.highlight.push(contentPosition.highlight);
+            previewPosition.previewEnd = contentPosition.previewEnd;
+            previewPosition.ellipsesAfter = contentPosition.ellipsesAfter;
+          }
+        }
+
+        var resultPreviews = document.createElement('div');
+        resultPreviews.classList.add('search-result-previews');
+        resultLink.appendChild(resultPreviews);
+
+        var content = doc.content;
+        for (var j = 0; j < Math.min(previewPositions.length, {{ site.search.previews | default: 3 }}); j++) {
+          var position = previewPositions[j];
+
+          var resultPreview = document.createElement('div');
+          resultPreview.classList.add('search-result-preview');
+          resultPreviews.appendChild(resultPreview);
+
+          if (position.ellipsesBefore) {
+            resultPreview.appendChild(document.createTextNode('... '));
+          }
+          addHighlightedText(resultPreview, content, position.previewStart, position.previewEnd, position.highlight);
+          if (position.ellipsesAfter) {
+            resultPreview.appendChild(document.createTextNode(' ...'));
+          }
+        }
+      }
+
+      {%- if site.search.rel_url != false %}
+      var resultRelUrl = document.createElement('span');
+      resultRelUrl.classList.add('search-result-rel-url');
+      resultRelUrl.innerText = doc.relUrl;
+      resultTitle.appendChild(resultRelUrl);
+      {%- endif %}
     }
 
     function addHighlightedText(parent, text, start, end, positions) {