mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-10-27 02:33:18 +00:00
feat: configure lunr, extract inline javascript in search.js and fix horsey popup position
This commit is contained in:
Leclerc Gwendal
Mathieu Cornic
parent
c645b07402
commit
363bb68e42
6 changed files with 103 additions and 115 deletions
|
|
@ -1,114 +1,8 @@
|
|||
<div class="searchbox">
|
||||
<label for="search-by"><i class="fa fa-search"></i></label>
|
||||
<input id="search-by" type="text" placeholder="Search Documentation">
|
||||
<input id="search-by" type="text" placeholder="Search">
|
||||
<span data-search-clear=""><i class="fa fa-close"></i></span>
|
||||
</div>
|
||||
<script type="text/javascript" src="/js/lunr.min.js"></script>
|
||||
<script type="text/javascript" src="/js/horsey.js"></script>
|
||||
<script type="text/javascript">
|
||||
var lunrIndex,
|
||||
pagesIndex;
|
||||
|
||||
// Initialize lunrjs using our generated index file
|
||||
function initLunr() {
|
||||
// First retrieve the index file
|
||||
$.getJSON("/json/search.json")
|
||||
.done(function(index) {
|
||||
pagesIndex = index;
|
||||
console.log("index:", pagesIndex);
|
||||
|
||||
// Set up lunrjs by declaring the fields we use
|
||||
// Also provide their boost level for the ranking
|
||||
lunrIndex = lunr(function() {
|
||||
this.field("title", {
|
||||
boost: 15
|
||||
});
|
||||
this.field("tags", {
|
||||
boost: 10
|
||||
});
|
||||
this.field("content", {
|
||||
boost: 5
|
||||
});
|
||||
|
||||
// ref is the result item identifier (I chose the page URL)
|
||||
this.ref("uri");
|
||||
});
|
||||
|
||||
// Feed lunr with each file and let lunr actually index them
|
||||
pagesIndex.forEach(function(page) {
|
||||
lunrIndex.add(page);
|
||||
});
|
||||
})
|
||||
.fail(function(jqxhr, textStatus, error) {
|
||||
var err = textStatus + ", " + error;
|
||||
console.error("Error getting Hugo index flie:", err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Trigger a search in lunr and transform the result
|
||||
*
|
||||
* @param {String} query
|
||||
* @return {Array} results
|
||||
*/
|
||||
function search(query) {
|
||||
// Find the item in our index corresponding to the lunr one to have more info
|
||||
// Lunr result:
|
||||
// {ref: "/section/page1", score: 0.2725657778206127}
|
||||
// Our result:
|
||||
// {title:"Page1", href:"/section/page1", ...}
|
||||
return lunrIndex.search(query).map(function(result) {
|
||||
return pagesIndex.filter(function(page) {
|
||||
return page.uri === result.ref;
|
||||
})[0];
|
||||
});
|
||||
}
|
||||
|
||||
// Let's get started
|
||||
initLunr();
|
||||
$( document ).ready(function() {
|
||||
horsey($("#search-by").get(0), {
|
||||
suggestions: function (value, done) {
|
||||
var query = $("#search-by").val();
|
||||
if (query.length < 3) {
|
||||
done([]);
|
||||
} else {
|
||||
var results = search(query);
|
||||
console.log(results);
|
||||
done(results);
|
||||
}
|
||||
},
|
||||
filter: function (q, suggestion) {
|
||||
return true;
|
||||
},
|
||||
set: function (value) {
|
||||
location.href=value.href;
|
||||
},
|
||||
render: function (li, suggestion) {
|
||||
var uri = suggestion.uri.substring(1,suggestion.uri.length);
|
||||
var indexOfIndex = uri.lastIndexOf("/index");
|
||||
if (indexOfIndex == -1) {
|
||||
indexOfIndex = uri.length;
|
||||
}
|
||||
var href = uri.substring(uri.indexOf("/"), indexOfIndex);
|
||||
suggestion.href = href;
|
||||
|
||||
|
||||
var query = $("#search-by").val();
|
||||
var numWords = 2;
|
||||
var text = suggestion.content.match("(?:\\s?(?:[\\w]+)\\s?){"+numWords+"}"+query+"(?:\\s?(?:[\\w]+)\\s?){"+numWords+"}");
|
||||
suggestion.context = text;
|
||||
var image = '<div>' + '» ' + suggestion.title + '</div><div style="font-size:12px">' + suggestion.context +'</div>';
|
||||
li.innerHTML = image;
|
||||
},
|
||||
limit: 10
|
||||
});
|
||||
|
||||
$("#search-by").on("horsey-selected", function (a, b){
|
||||
console.log(a);
|
||||
console.log(a);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<script type="text/javascript" src="/js/search.js"></script>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,12 @@
|
|||
background-color: #fff;
|
||||
color: #333;
|
||||
transition: left 0.1s ease-in-out;
|
||||
position: fixed;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
left: 17px !important;
|
||||
top: 135px !important;
|
||||
width: 265px;
|
||||
}
|
||||
.sey-show {
|
||||
display: block;
|
||||
|
|
@ -29,4 +35,4 @@
|
|||
.sey-selected {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -903,10 +903,15 @@ td {
|
|||
}
|
||||
#body #breadcrumbs {
|
||||
height: auto;
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 70%;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
#body #breadcrumbs span {
|
||||
padding: 0 0.1rem;
|
||||
|
|
|
|||
7
static/js/lunr.min.js
vendored
7
static/js/lunr.min.js
vendored
File diff suppressed because one or more lines are too long
84
static/js/search.js
Normal file
84
static/js/search.js
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
var lunrIndex, pagesIndex;
|
||||
|
||||
// Initialize lunrjs using our generated index file
|
||||
function initLunr() {
|
||||
// First retrieve the index file
|
||||
$.getJSON("/json/search.json")
|
||||
.done(function(index) {
|
||||
pagesIndex = index;
|
||||
// Set up lunrjs by declaring the fields we use
|
||||
// Also provide their boost level for the ranking
|
||||
lunrIndex = new lunr.Index
|
||||
lunrIndex.ref("uri");
|
||||
lunrIndex.field('title', {
|
||||
boost: 15
|
||||
});
|
||||
lunrIndex.field('tags', {
|
||||
boost: 10
|
||||
});
|
||||
lunrIndex.field("content", {
|
||||
boost: 5
|
||||
});
|
||||
|
||||
// Feed lunr with each file and let lunr actually index them
|
||||
pagesIndex.forEach(function(page) {
|
||||
lunrIndex.add(page);
|
||||
});
|
||||
lunrIndex.pipeline.remove(lunrIndex.stemmer)
|
||||
})
|
||||
.fail(function(jqxhr, textStatus, error) {
|
||||
var err = textStatus + ", " + error;
|
||||
console.error("Error getting Hugo index flie:", err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Trigger a search in lunr and transform the result
|
||||
*
|
||||
* @param {String} query
|
||||
* @return {Array} results
|
||||
*/
|
||||
function search(query) {
|
||||
// Find the item in our index corresponding to the lunr one to have more info
|
||||
return lunrIndex.search(query).map(function(result) {
|
||||
return pagesIndex.filter(function(page) {
|
||||
return page.uri === result.ref;
|
||||
})[0];
|
||||
});
|
||||
}
|
||||
|
||||
// Let's get started
|
||||
initLunr();
|
||||
$( document ).ready(function() {
|
||||
horsey($("#search-by").get(0), {
|
||||
suggestions: function (value, done) {
|
||||
var query = $("#search-by").val();
|
||||
var results = search(query);
|
||||
done(results);
|
||||
},
|
||||
filter: function (q, suggestion) {
|
||||
return true;
|
||||
},
|
||||
set: function (value) {
|
||||
location.href=value.href;
|
||||
},
|
||||
render: function (li, suggestion) {
|
||||
var uri = suggestion.uri.substring(1,suggestion.uri.length);
|
||||
var indexOfIndex = uri.lastIndexOf("/index");
|
||||
if (indexOfIndex == -1) {
|
||||
indexOfIndex = uri.length;
|
||||
}
|
||||
var href = uri.substring(uri.indexOf("/"), indexOfIndex);
|
||||
suggestion.href = href;
|
||||
|
||||
|
||||
var query = $("#search-by").val();
|
||||
var numWords = 2;
|
||||
var text = suggestion.content.match("(?:\\s?(?:[\\w]+)\\s?){0,"+numWords+"}"+query+"(?:\\s?(?:[\\w]+)\\s?){0,"+numWords+"}");
|
||||
suggestion.context = text;
|
||||
var image = '<div>' + '» ' + suggestion.title + '</div><div style="font-size:12px">' + (suggestion.context || '') +'</div>';
|
||||
li.innerHTML = image;
|
||||
},
|
||||
limit: 10
|
||||
});
|
||||
});
|
||||
|
|
@ -1 +1 @@
|
|||
[]
|
||||
[]
|
||||
|
|
|
|||
Loading…
Reference in a new issue