aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorÓscar Nájera <hello@oscarnajera.com>2018-07-15 19:43:38 +0200
committerÓscar Nájera <hello@oscarnajera.com>2018-07-15 19:43:38 +0200
commita7fed26337081ae0edbe84c769af21a409536cf3 (patch)
tree792cc6ba5e161b617b1f6c30eb79de368f2cfbff
parent8c1cb6a102110a7a10e743c458293723c17558b9 (diff)
downloadhugo-minimalist-theme-a7fed26337081ae0edbe84c769af21a409536cf3.tar.gz
hugo-minimalist-theme-a7fed26337081ae0edbe84c769af21a409536cf3.tar.bz2
hugo-minimalist-theme-a7fed26337081ae0edbe84c769af21a409536cf3.zip
Import search
https://gist.github.com/eddiewebb/735feb48f50f0ddd65ae5606a1cb41ae
-rw-r--r--layouts/_default/list.html20
-rw-r--r--layouts/_default/search.html28
-rw-r--r--layouts/index.json5
-rw-r--r--static/js/search.js108
4 files changed, 161 insertions, 0 deletions
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
new file mode 100644
index 0000000..7c9593d
--- /dev/null
+++ b/layouts/_default/list.html
@@ -0,0 +1,20 @@
+{{ define "main" }}
+<section class="bg-near-white">
+ <ul>
+ {{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
+ <li><a href="/{{ $taxonomyname | urlize }}">{{ $taxonomyname }}</a>
+ <ul>
+ {{ range $key, $value := $taxonomy }}
+ <li> {{ $key }} </li>
+ <ul>
+ {{ range $value.Pages }}
+ <li hugo-nav="{{ .RelPermalink}}"><a href="{{ .Permalink}}"> {{ .LinkTitle }} </a> </li>
+ {{ end }}
+ </ul>
+ {{ end }}
+ </ul>
+ </li>
+ {{ end }}
+ </ul>
+</section>
+{{ end }}
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
new file mode 100644
index 0000000..7dd02df
--- /dev/null
+++ b/layouts/_default/search.html
@@ -0,0 +1,28 @@
+{{ 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.1/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" | absURL }}"></script>
+{{ end }}
+
+{{ define "main" }}
+<section class="bg-near-white">
+ <div class="mw7 center pv4" >
+ <form action="{{ "search" | absURL }}">
+ <input id="search-query" name="s"/>
+ </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}" class="bt bb b--black-10 ph4">
+ <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 }}
diff --git a/layouts/index.json b/layouts/index.json
new file mode 100644
index 0000000..c93f805
--- /dev/null
+++ b/layouts/index.json
@@ -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 -}}
diff --git a/static/js/search.js b/static/js/search.js
new file mode 100644
index 0000000..add8549
--- /dev/null
+++ b/static/js/search.js
@@ -0,0 +1,108 @@
+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;
+}