fix: index setup, styling fixes

Jacky Zhao

2024-02-02 45b93a80f4538b43bf71993d05902308db786051

fix: index setup, styling fixes

 quartz/components/scripts/search.inline.ts

@@ -128,6 +128,7 @@

  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 @@
      removeAllChildren(preview)
    }
    if (searchLayout) {
      searchLayout.style.opacity = "0"
      searchLayout.style.visibility = "hidden"
    }

    searchType = "basic" // reset search type after closing
@@ -449,11 +450,11 @@
    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,35 +504,8 @@
  searchBar?.addEventListener("input", onType)
  window.addCleanup(() => searchBar?.removeEventListener("input", onType))

  // setup index if it hasn't been already
  if (!index) {
    index = new FlexSearch.Document({
      charset: "latin:extra",
      encode: encoder,
      document: {
        id: "id",
        index: [
          {
            field: "title",
            tokenize: "forward",
          },
          {
            field: "content",
            tokenize: "forward",
          },
          {
            field: "tags",
            tokenize: "forward",
          },
        ],
      },
    })

    fillDocument(index, data)
  }

  // register handlers
  registerEscapeHandler(container, hideSearch)
  index ??= await fillDocument(data)
  registerEscapeHandler(searchSpace, hideSearch)
})

/**
@@ -539,7 +513,28 @@
 * @param index index to fill
 * @param data data to fill index with
 */
async function fillDocument(index: FlexSearch.Document<Item, false>, data: any) {
async function fillDocument(data: { [key: FullSlug]: ContentDetails }) {
  const index = new FlexSearch.Document<Item>({
    charset: "latin:extra",
    encode: encoder,
    document: {
      id: "id",
      index: [
        {
          field: "title",
          tokenize: "forward",
        },
        {
          field: "content",
          tokenize: "forward",
        },
        {
          field: "tags",
          tokenize: "forward",
        },
      ],
    },
  })
  let id = 0
  for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
    await index.addAsync(id++, {
@@ -550,4 +545,6 @@
      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 { 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>