Revert content deletion

.prettierrc.json

@@ -1,19 +1,6 @@
 {
-  "arrowParens": "always",
-  "bracketSameLine": false,
-  "bracketSpacing": true,
-  "embeddedLanguageFormatting": "auto",
-  "htmlWhitespaceSensitivity": "css",
-  "insertPragma": false,
-  "jsxSingleQuote": false,
   "printWidth": 100,
-  "proseWrap": "preserve",
   "quoteProps": "as-needed",
-  "requirePragma": false,
+  "trailingComma": "all",
-  "semi": true,
+  "tabWidth": 2
-  "singleQuote": false,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "useTabs": false,
-  "vueIndentScriptAndStyle": false
 }

assets/js/darkmode.js

@@ -1,29 +1,28 @@
-const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+const userPref = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
-const currentTheme = localStorage.getItem('theme') ?? userPref
+const currentTheme = localStorage.getItem("theme") ?? userPref;
 
 if (currentTheme) {
-  document.documentElement.setAttribute('saved-theme', currentTheme);
+  document.documentElement.setAttribute("saved-theme", currentTheme);
 }
 
 const switchTheme = (e) => {
   if (e.target.checked) {
-    document.documentElement.setAttribute('saved-theme', 'dark')
+    document.documentElement.setAttribute("saved-theme", "dark");
-    localStorage.setItem('theme', 'dark')
+    localStorage.setItem("theme", "dark");
+  } else {
+    document.documentElement.setAttribute("saved-theme", "light");
+    localStorage.setItem("theme", "light");
   }
-  else {
+};
-    document.documentElement.setAttribute('saved-theme', 'light')
-    localStorage.setItem('theme', 'light')
-  }
-}
 
-window.addEventListener('DOMContentLoaded', () => {
+window.addEventListener("DOMContentLoaded", () => {
   // Darkmode toggle
-  const toggleSwitch = document.querySelector('#darkmode-toggle')
+  const toggleSwitch = document.querySelector("#darkmode-toggle");
 
   // listen for toggle
-  toggleSwitch.addEventListener('change', switchTheme, false)
+  toggleSwitch.addEventListener("change", switchTheme, false);
 
-  if (currentTheme === 'dark') {
+  if (currentTheme === "dark") {
-    toggleSwitch.checked = true
+    toggleSwitch.checked = true;
   }
-})
+});

assets/js/graph.js

@@ -1,6 +1,5 @@
 async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLegend, enableZoom) {
-  if (!document.getElementById("graph-container")) return;
+  const container = document.getElementById("graph-container");
-  document.getElementById("graph-container").textContent = "";
 
   const { index, links, content } = await fetchData;
   const curPage = url.replace(baseUrl, "");
@@ -8,6 +7,10 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
   const parseIdsFromLinks = (links) => [
     ...new Set(links.flatMap((link) => [link.source, link.target])),
   ];
+
+  // links is mutated by d3
+  // we want to use links later on, so we make a copy and pass
+  // that one to d3
   const copyLinks = JSON.parse(JSON.stringify(links));
 
   const neighbours = new Set();
@@ -77,8 +80,8 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
       .on("end", enableDrag ? dragended : noop);
   };
 
-  const height = Math.max(document.getElementById("graph-container").offsetHeight, 250);
+  const height = Math.max(container.offsetHeight, 250);
-  const width = document.getElementById("graph-container").offsetWidth;
+  const width = container.offsetWidth;
 
   const simulation = d3
     .forceSimulation(data.nodes)

layouts/partials/head.html

@@ -51,7 +51,13 @@
     window.navigate = navigate;
     router(".singlePage");
     const callback = () => {
-      requestAnimationFrame(() => {
+      const draw = () => {
+        const container = document.getElementById("graph-container");
+        // retry if the graph is not ready
+        if (!container) return requestAnimationFrame(draw);
+        // clear the graph in case there is anything within it
+        container.textContent = "";
+
         drawGraph(
           {{strings.TrimRight "/" .Page.Permalink}},
           {{strings.TrimRight "/" .Site.BaseURL}},
@@ -60,9 +66,11 @@
           {{$.Site.Data.graphConfig.enableDrag}},
           {{$.Site.Data.graphConfig.enableLegend}},
           {{$.Site.Data.graphConfig.enableZoom}}
-        )}
         );
       };
+      requestAnimationFrame(draw);
+    };
+    // We need on initial load, then subsequent redirs
     window.addEventListener("million:navigate", callback);
     window.addEventListener("DOMContentLoaded", callback);
   </script>