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

Mara-Li

2024-02-04 dbbc672c67aa5ac0a915d22af5cf44c4e7011aae

 quartz/components/scripts/search.inline.ts

@@ -163,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)
  }

@@ -308,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
      currentHover = target
      currentHover.classList.add("focus")
      await displayPreview(target)
    }

    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
  }