feed: refactor render and add recommend server event

Added event for recommend server (NIP-01 recommend_server event).

src/cards.css

@@ -1,6 +1,6 @@
 /* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */
 .mbox {
-  align-items: flex-start;
+  align-items: center;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -8,6 +8,7 @@
 }
 
 .mbox .mbox-img {
+  align-self: flex-start;
   flex-basis: 64px;
   height: 64px;
   margin-right: 1rem;

src/main.js

@@ -16,52 +16,83 @@ const dateTime = new Intl.DateTimeFormat(navigator.language, {
 const userList = [];
 
 function onEvent(evt, relay) {
-  if (evt.kind === 0) {
-    console.log(`event.kind=0 from ${relay}`, evt);
-    try {
-      const content = JSON.parse(evt.content);
-      setMetadata(userList, relay, evt, content);
-      return;
-    } catch(err) {
-      console.error(err);
-    }
+  switch (evt.kind) {
+    case 0:
+      // console.log(`event.kind=0 from ${relay}`, evt);
+      try {
+        const content = JSON.parse(evt.content);
+        setMetadata(userList, relay, evt, content);
+      } catch(err) {
+        console.error(err);
+      }
+      break;
+    case 1:
+      renderTextNote(evt, relay);
+      break;
+    case 2:
+      renderRecommendServer(evt, relay);
+      break;
+    default:
+      // console.log(`add support for ${evt.kind}`, evt)
   }
-  if (evt.kind !== 1) {
-    console.log(`add support for ${evt.kind}`, evt)
-    return;
+}
+
+pool.sub({
+  cb: onEvent,
+  filter: {
+    authors: [
+      '52155da703585f25053830ac39863c80ea6adc57b360472c16c566a412d2bc38', // quark
+      'a6057742e73ff93b89587c27a74edf2cdab86904291416e90dc98af1c5f70cfa', // mosc
+      '3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d', // fiatjaf
+      // '32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245'  // jb55
+    ]
   }
-  const user = userList.find(user => user.pubkey === evt.pubkey);
-  const userImg = user?.metadata[relay]?.picture || 'bubble.svg';
-  const userName = user?.metadata[relay]?.name || evt.pubkey.slice(0, 8);
-  const userAbout = user?.metadata[relay]?.about || '';
-  const time = new Date(evt.created_at * 1000);
-  const img = elem('img', {
-    className: 'mbox-img',
-    src: userImg,
-    alt: `${userName}@${relay}`,
-    title: userAbout},
-  '');
+});
+
+function renderTextNote(evt, relay) {
+  const [host, img, time, userName] = getMetadata(evt, relay);
   const body = elem('div', {className: 'mbox-body', title: dateTime.format(time)}, [
     elem('header', {className: 'mbox-header'}, [
       elem('strong', {}, userName),
-      ` wrote:`
+      ` on ${host}:`
     ]),
     evt.content // text
   ]);
-  const art = elem('article', {className: 'mbox'}, [img, body]);
-  feedlist.append(art);
+  rendernArticle([img, body]);
 }
 
-pool.sub({
-  cb: onEvent,
-  filter: {authors: [
-    '52155da703585f25053830ac39863c80ea6adc57b360472c16c566a412d2bc38', // quark
-    'a6057742e73ff93b89587c27a74edf2cdab86904291416e90dc98af1c5f70cfa', // mosc
-    '3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d', // fiatjaf
-    // '32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245'  // jb55
-  ]}
-});
+function renderRecommendServer(evt, relay) {
+  const [host, img, time, userName] = getMetadata(evt, relay);
+  const body = elem('div', {className: 'mbox-body', title: dateTime.format(time)}, [
+    elem('header', {className: 'mbox-header'}, [
+      elem('strong', {}, userName),
+      ` on ${host}`
+    ]),
+    `recommends server: ${evt.content}`
+  ]);
+  rendernArticle([img, body]);
+}
 
+function rendernArticle(content) {
+  const art = elem('article', {className: 'mbox'}, content);
+  feedlist.append(art);
+}
+
+function getMetadata(evt, relay) {
+  const {host} = new URL(relay);
+  const user = userList.find(user => user.pubkey === evt.pubkey);
+  const userImg = user?.metadata[relay]?.picture || 'bubble.svg';
+  const userName = user?.metadata[relay]?.name || evt.pubkey.slice(0, 8);
+  const userAbout = user?.metadata[relay]?.about || '';
+  const img = elem('img', {
+    className: 'mbox-img',
+    src: userImg,
+    alt: `${userName}@${host}`,
+    title: userAbout},
+    '');
+  const time = new Date(evt.created_at * 1000);
+  return [host, img, time, userName];
+}
 
 function setMetadata(userList, relay, evt, content) {
   const user = userList.find(u => u.pubkey === evt.pubkey);