Move the content graph layout into theme

content/graph.md

@@ -1,22 +1,9 @@
 ---
 title: "Content Graph"
+type: "graph"
 ---
-<script src="//unpkg.com/vis-network@9.1.0/dist/vis-network.min.js"></script>
+Here you can see a visualization of the posts on this blog using [Vis.js](https://visjs.org/).
-<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>

static/graph/graph.js

@@ -1,53 +0,0 @@
-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 32738ce835858065abd19698657c57b8e4746952
+Subproject commit 84274f5c08a17d74752dafd04c376f757d2af97e