Fix search UI + Some improvements

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

content/posts/search.md

@@ -0,0 +1,52 @@
+---
+title: "Search Results"
+sitemap:
+  priority : 0.1
+layout: "search"
+url: search
+---
+
+
+This file exists solely to respond to /search URL with the related `search` layout template.
+
+No content shown here is rendered, all content is based in the template layouts/page/search.html
+
+Setting a very low sitemap priority will tell search engines this is not important content.
+
+This implementation uses Fusejs, jquery and mark.js
+
+
+## Initial setup
+
+Search  depends on additional output content type of JSON in config.toml
+\```
+[outputs]
+  home = ["HTML", "JSON"]
+\```
+
+## Searching additional fileds
+
+To search additional fields defined in front matter, you must add it in 2 places.
+
+### Edit layouts/_default/index.JSON
+This exposes the values in /index.json
+i.e. add `category`
+\```
+...
+  "contents":{{ .Content | plainify | jsonify }}
+  {{ if .Params.tags }},
+  "tags":{{ .Params.tags | jsonify }}{{end}},
+  "categories" : {{ .Params.categories | jsonify }},
+...
+\```
+
+### Edit fuse.js options to Search
+`static/js/search.js`
+\```
+keys: [
+  "title",
+  "contents",
+  "tags",
+  "categories"
+]
+\```

layouts/_default/list.html

@@ -13,6 +13,23 @@
     {{ $blogHome = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) .Type) }}
   {{ end }}
 
+  <section class="sidebar-section" id="sidebar-section">
+    <div class="sidebar-holder">
+      <div class="sidebar" id="sidebar">
+        <form class="mx-auto" method="get" action="{{ "search" | absURL }}">
+          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+        </form>
+        <div class="sidebar-tree">
+          <ul class="tree" id="tree">
+            <li id="list-heading"><a href="{{ .Type | relLangURL }}" data-filter="all">{{ i18n .Type }}</a></li>
+            <div class="subtree">
+                {{ partial "navigators/sidebar.html" (dict "menus" site.Menus.sidebar "ctx" .) }}
+            </div>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
 {{ end }}
 
 {{ define "content" }}

layouts/_default/search.html

@@ -10,9 +10,26 @@
 {{ define "sidebar" }}
   {{ $blogHome:="#" }}
   {{ if site.IsMultiLingual }}
-    {{ $blogHome = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) "posts") }}
+    {{ $blogHome = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) .Type) }}
   {{ end }}
 
+  <section class="sidebar-section" id="sidebar-section">
+    <div class="sidebar-holder">
+      <div class="sidebar" id="sidebar">
+        <form class="mx-auto" method="get" action="{{ "search" | absURL }}">
+          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+        </form>
+        <div class="sidebar-tree">
+          <ul class="tree" id="tree">
+            <li id="list-heading"><a href="{{ .Type | relLangURL }}" data-filter="all">{{ i18n .Type }}</a></li>
+            <div class="subtree">
+                {{ partial "navigators/sidebar.html" (dict "menus" site.Menus.sidebar "ctx" .) }}
+            </div>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
 {{ end }}
 
 {{ define "content" }}
@@ -37,7 +54,7 @@
                   <a href="${link}" class="float-right btn btn-outline-info btn-sm">Read</a>
                 </div>
               </div>
-	    </a>
+	          </a>
           </div>
         </script>
 
@@ -50,5 +67,5 @@
 {{ define "scripts" }}
 <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>
+<script src="{{ "/js/search.js" | absURL }}"></script>
 {{ end }}

layouts/_default/single.html

@@ -12,6 +12,26 @@
     {{ partial "navigators/navbar-2.html" . }}
 {{ end }}
 
+{{ define "sidebar" }}
+  <section class="sidebar-section" id="sidebar-section">
+    <div class="sidebar-holder">
+      <div class="sidebar" id="sidebar">
+        <form class="mx-auto" method="get" action="{{ "search" | absURL }}">
+          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+        </form>
+        <div class="sidebar-tree">
+          <ul class="tree" id="tree">
+            <li id="list-heading"><a href="{{ "/posts" | relLangURL }}" data-filter="all">{{ i18n "posts" }}</a></li>
+            <div class="subtree">
+                {{ partial "navigators/sidebar.html" (dict "menus" site.Menus.sidebar "ctx" .) }}
+            </div>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+{{ end }}
+
 {{ define "content" }}
 <section class="content-section" id="content-section">
   <div class="content">

layouts/partials/navigators/navbar-2.html

@@ -49,18 +49,3 @@
   <img src="{{ $mainLogo  }}" class="d-none" id="main-logo">
   <img src="{{ $invertedLogo  }}" class="d-none" id="inverted-logo">
 </nav>
-  <section class="sidebar-section" id="sidebar-section">
-    <div class="sidebar-holder">
-      <div class="sidebar" id="sidebar">
-        <form method="get" action="{{ "search" | absURL }}"><input type="text" name="s" value="" placeholder="Search" data-search="" id="search-box" /></form>
-        <div class="sidebar-tree">
-          <ul class="tree" id="tree">
-            <li id="list-heading"><a href="{{ .Type | relLangURL }}" data-filter="all">{{ i18n .Type }}</a></li>
-            <div class="subtree">
-                {{ partial "navigators/sidebar.html" (dict "menus" site.Menus.sidebar "ctx" .) }}
-            </div>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </section>

layouts/partials/navigators/navbar.html

@@ -45,7 +45,6 @@
     </button>
 
     <div class="collapse navbar-collapse" id="top-nav-items">
-      <form class="mx-auto" method="get" action="{{ "search" | absURL }}"><input type="text" name="s" value="" placeholder="Search" data-search="" style="width: 175px" id="search-box" /></form>
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
           <a class="nav-link" href="#home">{{ i18n "home" }}</a>

static/js/search.js

@@ -20,7 +20,7 @@ var fuseOptions = {
 };
 
 
-var searchQuery = param("s");
+var searchQuery = param("keyword");
 if(searchQuery){
   $("#search-query").val(searchQuery);
   executeSearch(searchQuery);
@@ -35,7 +35,8 @@ function executeSearch(searchQuery){
     var pages = data;
     var fuse = new Fuse(pages, fuseOptions);
     var result = fuse.search(searchQuery);
-    console.log({"matches":result});
+    // console.log({"matches":result});
+    document.getElementById("search-box").value = searchQuery
     if(result.length > 0){
       populateResults(result);
     }else{