Add clarification comments

assets/js/graph.js

@@ -16,9 +16,8 @@ async function drawGraph(
     ...new Set(links.flatMap((link) => [link.source, link.target])),
   ];
 
-  // links is mutated by d3
+  // Links is mutated by d3. We want to use links later on, so we make a copy and pass that one to d3
-  // we want to use links later on, so we make a copy and pass
+  // Note: shallow cloning does not work because it copies over references from the original array
-  // that one to d3
   const copyLinks = JSON.parse(JSON.stringify(links));
 
   const neighbours = new Set();
@@ -176,6 +175,7 @@ async function drawGraph(
     .attr('fill', color)
     .style('cursor', 'pointer')
     .on('click', (_, d) => {
+      // SPA navigation
       window.navigate(
         new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, '-')}/`),
         '.singlePage'

assets/js/search.js

@@ -145,6 +145,7 @@ const removeMarkdown = (
   };
 
   const redir = (id, term) => {
+    // SPA navigation
     window.navigate(
       new URL(
         `${BASE_URL.slice(0, -1)}${id}#:~:text=${encodeURIComponent(term)}/`

layouts/partials/head.html

@@ -57,9 +57,12 @@
   </script>
   <script type="module">
     import { router, navigate } from "https://unpkg.com/million/dist/router.mjs";
+    // SPA navigation for access later
     window.navigate = navigate;
+    // We only mutate document.title and content within .singlePage element
     router(".singlePage");
     const callback = () => {
+      // requestAnimationFrame()
       const draw = () => {
         const container = document.getElementById("graph-container");
         // retry if the graph is not ready