diegetic tombstone

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
@@ -5,6 +5,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;
   --theme-header-fg: #121212;
@@ -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>