docs: add search widget to options page

.editorconfig

@@ -14,7 +14,7 @@ indent_style = space
 indent_size = 2
 trim_trailing_whitespace = false
 
-[*.{nix,yml,yaml}]
+[*.{js,nix,yml,yaml}]
 indent_style = space
 indent_size = 2
 tab_width = 2

docs/manual.nix

@@ -62,7 +62,8 @@ in
       # Copy anchor scripts to the script directory in document root.
       cp -vt "$dest"/script \
         ${./static/script}/anchor-min.js \
-        ${./static/script}/anchor-use.js
+        ${./static/script}/anchor-use.js \
+        ${./static/script}/search.js
 
       substituteInPlace ./options.md \
         --subst-var-by OPTIONS_JSON ./config-options.json
@@ -100,6 +101,7 @@ in
         --script highlightjs/loader.js \
         --script script/anchor-use.js \
         --script script/anchor-min.js \
+        --script script/search.js \
         --toc-depth 2 \
         --section-toc-depth 1 \
         manual.md \

docs/static/script/search.js

@@ -0,0 +1,40 @@
+document.addEventListener("DOMContentLoaded", () => {
+  if (!window.location.pathname.endsWith("options.html")) return;
+
+  const searchBar = document.createDocumentFragment();
+  const searchDiv = document.createElement("div");
+  searchDiv.id = "search-bar";
+  searchDiv.innerHTML = `
+    <input type="text" id="search-input" placeholder="Search options by ID..." />
+    <div id="search-results"></div>
+  `;
+  searchBar.appendChild(searchDiv);
+  document.body.prepend(searchDiv);
+
+  const dtElements = Array.from(document.querySelectorAll("dt"));
+  const ddElements = Array.from(document.querySelectorAll("dd"));
+  const dtOptionIds = dtElements.map(
+    (dt) => dt.querySelector("a")?.id.toLowerCase() || "",
+  );
+
+  if (dtElements.length === 0 || ddElements.length === 0) {
+    console.warn("Something went wrong, page may be loaded incorrectly.");
+    return;
+  }
+
+  let debounceTimeout;
+  document.getElementById("search-input").addEventListener("input", (event) => {
+    clearTimeout(debounceTimeout);
+    debounceTimeout = setTimeout(() => {
+      const query = event.target.value.toLowerCase();
+      dtElements.forEach((dt, index) => {
+        const isMatch = dtOptionIds[index].includes(query);
+
+        if (dt.classList.contains("hidden") !== !isMatch) {
+          dt.classList.toggle("hidden", !isMatch);
+          ddElements[index]?.classList.toggle("hidden", !isMatch);
+        }
+      });
+    }, 200);
+  });
+});

docs/static/style.scss

@@ -233,6 +233,24 @@ li {
 	}
 }
 
+#search-bar {
+	position: sticky;
+	top: 0;
+	background: white;
+	padding: 10px;
+	border-bottom: 1px solid #ccc;
+	z-index: 1000;
+}
+#search-input {
+	width: 100%;
+	padding: 8px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+}
+.hidden {
+	display: none;
+}
+
 div.titlepage {
 	margin: 40px 0;