add avatars

1 files changed, 17 insertions, 69 deletions

diff --git a/src/index.js b/src/index.js
index 254821a..187464b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,49 +2,15 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import * as jsonld from 'jsonld';
 import dagre from 'dagre';
-import ColorHash from 'color-hash';
+import * as dom from './dom';
+import { Note } from './ui';
 
-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`
+dom.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 = {};
@@ -54,6 +20,7 @@ const loadUser = async (id) => {
 
   const result = await jsonld.compact(id, context);
   userCache[id] = result;
+  result.icon.url = new URL(result.icon.url, id).href;
   return result;
 }
 
@@ -71,31 +38,6 @@ const loadData = async () => {
 const article = document.createElement('article');
 document.body.appendChild(article);
 
-const createNode = (data) => {
-  const root = document.createElement('section');
-  root.dataset.dagId = data.id;
-
-  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;
-  root.appendChild(main);
-
-  article.appendChild(root);
-
-  return {
-    data,
-    root,
-    width: root.offsetWidth,
-    height: root.offsetHeight,
-  };
-};
-
 loadData().then(data => {
   window.dagData = data;
   const graph = new dagre.graphlib.Graph();
@@ -107,14 +49,20 @@ loadData().then(data => {
   graph.setGraph({});
   graph.setDefaultEdgeLabel(() => ({}));
 
-  let rootNode;
+  let rootId;
 
   for (const data of data['@graph']) {
-    const node = createNode(data);
-    graph.setNode(data.id, node);
+    const dom = <Note {...data} />;
+    article.appendChild(dom);
+
+    graph.setNode(data.id, {
+      dom, data,
+      width: dom.offsetWidth,
+      height: dom.offsetHeight,
+    });
 
     if (!data.inReplyTo || !data.inReplyTo.length)
-      rootNode = node;
+      rootId = data.id;
 
     if (data.replies && !Array.isArray(data.replies))
       data.replies = [ data.replies ];
@@ -124,7 +72,6 @@ loadData().then(data => {
     }
   }
 
-  console.log(rootNode);
   dagre.layout(graph);
   const info = graph.graph();
 
@@ -133,8 +80,8 @@ loadData().then(data => {
 
   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`;
+    node.dom.style.left = `${node.x - node.width / 2}px`;
+    node.dom.style.top = `${node.y - node.height / 2}px`;
   }
 
   const ctx = canvas.getContext('2d');
@@ -153,5 +100,6 @@ loadData().then(data => {
     ctx.stroke();
   }
 
+  const rootNode = graph.node(rootId);
   window.scrollTo(rootNode.x - window.innerWidth/2, rootNode.y);
 });