fix: border radius on search preview

Jacky Zhao

2024-02-02 e9fb0ecb96a2de53cf5f060c4e151f539ca4b089

 quartz/components/scripts/search.inline.ts

@@ -11,23 +11,34 @@
  tags: string[]
}

let index: FlexSearch.Document<Item> | undefined = undefined

// Can be expanded with things like "term" in the future
type SearchType = "basic" | "tags"

// Current searchType
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])/)

const fetchContentCache: Map<FullSlug, Element[]> = new Map()
const contextWindowWords = 30
const numSearchResults = 8
const numTagResults = 5

const tokenizeTerm = (term: string) => {
  const tokens = term.split(/\s+/).filter((t) => t.trim() !== "")

  const tokenLen = tokens.length
  if (tokenLen > 1) {
    for (let i = 1; i < tokenLen; i++) {
      tokens.push(tokens.slice(0, i + 1).join(" "))
    }
  }

  return tokens.sort((a, b) => b.length - a.length) // always highlight longest terms first
}

function highlight(searchTerm: string, text: string, trim?: boolean) {
  // try to highlight longest tokens first
  const tokenizedTerms = searchTerm
    .split(/\s+/)
    .filter((t) => t !== "")
    .sort((a, b) => b.length - a.length)
  const tokenizedTerms = tokenizeTerm(searchTerm)
  let tokenizedText = text.split(/\s+/).filter((t) => t !== "")

  let startIndex = 0
@@ -71,11 +82,46 @@
  }`
}

const p = new DOMParser()
const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
let prevShortcutHandler: ((e: HTMLElementEventMap["keydown"]) => void) | undefined = undefined
function highlightHTML(searchTerm: string, el: HTMLElement) {
  const p = new DOMParser()
  const tokenizedTerms = tokenizeTerm(searchTerm)
  const html = p.parseFromString(el.innerHTML, "text/html")

const fetchContentCache: Map<FullSlug, Element[]> = new Map()
  const createHighlightSpan = (text: string) => {
    const span = document.createElement("span")
    span.className = "highlight"
    span.textContent = text
    return span
  }

  const highlightTextNodes = (node: Node, term: string) => {
    if (node.nodeType === Node.TEXT_NODE) {
      const nodeText = node.nodeValue ?? ""
      const regex = new RegExp(term.toLowerCase(), "gi")
      const matches = nodeText.match(regex)
      if (!matches || matches.length === 0) return
      const spanContainer = document.createElement("span")
      let lastIndex = 0
      for (const match of matches) {
        const matchIndex = nodeText.indexOf(match, lastIndex)
        spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex, matchIndex)))
        spanContainer.appendChild(createHighlightSpan(match))
        lastIndex = matchIndex + match.length
      }
      spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex)))
      node.parentNode?.replaceChild(spanContainer, node)
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      if ((node as HTMLElement).classList.contains("highlight")) return
      Array.from(node.childNodes).forEach((child) => highlightTextNodes(child, term))
    }
  }

  for (const term of tokenizedTerms) {
    highlightTextNodes(html.body, term)
  }

  return html.body
}

document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
  const currentSlug = e.detail.url
@@ -96,15 +142,16 @@

  const enablePreview = searchLayout?.dataset?.preview === "true"
  let preview: HTMLDivElement | undefined = undefined
  let previewInner: HTMLDivElement | undefined = undefined
  const results = document.createElement("div")
  results.id = "results-container"
  results.style.flexBasis = enablePreview ? "30%" : "100%"
  results.style.flexBasis = enablePreview ? "min(30%, 450px)" : "100%"
  appendLayout(results)

  if (enablePreview) {
    preview = document.createElement("div")
    preview.id = "preview-container"
    preview.style.flexBasis = "70%"
    preview.style.flexBasis = "100%"
    appendLayout(preview)
  }

@@ -191,7 +238,7 @@
      e.preventDefault()
      // The results should already been focused, so we need to find the next one.
      // The activeElement is the search bar, so we need to find the first result and focus it.
      if (!results?.contains(document.activeElement)) {
      if (document.activeElement === searchBar || currentHover !== null) {
        const firstResult = currentHover
          ? currentHover
          : (document.getElementsByClassName("result-card")[0] as HTMLInputElement | null)
@@ -351,6 +398,7 @@
        removeAllChildren(preview as HTMLElement)
      } else {
        firstChild.classList.add("focus")
        currentHover = firstChild as HTMLInputElement
        await displayPreview(firstChild)
      }
    }
@@ -384,22 +432,30 @@
    el.classList.add("focus")

    removeAllChildren(preview as HTMLElement)
    const contentDetails = await fetchContent(slug)

    const previewInner = document.createElement("div")
    previewInner = document.createElement("div")
    previewInner.classList.add("preview-inner")
    preview?.appendChild(previewInner)
    contentDetails?.forEach((elt) => previewInner.appendChild(elt))

    const innerDiv = await fetchContent(slug).then((contents) =>
      contents.map((el) => highlightHTML(currentSearchTerm, el as HTMLElement)),
    )
    previewInner.append(...innerDiv)
  }

  async function onType(e: HTMLElementEventMap["input"]) {
    let term = (e.target as HTMLInputElement).value
    let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
    currentSearchTerm = (e.target as HTMLInputElement).value

    if (searchLayout) {
      searchLayout.style.opacity = "1"
    }

    if (term === "" && searchLayout) {
      searchLayout.style.opacity = "0"
    }

    if (term.toLowerCase().startsWith("#")) {
      searchType = "tags"
    } else {
@@ -440,16 +496,12 @@
    await displayResults(finalResults)
  }

  if (prevShortcutHandler) {
    document.removeEventListener("keydown", prevShortcutHandler)
  }

  document.addEventListener("keydown", shortcutHandler)
  prevShortcutHandler = shortcutHandler
  searchIcon?.removeEventListener("click", () => showSearch("basic"))
  window.addCleanup(() => document.removeEventListener("keydown", shortcutHandler))
  searchIcon?.addEventListener("click", () => showSearch("basic"))
  searchBar?.removeEventListener("input", onType)
  window.addCleanup(() => searchIcon?.removeEventListener("click", () => showSearch("basic")))
  searchBar?.addEventListener("input", onType)
  window.addCleanup(() => searchBar?.removeEventListener("input", onType))

  // setup index if it hasn't been already
  if (!index) {
@@ -490,13 +542,12 @@
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, {
    await index.addAsync(id++, {
      id,
      slug: slug as FullSlug,
      title: fileData.title,
      content: fileData.content,
      tags: fileData.tags,
    })
    id++
  }
}