feat: Adding support for i18n (closes #462) (#738)

Mara-Li

2024-02-04 dbbc672c67aa5ac0a915d22af5cf44c4e7011aae

 quartz/components/scripts/search.inline.ts

@@ -15,10 +15,30 @@
type SearchType = "basic" | "tags"
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])/)
let index = new FlexSearch.Document<Item>({
  charset: "latin:extra",
  encode: encoder,
  document: {
    id: "id",
    index: [
      {
        field: "title",
        tokenize: "forward",
      },
      {
        field: "content",
        tokenize: "forward",
      },
      {
        field: "tags",
        tokenize: "forward",
      },
    ],
  },
})

const p = new DOMParser()
const fetchContentCache: Map<FullSlug, Element[]> = new Map()
const contextWindowWords = 30
const numSearchResults = 8
@@ -76,14 +96,15 @@
    })
    .join(" ")

  return `${startIndex === 0 ? "" : "..."}${slice}${endIndex === tokenizedText.length - 1 ? "" : "..."
    }`
  return `${startIndex === 0 ? "" : "..."}${slice}${
    endIndex === tokenizedText.length - 1 ? "" : "..."
  }`
}

function highlightHTML(searchTerm: string, innerHTML: string) {
function highlightHTML(searchTerm: string, el: HTMLElement) {
  const p = new DOMParser()
  const tokenizedTerms = tokenizeTerm(searchTerm)
  const html = p.parseFromString(innerHTML, "text/html")
  const html = p.parseFromString(el.innerHTML, "text/html")

  const createHighlightSpan = (text: string) => {
    const span = document.createElement("span")
@@ -142,13 +163,11 @@
  let previewInner: HTMLDivElement | undefined = undefined
  const results = document.createElement("div")
  results.id = "results-container"
  results.style.flexBasis = enablePreview ? "min(30%, 450px)" : "100%"
  appendLayout(results)

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

@@ -167,7 +186,7 @@
      removeAllChildren(preview)
    }
    if (searchLayout) {
      searchLayout.style.visibility = "hidden"
      searchLayout.classList.remove("display-results")
    }

    searchType = "basic" // reset search type after closing
@@ -207,7 +226,7 @@

    // If search is active, then we will render the first result and display accordingly
    if (!container?.classList.contains("active")) return
    else if (e.key === "Enter") {
    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
@@ -229,9 +248,9 @@
          : (document.activeElement as HTMLInputElement | null)
        const prevResult = currentResult?.previousElementSibling as HTMLInputElement | null
        currentResult?.classList.remove("focus")
        await displayPreview(prevResult)
        prevResult?.focus()
        currentHover = prevResult
        if (prevResult) currentHover = prevResult
        await displayPreview(prevResult)
      }
    } else if (e.key === "ArrowDown" || e.key === "Tab") {
      e.preventDefault()
@@ -243,19 +262,9 @@
          : (document.getElementsByClassName("result-card")[0] as HTMLInputElement | null)
        const secondResult = firstResult?.nextElementSibling as HTMLInputElement | null
        firstResult?.classList.remove("focus")
        await displayPreview(secondResult)
        secondResult?.focus()
        currentHover = secondResult
      } else {
        // If an element in results-container already has focus, focus next one
        const active = currentHover
          ? currentHover
          : (document.activeElement as HTMLInputElement | null)
        active?.classList.remove("focus")
        const nextResult = active?.nextElementSibling as HTMLInputElement | null
        await displayPreview(nextResult)
        nextResult?.focus()
        currentHover = nextResult
        if (secondResult) currentHover = secondResult
        await displayPreview(secondResult)
      }
    }
  }
@@ -276,13 +285,15 @@
      return []
    }

    return tags.map(tag => {
      if (tag.toLowerCase().includes(term.toLowerCase())) {
        return `<li><p class="match-tag">#${tag}</p></li>`
      } else {
        return `<li><p>#${tag}</p></li>`
      }
    }).slice(0, numTagResults)
    return tags
      .map((tag) => {
        if (tag.toLowerCase().includes(term.toLowerCase())) {
          return `<li><p class="match-tag">#${tag}</p></li>`
        } else {
          return `<li><p>#${tag}</p></li>`
        }
      })
      .slice(0, numTagResults)
  }

  function resolveUrl(slug: FullSlug): URL {
@@ -295,40 +306,29 @@
    itemTile.classList.add("result-card")
    itemTile.id = slug
    itemTile.href = resolveUrl(slug).toString()
    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p class="preview">${content}</p>`
    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}${
      enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`
    }`
    itemTile.addEventListener("click", (event) => {
      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
      hideSearch()
    })

    const handler = (event: MouseEvent) => {
      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
      hideSearch()
    }

    async function onMouseEnter(ev: MouseEvent) {
      if (!ev.target) return
      currentHover?.classList.remove('focus')
      currentHover?.blur()
      const target = ev.target as HTMLInputElement
      await displayPreview(target)
      currentHover = target
      currentHover.classList.add("focus")
    }

    async function onMouseLeave(ev: MouseEvent) {
      if (!ev.target) return
      const target = ev.target as HTMLElement
      target.classList.remove("focus")
    }

    const events = [
      ["mouseenter", onMouseEnter],
      ["mouseleave", onMouseLeave],
      [
        "click",
        (event: MouseEvent) => {
          if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
          hideSearch()
        },
      ],
    ] as const

    events.forEach(([event, handler]) => {
      itemTile.addEventListener(event, handler)
      window.addCleanup(() => itemTile.removeEventListener(event, handler))
    })
    itemTile.addEventListener("mouseenter", onMouseEnter)
    window.addCleanup(() => itemTile.removeEventListener("mouseenter", onMouseEnter))
    itemTile.addEventListener("click", handler)
    window.addCleanup(() => itemTile.removeEventListener("click", handler))

    return itemTile
  }
@@ -382,24 +382,25 @@
  async function displayPreview(el: HTMLElement | null) {
    if (!searchLayout || !enablePreview || !el || !preview) return
    const slug = el.id as FullSlug
    el.classList.add("focus")
    const innerDiv = await fetchContent(slug).then((contents) =>
      contents.flatMap((el) => [...highlightHTML(currentSearchTerm, el as HTMLElement).children]),
    )
    previewInner = document.createElement("div")
    previewInner.classList.add("preview-inner")
    const innerDiv = await fetchContent(slug).then((contents) =>
      contents.map((el) => highlightHTML(currentSearchTerm, el.innerHTML)),
    )
    previewInner.append(...innerDiv)
    preview.replaceChildren(previewInner)

    // scroll to longest
    const highlights = [...preview.querySelectorAll(".highlight")].sort((a, b) => b.innerHTML.length - a.innerHTML.length)
    highlights[0]?.scrollIntoView()
    const highlights = [...preview.querySelectorAll(".highlight")].sort(
      (a, b) => b.innerHTML.length - a.innerHTML.length,
    )
    highlights[0]?.scrollIntoView({ block: "start" })
  }

  async function onType(e: HTMLElementEventMap["input"]) {
    if (!searchLayout || !index) return
    currentSearchTerm = (e.target as HTMLInputElement).value
    searchLayout.style.visibility = currentSearchTerm === "" ? "hidden" : "visible"
    searchLayout.classList.toggle("display-results", currentSearchTerm !== "")
    searchType = currentSearchTerm.startsWith("#") ? "tags" : "basic"

    let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
@@ -439,8 +440,8 @@
  searchBar?.addEventListener("input", onType)
  window.addCleanup(() => searchBar?.removeEventListener("input", onType))

  index ??= await fillDocument(data)
  registerEscapeHandler(container, hideSearch)
  await fillDocument(data)
})

/**
@@ -449,37 +450,19 @@
 * @param data data to fill index with
 */
async function fillDocument(data: { [key: FullSlug]: ContentDetails }) {
  const index = new FlexSearch.Document<Item>({
    charset: "latin:extra",
    encode: encoder,
    document: {
      id: "id",
      index: [
        {
          field: "title",
          tokenize: "forward",
        },
        {
          field: "content",
          tokenize: "forward",
        },
        {
          field: "tags",
          tokenize: "forward",
        },
      ],
    },
  })
  let id = 0
  const promises: Array<Promise<unknown>> = []
  for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
    await index.addAsync(id++, {
      id,
      slug: slug as FullSlug,
      title: fileData.title,
      content: fileData.content,
      tags: fileData.tags,
    })
    promises.push(
      index.addAsync(id++, {
        id,
        slug: slug as FullSlug,
        title: fileData.title,
        content: fileData.content,
        tags: fileData.tags,
      }),
    )
  }

  return index
  return await Promise.all(promises)
}