chore(cleanup): misc refactoring for cleanup, fix some search bugs

This commit is contained in:
Jacky Zhao 2024-02-01 23:55:11 -08:00
parent 45b93a80f4
commit 9b8e0c9d1a
4 changed files with 102 additions and 173 deletions

View file

@ -14,7 +14,7 @@ document.addEventListener("nav", () => {
button.type = "button" button.type = "button"
button.innerHTML = svgCopy button.innerHTML = svgCopy
button.ariaLabel = "Copy source" button.ariaLabel = "Copy source"
button.addEventListener("click", () => { function onClick() {
navigator.clipboard.writeText(source).then( navigator.clipboard.writeText(source).then(
() => { () => {
button.blur() button.blur()
@ -26,7 +26,9 @@ document.addEventListener("nav", () => {
}, },
(error) => console.error(error), (error) => console.error(error),
) )
}) }
button.addEventListener("click", onClick)
window.addCleanup(() => button.removeEventListener("click", onClick))
els[i].prepend(button) els[i].prepend(button)
} }
} }

View file

@ -10,13 +10,21 @@ const emitThemeChangeEvent = (theme: "light" | "dark") => {
} }
document.addEventListener("nav", () => { document.addEventListener("nav", () => {
const switchTheme = (e: any) => { const switchTheme = (e: Event) => {
const newTheme = e.target.checked ? "dark" : "light" const newTheme = (e.target as HTMLInputElement)?.checked ? "dark" : "light"
document.documentElement.setAttribute("saved-theme", newTheme) document.documentElement.setAttribute("saved-theme", newTheme)
localStorage.setItem("theme", newTheme) localStorage.setItem("theme", newTheme)
emitThemeChangeEvent(newTheme) emitThemeChangeEvent(newTheme)
} }
const themeChange = (e: MediaQueryListEvent) => {
const newTheme = e.matches ? "dark" : "light"
document.documentElement.setAttribute("saved-theme", newTheme)
localStorage.setItem("theme", newTheme)
toggleSwitch.checked = e.matches
emitThemeChangeEvent(newTheme)
}
// Darkmode toggle // Darkmode toggle
const toggleSwitch = document.querySelector("#darkmode-toggle") as HTMLInputElement const toggleSwitch = document.querySelector("#darkmode-toggle") as HTMLInputElement
toggleSwitch.addEventListener("change", switchTheme) toggleSwitch.addEventListener("change", switchTheme)
@ -27,11 +35,6 @@ document.addEventListener("nav", () => {
// Listen for changes in prefers-color-scheme // Listen for changes in prefers-color-scheme
const colorSchemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)") const colorSchemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
colorSchemeMediaQuery.addEventListener("change", (e) => { colorSchemeMediaQuery.addEventListener("change", themeChange)
const newTheme = e.matches ? "dark" : "light" window.addCleanup(() => colorSchemeMediaQuery.removeEventListener("change", themeChange))
document.documentElement.setAttribute("saved-theme", newTheme)
localStorage.setItem("theme", newTheme)
toggleSwitch.checked = e.matches
emitThemeChangeEvent(newTheme)
})
}) })

View file

@ -26,7 +26,6 @@ const numTagResults = 5
const tokenizeTerm = (term: string) => { const tokenizeTerm = (term: string) => {
const tokens = term.split(/\s+/).filter((t) => t.trim() !== "") const tokens = term.split(/\s+/).filter((t) => t.trim() !== "")
const tokenLen = tokens.length const tokenLen = tokens.length
if (tokenLen > 1) { if (tokenLen > 1) {
for (let i = 1; i < tokenLen; i++) { for (let i = 1; i < tokenLen; i++) {
@ -77,15 +76,14 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
}) })
.join(" ") .join(" ")
return `${startIndex === 0 ? "" : "..."}${slice}${ return `${startIndex === 0 ? "" : "..."}${slice}${endIndex === tokenizedText.length - 1 ? "" : "..."
endIndex === tokenizedText.length - 1 ? "" : "..."
}` }`
} }
function highlightHTML(searchTerm: string, el: HTMLElement) { function highlightHTML(searchTerm: string, innerHTML: string) {
const p = new DOMParser() const p = new DOMParser()
const tokenizedTerms = tokenizeTerm(searchTerm) const tokenizedTerms = tokenizeTerm(searchTerm)
const html = p.parseFromString(el.innerHTML, "text/html") const html = p.parseFromString(innerHTML, "text/html")
const createHighlightSpan = (text: string) => { const createHighlightSpan = (text: string) => {
const span = document.createElement("span") const span = document.createElement("span")
@ -125,10 +123,8 @@ function highlightHTML(searchTerm: string, el: HTMLElement) {
document.addEventListener("nav", async (e: CustomEventMap["nav"]) => { document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
const currentSlug = e.detail.url 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 searchSpace = document.getElementById("search-space")
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
@ -193,6 +189,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
e.preventDefault() e.preventDefault()
const searchBarOpen = container?.classList.contains("active") const searchBarOpen = container?.classList.contains("active")
searchBarOpen ? hideSearch() : showSearch("basic") searchBarOpen ? hideSearch() : showSearch("basic")
return
} else if (e.shiftKey && (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") { } else if (e.shiftKey && (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
// Hotkey to open tag search // Hotkey to open tag search
e.preventDefault() e.preventDefault()
@ -201,6 +198,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
// add "#" prefix for tag search // add "#" prefix for tag search
if (searchBar) searchBar.value = "#" if (searchBar) searchBar.value = "#"
return
} }
if (currentHover) { if (currentHover) {
@ -262,69 +260,29 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
} }
} }
function trimContent(content: string) {
// works without escaping html like in `description.ts`
const sentences = content.replace(/\s+/g, " ").split(".")
let finalDesc = ""
let sentenceIdx = 0
// Roughly estimate characters by (words * 5). Matches description length in `description.ts`.
const len = contextWindowWords * 5
while (finalDesc.length < len) {
const sentence = sentences[sentenceIdx]
if (!sentence) break
finalDesc += sentence + "."
sentenceIdx++
}
// If more content would be available, indicate it by finishing with "..."
if (finalDesc.length < content.length) {
finalDesc += ".."
}
return finalDesc
}
const formatForDisplay = (term: string, id: number) => { const formatForDisplay = (term: string, id: number) => {
const slug = idDataMap[id] const slug = idDataMap[id]
return { return {
id, id,
slug, slug,
title: searchType === "tags" ? data[slug].title : highlight(term, data[slug].title ?? ""), title: searchType === "tags" ? data[slug].title : highlight(term, data[slug].title ?? ""),
// if searchType is tag, display context from start of file and trim, otherwise use regular highlight content: highlight(term, data[slug].content ?? "", true),
content: tags: highlightTags(term.substring(1), data[slug].tags),
searchType === "tags"
? trimContent(data[slug].content)
: highlight(term, data[slug].content ?? "", true),
tags: highlightTags(term, data[slug].tags),
} }
} }
function highlightTags(term: string, tags: string[]) { function highlightTags(term: string, tags: string[]) {
if (tags && searchType === "tags") { if (!tags || searchType !== "tags") {
// Find matching tags
const termLower = term.toLowerCase()
let matching = tags.filter((str) => str.includes(termLower))
// Subtract matching from original tags, then push difference
if (matching.length > 0) {
let difference = tags.filter((x) => !matching.includes(x))
// Convert to html (cant be done later as matches/term dont get passed to `resultToHTML`)
matching = matching.map((tag) => `<li><p class="match-tag">#${tag}</p></li>`)
difference = difference.map((tag) => `<li><p>#${tag}</p></li>`)
matching.push(...difference)
}
// Only allow max of `numTagResults` in preview
if (tags.length > numTagResults) {
matching.splice(numTagResults)
}
return matching
} else {
return [] return []
} }
return tags.map(tag => {
if (tag.toLowerCase().includes(term.toLowerCase())) {
return `<li><p class="match-tag">#${tag}</p></li>`
} else {
return `<li><p>#${tag}</p></li>`
}
}).slice(0, numTagResults)
} }
function resolveUrl(slug: FullSlug): URL { function resolveUrl(slug: FullSlug): URL {
@ -332,34 +290,26 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
} }
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 class="tags">${tags.join("")}</ul>` : ``
const resultContent = enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`
const itemTile = document.createElement("a") const itemTile = document.createElement("a")
itemTile.classList.add("result-card") itemTile.classList.add("result-card")
Object.assign(itemTile, { itemTile.id = slug
id: slug, itemTile.href = resolveUrl(slug).toString()
href: resolveUrl(slug).toString(), itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p class="preview">${content}</p>`
innerHTML: `<h3>${title}</h3>${htmlTags}${resultContent}`,
})
async function onMouseEnter(ev: MouseEvent) { async function onMouseEnter(ev: MouseEvent) {
// Actually when we hover, we need to clean all highlights within the result childs
if (!ev.target) return if (!ev.target) return
for (const el of document.getElementsByClassName( currentHover?.classList.remove('focus')
"result-card", currentHover?.blur()
) as HTMLCollectionOf<HTMLElement>) {
el.classList.remove("focus")
el.blur()
}
const target = ev.target as HTMLInputElement const target = ev.target as HTMLInputElement
await displayPreview(target) await displayPreview(target)
currentHover = target currentHover = target
currentHover.classList.remove("focus") currentHover.classList.add("focus")
} }
async function onMouseLeave(ev: MouseEvent) { async function onMouseLeave(ev: MouseEvent) {
const target = ev.target as HTMLAnchorElement if (!ev.target) return
const target = ev.target as HTMLElement
target.classList.remove("focus") target.classList.remove("focus")
} }
@ -373,9 +323,12 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
hideSearch() hideSearch()
}, },
], ],
] as [keyof HTMLElementEventMap, (this: HTMLElement) => void][] ] as const
events.forEach(([event, handler]) => itemTile.addEventListener(event, handler)) events.forEach(([event, handler]) => {
itemTile.addEventListener(event, handler)
window.addCleanup(() => itemTile.removeEventListener(event, handler))
})
return itemTile return itemTile
} }
@ -392,18 +345,18 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
} else { } else {
results.append(...finalResults.map(resultToHTML)) results.append(...finalResults.map(resultToHTML))
} }
// focus on first result, then also dispatch preview immediately
if (results?.firstElementChild) { if (finalResults.length === 0 && preview) {
const firstChild = results.firstElementChild as HTMLElement // no results, clear previous preview
if (firstChild.classList.contains("no-match")) { removeAllChildren(preview)
removeAllChildren(preview as HTMLElement)
} else { } else {
// focus on first result, then also dispatch preview immediately
const firstChild = results.firstElementChild as HTMLElement
firstChild.classList.add("focus") firstChild.classList.add("focus")
currentHover = firstChild as HTMLInputElement currentHover = firstChild as HTMLInputElement
await displayPreview(firstChild) await displayPreview(firstChild)
} }
} }
}
async function fetchContent(slug: FullSlug): Promise<Element[]> { async function fetchContent(slug: FullSlug): Promise<Element[]> {
if (fetchContentCache.has(slug)) { if (fetchContentCache.has(slug)) {
@ -427,59 +380,41 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
} }
async function displayPreview(el: HTMLElement | null) { async function displayPreview(el: HTMLElement | null) {
if (!searchLayout || !enablePreview || !el) return if (!searchLayout || !enablePreview || !el || !preview) return
const slug = el.id as FullSlug const slug = el.id as FullSlug
el.classList.add("focus") el.classList.add("focus")
removeAllChildren(preview as HTMLElement)
previewInner = document.createElement("div") previewInner = document.createElement("div")
previewInner.classList.add("preview-inner") previewInner.classList.add("preview-inner")
preview?.appendChild(previewInner)
const innerDiv = await fetchContent(slug).then((contents) => const innerDiv = await fetchContent(slug).then((contents) =>
contents.map((el) => highlightHTML(currentSearchTerm, el as HTMLElement)), contents.map((el) => highlightHTML(currentSearchTerm, el.innerHTML)),
) )
previewInner.append(...innerDiv) previewInner.append(...innerDiv)
preview.replaceChildren(previewInner)
// scroll to longest
const highlights = [...preview.querySelectorAll(".highlight")].sort((a, b) => b.innerHTML.length - a.innerHTML.length)
highlights[0]?.scrollIntoView()
} }
async function onType(e: HTMLElementEventMap["input"]) { async function onType(e: HTMLElementEventMap["input"]) {
let term = (e.target as HTMLInputElement).value if (!searchLayout || !index) return
let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
currentSearchTerm = (e.target as HTMLInputElement).value currentSearchTerm = (e.target as HTMLInputElement).value
searchLayout.style.visibility = currentSearchTerm === "" ? "hidden" : "visible"
searchType = currentSearchTerm.startsWith("#") ? "tags" : "basic"
if (searchLayout) { let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
searchLayout.style.visibility = "visible" if (searchType === "tags") {
} searchResults = await index.searchAsync({
query: currentSearchTerm.substring(1),
if (term === "" && searchLayout) { limit: numSearchResults,
searchLayout.style.visibility = "hidden" index: ["tags"],
} })
} else if (searchType === "basic") {
if (term.toLowerCase().startsWith("#")) { searchResults = await index.searchAsync({
searchType = "tags" query: currentSearchTerm,
} else {
searchType = "basic"
}
switch (searchType) {
case "tags": {
term = term.substring(1)
searchResults =
(await index?.searchAsync({ query: term, limit: numSearchResults, index: ["tags"] })) ??
[]
break
}
case "basic":
default: {
searchResults =
(await index?.searchAsync({
query: term,
limit: numSearchResults, limit: numSearchResults,
index: ["title", "content"], index: ["title", "content"],
})) ?? [] })
}
} }
const getByField = (field: string): number[] => { const getByField = (field: string): number[] => {
@ -493,7 +428,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
...getByField("content"), ...getByField("content"),
...getByField("tags"), ...getByField("tags"),
]) ])
const finalResults = [...allIds].map((id) => formatForDisplay(term, id)) const finalResults = [...allIds].map((id) => formatForDisplay(currentSearchTerm, id))
await displayResults(finalResults) await displayResults(finalResults)
} }
@ -505,7 +440,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
window.addCleanup(() => searchBar?.removeEventListener("input", onType)) window.addCleanup(() => searchBar?.removeEventListener("input", onType))
index ??= await fillDocument(data) index ??= await fillDocument(data)
registerEscapeHandler(searchSpace, hideSearch) registerEscapeHandler(container, hideSearch)
}) })
/** /**

View file

@ -88,6 +88,14 @@
visibility: hidden; visibility: hidden;
border: 1px solid var(--lightgray); border: 1px solid var(--lightgray);
@media all and (min-width: $tabletBreakpoint) {
&[data-preview] {
& .result-card > p.preview {
display: none;
}
}
}
& > div { & > div {
// vh - #search-space.margin-top // vh - #search-space.margin-top
height: calc(75vh - 12vh); height: calc(75vh - 12vh);
@ -174,7 +182,6 @@
outline: none; outline: none;
font-weight: inherit; font-weight: inherit;
&:hover,
&:focus, &:focus,
&.focus { &.focus {
background: var(--lightgray); background: var(--lightgray);
@ -184,41 +191,23 @@
margin: 0; margin: 0;
} }
& > ul > li { & > ul.tags {
margin: 0;
display: inline-block;
white-space: nowrap;
margin: 0;
overflow-wrap: normal;
}
& > ul {
list-style: none;
display: flex;
padding-left: 0;
gap: 0.4rem;
margin: 0;
margin-top: 0.45rem; margin-top: 0.45rem;
box-sizing: border-box; margin-bottom: 0;
overflow: hidden;
background-clip: border-box;
} }
& > ul > li > p { & > ul > li > p {
border-radius: 8px; border-radius: 8px;
background-color: var(--highlight); background-color: var(--highlight);
overflow: hidden; padding: 0.2rem 0.4rem;
background-clip: border-box; margin: 0 0.1rem;
padding: 0.03rem 0.4rem; line-height: 1.4rem;
margin: 0;
color: var(--secondary);
opacity: 0.85;
}
& > ul > li > .match-tag {
color: var(--tertiary);
font-weight: bold; font-weight: bold;
opacity: 1; color: var(--secondary);
&.match-tag {
color: var(--tertiary);
}
} }
& > p { & > p {