feed: refactor profile image placeholder

Move canvas placeholder image to getMetadata so that the logic is
in one place. Also added an exception for pubkeys starting with
at least 6 zeros to invert the color.

src/main.js

@@ -153,19 +153,6 @@ setInterval(() => {
   });
 }, 10000);
 
-
-const elemCanvas = (text) => {
-  const canvas = elem('canvas', {height: 80, width: 80});
-  const context = canvas.getContext('2d');
-  context.fillStyle = `#${text.slice(0, 6)}`;
-  context.fillRect(0, 0, 80, 80);
-  context.fillStyle = '#111';
-  context.fillRect(0, 50, 80, 32);
-  context.font = 'bold 18px monospace';
-  context.fillText(text, 2, 46);
-  return canvas;
-}
-
 function createTextNote(evt, relay) {
   const {host, img, isReply, name, replies, time, userName} = getMetadata(evt, relay);
   const isLongContent = evt.content.trimRight().length > 280;
@@ -210,7 +197,7 @@ function createTextNote(evt, relay) {
     requestAnimationFrame(() => updateElemHeight(writeInput));
   }
   return rendernArticle([
-    elem('div', {className: 'mbox-img'}, [(name && img) ? img : elemCanvas(userName)]), body,
+    elem('div', {className: 'mbox-img'}, [img]), body,
     replies[0] ? elem('div', {className: 'mobx-replies'}, replyFeed.reverse()) : '',
   ]);
 }
@@ -310,8 +297,8 @@ function renderRecommendServer(evt, relay) {
     ]),
     ` recommends server: ${evt.content}`,
   ]);
-  return rendernArticle([elem('div', {className: 'mbox-img'}, [
-    (name && img) ? img : elemCanvas(userName)]), body
+  return rendernArticle([
+    elem('div', {className: 'mbox-img'}, [img]), body
   ], {className: 'mbox-recommend-server', data: {relay: evt.content}});
 }
 
@@ -387,6 +374,22 @@ const getHost = (url) => {
   }
 }
 
+const elemCanvas = (text) => {
+  const canvas = elem('canvas', {height: 80, width: 80});
+  const context = canvas.getContext('2d');
+  const color = `#${text.slice(0, 6)}`;
+  context.fillStyle = color;
+  context.fillRect(0, 0, 80, 80);
+  context.fillStyle = '#111';
+  context.fillRect(0, 50, 80, 32);
+  context.font = 'bold 18px monospace';
+  if (color === '#000000') {
+    context.fillStyle = '#fff';
+  }
+  context.fillText(text, 2, 46);
+  return canvas;
+}
+
 function getMetadata(evt, relay) {
   const host = getHost(relay);
   const user = userList.find(user => user.pubkey === evt.pubkey);
@@ -394,11 +397,11 @@ function getMetadata(evt, relay) {
   const name = user?.metadata[relay]?.name;
   const userName = name || evt.pubkey.slice(0, 8);
   const userAbout = user?.metadata[relay]?.about || '';
-  const img = elem('img', {
+  const img = userImg ? elem('img', {
     src: userImg,
     alt: `${userName} ${host}`,
     title: `${userName} on ${host} ${userAbout}`,
-  }, '');
+  }) : elemCanvas(evt.pubkey);
   const isReply = evt.tags.some(hasEventTag);
   const replies = replyList.filter((reply) => reply.tags[0][1] === evt.id);
   const time = new Date(evt.created_at * 1000);