GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-24 13:24:05 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add Cmd-K support

Browse Source
This commit is contained in:
Aiden Bai 2022-04-28 23:24:31 -07:00
parent 15ac7ff5dc
commit 2127249b6c
No known key found for this signature in database
GPG Key ID: D37584388675FF3A
2 changed files with 165 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.pnpm-debug.log Normal file
View File

@ -0,0 +1,14 @@
{
"0 debug pnpm:scope": {
"selected": 1
},
"1 error pnpm": {
"code": "ERR_PNPM_NO_SCRIPT",
"err": {
"name": "pnpm",
"message": "Missing script: dev",
"code": "ERR_PNPM_NO_SCRIPT",
"stack": "pnpm: Missing script: dev\n at Object.handler (/opt/homebrew/Cellar/node/17.3.0/pnpm-global/5/node_modules/.pnpm/pnpm@6.32.9/node_modules/pnpm/dist/pnpm.cjs:178363:15)\n at async /opt/homebrew/Cellar/node/17.3.0/pnpm-global/5/node_modules/.pnpm/pnpm@6.32.9/node_modules/pnpm/dist/pnpm.cjs:182614:21\n at async run (/opt/homebrew/Cellar/node/17.3.0/pnpm-global/5/node_modules/.pnpm/pnpm@6.32.9/node_modules/pnpm/dist/pnpm.cjs:182588:34)\n at async runPnpm (/opt/homebrew/Cellar/node/17.3.0/pnpm-global/5/node_modules/.pnpm/pnpm@6.32.9/node_modules/pnpm/dist/pnpm.cjs:182807:5)\n at async /opt/homebrew/Cellar/node/17.3.0/pnpm-global/5/node_modules/.pnpm/pnpm@6.32.9/node_modules/pnpm/dist/pnpm.cjs:182799:7"
}
}
}

271
assets/js/search.js
View File

@ -9,47 +9,47 @@ const removeMarkdown = (
preserveLinks: false, preserveLinks: false,
} }
) => { ) => {
let output = markdown || ""; let output = markdown || '';
output = output.replace(/^(-\s*?|\*\s*?|_\s*?){3,}\s*$/gm, ""); output = output.replace(/^(-\s*?|\*\s*?|_\s*?){3,}\s*$/gm, '');
try { try {
if (options.stripListLeaders) { if (options.stripListLeaders) {
if (options.listUnicodeChar) if (options.listUnicodeChar)
output = output.replace( output = output.replace(
/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm, /^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm,
options.listUnicodeChar + " $1" options.listUnicodeChar + ' $1'
); );
else output = output.replace(/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm, "$1"); else output = output.replace(/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm, '$1');
} }
if (options.gfm) { if (options.gfm) {
output = output output = output
.replace(/\n={2,}/g, "\n") .replace(/\n={2,}/g, '\n')
.replace(/~{3}.*\n/g, "") .replace(/~{3}.*\n/g, '')
.replace(/~~/g, "") .replace(/~~/g, '')
.replace(/`{3}.*\n/g, ""); .replace(/`{3}.*\n/g, '');
} }
if (options.preserveLinks) { if (options.preserveLinks) {
output = output.replace(/\[(.*?)\][\[\(](.*?)[\]\)]/g, "$1 ($2)") output = output.replace(/\[(.*?)\][\[\(](.*?)[\]\)]/g, '$1 ($2)');
} }
output = output output = output
.replace(/<[^>]*>/g, "") .replace(/<[^>]*>/g, '')
.replace(/^[=\-]{2,}\s*$/g, "") .replace(/^[=\-]{2,}\s*$/g, '')
.replace(/\[\^.+?\](\: .*?$)?/g, "") .replace(/\[\^.+?\](\: .*?$)?/g, '')
.replace(/\s{0,2}\[.*?\]: .*?$/g, "") .replace(/\s{0,2}\[.*?\]: .*?$/g, '')
.replace(/\!\[(.*?)\][\[\(].*?[\]\)]/g, options.useImgAltText ? "$1" : "") .replace(/\!\[(.*?)\][\[\(].*?[\]\)]/g, options.useImgAltText ? '$1' : '')
.replace(/\[(.*?)\][\[\(].*?[\]\)]/g, "$1") .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
.replace(/^\s{0,3}>\s?/g, "") .replace(/^\s{0,3}>\s?/g, '')
.replace(/(^|\n)\s{0,3}>\s?/g, "\n\n") .replace(/(^|\n)\s{0,3}>\s?/g, '\n\n')
.replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, "") .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
.replace( .replace(
/^(\n)?\s{0,}#{1,6}\s+| {0,}(\n)?\s{0,}#{0,} {0,}(\n)?\s{0,}$/gm, /^(\n)?\s{0,}#{1,6}\s+| {0,}(\n)?\s{0,}#{0,} {0,}(\n)?\s{0,}$/gm,
"$1$2$3" '$1$2$3'
) )
.replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, "$2") .replace(/([\*_]{1,3})(\S.*?\S{0,1})\1/g, '$2')
.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(/(`{3,})(.*?)\1/gm, '$2')
.replace(/`(.+?)`/g, "$1") .replace(/`(.+?)`/g, '$1')
.replace(/\n{2,}/g, "\n\n"); .replace(/\n{2,}/g, '\n\n');
} catch (e) { } catch (e) {
console.error(e); console.error(e);
return markdown; return markdown;
@ -58,182 +58,203 @@ const removeMarkdown = (
}; };
// ----- // -----
(async function() { (async function () {
const encoder = str => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])+/) const encoder = (str) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])+/);
const contentIndex = new FlexSearch.Document({ const contentIndex = new FlexSearch.Document({
cache: true, cache: true,
charset: "latin:extra", charset: 'latin:extra',
optimize: true, optimize: true,
index: [{ index: [
field: "content", {
tokenize: "reverse", field: 'content',
tokenize: 'reverse',
encode: encoder, encode: encoder,
}, { },
field: "title", {
tokenize: "forward", field: 'title',
tokenize: 'forward',
encode: encoder, encode: encoder,
}] },
}) ],
});
const { content } = await fetchData const { content } = await fetchData;
for (const [key, value] of Object.entries(content)) { for (const [key, value] of Object.entries(content)) {
contentIndex.add({ contentIndex.add({
id: key, id: key,
title: value.title, title: value.title,
content: removeMarkdown(value.content), content: removeMarkdown(value.content),
}) });
} }
const highlight = (content, term) => { const highlight = (content, term) => {
const highlightWindow = 20 const highlightWindow = 20;
const tokenizedTerm = term.split(/\s+/).filter(t => t !== "") const tokenizedTerm = term.split(/\s+/).filter((t) => t !== '');
const splitText = content.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 includesCheck = (token) =>
tokenizedTerm.some((term) =>
token.toLowerCase().startsWith(term.toLowerCase())
);
const occurrencesIndices = splitText const occurrencesIndices = splitText.map(includesCheck);
.map(includesCheck)
// calculate best index // calculate best index
let bestSum = 0 let bestSum = 0;
let bestIndex = 0 let bestIndex = 0;
for (let i = 0; i < Math.max(occurrencesIndices.length - highlightWindow, 0); i++) { for (
const window = occurrencesIndices.slice(i, i + highlightWindow) let i = 0;
const windowSum = window.reduce((total, cur) => total + cur, 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) { if (windowSum >= bestSum) {
bestSum = windowSum bestSum = windowSum;
bestIndex = i bestIndex = i;
} }
} }
const startIndex = Math.max(bestIndex - highlightWindow, 0) const startIndex = Math.max(bestIndex - highlightWindow, 0);
const endIndex = Math.min(startIndex + 2 * highlightWindow, splitText.length) const endIndex = Math.min(
startIndex + 2 * highlightWindow,
splitText.length
);
const mappedText = splitText const mappedText = splitText
.slice(startIndex, endIndex) .slice(startIndex, endIndex)
.map(token => { .map((token) => {
if (includesCheck(token)) { if (includesCheck(token)) {
return `<span class="search-highlight">${token}</span>` return `<span class="search-highlight">${token}</span>`;
} }
return token return token;
}) })
.join(" ") .join(' ')
.replaceAll('</span> <span class="search-highlight">', " ") .replaceAll('</span> <span class="search-highlight">', ' ');
return `${startIndex === 0 ? "" : "..."}${mappedText}${endIndex === splitText.length ? "" : "..."}` return `${startIndex === 0 ? '' : '...'}${mappedText}${
} endIndex === splitText.length ? '' : '...'
}`;
};
const resultToHTML = ({ url, title, content, term }) => { const resultToHTML = ({ url, title, content, term }) => {
const text = removeMarkdown(content) const text = removeMarkdown(content);
const resultTitle = highlight(title, term) const resultTitle = highlight(title, term);
const resultText = highlight(text, term) const resultText = highlight(text, term);
return `<button class="result-card" id="${url}"> return `<button class="result-card" id="${url}">
<h3>${resultTitle}</h3> <h3>${resultTitle}</h3>
<p>${resultText}</p> <p>${resultText}</p>
</button>` </button>`;
} };
const redir = (id, term) => { const redir = (id, term) => {
window.location.href = `${BASE_URL}${id}#:~:text=${encodeURIComponent(term)}/` navigate(
} new URL(
`${BASE_URL.slice(0, -1)}${id}#:~:text=${encodeURIComponent(term)}/`
)
);
};
const formatForDisplay = id => ({ const formatForDisplay = (id) => ({
id, id,
url: id, url: id,
title: content[id].title, title: content[id].title,
content: content[id].content content: content[id].content,
}) });
const source = document.getElementById('search-bar') const source = document.getElementById('search-bar');
const results = document.getElementById("results-container") const results = document.getElementById('results-container');
let term let term;
source.addEventListener("keyup", (e) => { source.addEventListener('keyup', (e) => {
if (e.key === "Enter") { if (e.key === 'Enter') {
const anchor = document.getElementsByClassName("result-card")[0] const anchor = document.getElementsByClassName('result-card')[0];
redir(anchor.id, term) redir(anchor.id, term);
} }
}) });
source.addEventListener('input', (e) => { source.addEventListener('input', (e) => {
term = e.target.value term = e.target.value;
const searchResults = contentIndex.search(term, [ const searchResults = contentIndex.search(term, [
{ {
field: "content", field: 'content',
limit: 10, limit: 10,
}, },
{ {
field: "title", field: 'title',
limit: 5, limit: 5,
} },
]) ]);
const getByField = field => { const getByField = (field) => {
const results = searchResults.filter(x => x.field === field) const results = searchResults.filter((x) => x.field === field);
if (results.length === 0) { if (results.length === 0) {
return [] return [];
} else { } else {
return [...results[0].result] return [...results[0].result];
} }
} };
const allIds = new Set([...getByField('title'), ...getByField('content')]) const allIds = new Set([...getByField('title'), ...getByField('content')]);
const finalResults = [...allIds].map(formatForDisplay) const finalResults = [...allIds].map(formatForDisplay);
// display // display
if (finalResults.length === 0) { if (finalResults.length === 0) {
results.innerHTML = `<button class="result-card"> results.innerHTML = `<button class="result-card">
<h3>No results.</h3> <h3>No results.</h3>
<p>Try another search term?</p> <p>Try another search term?</p>
</button>` </button>`;
} else { } else {
results.innerHTML = finalResults results.innerHTML = finalResults
.map(result => resultToHTML({ .map((result) =>
resultToHTML({
...result, ...result,
term, term,
}))
.join("\n")
const anchors = document.getElementsByClassName("result-card");
[...anchors].forEach(anchor => {
anchor.onclick = () => redir(anchor.id, term)
}) })
)
.join('\n');
const anchors = document.getElementsByClassName('result-card');
[...anchors].forEach((anchor) => {
anchor.onclick = () => redir(anchor.id, term);
});
} }
}) });
const searchContainer = document.getElementById('search-container');
const searchContainer = document.getElementById("search-container")
function openSearch() { function openSearch() {
if (searchContainer.style.display === "none" || searchContainer.style.display === "") { if (
source.value = "" searchContainer.style.display === 'none' ||
results.innerHTML = "" searchContainer.style.display === ''
searchContainer.style.display = "block" ) {
source.focus() source.value = '';
results.innerHTML = '';
searchContainer.style.display = 'block';
source.focus();
} else { } else {
searchContainer.style.display = "none" searchContainer.style.display = 'none';
} }
} }
function closeSearch() { function closeSearch() {
searchContainer.style.display = "none" searchContainer.style.display = 'none';
} }
document.addEventListener('keydown', (event) => { document.addEventListener('keydown', (event) => {
if (event.key === "k" && (event.ctrlKey || event.metaKey)) { if (event.key === 'k' && (event.ctrlKey || event.metaKey)) {
event.preventDefault() event.preventDefault();
openSearch() openSearch();
} }
if (event.key === "Escape") { if (event.key === 'Escape') {
event.preventDefault() event.preventDefault();
closeSearch() closeSearch();
} }
}) });
const searchButton = document.getElementById("search-icon") const searchButton = document.getElementById('search-icon');
searchButton.addEventListener('click', (evt) => { searchButton.addEventListener('click', (evt) => {
openSearch() openSearch();
}) });
searchButton.addEventListener('keydown', (evt) => { searchButton.addEventListener('keydown', (evt) => {
openSearch() openSearch();
}) });
searchContainer.addEventListener('click', (evt) => { searchContainer.addEventListener('click', (evt) => {
closeSearch() closeSearch();
}) });
document.getElementById("search-space").addEventListener('click', (evt) => { document.getElementById('search-space').addEventListener('click', (evt) => {
evt.stopPropagation() evt.stopPropagation();
}) });
})() })();