mirror of
https://github.com/balkian/balkian.github.com.git
synced 2025-08-24 04:32:20 +00:00
Add search
This commit is contained in:
J. Fernando Sánchez
@@ -37,6 +37,9 @@
|
||||
<a href="//jfernando.es" target="_blank"><li>
|
||||
CV
|
||||
</li></a>
|
||||
<a href="{{ "/search" | relURL }}"><li>
|
||||
<i class="fa fa-search"></i>
|
||||
</li></a>
|
||||
</ul>
|
||||
</header>
|
||||
<!--Body content-->
|
||||
@@ -68,5 +71,7 @@
|
||||
</div>
|
||||
|
||||
<script src="{{ "/js/jquery-2.0.2.min.js" | relURL }}"></script>
|
||||
{{ block "footerfiles" . }}
|
||||
{{ end }}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
5
themes/balkian/layouts/_default/index.json
Normal file
5
themes/balkian/layouts/_default/index.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{{- $.Scratch.Add "index" slice -}}
|
||||
{{- range .Site.RegularPages -}}
|
||||
{{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "categories" .Params.categories "contents" .Plain "permalink" .Permalink) -}}
|
||||
{{- end -}}
|
||||
{{- $.Scratch.Get "index" | jsonify -}}
|
||||
@@ -1,5 +1,5 @@
|
||||
{{ define "content" }}
|
||||
<h1>{{ .Data.Plural | humanize}}</h1>
|
||||
<h2>{{ .Data.Plural | humanize}}</h2>
|
||||
<div>
|
||||
{{ $data := .Data }}
|
||||
{{ $total := .Site.Pages | len}}
|
||||
|
||||
30
themes/balkian/layouts/page/search.html
Normal file
30
themes/balkian/layouts/page/search.html
Normal file
@@ -0,0 +1,30 @@
|
||||
{{ define "footerfiles" }}
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
|
||||
<script src="{{ "/js/search.js" | relURL }}"></script>
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
<section class="resume-section p-3 p-lg-5 d-flex flex-column">
|
||||
<div class="my-auto" >
|
||||
<form class="search">
|
||||
<input type="text" name="s" class="searchTerm" placeholder="What are you looking for?">
|
||||
<button type="submit" class="searchButton">
|
||||
<i class="fas fa-2x fa-search"></i>
|
||||
</button>
|
||||
</form>
|
||||
<div id="search-results">
|
||||
<h3>Matching pages</h3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- this template is sucked in by search.js and appended to the search-results div above. So editing here will adjust style -->
|
||||
<script id="search-result-template" type="text/x-js-template">
|
||||
<div id="summary-${key}">
|
||||
<h4><a href="${link}">${title}</a></h4>
|
||||
<p>${snippet}</p>
|
||||
${ isset tags }<p>Tags: ${tags}</p>${ end }
|
||||
${ isset categories }<p>Categories: ${categories}</p>${ end }
|
||||
</div>
|
||||
</script>
|
||||
{{ end }}
|
||||
@@ -385,9 +385,8 @@ footer a:hover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.todo {
|
||||
.todo , .task-list {
|
||||
list-style-type: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.todo ul {
|
||||
@@ -805,3 +804,18 @@ pre {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.searchTerm {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.search > * {
|
||||
vertical-align: middle;
|
||||
margin:0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
109
themes/balkian/static/js/search.js
Normal file
109
themes/balkian/static/js/search.js
Normal file
@@ -0,0 +1,109 @@
|
||||
|
||||
summaryInclude=60;
|
||||
var fuseOptions = {
|
||||
shouldSort: true,
|
||||
includeMatches: true,
|
||||
threshold: 0.0,
|
||||
tokenize:true,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
maxPatternLength: 32,
|
||||
minMatchCharLength: 1,
|
||||
keys: [
|
||||
{name:"title",weight:0.8},
|
||||
{name:"contents",weight:0.5},
|
||||
{name:"tags",weight:0.3},
|
||||
{name:"categories",weight:0.3}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
var searchQuery = param("s");
|
||||
if(searchQuery){
|
||||
$("#search-query").val(searchQuery);
|
||||
executeSearch(searchQuery);
|
||||
}else {
|
||||
$('#search-results').append("<p>Please enter a word or phrase above</p>");
|
||||
}
|
||||
|
||||
|
||||
|
||||
function executeSearch(searchQuery){
|
||||
$.getJSON( "/index.json", function( data ) {
|
||||
var pages = data;
|
||||
var fuse = new Fuse(pages, fuseOptions);
|
||||
var result = fuse.search(searchQuery);
|
||||
console.log({"matches":result});
|
||||
if(result.length > 0){
|
||||
populateResults(result);
|
||||
}else{
|
||||
$('#search-results').append("<p>No matches found</p>");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function populateResults(result){
|
||||
$.each(result,function(key,value){
|
||||
var contents= value.item.contents;
|
||||
var snippet = "";
|
||||
var snippetHighlights=[];
|
||||
var tags =[];
|
||||
if( fuseOptions.tokenize ){
|
||||
snippetHighlights.push(searchQuery);
|
||||
}else{
|
||||
$.each(value.matches,function(matchKey,mvalue){
|
||||
if(mvalue.key == "tags" || mvalue.key == "categories" ){
|
||||
snippetHighlights.push(mvalue.value);
|
||||
}else if(mvalue.key == "contents"){
|
||||
start = mvalue.indices[0][0]-summaryInclude>0?mvalue.indices[0][0]-summaryInclude:0;
|
||||
end = mvalue.indices[0][1]+summaryInclude<contents.length?mvalue.indices[0][1]+summaryInclude:contents.length;
|
||||
snippet += contents.substring(start,end);
|
||||
snippetHighlights.push(mvalue.value.substring(mvalue.indices[0][0],mvalue.indices[0][1]-mvalue.indices[0][0]+1));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if(snippet.length<1){
|
||||
snippet += contents.substring(0,summaryInclude*2);
|
||||
}
|
||||
//pull template from hugo templarte definition
|
||||
var templateDefinition = $('#search-result-template').html();
|
||||
//replace values
|
||||
var output = render(templateDefinition,{key:key,title:value.item.title,link:value.item.permalink,tags:value.item.tags,categories:value.item.categories,snippet:snippet});
|
||||
$('#search-results').append(output);
|
||||
|
||||
$.each(snippetHighlights,function(snipkey,snipvalue){
|
||||
$("#summary-"+key).mark(snipvalue);
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function param(name) {
|
||||
return decodeURIComponent((location.search.split(name + '=')[1] || '').split('&')[0]).replace(/\+/g, ' ');
|
||||
}
|
||||
|
||||
function render(templateString, data) {
|
||||
var conditionalMatches,conditionalPattern,copy;
|
||||
conditionalPattern = /\$\{\s*isset ([a-zA-Z]*) \s*\}(.*)\$\{\s*end\s*}/g;
|
||||
//since loop below depends on re.lastInxdex, we use a copy to capture any manipulations whilst inside the loop
|
||||
copy = templateString;
|
||||
while ((conditionalMatches = conditionalPattern.exec(templateString)) !== null) {
|
||||
if(data[conditionalMatches[1]]){
|
||||
//valid key, remove conditionals, leave contents.
|
||||
copy = copy.replace(conditionalMatches[0],conditionalMatches[2]);
|
||||
}else{
|
||||
//not valid, remove entire section
|
||||
copy = copy.replace(conditionalMatches[0],'');
|
||||
}
|
||||
}
|
||||
templateString = copy;
|
||||
//now any conditionals removed we can do simple substitution
|
||||
var key, find, re;
|
||||
for (key in data) {
|
||||
find = '\\$\\{\\s*' + key + '\\s*\\}';
|
||||
re = new RegExp(find, 'g');
|
||||
templateString = templateString.replace(re, data[key]);
|
||||
}
|
||||
return templateString;
|
||||
}
|
||||
Reference in New Issue
Block a user