diff --git a/.prettierrc.json b/.prettierrc.json index 7ed5d6a71..f1bc35a4d 100644 --- a/.prettierrc.json +++ b/.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, - "semi": true, - "singleQuote": false, - "tabWidth": 2, - "trailingComma": "es5", - "useTabs": false, - "vueIndentScriptAndStyle": false + "trailingComma": "all", + "tabWidth": 2 } diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js index d95a281ac..a174851a9 100644 --- a/assets/js/darkmode.js +++ b/assets/js/darkmode.js @@ -1,29 +1,28 @@ -const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark' -const currentTheme = localStorage.getItem('theme') ?? userPref +const userPref = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"; +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') - localStorage.setItem('theme', 'dark') + document.documentElement.setAttribute("saved-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') { - toggleSwitch.checked = true + if (currentTheme === "dark") { + toggleSwitch.checked = true; } -}) +}); diff --git a/assets/js/graph.js b/assets/js/graph.js index b7c95b3a6..59d4dfaf8 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -1,6 +1,5 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLegend, enableZoom) { - if (!document.getElementById("graph-container")) return; - document.getElementById("graph-container").textContent = ""; + const container = document.getElementById("graph-container"); 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 width = document.getElementById("graph-container").offsetWidth; + const height = Math.max(container.offsetHeight, 250); + const width = container.offsetWidth; const simulation = d3 .forceSimulation(data.nodes) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 4824d9b5c..72a44736c 100644 --- a/layouts/partials/head.html +++ b/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);