From 00e6ca63bc04ba70c30af888d1841990a6d49ab6 Mon Sep 17 00:00:00 2001 From: Helder Pereira Date: Sun, 29 Aug 2021 16:03:04 +0100 Subject: [PATCH 1/4] Format search.js --- static/js/search.js | 56 +++++++++++++++++++++------------------------ 1 file changed, 26 insertions(+), 30 deletions(-) diff --git a/static/js/search.js b/static/js/search.js index fa1674f1bb..efdf00c699 100644 --- a/static/js/search.js +++ b/static/js/search.js @@ -1,9 +1,5 @@ var lunrIndex, pagesIndex; -function endsWith(str, suffix) { - return str.indexOf(suffix, str.length - suffix.length) !== -1; -} - // Initialize lunrjs using our generated index file function initLunr() { // First retrieve the index file @@ -13,15 +9,15 @@ function initLunr() { // Set up lunrjs by declaring the fields we use // Also provide their boost level for the ranking lunrIndex = lunr(function() { - this.ref("uri"); + this.ref('uri'); this.field('title', { - boost: 15 + boost: 15 }); this.field('tags', { - boost: 10 + boost: 10 }); - this.field("content", { - boost: 5 + this.field('content', { + boost: 5 }); this.pipeline.remove(lunr.stemmer); @@ -29,13 +25,13 @@ function initLunr() { // Feed lunr with each file and let lunr actually index them pagesIndex.forEach(function(page) { - this.add(page); + this.add(page); }, this); }) }) .fail(function(jqxhr, textStatus, error) { - var err = textStatus + ", " + error; - console.error("Error getting Hugo index file:", err); + var err = textStatus + ', ' + error; + console.error('Error getting Hugo index file:', err); }); } @@ -47,20 +43,20 @@ function initLunr() { */ function search(queryTerm) { // Find the item in our index corresponding to the lunr one to have more info - var searchTerm = queryTerm.match(/\w+/g).map(word => word+"^100"+" "+word+"*^10"+" "+"*"+word+"^10"+" "+word+"~2^1").join(" "); + var searchTerm = queryTerm.match(/\w+/g).map(word => word + '^100' + ' ' + word + '*^10' + ' ' + '*' + word + '^10' + ' ' + word + '~2^1').join(' '); return lunrIndex.search(searchTerm).map(function(result) { - return pagesIndex.filter(function(page) { - return page.uri === result.ref; - })[0]; - }); + return pagesIndex.filter(function(page) { + return page.uri === result.ref; + })[0]; + }); } // Let's get started initLunr(); -$( document ).ready(function() { +$(function() { var searchList = new autoComplete({ /* selector for the search box element */ - selector: $("#search-by").get(0), + selector: $('#search-by').get(0), /* source is the callback to perform the search */ source: function(term, response) { response(search(term)); @@ -69,18 +65,18 @@ $( document ).ready(function() { renderItem: function(item, term) { var numContextWords = 2; var text = item.content.match( - "(?:\\s?(?:[\\w]+)\\s?){0,"+numContextWords+"}" + - term.trim()+"(?:\\s?(?:[\\w]+)\\s?){0,"+numContextWords+"}"); + '(?:\\s?(?:[\\w]+)\\s?){0,' + numContextWords + '}' + + term.trim() + '(?:\\s?(?:[\\w]+)\\s?){0,' + numContextWords + '}'); item.context = text; - var divcontext = document.createElement("div"); - divcontext.className = "context"; + var divcontext = document.createElement('div'); + divcontext.className = 'context'; divcontext.innerText = (item.context || ''); - var divsuggestion = document.createElement("div"); - divsuggestion.className = "autocomplete-suggestion"; - divsuggestion.setAttribute("data-term", term); - divsuggestion.setAttribute("data-title", item.title); - divsuggestion.setAttribute("data-uri", baseUri + item.uri); - divsuggestion.setAttribute("data-context", item.context); + var divsuggestion = document.createElement('div'); + divsuggestion.className = 'autocomplete-suggestion'; + divsuggestion.setAttribute('data-term', term); + divsuggestion.setAttribute('data-title', item.title); + divsuggestion.setAttribute('data-uri', baseUri + item.uri); + divsuggestion.setAttribute('data-context', item.context); divsuggestion.innerText = '» ' + item.title; divsuggestion.appendChild(divcontext); return divsuggestion.outerHTML; @@ -93,6 +89,6 @@ $( document ).ready(function() { // JavaScript-autoComplete only registers the focus event when minChars is 0 which doesn't make sense, let's do it ourselves // https://github.com/Pixabay/JavaScript-autoComplete/blob/master/auto-complete.js#L191 - var selector = $("#search-by").get(0); + var selector = $('#search-by').get(0); $(selector).focus(selector.focusHandler); }); From 4e08a7b5a46edca877f6b95edd6ed640868f702c Mon Sep 17 00:00:00 2001 From: Helder Pereira Date: Sun, 29 Aug 2021 16:11:11 +0100 Subject: [PATCH 2/4] Make search pages lookup constant time --- static/js/search.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/static/js/search.js b/static/js/search.js index efdf00c699..7673d0ada2 100644 --- a/static/js/search.js +++ b/static/js/search.js @@ -9,7 +9,7 @@ function initLunr() { // Set up lunrjs by declaring the fields we use // Also provide their boost level for the ranking lunrIndex = lunr(function() { - this.ref('uri'); + this.ref('index'); this.field('title', { boost: 15 }); @@ -24,7 +24,8 @@ function initLunr() { this.searchPipeline.remove(lunr.stemmer); // Feed lunr with each file and let lunr actually index them - pagesIndex.forEach(function(page) { + pagesIndex.forEach(function(page, idx) { + page.index = idx; this.add(page); }, this); }) @@ -45,9 +46,7 @@ function search(queryTerm) { // Find the item in our index corresponding to the lunr one to have more info var searchTerm = queryTerm.match(/\w+/g).map(word => word + '^100' + ' ' + word + '*^10' + ' ' + '*' + word + '^10' + ' ' + word + '~2^1').join(' '); return lunrIndex.search(searchTerm).map(function(result) { - return pagesIndex.filter(function(page) { - return page.uri === result.ref; - })[0]; + return { index: result.ref }; }); } @@ -63,21 +62,22 @@ $(function() { }, /* renderItem displays individual search results */ renderItem: function(item, term) { + var page = pagesIndex[item.index]; var numContextWords = 2; - var text = item.content.match( + var text = page.content.match( '(?:\\s?(?:[\\w]+)\\s?){0,' + numContextWords + '}' + term.trim() + '(?:\\s?(?:[\\w]+)\\s?){0,' + numContextWords + '}'); - item.context = text; + var context = text; var divcontext = document.createElement('div'); divcontext.className = 'context'; - divcontext.innerText = (item.context || ''); + divcontext.innerText = (context || ''); var divsuggestion = document.createElement('div'); divsuggestion.className = 'autocomplete-suggestion'; divsuggestion.setAttribute('data-term', term); - divsuggestion.setAttribute('data-title', item.title); - divsuggestion.setAttribute('data-uri', baseUri + item.uri); - divsuggestion.setAttribute('data-context', item.context); - divsuggestion.innerText = '» ' + item.title; + divsuggestion.setAttribute('data-title', page.title); + divsuggestion.setAttribute('data-uri', baseUri + page.uri); + divsuggestion.setAttribute('data-context', context); + divsuggestion.innerText = '» ' + page.title; divsuggestion.appendChild(divcontext); return divsuggestion.outerHTML; }, From 98ccdc2bd6a83b5289595af3164921602fafb456 Mon Sep 17 00:00:00 2001 From: Helder Pereira Date: Sun, 29 Aug 2021 16:12:02 +0100 Subject: [PATCH 3/4] Improve search context preview --- static/css/auto-complete.css | 2 ++ static/js/search.js | 10 +++++----- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/static/css/auto-complete.css b/static/css/auto-complete.css index 47bc499e3a..082a1f571d 100644 --- a/static/css/auto-complete.css +++ b/static/css/auto-complete.css @@ -43,4 +43,6 @@ .autocomplete-suggestion > .context { font-size: 12px; + overflow: hidden; + text-overflow: ellipsis; } diff --git a/static/js/search.js b/static/js/search.js index 7673d0ada2..3f69c9cee9 100644 --- a/static/js/search.js +++ b/static/js/search.js @@ -46,7 +46,7 @@ function search(queryTerm) { // Find the item in our index corresponding to the lunr one to have more info var searchTerm = queryTerm.match(/\w+/g).map(word => word + '^100' + ' ' + word + '*^10' + ' ' + '*' + word + '^10' + ' ' + word + '~2^1').join(' '); return lunrIndex.search(searchTerm).map(function(result) { - return { index: result.ref }; + return { index: result.ref, matches: Object.keys(result.matchData.metadata) }; }); } @@ -64,10 +64,10 @@ $(function() { renderItem: function(item, term) { var page = pagesIndex[item.index]; var numContextWords = 2; - var text = page.content.match( - '(?:\\s?(?:[\\w]+)\\s?){0,' + numContextWords + '}' + - term.trim() + '(?:\\s?(?:[\\w]+)\\s?){0,' + numContextWords + '}'); - var context = text; + var contextPattern = '(?:\\S+ +){0,' + numContextWords + '}\\S*\\b(?:' + + item.matches.map(match => match.replace(/\W/g, '\\$&')).join('|') + + ')\\b\\S*(?: +\\S+){0,' + numContextWords + '}'; + var context = page.content.match(new RegExp(contextPattern, 'i')); var divcontext = document.createElement('div'); divcontext.className = 'context'; divcontext.innerText = (context || ''); From a8cb2858995001a8596c3a134885a8ae2a46c75a Mon Sep 17 00:00:00 2001 From: Helder Pereira Date: Sun, 29 Aug 2021 16:13:07 +0100 Subject: [PATCH 4/4] Improve search logic --- static/js/search.js | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/static/js/search.js b/static/js/search.js index 3f69c9cee9..82c906ec43 100644 --- a/static/js/search.js +++ b/static/js/search.js @@ -39,17 +39,27 @@ function initLunr() { /** * Trigger a search in lunr and transform the result * - * @param {String} query + * @param {String} term * @return {Array} results */ -function search(queryTerm) { +function search(term) { // Find the item in our index corresponding to the lunr one to have more info - var searchTerm = queryTerm.match(/\w+/g).map(word => word + '^100' + ' ' + word + '*^10' + ' ' + '*' + word + '^10' + ' ' + word + '~2^1').join(' '); - return lunrIndex.search(searchTerm).map(function(result) { - return { index: result.ref, matches: Object.keys(result.matchData.metadata) }; + // Remove Lunr special search characters: https://lunrjs.com/guides/searching.html + var searchTerm = lunr.tokenizer(term.replace(/[*:^~+-]/, ' ')).flatMap(token => searchPatterns(token.str)).join(' '); + return !searchTerm ? [] : lunrIndex.search(searchTerm).map(function(result) { + return { index: result.ref, matches: Object.keys(result.matchData.metadata) } }); } +function searchPatterns(word) { + return [ + word + '^100', + word + '*^10', + '*' + word + '^10', + word + '~' + Math.floor(word.length / 4) + '^1' // allow 1 in 4 letters to have a typo + ]; +} + // Let's get started initLunr(); $(function() {