From a8e1c4abc2f5a76d0ff0d582b5c1cbfb81ddbe2f Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 26 Jan 2024 06:22:07 +0000
Subject: [PATCH] docs: rearrange showcase
---
quartz/components/scripts/search.inline.ts | 36 ++++++++++++++++++------------------
1 files changed, 18 insertions(+), 18 deletions(-)
diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 11e1c0d..df21f6b 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -134,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)) {
@@ -145,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()
- }
}
}
@@ -222,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[]) {
@@ -239,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))
}
--
Gitblit v1.10.0