revert to duckduckgo search if JS is disabled

content/tags/_index.md

@@ -9,15 +9,4 @@ See also: browse by [all games](/games) | [per platform](/platforms) | [the appe
 
 ### Dig Through the Codex
 
-Simply type to begin searching!
-
-<script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
-<div id="search"></div>
-<script>
-    window.addEventListener('DOMContentLoaded', (event) => {
-        new PagefindUI({ element: "#search", resetStyles: false });
-    });
-</script>
-<noscript>
-    ... Sorry, search functionality requires JavaScript to be enabled.
-</noscript>
+{{< search >}}

layouts/shortcodes/search.html

@@ -0,0 +1,25 @@
+<section id="searchbar">
+    <span>Simply type to begin searching!</span>
+
+    <script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
+    <div id="search"></div>
+    <script>
+        window.addEventListener('DOMContentLoaded', (event) => {
+            document.querySelector('#searchbar span').style.display = "block";
+            new PagefindUI({ element: "#search", resetStyles: false });
+    });
+    </script>
+
+    <noscript>
+        <form role="search" method="get" action="https://duckduckgo.com/" id="search">
+            <input type="text" style="width: 80%" name="q" placeholder="Search with DuckDuckGo…">
+            <input type="hidden" name="ia" value="web">
+            <input type="hidden" name="kaj" value="m">
+            <input type="hidden" name="k7" value="w">
+            <input type="hidden" name="k9" value="b">
+            <input type="hidden" name="ks" value="l">
+            <input type="hidden" name="sites" value="{{ $.Site.BaseURL }}">
+            <button type="submit" value="Search">Search</button>
+        </form>
+    </noscript>
+</section>

themes/jefklak-creative-portfolio/assets/sass/_search.sass

@@ -2,6 +2,11 @@
 mark
   filter: invert(100%)
 
+#searchbar
+  span
+    display: none
+    padding-bottom: 0.5em
+
 #search
   input
     width: 100%