116 lines
3.5 KiB
HTML
116 lines
3.5 KiB
HTML
{{ define "title" }}Search{{ end }}
|
|
{{ define "main" }}
|
|
|
|
<article class="center ph3 nested-copy-line-height lh-copy f4 nested-links mw-100 measure-wide pt4 min-vh-100">
|
|
{{ .Content }}
|
|
<input id="search" type="text" placeholder="Search..." class="pa2 br3 ba bw1 b--gray lh-title f3 sans-serif w-100">
|
|
<p>Type a search above to see results below:</p>
|
|
<ul id="results" class=""></ul>
|
|
</article>
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.2.1/lunr.min.js"></script>
|
|
<script type="text/javascript">
|
|
var lunrIndex, $results, pagesIndex;
|
|
function getQueryVariable(variable) {
|
|
var query = window.location.search.substring(1);
|
|
var vars = query.split('&');
|
|
|
|
for (var i = 0; i < vars.length; i++) {
|
|
var pair = vars[i].split('=');
|
|
|
|
if (pair[0] === variable) {
|
|
return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
|
|
}
|
|
}
|
|
}
|
|
|
|
var searchTerm = getQueryVariable('query');
|
|
|
|
// Initialize lunrjs using our generated index file
|
|
function initLunr() {
|
|
// First retrieve the index file
|
|
$.getJSON("{{ "index.json" | absURL }}")
|
|
.done(function(index) {
|
|
pagesIndex = index;
|
|
// console.log("index:", pagesIndex);
|
|
lunrIndex = lunr(function() {
|
|
this.field("title", { boost: 10 });
|
|
this.field("categories", { boost: 5 });
|
|
this.field("keywords");
|
|
this.field("content");
|
|
this.field("uri");
|
|
this.ref("uri");
|
|
|
|
pagesIndex.forEach(function (page) {
|
|
this.add(page)
|
|
}, this)
|
|
});
|
|
})
|
|
.fail(function(jqxhr, textStatus, error) {
|
|
var err = textStatus + ", " + error;
|
|
console.error("Error fetching Hugo search index JSON file:", err);
|
|
});
|
|
}
|
|
|
|
// Nothing crazy here, just hook up a listener on the input field
|
|
function initUI() {
|
|
$results = $("#results");
|
|
$("#search").keyup(function() {
|
|
$results.empty();
|
|
|
|
// Only trigger a search when 2 chars. at least have been provided
|
|
var query = $(this).val();
|
|
if (query.length < 2) {
|
|
return;
|
|
}
|
|
|
|
var results = search(query);
|
|
|
|
renderResults(results);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Trigger a search in lunr and transform the result
|
|
*
|
|
* @param {String} query
|
|
* @return {Array} results
|
|
*/
|
|
function search(query) {
|
|
return lunrIndex.search(query).map(function(result) {
|
|
return pagesIndex.filter(function(page) {
|
|
return page.uri === result.ref;
|
|
})[0];
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Display the 10 first results
|
|
*
|
|
* @param {Array} results to display
|
|
*/
|
|
function renderResults(results) {
|
|
if (!results.length) {
|
|
return;
|
|
}
|
|
|
|
// Only show the first results
|
|
results.slice(0, 20).forEach(function(result) {
|
|
var $result = $("<li>");
|
|
$result.append($('<a>', {
|
|
class: 'no-underline dim link',
|
|
href: result.uri,
|
|
text: result.title
|
|
}));
|
|
$results.append($result);
|
|
});
|
|
}
|
|
|
|
// Let's get started
|
|
$(document).ready(function() {
|
|
initLunr();
|
|
initUI();
|
|
});
|
|
</script>
|
|
{{ end }}
|