forked from nostr/nostrweb
add profile images for users
Note: users can configure different images on each relay, added userList with a metadata to keep a map of of different settings of each releay.
parent
8d60bf871c
commit
7a705cd4ab
|
@ -1,20 +1,29 @@
|
|||
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */
|
||||
.mbox {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mbox .mbox-img {
|
||||
width: 64px;
|
||||
flex-basis: 64px;
|
||||
height: 64px;
|
||||
margin-right: 1rem;
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.mbox .mbox-header {
|
||||
flex-basis: calc(100% - 64px - 1rem);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mbox .mbox-body {
|
||||
flex: 1;
|
||||
color: var(--fgcolor-accent);
|
||||
}
|
||||
|
||||
.mbox-body > .header {
|
||||
margin-top: 0;
|
||||
flex-basis: calc(100% - 64px - 1rem);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
|
65
src/main.js
65
src/main.js
|
@ -4,15 +4,50 @@ import {elem} from './domutil.js';
|
|||
const pool = relayPool();
|
||||
pool.addRelay('wss://nostr.x1ddos.ch', {read: true, write: true});
|
||||
pool.addRelay('wss://nostr.bitcoiner.social/', {read: true, write: true});
|
||||
pool.addRelay('wss://relay.nostr.info', {read: true, write: true});
|
||||
|
||||
const feedlist = document.querySelector('#feedlist');
|
||||
|
||||
const dateTime = new Intl.DateTimeFormat(navigator.language, {
|
||||
dateStyle: 'full',
|
||||
timeStyle: 'long',
|
||||
});
|
||||
|
||||
const userList = [];
|
||||
|
||||
function onEvent(evt, relay) {
|
||||
console.log(`event from ${relay}`, evt);
|
||||
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);
|
||||
}
|
||||
}
|
||||
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 text = `${evt.content} - ${time.toISOString()}`; // TODO: Intl.DateTimeFormat
|
||||
const img = elem('img', {className: 'mbox-img', src: 'bubble.svg'}, '');
|
||||
const body = elem('div', {className: 'mbox-body'}, [text]);
|
||||
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);
|
||||
}
|
||||
|
@ -23,6 +58,26 @@ pool.sub({
|
|||
'52155da703585f25053830ac39863c80ea6adc57b360472c16c566a412d2bc38', // quark
|
||||
'a6057742e73ff93b89587c27a74edf2cdab86904291416e90dc98af1c5f70cfa', // mosc
|
||||
'3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d', // fiatjaf
|
||||
'32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245' // jb55
|
||||
// '32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245' // jb55
|
||||
]}
|
||||
});
|
||||
|
||||
|
||||
function setMetadata(userList, relay, evt, content) {
|
||||
const user = userList.find(u => u.pubkey === evt.pubkey);
|
||||
if (!user) {
|
||||
userList.push({
|
||||
metadata: {
|
||||
[relay]: content
|
||||
},
|
||||
pubkey: evt.pubkey,
|
||||
});
|
||||
} else {
|
||||
user.metadata[relay] = {
|
||||
...user.metadata[relay],
|
||||
timestamp: evt.created_at,
|
||||
...content,
|
||||
};
|
||||
console.log('update existing user', user);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue