From 71488dec88212c82867f33e1f193757dfff93a08 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Sun, 31 Jul 2022 10:54:23 -0700 Subject: [PATCH] refactor: move search utils to util.js --- assets/js/search.js | 207 +---------------------------------- assets/js/util.js | 207 +++++++++++++++++++++++++++++++++++ layouts/partials/head.html | 9 +- layouts/partials/search.html | 14 ++- 4 files changed, 224 insertions(+), 213 deletions(-) create mode 100644 assets/js/util.js diff --git a/assets/js/search.js b/assets/js/search.js index d32d9857..d296e65d 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -1,115 +1,4 @@ -// code from https://github.com/danestves/markdown-to-text -const removeMarkdown = ( - markdown, - options = { - listUnicodeChar: false, - stripListLeaders: true, - gfm: true, - useImgAltText: false, - preserveLinks: false, - }, -) => { - let output = markdown || "" - output = output.replace(/^(-\s*?|\*\s*?|_\s*?){3,}\s*$/gm, "") - - try { - if (options.stripListLeaders) { - if (options.listUnicodeChar) - output = output.replace(/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm, options.listUnicodeChar + " $1") - else output = output.replace(/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm, "$1") - } - if (options.gfm) { - output = output - .replace(/\n={2,}/g, "\n") - .replace(/~{3}.*\n/g, "") - .replace(/~~/g, "") - .replace(/`{3}.*\n/g, "") - } - if (options.preserveLinks) { - output = output.replace(/\[(.*?)\][\[\(](.*?)[\]\)]/g, "$1 ($2)") - } - output = output - .replace(/<[^>]*>/g, "") - .replace(/^[=\-]{2,}\s*$/g, "") - .replace(/\[\^.+?\](\: .*?$)?/g, "") - .replace(/(#{1,6})\s+(.+)\1?/g, "$2") - .replace(/\s{0,2}\[.*?\]: .*?$/g, "") - .replace(/\!\[(.*?)\][\[\(].*?[\]\)]/g, options.useImgAltText ? "$1" : "") - .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, "$1") - .replace(/!?\[\[\S[^\[\]\|]*(?:\|([^\[\]]*))?\S\]\]/g, "$1") - .replace(/^\s{0,3}>\s?/g, "") - .replace(/(^|\n)\s{0,3}>\s?/g, "\n\n") - .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, "") - .replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, "$2") - .replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, "$2") - .replace(/(`{3,})(.*?)\1/gm, "$2") - .replace(/`(.+?)`/g, "$1") - .replace(/\n{2,}/g, "\n\n") - .replace(/\[![a-zA-Z]+\][-\+]? /g, "") - } catch (e) { - console.error(e) - return markdown - } - return output -} -// ----- - -const highlight = (content, term) => { - const highlightWindow = 20 - - // try to find direct match first - const directMatchIdx = content.indexOf(term) - if (directMatchIdx !== -1) { - const h = highlightWindow / 2 - const before = content.substring(0, directMatchIdx).split(" ").slice(-h) - const after = content - .substring(directMatchIdx + term.length, content.length - 1) - .split(" ") - .slice(0, h) - return ( - (before.length == h ? `...${before.join(" ")}` : before.join(" ")) + - `${term}` + - after.join(" ") - ) - } - - const tokenizedTerm = term.split(/\s+/).filter((t) => t !== "") - const splitText = content.split(/\s+/).filter((t) => t !== "") - const includesCheck = (token) => - tokenizedTerm.some((term) => token.toLowerCase().startsWith(term.toLowerCase())) - - const occurrencesIndices = splitText.map(includesCheck) - - // calculate best index - let bestSum = 0 - let bestIndex = 0 - for (let i = 0; i < Math.max(occurrencesIndices.length - highlightWindow, 0); i++) { - const window = occurrencesIndices.slice(i, i + highlightWindow) - const windowSum = window.reduce((total, cur) => total + cur, 0) - if (windowSum >= bestSum) { - bestSum = windowSum - bestIndex = i - } - } - - const startIndex = Math.max(bestIndex - highlightWindow, 0) - const endIndex = Math.min(startIndex + 2 * highlightWindow, splitText.length) - const mappedText = splitText - .slice(startIndex, endIndex) - .map((token) => { - if (includesCheck(token)) { - return `${token}` - } - return token - }) - .join(" ") - .replaceAll(' ', " ") - return `${startIndex === 0 ? "" : "..."}${mappedText}${ - endIndex === splitText.length ? "" : "..." - }` -} - -;(async function () { +; (async function() { const encoder = (str) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])+/) const contentIndex = new FlexSearch.Document({ cache: true, @@ -138,25 +27,6 @@ const highlight = (content, term) => { }) } - const resultToHTML = ({ url, title, content, term }) => { - const text = removeMarkdown(content) - const resultTitle = highlight(title, term) - const resultText = highlight(text, term) - return `` - } - - const redir = (id, term) => { - // SPA navigation - window.Million.navigate( - new URL(`${BASE_URL.replace(/\/$/g, "")}${id}#:~:text=${encodeURIComponent(term)}/`), - ".singlePage", - ) - closeSearch() - } - const formatForDisplay = (id) => ({ id, url: id, @@ -164,16 +34,7 @@ const highlight = (content, term) => { content: content[id].content, }) - const source = document.getElementById("search-bar") - const results = document.getElementById("results-container") - let term - source.addEventListener("keyup", (e) => { - if (e.key === "Enter") { - const anchor = document.getElementsByClassName("result-card")[0] - redir(anchor.id, term) - } - }) - source.addEventListener("input", (e) => { + registerHandlers((e) => { term = e.target.value const searchResults = contentIndex.search(term, [ { @@ -195,68 +56,6 @@ const highlight = (content, term) => { } const allIds = new Set([...getByField("title"), ...getByField("content")]) const finalResults = [...allIds].map(formatForDisplay) - - // display - if (finalResults.length === 0) { - results.innerHTML = `` - } else { - results.innerHTML = finalResults - .map((result) => - resultToHTML({ - ...result, - term, - }), - ) - .join("\n") - const anchors = [...document.getElementsByClassName("result-card")] - anchors.forEach((anchor) => { - anchor.onclick = () => redir(anchor.id, term) - }) - } - }) - - const searchContainer = document.getElementById("search-container") - - function openSearch() { - if (searchContainer.style.display === "none" || searchContainer.style.display === "") { - source.value = "" - results.innerHTML = "" - searchContainer.style.display = "block" - source.focus() - } else { - searchContainer.style.display = "none" - } - } - - function closeSearch() { - searchContainer.style.display = "none" - } - - document.addEventListener("keydown", (event) => { - if (event.key === "k" && (event.ctrlKey || event.metaKey)) { - event.preventDefault() - openSearch() - } - if (event.key === "Escape") { - event.preventDefault() - closeSearch() - } - }) - - const searchButton = document.getElementById("search-icon") - searchButton.addEventListener("click", (evt) => { - openSearch() - }) - searchButton.addEventListener("keydown", (evt) => { - openSearch() - }) - searchContainer.addEventListener("click", (evt) => { - closeSearch() - }) - document.getElementById("search-space").addEventListener("click", (evt) => { - evt.stopPropagation() + displayResults(finalResults) }) })() diff --git a/assets/js/util.js b/assets/js/util.js new file mode 100644 index 00000000..c4652387 --- /dev/null +++ b/assets/js/util.js @@ -0,0 +1,207 @@ +// code from https://github.com/danestves/markdown-to-text +const removeMarkdown = ( + markdown, + options = { + listUnicodeChar: false, + stripListLeaders: true, + gfm: true, + useImgAltText: false, + preserveLinks: false, + }, +) => { + let output = markdown || "" + output = output.replace(/^(-\s*?|\*\s*?|_\s*?){3,}\s*$/gm, "") + + try { + if (options.stripListLeaders) { + if (options.listUnicodeChar) + output = output.replace(/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm, options.listUnicodeChar + " $1") + else output = output.replace(/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm, "$1") + } + if (options.gfm) { + output = output + .replace(/\n={2,}/g, "\n") + .replace(/~{3}.*\n/g, "") + .replace(/~~/g, "") + .replace(/`{3}.*\n/g, "") + } + if (options.preserveLinks) { + output = output.replace(/\[(.*?)\][\[\(](.*?)[\]\)]/g, "$1 ($2)") + } + output = output + .replace(/<[^>]*>/g, "") + .replace(/^[=\-]{2,}\s*$/g, "") + .replace(/\[\^.+?\](\: .*?$)?/g, "") + .replace(/(#{1,6})\s+(.+)\1?/g, "$2") + .replace(/\s{0,2}\[.*?\]: .*?$/g, "") + .replace(/\!\[(.*?)\][\[\(].*?[\]\)]/g, options.useImgAltText ? "$1" : "") + .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, "$1") + .replace(/!?\[\[\S[^\[\]\|]*(?:\|([^\[\]]*))?\S\]\]/g, "$1") + .replace(/^\s{0,3}>\s?/g, "") + .replace(/(^|\n)\s{0,3}>\s?/g, "\n\n") + .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, "") + .replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, "$2") + .replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, "$2") + .replace(/(`{3,})(.*?)\1/gm, "$2") + .replace(/`(.+?)`/g, "$1") + .replace(/\n{2,}/g, "\n\n") + .replace(/\[![a-zA-Z]+\][-\+]? /g, "") + } catch (e) { + console.error(e) + return markdown + } + return output +} + +const highlight = (content, term) => { + const highlightWindow = 20 + + // try to find direct match first + const directMatchIdx = content.indexOf(term) + if (directMatchIdx !== -1) { + const h = highlightWindow / 2 + const before = content.substring(0, directMatchIdx).split(" ").slice(-h) + const after = content + .substring(directMatchIdx + term.length, content.length - 1) + .split(" ") + .slice(0, h) + return ( + (before.length == h ? `...${before.join(" ")}` : before.join(" ")) + + `${term}` + + after.join(" ") + ) + } + + const tokenizedTerm = term.split(/\s+/).filter((t) => t !== "") + const splitText = content.split(/\s+/).filter((t) => t !== "") + const includesCheck = (token) => + tokenizedTerm.some((term) => token.toLowerCase().startsWith(term.toLowerCase())) + + const occurrencesIndices = splitText.map(includesCheck) + + // calculate best index + let bestSum = 0 + let bestIndex = 0 + for (let i = 0; i < Math.max(occurrencesIndices.length - highlightWindow, 0); i++) { + const window = occurrencesIndices.slice(i, i + highlightWindow) + const windowSum = window.reduce((total, cur) => total + cur, 0) + if (windowSum >= bestSum) { + bestSum = windowSum + bestIndex = i + } + } + + const startIndex = Math.max(bestIndex - highlightWindow, 0) + const endIndex = Math.min(startIndex + 2 * highlightWindow, splitText.length) + const mappedText = splitText + .slice(startIndex, endIndex) + .map((token) => { + if (includesCheck(token)) { + return `${token}` + } + return token + }) + .join(" ") + .replaceAll(' ', " ") + return `${startIndex === 0 ? "" : "..."}${mappedText}${endIndex === splitText.length ? "" : "..." + }` +} + +// Common utilities for search +const resultToHTML = ({ url, title, content, term }) => { + const text = removeMarkdown(content) + const resultTitle = highlight(title, term) + const resultText = highlight(text, term) + return `` +} + +const redir = (id, term) => { + // SPA navigation + window.Million.navigate( + new URL(`${BASE_URL.replace(/\/$/g, "")}${id}#:~:text=${encodeURIComponent(term)}/`), + ".singlePage", + ) + closeSearch() +} + +function openSearch() { + const source = document.getElementById("search-bar") + const results = document.getElementById("results-container") + const searchContainer = document.getElementById("search-container") + if (searchContainer.style.display === "none" || searchContainer.style.display === "") { + source.value = "" + results.innerHTML = "" + searchContainer.style.display = "block" + source.focus() + } else { + searchContainer.style.display = "none" + } +} + +function closeSearch() { + const searchContainer = document.getElementById("search-container") + searchContainer.style.display = "none" +} + +const registerHandlers = (onInputFn) => { + const source = document.getElementById("search-bar") + const searchContainer = document.getElementById("search-container") + let term + source.addEventListener("keyup", (e) => { + if (e.key === "Enter") { + const anchor = document.getElementsByClassName("result-card")[0] + redir(anchor.id, term) + } + }) + source.addEventListener("input", onInputFn) + document.addEventListener("keydown", (event) => { + if (event.key === "k" && (event.ctrlKey || event.metaKey)) { + event.preventDefault() + openSearch() + } + if (event.key === "Escape") { + event.preventDefault() + closeSearch() + } + }) + + const searchButton = document.getElementById("search-icon") + searchButton.addEventListener("click", (_) => { + openSearch() + }) + searchButton.addEventListener("keydown", (_) => { + openSearch() + }) + searchContainer.addEventListener("click", (_) => { + closeSearch() + }) + document.getElementById("search-space").addEventListener("click", (evt) => { + evt.stopPropagation() + }) +} + +const displayResults = (finalResults) => { + const results = document.getElementById("results-container") + if (finalResults.length === 0) { + results.innerHTML = `` + } else { + results.innerHTML = finalResults + .map((result) => + resultToHTML({ + ...result, + term, + }), + ) + .join("\n") + const anchors = [...document.getElementsByClassName("result-card")] + anchors.forEach((anchor) => { + anchor.onclick = () => redir(anchor.id, term) + }) + } +} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 60db998e..acc2efd2 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -40,10 +40,13 @@ - {{ $darkMode := resources.Get "js/darkmode.js" | resources.ExecuteAsTemplate "js/darkmode.js" . | resources.Fingerprint "md5" | resources.Minify }} - + {{$scripts := (slice "js/darkmode.js" "js/util.js")}} + {{range $scripts}} + {{$scriptname := .}} + {{ $s := resources.Get $scriptname | resources.ExecuteAsTemplate $scriptname . | resources.Fingerprint "md5" | resources.Minify }} + + {{end}} {{partial "katex.html" .}} - diff --git a/layouts/partials/search.html b/layouts/partials/search.html index f727184a..5b0bbb7d 100644 --- a/layouts/partials/search.html +++ b/layouts/partials/search.html @@ -1,10 +1,12 @@
-
- -
-
+
+ +
+
- -{{ $js := resources.Get "js/search.js" | resources.Fingerprint "md5" | resources.Minify }} + +{{ $js := resources.Get "js/search.js" | resources.Fingerprint "md5" | resources.Minify }}