tag and folder pages

Jacky Zhao

2023-07-01 ba9f243728cab171f86b40b9d50db485af272a39

 quartz/components/scripts/graph.inline.ts

@@ -13,7 +13,19 @@
  target: string
}

const localStorageKey = "graph-visited"
function getVisited(): Set<string> {
  return new Set(JSON.parse(localStorage.getItem(localStorageKey) ?? "[]"))
}

function addToVisited(slug: string) {
  const visited = getVisited()
  visited.add(slug)
  localStorage.setItem(localStorageKey, JSON.stringify([...visited]))
}

async function renderGraph(container: string, slug: string) {
  const visited = getVisited()
  const graph = document.getElementById(container)
  if (!graph) return
  removeAllChildren(graph)
@@ -106,7 +118,13 @@
  // calculate radius
  const color = (d: NodeData) => {
    const isCurrent = d.id === slug
    return isCurrent ? "var(--secondary)" : "var(--gray)"
    if (isCurrent) {
      return "var(--secondary)"
    } else if (visited.has(d.id)) {
      return "var(--tertiary)"
    } else {
      return "var(--gray)"
    }
  }

  const drag = (simulation: d3.Simulation<NodeData, LinkData>) => {
@@ -267,9 +285,15 @@

document.addEventListener("nav", async (e: unknown) => {
  const slug = (e as CustomEventMap["nav"]).detail.url
  addToVisited(slug)
  await renderGraph("graph-container", slug)

  const containerIcon = document.getElementById("global-graph-icon")
  containerIcon?.removeEventListener("click", renderGlobalGraph)
  containerIcon?.addEventListener("click", renderGlobalGraph)
})

window.addEventListener('resize', async () => {
  const slug = document.body.dataset["slug"]!
  await renderGraph("graph-container", slug)
})