Optimize Algolia Search

_vendors.yml

@@ -1,3 +1,6 @@
+# This file is automatically generated
+# See https://github.com/next-theme/plugins
+
 anime:
   name: animejs
   version: 3.2.0

layout/_partials/search/algolia-search.njk

@@ -7,7 +7,7 @@
     <i class="fa fa-times-circle"></i>
   </span>
 </div>
-<div class="algolia-results">
+<div class="search-result-container">
   <div id="algolia-stats"></div>
   <div id="algolia-hits"></div>
   <div id="algolia-pagination"></div>

layout/_partials/search/localsearch.njk

@@ -11,7 +11,7 @@
     <i class="fa fa-times-circle"></i>
   </span>
 </div>
-<div id="search-result">
+<div class="search-result-container">
   <div id="no-result">
     <i class="fa fa-spinner fa-pulse fa-5x"></i>
   </div>

scripts/events/lib/utils.js

@@ -53,6 +53,7 @@ const points = {
   ]
 };
 
+// Required by theme-next-docs
 module.exports = {
   resolve,
   highlightTheme,

source/css/_common/components/third-party/search.styl

@@ -71,6 +71,30 @@
       display: none;
     }
   }
+
+  .search-result-container {
+    height: calc(100% - 55px);
+    overflow: auto;
+    padding: 5px 25px;
+
+    hr {
+      margin: 10px 0;
+    }
+  }
+
+  .search-result-list {
+    margin: 0 5px;
+    padding: 0;
+  }
+
+  a.search-result-title {
+    font-weight: bold;
+  }
+
+  p.search-result {
+    border-bottom: 1px dashed $grey-light;
+    padding: 5px 0;
+  }
 }
 
 if (hexo-config('algolia_search.enable')) {
@@ -92,25 +116,6 @@ if (hexo-config('algolia_search.enable')) {
     }
   }
 
-  .algolia-results {
-    height: calc(100% - 55px);
-    overflow: auto;
-    padding: 5px 30px;
-
-    hr {
-      margin: 10px 0;
-    }
-  }
-
-  .algolia-hit-item {
-    margin: 15px 0;
-  }
-
-  .algolia-hit-item-link {
-    border-bottom: 1px dashed $grey-light;
-    display: block;
-  }
-
   .algolia-pagination {
     // Override default style of ul
     margin: 40px 0;
@@ -139,26 +144,12 @@ if (hexo-config('local_search.enable')) {
       padding: 2px;
     }
 
-    ul.search-result-list {
-      margin: 0 5px;
-      padding: 0;
-      width: 100%;
-    }
-
-    p.search-result {
-      border-bottom: 1px dashed $grey-light;
-      padding: 5px 0;
-    }
-
-    a.search-result-title {
-      font-weight: bold;
-    }
-
-    #search-result {
+    .search-result-container {
       display: flex;
-      height: calc(100% - 55px);
-      overflow: auto;
-      padding: 5px 25px;
+    }
+
+    .search-result-list {
+      width: 100%;
     }
 
     #no-result {

source/js/algolia-search.js

@@ -54,10 +54,18 @@ document.addEventListener('DOMContentLoaded', () => {
 
     instantsearch.widgets.hits({
       container : '#algolia-hits',
+      escapeHTML: false,
       templates : {
         item: data => {
-          const link = data.permalink ? data.permalink : CONFIG.root + data.path;
-          return `<a href="${link}" class="algolia-hit-item-link">${data._highlightResult.title.value}</a>`;
+          const { title, excerpt, excerptStrip, contentStripTruncate } = data._highlightResult;
+          let result = `<a href="${data.permalink}" class="search-result-title">${title.value}</a>`;
+          const content = excerpt || excerptStrip || contentStripTruncate;
+          if (content && content.value) {
+            const div = document.createElement('div');
+            div.innerHTML = content.value;
+            result += `<a href="${data.permalink}"><p class="search-result">${div.textContent.substr(0, 100)}...</p></a>`;
+          }
+          return result;
         },
         empty: data => {
           return `<div id="algolia-hits-empty">
@@ -66,7 +74,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
       },
       cssClasses: {
-        item: 'algolia-hit-item'
+        list: 'search-result-list'
       }
     }),
 

source/js/local-search.js

@@ -164,7 +164,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (!isfetched) return;
     const searchText = input.value.trim().toLowerCase();
     const keywords = searchText.split(/[-\s]+/);
-    const resultContent = document.getElementById('search-result');
+    const resultContent = document.querySelector('.search-result-container');
     let resultItems = [];
     if (searchText.length > 0) {
       // Perform local searching