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,53 +16,84 @@ 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);
+  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);
-      return;
       } 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
+    ]
   }
+});
+
+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),
+      ` on ${host}:`
+    ]),
+    evt.content // text
+  ]);
+  rendernArticle([img, body]);
+}
+
+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 time = new Date(evt.created_at * 1000);
   const img = elem('img', {
     className: 'mbox-img',
     src: userImg,
-    alt: `${userName}@${relay}`,
+    alt: `${userName}@${host}`,
     title: userAbout},
     '');
-  const body = elem('div', {className: 'mbox-body', title: dateTime.format(time)}, [
-    elem('header', {className: 'mbox-header'}, [
-      elem('strong', {}, userName),
-      ` wrote:`
-    ]),
-    evt.content // text
-  ]);
-  const art = elem('article', {className: 'mbox'}, [img, body]);
-  feedlist.append(art);
+  const time = new Date(evt.created_at * 1000);
+  return [host, img, time, userName];
 }
 
-pool.sub({
-  cb: onEvent,
-  filter: {authors: [
-    '52155da703585f25053830ac39863c80ea6adc57b360472c16c566a412d2bc38', // quark
-    'a6057742e73ff93b89587c27a74edf2cdab86904291416e90dc98af1c5f70cfa', // mosc
-    '3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d', // fiatjaf
-    // '32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245'  // jb55
-  ]}
-});
-
-
 function setMetadata(userList, relay, evt, content) {
   const user = userList.find(u => u.pubkey === evt.pubkey);
   if (!user) {