From c7ec14c266e443ea7c455ca9a3dd10ba743c4752 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=93scar=20N=C3=A1jera?= <hello@oscarnajera.com>
Date: Sun, 15 Jul 2018 22:43:02 +0200
Subject: review of search

---
 layouts/_default/baseof.html |   2 +
 layouts/_default/search.html |  10 +--
 layouts/_default/single.html |   5 +-
 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}&hellip;</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;
 }
-- 
cgit v1.2.3