Merge branch 'hugo' of https://github.com/jackyzha0/quartz into hugo

Jacky Zhao

2022-02-15 fb9ea8dcb85e6d2ac6c2a8cf5057f2fb00871b26

 layouts/partials/search.html

@@ -67,16 +67,34 @@
    };
</script>
<script>
    const contentIndex = new FlexSearch.Worker({
        tokenize: "reverse",
    const contentIndex = new FlexSearch.Document({
        cache: true,
        charset: "latin:extra",
        suggest: true,
        cache: 10,
        optimize: true,
        worker: true,
        document: {
            index: [{
                field: "content",
                tokenize: "strict",
                context: {
                    resolution: 5,
                    depth: 3,
                    bidirectional: true
                },
                suggest: true,
            }, {
                field: "title",
                tokenize: "forward",
            }]
        }
    })

    const scrapedContent = {{$.Site.Data.contentIndex}}
    for (const [key, value] of Object.entries(scrapedContent)) {
        contentIndex.add(key, 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) => {
@@ -129,6 +147,13 @@
        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
@@ -140,22 +165,34 @@
    })
    source.addEventListener('input', (e) => {
        term = e.target.value
        contentIndex.search(term, {
            limit: 15,
            suggest: true,
        }).then(searchResults => {
            const resultIds = [...new Set(searchResults)]
            const finalResults = resultIds.map(id => ({
                url: id,
                title: scrapedContent[id].title,
                content: scrapedContent[id].content
            }))
        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)

            // display
            if (finalResults.length === 0) {
                results.innerHTML = `<div class="result-card">
            <p>No results.</p>
        </div>`
                results.innerHTML = `<button class="result-card">
                    <h3>No results.</h3>
                    <p>Try another search term?</p>
                </button>`
            } else {
                results.innerHTML = finalResults
                    .map(result => resultToHTML({
@@ -215,4 +252,4 @@
        })
    })

</script>
</script>