more visual polish, adjust colours and spacing

Jacky Zhao

2023-07-04 38cff2d670ecf7fd325aaaf776a4c250a72cc661

 quartz/components/scripts/search.inline.ts

@@ -11,7 +11,8 @@

const contextWindowWords = 30
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 !== "")
@@ -42,7 +43,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>`)
      }
    }
@@ -57,38 +58,7 @@
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
  if (!index) {
    index = new Document({
      cache: true,
      charset: 'latin:extra',
      optimize: true,
      encode: encoder,
      document: {
        id: "slug",
        index: [
          {
            field: "title",
            tokenize: "forward",
          },
          {
            field: "content",
            tokenize: "reverse",
          },
        ]
      },
    })

    for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
      index.add({
        slug,
        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
@@ -169,13 +139,43 @@
    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,
      charset: 'latin:extra',
      optimize: true,
      encode: encoder,
      document: {
        id: "slug",
        index: [
          {
            field: "title",
            tokenize: "forward",
          },
          {
            field: "content",
            tokenize: "reverse",
          },
        ]
      },
    })

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

  // register handlers
  registerEscapeHandler(container, hideSearch)