Jacky Zhao
2024-01-28 efdce070e1cea59d52d9f3bf47d468890658eceb
quartz/components/scripts/search.inline.ts
@@ -1,4 +1,4 @@
import { Document, SimpleDocumentSearchResultSetUnit } from "flexsearch"
import FlexSearch from "flexsearch"
import { ContentDetails } from "../../plugins/emitters/contentIndex"
import { registerEscapeHandler, removeAllChildren } from "./util"
import { FullSlug, resolveRelative } from "../../util/path"
@@ -11,7 +11,7 @@
  tags: string[]
}
let index: Document<Item> | undefined = undefined
let index: FlexSearch.Document<Item> | undefined = undefined
// Can be expanded with things like "term" in the future
type SearchType = "basic" | "tags"
@@ -35,12 +35,12 @@
  if (trim) {
    const includesCheck = (tok: string) =>
      tokenizedTerms.some((term) => tok.toLowerCase().startsWith(term.toLowerCase()))
    const occurencesIndices = tokenizedText.map(includesCheck)
    const occurrencesIndices = tokenizedText.map(includesCheck)
    let bestSum = 0
    let bestIndex = 0
    for (let i = 0; i < Math.max(tokenizedText.length - contextWindowWords, 0); i++) {
      const window = occurencesIndices.slice(i, i + contextWindowWords)
      const window = occurrencesIndices.slice(i, i + contextWindowWords)
      const windowSum = window.reduce((total, cur) => total + (cur ? 1 : 0), 0)
      if (windowSum >= bestSum) {
        bestSum = windowSum
@@ -122,7 +122,10 @@
      // add "#" prefix for tag search
      if (searchBar) searchBar.value = "#"
    } else if (e.key === "Enter") {
    }
    if (!container?.classList.contains("active")) return
    else if (e.key === "Enter") {
      // If result has focus, navigate to that one, otherwise pick first result
      if (results?.contains(document.activeElement)) {
        const active = document.activeElement as HTMLInputElement
@@ -131,7 +134,14 @@
        const anchor = document.getElementsByClassName("result-card")[0] as HTMLInputElement | null
        anchor?.click()
      }
    } else if (e.key === "ArrowDown") {
    } else if (e.key === "ArrowUp" || (e.shiftKey && e.key === "Tab")) {
      e.preventDefault()
      if (results?.contains(document.activeElement)) {
        // If an element in results-container already has focus, focus previous one
        const prevResult = document.activeElement?.previousElementSibling as HTMLInputElement | null
        prevResult?.focus()
      }
    } else if (e.key === "ArrowDown" || e.key === "Tab") {
      e.preventDefault()
      // When first pressing ArrowDown, results wont contain the active element, so focus first element
      if (!results?.contains(document.activeElement)) {
@@ -142,13 +152,6 @@
        const nextResult = document.activeElement?.nextElementSibling as HTMLInputElement | null
        nextResult?.focus()
      }
    } else if (e.key === "ArrowUp") {
      e.preventDefault()
      if (results?.contains(document.activeElement)) {
        // If an element in results-container already has focus, focus previous one
        const prevResult = document.activeElement?.previousElementSibling as HTMLInputElement | null
        prevResult?.focus()
      }
    }
  }
@@ -196,7 +199,7 @@
      const termLower = term.toLowerCase()
      let matching = tags.filter((str) => str.includes(termLower))
      // Substract matching from original tags, then push difference
      // Subtract matching from original tags, then push difference
      if (matching.length > 0) {
        let difference = tags.filter((x) => !matching.includes(x))
@@ -219,16 +222,16 @@
  const resultToHTML = ({ slug, title, content, tags }: Item) => {
    const htmlTags = tags.length > 0 ? `<ul>${tags.join("")}</ul>` : ``
    const button = document.createElement("button")
    button.classList.add("result-card")
    button.id = slug
    button.innerHTML = `<h3>${title}</h3>${htmlTags}<p>${content}</p>`
    button.addEventListener("click", () => {
      const targ = resolveRelative(currentSlug, slug)
      window.spaNavigate(new URL(targ, window.location.toString()))
    const itemTile = document.createElement("a")
    itemTile.classList.add("result-card")
    itemTile.id = slug
    itemTile.href = new URL(resolveRelative(currentSlug, slug), location.toString()).toString()
    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p>${content}</p>`
    itemTile.addEventListener("click", (event) => {
      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
      hideSearch()
    })
    return button
    return itemTile
  }
  function displayResults(finalResults: Item[]) {
@@ -236,10 +239,10 @@
    removeAllChildren(results)
    if (finalResults.length === 0) {
      results.innerHTML = `<button class="result-card">
      results.innerHTML = `<a class="result-card">
                    <h3>No results.</h3>
                    <p>Try another search term?</p>
                </button>`
                </a>`
    } else {
      results.append(...finalResults.map(resultToHTML))
    }
@@ -247,7 +250,7 @@
  async function onType(e: HTMLElementEventMap["input"]) {
    let term = (e.target as HTMLInputElement).value
    let searchResults: SimpleDocumentSearchResultSetUnit[]
    let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
    if (term.toLowerCase().startsWith("#")) {
      searchType = "tags"
@@ -302,25 +305,23 @@
  // setup index if it hasn't been already
  if (!index) {
    index = new Document({
      cache: true,
    index = new FlexSearch.Document({
      charset: "latin:extra",
      optimize: true,
      encode: encoder,
      document: {
        id: "id",
        index: [
          {
            field: "title",
            tokenize: "reverse",
            tokenize: "forward",
          },
          {
            field: "content",
            tokenize: "reverse",
            tokenize: "forward",
          },
          {
            field: "tags",
            tokenize: "reverse",
            tokenize: "forward",
          },
        ],
      },
@@ -338,7 +339,7 @@
 * @param index index to fill
 * @param data data to fill index with
 */
async function fillDocument(index: Document<Item, false>, data: any) {
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, {