scapegoat/Docs2.git

			@@ -15,10 +15,30 @@
			type SearchType = "basic" \| "tags"
			let searchType: SearchType = "basic"
			let currentSearchTerm: string = ""
			let index: FlexSearch.Document<Item> \| undefined = undefined
			const p = new DOMParser()
			const encoder = (str: string) => str.toLowerCase().split(/([^a-z]\|[^\x00-\x7F])/)
			let index = new FlexSearch.Document<Item>({
			charset: "latin:extra",
			encode: encoder,
			document: {
			id: "id",
			index: [
			{
			field: "title",
			tokenize: "forward",
			},
			{
			field: "content",
			tokenize: "forward",
			},
			{
			field: "tags",
			tokenize: "forward",
			},
			],
			},
			})

			const p = new DOMParser()
			const fetchContentCache: Map<FullSlug, Element[]> = new Map()
			const contextWindowWords = 30
			const numSearchResults = 8
			@@ -26,7 +46,6 @@

			const tokenizeTerm = (term: string) => {
			const tokens = term.split(/\s+/).filter((t) => t.trim() !== "")

			const tokenLen = tokens.length
			if (tokenLen > 1) {
			for (let i = 1; i < tokenLen; i++) {
			@@ -125,10 +144,8 @@

			document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
			const currentSlug = e.detail.url

			const data = await fetchData
			const container = document.getElementById("search-container")
			const searchSpace = document.getElementById("search-space")
			const sidebar = container?.closest(".sidebar") as HTMLElement
			const searchIcon = document.getElementById("search-icon")
			const searchBar = document.getElementById("search-bar") as HTMLInputElement \| null
			@@ -171,7 +188,7 @@
			removeAllChildren(preview)
			}
			if (searchLayout) {
			searchLayout.style.visibility = "hidden"
			searchLayout.classList.remove("display-results")
			}

			searchType = "basic" // reset search type after closing
			@@ -193,6 +210,7 @@
			e.preventDefault()
			const searchBarOpen = container?.classList.contains("active")
			searchBarOpen ? hideSearch() : showSearch("basic")
			return
			} else if (e.shiftKey && (e.ctrlKey \|\| e.metaKey) && e.key.toLowerCase() === "k") {
			// Hotkey to open tag search
			e.preventDefault()
			@@ -201,6 +219,7 @@

			// add "#" prefix for tag search
			if (searchBar) searchBar.value = "#"
			return
			}

			if (currentHover) {
			@@ -262,69 +281,31 @@
			}
			}

			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 slug = idDataMap[id]
			return {
			id,
			slug,
			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:
			searchType === "tags"
			? trimContent(data[slug].content)
			: highlight(term, data[slug].content ?? "", true),
			tags: highlightTags(term, data[slug].tags),
			content: highlight(term, data[slug].content ?? "", true),
			tags: highlightTags(term.substring(1), data[slug].tags),
			}
			}

			function highlightTags(term: string, tags: string[]) {
			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 {
			if (!tags \|\| searchType !== "tags") {
			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 {
			@@ -332,34 +313,26 @@
			}

			const resultToHTML = ({ slug, title, content, tags }: Item) => {
			const htmlTags = tags.length > 0 ? `<ul>${tags.join("")}</ul>` : ``
			const resultContent = enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`

			const htmlTags = tags.length > 0 ? `<ul class="tags">${tags.join("")}</ul>` : ``
			const itemTile = document.createElement("a")
			itemTile.classList.add("result-card")
			Object.assign(itemTile, {
			id: slug,
			href: resolveUrl(slug).toString(),
			innerHTML: `<h3>${title}</h3>${htmlTags}${resultContent}`,
			})
			itemTile.id = slug
			itemTile.href = resolveUrl(slug).toString()
			itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p class="preview">${content}</p>`

			async function onMouseEnter(ev: MouseEvent) {
			// Actually when we hover, we need to clean all highlights within the result childs
			if (!ev.target) return
			for (const el of document.getElementsByClassName(
			"result-card",
			) as HTMLCollectionOf<HTMLElement>) {
			el.classList.remove("focus")
			el.blur()
			}
			currentHover?.classList.remove("focus")
			currentHover?.blur()
			const target = ev.target as HTMLInputElement
			await displayPreview(target)
			currentHover = target
			currentHover.classList.remove("focus")
			currentHover.classList.add("focus")
			}

			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")
			}

			@@ -373,9 +346,12 @@
			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
			}
			@@ -386,22 +362,22 @@
			removeAllChildren(results)
			if (finalResults.length === 0) {
			results.innerHTML = `<a class="result-card no-match">
			<h3>No results.</h3>
			<p>Try another search term?</p>
			</a>`
			<h3>No results.</h3>
			<p>Try another search term?</p>
			</a>`
			} else {
			results.append(...finalResults.map(resultToHTML))
			}
			// focus on first result, then also dispatch preview immediately
			if (results?.firstElementChild) {

			if (finalResults.length === 0 && preview) {
			// no results, clear previous preview
			removeAllChildren(preview)
			} else {
			// focus on first result, then also dispatch preview immediately
			const firstChild = results.firstElementChild as HTMLElement
			if (firstChild.classList.contains("no-match")) {
			removeAllChildren(preview as HTMLElement)
			} else {
			firstChild.classList.add("focus")
			currentHover = firstChild as HTMLInputElement
			await displayPreview(firstChild)
			}
			firstChild.classList.add("focus")
			currentHover = firstChild as HTMLInputElement
			await displayPreview(firstChild)
			}
			}

			@@ -427,59 +403,43 @@
			}

			async function displayPreview(el: HTMLElement \| null) {
			if (!searchLayout \|\| !enablePreview \|\| !el) return

			if (!searchLayout \|\| !enablePreview \|\| !el \|\| !preview) return
			const slug = el.id as FullSlug
			el.classList.add("focus")

			removeAllChildren(preview as HTMLElement)

			previewInner = document.createElement("div")
			previewInner.classList.add("preview-inner")
			preview?.appendChild(previewInner)

			const innerDiv = await fetchContent(slug).then((contents) =>
			contents.map((el) => highlightHTML(currentSearchTerm, el as HTMLElement)),
			contents.flatMap((el) => [...highlightHTML(currentSearchTerm, el as HTMLElement).children]),
			)
			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"]) {
			let term = (e.target as HTMLInputElement).value
			let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
			if (!searchLayout \|\| !index) return
			currentSearchTerm = (e.target as HTMLInputElement).value
			searchLayout.classList.toggle("display-results", currentSearchTerm !== "")
			searchType = currentSearchTerm.startsWith("#") ? "tags" : "basic"

			if (searchLayout) {
			searchLayout.style.visibility = "visible"
			}

			if (term === "" && searchLayout) {
			searchLayout.style.visibility = "hidden"
			}

			if (term.toLowerCase().startsWith("#")) {
			searchType = "tags"
			} 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,
			index: ["title", "content"],
			})) ?? []
			}
			let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
			if (searchType === "tags") {
			searchResults = await index.searchAsync({
			query: currentSearchTerm.substring(1),
			limit: numSearchResults,
			index: ["tags"],
			})
			} else if (searchType === "basic") {
			searchResults = await index.searchAsync({
			query: currentSearchTerm,
			limit: numSearchResults,
			index: ["title", "content"],
			})
			}

			const getByField = (field: string): number[] => {
			@@ -493,7 +453,7 @@
			...getByField("content"),
			...getByField("tags"),
			])
			const finalResults = [...allIds].map((id) => formatForDisplay(term, id))
			const finalResults = [...allIds].map((id) => formatForDisplay(currentSearchTerm, id))
			await displayResults(finalResults)
			}

			@@ -504,8 +464,8 @@
			searchBar?.addEventListener("input", onType)
			window.addCleanup(() => searchBar?.removeEventListener("input", onType))

			index ??= await fillDocument(data)
			registerEscapeHandler(searchSpace, hideSearch)
			registerEscapeHandler(container, hideSearch)
			await fillDocument(data)
			})

			/**
			@@ -514,37 +474,19 @@
			* @param data data to fill index with
			*/
			async function fillDocument(data: { [key: FullSlug]: ContentDetails }) {
			const index = new FlexSearch.Document<Item>({
			charset: "latin:extra",
			encode: encoder,
			document: {
			id: "id",
			index: [
			{
			field: "title",
			tokenize: "forward",
			},
			{
			field: "content",
			tokenize: "forward",
			},
			{
			field: "tags",
			tokenize: "forward",
			},
			],
			},
			})
			let id = 0
			const promises: Array<Promise<unknown>> = []
			for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
			await index.addAsync(id++, {
			id,
			slug: slug as FullSlug,
			title: fileData.title,
			content: fileData.content,
			tags: fileData.tags,
			})
			promises.push(
			index.addAsync(id++, {
			id,
			slug: slug as FullSlug,
			title: fileData.title,
			content: fileData.content,
			tags: fileData.tags,
			}),
			)
			}

			return index
			return await Promise.all(promises)
			}