Merge pull request #316 from Xpirix/improve_search

Improve search results

themes/hugo-bulma-blocks-theme/assets/js/search.js

@@ -8,9 +8,11 @@ var fuseOptions = {
     includeMatches: true,
     includeScore: true,
     tokenize: true,
+    matchAllTokens: true,
     location: 0,
-    distance: 100,
-    minMatchCharLength: 1,
+    distance: 5000, // Increase this for deeper search based on content character length
+    threshold: 0.55,
+    minMatchCharLength: 2,
     keys: [
         {name: "title", weight: 0.45},
         {name: "contents", weight: 0.4},
@@ -72,36 +74,44 @@ function executeSearch(searchQuery) {
 }
 
 function populateResults(results) {
-
     var searchQuery = document.getElementById("search-query").value;
     var searchResults = document.getElementById("search-results");
-
-    // pull template from hugo template definition
+
+    // Clear previous results
+    searchResults.innerHTML = "";
+
+    // Tokenize the search query to handle multiple words
+    var searchTokens = searchQuery.split(/\s+/).filter(token => token.length > 0);
+
+    // Pull template from Hugo template definition
     var templateDefinition = document.getElementById("search-result-template").innerHTML;
 
     results.forEach(function (value, key) {
-
         var contents = value.item.contents;
         var snippet = "";
         var snippetHighlights = [];
 
-        snippetHighlights.push(searchQuery);
-        snippet = contents.substring(0, summaryInclude * 2) + '…';
+        // Build the snippet and highlight tokens
+        snippetHighlights.push(...searchTokens);
+        snippet = createSnippet(contents, searchTokens);
 
-        //replace values
-        var tags = ""
+        // Replace values for tags
+        var tags = "";
         if (value.item.tags) {
             value.item.tags.forEach(function (element) {
-                tags = tags + "<span class='tag is-warning'><a href='{{ "tags/" | absURL }}" + element + "'>" + element + "</a></span>"
+                tags += "<span class='tag is-warning'><a href='/tags/" + element + "'>" + element + "</a></span> ";
             });
         }
-        var categories = ""
+
+        // Replace values for categories
+        var categories = "";
         if (value.item.categories) {
             value.item.categories.forEach(function (element) {
-                categories = categories + "<span class='tag is-danger'><a href='{{ "categories/" | absURL }}" + element + "'>" + element + "</a></span>"
+                categories += "<span class='tag is-danger'><a href='/categories/" + element + "'>" + element + "</a></span> ";
             });
-        }        
+        }
 
+        // Render the output using the template
         var output = render(templateDefinition, {
             key: key,
             title: value.item.title,
@@ -110,16 +120,42 @@ function populateResults(results) {
             categories: categories,
             snippet: snippet
         });
-        if (output.includes(searchQuery))
-        {
+
+        // Check if output matches any of the search tokens
+        var matchFound = searchTokens.some(token => output.toLowerCase().includes(token.toLowerCase()));
+
+        // Append the output to the search results if there is a match
+        if (matchFound) {
             searchResults.innerHTML += output;
+
+            // Highlight each token in the snippet
+            snippetHighlights.forEach(function (snipvalue) {
+                var instance = new Mark(document.getElementById('summary-' + key));
+                instance.mark(snipvalue);
+            });
         }
-        snippetHighlights.forEach(function (snipvalue, snipkey) {
-            var instance = new Mark(document.getElementById('summary-' + key));
-            instance.mark(snipvalue);
-        });
+    });
+}
 
+function createSnippet(contents, tokens) {
+    const snippetLength = 200;
+    let start = 0;
+    let end = snippetLength;
+    tokens.forEach(token => {
+        let tokenPosition = contents.toLowerCase().indexOf(token.toLowerCase());
+        if (tokenPosition > -1) {
+            start = Math.max(0, tokenPosition - 50);
+            end = Math.min(contents.length, tokenPosition + snippetLength - 50);
+        }
     });
+    let snippet = contents.substring(start, end);
+    if (start > 0) {
+        snippet = '&hellip;' + snippet;
+    }
+    if (end < contents.length) {
+        snippet += '&hellip;';
+    }
+    return snippet;
 }
 
 function render(templateString, data) {

themes/hugo-bulma-blocks-theme/layouts/_default/index.json

@@ -1,5 +1,6 @@
 {{- $.Scratch.Add "index" slice -}}
 {{- range .Site.RegularPages -}}
-    {{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "categories" .Params.categories "contents" .Plain "permalink" .Permalink) -}}
+    {{- $plainContent := .Content | replaceRE "(?s)<nav id=\"sidebar\" class=\"sidebar\">.*?</nav>" "" | plainify -}}
+    {{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "categories" .Params.categories "contents" $plainContent "permalink" .Permalink) -}}
 {{- end -}}
 {{- $.Scratch.Get "index" | jsonify -}}