Jacky Zhao
2024-02-02 5ab922f3163a53418cb7d1c72cf7546c848159bc
quartz/components/scripts/search.inline.ts
@@ -15,10 +15,30 @@
type SearchType = "basic" | "tags"
let searchType: SearchType = "basic"
let currentSearchTerm: string = ""
let index: FlexSearch.Document<Item> | undefined = undefined
const p = new DOMParser()
const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
let 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",
      },
    ],
  },
})
const p = new DOMParser()
const fetchContentCache: Map<FullSlug, Element[]> = new Map()
const contextWindowWords = 30
const numSearchResults = 8
@@ -81,10 +101,10 @@
  }`
}
function highlightHTML(searchTerm: string, innerHTML: string) {
function highlightHTML(searchTerm: string, el: HTMLElement) {
  const p = new DOMParser()
  const tokenizedTerms = tokenizeTerm(searchTerm)
  const html = p.parseFromString(innerHTML, "text/html")
  const html = p.parseFromString(el.innerHTML, "text/html")
  const createHighlightSpan = (text: string) => {
    const span = document.createElement("span")
@@ -389,7 +409,7 @@
    previewInner = document.createElement("div")
    previewInner.classList.add("preview-inner")
    const innerDiv = await fetchContent(slug).then((contents) =>
      contents.map((el) => highlightHTML(currentSearchTerm, el.innerHTML)),
      contents.flatMap((el) => [...highlightHTML(currentSearchTerm, el as HTMLElement).children]),
    )
    previewInner.append(...innerDiv)
    preview.replaceChildren(previewInner)
@@ -444,8 +464,8 @@
  searchBar?.addEventListener("input", onType)
  window.addCleanup(() => searchBar?.removeEventListener("input", onType))
  index ??= await fillDocument(data)
  registerEscapeHandler(container, hideSearch)
  await fillDocument(data)
})
/**
@@ -454,37 +474,19 @@
 * @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: {
      id: "id",
      index: [
        {
          field: "title",
          tokenize: "forward",
        },
        {
          field: "content",
          tokenize: "forward",
        },
        {
          field: "tags",
          tokenize: "forward",
        },
      ],
    },
  })
  let id = 0
  const promises: Array<Promise<unknown>> = []
  for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
    await index.addAsync(id++, {
      id,
      slug: slug as FullSlug,
      title: fileData.title,
      content: fileData.content,
      tags: fileData.tags,
    })
    promises.push(
      index.addAsync(id++, {
        id,
        slug: slug as FullSlug,
        title: fileData.title,
        content: fileData.content,
        tags: fileData.tags,
      }),
    )
  }
  return index
  return await Promise.all(promises)
}