finish path refactoring, add sourcemap + better trace support

Jacky Zhao

2023-07-16 3ac6b42e16dca5a44ed3fec2c0314f1dbbc2322b

 quartz/components/scripts/search.inline.ts

@@ -1,27 +1,21 @@
import { Document } from "flexsearch"
import { ContentDetails } from "../../plugins/emitters/contentIndex"
import { registerEscapeHandler } from "./handler"
import { registerEscapeHandler, removeAllChildren } from "./util"
import { CanonicalSlug, getClientSlug, resolveRelative } from "../../path"

interface Item {
  slug: string,
  slug: CanonicalSlug,
  title: string,
  content: string,
}

let index: Document<Item> | undefined = undefined

function relative(from: string, to: string) {
  const pieces = [location.protocol, '//', location.host, location.pathname]
  const url = pieces.join('').slice(0, -from.length) + to
  return url
}

function removeAllChildren(node: HTMLElement) {
  node.innerHTML = ``
}

const contextWindowWords = 30
const numSearchResults = 5
function highlight(searchTerm: string, text: string, trim?: boolean) {
  const tokenizedTerms = searchTerm.split(/\s+/).filter(t => t !== "")
  // try to highlight longest tokens first
  const tokenizedTerms = searchTerm.split(/\s+/).filter(t => t !== "").sort((a, b) => b.length - a.length)
  let tokenizedText = text
    .split(/\s+/)
    .filter(t => t !== "")
@@ -52,7 +46,7 @@
    // see if this tok is prefixed by any search terms 
    for (const searchTok of tokenizedTerms) {
      if (tok.toLowerCase().includes(searchTok.toLowerCase())) {
        const regex = new RegExp(searchTok, "gi")
        const regex = new RegExp(searchTok.toLowerCase(), "gi")
        return tok.replace(regex, `<span class="highlight">$&</span>`)
      }
    }
@@ -67,8 +61,102 @@
document.addEventListener("nav", async (e: unknown) => {
  const currentSlug = (e as CustomEventMap["nav"]).detail.url

  // setup index if it hasn't been already
  const data = await fetchData
  const container = document.getElementById("search-container")
  const sidebar = container?.closest(".sidebar") as HTMLElement
  const searchIcon = document.getElementById("search-icon")
  const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
  const results = document.getElementById("results-container")

  function hideSearch() {
    container?.classList.remove("active")
    if (searchBar) {
      searchBar.value = "" // clear the input when we dismiss the search
    }
    if (sidebar) {
      sidebar.style.zIndex = "unset"
    }
    if (results) {
      removeAllChildren(results)
    }
  }

  function showSearch() {
    if (sidebar) {
      sidebar.style.zIndex = "1"
    }
    container?.classList.add("active")
    searchBar?.focus()
  }

  function shortcutHandler(e: HTMLElementEventMap["keydown"]) {
    if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
      e.preventDefault()
      const searchBarOpen = container?.classList.contains("active")
      searchBarOpen ? hideSearch() : showSearch()
    } else if (e.key === "Enter") {
      const anchor = document.getElementsByClassName("result-card")[0] as HTMLInputElement | null
      if (anchor) {
        anchor.click()
      }
    }
  }

  const formatForDisplay = (term: string, slug: CanonicalSlug) => ({
    slug,
    title: highlight(term, data[slug].title ?? ""),
    content: highlight(term, data[slug].content ?? "", true),
  })

  const resultToHTML = ({ slug, title, content }: Item) => {
    const button = document.createElement("button")
    button.classList.add("result-card")
    button.id = slug
    button.innerHTML = `<h3>${title}</h3><p>${content}</p>`
    button.addEventListener('click', () => {
      const targ = resolveRelative(currentSlug, slug)
      window.spaNavigate(new URL(targ, getClientSlug(window)))
    })
    return button
  }

  function displayResults(finalResults: Item[]) {
    if (!results) return

    removeAllChildren(results)
    if (finalResults.length === 0) {
      results.innerHTML = `<button class="result-card">
                    <h3>No results.</h3>
                    <p>Try another search term?</p>
                </button>`
    } else {
      results.append(...finalResults.map(resultToHTML))
    }

  }

  function onType(e: HTMLElementEventMap["input"]) {
    const term = (e.target as HTMLInputElement).value
    const searchResults = index?.search(term, numSearchResults) ?? []
    const getByField = (field: string): CanonicalSlug[] => {
      const results = searchResults.filter((x) => x.field === field)
      return results.length === 0 ? [] : [...results[0].result] as CanonicalSlug[]
    }

    // order titles ahead of content
    const allIds: Set<CanonicalSlug> = new Set([...getByField("title"), ...getByField("content")])
    const finalResults = [...allIds].map(id => formatForDisplay(term, id))
    displayResults(finalResults)
  }

  document.removeEventListener("keydown", shortcutHandler)
  document.addEventListener("keydown", shortcutHandler)
  searchIcon?.removeEventListener("click", showSearch)
  searchIcon?.addEventListener("click", showSearch)
  searchBar?.removeEventListener("input", onType)
  searchBar?.addEventListener("input", onType)

  // setup index if it hasn't been already
  if (!index) {
    index = new Document({
      cache: true,
@@ -91,102 +179,14 @@
    })

    for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
      index.add({
        slug,
      await index.addAsync(slug, {
        slug: slug as CanonicalSlug,
        title: fileData.title,
        content: fileData.content
      })
    }
  }

  const container = document.getElementById("search-container")
  const searchIcon = document.getElementById("search-icon")
  const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
  const results = document.getElementById("results-container")

  function hideSearch() {
    container?.classList.remove("active")
    if (searchBar) {
      searchBar.value = "" // clear the input when we dismiss the search
    }
    if (results) {
      removeAllChildren(results)
    }
  }

  function showSearch() {
    container?.classList.add("active")
    searchBar?.focus()
  }

  function shortcutHandler(e: HTMLElementEventMap["keydown"]) {
    if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
      e.preventDefault()
      const searchBarOpen = container?.classList.contains("active")
      searchBarOpen ? hideSearch() : showSearch()
    } else if (e.key === "Enter") {
      const anchor = document.getElementsByClassName("result-card")[0] as HTMLInputElement | null
      if (anchor) {
        anchor.click()
      }
    }
  }

  const formatForDisplay = (term: string, slug: string) => ({
    slug,
    title: highlight(term, data[slug].title ?? ""),
    content: highlight(term, data[slug].content ?? "", true),
  })

  const resultToHTML = ({ slug, title, content }: Item) => {
    const button = document.createElement("button")
    button.classList.add("result-card")
    button.id = slug
    button.innerHTML = `<h3>${title}</h3><p>${content}</p>`
    button.addEventListener('click', () => {
      const targ = relative(currentSlug, slug)
      window.spaNavigate(new URL(targ))
    })
    return button
  }

  function displayResults(finalResults: Item[]) {
    if (!results) return

    removeAllChildren(results)
    if (finalResults.length === 0) {
      results.innerHTML = `<button class="result-card">
                    <h3>No results.</h3>
                    <p>Try another search term?</p>
                </button>`
    } else {
      results.append(...finalResults.map(resultToHTML))
    }

  }

  function onType(e: HTMLElementEventMap["input"]) {
    const term = (e.target as HTMLInputElement).value
    const searchResults = index?.search(term, 5) ?? []
    const getByField = (field: string): string[] => {
      const results = searchResults.filter((x) => x.field === field)
      return results.length === 0 ? [] : [...results[0].result] as string[]
    }

    // order titles ahead of content
    const allIds: Set<string> = new Set([...getByField("title"), ...getByField("content")])
    const finalResults = [...allIds].map(id => formatForDisplay(term, id))
    displayResults(finalResults)
  }


  document.removeEventListener("keydown", shortcutHandler)
  document.addEventListener("keydown", shortcutHandler)
  searchIcon?.removeEventListener("click", showSearch)
  searchIcon?.addEventListener("click", showSearch)
  searchBar?.removeEventListener("input", onType)
  searchBar?.addEventListener("input", onType)

  // register handlers
  registerEscapeHandler(container, hideSearch)
})