The Trans Directory
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: search async ordering, scroll offset

+9 -8
+8 -8
quartz/components/scripts/search.inline.ts
··· 224 224 225 225 if (currentHover) { 226 226 currentHover.classList.remove("focus") 227 + currentHover.blur() 227 228 } 228 229 229 230 // If search is active, then we will render the first result and display accordingly ··· 250 251 : (document.activeElement as HTMLInputElement | null) 251 252 const prevResult = currentResult?.previousElementSibling as HTMLInputElement | null 252 253 currentResult?.classList.remove("focus") 253 - await displayPreview(prevResult) 254 254 prevResult?.focus() 255 255 currentHover = prevResult 256 + await displayPreview(prevResult) 256 257 } 257 258 } else if (e.key === "ArrowDown" || e.key === "Tab") { 258 259 e.preventDefault() ··· 264 265 : (document.getElementsByClassName("result-card")[0] as HTMLInputElement | null) 265 266 const secondResult = firstResult?.nextElementSibling as HTMLInputElement | null 266 267 firstResult?.classList.remove("focus") 267 - await displayPreview(secondResult) 268 268 secondResult?.focus() 269 269 currentHover = secondResult 270 + await displayPreview(secondResult) 270 271 } else { 271 272 // If an element in results-container already has focus, focus next one 272 273 const active = currentHover ··· 274 275 : (document.activeElement as HTMLInputElement | null) 275 276 active?.classList.remove("focus") 276 277 const nextResult = active?.nextElementSibling as HTMLInputElement | null 277 - await displayPreview(nextResult) 278 278 nextResult?.focus() 279 279 currentHover = nextResult 280 + await displayPreview(nextResult) 280 281 } 281 282 } 282 283 } ··· 325 326 currentHover?.classList.remove("focus") 326 327 currentHover?.blur() 327 328 const target = ev.target as HTMLInputElement 328 - await displayPreview(target) 329 329 currentHover = target 330 330 currentHover.classList.add("focus") 331 + await displayPreview(target) 331 332 } 332 333 333 334 async function onMouseLeave(ev: MouseEvent) { ··· 405 406 async function displayPreview(el: HTMLElement | null) { 406 407 if (!searchLayout || !enablePreview || !el || !preview) return 407 408 const slug = el.id as FullSlug 408 - el.classList.add("focus") 409 - previewInner = document.createElement("div") 410 - previewInner.classList.add("preview-inner") 411 409 const innerDiv = await fetchContent(slug).then((contents) => 412 410 contents.flatMap((el) => [...highlightHTML(currentSearchTerm, el as HTMLElement).children]), 413 411 ) 412 + previewInner = document.createElement("div") 413 + previewInner.classList.add("preview-inner") 414 414 previewInner.append(...innerDiv) 415 415 preview.replaceChildren(previewInner) 416 416 ··· 418 418 const highlights = [...preview.querySelectorAll(".highlight")].sort( 419 419 (a, b) => b.innerHTML.length - a.innerHTML.length, 420 420 ) 421 - highlights[0]?.scrollIntoView() 421 + highlights[0]?.scrollIntoView({ block: "start" }) 422 422 } 423 423 424 424 async function onType(e: HTMLElementEventMap["input"]) {
+1
quartz/components/styles/search.scss
··· 131 131 & .highlight { 132 132 background: color-mix(in srgb, var(--tertiary) 60%, transparent); 133 133 border-radius: 5px; 134 + scroll-margin-top: 2rem; 134 135 } 135 136 136 137 & > #preview-container {