docs + various polish

Jacky Zhao

2023-07-10 08f8e3b4a4879dd7c91c16fbce80c4f2bc5e357f

 quartz/components/scripts/search.inline.ts

@@ -1,6 +1,6 @@
import { Document } from "flexsearch"
import { ContentDetails } from "../../plugins/emitters/contentIndex"
import { registerEscapeHandler } from "./handler"
import { registerEscapeHandler, relative, removeAllChildren } from "./util"

interface Item {
  slug: string,
@@ -9,19 +9,11 @@
}
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 +44,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,39 +59,9 @@
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 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")
@@ -109,12 +71,18 @@
    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()
  }
@@ -167,7 +135,7 @@

  function onType(e: HTMLElementEventMap["input"]) {
    const term = (e.target as HTMLInputElement).value
    const searchResults = index?.search(term, 5) ?? []
    const searchResults = index?.search(term, numSearchResults) ?? []
    const getByField = (field: string): string[] => {
      const results = searchResults.filter((x) => x.field === field)
      return results.length === 0 ? [] : [...results[0].result] as string[]
@@ -179,7 +147,6 @@
    displayResults(finalResults)
  }


  document.removeEventListener("keydown", shortcutHandler)
  document.addEventListener("keydown", shortcutHandler)
  searchIcon?.removeEventListener("click", showSearch)
@@ -187,6 +154,37 @@
  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)
})