feat(search): experimental telescope layout (closes #718) (#722)

* feat(search): telescope-style search

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore(search): cleanup some basis and borders

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix(search): make sure to set overflow-y

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* feat(search): shows preview on desktop only search

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* perf: add options to control layout through config

cache memoize results to avoid fetching

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: use the default configuration

* fix: correct minor type for search

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: use datasets to query for preview

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: layout changes

show preview on normal layout, and only show previous layout in list page.

* fix(type): annotate search with types

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: apply jacky's suggestion

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* chore: using map API and scss

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: styling on search container view on phones

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* Update quartz.layout.ts

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
This commit is contained in:
Aaron Pham 2024-01-31 04:16:14 -05:00 committed by GitHub
parent 4e5643fb49
commit a29fadb046
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 208 additions and 84 deletions

View File

@ -4,8 +4,18 @@ import style from "./styles/search.scss"
import script from "./scripts/search.inline" import script from "./scripts/search.inline"
import { classNames } from "../util/lang" import { classNames } from "../util/lang"
export default (() => { export interface SearchOptions {
enablePreview: boolean
}
const defaultOptions: SearchOptions = {
enablePreview: true,
}
export default ((userOpts?: Partial<SearchOptions>) => {
function Search({ displayClass }: QuartzComponentProps) { function Search({ displayClass }: QuartzComponentProps) {
const opts = { ...defaultOptions, ...userOpts }
return ( return (
<div class={classNames(displayClass, "search")}> <div class={classNames(displayClass, "search")}>
<div id="search-icon"> <div id="search-icon">
@ -36,7 +46,7 @@ export default (() => {
aria-label="Search for something" aria-label="Search for something"
placeholder="Search for something" placeholder="Search for something"
/> />
<div id="results-container"></div> <div id="search-layout" data-preview={opts.enablePreview}></div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,7 +1,7 @@
import FlexSearch from "flexsearch" import FlexSearch from "flexsearch"
import { ContentDetails } from "../../plugins/emitters/contentIndex" import { ContentDetails } from "../../plugins/emitters/contentIndex"
import { registerEscapeHandler, removeAllChildren } from "./util" import { registerEscapeHandler, removeAllChildren } from "./util"
import { FullSlug, resolveRelative } from "../../util/path" import { FullSlug, normalizeRelativeURLs, resolveRelative } from "../../util/path"
interface Item { interface Item {
id: number id: number
@ -71,20 +71,44 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
}` }`
} }
const p = new DOMParser()
const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/) const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
let prevShortcutHandler: ((e: HTMLElementEventMap["keydown"]) => void) | undefined = undefined let prevShortcutHandler: ((e: HTMLElementEventMap["keydown"]) => void) | undefined = undefined
document.addEventListener("nav", async (e: unknown) => {
const currentSlug = (e as CustomEventMap["nav"]).detail.url const fetchContentCache: Map<FullSlug, Element[]> = new Map()
document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
const currentSlug = e.detail.url
const data = await fetchData const data = await fetchData
const container = document.getElementById("search-container") const container = document.getElementById("search-container")
const sidebar = container?.closest(".sidebar") as HTMLElement const sidebar = container?.closest(".sidebar") as HTMLElement
const searchIcon = document.getElementById("search-icon") const searchIcon = document.getElementById("search-icon")
const searchBar = document.getElementById("search-bar") as HTMLInputElement | null const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
const results = document.getElementById("results-container") const searchLayout = document.getElementById("search-layout")
const resultCards = document.getElementsByClassName("result-card") const resultCards = document.getElementsByClassName("result-card")
const idDataMap = Object.keys(data) as FullSlug[] const idDataMap = Object.keys(data) as FullSlug[]
const appendLayout = (el: HTMLElement) => {
if (searchLayout?.querySelector(`#${el.id}`) === null) {
searchLayout?.appendChild(el)
}
}
const enablePreview = searchLayout?.dataset?.preview === "true"
let preview: HTMLDivElement | undefined = undefined
const results = document.createElement("div")
results.id = "results-container"
results.style.flexBasis = enablePreview ? "30%" : "100%"
appendLayout(results)
if (enablePreview) {
preview = document.createElement("div")
preview.id = "preview-container"
preview.style.flexBasis = "70%"
appendLayout(preview)
}
function hideSearch() { function hideSearch() {
container?.classList.remove("active") container?.classList.remove("active")
if (searchBar) { if (searchBar) {
@ -96,6 +120,9 @@ document.addEventListener("nav", async (e: unknown) => {
if (results) { if (results) {
removeAllChildren(results) removeAllChildren(results)
} }
if (preview) {
removeAllChildren(preview)
}
searchType = "basic" // reset search type after closing searchType = "basic" // reset search type after closing
} }
@ -109,7 +136,7 @@ document.addEventListener("nav", async (e: unknown) => {
searchBar?.focus() searchBar?.focus()
} }
function shortcutHandler(e: HTMLElementEventMap["keydown"]) { async function shortcutHandler(e: HTMLElementEventMap["keydown"]) {
if (e.key === "k" && (e.ctrlKey || e.metaKey) && !e.shiftKey) { if (e.key === "k" && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
e.preventDefault() e.preventDefault()
const searchBarOpen = container?.classList.contains("active") const searchBarOpen = container?.classList.contains("active")
@ -139,6 +166,9 @@ document.addEventListener("nav", async (e: unknown) => {
if (results?.contains(document.activeElement)) { if (results?.contains(document.activeElement)) {
// If an element in results-container already has focus, focus previous one // If an element in results-container already has focus, focus previous one
const prevResult = document.activeElement?.previousElementSibling as HTMLInputElement | null const prevResult = document.activeElement?.previousElementSibling as HTMLInputElement | null
if (enablePreview && prevResult?.id) {
await displayPreview(prevResult?.id as FullSlug)
}
prevResult?.focus() prevResult?.focus()
} }
} else if (e.key === "ArrowDown" || e.key === "Tab") { } else if (e.key === "ArrowDown" || e.key === "Tab") {
@ -146,10 +176,16 @@ document.addEventListener("nav", async (e: unknown) => {
// When first pressing ArrowDown, results wont contain the active element, so focus first element // When first pressing ArrowDown, results wont contain the active element, so focus first element
if (!results?.contains(document.activeElement)) { if (!results?.contains(document.activeElement)) {
const firstResult = resultCards[0] as HTMLInputElement | null const firstResult = resultCards[0] as HTMLInputElement | null
if (enablePreview && firstResult?.id) {
await displayPreview(firstResult?.id as FullSlug)
}
firstResult?.focus() firstResult?.focus()
} else { } else {
// If an element in results-container already has focus, focus next one // If an element in results-container already has focus, focus next one
const nextResult = document.activeElement?.nextElementSibling as HTMLInputElement | null const nextResult = document.activeElement?.nextElementSibling as HTMLInputElement | null
if (enablePreview && nextResult?.id) {
await displayPreview(nextResult?.id as FullSlug)
}
nextResult?.focus() nextResult?.focus()
} }
} }
@ -220,13 +256,17 @@ document.addEventListener("nav", async (e: unknown) => {
} }
} }
function resolveUrl(slug: FullSlug): URL {
return new URL(resolveRelative(currentSlug, slug), location.toString())
}
const resultToHTML = ({ slug, title, content, tags }: Item) => { const resultToHTML = ({ slug, title, content, tags }: Item) => {
const htmlTags = tags.length > 0 ? `<ul>${tags.join("")}</ul>` : `` const htmlTags = tags.length > 0 ? `<ul>${tags.join("")}</ul>` : ``
const itemTile = document.createElement("a") const itemTile = document.createElement("a")
itemTile.classList.add("result-card") itemTile.classList.add("result-card")
itemTile.id = slug itemTile.id = slug
itemTile.href = new URL(resolveRelative(currentSlug, slug), location.toString()).toString() itemTile.href = resolveUrl(slug).toString()
itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p>${content}</p>` itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}${enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`}`
itemTile.addEventListener("click", (event) => { itemTile.addEventListener("click", (event) => {
if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
hideSearch() hideSearch()
@ -248,10 +288,47 @@ document.addEventListener("nav", async (e: unknown) => {
} }
} }
async function fetchContent(slug: FullSlug): Promise<Element[]> {
if (fetchContentCache.has(slug)) {
return fetchContentCache.get(slug) as Element[]
}
const targetUrl = resolveUrl(slug).toString()
const contents = await fetch(targetUrl)
.then((res) => res.text())
.then((contents) => {
if (contents === undefined) {
throw new Error(`Could not fetch ${targetUrl}`)
}
const html = p.parseFromString(contents ?? "", "text/html")
normalizeRelativeURLs(html, targetUrl)
return [...html.getElementsByClassName("popover-hint")]
})
fetchContentCache.set(slug, contents)
return contents
}
async function displayPreview(slug: FullSlug) {
if (!searchLayout || !enablePreview) return
removeAllChildren(preview as HTMLElement)
const contentDetails = await fetchContent(slug)
const previewInner = document.createElement("div")
previewInner.classList.add("preview-inner")
preview?.appendChild(previewInner)
contentDetails?.forEach((elt) => previewInner.appendChild(elt))
}
async function onType(e: HTMLElementEventMap["input"]) { async function onType(e: HTMLElementEventMap["input"]) {
let term = (e.target as HTMLInputElement).value let term = (e.target as HTMLInputElement).value
let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[] let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
if (searchLayout) {
searchLayout.style.opacity = "1"
}
if (term.toLowerCase().startsWith("#")) { if (term.toLowerCase().startsWith("#")) {
searchType = "tags" searchType = "tags"
} else { } else {

View File

@ -55,7 +55,7 @@
& > #search-space { & > #search-space {
width: 50%; width: 50%;
margin-top: 15vh; margin-top: 12vh;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -86,93 +86,130 @@
} }
} }
& > #results-container { & > #search-layout {
& .result-card { display: flex;
padding: 1em; flex-direction: row;
cursor: pointer; justify-content: space-between;
transition: background 0.2s ease; opacity: 0;
border: 1px solid var(--lightgray);
border-bottom: none; & > * {
width: 100%; height: calc(75vh - 20em);
background: none;
border-radius: 5px;
border: 1px solid var(--lightgray); // Border to define the box
}
@media all and (max-width: $mobileBreakpoint) {
display: block;
& > *:not(#results-container) {
display: none !important;
}
& > #results-container {
width: 100%;
height: auto;
}
}
& > #preview-container {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
// normalize card props & .preview-inner {
font-family: inherit; padding: 1em;
font-size: 100%; height: 100%;
line-height: 1.15; box-sizing: border-box;
margin: 0; overflow-y: auto;
text-transform: none; font-family: inherit;
text-align: left; font-size: 1.1em;
background: var(--light); color: var(--dark);
outline: none; line-height: 1.5em;
font-weight: inherit; font-weight: 400;
background: var(--light);
& .highlight { border-radius: 5px;
color: var(--secondary); box-shadow:
font-weight: 700; 0 14px 50px rgba(27, 33, 48, 0.12),
0 10px 30px rgba(27, 33, 48, 0.16);
} }
}
&:hover, & > #results-container {
&:focus { overflow-y: auto;
background: var(--lightgray);
}
&:first-of-type { & .result-card {
border-top-left-radius: 5px; padding: 1em;
border-top-right-radius: 5px; cursor: pointer;
} transition: background 0.2s ease;
width: 100%;
display: block;
box-sizing: border-box;
&:last-of-type { // normalize card props
border-bottom-left-radius: 5px; font-family: inherit;
border-bottom-right-radius: 5px; font-size: 100%;
border-bottom: 1px solid var(--lightgray); line-height: 1.15;
}
& > h3 {
margin: 0; margin: 0;
} text-transform: none;
text-align: left;
background: var(--light);
outline: none;
font-weight: inherit;
& > ul > li { & .highlight {
margin: 0; color: var(--secondary);
display: inline-block; font-weight: 700;
white-space: nowrap; }
margin: 0;
overflow-wrap: normal;
}
& > ul { &:hover,
list-style: none; &:focus {
display: flex; background: var(--lightgray);
padding-left: 0; }
gap: 0.4rem;
margin: 0;
margin-top: 0.45rem;
// Offset border radius
margin-left: -2px;
overflow: hidden;
background-clip: border-box;
}
& > ul > li > p { & > h3 {
border-radius: 8px; margin: 0;
background-color: var(--highlight); }
overflow: hidden;
background-clip: border-box;
padding: 0.03rem 0.4rem;
margin: 0;
color: var(--secondary);
opacity: 0.85;
}
& > ul > li > .match-tag { & > ul > li {
color: var(--tertiary); margin: 0;
font-weight: bold; display: inline-block;
opacity: 1; white-space: nowrap;
} margin: 0;
overflow-wrap: normal;
}
& > p { & > ul {
margin-bottom: 0; list-style: none;
display: flex;
padding-left: 0;
gap: 0.4rem;
margin: 0;
margin-top: 0.45rem;
box-sizing: border-box;
overflow: hidden;
background-clip: border-box;
}
& > ul > li > p {
border-radius: 8px;
background-color: var(--highlight);
overflow: hidden;
background-clip: border-box;
padding: 0.03rem 0.4rem;
margin: 0;
color: var(--secondary);
opacity: 0.85;
}
& > ul > li > .match-tag {
color: var(--tertiary);
font-weight: bold;
opacity: 1;
}
& > p {
margin-bottom: 0;
}
} }
} }
} }