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,27 +1,35 @@
 <header>
     {{- partial "inject/header-before.html" . -}}
-    <div id="titleContainer">
+    <div class="titleAndSearchContainer">
-        <img src='{{ .Site.Params.Logo | default "/img/icon.svg" }}' />
+        <div id="titleContainer">
-        <div>
+            <img src='{{ .Site.Params.Logo | default "/img/icon.svg" }}' />
-            <h1>{{ .Site.Title | default "Ficurinia" }}</h1>
+            <div>
-            <nav>
+                <h1>{{ .Site.Title | default "Ficurinia" }}</h1>
-                <ul>
+                <nav>
-                    <li><a href="/">Home</a></li>
+                    <ul>
-                    <li><a href="/posts">Posts</a></li>
+                        <li><a href="/">Home</a></li>
-                    {{ $pagesDir := .Site.Params.Pages | default (slice "pages") }}
+                        <li><a href="/posts">Posts</a></li>
-                    {{ $pagesList := where .Site.RegularPages "Section" "in" $pagesDir }}
+                        {{ $pagesDir := .Site.Params.Pages | default (slice "pages") }}
-                    {{ range $pagesList }}
+                        {{ $pagesList := where .Site.RegularPages "Section" "in" $pagesDir }}
-                        <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
+                        {{ range $pagesList }}
-                    {{ end }}
+                            <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
-                    {{ if (.Site.Params.showTags | default true) }}
+                        {{ end }}
-                        <li><a href="/tags">Tags</a></li>
+                        {{ if (.Site.Params.showTags | default true) }}
-                    {{ end }}
+                            <li><a href="/tags">Tags</a></li>
-                    {{ if (.Site.Params.enableSearch | default true) }}
+                        {{ end }}
-                        <li><a href="/search">Search</a></li>
+                        {{ if and (.Site.Params.searchMenuLink | default false) (.Site.Params.enableSearch | default true) }}
-                    {{ end }}
+                            <li><a href="/search">Search</a></li>
-                </ul>
+                        {{ end }}
-            </nav>
+                    </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 }}

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>