Adds files for separate search page

Author: fekete-robert

content/search.md

@@ -0,0 +1,6 @@
+---
+title: Search this site
+type: docs
+---
+
+{{< search-form >}}

layouts/partials/navbar.html

@@ -60,7 +60,6 @@
     </ul>
   </div>
   <div class="navbar-nav d-none d-lg-block">
-    <!-- Comment out navbar search because pagefind handles only one search instance -->
-    <!-- {{ partial "search-input.html" . }} -->
+    {{ partial "search-input.html" . }}
   </div>
 </nav>

layouts/partials/search-input-custom.html

@@ -1,5 +1,7 @@
 {{ if .Site.Params.offlineSearchPagefind }}
-  <div class="search">
-    <div id="search"></div>
+  <div class="main-menu-search pr-2">
+      <a href="/search">
+      <svg width="30" height="31" viewBox="0 0 50 52" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"><path opacity=".945" fill-rule="evenodd" clip-rule="evenodd" d="M45.381 50.122 28.404 33.357l3.1-3.14 16.978 16.765-3.1 3.14Z" fill="#FFFFFF"/><path opacity=".945" fill-rule="evenodd" clip-rule="evenodd" d="M19.372 6.63c-7.63 0-13.77 6.102-13.77 13.57 0 7.469 6.14 13.57 13.77 13.57 7.631 0 13.77-6.102 13.77-13.57S27.003 6.63 19.372 6.63ZM1.19 20.2c0-9.957 8.167-17.982 18.182-17.982 10.016 0 18.182 8.025 18.182 17.982 0 9.958-8.166 17.983-18.182 17.983C9.357 38.183 1.19 30.158 1.19 20.2Z" fill="#FFFFFF"/></svg>
+  </a>
   </div>
-{{ end }}
+{{ end }}

layouts/shortcodes/search-form.html

@@ -0,0 +1,9 @@
+<link href='{{ "/pagefind/pagefind-ui.css" }}' rel="stylesheet">
+<script src='{{ "/pagefind/pagefind-ui.js" }}' defer type="application/x-javascript"></script>
+
+<div id="search"></div>
+<script>
+  window.addEventListener("DOMContentLoaded", (event) => {
+    new PagefindUI({ element: "#search", showSubResults: true, highlightParam: "highlight" });
+  });
+</script>