From 0403fa70aa24cd3c16fbd9caf434cdcd277f1a14 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Sun, 21 Jan 2024 23:50:00 -0500
Subject: [PATCH] fix(search): use anchor element (closes #698) (#717)
* fix(search): use anchor element
This addresses #698 to allow search title to include links for SPA
Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
* fix: formatter
Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
* chore: move itemTile to `a`
Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
* chore: remove nested a title
Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
* chore(search): remove spaNavigate
since now searchResult is an `a` item
Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---------
Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
quartz/components/scripts/search.inline.ts | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 11e1c0d..ab76b5f 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -222,16 +222,16 @@ document.addEventListener("nav", async (e: unknown) => {
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[]) {