Testing new searchnew-search

4 files changed, 132 insertions, 28 deletions

diff --git a/layouts/_default/index.json b/layouts/_default/index.json
new file mode 100644
index 0000000..c93f805
--- /dev/null
+++ b/layouts/_default/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/layouts/_default/terms.html b/layouts/_default/terms.html
index 19723a5..b49ee7c 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -3,36 +3,27 @@
   {{ partial "header.html" . }}
   <div class="post p2 p-responsive wrap" role="main">
     <div class="measure">
+      <div>
+        <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" | absURL }}"></script>
 
-  <div>
-   {{ $baseurl := .Site.BaseURL }}
-   {{ if eq .URL "/search/" }}
-<link rel="stylesheet" type="text/css" href="{{ $baseurl }}/tipuesearch/tipuesearch.css">
-<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
-<script type="text/javascript" src="{{ $baseurl }}/tipuesearch/tipuesearch_set.js"></script>
-<script type="text/javascript" src="{{ $baseurl }}/tipuesearch/tipuesearch.min.js"></script>
-<script>
-$(document).ready(function() {
-     $('#tipue_search_input').tipuesearch({
-         'mode' : 'json',
-         'show': 10,
-         'newWindow': true,
-         'contentLocation': '{{ $baseurl }}/tipuesearch_content.json'
-     });
-});
-</script>
-    <div class="span8 offset2">
-        <div id="tipue_search_content"><div id="tipue_search_loading"></div></div>
+  <div class="my-auto" >
+    <div id="search-results">
     </div>
-   {{ else }}
-   <h3 id="title">{{ .Title }}</h3>
-   {{ $data := .Data }}
-    {{ range $key,$value := .Data.Terms.ByCount }}
-    <a href="{{ $baseurl }}/{{ $data.Plural }}/{{ $value.Name | urlize }}"> {{ $value.Name }} </a> {{ $value.Count }} <br>
-    {{ end }}
-    {{ end }}
   </div>
+<!-- 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>
 
+      </div>
     </div>
   </div>
 </div>
diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
index 8ba1dc0..989c0f6 100644
--- a/layouts/partials/navigation.html
+++ b/layouts/partials/navigation.html
@@ -9,8 +9,8 @@
 {{- end -}}
 {{- end -}}
 {{ if isset .Site.Params "search_engine" }}
-<form class="navbar-search" action="{{ .Site.BaseURL }}/search/index.html"
+<form class="navbar-search" action="{{ .Site.BaseURL }}/search/"
     onsubmit="return validateForm(this.elements['q'].value);">
-    <input type="text" class="search-query" placeholder="{{ i18n "search" }}" name="q" id="tipue_search_input">
+    <input type="text" class="search-query" placeholder="{{ i18n "search" }}" name="s">
 {{ end }}
 </form>
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;
+}