refined searchbar; added options to use a global searchbar or a search link in the menu

README.md

@@ -45,6 +45,8 @@ summaryLength = 70  # number of words for article summaries
     highlightBgColor = "#34363b";  # card and circle navigation background color for discrete card mode
 
     enableSearch = true  # enable search page
+    searchbarEverywhere = true  # if the searchbar should be shown in every page; requires enableSearch
+    searchMenuLink = false  # add a search link to the navigation menu; requires enableSearch
 
     # enable comments support with commento using the script from your server
     commento = "https://example.com/js/commento.js"

assets/scss/style.scss

@@ -341,6 +341,7 @@ ul.list {
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: center;
+    margin: 12px 0;
     .nerdlink {
         display: inline-block;
         cursor: pointer;
@@ -359,3 +360,13 @@ ul.list {
         outline: none;
     }
 }
+
+.titleAndSearchContainer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .search {
+        &, #searchbar {font-size: 1em;}
+    }
+}

layouts/_default/search.html

@@ -2,10 +2,7 @@
 <noscript>
     You need to enable JavaScript to be able to search.
 </noscript>
-<div class="search">
+{{- partial "searchbar.html" . -}}
-    <input id="searchbar" type="text" placeholder="{{ .Title }}" />
-    <a class="nerdlink" onclick="newSearch();">&#xf002;</a>
-</div>
 <div class="postlist {{ if .Site.Params.gridView }}gridView{{ end }}" id="postlist">
 </div>
 {{- partial "js_paginator.html" . -}}
@@ -43,9 +40,5 @@
             performSearch(searchTerm);
         }
     }
-    function newSearch() {
-        location.href = baseUrl+`?q=${searchbar.value}`;
-    }
-    searchbar.onkeyup = (ev) => {if (ev.keyCode == 13) newSearch()};
 </script>
 {{ end }}

layouts/partials/header.html

@@ -1,5 +1,6 @@
 <header>
     {{- partial "inject/header-before.html" . -}}
+    <div class="titleAndSearchContainer">
         <div id="titleContainer">
             <img src='{{ .Site.Params.Logo | default "/img/icon.svg" }}' />
             <div>
@@ -16,13 +17,20 @@
                         {{ if (.Site.Params.showTags | default true) }}
                             <li><a href="/tags">Tags</a></li>
                         {{ end }}
-                    {{ if (.Site.Params.enableSearch | default true) }}
+                        {{ if and (.Site.Params.searchMenuLink | default false) (.Site.Params.enableSearch | default true) }}
                             <li><a href="/search">Search</a></li>
                         {{ end }}
                     </ul>
                 </nav>
             </div>
         </div>
+        {{ if and (.Site.Params.searchbarEverywhere | default true) (and (.Site.Params.enableSearch | default true) (not (eq .Title "Search"))) }}
+            {{- partial "searchbar.html" . -}}
+            <script>
+                document.getElementById('searchbar').
+            </script>
+        {{ end }}
+    </div>
     <div id="links">
         {{ if .Site.Params.showRss | default true }}
             {{- partial "nerdlink" (slice "RSS" "/index.xml") -}}

layouts/partials/searchbar.html

@@ -0,0 +1,12 @@
+<div class="search">
+    <input id="searchbar" type="text" placeholder="Search" />
+    <a class="nerdlink" onclick="newSearch();">&#xf002;</a>
+</div>
+<script>
+    function newSearch() {
+        let term = searchbar.value.trim();
+        if (!term) return;
+        location.href = `/search?q=${term}`;
+    }
+    searchbar.onkeyup = (ev) => {if (ev.keyCode == 13) newSearch()};
+</script>