Implement the search bar

Author: deimonn

src/assets/styles/docs.css

@@ -135,6 +135,45 @@ aside > div {
     color: var(--sl-color-primary-700);
 }
 
+.dei-navigation > li > a > p {
+    color: var(--sl-color-neutral-500);
+    font-size: 0.75em;
+    overflow: clip;
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+}
+
+/* Search stuff. */
+.dei-searchflex {
+    display: flex;
+    align-content: center;
+}
+
+.dei-searchflex > sl-spinner {
+    margin: auto;
+    font-size: 3em;
+    --track-width: 4px;
+}
+
+.dei-searchflex > p {
+    color: var(--sl-color-neutral-600);
+    font-style: italic;
+    margin: auto;
+    text-align: center;
+}
+
+.dei-searchhighlight {
+    background-color: var(--sl-color-primary-300);
+}
+
+.dei-searcherror {
+    color: var(--sl-color-danger-700) !important;
+}
+
+.dei-searcherror > sl-icon {
+    font-size: 3em;
+}
+
 /* Document render. */
 .dei-document {
     width: 50%;

src/main.html

@@ -88,6 +88,7 @@
     import "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/components/input/input.js";
     import "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/components/menu-item/menu-item.js";
     import "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/components/menu/menu.js";
+    import "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/components/spinner/spinner.js";
   </script>
 
   <!-- Main code -->

src/main.js

@@ -107,6 +107,239 @@ function setTheme(theme) {
     }
 })();
 
+// Search functionality.
+(function() {
+    // Fetch elements.
+    const searchInput = document.getElementById("dei-searchinput");
+    const navMain = document.getElementById("dei-navmain");
+    const navSearch = document.getElementById("dei-navsearch");
+
+    if (!searchInput | !navMain || !navSearch) {
+        return;
+    }
+
+    // Initialize.
+    const repo = searchInput.dataset.repo;
+
+    let db = null;
+    let dbFetch = false;
+    let search = null;
+
+    // On input change.
+    searchInput.addEventListener("sl-input", async () => {
+        search = searchInput.value.trim();
+
+        // Cleared; show main navigation again, hide search results.
+        if (search === "") {
+            navMain.style = "";
+            navSearch.style = "display: none";
+            return;
+        }
+
+        // Hide main navigation, show search results.
+        navMain.style = "display: none";
+        navSearch.style = "";
+
+        // Load database if not already loaded.
+        if (db === null) {
+            // Don't fetch more than once.
+            if (dbFetch) {
+                return;
+            }
+
+            dbFetch = true;
+
+            // Display spinner.
+            navSearch.innerHTML = /* HTML */ `
+                <div class="dei-searchflex">
+                  <sl-spinner></sl-spinner>
+                </div>
+            `;
+
+            // Download and parse database.
+            const response = await fetch(`/${repo}/db.json`);
+            if (!response.ok) {
+                // Display error on failure.
+                navSearch.innerHTML = /* HTML */ `
+                    <div class="dei-searchflex">
+                      <p class="dei-searcherror">
+                        <sl-icon name="exclamation-octagon"></sl-icon><br>
+                        Failed to download database:<br>
+                        ${response.status} ${response.statusText}
+                      </p>
+                    </div>
+                `;
+
+                // Allow retrying and give up for this attempt.
+                dbFetch = false;
+                return;
+            }
+
+            db = await response.json();
+        }
+
+        // Perform search.
+        const results = [];
+        const terms = search.split(/ /g);
+
+        for (const entry of db) {
+            // Initialize result.
+            let result = {
+                score: 0,
+                titleMatches: [],
+                contentMatches: [],
+                entry
+            };
+
+            // Look for terms.
+            let termsMatched = {};
+            for (let term of terms) {
+                // Ignore terms shorter than 3 characters.
+                if (term.length < 3) {
+                    continue;
+                }
+
+                // Ignore casing.
+                const title = entry.title.toLowerCase();
+                const content = entry.content.toLowerCase();
+
+                term = term.toLowerCase();
+
+                // In title.
+                let match, index = 0;
+                while ((match = title.indexOf(term, index)) != -1) {
+                    // Increase score.
+                    result.score += 5;
+
+                    // Add title match.
+                    const titleMatch = entry.title.substring(
+                        match,
+                        match + term.length
+                    );
+
+                    if (!(titleMatch in result.titleMatches)) {
+                        result.titleMatches.push(titleMatch);
+                    }
+
+                    // Mark term as matched.
+                    termsMatched[term] = true;
+
+                    index = match + term.length;
+                }
+
+                // In content.
+                index = 0;
+                while ((match = content.indexOf(term, index)) != -1) {
+                    // Increase core.
+                    result.score++;
+
+                    // Add content match.
+                    const contentMatch = entry.content.substring(
+                        match,
+                        match + term.length
+                    );
+
+                    if (!(contentMatch in result.contentMatches)) {
+                        result.contentMatches.push(contentMatch);
+                    }
+
+                    termsMatched[term] = true;
+
+                    index = match + term.length;
+                }
+            }
+
+            // Multiply score based on number of unique terms that were matched.
+            result.score *= Object.entries(termsMatched).length;
+
+            // Result has at least some score; push.
+            if (result.score) {
+                results.push(result);
+            }
+        }
+
+        // Sort by score.
+        results.sort((lhs, rhs) => rhs.score - lhs.score);
+
+        // No results.
+        if (results.length === 0) {
+            navSearch.innerHTML = /* HTML */ `
+                <div class="dei-searchflex">
+                  <p>Search found no results</p>
+                </div>
+            `;
+
+            return;
+        }
+
+        // Otherwise generate result HTML.
+        navSearch.innerHTML = "";
+
+        for (let result of results) {
+            const entry = result.entry;
+
+            let title = entry.title;
+            let preview = entry.content;
+
+            // Mark title matches.
+            for (const match of result.titleMatches) {
+                title = title.replaceAll(match, `\x1B\x0B${match}\x1B\x0C`);
+            }
+
+            // Mark content matches.
+            for (const match of result.contentMatches) {
+                preview = preview.replaceAll(match, `\x1B\x0B${match}\x1B\x0C`);
+            }
+
+            // Limit preview to three highlighted lines.
+            let lines = 0;
+
+            preview = preview
+                .split(/\n/g)
+                .filter((x) => {
+                    if (lines >= 3) {
+                        return false;
+                    }
+
+                    if (x.includes("\x1B")) {
+                        lines++;
+                        return true;
+                    }
+
+                    return false;
+                })
+                .join("\n");
+
+            // Escape content HTML.
+            preview = preview
+                .replaceAll("&",  "&amp;")
+                .replaceAll("<",  "&lt;")
+                .replaceAll(">",  "&gt;")
+                .replaceAll("\"", "&quot;")
+                .replaceAll("'",  "&#39;");
+
+            // Perform replacements.
+            title = title
+                .replaceAll("\x1B\x0B", `<span class="dei-searchhighlight">`)
+                .replaceAll("\x1B\x0C", `</span>`);
+            preview = preview
+                .replaceAll("\x1B\x0B", `<span class="dei-searchhighlight">`)
+                .replaceAll("\x1B\x0C", `</span>`)
+                .replaceAll("\n", "<br>");
+
+            // Append HTML.
+            navSearch.innerHTML += /* HTML */ `
+                <li>
+                  <a href="${entry.href}">
+                    ${title}
+                    <p>${preview}</p>
+                  </a>
+                </li>
+            `;
+        }
+    });
+})();
+
 // Scroll to current page in navigation when present.
 window.addEventListener("load", () => {
     // Fetch current page in navigation; do nothing if there's none.

src/templates/docs.html

@@ -24,14 +24,15 @@
     </div>
 
     <!-- Search -->
-    <sl-input placeholder="Search" clearable pill disabled> <!-- TODO: implement -->
+    <sl-input id="dei-searchinput" placeholder="Search" data-repo="${DOCS_REPO}" clearable pill>
       <sl-icon name="search" slot="prefix"></sl-icon>
     </sl-input>
 
     <!-- Navigation -->
-    <ul class="dei-navigation">
+    <ul id="dei-navmain" class="dei-navigation">
       ${DOCS_NAVHTML}
     </ul>
+    <ul id="dei-navsearch" class="dei-navigation" style="display: none"></ul>
   </aside>
 
   <sl-button id="dei-openaside" class="dei-openaside" pill>