1 files changed, 94 insertions, 0 deletions
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..089d78f
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,94 @@
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+import * as jsonld from 'jsonld';
+import dagre from 'dagre';
+
+/*
+const defaultLoader = jsonld.documentLoaders.xhr();
+jsonld.documentLoader = (url) => {
+  url = url.replace('https://dag.s-ol.nu/', '/');
+  return defaultLoader(url);
+};
+*/
+
+const loadData = async () => {
+  const raw = await require('./graph.json');
+  const context = 'https://www.w3.org/ns/activitystreams';
+  return await (jsonld.compact(await jsonld.flatten(raw), context));
+};
+
+const article = document.createElement('article');
+document.body.appendChild(article);
+
+const createNode = (data) => {
+  const root = document.createElement('section');
+  root.style.position = 'absolute';
+  root.style.width = '200px';
+  root.style.background = '#696969';
+
+  const author = document.createElement('header');
+  author.textContent = '???';
+  root.appendChild(author);
+
+  const main = document.createElement('main');
+  main.innerHTML = data.content;
+  root.appendChild(main);
+
+  article.appendChild(root);
+
+  return {
+    data,
+    root,
+    width: root.offsetWidth,
+    height: root.offsetHeight,
+  };
+};
+
+loadData().then(data => {
+  const graph = new dagre.graphlib.Graph();
+
+  article.textContent = '';
+  const canvas = document.createElement('canvas');
+  article.appendChild(canvas);
+
+  graph.setGraph({});
+  graph.setDefaultEdgeLabel(() => ({}));
+
+
+  for (const data of data['@graph']) {
+    const node = createNode(data);
+    graph.setNode(data.id, node);
+
+    if (data.replies && !Array.isArray(data.replies))
+      data.replies = [ data.replies ];
+
+    for (const reply of data.replies || []) {
+      graph.setEdge(data.id, reply);
+    }
+  }
+
+  dagre.layout(graph);
+  const info = graph.graph();
+
+  canvas.width = info.width;
+  canvas.height = info.height;
+
+  for (const id of graph.nodes()) {
+    const node = graph.node(id);
+    node.root.style.left = `${node.x - node.width / 2}px`;
+    node.root.style.top = `${node.y - node.height / 2}px`;
+  }
+
+  const ctx = canvas.getContext('2d');
+  ctx.lineWidth = 5;
+
+  for (const eo of graph.edges()) {
+    const edge = graph.edge(eo);
+
+    ctx.beginPath();
+    ctx.moveTo(edge.points[0].x, edge.points[0].y);
+    for (const p of edge.points.slice(1))
+      ctx.lineTo(p.x, p.y);
+    ctx.stroke();
+  }
+});