docs: move inline style options to the scss stylesheet

WIP

configuration.nix

@@ -1,7 +1,3 @@
-# This is the sample configuration for nvf, aiming to give you a feel of the default options
-# while certain plugins are enabled. While it may act as one, this is not an overview of nvf's
-# module options. To find a complete overview of nvf's options and examples, visit the manual.
-# https://notashelf.github.io/nvf/options.html
 isMaximal: {
   config.vim = {
     viAlias = true;
@@ -35,60 +31,54 @@ isMaximal: {
       };
     };
 
-    # This section does not include a comprehensive list of available language modules.
-    # To list all available language module options, please visit the nvf manual.
     languages = {
       enableLSP = true;
       enableFormat = true;
       enableTreesitter = true;
       enableExtraDiagnostics = true;
 
-      # Languages that will be supported in default and maximal configurations.
-      nix.enable = true;
-      markdown.enable = true;
-
-      # Languages that are enabled in the maximal configuration.
-      bash.enable = isMaximal;
-      clang.enable = isMaximal;
-      css.enable = isMaximal;
-      html.enable = isMaximal;
-      sql.enable = isMaximal;
-      java.enable = isMaximal;
-      kotlin.enable = isMaximal;
-      ts.enable = isMaximal;
-      go.enable = isMaximal;
-      lua.enable = isMaximal;
-      zig.enable = isMaximal;
-      python.enable = isMaximal;
-      typst.enable = isMaximal;
-      rust = {
-        enable = isMaximal;
-        crates.enable = isMaximal;
-      };
-
-      # Language modules that are not as common.
-      assembly.enable = false;
-      astro.enable = false;
-      nu.enable = false;
-      csharp.enable = false;
-      julia.enable = false;
-      vala.enable = false;
-      scala.enable = false;
-      r.enable = false;
-      gleam.enable = false;
-      dart.enable = false;
-      ocaml.enable = false;
-      elixir.enable = false;
-
-      tailwind.enable = false;
-      svelte.enable = false;
-
       # Nim LSP is broken on Darwin and therefore
       # should be disabled by default. Users may still enable
       # `vim.languages.vim` to enable it, this does not restrict
       # that.
       # See: <https://github.com/PMunch/nimlsp/issues/178#issue-2128106096>
       nim.enable = false;
+
+      nix.enable = true;
+
+      # Assembly is not common, and the asm LSP is a major hit-or-miss
+      assembly.enable = false;
+      astro.enable = false;
+      markdown.enable = isMaximal;
+      html.enable = isMaximal;
+      css.enable = isMaximal;
+      sql.enable = isMaximal;
+      java.enable = isMaximal;
+      kotlin.enable = isMaximal;
+      ts.enable = isMaximal;
+      svelte.enable = isMaximal;
+      go.enable = isMaximal;
+      lua.enable = isMaximal;
+      elixir.enable = isMaximal;
+      zig.enable = isMaximal;
+      ocaml.enable = isMaximal;
+      python.enable = isMaximal;
+      dart.enable = isMaximal;
+      bash.enable = isMaximal;
+      gleam.enable = false;
+      r.enable = isMaximal;
+      tailwind.enable = isMaximal;
+      typst.enable = isMaximal;
+      clang.enable = isMaximal;
+      scala.enable = isMaximal;
+      rust = {
+        enable = isMaximal;
+        crates.enable = isMaximal;
+      };
+      csharp.enable = isMaximal;
+      julia.enable = isMaximal;
+      vala.enable = isMaximal;
+      nu.enable = false;
     };
 
     visuals = {

docs/static/script/search.js

@@ -2,38 +2,124 @@ document.addEventListener("DOMContentLoaded", () => {
 	// The search widget should only be visible if we're in the options page. Else, we
 	// want it hidden.
 	if (window.location.pathname.endsWith("options.html")) {
+		console.log("Running script on options.html");
+
+		// Static
 		const searchBar = document.createElement("div");
 		searchBar.id = "search-bar";
 		searchBar.innerHTML = `
-      <input type="text" id="search-input" placeholder="Search options by ID..." />
-      <div id="search-results"></div>
+      <input type="text" id="search-input" placeholder="Search options by name..." disabled />
     `;
-
 		document.body.prepend(searchBar);
 
-		const dtElements = document.querySelectorAll("dt");
-		const ddElements = document.querySelectorAll("dd");
+		// Floating
+		const searchPopup = document.createElement("div");
+		searchPopup.id = "search-popup";
+		searchPopup.innerHTML = `
+		<div id="search-popup-content">
+			<input type="text" id="search-input-popup" placeholder="Search options..." />
+			<ul id="search-results-list"></ul>
+		</div
+    `;
+		searchPopup.classList.add("hidden");
+		document.body.appendChild(searchPopup);
 
-		if (dtElements.length === 0 || ddElements.length === 0) {
-			console.warn(
-				"No <dt> or <dd> elements found. Ensure your HTML contains the correct structure.",
+		// Focus the input on pop-up widget
+		searchBar.addEventListener("click", (event) => {
+			event.stopPropagation(); // also cancel clicks to get rid of that annoying cursor flicker
+			console.log("Search bar clicked!");
+
+			// Visibility
+			if (searchPopup.style.display === "block") {
+				searchPopup.style.display = "none";
+			} else {
+				searchPopup.style.display = "block";
+				document.getElementById("search-input-popup").focus();
+			}
+		});
+
+		// Ctrl+K opens the floating search widget
+		document.addEventListener("keydown", (event) => {
+			if (event.ctrlKey && event.key === "k") {
+				event.preventDefault();
+				console.log("Ctrl+K pressed!");
+				searchPopup.style.display = "block";
+				document.getElementById("search-input-popup").focus();
+			}
+		});
+
+		// Close the popup when clicking outside
+		document.addEventListener("click", (event) => {
+			if (
+				!searchPopup.contains(event.target) &&
+				event.target !== searchBar
+			) {
+				console.log("Click outside, hiding popup");
+				searchPopup.style.display = "none";
+			}
+		});
+
+		// Close the popup with Esc key
+		document.addEventListener("keydown", (event) => {
+			if (event.key === "Escape") {
+				console.log("Escape pressed!");
+				searchPopup.style.display = "none";
+			}
+		});
+
+		// Handle input
+		const searchInput = document.getElementById("search-input-popup");
+		const searchResultsList = document.getElementById(
+			"search-results-list",
 		);
-		}
+		const codeElements = document.querySelectorAll("code.option");
 
-		// handle input and filter visible options
-		document
-			.getElementById("search-input")
-			.addEventListener("input", (event) => {
+		searchInput.addEventListener("input", (event) => {
 			const query = event.target.value.toLowerCase();
-				dtElements.forEach((dt, index) => {
-					const optionId =
-						dt.querySelector("a")?.id.toLowerCase() || "";
-					const isMatch = optionId.includes(query);
+			searchResultsList.innerHTML = ""; // clear previous
 
-					// toggle visibility based on the query match
-					dt.classList.toggle("hidden", !isMatch);
-					ddElements[index]?.classList.toggle("hidden", !isMatch);
+			// Find matching
+			const matchingOptions = [];
+			codeElements.forEach((code) => {
+				const optionText = code.textContent;
+				if (optionText.toLowerCase().includes(query)) {
+					// Search should be case-insensitive, since chances are
+					// the user doesn't *actually* know what they're looking for.
+					const anchorId = code.closest("a").id;
+					matchingOptions.push({ text: optionText, id: anchorId });
+				}
 			});
+
+			// Limit the number of visible entries (e.g., show max 10 matches)
+			const maxVisibleResults = 10;
+			const resultsToShow = matchingOptions.slice(0, maxVisibleResults);
+
+			// Display matching
+			resultsToShow.forEach(({ text, id }) => {
+				const li = document.createElement("li");
+				li.textContent = text;
+				li.addEventListener("click", () => {
+					// Update the hash to the option name with a prefix
+					// e.g., #vim.enableEditorconfig -> #opt-vim.enableEditorconfig
+					const optionId = `opt-${text}`;
+					window.location.hash = `#${optionId}`;
+					searchPopup.style.display = "none";
+
+					const element = document.getElementById(id);
+					if (element) {
+						element.scrollIntoView({ behavior: "smooth" }); // doesn't really scroll very smoothly
+					}
+				});
+				searchResultsList.appendChild(li);
+			});
+
+			// If there are items > maxVisibleResults, show a "See More" option
+			if (matchingOptions.length > maxVisibleResults) {
+				const li = document.createElement("li");
+				li.textContent = `${matchingOptions.length - maxVisibleResults} more results...\nNarrow down your query to see them.`;
+				li.style.fontStyle = "italic";
+				searchResultsList.appendChild(li);
+			}
 		});
 	}
 });

docs/static/style.scss

@@ -61,6 +61,71 @@ $color-blue-900: #1e3a8a;
 	}
 }
 
+#search-bar {
+	position: sticky;
+	top: 0;
+	background: white;
+	padding: 10px;
+	border-bottom: 1px solid $color-gray-700;
+	z-index: 1000;
+	cursor: pointer;
+
+	@media (prefers-color-scheme: dark) {
+		background: $color-gray-900;
+		color: $color-gray-50;
+	}
+}
+
+#search-popup {
+	position: fixed;
+	top: 25%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background: #fff;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	padding: 20px;
+	width: 450px;
+	max-height: 400px; /* Limit the height of the popup */
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	z-index: 1001;
+	display: none; /* Initially hidden */
+	overflow: hidden;
+}
+
+#search-popup-content {
+	display: flex;
+	flex-direction: column;
+}
+
+#search-input-popup {
+	padding: 8px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	margin-bottom: 10px;
+}
+
+#search-results-list {
+	list-style-type: none;
+	padding: 0;
+	max-height: 300px; /* Limit the number of visible entries */
+	overflow-y: auto; /* Make it scrollable */
+}
+
+#search-results-list li {
+	margin: 5px 0;
+	cursor: pointer;
+	padding: 5px;
+}
+
+#search-results-list li:hover {
+	background-color: #f0f0f0;
+}
+
+.hidden {
+	display: none;
+}
+
 body {
 	background: white;
 	color: $color-gray-900;