nostr
/
nostrweb
3
1
Fork 1
Code Issues 24 Pull Requests 3 Projects 1 Releases 27 Activity

feed: refactor render and add recommend server event 

Added event for recommend server (NIP-01 recommend_server event).
pull/1/head
OFF0 2022-11-06 18:34:33 +01:00
parent 7a705cd4ab
commit 2ee2b69da4
Signed by: offbyn
GPG Key ID: 94A2F643C51F37FA
2 changed files with 72 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/cards.css
View File

@ -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;

109
src/main.js
View File

@ -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;
}
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},
'');
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);
}
pool.sub({
cb: onEvent,
filter: {authors: [
'52155da703585f25053830ac39863c80ea6adc57b360472c16c566a412d2bc38', // quark
'a6057742e73ff93b89587c27a74edf2cdab86904291416e90dc98af1c5f70cfa', // mosc
'3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d', // fiatjaf
// '32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245' // jb55
]}
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 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);