forked from nostr/nostrweb
Compare commits
205 Commits
@ -0,0 +1,34 @@
|
|||||||
|
pipeline:
|
||||||
|
build:
|
||||||
|
image: node:18-alpine
|
||||||
|
commands:
|
||||||
|
- apk add --no-cache git
|
||||||
|
- npm ci
|
||||||
|
- npm run build
|
||||||
|
prepare_release:
|
||||||
|
when:
|
||||||
|
event: tag
|
||||||
|
tag: v*
|
||||||
|
image: node:18-slim
|
||||||
|
commands:
|
||||||
|
- tools/ci-make-release-targz.sh
|
||||||
|
create_release:
|
||||||
|
when:
|
||||||
|
event: tag
|
||||||
|
tag: v*
|
||||||
|
image: plugins/gitea-release
|
||||||
|
settings:
|
||||||
|
api_key:
|
||||||
|
from_secret: releaser_auth_token
|
||||||
|
base_url: https://git.qcode.ch
|
||||||
|
files: nostrweb.tar.gz
|
||||||
|
note: "automated release by ${CI_SYSTEM_HOST} \nbuild id: ${CI_BUILD_NUMBER}"
|
||||||
|
rsync_dist:
|
||||||
|
when:
|
||||||
|
event: tag
|
||||||
|
tag: v*
|
||||||
|
image: alpine:3.16.2
|
||||||
|
secrets: [releaser_ssh_key]
|
||||||
|
commands:
|
||||||
|
- apk add --no-cache --quiet openssh-client rsync
|
||||||
|
- tools/ci-rsync-release.sh
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>about / nostr</title>
|
||||||
|
<link rel="stylesheet" href="styles/main.css" type="text/css">
|
||||||
|
<link rel="manifest" href="/manifest.json">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="text">
|
||||||
|
<h1>nostr: notes and other stuff transmitted by relays</h1>
|
||||||
|
this is a nostr web client.<br>
|
||||||
|
source code is at <a href="https://git.qcode.ch/nostr/nostrweb">git.qcode.ch/nostr/nostrweb</a>.
|
||||||
|
<p>
|
||||||
|
you are looking at version #[PKG_VERSION]#, built at git commit
|
||||||
|
<a href="https://git.qcode.ch/nostr/nostrweb/commit/#[GIT_COMMIT]#">#[GIT_COMMIT]#</a>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
for more information about nostr protocol, check out
|
||||||
|
<a href="https://github.com/nostr-protocol/nostr#readme" target="_blank" rel="noopener noreferrer">github.com/nostr-protocol/nostr#readme</a>.
|
||||||
|
</p>
|
||||||
|
back to <a href="/">nostr.ch</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="21" viewBox="0 0 80.035 70.031"><path fill="transparent" stroke="#7f7f7f" stroke-width="4.927" d="M2.463 31.824q0-4.789 1.893-9.248 1.892-4.46 5.361-8.087 3.47-3.626 8.07-6.333 4.598-2.707 10.324-4.2 5.727-1.493 11.836-1.493 6.107 0 11.834 1.492 5.725 1.494 10.325 4.2 4.599 2.708 8.07 6.334 3.47 3.627 5.362 8.087 1.891 4.46 1.891 9.248 0 5.97-2.967 11.384-2.967 5.414-7.982 9.336-5.015 3.922-11.957 6.248-6.94 2.325-14.576 2.325-7.463 0-14.334-2.221l-8.537 6.038q-4.789 3.02-6.733 1.752-1.943-1.266-.867-7.13l1.77-8.886q-4.2-3.887-6.49-8.71-2.29-4.825-2.29-10.136Z"/></svg>
|
||||||
|
After Width: | Height: | Size: 634 B |
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M14 20.408c-.492.308-.903.546-1.192.709-.153.086-.308.17-.463.252h-.002a.75.75 0 01-.686 0 16.709 16.709 0 01-.465-.252 31.147 31.147 0 01-4.803-3.34C3.8 15.572 1 12.331 1 8.513 1 5.052 3.829 2.5 6.736 2.5 9.03 2.5 10.881 3.726 12 5.605 13.12 3.726 14.97 2.5 17.264 2.5 20.17 2.5 23 5.052 23 8.514c0 3.818-2.801 7.06-5.389 9.262A31.146 31.146 0 0114 20.408z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 464 B |
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill-rule="evenodd" d="M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 734 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="331.088" height="331.088" viewBox="0 0 87.6 87.6">
|
||||||
|
<circle cx="90.953" cy="119.632" r="37.72" style="fill:none;fill-opacity:1;stroke:#f0f;stroke-width:12.16;stroke-dasharray:none;stroke-opacity:1" transform="translate(-47.152 -75.832)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 294 B |
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#7f7f7f" d="M12.672.668a.75.75 0 00-1.345 0L8.27 6.865l-6.838.994a.75.75 0 00-.416 1.279l4.948 4.823-1.168 6.811a.75.75 0 001.088.791L12 18.347l6.117 3.216a.75.75 0 001.088-.79l-1.168-6.812 4.948-4.823a.75.75 0 00-.416-1.28l-6.838-.993L12.672.668z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 357 B |
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#7f7f7f" d="M12 .25a.75.75 0 01.673.418l3.058 6.197 6.839.994a.75.75 0 01.415 1.279l-4.948 4.823 1.168 6.811a.75.75 0 01-1.088.791L12 18.347l-6.117 3.216a.75.75 0 01-1.088-.79l1.168-6.812-4.948-4.823a.75.75 0 01.416-1.28l6.838-.993L11.328.668A.75.75 0 0112 .25zm0 2.445L9.44 7.882a.75.75 0 01-.565.41l-5.725.832 4.143 4.038a.75.75 0 01.215.664l-.978 5.702 5.121-2.692a.75.75 0 01.698 0l5.12 2.692-.977-5.702a.75.75 0 01.215-.664l4.143-4.038-5.725-.831a.75.75 0 01-.565-.41L12 2.694z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 592 B |
@ -1,4 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg enable-background="new 0 0 1000 1000" version="1.1" viewBox="0 0 1e3 1e3" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="m240.4 673.3c-67.5 0-122.5 44.8-122.5 100 0 55.1 55 100 122.5 100s122.5-44.8 122.5-100c0-55.1-54.9-100-122.5-100zm0 160.3c-45.7 0-82.8-27-82.8-60.3 0-33.2 37.1-60.3 82.8-60.3s82.8 27 82.8 60.3c0 33.2-37.1 60.3-82.8 60.3z"/><path d="m108.5 865.9c-37.1 0-67.3 25.5-67.3 56.9s30.2 56.9 67.3 56.9 67.3-25.5 67.3-56.9-30.2-56.9-67.3-56.9zm0 74c-15.8 0-27.6-9.1-27.6-17.2s11.3-17.2 27.6-17.2c15.8 0 27.6 9.1 27.6 17.2s-11.8 17.2-27.6 17.2z"/><path d="m989.1 391c-5.4-48.7-35.5-92-83-120.4 0-5.9-0.3-11.5-0.9-16.8-10.2-91.8-93.6-161.2-194.7-162.8-38.1-50-102.5-77.1-171.9-69.3-35.3 4-68 16.6-95.5 36.8-28.5-25-67.5-37.4-108.8-32.8-58.6 6.5-106.6 47.2-119.1 99.1-130.6 36.7-217.5 153.8-203.8 277.4 13.7 122.4 120.2 216.1 254.6 225.3 28.3 24.1 69.3 35.8 112.4 31.1 19-2.1 37.5-7.5 54.1-15.7 31.8 22.3 72.4 34.4 115.8 34.4 8.6 0 17.2-0.5 25.8-1.4 62.8-7 117.7-38.7 147-84.1 12 1.6 24.1 2.4 36.2 2.4 10.1 0 20.3-0.6 30.4-1.7 122-13.6 212.3-104 201.4-201.5zm-205.6 162c-8.7 1-17.4 1.4-26 1.4-14.4 0-28.8-1.3-42.8-4l-14.5-2.7-6.8 13.2c-20.8 40.4-68.1 69.3-123.5 75.5-47 5.2-92.4-7.1-122.8-32.4l-10.9-9.1-12.1 7.4c-14.6 9-31.9 14.8-49.9 16.8-34 3.8-66.1-6-86-25.3l-5.4-5.3-7.5-0.3c-118.2-5.4-212.5-85.4-224.2-190.5-12-107.6 68-209.7 186.1-237.6l13.6-3.2 1.6-13.8c4.7-40.1 41.1-72.9 86.6-78 34.5-3.8 67.7 9 87.7 32.8l13.2 15.8 15.3-13.8c24.1-21.7 54.6-35.2 88.2-38.9 57.5-6.4 112.3 18.1 140.8 60.8l6.1 9.2 17.1-0.5c82.3 0 150.6 54.8 158.7 127.5 0.8 6.8 0.9 14.2 0.4 22.6l-0.8 12.9 11.5 6c42 21.9 68.6 56.7 72.9 95.8 8 75.9-66.6 146.5-166.6 157.7z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB |
@ -1,20 +0,0 @@
|
|||||||
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */
|
|
||||||
.mbox {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mbox .mbox-img {
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mbox .mbox-body {
|
|
||||||
flex: 1;
|
|
||||||
color: var(--fgcolor-accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mbox-body > .header {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,291 @@
|
|||||||
|
import {Event, nip19, signEvent} from 'nostr-tools';
|
||||||
|
import {elem} from './utils/dom';
|
||||||
|
import {dateTime} from './utils/time';
|
||||||
|
import {isNotNonceTag, isPTag} from './events';
|
||||||
|
import {getViewContent, getViewElem, getViewOptions, setViewElem} from './view';
|
||||||
|
import {powEvent} from './system';
|
||||||
|
import {config} from './settings';
|
||||||
|
import {getMetadata} from './profiles';
|
||||||
|
import {publish} from './relays';
|
||||||
|
import {parseJSON} from './media';
|
||||||
|
|
||||||
|
const contactHistoryMap: {
|
||||||
|
[pubkey: string]: Event[];
|
||||||
|
} = {};
|
||||||
|
|
||||||
|
const hasOwnContactList = () => {
|
||||||
|
return !!contactHistoryMap[config.pubkey];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* returns true if user is following pubkey
|
||||||
|
*/
|
||||||
|
export const isFollowing = (pubkey: string) => {
|
||||||
|
const following = contactHistoryMap[config.pubkey]?.at(0);
|
||||||
|
if (!following) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return following.tags.some(([tag, value]) => tag === 'p' && value === pubkey);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateFollowBtn = (pubkey: string) => {
|
||||||
|
const followBtn = getViewElem(`followBtn-${pubkey}`);
|
||||||
|
const view = getViewOptions();
|
||||||
|
if (followBtn && (view.type === 'contacts' || view.type === 'profile')) {
|
||||||
|
const hasContact = isFollowing(pubkey);
|
||||||
|
const isMe = config.pubkey === pubkey;
|
||||||
|
followBtn.textContent = isMe ? 'following' : hasContact ? 'unfollow' : 'follow';
|
||||||
|
followBtn.classList.remove('primary', 'secondary');
|
||||||
|
followBtn.classList.add(hasContact ? 'secondary' : 'primary');
|
||||||
|
followBtn.hidden = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateFollowing = (evt: Event) => {
|
||||||
|
const view = getViewOptions();
|
||||||
|
if (evt.pubkey === config.pubkey) {
|
||||||
|
localStorage.setItem('follwing', JSON.stringify(evt));
|
||||||
|
}
|
||||||
|
switch(view.type) {
|
||||||
|
case 'contacts':
|
||||||
|
if (hasOwnContactList()) {
|
||||||
|
const lastContactList = contactHistoryMap[config.pubkey]?.at(1);
|
||||||
|
if (lastContactList) {
|
||||||
|
const [added, removed] = findChanges(evt, lastContactList);
|
||||||
|
[
|
||||||
|
...added.map(([, pubkey]) => pubkey),
|
||||||
|
...removed.map(([, pubkey]) => pubkey),
|
||||||
|
].forEach(updateFollowBtn);
|
||||||
|
} else {
|
||||||
|
evt.tags
|
||||||
|
.filter(isPTag)
|
||||||
|
.forEach(([, pubkey]) => updateFollowBtn(pubkey));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'profile':
|
||||||
|
updateFollowBtn(view.id);
|
||||||
|
if (view.id === evt.pubkey) {
|
||||||
|
const npub = nip19.npubEncode(evt.pubkey);
|
||||||
|
// update following link
|
||||||
|
const following = getViewElem('following') as HTMLElement;
|
||||||
|
if (following) {
|
||||||
|
const count = evt.tags.filter(isPTag).length;
|
||||||
|
const anchor = elem('a', {
|
||||||
|
data: {following: evt.pubkey},
|
||||||
|
href: `/contacts/${npub}`,
|
||||||
|
title: dateTime.format(evt.created_at * 1000),
|
||||||
|
}, [
|
||||||
|
'following ',
|
||||||
|
elem('span', {className: 'highlight'}, count),
|
||||||
|
]);
|
||||||
|
following.replaceWith(anchor);
|
||||||
|
setViewElem('following', anchor);
|
||||||
|
}
|
||||||
|
let timeline = getViewElem('timeline');
|
||||||
|
if (!timeline) {
|
||||||
|
timeline = elem('a', {href: `/timeline/${npub}`}, 'timeline');
|
||||||
|
getViewElem('header').querySelector('footer')?.append(timeline);
|
||||||
|
setViewElem('timeline', timeline);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const refreshFollowing = (id: string) => {
|
||||||
|
if (contactHistoryMap[id]?.at(0)) {
|
||||||
|
updateFollowing(contactHistoryMap[id][0]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const setContactList = (evt: Event) => {
|
||||||
|
const contactHistory = contactHistoryMap[evt.pubkey];
|
||||||
|
if (!contactHistory) {
|
||||||
|
contactHistoryMap[evt.pubkey] = [evt];
|
||||||
|
updateFollowing(evt);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (contactHistory.find(({id}) => id === evt.id)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
contactHistory.unshift(evt);
|
||||||
|
updateFollowing(contactHistory[0]); // TODO: ensure that this is newest contactlist?
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* findChanges
|
||||||
|
* returns added and removed contacts list of P tags, ignores any tag other than 'p'
|
||||||
|
*/
|
||||||
|
const findChanges = (current: Event, previous: Event) => {
|
||||||
|
const previousContacts = previous.tags.join('\n'); // filter for p tags first?
|
||||||
|
const currentContacts = current.tags.join('\n');
|
||||||
|
const addedContacts = current.tags.filter(([tag, pubkey]) => tag === 'p' && !previousContacts.includes(pubkey));
|
||||||
|
const removedContacts = previous.tags.filter(([tag, pubkey]) => tag === 'p' && !currentContacts.includes(pubkey));
|
||||||
|
return [addedContacts, removedContacts];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const resetContactList = (pubkey: string) => {
|
||||||
|
delete contactHistoryMap[pubkey];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getContactUpdateMessage = (
|
||||||
|
addedList: string[][],
|
||||||
|
removedList: string[][],
|
||||||
|
) => {
|
||||||
|
const content = [];
|
||||||
|
if (addedList.length && addedList[0]) {
|
||||||
|
const pubkey = addedList[0][1];
|
||||||
|
const {userName} = getMetadata(pubkey);
|
||||||
|
const npub = nip19.npubEncode(pubkey);
|
||||||
|
content.push(
|
||||||
|
'follows ',
|
||||||
|
elem('a', {href: `/${npub}`, data: {profile: pubkey}}, userName),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (addedList.length > 1) {
|
||||||
|
content.push(` (+ ${addedList.length - 1} others)`);
|
||||||
|
}
|
||||||
|
if (removedList?.length > 0) {
|
||||||
|
if (content.length) {
|
||||||
|
content.push(' and');
|
||||||
|
}
|
||||||
|
content.push(' unfollowed ');
|
||||||
|
if (removedList.length > 1) {
|
||||||
|
content.push(`${removedList.length}`);
|
||||||
|
} else {
|
||||||
|
const removedPubkey = removedList[0][1];
|
||||||
|
const {userName: removeduserName} = getMetadata(removedPubkey);
|
||||||
|
const removedNpub = nip19.npubEncode(removedPubkey);
|
||||||
|
content.push(elem('a', {href: `/${removedNpub}`, data: {profile: removedPubkey}}, removeduserName));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return content;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateContactList = (evt: Event) => {
|
||||||
|
const contactHistory = contactHistoryMap[evt.pubkey];
|
||||||
|
if (contactHistory.length === 1) {
|
||||||
|
return [contactHistory[0].tags.filter(isPTag)];
|
||||||
|
}
|
||||||
|
const pos = contactHistory.findIndex(({id}) => id === evt.id);
|
||||||
|
if (evt.id !== contactHistory.at(-1)?.id) { // not oldest known contact-list update
|
||||||
|
return findChanges(evt, contactHistory[pos + 1]);
|
||||||
|
}
|
||||||
|
// update existing contact entries
|
||||||
|
contactHistory
|
||||||
|
.slice(0, -1)
|
||||||
|
.forEach((entry, i) => {
|
||||||
|
const previous = contactHistory[i + 1];
|
||||||
|
const [added, removed] = findChanges(entry, previous);
|
||||||
|
const contactNote = getViewContent().querySelector(`[data-contacts="${entry.id}"]`);
|
||||||
|
const updated = getContactUpdateMessage(added, removed);
|
||||||
|
contactNote?.replaceChildren(...updated);
|
||||||
|
});
|
||||||
|
return [evt.tags.filter(isPTag)];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* returns list of pubkeys the given pubkey is following
|
||||||
|
* @param pubkey
|
||||||
|
* @returns {String[]} pubkeys
|
||||||
|
*/
|
||||||
|
export const getContacts = (pubkey: string) => {
|
||||||
|
const following = contactHistoryMap[pubkey]?.at(0);
|
||||||
|
if (!following) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
return following.tags
|
||||||
|
.filter(isPTag)
|
||||||
|
.map(([, pubkey]) => pubkey);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* returns list of pubkeys the user is following, if none found it will try from localstorage
|
||||||
|
* @returns {String[]} pubkeys
|
||||||
|
*/
|
||||||
|
export const getOwnContacts = () => {
|
||||||
|
const following = getContacts(config.pubkey);
|
||||||
|
if (following.length) {
|
||||||
|
return following;
|
||||||
|
}
|
||||||
|
const followingFromStorage = localStorage.getItem('follwing');
|
||||||
|
if (followingFromStorage) {
|
||||||
|
const follwingData = parseJSON(followingFromStorage) as Event;
|
||||||
|
// TODO: ensure signature matches
|
||||||
|
if (follwingData && follwingData.pubkey === config.pubkey) {
|
||||||
|
return follwingData.tags
|
||||||
|
.filter(isPTag)
|
||||||
|
.map(([, pubkey]) => pubkey);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateContactTags = (
|
||||||
|
followeeID: string,
|
||||||
|
currentContactList: Event | undefined,
|
||||||
|
) => {
|
||||||
|
if (!currentContactList?.tags) {
|
||||||
|
return [['p', followeeID], ['p', config.pubkey]];
|
||||||
|
}
|
||||||
|
if (currentContactList.tags.some(([tag, id]) => tag === 'p' && id === followeeID)) {
|
||||||
|
return currentContactList.tags
|
||||||
|
.filter(([tag, id]) => tag === 'p' && id !== followeeID);
|
||||||
|
}
|
||||||
|
return [
|
||||||
|
['p', followeeID],
|
||||||
|
...currentContactList.tags
|
||||||
|
.filter(isNotNonceTag),
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const followContact = async (pubkey: string) => {
|
||||||
|
const followBtn = getViewElem(`followBtn-${pubkey}`) as HTMLButtonElement;
|
||||||
|
const statusElem = getViewElem(`followStatus-${pubkey}`) as HTMLElement;
|
||||||
|
if (!followBtn || !statusElem) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const following = contactHistoryMap[config.pubkey]?.at(0);
|
||||||
|
const unsignedEvent = {
|
||||||
|
kind: 3,
|
||||||
|
pubkey: config.pubkey,
|
||||||
|
content: '',
|
||||||
|
tags: updateContactTags(pubkey, following),
|
||||||
|
created_at: Math.floor(Date.now() * 0.001),
|
||||||
|
};
|
||||||
|
|
||||||
|
followBtn.disabled = true;
|
||||||
|
const newContactListEvent = await powEvent(unsignedEvent, {
|
||||||
|
difficulty: config.difficulty,
|
||||||
|
statusElem,
|
||||||
|
timeout: config.timeout,
|
||||||
|
}).catch(console.warn);
|
||||||
|
|
||||||
|
if (!newContactListEvent) {
|
||||||
|
statusElem.textContent = '';
|
||||||
|
statusElem.hidden = false;
|
||||||
|
followBtn.disabled = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const privatekey = localStorage.getItem('private_key');
|
||||||
|
if (!privatekey) {
|
||||||
|
statusElem.textContent = 'no private key to sign';
|
||||||
|
statusElem.hidden = false;
|
||||||
|
followBtn.disabled = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const sig = signEvent(newContactListEvent, privatekey);
|
||||||
|
// TODO: validateEvent?
|
||||||
|
if (sig) {
|
||||||
|
statusElem.textContent = 'publishing…';
|
||||||
|
publish({...newContactListEvent, sig}, (relay, error) => {
|
||||||
|
if (error) {
|
||||||
|
return console.error(error, relay);
|
||||||
|
}
|
||||||
|
statusElem.hidden = true;
|
||||||
|
followBtn.disabled = false;
|
||||||
|
console.info(`event published by ${relay}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -1,18 +0,0 @@
|
|||||||
/**
|
|
||||||
* example usage:
|
|
||||||
*
|
|
||||||
* const props = {className: 'btn', onclick: async (e) => alert('hi')};
|
|
||||||
* const btn = elem('button', props, ['download']);
|
|
||||||
* document.body.append(btn);
|
|
||||||
*
|
|
||||||
* @param {string} name
|
|
||||||
* @param {HTMLElement.prototype} props
|
|
||||||
* @param {Array<HTMLElement|string>} children
|
|
||||||
* @return HTMLElement
|
|
||||||
*/
|
|
||||||
export function elem(name = 'div', props = {}, children = []) {
|
|
||||||
const el = document.createElement(name);
|
|
||||||
Object.assign(el, props);
|
|
||||||
el.append(...children);
|
|
||||||
return el;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
import {Event} from 'nostr-tools';
|
||||||
|
import {zeroLeadingBitsCount} from './utils/crypto';
|
||||||
|
|
||||||
|
export const isEvent = <T>(evt?: T): evt is T => evt !== undefined;
|
||||||
|
export const isMention = ([tag, , , marker]: string[]) => tag === 'e' && marker === 'mention';
|
||||||
|
export const isPTag = ([tag]: string[]) => tag === 'p';
|
||||||
|
export const hasEventTag = (tag: string[]) => tag[0] === 'e';
|
||||||
|
export const isNotNonceTag = ([tag]: string[]) => tag !== 'nonce';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* validate proof-of-work of a nostr event per nip-13.
|
||||||
|
* the validation always requires difficulty commitment in the nonce tag.
|
||||||
|
*
|
||||||
|
* @param {EventObj} evt event to validate
|
||||||
|
* TODO: @param {number} targetDifficulty target proof-of-work difficulty
|
||||||
|
*/
|
||||||
|
export const validatePow = (evt: Event) => {
|
||||||
|
const tag = evt.tags.find(tag => tag[0] === 'nonce');
|
||||||
|
if (!tag) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const difficultyCommitment = Number(tag[2]);
|
||||||
|
if (!difficultyCommitment || Number.isNaN(difficultyCommitment)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return zeroLeadingBitsCount(evt.id) >= difficultyCommitment;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const sortByCreatedAt = (evt1: Event, evt2: Event) => {
|
||||||
|
if (evt1.created_at === evt2.created_at) {
|
||||||
|
// console.log('TODO: OMG exactly at the same time, figure out how to sort then', evt1, evt2);
|
||||||
|
}
|
||||||
|
return evt1.created_at > evt2.created_at ? -1 : 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const sortEventCreatedAt = (created_at: number) => (
|
||||||
|
{created_at: a}: Event,
|
||||||
|
{created_at: b}: Event,
|
||||||
|
) => (
|
||||||
|
Math.abs(a - created_at) < Math.abs(b - created_at) ? -1 : 1
|
||||||
|
);
|
||||||
|
|
||||||
|
const isReply = ([tag, , , marker]: string[]) => tag === 'e' && marker !== 'mention';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* find reply-to ID according to nip-10, find marked reply or root tag or
|
||||||
|
* fallback to positional (last) e tag or return null
|
||||||
|
* @param {event} evt
|
||||||
|
* @returns replyToID | null
|
||||||
|
*/
|
||||||
|
export const getReplyTo = (evt: Event): string | null => {
|
||||||
|
const eventTags = evt.tags.filter(isReply);
|
||||||
|
const withReplyMarker = eventTags.filter(([, , , marker]) => marker === 'reply');
|
||||||
|
if (withReplyMarker.length === 1) {
|
||||||
|
return withReplyMarker[0][1];
|
||||||
|
}
|
||||||
|
const withRootMarker = eventTags.filter(([, , , marker]) => marker === 'root');
|
||||||
|
if (withReplyMarker.length === 0 && withRootMarker.length === 1) {
|
||||||
|
return withRootMarker[0][1];
|
||||||
|
}
|
||||||
|
// fallback to deprecated positional 'e' tags (nip-10)
|
||||||
|
const lastTag = eventTags.at(-1);
|
||||||
|
return lastTag ? lastTag[1] : null;
|
||||||
|
};
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
@ -1,39 +0,0 @@
|
|||||||
@import "tabs.css";
|
|
||||||
@import "cards.css";
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
html {
|
|
||||||
--bgcolor: #fff7e9;
|
|
||||||
--bgcolor-accent: #ff731d;
|
|
||||||
--fgcolor: #1746a2;
|
|
||||||
--fgcolor-accent: #5f9df7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
html {
|
|
||||||
--bgcolor: #191919;
|
|
||||||
--bgcolor-accent: #2d4263;
|
|
||||||
--fgcolor: #c84b31;
|
|
||||||
--fgcolor-accent: #ecdbba;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
opacity: .75;
|
|
||||||
transition: opacity .5s ease-in-out;
|
|
||||||
}
|
|
||||||
img:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
*, ::after, ::before {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--bgcolor);
|
|
||||||
color: var(--fgcolor);
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 120%;
|
|
||||||
}
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import {relayPool} from 'nostr-tools';
|
|
||||||
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});
|
|
||||||
|
|
||||||
const feedlist = document.querySelector('#feedlist');
|
|
||||||
|
|
||||||
function onEvent(evt, relay) {
|
|
||||||
console.log(`event from ${relay}`, evt);
|
|
||||||
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 art = elem('article', {className: 'mbox'}, [img, body]);
|
|
||||||
feedlist.append(art);
|
|
||||||
}
|
|
||||||
|
|
||||||
pool.sub({
|
|
||||||
cb: onEvent,
|
|
||||||
filter: {authors: [
|
|
||||||
'52155da703585f25053830ac39863c80ea6adc57b360472c16c566a412d2bc38', // quark
|
|
||||||
'a6057742e73ff93b89587c27a74edf2cdab86904291416e90dc98af1c5f70cfa', // mosc
|
|
||||||
'3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d', // fiatjaf
|
|
||||||
'32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245' // jb55
|
|
||||||
]}
|
|
||||||
});
|
|
||||||
@ -0,0 +1,443 @@
|
|||||||
|
import {Event, nip19} from 'nostr-tools';
|
||||||
|
import {zeroLeadingBitsCount} from './utils/crypto';
|
||||||
|
import {elem} from './utils/dom';
|
||||||
|
import {bounce} from './utils/time';
|
||||||
|
import {isWssUrl} from './utils/url';
|
||||||
|
import {closeSettingsView, config, toggleSettingsView} from './settings';
|
||||||
|
import {subGlobalFeed, subEventID, subNote, subProfile, subPubkeys, subOwnContacts, subContactList} from './subscriptions'
|
||||||
|
import {getReplyTo, hasEventTag, isEvent, isMention, sortByCreatedAt, sortEventCreatedAt} from './events';
|
||||||
|
import {clearView, getViewContent, getViewElem, getViewOptions, setViewElem, view} from './view';
|
||||||
|
import {handleReaction, handleUpvote} from './reactions';
|
||||||
|
import {closePublishView, openWriteInput, togglePublishView} from './write';
|
||||||
|
import {handleMetadata, renderProfile} from './profiles';
|
||||||
|
import {followContact, getContactUpdateMessage, getContacts, getOwnContacts, refreshFollowing, resetContactList, setContactList, updateContactList, updateFollowBtn} from './contacts';
|
||||||
|
import {EventWithNip19, EventWithNip19AndReplyTo, textNoteList, replyList} from './notes';
|
||||||
|
import {createContact, createTextNote, renderEventDetails, renderRecommendServer, renderUpdateContact} from './ui';
|
||||||
|
|
||||||
|
// curl -H 'accept: application/nostr+json' https://relay.nostr.ch/
|
||||||
|
|
||||||
|
type EventRelayMap = {
|
||||||
|
[eventId: string]: string[];
|
||||||
|
};
|
||||||
|
const eventRelayMap: EventRelayMap = {}; // eventId: [relay1, relay2]
|
||||||
|
|
||||||
|
const renderNote = (
|
||||||
|
evt: EventWithNip19,
|
||||||
|
i: number,
|
||||||
|
sortedFeeds: EventWithNip19[],
|
||||||
|
) => {
|
||||||
|
if (getViewElem(evt.id)) { // note already in view
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const article = createTextNote(evt, eventRelayMap[evt.id][0]);
|
||||||
|
if (i === 0) {
|
||||||
|
getViewContent().append(article);
|
||||||
|
} else {
|
||||||
|
getViewElem(sortedFeeds[i - 1].id).before(article);
|
||||||
|
}
|
||||||
|
setViewElem(evt.id, article);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderContact = (pubkey: string) => {
|
||||||
|
if (getViewElem(`contact-${pubkey}`)) { // contact already in view
|
||||||
|
updateFollowBtn(pubkey);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const contact = createContact(pubkey);
|
||||||
|
if (contact) {
|
||||||
|
getViewContent().append(contact);
|
||||||
|
setViewElem(`contact-${pubkey}`, contact);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const hasEnoughPOW = (
|
||||||
|
[tag, , commitment]: string[],
|
||||||
|
eventId: string
|
||||||
|
) => {
|
||||||
|
return tag === 'nonce' && Number(commitment) >= config.filterDifficulty && zeroLeadingBitsCount(eventId) >= config.filterDifficulty;
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderFeed = bounce(() => {
|
||||||
|
const view = getViewOptions();
|
||||||
|
switch (view.type) {
|
||||||
|
case 'note':
|
||||||
|
textNoteList
|
||||||
|
.concat(replyList) // search id in notes and replies
|
||||||
|
.filter(note => note.id === view.id)
|
||||||
|
.forEach(renderNote);
|
||||||
|
break;
|
||||||
|
case 'profile':
|
||||||
|
[
|
||||||
|
...textNoteList // get notes
|
||||||
|
.filter(note => note.pubkey === view.id),
|
||||||
|
...replyList.filter(reply => reply.pubkey === view.id) // and replies
|
||||||
|
.map(reply => textNoteList.find(note => note.id === reply.replyTo)) // and the replied to notes
|
||||||
|
.filter(isEvent)
|
||||||
|
]
|
||||||
|
.sort(sortByCreatedAt)
|
||||||
|
.reverse()
|
||||||
|
.forEach(renderNote);
|
||||||
|
|
||||||
|
renderProfile(view.id);
|
||||||
|
refreshFollowing(view.id);
|
||||||
|
break;
|
||||||
|
case 'home':
|
||||||
|
const ids = view.id ? getContacts(view.id) : getOwnContacts();
|
||||||
|
[
|
||||||
|
...textNoteList
|
||||||
|
.filter(note => ids.includes(note.pubkey)),
|
||||||
|
...replyList // search id in notes and replies
|
||||||
|
.filter(reply => ids.includes(reply.pubkey))
|
||||||
|
.map(reply => textNoteList.find(note => note.id === reply.replyTo))
|
||||||
|
.filter(isEvent),
|
||||||
|
]
|
||||||
|
.sort(sortByCreatedAt)
|
||||||
|
.reverse()
|
||||||
|
.forEach(renderNote);
|
||||||
|
break;
|
||||||
|
case 'feed':
|
||||||
|
const now = Math.floor(Date.now() * 0.001);
|
||||||
|
textNoteList
|
||||||
|
.filter(note => {
|
||||||
|
// dont render notes from the future
|
||||||
|
if (note.created_at > now) return false;
|
||||||
|
// if difficulty filter is configured dont render notes with too little pow
|
||||||
|
return !config.filterDifficulty || note.tags.some(tag => hasEnoughPOW(tag, note.id))
|
||||||
|
})
|
||||||
|
.sort(sortByCreatedAt)
|
||||||
|
.reverse()
|
||||||
|
.forEach(renderNote);
|
||||||
|
break;
|
||||||
|
case 'contacts':
|
||||||
|
getContacts(view.id)
|
||||||
|
.forEach(renderContact);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}, 17); // (16.666 rounded, an arbitrary value to limit updates to max 60x per s)
|
||||||
|
|
||||||
|
const renderReply = (evt: EventWithNip19AndReplyTo) => {
|
||||||
|
const parent = getViewElem(evt.replyTo);
|
||||||
|
if (!parent || getViewElem(evt.id)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let replyContainer = parent.querySelector('.mbox-replies');
|
||||||
|
if (!replyContainer) {
|
||||||
|
replyContainer = elem('div', {className: 'mbox-replies'});
|
||||||
|
parent.append(replyContainer);
|
||||||
|
parent.classList.add('mbox-has-replies');
|
||||||
|
}
|
||||||
|
const reply = createTextNote(evt, eventRelayMap[evt.id][0]);
|
||||||
|
replyContainer.append(reply);
|
||||||
|
setViewElem(evt.id, reply);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReply = (evt: EventWithNip19, relay: string) => {
|
||||||
|
if (
|
||||||
|
getViewElem(evt.id) // already rendered probably received from another relay
|
||||||
|
|| evt.tags.some(isMention) // ignore mentions for now
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const replyTo = getReplyTo(evt);
|
||||||
|
if (!replyTo) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const evtWithReplyTo = {replyTo, ...evt};
|
||||||
|
replyList.push(evtWithReplyTo);
|
||||||
|
renderReply(evtWithReplyTo);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTextNote = (evt: Event, relay: string) => {
|
||||||
|
if (evt.content.startsWith('vmess://') && !evt.content.includes(' ')) {
|
||||||
|
console.info('drop VMESS encrypted message');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (eventRelayMap[evt.id]) {
|
||||||
|
eventRelayMap[evt.id] = [...(eventRelayMap[evt.id]), relay]; // TODO: remove eventRelayMap and just check for getViewElem?
|
||||||
|
} else {
|
||||||
|
eventRelayMap[evt.id] = [relay];
|
||||||
|
const evtWithNip19 = {
|
||||||
|
nip19: {
|
||||||
|
note: nip19.noteEncode(evt.id),
|
||||||
|
npub: nip19.npubEncode(evt.pubkey),
|
||||||
|
},
|
||||||
|
...evt,
|
||||||
|
};
|
||||||
|
if (evt.tags.some(hasEventTag)) {
|
||||||
|
handleReply(evtWithNip19, relay);
|
||||||
|
} else {
|
||||||
|
textNoteList.push(evtWithNip19);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!getViewElem(evt.id)) {
|
||||||
|
renderFeed();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const rerenderFeed = () => {
|
||||||
|
clearView();
|
||||||
|
renderFeed();
|
||||||
|
};
|
||||||
|
config.rerenderFeed = rerenderFeed;
|
||||||
|
|
||||||
|
const handleContactList = (evt: Event, relay: string) => {
|
||||||
|
// TODO: if newer and view.type === 'home' rerenderFeed()
|
||||||
|
setContactList(evt);
|
||||||
|
const view = getViewOptions();
|
||||||
|
if (getViewElem(evt.id)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
view.type === 'contacts'
|
||||||
|
&& [view.id, config.pubkey].includes(evt.pubkey) // render if contact-list is from current users or current view
|
||||||
|
) {
|
||||||
|
renderFeed();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (view.type === 'profile' && view.id === evt.pubkey) {
|
||||||
|
// use find instead of sort?
|
||||||
|
const closestTextNotes = textNoteList.sort(sortEventCreatedAt(evt.created_at));
|
||||||
|
const closestNote = getViewElem(closestTextNotes[0].id);
|
||||||
|
if (!closestNote) {
|
||||||
|
// no close note, try later
|
||||||
|
setTimeout(() => handleContactList(evt, relay), 1500);
|
||||||
|
return;
|
||||||
|
};
|
||||||
|
const [addedContacts, removedContacts] = updateContactList(evt);
|
||||||
|
const content = getContactUpdateMessage(addedContacts, removedContacts);
|
||||||
|
if (!content.length) {
|
||||||
|
// P same as before, maybe only evt.content or 'a' tags changed?
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const art = renderUpdateContact({...evt, content}, relay);
|
||||||
|
closestNote.after(art);
|
||||||
|
setViewElem(evt.id, art);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRecommendServer = (evt: Event, relay: string) => {
|
||||||
|
if (getViewElem(evt.id) || !isWssUrl(evt.content)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const art = renderRecommendServer(evt, relay);
|
||||||
|
if (textNoteList.length < 2) {
|
||||||
|
getViewContent().append(art);
|
||||||
|
} else {
|
||||||
|
const closestTextNotes = textNoteList
|
||||||
|
// TODO: prob change to hasEnoughPOW
|
||||||
|
.filter(note => !config.filterDifficulty || note.tags.some(([tag, , commitment]) => tag === 'nonce' && Number(commitment) >= config.filterDifficulty))
|
||||||
|
// use find instead of sort?
|
||||||
|
.sort(sortEventCreatedAt(evt.created_at));
|
||||||
|
getViewElem(closestTextNotes[0].id)?.after(art); // TODO: note might not be in the dom yet, recommendedServers could be controlled by renderFeed
|
||||||
|
}
|
||||||
|
setViewElem(evt.id, art);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onEventDetails = (evt: Event, relay: string) => {
|
||||||
|
if (getViewElem(evt.id)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const article = renderEventDetails(evt, relay);
|
||||||
|
getViewContent().append(article);
|
||||||
|
setViewElem(evt.id, article);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onEvent = (evt: Event, relay: string) => {
|
||||||
|
switch (evt.kind) {
|
||||||
|
case 0:
|
||||||
|
handleMetadata(evt, relay);
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
handleTextNote(evt, relay);
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
handleRecommendServer(evt, relay);
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
handleContactList(evt, relay);
|
||||||
|
break;
|
||||||
|
case 7:
|
||||||
|
handleReaction(evt, relay);
|
||||||
|
default:
|
||||||
|
// console.log(`TODO: add support for event kind ${evt.kind}`/*, evt*/)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// subscribe and change view
|
||||||
|
const route = (path: string) => {
|
||||||
|
if (path === '/') {
|
||||||
|
const contactList = getOwnContacts();
|
||||||
|
if (contactList.length) {
|
||||||
|
subPubkeys(contactList, onEvent);
|
||||||
|
view('/', {type: 'home'});
|
||||||
|
} else {
|
||||||
|
subGlobalFeed(onEvent);
|
||||||
|
view('/feed', {type: 'feed'});
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (path === '/feed') {
|
||||||
|
subGlobalFeed(onEvent);
|
||||||
|
view('/feed', {type: 'feed'});
|
||||||
|
} else if (path.length === 64 && path.match(/^\/[0-9a-z]+$/)) {
|
||||||
|
const {type, data} = nip19.decode(path.slice(1));
|
||||||
|
if (typeof data !== 'string') {
|
||||||
|
console.warn('nip19 ProfilePointer, EventPointer and AddressPointer are not yet supported');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
switch(type) {
|
||||||
|
case 'note':
|
||||||
|
subNote(data, onEvent);
|
||||||
|
view(path, {type: 'note', id: data});
|
||||||
|
break;
|
||||||
|
case 'npub':
|
||||||
|
subProfile(data, onEvent);
|
||||||
|
view(path, {type: 'profile', id: data});
|
||||||
|
updateFollowBtn(data);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.warn(`type ${type} not yet supported`);
|
||||||
|
}
|
||||||
|
renderFeed();
|
||||||
|
} else if (path.length === 73 && path.match(/^\/contacts\/npub[0-9a-z]+$/)) {
|
||||||
|
const contactNpub = path.slice(10);
|
||||||
|
const {type: contactType, data: contactPubkey} = nip19.decode(contactNpub);
|
||||||
|
if (contactType === 'npub') {
|
||||||
|
subContactList(contactPubkey, onEvent);
|
||||||
|
view(path, {type: 'contacts', id: contactPubkey});
|
||||||
|
}
|
||||||
|
} else if (path.length === 73 && path.match(/^\/timeline\/npub[0-9a-z]+$/)) {
|
||||||
|
const timelineNpub = path.slice(10);
|
||||||
|
const {type: timelineType, data: timelinePubkey} = nip19.decode(timelineNpub);
|
||||||
|
if (timelineType === 'npub') {
|
||||||
|
const timelinePubkeys = getContacts(timelinePubkey);
|
||||||
|
subPubkeys(timelinePubkeys, onEvent);
|
||||||
|
view(path, {type: 'home', id: timelinePubkey});
|
||||||
|
}
|
||||||
|
} else if (path.length === 65) {
|
||||||
|
const eventID = path.slice(1);
|
||||||
|
subEventID(eventID, onEventDetails);
|
||||||
|
view(path, {type: 'event', id: eventID});
|
||||||
|
} else {
|
||||||
|
console.warn('no support for ', path);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// onload
|
||||||
|
route(location.pathname);
|
||||||
|
subOwnContacts(onEvent); // subscribe after route as routing unsubscribes current subs
|
||||||
|
|
||||||
|
// only push a new entry if there is no history onload
|
||||||
|
if (!history.length) {
|
||||||
|
history.pushState({}, '', location.pathname);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('popstate', (event) => {
|
||||||
|
route(location.pathname);
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleLink = (a: HTMLAnchorElement, e: MouseEvent) => {
|
||||||
|
const href = a.getAttribute('href');
|
||||||
|
if (typeof href !== 'string') {
|
||||||
|
console.warn('expected anchor to have href attribute', a);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
closeSettingsView();
|
||||||
|
closePublishView();
|
||||||
|
if (href === location.pathname) {
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
href === '/'
|
||||||
|
|| href.startsWith('/feed')
|
||||||
|
|| href.startsWith('/note')
|
||||||
|
|| href.startsWith('/npub')
|
||||||
|
|| href.startsWith('/contacts/npub')
|
||||||
|
|| href.startsWith('/timeline/npub')
|
||||||
|
|| (href.startsWith('/') && href.length === 65)
|
||||||
|
) {
|
||||||
|
route(href);
|
||||||
|
history.pushState({}, '', href);
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleButton = (button: HTMLButtonElement) => {
|
||||||
|
switch(button.name) {
|
||||||
|
case 'settings':
|
||||||
|
toggleSettingsView();
|
||||||
|
return;
|
||||||
|
case 'new-note':
|
||||||
|
togglePublishView();
|
||||||
|
return;
|
||||||
|
case 'back':
|
||||||
|
closePublishView();
|
||||||
|
return;
|
||||||
|
case 'import':
|
||||||
|
resetContactList(config.pubkey);
|
||||||
|
rerenderFeed();
|
||||||
|
subOwnContacts(onEvent);
|
||||||
|
subGlobalFeed(onEvent);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const id = button.dataset.id || (button.closest('[data-id]') as HTMLElement)?.dataset.id;
|
||||||
|
if (id) {
|
||||||
|
switch(button.name) {
|
||||||
|
case 'reply':
|
||||||
|
openWriteInput(button, id);
|
||||||
|
return;
|
||||||
|
case 'star':
|
||||||
|
const note = replyList.find(r => r.id === id) || textNoteList.find(n => n.id === (id));
|
||||||
|
note && handleUpvote(note);
|
||||||
|
return;
|
||||||
|
case 'follow':
|
||||||
|
followContact(id);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// const container = e.target.closest('[data-append]');
|
||||||
|
// if (container) {
|
||||||
|
// container.append(...parseTextContent(container.dataset.append));
|
||||||
|
// delete container.dataset.append;
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleContentClick = (content: HTMLElement) => {
|
||||||
|
const card = content.closest('article[data-id]') as HTMLElement;
|
||||||
|
if (
|
||||||
|
!card
|
||||||
|
|| !card.dataset.id
|
||||||
|
|| !card.dataset.kind
|
||||||
|
|| getSelection()?.toString() // do not navigate if user selects text
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const {kind, id} = card.dataset;
|
||||||
|
const href = `/${kind === '1' ? nip19.noteEncode(id) : id}`;
|
||||||
|
route(href);
|
||||||
|
history.pushState({}, '', href);
|
||||||
|
};
|
||||||
|
|
||||||
|
document.body.addEventListener('click', (event: MouseEvent) => {
|
||||||
|
// dont intercept command or shift-click
|
||||||
|
if (event.metaKey || event.shiftKey) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const target = event.target as HTMLElement;
|
||||||
|
const a = target?.closest('a');
|
||||||
|
if (a) {
|
||||||
|
handleLink(a, event);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const button = target?.closest('button');
|
||||||
|
if (button) {
|
||||||
|
handleButton(button);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const card = target?.closest('.mbox-body');
|
||||||
|
if (card) {
|
||||||
|
handleContentClick(card as HTMLElement);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/web-manifest-combined.json",
|
||||||
|
"background_color": "#191919",
|
||||||
|
"categories": ["news", "social"],
|
||||||
|
"description": "a nostr news client to connect with the world.",
|
||||||
|
"display": "fullscreen",
|
||||||
|
"name": "nostr",
|
||||||
|
"short_name": "nostr",
|
||||||
|
"start_url": "https://nostr.ch/",
|
||||||
|
"icons": [{
|
||||||
|
"src": "assets/nostr-favicon.png",
|
||||||
|
"sizes": "256x256",
|
||||||
|
"type": "image/png"
|
||||||
|
}, {
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "32x32"
|
||||||
|
}, {
|
||||||
|
"src": "assets/nostr-favicon.svg",
|
||||||
|
"sizes": "any"
|
||||||
|
}]
|
||||||
|
}
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
import { elem } from './utils/dom';
|
||||||
|
import { getNoxyUrl } from './utils/url';
|
||||||
|
|
||||||
|
export const parseJSON = (content: string): unknown => {
|
||||||
|
try {
|
||||||
|
return JSON.parse(content);
|
||||||
|
} catch(err) {
|
||||||
|
console.warn(err, content);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type FetchItem = {
|
||||||
|
href: string;
|
||||||
|
id: string;
|
||||||
|
relay: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type NoxyData = {
|
||||||
|
title: string;
|
||||||
|
descr: string;
|
||||||
|
images: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchQue: Array<FetchItem> = [];
|
||||||
|
|
||||||
|
let fetchPending: (null | Promise<NoxyData>) = null;
|
||||||
|
|
||||||
|
const fetchNext = (
|
||||||
|
href: string,
|
||||||
|
id: string,
|
||||||
|
relay: string,
|
||||||
|
) => {
|
||||||
|
const noxy = getNoxyUrl('meta', href, id, relay);
|
||||||
|
if (!noxy) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const previewId = noxy.searchParams.toString();
|
||||||
|
if (fetchPending) {
|
||||||
|
fetchQue.push({href, id, relay});
|
||||||
|
return previewId;
|
||||||
|
}
|
||||||
|
fetchPending = fetch(noxy.href)
|
||||||
|
.then(data => {
|
||||||
|
if (data.status === 200) {
|
||||||
|
return data.json();
|
||||||
|
}
|
||||||
|
// fetchQue.push({href, id, relay}); // could try one more time
|
||||||
|
return Promise.reject(data);
|
||||||
|
})
|
||||||
|
.then(meta => {
|
||||||
|
const container = document.getElementById(previewId);
|
||||||
|
const content: Array<HTMLElement> = [];
|
||||||
|
if (meta.images[0]) {
|
||||||
|
const img = getNoxyUrl('data', meta.images[0], id, relay);
|
||||||
|
img && content.push(
|
||||||
|
elem('img', {
|
||||||
|
className: 'preview-image',
|
||||||
|
loading: 'lazy',
|
||||||
|
src: img.href,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (meta.title) {
|
||||||
|
content.push(elem('h2', {className: 'preview-title'}, meta.title));
|
||||||
|
}
|
||||||
|
if (meta.descr) {
|
||||||
|
content.push(elem('p', {className: 'preview-descr'}, meta.descr))
|
||||||
|
}
|
||||||
|
if (container && content.length) {
|
||||||
|
container.append(elem('a', {href, rel: 'noopener noreferrer', target: '_blank'}, content));
|
||||||
|
container.classList.add('preview-loaded');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
fetchPending = null;
|
||||||
|
if (fetchQue.length) {
|
||||||
|
const {href, id, relay} = fetchQue.shift() as FetchItem;
|
||||||
|
return fetchNext(href, id, relay);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(err => err.text && err.text())
|
||||||
|
.then(errMsg => errMsg && console.warn(errMsg));
|
||||||
|
|
||||||
|
return previewId;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const linkPreview = (
|
||||||
|
href: string,
|
||||||
|
id: string,
|
||||||
|
relay: string,
|
||||||
|
) => {
|
||||||
|
if ((/\.(gif|jpe?g|png)$/i).test(href)) {
|
||||||
|
const img = getNoxyUrl('data', href, id, relay);
|
||||||
|
if (!img) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return elem('div', {},
|
||||||
|
[elem('img', {
|
||||||
|
className: 'preview-image-only',
|
||||||
|
loading: 'lazy',
|
||||||
|
src: img.href,
|
||||||
|
})]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const previewId = fetchNext(href, id, relay);
|
||||||
|
if (!previewId) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return elem('div', {
|
||||||
|
className: 'preview',
|
||||||
|
id: previewId,
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import {Event} from 'nostr-tools';
|
||||||
|
|
||||||
|
export type EventWithNip19 = Event & {
|
||||||
|
nip19: {
|
||||||
|
note: string;
|
||||||
|
npub: string;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const textNoteList: Array<EventWithNip19> = []; // could use indexDB
|
||||||
|
|
||||||
|
export type EventWithNip19AndReplyTo = EventWithNip19 & {
|
||||||
|
replyTo: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const replyList: Array<EventWithNip19AndReplyTo> = [];
|
||||||
@ -0,0 +1,149 @@
|
|||||||
|
import {Event} from 'nostr-tools';
|
||||||
|
import {elem, elemCanvas, parseTextContent} from './utils/dom';
|
||||||
|
import {getNoxyUrl} from './utils/url';
|
||||||
|
import {getViewElem, getViewOptions} from './view';
|
||||||
|
import {parseJSON} from './media';
|
||||||
|
import {sortByCreatedAt} from './events';
|
||||||
|
|
||||||
|
type Profile = {
|
||||||
|
name: string;
|
||||||
|
about?: string;
|
||||||
|
picture?: string;
|
||||||
|
website?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const transformMetadata = (data: unknown): Profile | undefined => {
|
||||||
|
if (!data || typeof data !== 'object' || Array.isArray(data)) {
|
||||||
|
console.warn('expected nip-01 JSON object with user info, but got something funny', data);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const hasNameString = 'name' in data && typeof data.name === 'string';
|
||||||
|
const hasAboutString = 'about' in data && typeof data.about === 'string';
|
||||||
|
const hasPictureString = 'picture' in data && typeof data.picture === 'string';
|
||||||
|
// custom
|
||||||
|
const hasDisplayName = 'display_name' in data && typeof data.display_name === 'string';
|
||||||
|
const hasWebsite = 'website' in data && typeof data.website === 'string';
|
||||||
|
|
||||||
|
if (!hasNameString && !hasAboutString && !hasPictureString && !hasDisplayName) {
|
||||||
|
console.warn('expected basic nip-01 user info (name, about, picture) but nothing found', data);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const name = (
|
||||||
|
hasNameString && data.name as string
|
||||||
|
|| hasDisplayName && data.display_name as string
|
||||||
|
|| ''
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
...(hasAboutString && {about: data.about as string}),
|
||||||
|
...(hasPictureString && {picture: data.picture as string}),
|
||||||
|
...(hasWebsite && {website: data.website as string})
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const profileMap: {
|
||||||
|
[pubkey: string]: Profile
|
||||||
|
} = {};
|
||||||
|
|
||||||
|
const metadataList: Array<Event> = [];
|
||||||
|
|
||||||
|
export const handleMetadata = (evt: Event, relay: string) => {
|
||||||
|
if (metadataList.find(({id}) => id === evt.id)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const contactEventList = metadataList.filter(({pubkey}) => pubkey === evt.pubkey);
|
||||||
|
metadataList.push(evt);
|
||||||
|
contactEventList.push(evt);
|
||||||
|
contactEventList.sort(sortByCreatedAt);
|
||||||
|
|
||||||
|
if (contactEventList.some(({created_at}) => created_at > evt.created_at) ) {
|
||||||
|
// evt is older
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const content = parseJSON(evt.content);
|
||||||
|
const metadata = transformMetadata(content);
|
||||||
|
if (!metadata) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
profileMap[evt.pubkey] = metadata;
|
||||||
|
|
||||||
|
if (metadata.picture) {
|
||||||
|
const imgUrl = getNoxyUrl('data', metadata.picture, evt.id, relay);
|
||||||
|
if (imgUrl) {
|
||||||
|
// update profile images that used some nip-13 work
|
||||||
|
// if (imgUrl.href && validatePow(evt)) {
|
||||||
|
// document.body
|
||||||
|
// .querySelectorAll(`canvas[data-pubkey="${evt.pubkey}"]`)
|
||||||
|
// .forEach(canvas => canvas.parentNode?.replaceChild(elem('img', {src: imgUrl.href}), canvas));
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (metadata.name) {
|
||||||
|
// update profile names
|
||||||
|
document.body
|
||||||
|
.querySelectorAll(`[data-profile="${evt.pubkey}"]`)
|
||||||
|
.forEach((username: HTMLElement) => {
|
||||||
|
username.textContent = metadata.name;
|
||||||
|
username.classList.add('mbox-kind0-name');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (metadata.about) {
|
||||||
|
const about = getViewElem(`about-${evt.pubkey}`);
|
||||||
|
if (about) {
|
||||||
|
const view = getViewOptions();
|
||||||
|
about.replaceChildren(...parseTextContent(
|
||||||
|
view.type === 'contacts'
|
||||||
|
? metadata.about.split('\n')[0]
|
||||||
|
: metadata.about
|
||||||
|
)[0]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getMetadata = (pubkey: string) => {
|
||||||
|
const user = profileMap[pubkey];
|
||||||
|
const about = user?.about;
|
||||||
|
const name = user?.name;
|
||||||
|
const userName = name || pubkey.slice(0, 8);
|
||||||
|
// const userImg = user?.picture;
|
||||||
|
const img = /* (userImg && validatePow(evt)) ? elem('img', {
|
||||||
|
alt: `${userName} ${host}`,
|
||||||
|
loading: 'lazy',
|
||||||
|
src: userImg,
|
||||||
|
title: `${userName} on ${host} ${userAbout}`,
|
||||||
|
}) : */ elemCanvas(pubkey);
|
||||||
|
return {about, img, name, userName};
|
||||||
|
};
|
||||||
|
|
||||||
|
export const renderProfile = (pubkey: string) => {
|
||||||
|
const header = getViewElem('header');
|
||||||
|
const metadata = profileMap[pubkey];
|
||||||
|
if (!header || !metadata) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (metadata.name) {
|
||||||
|
const h1 = header.querySelector('h1');
|
||||||
|
if (h1) {
|
||||||
|
h1.textContent = metadata.name;
|
||||||
|
document.title = metadata.name;
|
||||||
|
} else {
|
||||||
|
header.append(elem('h1', {}, metadata.name));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const detail = getViewElem(`detail-${pubkey}`);
|
||||||
|
if (metadata.about && !detail.children.length) {
|
||||||
|
const [content] = parseTextContent(metadata.about);
|
||||||
|
detail?.append(...content);
|
||||||
|
}
|
||||||
|
if (metadata.website) {
|
||||||
|
const website = detail.querySelector('[data-website]');
|
||||||
|
if (website) {
|
||||||
|
const url = metadata.website.toLowerCase().startsWith('http') ? metadata.website : `https://${metadata.website}`;
|
||||||
|
const [content] = parseTextContent(url);
|
||||||
|
website.replaceChildren(...content);
|
||||||
|
(website as HTMLDivElement).hidden = false;
|
||||||
|
} else {
|
||||||
|
detail.append(elem('div', {data: {website: ''}}, metadata.name));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
import {Event, signEvent, UnsignedEvent} from 'nostr-tools';
|
||||||
|
import {powEvent} from './system';
|
||||||
|
import {publish} from './relays';
|
||||||
|
import {hasEventTag} from './events';
|
||||||
|
import {getViewElem} from './view';
|
||||||
|
import {config} from './settings';
|
||||||
|
|
||||||
|
type ReactionMap = {
|
||||||
|
[eventId: string]: Array<Event>
|
||||||
|
};
|
||||||
|
|
||||||
|
const reactionMap: ReactionMap = {};
|
||||||
|
|
||||||
|
export const getReactions = (eventId: string) => reactionMap[eventId] || [];
|
||||||
|
|
||||||
|
export const getReactionContents = (eventId: string) => {
|
||||||
|
return reactionMap[eventId]?.map(({content}) => content) || [];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const handleReaction = (
|
||||||
|
evt: Event,
|
||||||
|
relay: string,
|
||||||
|
) => {
|
||||||
|
// last id is the note that is being reacted to https://github.com/nostr-protocol/nips/blob/master/25.md
|
||||||
|
const lastEventTag = evt.tags.filter(hasEventTag).at(-1);
|
||||||
|
if (!lastEventTag || !evt.content.length) {
|
||||||
|
// ignore reactions with no content
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const [, eventId] = lastEventTag;
|
||||||
|
if (reactionMap[eventId]) {
|
||||||
|
if (reactionMap[eventId].find(reaction => reaction.id === evt.id)) {
|
||||||
|
// already received this reaction from a different relay
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
reactionMap[eventId] = [evt, ...(reactionMap[eventId])];
|
||||||
|
} else {
|
||||||
|
reactionMap[eventId] = [evt];
|
||||||
|
}
|
||||||
|
const article = getViewElem(eventId);
|
||||||
|
if (article) {
|
||||||
|
const button = article.querySelector('button[name="star"]') as HTMLButtonElement;
|
||||||
|
const reactions = button.querySelector('[data-reactions]') as HTMLElement;
|
||||||
|
reactions.textContent = `${reactionMap[eventId].length || ''}`;
|
||||||
|
if (evt.pubkey === config.pubkey) {
|
||||||
|
const star = button.querySelector('img[src*="star"]');
|
||||||
|
star?.setAttribute('src', '/assets/star-fill.svg');
|
||||||
|
star?.setAttribute('title', getReactionContents(eventId).join(' '));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const upvote = async (
|
||||||
|
eventId: string,
|
||||||
|
evt: UnsignedEvent,
|
||||||
|
) => {
|
||||||
|
const article = getViewElem(eventId);
|
||||||
|
const reactionBtn = article.querySelector('button[name="star"]') as HTMLButtonElement;
|
||||||
|
const statusElem = article.querySelector('[data-reactions]') as HTMLElement;
|
||||||
|
reactionBtn.disabled = true;
|
||||||
|
const newReaction = await powEvent(evt, {
|
||||||
|
difficulty: config.difficulty,
|
||||||
|
statusElem,
|
||||||
|
timeout: config.timeout,
|
||||||
|
}).catch(console.warn);
|
||||||
|
if (!newReaction) {
|
||||||
|
statusElem.textContent = `${getReactions(eventId)?.length}`;
|
||||||
|
reactionBtn.disabled = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const privatekey = localStorage.getItem('private_key');
|
||||||
|
if (!privatekey) {
|
||||||
|
statusElem.textContent = 'no private key to sign';
|
||||||
|
statusElem.hidden = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const sig = signEvent(newReaction, privatekey);
|
||||||
|
// TODO: validateEvent
|
||||||
|
if (sig) {
|
||||||
|
statusElem.textContent = 'publishing…';
|
||||||
|
publish({...newReaction, sig}, (relay, error) => {
|
||||||
|
if (error) {
|
||||||
|
return console.error(error, relay);
|
||||||
|
}
|
||||||
|
console.info(`event published by ${relay}`);
|
||||||
|
});
|
||||||
|
reactionBtn.disabled = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const handleUpvote = (evt: Event) => {
|
||||||
|
const tags = [
|
||||||
|
...evt.tags
|
||||||
|
.filter(tag => ['e', 'p'].includes(tag[0])) // take e and p tags from event
|
||||||
|
.map(([a, b]) => [a, b]), // drop optional (nip-10) relay and marker fields, TODO: use relay?
|
||||||
|
['e', evt.id], ['p', evt.pubkey], // last e and p tag is the id and pubkey of the note being reacted to (nip-25)
|
||||||
|
];
|
||||||
|
upvote(evt.id, {
|
||||||
|
kind: 7,
|
||||||
|
pubkey: config.pubkey,
|
||||||
|
content: '+',
|
||||||
|
tags,
|
||||||
|
created_at: Math.floor(Date.now() * 0.001),
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
import {Event, Filter, relayInit, Relay, Sub} from 'nostr-tools';
|
||||||
|
|
||||||
|
type SubCallback = (
|
||||||
|
event: Readonly<Event>,
|
||||||
|
relay: Readonly<string>,
|
||||||
|
) => void;
|
||||||
|
|
||||||
|
type Subscribe = {
|
||||||
|
cb: SubCallback;
|
||||||
|
filter: Filter;
|
||||||
|
unsub?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const subList: Array<Sub> = [];
|
||||||
|
const currentSubList: Array<Subscribe> = [];
|
||||||
|
const relayMap = new Map<string, Relay>();
|
||||||
|
|
||||||
|
export const addRelay = async (url: string) => {
|
||||||
|
const relay = relayInit(url);
|
||||||
|
relay.on('connect', () => {
|
||||||
|
console.info(`connected to ${relay.url}`);
|
||||||
|
});
|
||||||
|
relay.on('error', () => {
|
||||||
|
console.warn(`failed to connect to ${relay.url}`);
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
await relay.connect();
|
||||||
|
currentSubList.forEach(({cb, filter}) => subscribe(cb, filter, relay));
|
||||||
|
relayMap.set(url, relay);
|
||||||
|
} catch {
|
||||||
|
console.warn(`could not connect to ${url}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const unsubscribe = (sub: Sub) => {
|
||||||
|
sub.unsub();
|
||||||
|
subList.splice(subList.indexOf(sub), 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const subscribe = (
|
||||||
|
cb: SubCallback,
|
||||||
|
filter: Filter,
|
||||||
|
relay: Relay,
|
||||||
|
unsub?: boolean
|
||||||
|
) => {
|
||||||
|
const sub = relay.sub([filter]);
|
||||||
|
subList.push(sub);
|
||||||
|
sub.on('event', (event: Event) => {
|
||||||
|
cb(event, relay.url);
|
||||||
|
});
|
||||||
|
if (unsub) {
|
||||||
|
sub.on('eose', () => {
|
||||||
|
// console.log('eose', relay.url);
|
||||||
|
unsubscribe(sub);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return sub;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const sub = (obj: Subscribe) => {
|
||||||
|
currentSubList.push(obj);
|
||||||
|
relayMap.forEach((relay) => subscribe(obj.cb, obj.filter, relay, obj.unsub));
|
||||||
|
};
|
||||||
|
|
||||||
|
export const subOnce = (
|
||||||
|
obj: Subscribe & {relay: string}
|
||||||
|
) => {
|
||||||
|
const relay = relayMap.get(obj.relay);
|
||||||
|
if (relay) {
|
||||||
|
const sub = subscribe(obj.cb, obj.filter, relay);
|
||||||
|
sub.on('eose', () => {
|
||||||
|
// console.log('eose', obj.relay);
|
||||||
|
unsubscribe(sub);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const unsubAll = () => {
|
||||||
|
subList.forEach(unsubscribe);
|
||||||
|
currentSubList.length = 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
type PublishCallback = (
|
||||||
|
relay: string,
|
||||||
|
errorMessage?: string,
|
||||||
|
) => void;
|
||||||
|
|
||||||
|
export const publish = (
|
||||||
|
event: Event,
|
||||||
|
cb: PublishCallback,
|
||||||
|
) => {
|
||||||
|
relayMap.forEach((relay, url) => {
|
||||||
|
const pub = relay.publish(event);
|
||||||
|
pub.on('ok', () => {
|
||||||
|
console.info(`${relay.url} has accepted our event`);
|
||||||
|
cb(relay.url);
|
||||||
|
});
|
||||||
|
pub.on('failed', (reason: any) => {
|
||||||
|
console.error(`failed to publish to ${relay.url}: ${reason}`);
|
||||||
|
cb(relay.url, reason);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
addRelay('wss://relay.snort.social');
|
||||||
|
addRelay('wss://nostr.bitcoiner.social');
|
||||||
|
addRelay('wss://nostr.mom');
|
||||||
|
addRelay('wss://relay.nostr.bg');
|
||||||
|
addRelay('wss://nos.lol');
|
||||||
|
// addRelay('wss://relay.nostr.ch');
|
||||||
@ -0,0 +1,236 @@
|
|||||||
|
import {generatePrivateKey, getPublicKey, signEvent} from 'nostr-tools';
|
||||||
|
import {updateElemHeight} from './utils/dom';
|
||||||
|
import {powEvent} from './system';
|
||||||
|
import {publish} from './relays';
|
||||||
|
|
||||||
|
const settingsView = document.querySelector('#settings') as HTMLElement;
|
||||||
|
|
||||||
|
export const closeSettingsView = () => settingsView.hidden = true;
|
||||||
|
|
||||||
|
export const toggleSettingsView = () => settingsView.hidden = !settingsView.hidden;
|
||||||
|
|
||||||
|
let pubkey: string = '';
|
||||||
|
|
||||||
|
const loadOrGenerateKeys = () => {
|
||||||
|
const storedPubKey = localStorage.getItem('pub_key');
|
||||||
|
if (storedPubKey) {
|
||||||
|
return storedPubKey;
|
||||||
|
}
|
||||||
|
const privatekey = generatePrivateKey();
|
||||||
|
const pubkey = getPublicKey(privatekey);
|
||||||
|
localStorage.setItem('private_key', privatekey);
|
||||||
|
localStorage.setItem('pub_key', pubkey);
|
||||||
|
return pubkey;
|
||||||
|
};
|
||||||
|
|
||||||
|
let filterDifficulty: number = 0;
|
||||||
|
let difficulty: number = 16;
|
||||||
|
let timeout: number = 5;
|
||||||
|
let rerenderFeed: (() => void) | undefined;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* global config object
|
||||||
|
* config.pubkey, if not set loaded from localStorage or generate a new key
|
||||||
|
*/
|
||||||
|
export const config = {
|
||||||
|
get pubkey() {
|
||||||
|
if (!pubkey) {
|
||||||
|
pubkey = loadOrGenerateKeys();
|
||||||
|
}
|
||||||
|
return pubkey;
|
||||||
|
},
|
||||||
|
set pubkey(value) {
|
||||||
|
console.info(`pubkey was set to ${value}`);
|
||||||
|
pubkey = value;
|
||||||
|
},
|
||||||
|
get filterDifficulty() {
|
||||||
|
return filterDifficulty;
|
||||||
|
},
|
||||||
|
get difficulty() {
|
||||||
|
return difficulty;
|
||||||
|
},
|
||||||
|
get timeout() {
|
||||||
|
return timeout;
|
||||||
|
},
|
||||||
|
set rerenderFeed(value: () => void) {
|
||||||
|
rerenderFeed = value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNumberFromStorage = (
|
||||||
|
item: string,
|
||||||
|
fallback: number,
|
||||||
|
) => {
|
||||||
|
const stored = localStorage.getItem(item);
|
||||||
|
if (!stored) {
|
||||||
|
return fallback;
|
||||||
|
}
|
||||||
|
return Number(stored);
|
||||||
|
};
|
||||||
|
|
||||||
|
// filter difficulty
|
||||||
|
const filterDifficultyInput = document.querySelector('#filterDifficulty') as HTMLInputElement;
|
||||||
|
const filterDifficultyDisplay = document.querySelector('[data-display="filter_difficulty"]') as HTMLElement;
|
||||||
|
filterDifficultyInput.addEventListener('input', (e) => {
|
||||||
|
localStorage.setItem('filter_difficulty', filterDifficultyInput.value);
|
||||||
|
filterDifficulty = filterDifficultyInput.valueAsNumber;
|
||||||
|
filterDifficultyDisplay.textContent = filterDifficultyInput.value;
|
||||||
|
rerenderFeed && rerenderFeed();
|
||||||
|
});
|
||||||
|
filterDifficulty = getNumberFromStorage('filter_difficulty', 0);
|
||||||
|
filterDifficultyInput.valueAsNumber = filterDifficulty;
|
||||||
|
filterDifficultyDisplay.textContent = filterDifficultyInput.value;
|
||||||
|
|
||||||
|
// mining difficulty target
|
||||||
|
const miningTargetInput = document.querySelector('#miningTarget') as HTMLInputElement;
|
||||||
|
miningTargetInput.addEventListener('input', (e) => {
|
||||||
|
localStorage.setItem('mining_target', miningTargetInput.value);
|
||||||
|
difficulty = miningTargetInput.valueAsNumber;
|
||||||
|
});
|
||||||
|
// arbitrary difficulty default, still experimenting.
|
||||||
|
difficulty = getNumberFromStorage('mining_target', 16);
|
||||||
|
miningTargetInput.valueAsNumber = difficulty;
|
||||||
|
|
||||||
|
// mining timeout
|
||||||
|
const miningTimeoutInput = document.querySelector('#miningTimeout') as HTMLInputElement;
|
||||||
|
miningTimeoutInput.addEventListener('input', (e) => {
|
||||||
|
localStorage.setItem('mining_timeout', miningTimeoutInput.value);
|
||||||
|
timeout = miningTimeoutInput.valueAsNumber;
|
||||||
|
});
|
||||||
|
timeout = getNumberFromStorage('mining_timeout', 5);
|
||||||
|
miningTimeoutInput.valueAsNumber = timeout;
|
||||||
|
|
||||||
|
|
||||||
|
// settings
|
||||||
|
const settingsForm = document.querySelector('form[name="settings"]') as HTMLFormElement;
|
||||||
|
const privateKeyInput = settingsForm.querySelector('#privatekey') as HTMLInputElement;
|
||||||
|
const pubKeyInput = settingsForm.querySelector('#pubkey') as HTMLInputElement;
|
||||||
|
const statusMessage = settingsForm.querySelector('#keystatus') as HTMLElement;
|
||||||
|
const generateBtn = settingsForm.querySelector('button[name="generate"]') as HTMLButtonElement;
|
||||||
|
const importBtn = settingsForm.querySelector('button[name="import"]') as HTMLButtonElement;
|
||||||
|
const privateTgl = settingsForm.querySelector('button[name="privatekey-toggle"]') as HTMLButtonElement;
|
||||||
|
|
||||||
|
const validKeys = (
|
||||||
|
privatekey: string,
|
||||||
|
pubkey: string,
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
if (getPublicKey(privatekey) === pubkey) {
|
||||||
|
statusMessage.hidden = true;
|
||||||
|
statusMessage.textContent = 'public-key corresponds to private-key';
|
||||||
|
importBtn.removeAttribute('disabled');
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
statusMessage.textContent = 'private-key does not correspond to public-key!'
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
statusMessage.textContent = `not a valid private-key: ${e.message || e}`;
|
||||||
|
}
|
||||||
|
statusMessage.hidden = false;
|
||||||
|
importBtn.disabled = true;
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
generateBtn.addEventListener('click', () => {
|
||||||
|
const privatekey = generatePrivateKey();
|
||||||
|
const pubkey = getPublicKey(privatekey);
|
||||||
|
if (validKeys(privatekey, pubkey)) {
|
||||||
|
privateKeyInput.value = privatekey;
|
||||||
|
pubKeyInput.value = pubkey;
|
||||||
|
statusMessage.textContent = 'private-key created!';
|
||||||
|
statusMessage.hidden = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
importBtn.addEventListener('click', () => {
|
||||||
|
const privatekey = privateKeyInput.value;
|
||||||
|
const pubkeyInput = pubKeyInput.value;
|
||||||
|
if (validKeys(privatekey, pubkeyInput)) {
|
||||||
|
localStorage.setItem('private_key', privatekey);
|
||||||
|
localStorage.setItem('pub_key', pubkeyInput);
|
||||||
|
statusMessage.textContent = 'stored private and public key locally!';
|
||||||
|
statusMessage.hidden = false;
|
||||||
|
config.pubkey = pubkeyInput;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
settingsForm.addEventListener('input', () => validKeys(privateKeyInput.value, pubKeyInput.value));
|
||||||
|
|
||||||
|
privateKeyInput.addEventListener('paste', (event) => {
|
||||||
|
if (pubKeyInput.value || !event.clipboardData) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (privateKeyInput.value === '' || ( // either privatekey field is empty
|
||||||
|
privateKeyInput.selectionStart === 0 // or the whole text is selected and replaced with the clipboard
|
||||||
|
&& privateKeyInput.selectionEnd === privateKeyInput.value.length
|
||||||
|
)) { // only generate the pubkey if no data other than the text from clipboard will be used
|
||||||
|
try {
|
||||||
|
pubKeyInput.value = getPublicKey(event.clipboardData.getData('text'));
|
||||||
|
} catch(err) {} // settings form will call validKeys on input and display the error
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
privateTgl.addEventListener('click', () => {
|
||||||
|
privateKeyInput.type = privateKeyInput.type === 'text' ? 'password' : 'text';
|
||||||
|
});
|
||||||
|
|
||||||
|
privateKeyInput.value = localStorage.getItem('private_key') || '';
|
||||||
|
pubKeyInput.value = localStorage.getItem('pub_key') || '';
|
||||||
|
|
||||||
|
// profile
|
||||||
|
const profileForm = document.querySelector('form[name="profile"]') as HTMLFormElement;
|
||||||
|
const profileSubmit = profileForm.querySelector('button[type="submit"]') as HTMLButtonElement;
|
||||||
|
const profileStatus = document.querySelector('#profilestatus') as HTMLElement;
|
||||||
|
|
||||||
|
profileForm.addEventListener('input', (e) => {
|
||||||
|
if (e.target instanceof HTMLElement) {
|
||||||
|
if (e.target?.nodeName === 'TEXTAREA') {
|
||||||
|
updateElemHeight(e.target as HTMLTextAreaElement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const form = new FormData(profileForm);
|
||||||
|
const name = form.get('name');
|
||||||
|
const about = form.get('about');
|
||||||
|
const picture = form.get('picture');
|
||||||
|
profileSubmit.disabled = !(name || about || picture);
|
||||||
|
});
|
||||||
|
|
||||||
|
profileForm.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const form = new FormData(profileForm);
|
||||||
|
const newProfile = await powEvent({
|
||||||
|
kind: 0,
|
||||||
|
pubkey: config.pubkey,
|
||||||
|
content: JSON.stringify(Object.fromEntries(form)),
|
||||||
|
tags: [],
|
||||||
|
created_at: Math.floor(Date.now() * 0.001)
|
||||||
|
}, {
|
||||||
|
difficulty: config.difficulty,
|
||||||
|
statusElem: profileStatus,
|
||||||
|
timeout: config.timeout,
|
||||||
|
}).catch(console.warn);
|
||||||
|
if (!newProfile) {
|
||||||
|
profileStatus.textContent = 'publishing profile data canceled';
|
||||||
|
profileStatus.hidden = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const privatekey = localStorage.getItem('private_key');
|
||||||
|
if (!privatekey) {
|
||||||
|
profileStatus.textContent = 'no private key to sign';
|
||||||
|
profileStatus.hidden = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const sig = signEvent(newProfile, privatekey);
|
||||||
|
// TODO: validateEvent
|
||||||
|
if (sig) {
|
||||||
|
publish({...newProfile, sig}, (relay, error) => {
|
||||||
|
if (error) {
|
||||||
|
return console.error(error, relay);
|
||||||
|
}
|
||||||
|
console.info(`publish request sent to ${relay}`);
|
||||||
|
profileStatus.textContent = 'profile successfully published';
|
||||||
|
profileStatus.hidden = false;
|
||||||
|
profileSubmit.disabled = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,336 @@
|
|||||||
|
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */
|
||||||
|
.mbox {
|
||||||
|
align-items: center;
|
||||||
|
border-top: 1px solid var(--bgcolor-nav);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
/* margin-bottom: 1rem; */
|
||||||
|
max-width: var(--content-width);
|
||||||
|
padding: var(--gap-half) var(--gap-half) 0 var(--gap-half);
|
||||||
|
}
|
||||||
|
.mbox:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-img {
|
||||||
|
align-self: start;
|
||||||
|
background-color: var(--bgcolor-textinput);
|
||||||
|
border-radius: var(--profileimg-size);
|
||||||
|
flex-basis: var(--profileimg-size);
|
||||||
|
flex-shrink: 0;
|
||||||
|
height: var(--profileimg-size);
|
||||||
|
margin-right: var(--gap-half);
|
||||||
|
max-height: var(--profileimg-size);
|
||||||
|
max-width: var(--profileimg-size);
|
||||||
|
overflow: clip;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
a.mbox-img:focus {
|
||||||
|
--focus-border-radius: var(--profileimg-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-img canvas,
|
||||||
|
.mbox-img img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-updated-contact .mbox-img,
|
||||||
|
.mbox-recommend-server .mbox-img {
|
||||||
|
--profileimg-size: 2rem;
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-body {
|
||||||
|
flex-basis: 100%;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 1;
|
||||||
|
padding-bottom: var(--gap-half);
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
.mbox-img + .mbox-body {
|
||||||
|
--max-width: calc(100% - var(--profileimg-size) - var(--gap-half));
|
||||||
|
flex-basis: var(--max-width);
|
||||||
|
max-width: var(--max-width);
|
||||||
|
}
|
||||||
|
.mbox-replies .mbox-replies .mbox-img + .mbox-body {
|
||||||
|
--max-width: calc(100% - var(--profileimg-size) + var(--gap-half));
|
||||||
|
}
|
||||||
|
.mbox-contact .mbox-img + .mbox-body {
|
||||||
|
--max-width: calc(100% - var(--profileimg-size) - var(--gap-half) - 90px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-header {
|
||||||
|
align-items: baseline;
|
||||||
|
display: flex;
|
||||||
|
gap: var(--gap-quarter);
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: .1rem 0;
|
||||||
|
min-height: 1.8rem;
|
||||||
|
}
|
||||||
|
.mbox-header a {
|
||||||
|
font-size: var(--font-small);
|
||||||
|
line-height: var(--lineheight-small);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.mbox-header small {
|
||||||
|
color: var(--color-accent);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-username {
|
||||||
|
}
|
||||||
|
.mbox-kind0-name {
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-contact {
|
||||||
|
align-items: start; /* TODO: maybe all .mbox element should have align-items start */
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
padding: var(--gap-half);
|
||||||
|
}
|
||||||
|
.mbox-contact .mbox-header {
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
.mbox-contact .mbox-body {
|
||||||
|
flex-basis: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
min-width: 0; /* with this mbox-content displays text on one line cutting off text-overflo... */
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.mbox-contact .mbox-content {
|
||||||
|
overflow: clip;
|
||||||
|
padding-right: var(--gap-quarter);
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-cta {
|
||||||
|
align-items: center;
|
||||||
|
align-self: center;
|
||||||
|
display: flex;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-updated-contact,
|
||||||
|
.mbox-recommend-server {
|
||||||
|
padding-bottom: var(--gap-quarter);
|
||||||
|
}
|
||||||
|
.mbox-updated-contact .mbox-body,
|
||||||
|
.mbox-recommend-server .mbox-body {
|
||||||
|
display: block;
|
||||||
|
font-size: var(--font-small);
|
||||||
|
padding-bottom: var(--gap-quarter);
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
.mbox-updated-contact + .mbox-updated-contact,
|
||||||
|
.mbox-recommend-server + .mbox-updated-contact {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-updated-contact .mbox-header,
|
||||||
|
.mbox-recommend-server .mbox-header {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.mbox-content {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-updated-contact {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.mbox-updated-contact + .mbox-updated-contact {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox {
|
||||||
|
overflow: clip;
|
||||||
|
}
|
||||||
|
.mbox .mbox {
|
||||||
|
border-top: none;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: visible;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.mbox button:not(#publish) {
|
||||||
|
--bg-color: none;
|
||||||
|
--border-color: none;
|
||||||
|
}
|
||||||
|
.mbox button img + small:not(:empty) {
|
||||||
|
padding-left: .5rem;
|
||||||
|
}
|
||||||
|
.mbox-replies {
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex-basis: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.mbox-replies .mbox-replies {
|
||||||
|
--reply-padding: 3rem;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
padding: 0 0 0 var(--reply-padding);
|
||||||
|
}
|
||||||
|
.mbox-replies .mbox-replies .mbox-replies {
|
||||||
|
--reply-padding: 0;
|
||||||
|
}
|
||||||
|
/* direct replies, test with http://localhost:8001/note1aer8780aywqqlfgjjch75uqmkujcdj4edv009nuludwq7w46lkvssclaxx */
|
||||||
|
.mbox-replies .mbox-replies .mbox:first-child::before {
|
||||||
|
background: none;
|
||||||
|
border-color: var(--bgcolor-inactive);;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 0 .2rem .2rem;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: var(--profileimg-size-quarter);
|
||||||
|
left: calc(-1 * var(--profileimg-size-quarter));
|
||||||
|
margin-left: -.1rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: .8rem;
|
||||||
|
}
|
||||||
|
.mbox-replies .mbox-replies .mbox-replies .mbox::before {
|
||||||
|
content: none;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .mbox-replies .mbox-replies .mbox-replies .mbox::after, */
|
||||||
|
.mbox-replies .mbox-replies .mbox-replies::before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-body,
|
||||||
|
.mbox-has-replies:not(:last-child) {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.mbox-has-replies > .mbox-body::after,
|
||||||
|
.mbox-replies .mbox-has-replies:not(:last-child)::after,
|
||||||
|
.mbox-has-replies:not(:last-child) .mbox > .mbox-body::after,
|
||||||
|
.mbox-has-replies .mbox:not(:last-child) > .mbox-body::after {
|
||||||
|
bottom: 0;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: .2rem;
|
||||||
|
width: .2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-body::after,
|
||||||
|
.mbox-has-replies::after {
|
||||||
|
background: var(--bgcolor-inactive);
|
||||||
|
}
|
||||||
|
.mbox-has-replies .mbox:not(:last-child) > .mbox-body::after {
|
||||||
|
left: -33px;
|
||||||
|
}
|
||||||
|
/* test with http://localhost:8001/note1aer8780aywqqlfgjjch75uqmkujcdj4edv009nuludwq7w46lkvssclaxx */
|
||||||
|
.mbox-has-replies .mbox-has-replies .mbox:not(:last-child) > .mbox-body::after {
|
||||||
|
left: -18px;
|
||||||
|
}
|
||||||
|
.mbox-has-replies > .mbox-body::after {
|
||||||
|
left: -33px;
|
||||||
|
}
|
||||||
|
.mbox-has-replies:not(:last-child) .mbox > .mbox-body::after {
|
||||||
|
left: -33px;
|
||||||
|
}
|
||||||
|
.mbox-has-replies:not(:last-child)::after {
|
||||||
|
left: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-replies .mbox-has-replies:not(:last-child)::after {
|
||||||
|
left: 19px;
|
||||||
|
}
|
||||||
|
/* test with http://localhost:8001/note1quq9waqtrgl97v3gutg4au4zthetz853u8knsnz65nrqhavxvq8qrp6lyg */
|
||||||
|
.mbox-replies .mbox-replies .mbox-has-replies:not(:last-child)::after {
|
||||||
|
left: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-replies .mbox-replies .mbox-has-replies > .mbox-body::after {
|
||||||
|
left: -18px;
|
||||||
|
}
|
||||||
|
.mbox-has-replies .mbox-has-replies .mbox-has-replies .mbox:not(:last-child) > .mbox-body::after {
|
||||||
|
left: -18px;
|
||||||
|
}
|
||||||
|
.mbox-replies .mbox:not(.mbox-has-replies):last-child > .mbox-body::after {
|
||||||
|
content: none;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbox-replies .mbox-replies .mbox-has-replies.mbox:not(:last-child) > .mbox-body::after {
|
||||||
|
left: -18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.mbox-replies .mbox .mbox .mbox-img {
|
||||||
|
--profileimg-size: 2rem;
|
||||||
|
left: -.2rem;
|
||||||
|
margin-right: .5rem;
|
||||||
|
margin-top: .2rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
.mbox-replies .mbox-body.mbox-oneline {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: var(--font-small);
|
||||||
|
padding-bottom: var(--gap-half);
|
||||||
|
padding-top: var(--gap-eight);
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
.mbox-replies .mbox .mbox .mbox-body {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
.mbox-replies .mbox .mbox .buttons {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-append]::after {
|
||||||
|
color: var(--color-accent);
|
||||||
|
content: "…";
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-loaded a {
|
||||||
|
background-color: var(--bgcolor-textinput);
|
||||||
|
border: 1px solid var(--bgcolor-inactive);
|
||||||
|
color: var(--color);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: var(--gap) 0 0 0;
|
||||||
|
max-width: 48rem;
|
||||||
|
padding: 1.5rem 1.8rem;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.preview-loaded a:visited {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-title {
|
||||||
|
font-size: inherit;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-descr {
|
||||||
|
font-size: var(--font-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image {
|
||||||
|
background-color: rgba(72, 63, 63, 0.07);
|
||||||
|
margin-bottom: var(--gap);
|
||||||
|
max-height: 30vh;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image-only {
|
||||||
|
background-color: var(--bgcolor-textinput);
|
||||||
|
border: 1px solid var(--bgcolor-inactive);
|
||||||
|
margin: var(--gap) 0 0 0;
|
||||||
|
max-width: 48rem;
|
||||||
|
padding: 1.5rem 1.8rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
|
||||||
|
.mbox-img {
|
||||||
|
opacity: .73;
|
||||||
|
}
|
||||||
|
.mbox-replies {
|
||||||
|
margin-bottom: 4px !important;
|
||||||
|
outline: 2px dashed rgba(0, 255, 0, 0.15);
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
.mbox-replies .mbox-replies {
|
||||||
|
outline-color: rgba(0, 255, 0, .4);
|
||||||
|
outline-offset: -4px;
|
||||||
|
}
|
||||||
|
.mbox-replies .mbox-replies .mbox-replies {
|
||||||
|
outline-color: rgba(0, 255, 0, .7);
|
||||||
|
outline-offset: -6px;
|
||||||
|
}
|
||||||
|
.mbox-replies .mbox-replies .mbox-replies .mbox-replies {
|
||||||
|
outline-color: rgba(210, 255, 0, 1);
|
||||||
|
outline-offset: -8px;
|
||||||
|
}
|
||||||
|
.mbox-replies .mbox-replies .mbox-replies .mbox-replies .mbox-replies {
|
||||||
|
outline-color: rgb(187, 119, 9);
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
#errorOverlay {
|
||||||
|
background: var(--bgcolor-danger);
|
||||||
|
bottom: 0;
|
||||||
|
color: var(--color-danger);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
left: 0;
|
||||||
|
max-width: 100vw;
|
||||||
|
overflow: auto;
|
||||||
|
padding: var(--gap);
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-title {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#errorOverlay button {
|
||||||
|
background-color: var(--bgcolor-danger-input);
|
||||||
|
border: none;
|
||||||
|
color: var(--color-danger);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
#errorOverlay button:focus {
|
||||||
|
outline: 2px solid white;
|
||||||
|
outline-offset: var(--focus-outline-offset);
|
||||||
|
}
|
||||||
|
|
||||||
|
#errorOverlay .buttons {
|
||||||
|
max-width: var(--content-width);
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
#errorOverlay .buttons {
|
||||||
|
flex-basis: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,285 @@
|
|||||||
|
:root {
|
||||||
|
--transition-duration: .25s;
|
||||||
|
--transition-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
form,
|
||||||
|
.form {
|
||||||
|
--padding: 1.2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: var(--content-width);
|
||||||
|
padding: 0 var(--gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
/* ignore this container */
|
||||||
|
border: none;
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#newNote legend {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
color: var(--color);
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
label {
|
||||||
|
color: var(--color);
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: var(--padding);
|
||||||
|
text-indent: 0;
|
||||||
|
transition: background-color var(--transition-duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="number"],
|
||||||
|
input[type="password"],
|
||||||
|
input[type="text"],
|
||||||
|
input[type="url"],
|
||||||
|
textarea {
|
||||||
|
background: var(--bgcolor-textinput);
|
||||||
|
border: .2rem solid #b7b7b7;
|
||||||
|
border-radius: .2rem;
|
||||||
|
display: block;
|
||||||
|
margin: 0 0 var(--gap-half) 0;
|
||||||
|
padding: var(--padding);
|
||||||
|
}
|
||||||
|
label.number,
|
||||||
|
input[type="range"] {
|
||||||
|
margin: 0 0 var(--gap) 0;
|
||||||
|
}
|
||||||
|
input[type="number"]:focus,
|
||||||
|
input[type="password"]:focus,
|
||||||
|
input[type="text"]:focus,
|
||||||
|
input[type="url"]:focus,
|
||||||
|
textarea:focus {
|
||||||
|
border-color: var(--focus-border-color);
|
||||||
|
outline-offset: var(--focus-outline-offset);
|
||||||
|
outline: var(--focus-outline);
|
||||||
|
}
|
||||||
|
input:invalid {
|
||||||
|
outline: 2px solid var(--bgcolor-danger);
|
||||||
|
outline-offset: var(--focus-outline-offset);
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
/* max-height: 64vh; */
|
||||||
|
min-height: 20px;
|
||||||
|
resize: none;
|
||||||
|
transition: min-height var(--transition-duration) var(--transition-timing-function),
|
||||||
|
height var(--transition-duration) var(--transition-timing-function);
|
||||||
|
}
|
||||||
|
textarea:focus {
|
||||||
|
min-height: 3.5rem;
|
||||||
|
}
|
||||||
|
#newNote textarea {
|
||||||
|
min-height: 10rem;
|
||||||
|
}
|
||||||
|
#newNote textarea:focus {
|
||||||
|
min-height: 18rem;
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
#newNote textarea {
|
||||||
|
min-height: 8rem;
|
||||||
|
}
|
||||||
|
#newNote textarea:focus {
|
||||||
|
min-height: 15rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-basis: 100%;
|
||||||
|
gap: var(--gap);
|
||||||
|
justify-content: start;
|
||||||
|
margin: .6rem 0;
|
||||||
|
min-height: 2.2rem;
|
||||||
|
}
|
||||||
|
form .buttons,
|
||||||
|
.form .buttons,
|
||||||
|
.form-inline .buttons {
|
||||||
|
flex-basis: fit-content;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons img,
|
||||||
|
.buttons small,
|
||||||
|
.buttons span {
|
||||||
|
font-weight: normal;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
outline-offset: 1px;
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
|
button:active {
|
||||||
|
--bg-color: rgb(13, 74, 139);
|
||||||
|
--border-color: rgb(13, 74, 139);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary,
|
||||||
|
.secondary {
|
||||||
|
border: 0.2rem solid var(--bgcolor-accent);
|
||||||
|
border-radius: .2rem;
|
||||||
|
padding: .9rem 2rem .7rem 2rem;
|
||||||
|
}
|
||||||
|
.primary {
|
||||||
|
background-color: var(--bgcolor-accent);
|
||||||
|
}
|
||||||
|
.secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.secondary:disabled {
|
||||||
|
border-color: var(--color-accent);
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus {
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-inline {
|
||||||
|
--border-color: transparent;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--color-accent);
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0 .6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: var(--bgcolor-danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled {
|
||||||
|
--bg-color: var(--bgcolor-inactive);
|
||||||
|
--border-color: var(--bgcolor-inactive);
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-status {
|
||||||
|
flex-basis: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
min-height: 1.8rem;
|
||||||
|
padding: var(--padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-inline {
|
||||||
|
--padding: 1.2rem 1.3rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.form-inline * + * {
|
||||||
|
margin-left: var(--gap);
|
||||||
|
}
|
||||||
|
.form-inline button,
|
||||||
|
.form-inline input[type="number"],
|
||||||
|
.form-inline input[type="text"],
|
||||||
|
.form-inline textarea {
|
||||||
|
margin: .4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-inline input[type="number"],
|
||||||
|
.form-inline input[type="text"],
|
||||||
|
.form-inline textarea {
|
||||||
|
flex-basis: 50%;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
min-width: 100px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-inline button {
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.number {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
gap: var(--gap);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
label.number span {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 0 0 0 var(--padding);
|
||||||
|
}
|
||||||
|
label.number input[type="number"] {
|
||||||
|
align-self: baseline;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
@media (orientation: landscape) {
|
||||||
|
label.number span {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
label.number input[type="number"] + span {
|
||||||
|
padding: 0 var(--padding) 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
label.number {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--gap-half);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
label.number span {
|
||||||
|
padding: 0 var(--padding);
|
||||||
|
}
|
||||||
|
label.number input[type="number"] {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button#publish {
|
||||||
|
align-self: end;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
button[name="back"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#newNote button[name="back"] {
|
||||||
|
align-self: end;
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sendstatus {
|
||||||
|
margin-left: 0;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.focus-active {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.shrink-out {
|
||||||
|
animation-duration: var(--transition-duration);
|
||||||
|
animation-name: lineInserted;
|
||||||
|
transition: max-height calc(.5 * var(--transition-duration)) var(--transition-timing-function);
|
||||||
|
}
|
||||||
|
@keyframes lineInserted {
|
||||||
|
from {
|
||||||
|
max-height: 50px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
max-height: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,194 @@
|
|||||||
|
@import "view.css";
|
||||||
|
@import "cards.css";
|
||||||
|
@import "form.css";
|
||||||
|
@import "write.css";
|
||||||
|
@import "error.css";
|
||||||
|
/* @import "debug.css"; */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--content-width: min(100% - 2.4rem, 96ch);
|
||||||
|
/* 5px auto Highlight */
|
||||||
|
--focus-border-color: rgb(0, 122, 255);
|
||||||
|
--focus-border-radius: .2rem;
|
||||||
|
--focus-outline-color: rgb(192, 227, 252);
|
||||||
|
--focus-outline-offset: 2px;
|
||||||
|
--focus-outline-style: solid;
|
||||||
|
--focus-outline-width: 2px;
|
||||||
|
--focus-outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
|
||||||
|
--font-small: 1.2rem;
|
||||||
|
--lineheight-small: 1.5;
|
||||||
|
--gap: 2.4rem;
|
||||||
|
--gap-half: 1.2rem;
|
||||||
|
--gap-quarter: .6rem;
|
||||||
|
--gap-eight: .3rem;
|
||||||
|
--profileimg-size: 4rem;
|
||||||
|
--profileimg-size-half: 2rem;
|
||||||
|
--profileimg-size-quarter: 1rem;
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
:root {
|
||||||
|
--content-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: #ff79f9;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:where([hidden]) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
html {
|
||||||
|
--color: rgb(43, 43, 43);
|
||||||
|
--color-accent: rgb(118, 118, 118);
|
||||||
|
--color-accent-line: rgb(163, 163, 163);
|
||||||
|
--color-danger: #0e0e0e;
|
||||||
|
--color-visited: #7467c4;
|
||||||
|
--color-visited-line: #9083e3;
|
||||||
|
--color-inverse: #fff;
|
||||||
|
--bgcolor: #fff;
|
||||||
|
--bgcolor-nav: gainsboro;
|
||||||
|
--bgcolor-accent: #5194ff;
|
||||||
|
--bgcolor-danger: rgb(225, 40, 40);
|
||||||
|
--bgcolor-danger-input: rgba(255 255 255 / .85);
|
||||||
|
--bgcolor-inactive: #bababa;
|
||||||
|
--bgcolor-textinput: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
html {
|
||||||
|
--color: #d9d9d9;
|
||||||
|
--color-accent: #828282;
|
||||||
|
--color-accent-line: #737373;
|
||||||
|
--color-danger: #e3e3e3;
|
||||||
|
--color-visited: #796ae3;
|
||||||
|
--color-visited-line: #5d4fce;
|
||||||
|
--color-inverse: #101010;
|
||||||
|
--bgcolor: #101010;
|
||||||
|
--bgcolor-nav: rgb(31, 22, 51);
|
||||||
|
--bgcolor-accent: rgb(16, 77, 176);
|
||||||
|
--bgcolor-danger: rgb(169, 0, 0);
|
||||||
|
--bgcolor-danger-input: rgba(0 0 0 / .5);
|
||||||
|
--bgcolor-inactive: #353638;
|
||||||
|
--bgcolor-textinput: #0e0e0e;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
opacity: .75;
|
||||||
|
transition: opacity .5s ease-in-out;
|
||||||
|
}
|
||||||
|
img:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bgcolor);
|
||||||
|
color: var(--color);
|
||||||
|
font-size: 1.6rem;
|
||||||
|
line-height: 1.375;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
body {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
line-height: 1.428571428571429;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100%;
|
||||||
|
overflow: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5 { font-weight: normal; }
|
||||||
|
|
||||||
|
body,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
small,
|
||||||
|
time {
|
||||||
|
font-size: var(--font-small);
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas,
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
padding: 0 var(--gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.danger {
|
||||||
|
background-color: var(--bgcolor-danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-accent);
|
||||||
|
text-decoration-color: var(--color-accent-line);
|
||||||
|
text-decoration-line: underline;
|
||||||
|
text-decoration-style: solid;
|
||||||
|
text-decoration-thickness: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a .highlight {
|
||||||
|
color: var(--color);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus,
|
||||||
|
button:focus {
|
||||||
|
border-radius: var(--focus-border-radius);
|
||||||
|
outline: var(--focus-outline);
|
||||||
|
outline-offset: 0;
|
||||||
|
}
|
||||||
|
a:visited {
|
||||||
|
color: var(--color-visited);
|
||||||
|
text-decoration-color: var(--color-visited-line);
|
||||||
|
}
|
||||||
|
nav a:visited {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
img[alt] {
|
||||||
|
font-size: .9rem;
|
||||||
|
text-align: center;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dl {
|
||||||
|
display: grid;
|
||||||
|
grid-row-gap: var(--gap-half);
|
||||||
|
grid-template-columns: max-content auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
color: var(--color-accent);
|
||||||
|
grid-column-start: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
grid-column-start: 2;
|
||||||
|
}
|
||||||
@ -0,0 +1,203 @@
|
|||||||
|
.root {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
@media (orientation: landscape) {
|
||||||
|
.root {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 100%;
|
||||||
|
overflow: clip;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--bgcolor-nav);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-height: 4.6rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: .2rem 1.5rem;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
}
|
||||||
|
@supports (padding: max(0px)) {
|
||||||
|
nav {
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (orientation: landscape) {
|
||||||
|
nav {
|
||||||
|
align-items: stretch;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
nav a,
|
||||||
|
nav button {
|
||||||
|
--bgcolor-accent: transparent;
|
||||||
|
--border-color: transparent;
|
||||||
|
border-radius: 0;
|
||||||
|
color: inherit;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
@media (orientation: landscape) {
|
||||||
|
nav a,
|
||||||
|
nav button {
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
nav .spacer {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
nav button:last-child {
|
||||||
|
margin-bottom: .4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
nav .spacer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.view {
|
||||||
|
background-color: var(--bgcolor);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
left: 0;
|
||||||
|
min-height: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
overflow-x: clip;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
transform: translateX(0);
|
||||||
|
transition: transform .3s cubic-bezier(.465,.183,.153,.946);
|
||||||
|
width: 100%;
|
||||||
|
will-change: transform;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
@media (orientation: landscape) {
|
||||||
|
.view {
|
||||||
|
transition: opacity .3s cubic-bezier(.465,.183,.153,.946);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.view.view-next {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
.view.view-prev {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
.view.view-next {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
.view.view-prev {
|
||||||
|
transform: translateX(-20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (orientation: landscape) {
|
||||||
|
.view.view-next,
|
||||||
|
.view.view-next {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-inline: auto;
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
main .content {
|
||||||
|
height: 1px;
|
||||||
|
padding-bottom: 10rem;
|
||||||
|
}
|
||||||
|
nav .content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
nav a {
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h1 {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
--extra-space: calc(var(--profileimg-size) + var(--gap-half));
|
||||||
|
padding: var(--gap-half);
|
||||||
|
}
|
||||||
|
.hero-title {
|
||||||
|
align-items: baseline;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--gap-half);
|
||||||
|
justify-content: end;
|
||||||
|
max-width: var(--content-width);
|
||||||
|
}
|
||||||
|
.hero-title h1 {
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 2.1rem;
|
||||||
|
line-height: 1.285714285714286;
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding-left: var(--extra-space);
|
||||||
|
}
|
||||||
|
.hero-title button {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
max-width: calc(var(--content-width) - var(--extra-space));
|
||||||
|
padding-left: var(--extra-space);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .hero-npub {
|
||||||
|
color: var(--color-accent);
|
||||||
|
display: block;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.36363636;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: clip;
|
||||||
|
text-align: center;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
@media (min-width: 54ch) {
|
||||||
|
.hero .hero-npub {
|
||||||
|
padding-left: var(--extra-space);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero footer {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--gap-half);
|
||||||
|
padding-left: var(--extra-space);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero footer a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
#bubble {
|
||||||
|
background-color: darkmagenta;
|
||||||
|
border-color: darkmagenta;
|
||||||
|
border-radius: 10rem;
|
||||||
|
bottom: 5rem;
|
||||||
|
height: 10rem;
|
||||||
|
padding: 0;
|
||||||
|
position: fixed;
|
||||||
|
right: 5rem;
|
||||||
|
width: 10rem;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
#bubble {
|
||||||
|
bottom: 7rem;
|
||||||
|
right: 3rem;
|
||||||
|
height: 7rem;
|
||||||
|
width: 7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#bubble svg {
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
top: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#newNote {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
justify-content: center;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100vw;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
#newNote {
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#newNote #writeForm {
|
||||||
|
align-items: start;
|
||||||
|
background-color: var(--bgcolor);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0;
|
||||||
|
justify-content: end;
|
||||||
|
max-height: 100vh;
|
||||||
|
min-height: 64vh;
|
||||||
|
outline: 100vh solid var(--bgcolor);
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#newNote .form-inline textarea {
|
||||||
|
flex-basis: 100%;
|
||||||
|
margin: var(--gap) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#newNote .buttons {
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
@ -0,0 +1,328 @@
|
|||||||
|
import {Event} from 'nostr-tools';
|
||||||
|
import {getReplyTo, hasEventTag, isMention, isPTag} from './events';
|
||||||
|
import {config} from './settings';
|
||||||
|
import {sub, subOnce, unsubAll} from './relays';
|
||||||
|
|
||||||
|
type SubCallback = (
|
||||||
|
event: Event,
|
||||||
|
relay: string,
|
||||||
|
) => void;
|
||||||
|
|
||||||
|
export const subPubkeys = (
|
||||||
|
pubkeys: string[],
|
||||||
|
onEvent: SubCallback,
|
||||||
|
) => {
|
||||||
|
const authorsPrefixes = pubkeys.map(pubkey => pubkey.slice(0, 32));
|
||||||
|
console.info(`subscribe to homefeed ${authorsPrefixes}`);
|
||||||
|
unsubAll();
|
||||||
|
|
||||||
|
const repliesTo = new Set<string>();
|
||||||
|
sub({
|
||||||
|
cb: (evt, relay) => {
|
||||||
|
if (
|
||||||
|
evt.tags.some(hasEventTag)
|
||||||
|
&& !evt.tags.some(isMention)
|
||||||
|
) {
|
||||||
|
const note = getReplyTo(evt); // get all reply to events instead?
|
||||||
|
if (note && !repliesTo.has(note)) {
|
||||||
|
repliesTo.add(note);
|
||||||
|
subOnce({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
ids: [note],
|
||||||
|
kinds: [1],
|
||||||
|
limit: 1,
|
||||||
|
},
|
||||||
|
relay,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onEvent(evt, relay);
|
||||||
|
},
|
||||||
|
filter: {
|
||||||
|
authors: authorsPrefixes,
|
||||||
|
kinds: [1],
|
||||||
|
limit: 20,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// get metadata
|
||||||
|
sub({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
authors: pubkeys,
|
||||||
|
kinds: [0],
|
||||||
|
limit: pubkeys.length,
|
||||||
|
},
|
||||||
|
unsub: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** subscribe to global feed */
|
||||||
|
export const subGlobalFeed = (onEvent: SubCallback) => {
|
||||||
|
console.info('subscribe to global feed');
|
||||||
|
unsubAll();
|
||||||
|
const now = Math.floor(Date.now() * 0.001);
|
||||||
|
const pubkeys = new Set<string>();
|
||||||
|
const notes = new Set<string>();
|
||||||
|
const prefix = Math.floor(config.filterDifficulty / 4); // 4 bits in each '0' character
|
||||||
|
sub({ // get past events
|
||||||
|
cb: (evt, relay) => {
|
||||||
|
pubkeys.add(evt.pubkey);
|
||||||
|
notes.add(evt.id);
|
||||||
|
onEvent(evt, relay);
|
||||||
|
},
|
||||||
|
filter: {
|
||||||
|
...(prefix && {ids: ['0'.repeat(prefix)]}),
|
||||||
|
kinds: [1],
|
||||||
|
until: now,
|
||||||
|
...(!prefix && {since: Math.floor(now - (24 * 60 * 60))}),
|
||||||
|
limit: 100,
|
||||||
|
},
|
||||||
|
unsub: true
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
// get profile info
|
||||||
|
sub({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
authors: Array.from(pubkeys),
|
||||||
|
kinds: [0],
|
||||||
|
limit: pubkeys.size,
|
||||||
|
},
|
||||||
|
unsub: true,
|
||||||
|
});
|
||||||
|
pubkeys.clear();
|
||||||
|
|
||||||
|
// get reactions
|
||||||
|
sub({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
'#e': Array.from(notes),
|
||||||
|
kinds: [7],
|
||||||
|
until: now,
|
||||||
|
since: Math.floor(now - (24 * 60 * 60)),
|
||||||
|
},
|
||||||
|
unsub: true,
|
||||||
|
});
|
||||||
|
notes.clear();
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
// subscribe to future notes, reactions and profile updates
|
||||||
|
sub({
|
||||||
|
cb: (evt, relay) => {
|
||||||
|
onEvent(evt, relay);
|
||||||
|
if (
|
||||||
|
evt.kind !== 1
|
||||||
|
|| pubkeys.has(evt.pubkey)
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
subOnce({ // get profil data
|
||||||
|
relay,
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
authors: [evt.pubkey],
|
||||||
|
kinds: [0],
|
||||||
|
limit: 1,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
filter: {
|
||||||
|
...(prefix && {ids: ['0'.repeat(prefix)]}),
|
||||||
|
kinds: [0, 1, 7],
|
||||||
|
since: now,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** subscribe to global feed */
|
||||||
|
// export const simpleSub24hFeed = (onEvent: SubCallback) => {
|
||||||
|
// unsubAll();
|
||||||
|
// sub({
|
||||||
|
// cb: onEvent,
|
||||||
|
// filter: {
|
||||||
|
// kinds: [0, 1, 2, 7],
|
||||||
|
// // until: Math.floor(Date.now() * 0.001),
|
||||||
|
// since: Math.floor((Date.now() * 0.001) - (24 * 60 * 60)),
|
||||||
|
// limit: 250,
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// };
|
||||||
|
|
||||||
|
/** subscribe to a note id (nip-19) */
|
||||||
|
export const subNote = (
|
||||||
|
eventId: string,
|
||||||
|
onEvent: SubCallback,
|
||||||
|
) => {
|
||||||
|
unsubAll();
|
||||||
|
sub({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
ids: [eventId],
|
||||||
|
kinds: [1],
|
||||||
|
limit: 1,
|
||||||
|
},
|
||||||
|
unsub: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const replies = new Set<string>();
|
||||||
|
|
||||||
|
const onReply = (evt: Event, relay: string) => {
|
||||||
|
replies.add(evt.id)
|
||||||
|
onEvent(evt, relay);
|
||||||
|
unsubAll();
|
||||||
|
sub({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
'#e': Array.from(replies),
|
||||||
|
kinds: [1, 7],
|
||||||
|
},
|
||||||
|
unsub: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
replies.add(eventId);
|
||||||
|
setTimeout(() => {
|
||||||
|
sub({
|
||||||
|
cb: onReply,
|
||||||
|
filter: {
|
||||||
|
'#e': [eventId],
|
||||||
|
kinds: [1, 7],
|
||||||
|
},
|
||||||
|
unsub: true, // TODO: probably keep this subscription also after onReply/unsubAll
|
||||||
|
});
|
||||||
|
}, 200);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** subscribe to npub key (nip-19) */
|
||||||
|
export const subProfile = (
|
||||||
|
pubkey: string,
|
||||||
|
onEvent: SubCallback,
|
||||||
|
) => {
|
||||||
|
console.info(`subscribe to profile ${pubkey}`);
|
||||||
|
unsubAll();
|
||||||
|
sub({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
authors: [pubkey],
|
||||||
|
kinds: [0],
|
||||||
|
limit: 1,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const repliesTo = new Set<string>();
|
||||||
|
// get notes for profile
|
||||||
|
sub({
|
||||||
|
cb: (evt, relay) => {
|
||||||
|
if (
|
||||||
|
evt.tags.some(hasEventTag)
|
||||||
|
&& !evt.tags.some(isMention)
|
||||||
|
) {
|
||||||
|
const note = getReplyTo(evt);
|
||||||
|
if (note && !repliesTo.has(note)) {
|
||||||
|
repliesTo.add(note);
|
||||||
|
subOnce({
|
||||||
|
relay,
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
ids: [note],
|
||||||
|
kinds: [1],
|
||||||
|
limit: 1,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onEvent(evt, relay);
|
||||||
|
},
|
||||||
|
filter: {
|
||||||
|
authors: [pubkey],
|
||||||
|
kinds: [1],
|
||||||
|
limit: 50,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
// get contacts
|
||||||
|
sub({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
authors: [pubkey, config.pubkey],
|
||||||
|
kinds: [3],
|
||||||
|
limit: 6,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const subEventID = (
|
||||||
|
id: string,
|
||||||
|
onEvent: SubCallback,
|
||||||
|
) => {
|
||||||
|
unsubAll();
|
||||||
|
sub({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
ids: [id],
|
||||||
|
limit: 1,
|
||||||
|
},
|
||||||
|
unsub: true,
|
||||||
|
});
|
||||||
|
sub({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
authors: [id],
|
||||||
|
limit: 200,
|
||||||
|
},
|
||||||
|
unsub: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const subOwnContacts = (onEvent: SubCallback) => {
|
||||||
|
sub({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
authors: [config.pubkey],
|
||||||
|
kinds: [3],
|
||||||
|
limit: 1,
|
||||||
|
},
|
||||||
|
unsub: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const subContactList = (
|
||||||
|
pubkey: string,
|
||||||
|
onEvent: SubCallback,
|
||||||
|
) => {
|
||||||
|
unsubAll();
|
||||||
|
const pubkeys = new Set<string>();
|
||||||
|
let newestEvent = 0;
|
||||||
|
sub({
|
||||||
|
cb: (evt: Event, relay: string) => {
|
||||||
|
if (evt.created_at <= newestEvent) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
newestEvent = evt.created_at;
|
||||||
|
const newPubkeys = evt.tags
|
||||||
|
.filter(isPTag)
|
||||||
|
.filter(([, p]) => !pubkeys.has(p))
|
||||||
|
.map(([, p]) => {
|
||||||
|
pubkeys.add(p);
|
||||||
|
return p
|
||||||
|
});
|
||||||
|
subOnce({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
authors: newPubkeys,
|
||||||
|
kinds: [0],
|
||||||
|
},
|
||||||
|
relay,
|
||||||
|
});
|
||||||
|
onEvent(evt, relay);
|
||||||
|
},
|
||||||
|
filter: {
|
||||||
|
authors: [pubkey],
|
||||||
|
kinds: [3],
|
||||||
|
limit: 1,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -0,0 +1,124 @@
|
|||||||
|
import {Event, getEventHash, UnsignedEvent} from 'nostr-tools';
|
||||||
|
import {elem, lockScroll, unlockScroll} from './utils/dom';
|
||||||
|
|
||||||
|
const errorOverlay = document.querySelector('section#errorOverlay') as HTMLElement;
|
||||||
|
|
||||||
|
type PromptErrorOptions = {
|
||||||
|
onCancel?: () => void;
|
||||||
|
onRetry?: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates an error overlay, currently with hardcoded POW related message, this could be come a generic prompt
|
||||||
|
* @param error message
|
||||||
|
* @param options {onRetry, onCancel} callbacks
|
||||||
|
*/
|
||||||
|
const promptError = (
|
||||||
|
error: string,
|
||||||
|
options: PromptErrorOptions,
|
||||||
|
) => {
|
||||||
|
const {onCancel, onRetry} = options;
|
||||||
|
lockScroll();
|
||||||
|
errorOverlay.replaceChildren(
|
||||||
|
elem('h1', {className: 'error-title'}, error),
|
||||||
|
elem('p', {}, 'time ran out finding a proof with the desired mining difficulty. either try again, lower the mining difficulty or increase the timeout in profile settings.'),
|
||||||
|
elem('div', {className: 'buttons'}, [
|
||||||
|
onCancel ? elem('button', {data: {action: 'close'}}, 'close') : '',
|
||||||
|
onRetry ? elem('button', {data: {action: 'again'}}, 'try again') : '',
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
const handleOverlayClick = (e: MouseEvent) => {
|
||||||
|
if (e.target instanceof Element) {
|
||||||
|
const button = e.target.closest('button');
|
||||||
|
if (button) {
|
||||||
|
switch(button.dataset.action) {
|
||||||
|
case 'close':
|
||||||
|
onCancel && onCancel();
|
||||||
|
break;
|
||||||
|
case 'again':
|
||||||
|
onRetry && onRetry();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
errorOverlay.removeEventListener('click', handleOverlayClick);
|
||||||
|
errorOverlay.hidden = true;
|
||||||
|
unlockScroll();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
errorOverlay.addEventListener('click', handleOverlayClick);
|
||||||
|
errorOverlay.hidden = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
type PowEventOptions = {
|
||||||
|
difficulty: number;
|
||||||
|
statusElem: HTMLElement;
|
||||||
|
timeout: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type WorkerResponse = {
|
||||||
|
error: string;
|
||||||
|
event: Event;
|
||||||
|
};
|
||||||
|
|
||||||
|
type HashedEvent = UnsignedEvent & {
|
||||||
|
id: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* run proof of work in a worker until at least the specified difficulty.
|
||||||
|
* if succcessful, the returned event contains the 'nonce' tag
|
||||||
|
* and the updated created_at timestamp.
|
||||||
|
*
|
||||||
|
* powEvent returns a rejected promise if the funtion runs for longer than timeout.
|
||||||
|
* a zero timeout makes mineEvent run without a time limit.
|
||||||
|
* a zero mining target just resolves the promise without trying to find a 'nonce'.
|
||||||
|
*/
|
||||||
|
export const powEvent = (
|
||||||
|
evt: UnsignedEvent,
|
||||||
|
options: PowEventOptions
|
||||||
|
): Promise<HashedEvent | void> => {
|
||||||
|
const {difficulty, statusElem, timeout} = options;
|
||||||
|
if (difficulty === 0) {
|
||||||
|
return Promise.resolve({
|
||||||
|
...evt,
|
||||||
|
id: getEventHash(evt),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const cancelBtn = elem('button', {className: 'btn-inline'}, [elem('small', {}, 'cancel')]);
|
||||||
|
statusElem.replaceChildren('working…', cancelBtn);
|
||||||
|
statusElem.hidden = false;
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const worker = new Worker('/worker.js');
|
||||||
|
|
||||||
|
const onCancel = () => {
|
||||||
|
worker.terminate();
|
||||||
|
reject(`mining kind ${evt.kind} event canceled`);
|
||||||
|
};
|
||||||
|
cancelBtn.addEventListener('click', onCancel);
|
||||||
|
|
||||||
|
worker.onmessage = (msg: MessageEvent<WorkerResponse>) => {
|
||||||
|
worker.terminate();
|
||||||
|
cancelBtn.removeEventListener('click', onCancel);
|
||||||
|
if (msg.data.error) {
|
||||||
|
promptError(msg.data.error, {
|
||||||
|
onCancel: () => reject(`mining kind ${evt.kind} event canceled`),
|
||||||
|
onRetry: async () => {
|
||||||
|
const result = await powEvent(evt, {difficulty, statusElem, timeout}).catch(console.warn);
|
||||||
|
resolve(result);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
resolve(msg.data.event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
worker.onerror = (err) => {
|
||||||
|
worker.terminate();
|
||||||
|
// promptError(msg.data.error, {});
|
||||||
|
cancelBtn.removeEventListener('click', onCancel);
|
||||||
|
reject(err);
|
||||||
|
};
|
||||||
|
|
||||||
|
worker.postMessage({event: evt, difficulty, timeout});
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -1,54 +0,0 @@
|
|||||||
.tabs {
|
|
||||||
position: relative;
|
|
||||||
min-height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab label {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1.1em;
|
|
||||||
border-radius: 5px 5px 0 0;
|
|
||||||
padding: .5em 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab [type=radio] {
|
|
||||||
position: absolute;
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab [type=radio] + label {
|
|
||||||
outline: 1px solid var(--bgcolor-accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
.tab [type=radio]:focus + label {
|
|
||||||
outline: 2px dotted black;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
.tab [type=radio]:checked ~ label {
|
|
||||||
z-index: 2;
|
|
||||||
background-color: var(--bgcolor-accent);
|
|
||||||
color: var(--fgcolor-accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab [type=radio]:checked ~ label ~ .content {
|
|
||||||
z-index: 1;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab .content {
|
|
||||||
position: absolute;
|
|
||||||
top: 2.5em;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
padding: 5px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
|
||||||
|
import {nip19} from 'nostr-tools';
|
||||||
|
import {elem} from './utils/dom';
|
||||||
|
|
||||||
|
export type DOMMap = {
|
||||||
|
[id: string]: HTMLElement
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ViewTemplateOptions = {
|
||||||
|
type: 'home';
|
||||||
|
id?: string;
|
||||||
|
} | {
|
||||||
|
type: 'feed';
|
||||||
|
} | {
|
||||||
|
type: 'note';
|
||||||
|
id: string;
|
||||||
|
} | {
|
||||||
|
type: 'profile';
|
||||||
|
id: string;
|
||||||
|
} | {
|
||||||
|
type: 'contacts';
|
||||||
|
id: string;
|
||||||
|
} | {
|
||||||
|
type: 'event';
|
||||||
|
id: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const renderViewTemplate = (options: ViewTemplateOptions) => {
|
||||||
|
const content = elem('div', {className: 'content'});
|
||||||
|
const dom: DOMMap = {};
|
||||||
|
switch (options.type) {
|
||||||
|
case 'home':
|
||||||
|
break;
|
||||||
|
case 'feed':
|
||||||
|
break;
|
||||||
|
case 'profile':
|
||||||
|
const pubkey = options.id;
|
||||||
|
const npub = nip19.npubEncode(pubkey);
|
||||||
|
const about = elem('span');
|
||||||
|
const detail = elem('p', {}, about);
|
||||||
|
const followStatus = elem('small');
|
||||||
|
const followBtn = elem('button', {
|
||||||
|
className: 'primary',
|
||||||
|
name: 'follow',
|
||||||
|
data: {'id': options.id}
|
||||||
|
}, 'follow');
|
||||||
|
const following = elem('span');
|
||||||
|
const profileHeader = elem('header', {className: 'hero'}, [
|
||||||
|
elem('small', {className: 'hero-npub'}, npub),
|
||||||
|
elem('div', {className: 'hero-title'}, [
|
||||||
|
elem('h1', {}, pubkey),
|
||||||
|
followStatus,
|
||||||
|
followBtn,
|
||||||
|
]),
|
||||||
|
detail,
|
||||||
|
elem('footer', {}, following),
|
||||||
|
]);
|
||||||
|
dom.header = profileHeader;
|
||||||
|
dom[`about-${pubkey}`] = about;
|
||||||
|
dom[`detail-${pubkey}`] = detail;
|
||||||
|
dom.following = following;
|
||||||
|
dom[`followStatus-${pubkey}`] = followStatus;
|
||||||
|
dom[`followBtn-${pubkey}`] = followBtn;
|
||||||
|
content.append(profileHeader);
|
||||||
|
document.title = pubkey;
|
||||||
|
break;
|
||||||
|
case 'note':
|
||||||
|
break;
|
||||||
|
case 'contacts':
|
||||||
|
break;
|
||||||
|
case 'event':
|
||||||
|
const id = options.id;
|
||||||
|
content.append(
|
||||||
|
elem('header', {className: 'hero'}, [
|
||||||
|
elem('h1', {}, id),
|
||||||
|
])
|
||||||
|
);
|
||||||
|
document.title = id;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
const view = elem('section', {className: 'view'}, [content]);
|
||||||
|
return {content, dom, view};
|
||||||
|
};
|
||||||
@ -0,0 +1,225 @@
|
|||||||
|
import {Event, nip19} from 'nostr-tools';
|
||||||
|
import {Children, elem, elemArticle, parseTextContent} from './utils/dom';
|
||||||
|
import {dateTime, formatTime} from './utils/time';
|
||||||
|
import {/*validatePow,*/ sortByCreatedAt} from './events';
|
||||||
|
import {getViewElem, getViewOptions, setViewElem} from './view';
|
||||||
|
import {config} from './settings';
|
||||||
|
import {getReactions, getReactionContents} from './reactions';
|
||||||
|
import {openWriteInput} from './write';
|
||||||
|
// import {linkPreview} from './media';
|
||||||
|
import {parseJSON} from './media';
|
||||||
|
import {getMetadata} from './profiles';
|
||||||
|
import {EventWithNip19, replyList} from './notes';
|
||||||
|
import {isFollowing} from './contacts';
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
document.querySelectorAll('time[datetime]').forEach((timeElem: HTMLTimeElement) => {
|
||||||
|
timeElem.textContent = formatTime(new Date(timeElem.dateTime));
|
||||||
|
});
|
||||||
|
}, 10000);
|
||||||
|
|
||||||
|
export const createTextNote = (
|
||||||
|
evt: EventWithNip19,
|
||||||
|
relay: string,
|
||||||
|
) => {
|
||||||
|
const {img, name, userName} = getMetadata(evt.pubkey);
|
||||||
|
const replies = replyList.filter(({replyTo}) => replyTo === evt.id)
|
||||||
|
.sort(sortByCreatedAt)
|
||||||
|
.reverse();
|
||||||
|
// const isLongContent = evt.content.trimRight().length > 280;
|
||||||
|
// const content = isLongContent ? evt.content.slice(0, 280) : evt.content;
|
||||||
|
const reactions = getReactions(evt.id);
|
||||||
|
const didReact = reactions.length && !!reactions.find(reaction => reaction.pubkey === config.pubkey);
|
||||||
|
const [content, {firstLink}] = parseTextContent(evt.content);
|
||||||
|
const time = new Date(evt.created_at * 1000);
|
||||||
|
const buttons = elem('div', {className: 'buttons'}, [
|
||||||
|
elem('button', {name: 'reply', type: 'button'}, [
|
||||||
|
elem('img', {height: 24, width: 24, src: '/assets/comment.svg'})
|
||||||
|
]),
|
||||||
|
elem('button', {name: 'star', type: 'button'}, [
|
||||||
|
elem('img', {
|
||||||
|
alt: didReact ? '✭' : '✩', // ♥
|
||||||
|
height: 24, width: 24,
|
||||||
|
src: `/assets/${didReact ? 'star-fill' : 'star'}.svg`,
|
||||||
|
title: getReactionContents(evt.id).join(' '),
|
||||||
|
}),
|
||||||
|
elem('small', {data: {reactions: ''}}, reactions.length || ''),
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
if (localStorage.getItem('reply_to') === evt.id) {
|
||||||
|
openWriteInput(buttons, evt.id);
|
||||||
|
}
|
||||||
|
const replyFeed: Array<HTMLElement> = replies[0] ? replies.map(e => setViewElem(e.id, createTextNote(e, relay))) : [];
|
||||||
|
return elemArticle([
|
||||||
|
elem('a', {className: 'mbox-img', href: `/${evt.nip19.npub}`, tabIndex: -1}, img),
|
||||||
|
elem('div', {className: 'mbox-body'}, [
|
||||||
|
elem('header', {
|
||||||
|
className: 'mbox-header',
|
||||||
|
title: `User: ${userName}\n${time}\n\nUser pubkey: ${evt.pubkey}\n\nRelay: ${relay}\n\nEvent-id: ${evt.id}
|
||||||
|
${evt.tags.length ? `\nTags ${JSON.stringify(evt.tags)}\n` : ''}
|
||||||
|
${evt.content}`
|
||||||
|
}, [
|
||||||
|
elem('a', {
|
||||||
|
className: `mbox-username${name ? ' mbox-kind0-name' : ''}`,
|
||||||
|
data: {profile: evt.pubkey},
|
||||||
|
href: `/${evt.nip19.npub}`,
|
||||||
|
}, name || userName),
|
||||||
|
' ',
|
||||||
|
elem('a', {href: `/${evt.nip19.note}`}, elem('time', {dateTime: time.toISOString()}, formatTime(time))),
|
||||||
|
]),
|
||||||
|
elem('div', {className: 'mbox-content'/* data: isLongContent ? {append: evt.content.slice(280)} : null*/}, content /*[
|
||||||
|
...content,
|
||||||
|
(firstLink && validatePow(evt)) ? linkPreview(firstLink, evt.id, relay) : null,
|
||||||
|
]*/),
|
||||||
|
buttons,
|
||||||
|
]),
|
||||||
|
...(replies[0] ? [elem('div', {className: 'mbox-replies'}, replyFeed)] : []),
|
||||||
|
], {
|
||||||
|
className: replies.length ? 'mbox-has-replies' : '',
|
||||||
|
data: {kind: evt.kind, id: evt.id, pubkey: evt.pubkey, relay}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
type EventWithContent = Omit<Event, 'content'> & {
|
||||||
|
content: Children
|
||||||
|
}
|
||||||
|
|
||||||
|
export const renderUpdateContact = (
|
||||||
|
evt: EventWithContent,
|
||||||
|
relay: string,
|
||||||
|
) => {
|
||||||
|
const {img, name, userName} = getMetadata(evt.pubkey);
|
||||||
|
const time = new Date(evt.created_at * 1000);
|
||||||
|
return elemArticle([
|
||||||
|
elem('div', {className: 'mbox-img'}, img),
|
||||||
|
elem('div', {className: 'mbox-body'}, [
|
||||||
|
elem('header', {className: 'mbox-header'}, [
|
||||||
|
elem('span', {
|
||||||
|
className: `mbox-username${name ? ' mbox-kind0-name' : ''}`,
|
||||||
|
data: {profile: evt.pubkey},
|
||||||
|
}, name || userName),
|
||||||
|
' ',
|
||||||
|
elem('span', {data: {contacts: evt.id}, title: time.toISOString()}, evt.content),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
], {
|
||||||
|
className: 'mbox-updated-contact',
|
||||||
|
data: {kind: evt.kind, id: evt.id, pubkey: evt.pubkey, relay}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const renderRecommendServer = (evt: Event, relay: string) => {
|
||||||
|
const {img, userName} = getMetadata(evt.pubkey);
|
||||||
|
const time = new Date(evt.created_at * 1000);
|
||||||
|
const body = elem('div', {className: 'mbox-body', title: dateTime.format(time)}, [
|
||||||
|
elem('header', {className: 'mbox-header'}, [
|
||||||
|
elem('small', {}, [
|
||||||
|
elem('strong', {}, userName)
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
` recommends server: ${evt.content}`,
|
||||||
|
]);
|
||||||
|
return elemArticle([
|
||||||
|
elem('div', {className: 'mbox-img'}, [img]), body
|
||||||
|
], {
|
||||||
|
className: 'mbox-recommend-server',
|
||||||
|
data: {kind: evt.kind, id: evt.id, pubkey: evt.pubkey}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const renderEventDetails = (evt: Event, relay: string) => {
|
||||||
|
const {img, name, userName} = getMetadata(evt.pubkey);
|
||||||
|
const npub = nip19.npubEncode(evt.pubkey);
|
||||||
|
|
||||||
|
let content = (![1, 7].includes(evt.kind) && evt.content !== '') ? parseJSON(evt.content) : (evt.content || '<empty>');
|
||||||
|
switch (typeof content) {
|
||||||
|
case 'object':
|
||||||
|
content = JSON.stringify(content, null, 2);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
content = `${content}`;
|
||||||
|
}
|
||||||
|
const body = elem('div', {className: 'mbox-body'}, [
|
||||||
|
elem('header', {className: 'mbox-header'}, [
|
||||||
|
elem('a', {
|
||||||
|
className: `mbox-username${name ? ' mbox-kind0-name' : ''}`,
|
||||||
|
data: {profile: evt.pubkey},
|
||||||
|
href: `/${npub}`,
|
||||||
|
}, name || userName),
|
||||||
|
]),
|
||||||
|
elem('dl', {}, [
|
||||||
|
elem('dt', {}, 'npub'),
|
||||||
|
elem('dd', {}, npub),
|
||||||
|
elem('dt', {}, 'created at'),
|
||||||
|
elem('dd', {}, dateTime.format(evt.created_at * 1000)),
|
||||||
|
elem('dt', {}, 'relay'),
|
||||||
|
elem('dd', {}, relay),
|
||||||
|
]),
|
||||||
|
elem('h2', {}, 'Event'),
|
||||||
|
elem('dl', {}, [
|
||||||
|
elem('dt', {}, 'id'),
|
||||||
|
elem('dd', {}, evt.id),
|
||||||
|
elem('dt', {}, 'kind'),
|
||||||
|
elem('dd', {}, evt.kind),
|
||||||
|
elem('dt', {}, 'pubkey'),
|
||||||
|
elem('dd', {}, evt.pubkey),
|
||||||
|
elem('dt', {}, 'tags count'),
|
||||||
|
elem('dd', {}, evt.tags.length),
|
||||||
|
elem('dt', {}, 'tags'),
|
||||||
|
elem('dd', {}, JSON.stringify(evt.tags)),
|
||||||
|
elem('dt', {}, 'content'),
|
||||||
|
elem('dd', {}, elem('pre', {}, content as string)),
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
return elemArticle([
|
||||||
|
elem('a', {className: 'mbox-img', href: `/${npub}`, tabIndex: -1}, img),
|
||||||
|
body,
|
||||||
|
], {
|
||||||
|
className: 'mbox-plain-event',
|
||||||
|
data: {kind: evt.kind, id: evt.id, pubkey: evt.pubkey}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createContact = (pubkey: string) => {
|
||||||
|
const {about: aboutContent, img, name, userName} = getMetadata(pubkey);
|
||||||
|
const npub = nip19.npubEncode(pubkey);
|
||||||
|
const view = getViewOptions();
|
||||||
|
if (view.type !== 'contacts') {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const isMe = config.pubkey === pubkey;
|
||||||
|
const isCurrentUser = view.id === pubkey;
|
||||||
|
const hasContact = isFollowing(pubkey);
|
||||||
|
const followStatus = elem('small');
|
||||||
|
const followBtn = elem('button', {
|
||||||
|
className: hasContact ? 'secondary' : 'primary',
|
||||||
|
...(isMe && {disabled: true}),
|
||||||
|
name: 'follow',
|
||||||
|
data: {id: pubkey}
|
||||||
|
}, hasContact ? (isMe ? 'following' : 'unfollow') : 'follow');
|
||||||
|
const about = elem('div', {className: 'mbox-content'}, aboutContent);
|
||||||
|
setViewElem(`about-${pubkey}`, about);
|
||||||
|
setViewElem(`followStatus-${pubkey}`, followStatus);
|
||||||
|
setViewElem(`followBtn-${pubkey}`, followBtn);
|
||||||
|
return elemArticle([
|
||||||
|
elem('a', {className: 'mbox-img', href: `/${npub}`, tabIndex: -1}, img),
|
||||||
|
elem('div', {className: 'mbox-body'}, [
|
||||||
|
elem('header', {className: 'mbox-header'}, [
|
||||||
|
elem('a', {
|
||||||
|
className: `mbox-username${name ? ' mbox-kind0-name' : ''}`,
|
||||||
|
data: {profile: pubkey},
|
||||||
|
href: `/${npub}`,
|
||||||
|
}, name || userName),
|
||||||
|
(isMe || isCurrentUser)
|
||||||
|
? elem('small', {}, isMe ? '(your user)' : '(current user)')
|
||||||
|
: null,
|
||||||
|
]),
|
||||||
|
about,
|
||||||
|
]),
|
||||||
|
elem('div', {className: 'mbox-cta'}, [followStatus, followBtn]),
|
||||||
|
], {
|
||||||
|
className: 'mbox-contact',
|
||||||
|
data: {pubkey},
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* type-guarded function that tells TypeScript (in strictNullChecks mode) that you're filtering out null/undefined items.
|
||||||
|
* example: array.filter(isNotNull)
|
||||||
|
*/
|
||||||
|
export const isNotNull = <T>(item: T): item is NonNullable<T> => item != null;
|
||||||
|
|
||||||
|
// alternative
|
||||||
|
// const const isNotNull = <T>(item: T | null): item is T => item !== null;
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
/**
|
||||||
|
* evaluate the difficulty of hex32 according to nip-13.
|
||||||
|
* @param hex32 a string of 64 chars - 32 bytes in hex representation
|
||||||
|
*/
|
||||||
|
export const zeroLeadingBitsCount = (hex32: string) => {
|
||||||
|
let count = 0;
|
||||||
|
for (let i = 0; i < 64; i += 2) {
|
||||||
|
const hexbyte = hex32.slice(i, i + 2); // grab next byte
|
||||||
|
if (hexbyte === '00') {
|
||||||
|
count += 8;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
// reached non-zero byte; count number of 0 bits in hexbyte
|
||||||
|
const bits = parseInt(hexbyte, 16).toString(2).padStart(8, '0');
|
||||||
|
for (let b = 0; b < 8; b++) {
|
||||||
|
if (bits[b] === '1' ) {
|
||||||
|
break; // reached non-zero bit; stop
|
||||||
|
}
|
||||||
|
count += 1;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return count;
|
||||||
|
};
|
||||||
@ -0,0 +1,201 @@
|
|||||||
|
import {nip19} from 'nostr-tools';
|
||||||
|
import {isNotNull} from './array';
|
||||||
|
import {isValidURL} from './url';
|
||||||
|
|
||||||
|
type DataAttributes = {
|
||||||
|
data: {
|
||||||
|
[key: string]: string | number;
|
||||||
|
},
|
||||||
|
} & {
|
||||||
|
dataset: never, // the dataset property itself is readonly
|
||||||
|
};
|
||||||
|
|
||||||
|
type Attributes<Type> = Partial<Type & DataAttributes>;
|
||||||
|
|
||||||
|
export type Children = Array<HTMLElement | string | null> | HTMLElement | string | number | null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* example usage:
|
||||||
|
*
|
||||||
|
* const props = {className: 'btn', onclick: async (e) => alert('hi')};
|
||||||
|
* const btn = elem('button', props, ['download']);
|
||||||
|
* document.body.append(btn);
|
||||||
|
*
|
||||||
|
* @param {string} name
|
||||||
|
* @param {HTMLElement.prototype} props
|
||||||
|
* @param {Array<Node> | string | number} children
|
||||||
|
* @return HTMLElement
|
||||||
|
*/
|
||||||
|
export const elem = <Name extends keyof HTMLElementTagNameMap>(
|
||||||
|
name: Extract<Name, keyof HTMLElementTagNameMap>,
|
||||||
|
attrs?: Attributes<HTMLElementTagNameMap[Name]>,
|
||||||
|
children?: Children | undefined,
|
||||||
|
): HTMLElementTagNameMap[Name] => {
|
||||||
|
const el = document.createElement(name);
|
||||||
|
if (attrs) {
|
||||||
|
const {data, ...props} = attrs;
|
||||||
|
Object.assign(el, props);
|
||||||
|
if (data) {
|
||||||
|
Object.entries(data).forEach(([key, value]) => {
|
||||||
|
el.dataset[key] = value as string;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (children != null) {
|
||||||
|
if (Array.isArray(children)) {
|
||||||
|
el.append(...children.filter(isNotNull));
|
||||||
|
} else {
|
||||||
|
switch (typeof children) {
|
||||||
|
case 'number':
|
||||||
|
el.append(`${children}`);
|
||||||
|
break;
|
||||||
|
case 'string':
|
||||||
|
el.append(children);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
if (children instanceof Element) {
|
||||||
|
el.append(children);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
console.error(`expected element, string or number but got ${typeof children}`, children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return el;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** freeze global page scrolling */
|
||||||
|
export const lockScroll = () => document.body.style.overflow = 'hidden';
|
||||||
|
|
||||||
|
/** free global page scrolling */
|
||||||
|
export const unlockScroll = () => document.body.style.removeProperty('overflow');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* example usage:
|
||||||
|
*
|
||||||
|
* const [content, {firstLink}] = parseTextContent('Hi<br>click https://nostr.ch/');
|
||||||
|
*
|
||||||
|
* @param {string} content
|
||||||
|
* @returns [Array<string | HTMLElement>, {firstLink: href}]
|
||||||
|
*/
|
||||||
|
export const parseTextContent = (
|
||||||
|
content: string,
|
||||||
|
): [
|
||||||
|
Array<string | HTMLAnchorElement | HTMLBRElement>,
|
||||||
|
{firstLink: string | undefined},
|
||||||
|
] => {
|
||||||
|
let firstLink: string | undefined;
|
||||||
|
const parsedContent = content
|
||||||
|
.trim()
|
||||||
|
.replaceAll(/\n{3,}/g, '\n\n')
|
||||||
|
.split('\n')
|
||||||
|
.map(line => {
|
||||||
|
const words = line.split(/\s/);
|
||||||
|
return words.map(word => {
|
||||||
|
if (word.match(/^ln(tbs?|bcr?t?)[a-z0-9]+$/g)) {
|
||||||
|
return elem('a', {
|
||||||
|
href: `lightning:${word}`
|
||||||
|
}, `lightning:${word.slice(0, 24)}…`);
|
||||||
|
}
|
||||||
|
if (word.startsWith('nostr:npub') && word.length === 69) {
|
||||||
|
const npub = word.slice(6);
|
||||||
|
const {type, data} = nip19.decode(npub);
|
||||||
|
if (type === 'npub') {
|
||||||
|
return elem('a', {href: `/${npub}`, data: {profile: data}}, data.slice(6, 15))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const WORD = word.toUpperCase();
|
||||||
|
if (!WORD.match(/^(HTTPS?:\/\/|WWW\.)\S*/)) {
|
||||||
|
return word;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
if (!WORD.startsWith('HTTP')) {
|
||||||
|
word = 'https://' + word;
|
||||||
|
}
|
||||||
|
const url = new URL(word);
|
||||||
|
if (!isValidURL(url)) {
|
||||||
|
return word;
|
||||||
|
}
|
||||||
|
firstLink = firstLink || url.href;
|
||||||
|
const prettierWithoutSlash = url.pathname === '/';
|
||||||
|
return elem('a', {
|
||||||
|
href: url.href,
|
||||||
|
target: '_blank',
|
||||||
|
rel: 'noopener noreferrer'
|
||||||
|
}, url.href.slice(url.protocol.length + 2, prettierWithoutSlash ? -1 : undefined));
|
||||||
|
} catch (err) {
|
||||||
|
return word;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.reduce((acc, word) => [...acc, word, ' '], []);
|
||||||
|
})
|
||||||
|
.reduce((acc, words) => [...acc, ...words, elem('br')], []);
|
||||||
|
|
||||||
|
return [
|
||||||
|
parsedContent,
|
||||||
|
{firstLink}
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* creates a small profile image
|
||||||
|
* @param text to pass pubkey
|
||||||
|
* @returns HTMLCanvasElement | null
|
||||||
|
*/
|
||||||
|
export const elemCanvas = (text: string) => {
|
||||||
|
const canvas = elem('canvas', {
|
||||||
|
height: 80,
|
||||||
|
width: 80,
|
||||||
|
data: {pubkey: text}
|
||||||
|
});
|
||||||
|
const context = canvas.getContext('2d');
|
||||||
|
if (!context) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const color = `#${text.slice(0, 6)}`;
|
||||||
|
context.fillStyle = color;
|
||||||
|
context.fillRect(0, 0, 80, 80);
|
||||||
|
context.fillStyle = '#202122';
|
||||||
|
context.fillRect(0, 50, 80, 32);
|
||||||
|
context.font = 'bold 18px monospace';
|
||||||
|
if (color === '#000000') {
|
||||||
|
context.fillStyle = '#fff';
|
||||||
|
}
|
||||||
|
context.fillText(text.slice(0, 8), 2, 46);
|
||||||
|
return canvas;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* creates a placeholder element that animates the height to 0
|
||||||
|
* @param element to get the initial height from
|
||||||
|
* @returns HTMLDivElement
|
||||||
|
*/
|
||||||
|
export const elemShrink = (el: HTMLElement) => {
|
||||||
|
const height = el.style.height || el.getBoundingClientRect().height;
|
||||||
|
const shrink = elem('div', {className: 'shrink-out'});
|
||||||
|
shrink.style.height = `${height}px`;
|
||||||
|
shrink.addEventListener('animationend', () => shrink.remove(), {once: true});
|
||||||
|
return shrink;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export const updateElemHeight = (
|
||||||
|
el: HTMLInputElement | HTMLTextAreaElement
|
||||||
|
) => {
|
||||||
|
el.style.removeProperty('height');
|
||||||
|
if (el.value) {
|
||||||
|
el.style.paddingBottom = '0';
|
||||||
|
el.style.paddingTop = '0';
|
||||||
|
el.style.height = el.scrollHeight + 'px';
|
||||||
|
el.style.removeProperty('padding-bottom');
|
||||||
|
el.style.removeProperty('padding-top');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const elemArticle = (
|
||||||
|
content: Array<HTMLElement>,
|
||||||
|
attrs: Attributes<HTMLElementTagNameMap['div']> = {},
|
||||||
|
) => {
|
||||||
|
const className = attrs.className ? `mbox ${attrs.className}` : 'mbox';
|
||||||
|
return elem('article', {...attrs, className}, content);
|
||||||
|
};
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
/**
|
||||||
|
* throttle and debounce given function in regular time interval,
|
||||||
|
* but with the difference that the last call will be debounced and therefore never missed.
|
||||||
|
* @param {*} function to throttle and debounce
|
||||||
|
* @param {*} time desired interval to execute function
|
||||||
|
* @returns callback
|
||||||
|
*/
|
||||||
|
export const bounce = (
|
||||||
|
fn: () => void,
|
||||||
|
time: number,
|
||||||
|
) => {
|
||||||
|
let throttle: number | undefined;
|
||||||
|
let debounce: number | undefined;
|
||||||
|
return (/*...args*/) => {
|
||||||
|
if (throttle) {
|
||||||
|
clearTimeout(debounce);
|
||||||
|
debounce = setTimeout(() => fn(/*...args*/), time);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
fn(/*...args*/);
|
||||||
|
throttle = setTimeout(() => {
|
||||||
|
clearTimeout(throttle);
|
||||||
|
}, time);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Intl.DateTimeFormat object
|
||||||
|
*
|
||||||
|
* example:
|
||||||
|
*
|
||||||
|
* console.log(dateTime.format(new Date()));
|
||||||
|
*/
|
||||||
|
export const dateTime = new Intl.DateTimeFormat(navigator.language /* navigator.language */, {
|
||||||
|
dateStyle: 'medium',
|
||||||
|
timeStyle: 'short',
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* format time relative to now, such as 5min ago
|
||||||
|
*
|
||||||
|
* @param {Date} time
|
||||||
|
* @param {string} locale
|
||||||
|
* @returns string
|
||||||
|
*
|
||||||
|
* example:
|
||||||
|
*
|
||||||
|
* console.log(timeAgo(new Date(Date.now() - 10000)));
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
const timeAgo = (
|
||||||
|
time: Date,
|
||||||
|
locale: string = 'en',
|
||||||
|
) => {
|
||||||
|
const relativeTime = new Intl.RelativeTimeFormat(locale, {
|
||||||
|
numeric: 'auto',
|
||||||
|
style: 'long',
|
||||||
|
});
|
||||||
|
const timeSince = (Date.now() - time.getTime()) * 0.001;
|
||||||
|
const minutes = Math.floor(timeSince / 60);
|
||||||
|
const hours = Math.floor(minutes / 60);
|
||||||
|
const days = Math.floor(hours / 24);
|
||||||
|
const months = Math.floor(days / 30);
|
||||||
|
const years = Math.floor(months / 12);
|
||||||
|
|
||||||
|
if (years > 0) {
|
||||||
|
return relativeTime.format(0 - years, 'year');
|
||||||
|
} else if (months > 0) {
|
||||||
|
return relativeTime.format(0 - months, 'month');
|
||||||
|
} else if (days > 0) {
|
||||||
|
return relativeTime.format(0 - days, 'day');
|
||||||
|
} else if (hours > 0) {
|
||||||
|
return relativeTime.format(0 - hours, 'hour');
|
||||||
|
} else if (minutes > 0) {
|
||||||
|
return relativeTime.format(0 - minutes, 'minute');
|
||||||
|
} else {
|
||||||
|
return relativeTime.format(Math.round(0 - timeSince), 'second');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* formatTime shows relative time if it is less than 24h else absolute datetime
|
||||||
|
*
|
||||||
|
* @param {time} date object to format
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
export const formatTime = (time: Date) => {
|
||||||
|
const yesterday = new Date(Date.now() - (24 * 60 * 60 * 1000));
|
||||||
|
if (time > yesterday) {
|
||||||
|
return timeAgo(time);
|
||||||
|
} else {
|
||||||
|
return dateTime.format(time);
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
export const getHost = (url: string) => {
|
||||||
|
try {
|
||||||
|
return new URL(url).host;
|
||||||
|
} catch(err) {
|
||||||
|
return err;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const isHttpUrl = (url: string) => {
|
||||||
|
try {
|
||||||
|
return ['http:', 'https:'].includes(new URL(url).protocol);
|
||||||
|
} catch (err) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const isWssUrl = (url: string) => {
|
||||||
|
try {
|
||||||
|
return 'wss:' === new URL(url).protocol;
|
||||||
|
} catch (err) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getNoxyUrl = (
|
||||||
|
type: 'data' | 'meta',
|
||||||
|
url: string,
|
||||||
|
id: string,
|
||||||
|
relay: string,
|
||||||
|
) => {
|
||||||
|
if (!isHttpUrl(url)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const link = new URL(`https://noxy.nostr.ch/${type}`);
|
||||||
|
link.searchParams.set('id', id);
|
||||||
|
link.searchParams.set('relay', relay);
|
||||||
|
link.searchParams.set('url', url);
|
||||||
|
return link;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const isValidURL = (url: URL) => {
|
||||||
|
if (!['http:', 'https:'].includes(url.protocol)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (!['', '443', '80'].includes(url.port)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (url.hostname === 'localhost') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const lastDot = url.hostname.lastIndexOf('.');
|
||||||
|
if (lastDot < 1) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (url.hostname.slice(lastDot) === '.local') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (url.hostname.slice(lastDot + 1).match(/^[\d]+$/)) { // there should be no tld with numbers, possible ipv4
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (url.hostname.includes(':')) { // possibly an ipv6 addr; certainly an invalid hostname
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
import {DOMMap, renderViewTemplate, ViewTemplateOptions} from './template';
|
||||||
|
|
||||||
|
type Container = {
|
||||||
|
id: string;
|
||||||
|
options: ViewTemplateOptions,
|
||||||
|
view: HTMLElement;
|
||||||
|
content: HTMLDivElement;
|
||||||
|
dom: DOMMap;
|
||||||
|
};
|
||||||
|
|
||||||
|
const containers: Array<Container> = [];
|
||||||
|
|
||||||
|
let activeContainerIndex = -1;
|
||||||
|
|
||||||
|
export const getViewContent = () => containers[activeContainerIndex]?.content;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* clears current view so it is empty and ready to be re-used.
|
||||||
|
* only clears the current view, not all views
|
||||||
|
*/
|
||||||
|
export const clearView = () => {
|
||||||
|
const domMap = containers[activeContainerIndex]?.dom;
|
||||||
|
Object.keys(domMap).forEach(eventId => delete domMap[eventId]);
|
||||||
|
getViewContent().replaceChildren();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get elmenet stored in internal DOMMap of the current view
|
||||||
|
* alternative to internal map in view.dom, is to use id="" attribute, however same event could be shown in different views so event.id is not unique.
|
||||||
|
*/
|
||||||
|
export const getViewElem = (id: string) => {
|
||||||
|
return containers[activeContainerIndex]?.dom[id];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* store element in internal view.dom map using id as key
|
||||||
|
*/
|
||||||
|
export const setViewElem = (id: string, node: HTMLElement) => {
|
||||||
|
const container = containers[activeContainerIndex];
|
||||||
|
if (container) {
|
||||||
|
container.dom[id] = node;
|
||||||
|
}
|
||||||
|
return node;
|
||||||
|
};
|
||||||
|
|
||||||
|
const mainContainer = document.querySelector('main') as HTMLElement;
|
||||||
|
|
||||||
|
const createContainer = (
|
||||||
|
route: string,
|
||||||
|
options: ViewTemplateOptions,
|
||||||
|
) => {
|
||||||
|
const {content, dom, view} = renderViewTemplate(options);
|
||||||
|
const container = {id: route, options, view, content, dom};
|
||||||
|
mainContainer.append(view);
|
||||||
|
containers.push(container);
|
||||||
|
return container;
|
||||||
|
};
|
||||||
|
|
||||||
|
type GetViewOptions = () => ViewTemplateOptions;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get options for current view
|
||||||
|
* @returns {id: 'home' | 'feed' | 'profile' | 'note' | 'contacts' | 'event', id?: string}
|
||||||
|
*/
|
||||||
|
export const getViewOptions: GetViewOptions = () => containers[activeContainerIndex]?.options || {type: 'feed'};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* changes the current view and transitions to the view specified by route
|
||||||
|
* example:
|
||||||
|
* view('/npub0293ji3gojaed32r4r412', {type: 'feed})
|
||||||
|
*/
|
||||||
|
export const view = (
|
||||||
|
route: string,
|
||||||
|
options: ViewTemplateOptions,
|
||||||
|
) => {
|
||||||
|
const active = containers[activeContainerIndex];
|
||||||
|
const nextContainer = containers.find(c => c.id === route) || createContainer(route, options);
|
||||||
|
const nextContainerIndex = containers.indexOf(nextContainer);
|
||||||
|
if (nextContainerIndex === activeContainerIndex) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (active) {
|
||||||
|
nextContainer.view.classList.add('view-next');
|
||||||
|
}
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
nextContainer.view.classList.remove('view-next', 'view-prev');
|
||||||
|
});
|
||||||
|
active?.view.classList.add(nextContainerIndex < activeContainerIndex ? 'view-next' : 'view-prev');
|
||||||
|
activeContainerIndex = nextContainerIndex;
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import {getEventHash} from 'nostr-tools';
|
||||||
|
import {zeroLeadingBitsCount} from './utils/crypto';
|
||||||
|
|
||||||
|
const mine = (event, difficulty, timeout = 5) => {
|
||||||
|
const max = 256; // arbitrary
|
||||||
|
if (!Number.isInteger(difficulty) || difficulty < 0 || difficulty > max) {
|
||||||
|
throw new Error(`difficulty must be an integer between 0 and ${max}`);
|
||||||
|
}
|
||||||
|
// continue with mining
|
||||||
|
let n = BigInt(0);
|
||||||
|
event.tags.unshift(['nonce', n.toString(), `${difficulty}`]);
|
||||||
|
|
||||||
|
const until = Math.floor(Date.now() * 0.001) + timeout;
|
||||||
|
console.time('pow');
|
||||||
|
while (true) {
|
||||||
|
const now = Math.floor(Date.now() * 0.001);
|
||||||
|
if (timeout !== 0 && (now > until)) {
|
||||||
|
console.timeEnd('pow');
|
||||||
|
throw 'timeout';
|
||||||
|
}
|
||||||
|
if (now !== event.created_at) {
|
||||||
|
event.created_at = now;
|
||||||
|
// n = BigInt(0); // could reset nonce as we have a new timestamp
|
||||||
|
}
|
||||||
|
event.tags[0][1] = (++n).toString();
|
||||||
|
const id = getEventHash(event);
|
||||||
|
if (zeroLeadingBitsCount(id) === difficulty) {
|
||||||
|
console.timeEnd('pow');
|
||||||
|
return {id, ...event};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
addEventListener('message', (msg) => {
|
||||||
|
const {difficulty, event, timeout} = msg.data;
|
||||||
|
try {
|
||||||
|
const minedEvent = mine(event, difficulty, timeout);
|
||||||
|
postMessage({event: minedEvent});
|
||||||
|
} catch (err) {
|
||||||
|
postMessage({error: err});
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,154 @@
|
|||||||
|
import {signEvent} from 'nostr-tools';
|
||||||
|
import {elemShrink, updateElemHeight} from './utils/dom';
|
||||||
|
import {powEvent} from './system';
|
||||||
|
import {config} from './settings';
|
||||||
|
import {publish} from './relays';
|
||||||
|
|
||||||
|
// form used to write and publish textnotes for replies and new notes
|
||||||
|
const writeForm = document.querySelector('#writeForm') as HTMLFormElement;
|
||||||
|
const writeInput = document.querySelector('textarea[name="message"]') as HTMLTextAreaElement;
|
||||||
|
|
||||||
|
// overlay for writing new text notes
|
||||||
|
const publishView = document.querySelector('#newNote') as HTMLElement;
|
||||||
|
|
||||||
|
const openWriteView = () => {
|
||||||
|
publishView.append(writeForm);
|
||||||
|
if (writeInput.value.trimRight()) {
|
||||||
|
writeInput.style.removeProperty('height');
|
||||||
|
}
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
updateElemHeight(writeInput);
|
||||||
|
writeInput.focus();
|
||||||
|
});
|
||||||
|
publishView.removeAttribute('hidden');
|
||||||
|
};
|
||||||
|
|
||||||
|
export const closePublishView = () => publishView.hidden = true;
|
||||||
|
|
||||||
|
export const togglePublishView = () => {
|
||||||
|
if (publishView.hidden) {
|
||||||
|
localStorage.removeItem('reply_to'); // should it forget old replyto context?
|
||||||
|
openWriteView();
|
||||||
|
} else {
|
||||||
|
publishView.hidden = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const appendReplyForm = (el: HTMLElement) => {
|
||||||
|
writeForm.before(elemShrink(writeInput));
|
||||||
|
writeInput.blur();
|
||||||
|
writeInput.style.removeProperty('height');
|
||||||
|
el.after(writeForm);
|
||||||
|
if (writeInput.value && !writeInput.value.trimRight()) {
|
||||||
|
writeInput.value = '';
|
||||||
|
} else {
|
||||||
|
requestAnimationFrame(() => updateElemHeight(writeInput));
|
||||||
|
}
|
||||||
|
requestAnimationFrame(() => writeInput.focus());
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeWriteInput = () => writeInput.blur();
|
||||||
|
|
||||||
|
export const openWriteInput = (
|
||||||
|
button: HTMLElement,
|
||||||
|
id: string,
|
||||||
|
) => {
|
||||||
|
appendReplyForm(button.closest('.buttons') as HTMLElement);
|
||||||
|
localStorage.setItem('reply_to', id);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const toggleWriteInput = (
|
||||||
|
button: HTMLElement,
|
||||||
|
id: string,
|
||||||
|
) => {
|
||||||
|
if (id && localStorage.getItem('reply_to') === id) {
|
||||||
|
closeWriteInput();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
appendReplyForm(button.closest('.buttons') as HTMLElement);
|
||||||
|
localStorage.setItem('reply_to', id);
|
||||||
|
};
|
||||||
|
|
||||||
|
// const updateWriteInputHeight = () => updateElemHeight(writeInput);
|
||||||
|
|
||||||
|
writeInput.addEventListener('focusout', () => {
|
||||||
|
const reply_to = localStorage.getItem('reply_to');
|
||||||
|
if (reply_to && writeInput.value === '') {
|
||||||
|
writeInput.addEventListener('transitionend', (event) => {
|
||||||
|
if (!reply_to || reply_to === localStorage.getItem('reply_to') && !writeInput.style.height) { // should prob use some class or data-attr instead of relying on height
|
||||||
|
writeForm.after(elemShrink(writeInput));
|
||||||
|
writeForm.remove();
|
||||||
|
localStorage.removeItem('reply_to');
|
||||||
|
}
|
||||||
|
}, {once: true});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// document.body.addEventListener('keyup', (e) => {
|
||||||
|
// if (e.key === 'Escape') {
|
||||||
|
// hideNewMessage(true);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
const sendStatus = document.querySelector('#sendstatus') as HTMLElement;
|
||||||
|
const publishBtn = document.querySelector('#publish') as HTMLButtonElement;
|
||||||
|
const onSendError = (err: Error) => sendStatus.textContent = err.message;
|
||||||
|
|
||||||
|
writeForm.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const privatekey = localStorage.getItem('private_key');
|
||||||
|
if (!config.pubkey || !privatekey) {
|
||||||
|
return onSendError(new Error('no pubkey/privatekey'));
|
||||||
|
}
|
||||||
|
const content = writeInput.value.trimRight();
|
||||||
|
if (!content) {
|
||||||
|
return onSendError(new Error('message is empty'));
|
||||||
|
}
|
||||||
|
const replyTo = localStorage.getItem('reply_to');
|
||||||
|
const close = () => {
|
||||||
|
sendStatus.textContent = '';
|
||||||
|
writeInput.value = '';
|
||||||
|
writeInput.style.removeProperty('height');
|
||||||
|
publishBtn.disabled = true;
|
||||||
|
if (replyTo) {
|
||||||
|
localStorage.removeItem('reply_to');
|
||||||
|
publishView.append(writeForm);
|
||||||
|
}
|
||||||
|
publishView.hidden = true;
|
||||||
|
};
|
||||||
|
const tags = replyTo ? [['e', replyTo]] : []; // , eventRelayMap[replyTo][0]
|
||||||
|
const newEvent = await powEvent({
|
||||||
|
kind: 1,
|
||||||
|
content,
|
||||||
|
pubkey: config.pubkey,
|
||||||
|
tags,
|
||||||
|
created_at: Math.floor(Date.now() * 0.001),
|
||||||
|
}, {
|
||||||
|
difficulty: config.difficulty,
|
||||||
|
statusElem: sendStatus,
|
||||||
|
timeout: config.timeout,
|
||||||
|
}).catch(console.warn);
|
||||||
|
if (!newEvent) {
|
||||||
|
close();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const sig = signEvent(newEvent, privatekey);
|
||||||
|
// TODO validateEvent
|
||||||
|
if (sig) {
|
||||||
|
sendStatus.textContent = 'publishing…';
|
||||||
|
publish({...newEvent, sig}, (relay, error) => {
|
||||||
|
if (error) {
|
||||||
|
return console.log(error, relay);
|
||||||
|
}
|
||||||
|
console.info(`publish request sent to ${relay}`);
|
||||||
|
close();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
writeInput.addEventListener('input', () => {
|
||||||
|
publishBtn.disabled = !writeInput.value.trimRight();
|
||||||
|
updateElemHeight(writeInput);
|
||||||
|
});
|
||||||
|
|
||||||
|
writeInput.addEventListener('blur', () => sendStatus.textContent = '');
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
set -e
|
||||||
|
|
||||||
|
# assuming the script is run from the repo root dir
|
||||||
|
cd dist
|
||||||
|
|
||||||
|
# create build metadata
|
||||||
|
truncate -s0 build.txt
|
||||||
|
echo "remote: $CI_REPO_REMOTE" >> build.txt
|
||||||
|
echo "commit: $CI_COMMIT_SHA" >> build.txt
|
||||||
|
echo "tag: $CI_COMMIT_TAG" >> build.txt
|
||||||
|
echo "build id: $CI_BUILD_NUMBER" >> build.txt
|
||||||
|
cat build.txt
|
||||||
|
|
||||||
|
# make the release archive in the repo root dir
|
||||||
|
tar -czvf ../nostrweb.tar.gz *
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
set -e
|
||||||
|
printenv RELEASER_SSH_KEY > .sshkey
|
||||||
|
chmod 0600 .sshkey
|
||||||
|
sshcmd='ssh -i .sshkey -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no'
|
||||||
|
exec rsync -vrz -e "$sshcmd" dist/* nostrreleaser@nostr.ch:/var/www/nostr/
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import { readFile } from 'node:fs/promises';
|
||||||
|
import { execFile } from 'node:child_process';
|
||||||
|
import { promisify } from 'node:util';
|
||||||
|
const execFileAsync = promisify(execFile);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* replaceOnCopyPlugin is an esbuild plugin. it loads files as utf-8 text
|
||||||
|
* and replaces certain placeholders with their values computed on plugin setup.
|
||||||
|
* the fileFilter is a regexp matching names or extensions of the files to process,
|
||||||
|
* passed to esbuild's onLoad as is.
|
||||||
|
*
|
||||||
|
* the following placeholders are replaced:
|
||||||
|
*
|
||||||
|
* #[PKG_VERSION]# -> npm package version
|
||||||
|
* #[GIT_COMMIT]# -> short git commit at current HEAD
|
||||||
|
*/
|
||||||
|
export function replaceOnCopyPlugin(fileFilter) {
|
||||||
|
return {
|
||||||
|
name: 'replace-on-copy',
|
||||||
|
setup(build) {
|
||||||
|
const appVersion = sanitizedStr(process.env.npm_package_version);
|
||||||
|
const gitHeadCommit = gitRevParse('HEAD');
|
||||||
|
|
||||||
|
build.onLoad({filter: fileFilter}, async (args) => {
|
||||||
|
const gitCommitHash = await gitHeadCommit;
|
||||||
|
let text = await readFile(args.path, 'utf8');
|
||||||
|
text = text.replaceAll('#[PKG_VERSION]#', appVersion);
|
||||||
|
text = text.replaceAll('#[GIT_COMMIT]#', gitCommitHash);
|
||||||
|
return {
|
||||||
|
contents: text,
|
||||||
|
loader: 'copy',
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function gitRevParse(rev) {
|
||||||
|
rev = sanitizedStr(rev);
|
||||||
|
const { stdout } = await execFileAsync('git', ['rev-parse', '--short', rev]);
|
||||||
|
return sanitizedStr(stdout.trim());
|
||||||
|
}
|
||||||
|
|
||||||
|
function sanitizedStr(s) {
|
||||||
|
const notOk = /[^0-9a-z \.@-]/ig;
|
||||||
|
return s.replaceAll(notOk, '-');
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"alwaysStrict": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"noImplicitThis": true,
|
||||||
|
"strictBindCallApply": true,
|
||||||
|
"strictFunctionTypes": false,
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"target": "es2022"
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"dist",
|
||||||
|
"esbuildconf.js",
|
||||||
|
"node_modules",
|
||||||
|
"**/*.test.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue