feat: dynamically fetch indices

Jacky Zhao

2022-02-16 fcd5d2807d2bab68c6776e031e85d65fe88a6f7a

feat: dynamically fetch indices

 .github/workflows/deploy.yaml

@@ -12,7 +12,7 @@
      - 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

 .gitignore

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

 Makefile

@@ -4,4 +4,4 @@
    @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

 content/_index.md

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

 data/config.yaml

@@ -5,7 +5,7 @@
  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

 layouts/partials/backlinks.html

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

 layouts/partials/graph.html

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

 layouts/partials/head.html

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

 layouts/partials/popover.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}}

 layouts/partials/search.html

@@ -67,6 +67,7 @@
    };
</script>
<script>
async function run() {
    const contentIndex = new FlexSearch.Document({
        cache: true,
        charset: "latin:extra",
@@ -89,6 +90,7 @@
        }
    })

  const { content } = await fetchData()
    for (const [key, value] of Object.entries(content)) {
        contentIndex.add({
            id: key,
@@ -147,7 +149,7 @@
        window.location.href = "{{.Site.BaseURL}}" + `${id}#:~:text=${encodeURIComponent(term)}`
    }

    const fetch = id => ({
  const formatForDisplay = id => ({
        id,
        url: id,
        title: content[id].title,
@@ -185,7 +187,7 @@
                }
            }
            const allIds = new Set([...getByField('title'), ...getByField('content')])
            const finalResults = [...allIds].map(fetch)
      const finalResults = [...allIds].map(formatForDisplay)

            // display
            if (finalResults.length === 0) {
@@ -210,6 +212,7 @@


    const searchContainer = document.getElementById("search-container")

    function openSearch() {
        if (searchContainer.style.display === "none" || searchContainer.style.display === "") {
            source.value = ""
@@ -251,5 +254,7 @@
            evt.stopPropagation()
        })
    })
}

run()
</script>