From 4cf4b832452062fa5a8506ee0d26e21d5a80bfdc Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Tue, 26 Jan 2021 12:16:33 +0100
Subject: diegetic tombstone

---
 src/graph.json |  3 ++-
 src/index.js   |  2 +-
 src/ui.js      | 28 ++++++++++++++++++++++++----
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/graph.json b/src/graph.json
index 1988a5b..dab6b4e 100644
--- a/src/graph.json
+++ b/src/graph.json
@@ -1400,7 +1400,8 @@
     },
     {
       "id": "https://dag.s-ol.nu/users/s-ol/notes/20200510182605b",
-      "type": "Note",
+      "type": "Tombstone",
+      "formerType": "Note",
       "attributedTo": "https://merveilles.town/users/s_ol",
       "published": "2020-05-10T18:26:05Z",
       "content": "Email redacted ",
diff --git a/src/index.js b/src/index.js
index aeb1634..104d145 100644
--- a/src/index.js
+++ b/src/index.js
@@ -30,7 +30,7 @@ const loadData = async () => {
   const data = await (jsonld.compact(await jsonld.flatten(raw), context));
 
   await Promise.all(data['@graph'].map(async (entry) => {
-    if (entry.type !== 'Note')
+    if (entry.type !== 'Note' && entry.formerType !== 'Note')
     	return;
 
 		if (!entry.replies) entry.replies = [];
diff --git a/src/ui.js b/src/ui.js
index 7ee919f..1bb44b2 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -4,6 +4,13 @@ import * as dom from './dom';
 
 dom.css`
 body {
+  --theme-backdrop: #1e1e1e;
+  --theme-note-bg: #eeeeee;
+  --theme-note-fg: #363636;
+  --theme-header-fg: #121212;
+}
+
+body.darktheme {
   --theme-backdrop: #1e1e1e;
   --theme-note-bg: #363636;
   --theme-note-fg: #eeeeee;
@@ -36,11 +43,17 @@ section {
   overflow: hidden;
 
   width: 350px;
-
+  color: var(--theme-note-fg);
   background: var(--theme-note-bg);
+
   border-radius: 0.4em;
 }
 
+section.tombstone {
+  color: var(--theme-note-bg);
+  background: var(--theme-note-fg);
+}
+
 section > header {
   display: flex;
   flex-direction: row;
@@ -74,18 +87,25 @@ section > header > .time {
 
 section > main {
   padding: 1em;
-  background: var(--theme-note-fg);
   font-family: serif;
 }
+
+section.tombstone > main {
+  font-family: inherit;
+}
 `;
 
 const colors = new ColorHash({ lightness: 0.8 });
-export const Note = ({ id, attributedTo, published, content, smallHeader = false }) => {
+export const Note = ({ id, type, attributedTo, published, content, smallHeader = false }) => {
   const backgroundColor = attributedTo.color || colors.hex(attributedTo.id);
   const username = attributedTo.name || attributedTo.preferredUsername;
 
   return (
-    <section dataset={{ id }} css={{ '--theme-header-bg': backgroundColor }}>
+    <section
+      css={{ '--theme-header-bg': backgroundColor }}
+      class={type === 'Tombstone' ? 'tombstone' : ''}
+      dataset={{ id }}
+    >
       {smallHeader
         ? <header class="small" />
         : <header>
-- 
cgit v1.2.3