feat: dynamically fetch indices
This commit is contained in:
Jacky Zhao
parent
556d6799f2
commit
fdf1d9bbe3
2
.github/workflows/deploy.yaml
vendored
2
.github/workflows/deploy.yaml
vendored
@ -12,7 +12,7 @@ jobs:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- name: Build Link Index
|
||||
uses: jackyzha0/hugo-obsidian@v2.7
|
||||
uses: jackyzha0/hugo-obsidian@v2.8
|
||||
with:
|
||||
index: true
|
||||
input: content
|
||||
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@ -3,5 +3,5 @@ public
|
||||
resources
|
||||
.idea
|
||||
content/.obsidian
|
||||
data/linkIndex.yaml
|
||||
data/contentIndex.yaml
|
||||
static/linkIndex.json
|
||||
static/contentIndex.json
|
||||
2
Makefile
2
Makefile
@ -4,4 +4,4 @@ help: ## Show all Makefile targets
|
||||
@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
|
||||
|
||||
serve: ## serve
|
||||
hugo-obsidian -input=content -output=data -index -root=. && hugo server
|
||||
hugo-obsidian -input=content -output=static -index -root=. && hugo server
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 🪴 Quartz 3
|
||||
title: 🪴 Quartz 3.1
|
||||
---
|
||||
Host your second brain and [digital garden](https://jzhao.xyz/posts/digital-gardening) for free. Quartz features
|
||||
1. Extremely fast full-text search by pressing `/`
|
||||
|
||||
@ -5,7 +5,7 @@ description:
|
||||
Here is the page description. This is an example Quartz site that details installation,
|
||||
setup, customization, and troubleshooting for Quartz itself.
|
||||
page_title:
|
||||
"🪴 Quartz 3"
|
||||
"🪴 Quartz 3.1"
|
||||
links:
|
||||
- link_name: Twitter
|
||||
link: https://twitter.com/_jzhao
|
||||
|
||||
@ -3,8 +3,9 @@
|
||||
{{$url := urls.Parse .Site.BaseURL }}
|
||||
{{$host := strings.TrimRight "/" $url.Path }}
|
||||
{{$curPage := strings.TrimPrefix $host (strings.TrimRight "/" .Page.RelPermalink) }}
|
||||
{{$inbound := index $.Site.Data.linkIndex.index.backlinks $curPage}}
|
||||
{{$contentTable := $.Site.Data.contentIndex}}
|
||||
{{$linkIndex := getJSON "/static/linkIndex.json"}}
|
||||
{{$inbound := index $linkIndex.index.backlinks $curPage}}
|
||||
{{$contentTable := getJSON "/static/contentIndex.json"}}
|
||||
{{if $inbound}}
|
||||
{{$cleanedInbound := apply (apply $inbound "index" "." "source") "replace" "." " " "-"}}
|
||||
{{- range $cleanedInbound | uniq -}}
|
||||
|
||||
@ -11,6 +11,8 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
async function run() {
|
||||
const { index, links, content } = await fetchData()
|
||||
const curPage = {{ strings.TrimRight "/" .Page.Permalink }}.replace({{strings.TrimRight "/" .Site.BaseURL }}, "")
|
||||
const pathColors = {{$.Site.Data.graphConfig.paths}}
|
||||
let depth = {{$.Site.Data.graphConfig.depth}}
|
||||
@ -225,12 +227,15 @@
|
||||
.attr("x1", d => d.source.x)
|
||||
.attr("y1", d => d.source.y)
|
||||
.attr("x2", d => d.target.x)
|
||||
.attr("y2", d => d.target.y);
|
||||
.attr("y2", d => d.target.y)
|
||||
node
|
||||
.attr("cx", d => d.x)
|
||||
.attr("cy", d => d.y);
|
||||
.attr("cy", d => d.y)
|
||||
labels
|
||||
.attr("x", d => d.x)
|
||||
.attr("y", d => d.y);
|
||||
.attr("y", d => d.y)
|
||||
});
|
||||
}
|
||||
|
||||
run()
|
||||
</script>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
<!-- CSS Stylesheets and Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600;700&family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
|
||||
{{ $css := slice "base.scss" "darkmode.scss" "syntax.scss" "custom.scss"}}
|
||||
{{$css := slice "base.scss" "darkmode.scss" "syntax.scss" "custom.scss"}}
|
||||
{{range $css}}
|
||||
{{$sass := resources.Get . | resources.ToCSS }}
|
||||
{{with $sass | minify}}
|
||||
@ -26,9 +26,24 @@
|
||||
|
||||
<!-- Preload page vars -->
|
||||
<script>
|
||||
const content = {{$.Site.Data.contentIndex}}
|
||||
const index = {{$.Site.Data.linkIndex.index}}
|
||||
const links = {{$.Site.Data.linkIndex.links}}
|
||||
const fetchData = async () => {
|
||||
const promises = [
|
||||
fetch("/linkIndex.json")
|
||||
.then(data => data.json())
|
||||
.then(data => ({
|
||||
index: data.index,
|
||||
links: data.links,
|
||||
})),
|
||||
fetch("/contentIndex.json")
|
||||
.then(data => data.json()),
|
||||
]
|
||||
const [{index, links}, content] = await Promise.all(promises)
|
||||
return ({
|
||||
index,
|
||||
links,
|
||||
content,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
{{ template "_internal/google_analytics.html" . }}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
{{if $.Site.Data.config.enableLinkPreview}}
|
||||
<script>
|
||||
async function run() {
|
||||
const {content} = await fetchData()
|
||||
function htmlToElement(html) {
|
||||
const template = document.createElement('template')
|
||||
html = html.trim()
|
||||
@ -11,7 +13,6 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
[...document.getElementsByClassName("internal-link")]
|
||||
.forEach(li => {
|
||||
console.log(li.dataset.src.replace(pathRegex, ''))
|
||||
const linkDest = content[li.dataset.src.replace(pathRegex, '')]
|
||||
if (linkDest) {
|
||||
const popoverElement = `<div class="popover">
|
||||
@ -29,5 +30,8 @@
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
run()
|
||||
</script>
|
||||
{{end}}
|
||||
@ -67,189 +67,194 @@
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
const contentIndex = new FlexSearch.Document({
|
||||
cache: true,
|
||||
charset: "latin:extra",
|
||||
optimize: true,
|
||||
worker: true,
|
||||
document: {
|
||||
index: [{
|
||||
field: "content",
|
||||
tokenize: "strict",
|
||||
context: {
|
||||
resolution: 5,
|
||||
depth: 3,
|
||||
bidirectional: true
|
||||
},
|
||||
suggest: true,
|
||||
}, {
|
||||
field: "title",
|
||||
tokenize: "forward",
|
||||
}]
|
||||
}
|
||||
async function run() {
|
||||
const contentIndex = new FlexSearch.Document({
|
||||
cache: true,
|
||||
charset: "latin:extra",
|
||||
optimize: true,
|
||||
worker: true,
|
||||
document: {
|
||||
index: [{
|
||||
field: "content",
|
||||
tokenize: "strict",
|
||||
context: {
|
||||
resolution: 5,
|
||||
depth: 3,
|
||||
bidirectional: true
|
||||
},
|
||||
suggest: true,
|
||||
}, {
|
||||
field: "title",
|
||||
tokenize: "forward",
|
||||
}]
|
||||
}
|
||||
})
|
||||
|
||||
const { content } = await fetchData()
|
||||
for (const [key, value] of Object.entries(content)) {
|
||||
contentIndex.add({
|
||||
id: key,
|
||||
title: value.title,
|
||||
content: removeMarkdown(value.content),
|
||||
})
|
||||
}
|
||||
|
||||
for (const [key, value] of Object.entries(content)) {
|
||||
contentIndex.add({
|
||||
id: key,
|
||||
title: value.title,
|
||||
content: removeMarkdown(value.content),
|
||||
})
|
||||
const highlight = (content, term) => {
|
||||
const highlightWindow = 20
|
||||
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 highlight = (content, term) => {
|
||||
const highlightWindow = 20
|
||||
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 `<span class="search-highlight">${token}</span>`
|
||||
}
|
||||
return token
|
||||
})
|
||||
.join(" ")
|
||||
.replaceAll('</span> <span class="search-highlight">', " ")
|
||||
return `${startIndex === 0 ? "" : "..."}${mappedText}${endIndex === splitText.length ? "" : "..."}`
|
||||
}
|
||||
|
||||
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 `<span class="search-highlight">${token}</span>`
|
||||
}
|
||||
return token
|
||||
})
|
||||
.join(" ")
|
||||
.replaceAll('</span> <span class="search-highlight">', " ")
|
||||
return `${startIndex === 0 ? "" : "..."}${mappedText}${endIndex === splitText.length ? "" : "..."}`
|
||||
}
|
||||
|
||||
const resultToHTML = ({url, title, content, term}) => {
|
||||
const text = removeMarkdown(content)
|
||||
const resultTitle = highlight(title, term)
|
||||
const resultText = highlight(text, term)
|
||||
return `<button class="result-card" id="${url}">
|
||||
const resultToHTML = ({url, title, content, term}) => {
|
||||
const text = removeMarkdown(content)
|
||||
const resultTitle = highlight(title, term)
|
||||
const resultText = highlight(text, term)
|
||||
return `<button class="result-card" id="${url}">
|
||||
<h3>${resultTitle}</h3>
|
||||
<p>${resultText}</p>
|
||||
</button>`
|
||||
}
|
||||
|
||||
const redir = (id, term) => {
|
||||
window.location.href = "{{.Site.BaseURL}}" + `${id}#:~:text=${encodeURIComponent(term)}`
|
||||
}
|
||||
|
||||
const formatForDisplay = id => ({
|
||||
id,
|
||||
url: id,
|
||||
title: content[id].title,
|
||||
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)
|
||||
}
|
||||
|
||||
const redir = (id, term) => {
|
||||
window.location.href = "{{.Site.BaseURL}}" + `${id}#:~:text=${encodeURIComponent(term)}`
|
||||
}
|
||||
|
||||
const fetch = id => ({
|
||||
id,
|
||||
url: id,
|
||||
title: content[id].title,
|
||||
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) => {
|
||||
term = e.target.value
|
||||
contentIndex.search(term, [
|
||||
{
|
||||
field: "content",
|
||||
limit: 10,
|
||||
suggest: true,
|
||||
},
|
||||
{
|
||||
field: "title",
|
||||
limit: 5,
|
||||
}
|
||||
]).then(searchResults => {
|
||||
const getByField = field => {
|
||||
const results = searchResults.filter(x => x.field === field)
|
||||
if (results.length === 0) {
|
||||
return []
|
||||
} else {
|
||||
return [...results[0].result]
|
||||
}
|
||||
})
|
||||
source.addEventListener('input', (e) => {
|
||||
term = e.target.value
|
||||
contentIndex.search(term, [
|
||||
{
|
||||
field: "content",
|
||||
limit: 10,
|
||||
suggest: true,
|
||||
},
|
||||
{
|
||||
field: "title",
|
||||
limit: 5,
|
||||
}
|
||||
]).then(searchResults => {
|
||||
const getByField = field => {
|
||||
const results = searchResults.filter(x => x.field === field)
|
||||
if (results.length === 0) {
|
||||
return []
|
||||
} else {
|
||||
return [...results[0].result]
|
||||
}
|
||||
}
|
||||
const allIds = new Set([...getByField('title'), ...getByField('content')])
|
||||
const finalResults = [...allIds].map(fetch)
|
||||
}
|
||||
const allIds = new Set([...getByField('title'), ...getByField('content')])
|
||||
const finalResults = [...allIds].map(formatForDisplay)
|
||||
|
||||
// display
|
||||
if (finalResults.length === 0) {
|
||||
results.innerHTML = `<button class="result-card">
|
||||
// display
|
||||
if (finalResults.length === 0) {
|
||||
results.innerHTML = `<button class="result-card">
|
||||
<h3>No results.</h3>
|
||||
<p>Try another search term?</p>
|
||||
</button>`
|
||||
} 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)
|
||||
})
|
||||
}
|
||||
} 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"
|
||||
}
|
||||
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"
|
||||
function closeSearch() {
|
||||
searchContainer.style.display = "none"
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === "/") {
|
||||
event.preventDefault()
|
||||
openSearch()
|
||||
}
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault()
|
||||
closeSearch()
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === "/") {
|
||||
event.preventDefault()
|
||||
openSearch()
|
||||
}
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault()
|
||||
closeSearch()
|
||||
}
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const searchButton = document.getElementById("search-icon")
|
||||
searchButton.addEventListener('click', (evt) => {
|
||||
openSearch()
|
||||
})
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
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()
|
||||
})
|
||||
searchButton.addEventListener('keydown', (evt) => {
|
||||
openSearch()
|
||||
})
|
||||
searchContainer.addEventListener('click', (evt) => {
|
||||
closeSearch()
|
||||
})
|
||||
document.getElementById("search-space").addEventListener('click', (evt) => {
|
||||
evt.stopPropagation()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
run()
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user