Add search functionality

public/index.html

@@ -17,11 +17,16 @@
     </div>
 </div>
 {{- else -}}
-<div class="toc">
+<div class="home-main">
+    <input type="text" id="search-box" placeholder="search">
+    <div id="search-results" class="hidden"></div>
+    <div class="toc" id="toc">
     {{- range .TOC -}}
         <div><a href="{{ . }}">{{ . }}</a></div>
     {{- end -}}
     </div>
+</div>
+<script src="/static/search.js"></script>
 {{- end}}
 </body>
 </html>

public/static/search.js

@@ -0,0 +1,45 @@
+(() => {
+    let searchBox = document.getElementById("search-box");
+    let searchResults = document.getElementById("search-results");
+    let toc = document.getElementById("toc");
+
+    /**
+     * @param {string} results
+     */
+    function updateSearchResults(results) {
+        if (results.length > 0) {
+            searchResults.innerHTML = "";
+            for (let i = 0; i < results.length; i++) {
+                let resultElem = document.createElement("div");
+                let resultAnchor = document.createElement("a");
+                resultAnchor.href = results[i]; // we should be at /, so this is right
+                resultAnchor.innerText = results[i];
+                resultElem.appendChild(resultAnchor);
+                searchResults.appendChild(resultElem);
+            }
+            toc.classList.add("hidden");
+            searchResults.classList.remove("hidden");
+        } else {
+            toc.classList.remove("hidden");
+            searchResults.classList.add("hidden");
+        }
+    }
+
+    async function handleSearchInput() {
+        // get search query
+        const query = searchBox.value;
+        if (query == "") {
+            updateSearchResults([]);
+            return
+        }
+        // make request
+        const response = await fetch("/search/" + query);
+        if (!response.ok) {
+            throw new Error("Couldn't search, status code ", response.status);
+        }
+        let result = await response.text();
+        updateSearchResults(result.split('\n'));
+    }
+
+    searchBox.addEventListener("input", handleSearchInput);
+})();

public/static/style.css

@@ -7,10 +7,11 @@ body {
     width: 100vw;
     font-family: sans-serif;
 }
-a:hover { text-decoration: underline; }
+a:hover, a:focus { text-decoration: underline; }
 a {
     color: black;
     text-decoration: none;
+    outline: none;
 }
 
 .homebtn {
@@ -36,16 +37,34 @@ a {
 }
 .content { white-space: pre-line; }
 
-.toc {
-    box-sizing: border-box;
-    padding: 2rem;
+.home-main {
     width: 100%;
+    padding: 2rem;
+    box-sizing: border-box;
+    gap: 1rem;
+}
+.home-main, .toc, #search-results {
+    display: flex;
+    flex-direction: column;
+}
+.toc, #search-results, #search-box { padding: 0 .2rem; }
+.toc, #search-results { gap: .2rem; }
+#search-box {
+    width: 100%;
+    border: none;
+    outline: none;
+    border-bottom: 1px solid #00000040;
+    height: 2rem;
+    font-size: 1rem;
+}
+#search-box:active, #search-box:focus, #search-box:hover {
+    border-bottom: 1px solid black;
 }
 
+.hidden { display: none !important; }
+
 @media only screen and (max-width: 750px) {
-    .main {
-        margin-top: 4rem;
-    }
+    .main { margin-top: 4rem; }
     .main > h1, .content {
         width: 90vw;
         max-width: unset;