styling

1 files changed, 78 insertions, 15 deletions

diff --git a/src/index.js b/src/index.js
index 089d78f..254821a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,19 +2,70 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import * as jsonld from 'jsonld';
 import dagre from 'dagre';
+import ColorHash from 'color-hash';
 
-/*
-const defaultLoader = jsonld.documentLoaders.xhr();
-jsonld.documentLoader = (url) => {
-  url = url.replace('https://dag.s-ol.nu/', '/');
-  return defaultLoader(url);
+const css = ([ code] ) => {
+  const style = document.createElement('style');
+  document.head.appendChild(style);
+  style.appendChild(document.createTextNode(''));
+
+  let i = 0;
+  for (const v of code.split('}')) {
+    if (v.indexOf('{') < 0) continue;
+    style.sheet.insertRule(v + '}', i++);
+  }
+
+  return style;
 };
-*/
+
+css`
+article {
+  position: relative;
+}
+
+section {
+  position: absolute;
+  overflow: hidden;
+
+  width: 350px;
+
+  background: #696969;
+  border-radius: 8px;
+}
+
+section > header {
+  padding: 0.75em 1em 0.5em;
+  color: #121212;
+}
+
+section > main {
+  padding: 1em;
+  color: #eeeeee;
+}
+`;
+
+const colors = new ColorHash({ lightness: 0.8 });
+const context = 'https://www.w3.org/ns/activitystreams';
+
+const userCache = {};
+const loadUser = async (id) => {
+  if (userCache[id])
+    return loadUser;
+
+  const result = await jsonld.compact(id, context);
+  userCache[id] = result;
+  return result;
+}
 
 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 data = await (jsonld.compact(await jsonld.flatten(raw), context));
+
+  await Promise.all(data['@graph'].map(async (entry) => {
+    entry.attributedTo = await loadUser(entry.attributedTo);
+  }));
+
+  return data;
 };
 
 const article = document.createElement('article');
@@ -22,13 +73,14 @@ document.body.appendChild(article);
 
 const createNode = (data) => {
   const root = document.createElement('section');
-  root.style.position = 'absolute';
-  root.style.width = '200px';
-  root.style.background = '#696969';
+  root.dataset.dagId = data.id;
 
-  const author = document.createElement('header');
-  author.textContent = '???';
-  root.appendChild(author);
+  const header = document.createElement('header');
+  header.style.backgroundColor = data.attributedTo.color || colors.hex(data.attributedTo.id);
+  const author = document.createElement('span');
+  author.textContent = data.attributedTo.name || data.attributedTo.preferredUsername;
+  header.appendChild(author);
+  root.appendChild(header);
 
   const main = document.createElement('main');
   main.innerHTML = data.content;
@@ -45,6 +97,7 @@ const createNode = (data) => {
 };
 
 loadData().then(data => {
+  window.dagData = data;
   const graph = new dagre.graphlib.Graph();
 
   article.textContent = '';
@@ -54,11 +107,15 @@ loadData().then(data => {
   graph.setGraph({});
   graph.setDefaultEdgeLabel(() => ({}));
 
+  let rootNode;
 
   for (const data of data['@graph']) {
     const node = createNode(data);
     graph.setNode(data.id, node);
 
+    if (!data.inReplyTo || !data.inReplyTo.length)
+      rootNode = node;
+
     if (data.replies && !Array.isArray(data.replies))
       data.replies = [ data.replies ];
 
@@ -67,6 +124,7 @@ loadData().then(data => {
     }
   }
 
+  console.log(rootNode);
   dagre.layout(graph);
   const info = graph.graph();
 
@@ -80,7 +138,10 @@ loadData().then(data => {
   }
 
   const ctx = canvas.getContext('2d');
-  ctx.lineWidth = 5;
+  ctx.lineWidth = 4;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.strokeStyle = '#696969';
 
   for (const eo of graph.edges()) {
     const edge = graph.edge(eo);
@@ -91,4 +152,6 @@ loadData().then(data => {
       ctx.lineTo(p.x, p.y);
     ctx.stroke();
   }
+
+  window.scrollTo(rootNode.x - window.innerWidth/2, rootNode.y);
 });