content/graph.html

@@ -1,9 +1,22 @@
 ---
 title: "Content Graph"
-type: "graph"
 ---
-Here you can see a visualization of the posts on this blog using [Vis.js](https://visjs.org/).
+<script src="//unpkg.com/vis-network@9.1.0/dist/vis-network.min.js"></script>
+<script type="module" src="/graph/graph.js"></script>
+<style>
+#graph-container {
+    width: 100%;
+    height: 50vh;
+    border-radius: 0.2rem;
+    border: .075rem solid #bfbfbf
+}
+</style>
+<p>
+Here you can see a visualization of the posts on this blog using <a href="https://visjs.org/">Vis.js</a>.
 In the below graph, each node is an article, and each edge between nodes is a reference from
 one article to another. Each article is sized to be roughly proportional to its word count (file size
 is used as a quick metric for this purpose). You can hover over a node to see the title of the article
 it represents, and double-click to go to that article.
+</p>
+<div id="graph-container">
+</div>

content/tags/_index.md

@@ -1,5 +0,0 @@
----
-title: "Tags"
-date: 2023-01-01T01:48:22-08:00
----
-Below is a list of all the tags ever used on this site.

static/graph/graph.js

@@ -0,0 +1,53 @@
+import { nodes, edges } from "./graph.gen.js";
+
+var container = document.getElementById("graph-container");
+var options = {
+    interaction: {
+        hover: true
+    },
+    nodes: {
+        shape: "dot",
+        size: 16,
+    },
+    physics: {
+        forceAtlas2Based: {
+            gravitationalConstant: -10,
+            centralGravity: 0.005,
+            springLength: 230,
+            springConstant: 0.18,
+        },
+        maxVelocity: 146,
+        solver: "forceAtlas2Based",
+        timestep: 0.35,
+        stabilization: { iterations: 150 },
+    },
+};
+
+var nodesDs = new vis.DataSet();
+nodesDs.add(nodes);
+var edgesDs = new vis.DataSet();
+edgesDs.add(edges);
+var network = new vis.Network(container, { nodes: nodesDs, edges: edgesDs }, options);
+
+network.on("doubleClick", function (params) {
+    params.event = "[original event]";
+    if (params.nodes.length !== 1) return;
+    window.open(nodesDs.get(params.nodes[0]).url, "_blank")
+});
+network.on("hoverNode", function (params) {
+    nodesDs.update({ id: params.node, label: nodesDs.get(params.node).name });
+});
+network.on("blurNode", function (params) {
+    nodesDs.update({ id: params.node, label: undefined });
+});
+// network.on("selectNode", function (params) {
+//     for (const node of params.nodes) {
+//         nodesDs.update({ id: node, label: nodesDs.get(node).name });
+//     }
+// });
+// network.on("deselectNode", function (params) {
+//     for (const node of params.previousSelection.nodes) {
+//         if (params.nodes.some(n => n === node)) continue;
+//         nodesDs.update({ id: node, label: undefined });
+//     }
+// });

themes/vanilla

@@ -1 +1 @@
-Subproject commit 84274f5c08a17d74752dafd04c376f757d2af97e
+Subproject commit 98ee4bd8f3d5d691f75ff0c8eee16872dc122102