diff options
| -rw-r--r-- | layouts/_default/baseof.html | 2 | ||||
| -rw-r--r-- | layouts/_default/search.html | 10 | ||||
| -rw-r--r-- | layouts/_default/single.html | 5 | ||||
| -rw-r--r-- | static/js/search.js | 163 |
4 files changed, 89 insertions, 91 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 85993a1..7f7c5ae 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,5 +6,7 @@ {{- partial "header.html" . -}} {{- block "main" . }}{{- end }} {{- partial "footer.html" . -}} + + {{- block "footerfiles" . }}{{- end }} </body> </html> diff --git a/layouts/_default/search.html b/layouts/_default/search.html index 7dd02df..817f4b5 100644 --- a/layouts/_default/search.html +++ b/layouts/_default/search.html @@ -8,7 +8,7 @@ {{ define "main" }} <section class="bg-near-white"> <div class="mw7 center pv4" > - <form action="{{ "search" | absURL }}"> + <form action="{{ .Permalink }}"> <input id="search-query" name="s"/> </form> <div id="search-results"> @@ -20,9 +20,11 @@ <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 } + <p>${snippet}…</p> + + + ${ isset tags }<p><i class="fa fa-tags"></i> Tags: ${tags}</p>${ end } + ${ isset categories }<p><i class="fa fa-bookmark"></i> Categories: ${categories}</p>${ end } </div> </script> {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 2d1cd68..1fab028 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -20,7 +20,8 @@ <footer class="mw7 center ph3 pb2 bt bb cf b--black-50"> {{ with .Params.tags }} <div class="fl-ns w-50-ns mb2"> - <h5 class="f5 ttu black-60">Tagged in</h5> + + <h5 class="f5 ttu black-60"><i class="fa fa-lg fa-tags"></i> Tagged in</h5> {{ range . }} <a class="f5 link br1 ph3 pv2 blue dib hover-bg-light-blue hover-white ba" href="{{ $.Site.LanguagePrefix }}/tags/{{ . | urlize }}/">{{ . }}</a> @@ -29,7 +30,7 @@ {{ end }} <div class="fl-ns w-50-ns mb2"> - <h5 class="f5 ttu black-60">Share in Social Networks</h5> + <h5 class="f5 ttu black-60"><i class="fas fa-lg fa-share-alt"></i> Share in Social Networks</h5> {{ range .Site.Params.sharingOptions }} <a class="f4 link br1 ph3 pv2 blue dib hover-bg-light-blue hover-white ba" target="new" href="{{ printf .url $.Permalink }}"> <i class="fab {{ .icon }}"></i> diff --git a/static/js/search.js b/static/js/search.js index add8549..46627bc 100644 --- a/static/js/search.js +++ b/static/js/search.js @@ -1,108 +1,101 @@ 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} - ] +const fuseOptions = { + shouldSort: true, + includeMatches: true, + threshold: 0.0, + tokenize:true, + location: 0, + distance: 100, + maxPatternLength: 32, + minMatchCharLength: 2, + keys: [ + {name:"title",weight:0.8}, + {name:"contents",weight:0.5}, + {name:"tags",weight:0.3}, + {name:"categories",weight:0.3} + ] }; +const getQueryByParam = param => decodeURIComponent( + (location.search.split(param + '=')[1] || '').split('&')[0] +).replace(/\+/g, ' ') +var searchQuery = getQueryByParam("s"); -var searchQuery = param("s"); if(searchQuery){ - $("#search-query").val(searchQuery); - executeSearch(searchQuery); + $("#search-query").val(searchQuery); + executeSearch(searchQuery); }else { - $('#search-results').append("<p>Please enter a word or phrase above</p>"); + $('#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>"); - } - }); + + fetch("/index.json") + .then(response => response.json()) + .then(data => { + let fuse = new Fuse(data, fuseOptions); + let 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)); - } - }); - } + result.forEach(d => console.log( d) ) - 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(result,function(key,value){ + var contents= value.item.contents; + var snippet = ""; - $.each(snippetHighlights,function(snipkey,snipvalue){ - $("#summary-"+key).mark(snipvalue); - }); + 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); - }); -} + let snippetHighlights=[]; + snippetHighlights.push(searchQuery); + snippetHighlights.forEach(value => $("#summary-"+key).mark(value)); -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],''); + 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]); } - } - 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; + return templateString; } |