search logic changed - prepare search result position

assets/sass/components/_search.scss

@@ -73,9 +73,14 @@
 
   &__title {
     font-size: 1rem;
+    
     @include themify($themes) {
       color: themed('body-color');
     }
+
+    &::before {
+      content: '📄 ';
+    }
   }
 
   &__desc {
@@ -84,7 +89,7 @@
 
     @include truncate($grid_main_side_width + $grid_main_side_unit);
     @include themify($themes) {
-      color: themed('search-color');
+      color: themed('meta-color');
     }
   }
 }

assets/sass/themes/_hacker.scss

@@ -77,7 +77,7 @@ $hacker: (
     search-border-active-color: #414141,
     search-background-color: #252526,
     search-content-color: #1FFF2A,
-    search-content-background-color: lighten(#252526, 7%),
+    search-content-background-color: #252526,
     search-hover-background-color: lighten(#252526, 14%),
     search-highlight-color: red,
     selection-color: #FCFCFA,

assets/sass/themes/_solarized.scss

@@ -78,6 +78,7 @@ $solarized: (
     search-content-color: #B58900,
     search-content-background-color: #FBF1D1,
     search-hover-background-color: darken(#FBF1D1, 10%),
+    search-highlight-color: #e53935,
     selection-color: #FCFCFA,
     selection-background-color: #FF6188,
     archive-key-color: #FCFCFA,

layouts/_default/list.searchindex.json

@@ -15,7 +15,7 @@
 
 {{ else }}
 
-  {{- range $index, $element := (where .Site.Pages "Kind" "page") -}}
+  {{- range $index, $element := (where .Site.RegularPages "Kind" "page") -}}
     {{ with $element.Plain }}
       {{- $.Scratch.Add "searchindex" (dict "id" $index "title" $element.Title "uri" $element.Permalink "tags" $element.Params.tags "section" $element.Section "content" $element.Plain "description" $element.Description) -}}
     {{ end }}

layouts/_default/single.searchindex.json

@@ -1,5 +1,5 @@
 {{- $.Scratch.Add "searchindex" slice -}}
-{{- range $index, $element := (where .Site.Pages "Kind" "page") -}}
+{{- range $index, $element := (where .Site.RegularPages "Kind" "page") -}}
   {{ with $element.Plain }}
     {{- $.Scratch.Add "searchindex" (dict "id" $index "title" $element.Title "uri" $element.Permalink "tags" $element.Params.tags "section" $element.Section "content" $element.Plain "description" $element.Description) -}}
   {{ end }}

layouts/_default/taxonomy.searchindex.json

@@ -1,5 +1,5 @@
 {{- $.Scratch.Add "searchindex" slice -}}
-{{- range $index, $element := (where .Site.Pages "Kind" "page") -}}
+{{- range $index, $element := (where .Site.RegularPages "Kind" "page") -}}
   {{ with $element.Plain }}
     {{- $.Scratch.Add "searchindex" (dict "id" $index "title" $element.Title "uri" $element.Permalink "tags" $element.Params.tags "section" $element.Section "content" $element.Plain "description" $element.Description) -}}
   {{ end }}

layouts/_default/terms.searchindex.json

@@ -1,5 +1,5 @@
 {{- $.Scratch.Add "searchindex" slice -}}
-{{- range $index, $element := (where .Site.Pages "Kind" "page") -}}
+{{- range $index, $element := (where .Site.RegularPages "Kind" "page") -}}
   {{ with $element.Plain }}
     {{- $.Scratch.Add "searchindex" (dict "id" $index "title" $element.Title "uri" $element.Permalink "tags" $element.Params.tags "section" $element.Section "content" $element.Plain "description" $element.Description) -}}
   {{ end }}

layouts/index.json

@@ -1,5 +1,5 @@
 {{- $.Scratch.Add "searchindex" slice -}}
-{{- range $index, $element := (where .Site.Pages "Kind" "page") -}}
+{{- range $index, $element := (where .Site.RegularPages "Kind" "page") -}}
   {{ with $element.Plain }}
     {{- $.Scratch.Add "searchindex" (dict "id" $index "title" $element.Title "uri" $element.Permalink "tags" $element.Params.tags "section" $element.Section "content" $element.Plain "description" $element.Description) -}}
   {{ end }}

layouts/partials/head/scripts.html

@@ -413,80 +413,6 @@
   // ============================================================
 
 
-  // ====================== mobile search =======================
-    var mobileSearchInputElem = document.querySelector('#search-mobile');
-    var mobileSearchClassElem = document.querySelector('.mobile-search');
-    var mobileSearchBtnElem = document.querySelector('#mobileSearchBtn');
-    var mobileSearchCloseBtnElem = document.querySelector('#search-mobile-close');
-    var mobileSearchContainer = document.querySelector('#search-mobile-container');
-    var mobileSearchResultsElem = document.querySelector('#search-mobile-results');
-    var htmlElem = document.querySelector('html');
-
-    if (mobileSearchClassElem) {
-      mobileSearchClassElem.style.display = 'none';
-    }
-
-    mobileSearchBtnElem ? 
-    mobileSearchBtnElem.addEventListener('click', function () {
-      if (mobileSearchContainer) {
-        mobileSearchContainer.style.display = 'block';
-      }
-
-      if (mobileSearchInputElem) {
-        mobileSearchInputElem.focus();
-      }
-
-      if (htmlElem) {
-        htmlElem.style.overflowY = 'hidden';
-      }
-    }) : null;
-
-    mobileSearchCloseBtnElem ? 
-    mobileSearchCloseBtnElem.addEventListener('click', function() {
-      if (mobileSearchContainer) {
-        mobileSearchContainer.style.display = 'none';
-      }
-
-      if (mobileSearchInputElem) {
-        mobileSearchInputElem.value = '';
-      }
-      
-      if (mobileSearchResultsElem) {
-        while (mobileSearchResultsElem.firstChild) {
-          mobileSearchResultsElem.removeChild(mobileSearchResultsElem.firstChild);
-        }
-      }
-
-      if (htmlElem) {
-        htmlElem.style.overflowY = 'visible';
-      }
-    }) : null;
-
-    mobileSearchInputElem ? 
-    mobileSearchInputElem.addEventListener('keydown', function(e) {
-      var keyCode = e.which || e.keyCode;
-      if (e.key === 'Escape' || keyCode === 27) {
-        if (mobileSearchContainer) {
-          mobileSearchContainer.style.display = 'none';
-        }
-        
-        if (mobileSearchInputElem) {
-          mobileSearchInputElem.value = '';
-        }
-
-        if (mobileSearchResultsElem) {
-          while (mobileSearchResultsElem.firstChild) {
-            mobileSearchResultsElem.removeChild(mobileSearchResultsElem.firstChild);
-          }
-        }
-        if (htmlElem) {
-          htmlElem.style.overflowY = 'visible';
-        }
-      }
-    }) : null;
-  // ============================================================
-
-
   // ======================= theme change =======================
     var localTheme = localStorage.getItem('theme');
     var rootEleme = document.getElementById('root');
@@ -586,27 +512,125 @@
       xhr.send();
     }
 
-    function renderSearchResults(results) { // [{}, {}, ...] or [{item: {}, matches: []}, ...]
+
+
+
+    function makeLi(ulElem, obj) {
+      var li = document.createElement('li');
+      li.className = 'search-result__item';
+      
+      var a = document.createElement('a');
+      a.innerHTML = obj.title;
+      a.setAttribute('class', 'search-result__item--title');
+      a.setAttribute('href', obj.permalink);
+
+      var descDiv = document.createElement('div');
+      descDiv.setAttribute('class', 'search-result__item--desc');
+      if (obj.description) {
+        descDiv.innerHTML = obj.description;
+      } else if (obj.content) {
+        descDiv.innerHTML = obj.content.substring(0, 150);
+      }
+      
+      li.appendChild(a);
+      li.appendChild(descDiv);
+      ulElem.appendChild(li);
+    }
+
+    function makeHighlightLi(ulElem, obj) {
+      var li = document.createElement('li');
+      li.className = 'search-result__item';
+      var descDiv = null;
+
+      var a = document.createElement('a');
+      a.innerHTML = obj.item.title;
+      a.setAttribute('class', 'search-result__item--title');
+      a.setAttribute('href', obj.item.uri);
+
+      if (obj.matches && obj.matches.length) {
+        for (var i = 0; i < obj.matches.length; i++) {
+          if ('title' === obj.matches[i].key) {
+            a = document.createElement('a');
+            a.innerHTML = generateHighlightedText(obj.matches[i].value, obj.matches[i].indices);
+            a.setAttribute('class', 'search-result__item--title');
+            a.setAttribute('href', obj.item.uri);
+          }
+          
+          if ('description' === obj.matches[i].key) {
+            descDiv = document.createElement('div');
+            descDiv.setAttribute('class', 'search-result__item--desc');
+            descDiv.innerHTML = generateHighlightedText(obj.item.description, obj.matches[i].indices);
+          } else if ('content' === obj.matches[i].key) {
+            if (!descDiv) {
+              descDiv = document.createElement('div');
+              descDiv.setAttribute('class', 'search-result__item--desc');
+              descDiv.innerHTML = generateHighlightedText(obj.item.content.substring(0, 150), obj.matches[i].indices);
+            }
+          } else {
+            if (obj.item.description) {
+              descDiv = document.createElement('div');
+              descDiv.setAttribute('class', 'search-result__item--desc');
+              descDiv.innerHTML = obj.item.description;
+            } else {
+              descDiv = document.createElement('div');
+              descDiv.setAttribute('class', 'search-result__item--desc');
+              descDiv.innerHTML = obj.item.content.substring(0, 150);
+            }
+          }
+        }
+
+        li.appendChild(a);
+        if (descDiv) {
+          li.appendChild(descDiv);
+        }
+        if (li) {
+          ulElem.appendChild(li);
+        }
+      }
+    }
+
+
+
+
+
+
+    function renderSearchResults(searchText, results) {
       searchResults = document.getElementById('search-results');
       searchMenu = document.getElementById('search-menu');
       searchResults.setAttribute('class', 'dropdown is-active');
       
-      var content = document.createElement('div');
+      var ul = document.createElement('ul');
-      content.setAttribute('class', 'dropdown-content search-content');
+      ul.setAttribute('class', 'dropdown-content search-content');
 
-      if (results.length > 0) {
+      if (results.length) {
         results.forEach(function (result) {
-          var item = document.createElement('a');
+          var li = document.createElement('li');
-          item.setAttribute('href', result.uri);
+          var a = document.createElement('a');
-          item.setAttribute('class', 'dropdown-item');
+          a.setAttribute('href', result.uri);
-          item.innerHTML = '<div class="menu-item"><div class="menu-item__title">📄 ' + result.title + '</div><div class="menu-item__desc">' + (result.description ? result.description : result.content) + '</div></div>';
+          a.setAttribute('class', 'dropdown-item');
-          content.appendChild(item);
+          a.appendChild(li);
+
+          var titleDiv = document.createElement('div');
+          titleDiv.innerHTML = result.title;
+          titleDiv.setAttribute('class', 'menu-item__title');
+
+          var descDiv = document.createElement('div');
+          descDiv.setAttribute('class', 'menu-item__desc');
+          if (result.description) {
+            descDiv.innerHTML = result.description;
+          } else if (result.content) {
+            descDiv.innerHTML = result.content.substring(0, 150);
+          }
+
+          li.appendChild(titleDiv);
+          li.appendChild(descDiv);
+          ul.appendChild(a);
         });
       } else {
-        var item = document.createElement('span');
+        var li = document.createElement('li');
-        item.setAttribute('class', 'dropdown-item');
+        li.setAttribute('class', 'dropdown-item');
-        item.innerText = 'No results found';
+        li.innerText = 'No results found';
-        content.appendChild(item);
+        ul.appendChild(li);
       }
 
       while (searchMenu.hasChildNodes()) {
@@ -614,30 +638,73 @@
           searchMenu.lastChild
         );
       }
-      searchMenu.appendChild(content);
+      
+      searchMenu.appendChild(ul);
     }
 
-    function renderSearchHighlightResults(results) {
+    function renderSearchHighlightResults(searchText, results) {
       searchResults = document.getElementById('search-results');
       searchMenu = document.getElementById('search-menu');
       searchResults.setAttribute('class', 'dropdown is-active');
 
-      var content = document.createElement('div');
+      var ul = document.createElement('ul');
-      content.setAttribute('class', 'dropdown-content search-content');
+      ul.setAttribute('class', 'dropdown-content search-content');
 
-      if (results.length > 0) {
+      if (results.length) {
         results.forEach(function (result) {
-          var item = document.createElement('a');
+          var li = document.createElement('li');
-          item.setAttribute('href', result.item.uri);
+          var a = document.createElement('a');
-          item.setAttribute('class', 'dropdown-item');
+          var descDiv = null;
-          item.innerHTML = '<div class="menu-item"><div class="menu-item__title">📄 ' + generateHighlightedText(result.item.title, result.matches[0].indices) + '</div><div class="menu-item__desc">' + (result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : '') + '</div></div>';
+
-          content.appendChild(item);
+          a.setAttribute('href', result.item.uri);
+          a.setAttribute('class', 'dropdown-item');
+          a.appendChild(li);
+
+          var titleDiv = document.createElement('div');
+          titleDiv.innerHTML = result.item.title;
+          titleDiv.setAttribute('class', 'menu-item__title');
+          
+          if (result.matches && result.matches.length) {
+            for (var i = 0; i < result.matches.length; i++) {
+              if ('title' === result.matches[i].key) {
+                titleDiv.innerHTML = generateHighlightedText(result.matches[i].value, result.matches[i].indices);
+              }
+
+              if ('description' === result.matches[i].key) {
+                descDiv = document.createElement('div');
+                descDiv.setAttribute('class', 'menu-item__desc');
+                descDiv.innerHTML = generateHighlightedText(result.item.description, result.matches[i].indices);
+              } else if ('content' === result.matches[i].key) {
+                if (!descDiv) {
+                  descDiv = document.createElement('div');
+                  descDiv.setAttribute('class', 'menu-item__desc');
+                  descDiv.innerHTML = generateHighlightedText(result.item.content.substring(0, 150), result.matches[i].indices);
+                }
+              } else {
+                if (result.item.description) {
+                  descDiv = document.createElement('div');
+                  descDiv.setAttribute('class', 'menu-item__desc');
+                  descDiv.innerHTML = result.item.description;
+                } else {
+                  descDiv = document.createElement('div');
+                  descDiv.setAttribute('class', 'menu-item__desc');
+                  descDiv.innerHTML = result.item.content.substring(0, 150);
+                }
+              }
+            }
+            
+            li.appendChild(titleDiv);
+            if (descDiv) {
+              li.appendChild(descDiv);
+            }
+            ul.appendChild(a);
+          }
         });
       } else {
-        var item = document.createElement('span');
+        var li = document.createElement('li');
-        item.setAttribute('class', 'dropdown-item');
+        li.setAttribute('class', 'dropdown-item');
-        item.innerText = 'No results found';
+        li.innerText = 'No results found';
-        content.appendChild(item);
+        ul.appendChild(li);
       }
 
       while (searchMenu.hasChildNodes()) {
@@ -645,10 +712,10 @@
           searchMenu.lastChild
         );
       }
-      searchMenu.appendChild(content);
+      searchMenu.appendChild(ul);
     }
 
-    function renderSearchResultsMobile(results) {
+    function renderSearchResultsMobile(searchText, results) {
       searchResults = document.getElementById('search-mobile-results');
 
       var content = document.createElement('div');
@@ -673,7 +740,7 @@
       searchResults.appendChild(content);      
     }
 
-    function renderSearchHighlightResultsMobile(results) {
+    function renderSearchHighlightResultsMobile(searchText, results) {
       searchResults = document.getElementById('search-mobile-results');
 
       var content = document.createElement('div');
@@ -743,9 +810,9 @@
       searchText = e.target.value;
       var results = fuse.search(e.target.value);
       if (enableSearchHighlight) {
-        renderSearchHighlightResults(results);
+        renderSearchHighlightResults(searchText, results);
       } else {
-        renderSearchResults(results);
+        renderSearchResults(searchText, results);
       }
     }) : null;
 
@@ -772,9 +839,9 @@
       searchText = e.target.value;
       var results = fuse.search(e.target.value);
       if (enableSearchHighlight) {
-        renderSearchHighlightResults(results);
+        renderSearchHighlightResults(searchText, results);
       } else {
-        renderSearchResults(results);
+        renderSearchResults(searchText, results);
       }
     }) : null;
     
@@ -803,6 +870,10 @@
       var items = document.querySelectorAll('#search-menu .dropdown-item');
       var keyCode = e.which || e.keyCode;
 
+      if (!items || !items.length) {
+        return null;
+      }
+      
       if (e.key === 'ArrowDown' || keyCode === 40) {
         if (activeIndex === null) {
           activeIndex = 0;
@@ -859,11 +930,85 @@
 
       searchText = e.target.value;
       var results = fuse.search(e.target.value);
-      renderSearchResultsMobile(results);
+      renderSearchResultsMobile(searchText, results);
       if (enableSearchHighlight) {
-        renderSearchHighlightResultsMobile(results);
+        renderSearchHighlightResultsMobile(searchText, results);
       } else {
-        renderSearchResultsMobile(results);
+        renderSearchResultsMobile(searchText, results);
+      }
+    }) : null;
+  // ============================================================
+
+
+  // ====================== mobile search =======================
+    var mobileSearchInputElem = document.querySelector('#search-mobile');
+    var mobileSearchClassElem = document.querySelector('.mobile-search');
+    var mobileSearchBtnElem = document.querySelector('#mobileSearchBtn');
+    var mobileSearchCloseBtnElem = document.querySelector('#search-mobile-close');
+    var mobileSearchContainer = document.querySelector('#search-mobile-container');
+    var mobileSearchResultsElem = document.querySelector('#search-mobile-results');
+    var htmlElem = document.querySelector('html');
+
+    if (mobileSearchClassElem) {
+      mobileSearchClassElem.style.display = 'none';
+    }
+
+    mobileSearchBtnElem ? 
+    mobileSearchBtnElem.addEventListener('click', function () {
+      if (mobileSearchContainer) {
+        mobileSearchContainer.style.display = 'block';
+      }
+
+      if (mobileSearchInputElem) {
+        mobileSearchInputElem.focus();
+      }
+
+      if (htmlElem) {
+        htmlElem.style.overflowY = 'hidden';
+      }
+    }) : null;
+
+    mobileSearchCloseBtnElem ? 
+    mobileSearchCloseBtnElem.addEventListener('click', function() {
+      if (mobileSearchContainer) {
+        mobileSearchContainer.style.display = 'none';
+      }
+
+      if (mobileSearchInputElem) {
+        mobileSearchInputElem.value = '';
+      }
+      
+      if (mobileSearchResultsElem) {
+        while (mobileSearchResultsElem.firstChild) {
+          mobileSearchResultsElem.removeChild(mobileSearchResultsElem.firstChild);
+        }
+      }
+
+      if (htmlElem) {
+        htmlElem.style.overflowY = 'visible';
+      }
+    }) : null;
+
+    mobileSearchInputElem ? 
+    mobileSearchInputElem.addEventListener('keydown', function(e) {
+      var keyCode = e.which || e.keyCode;
+      if (e.key === 'Escape' || keyCode === 27) {
+        if (mobileSearchContainer) {
+          mobileSearchContainer.style.display = 'none';
+        }
+        
+        if (mobileSearchInputElem) {
+          mobileSearchInputElem.value = '';
+        }
+
+        if (mobileSearchResultsElem) {
+          while (mobileSearchResultsElem.firstChild) {
+            mobileSearchResultsElem.removeChild(mobileSearchResultsElem.firstChild);
+          }
+        }
+        if (htmlElem) {
+          htmlElem.style.overflowY = 'visible';
+        }
       }
     }) : null;
   // ============================================================

layouts/talks/list.html

@@ -9,7 +9,6 @@
     {{ .Content }}
   </div>
 </header>
-</span>
 <main class="main archive">
   <div class="archive__container">
     {{ $pages := (where .Site.RegularPages "Section" "talks") }}