fix: index setup, styling fixes

quartz/components/scripts/search.inline.ts

@@ -128,6 +128,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 
   const data = await fetchData
   const container = document.getElementById("search-container")
+  const searchSpace = document.getElementById("search-space")
   const sidebar = container?.closest(".sidebar") as HTMLElement
   const searchIcon = document.getElementById("search-icon")
   const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
@@ -170,7 +171,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       removeAllChildren(preview)
     }
     if (searchLayout) {
-      searchLayout.style.opacity = "0"
+      searchLayout.style.visibility = "hidden"
     }
 
     searchType = "basic" // reset search type after closing
@@ -449,11 +450,11 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     currentSearchTerm = (e.target as HTMLInputElement).value
 
     if (searchLayout) {
-      searchLayout.style.opacity = "1"
+      searchLayout.style.visibility = "visible"
     }
 
     if (term === "" && searchLayout) {
-      searchLayout.style.opacity = "0"
+      searchLayout.style.visibility = "hidden"
     }
 
     if (term.toLowerCase().startsWith("#")) {
@@ -503,9 +504,17 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   searchBar?.addEventListener("input", onType)
   window.addCleanup(() => searchBar?.removeEventListener("input", onType))
 
-  // setup index if it hasn't been already
-  if (!index) {
-    index = new FlexSearch.Document({
+  index ??= await fillDocument(data)
+  registerEscapeHandler(searchSpace, hideSearch)
+})
+
+/**
+ * Fills flexsearch document with data
+ * @param index index to fill
+ * @param data data to fill index with
+ */
+async function fillDocument(data: { [key: FullSlug]: ContentDetails }) {
+  const index = new FlexSearch.Document<Item>({
     charset: "latin:extra",
     encode: encoder,
     document: {
@@ -526,20 +535,6 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       ],
     },
   })
-
-    fillDocument(index, data)
-  }
-
-  // register handlers
-  registerEscapeHandler(container, hideSearch)
-})
-
-/**
- * Fills flexsearch document with data
- * @param index index to fill
- * @param data data to fill index with
- */
-async function fillDocument(index: FlexSearch.Document<Item, false>, data: any) {
   let id = 0
   for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
     await index.addAsync(id++, {
@@ -550,4 +545,6 @@ async function fillDocument(index: FlexSearch.Document<Item, false>, data: any)
       tags: fileData.tags,
     })
   }
+
+  return index
 }

quartz/components/styles/search.scss

@@ -85,7 +85,7 @@
       & > #search-layout {
         display: flex;
         flex-direction: row;
-        opacity: 0;
+        visibility: hidden;
         border: 1px solid var(--lightgray);
 
         & > div {

quartz/plugins/emitters/contentIndex.ts

@@ -5,7 +5,6 @@ import { escapeHTML } from "../../util/escape"
 import { FilePath, FullSlug, SimpleSlug, joinSegments, simplifySlug } from "../../util/path"
 import { QuartzEmitterPlugin } from "../types"
 import { toHtml } from "hast-util-to-html"
-import path from "path"
 import { write } from "./helpers"
 
 export type ContentIndex = Map<FullSlug, ContentDetails>