feat: dynamically fetch indices

This commit is contained in:
Jacky Zhao 2022-02-15 19:39:14 -05:00
parent 556d6799f2
commit fdf1d9bbe3
10 changed files with 205 additions and 175 deletions

View File

@ -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
View File

@ -3,5 +3,5 @@ public
resources
.idea
content/.obsidian
data/linkIndex.yaml
data/contentIndex.yaml
static/linkIndex.json
static/contentIndex.json

View File

@ -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

View File

@ -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 `/`

View File

@ -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

View File

@ -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 -}}

View File

@ -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>

View File

@ -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" . }}

View File

@ -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}}

View File

@ -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>