master
alex 2 years ago
commit 8d60bf871c

2
.gitignore vendored

@ -0,0 +1,2 @@
node_modules
dist

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2022 qcode.ch
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

@ -0,0 +1,29 @@
# nostr web sandbox
a playground for a web interface to [nostr](https://nostr.info/).
some useful resources:
* JS library used in this project: https://github.com/fiatjaf/nostr-tools
* NIPs: https://github.com/nostr-protocol/nips
* relays registry: https://nostr-registry.netlify.app/
* event inspector: https://nostr.com/
* a working web interface in vue.js: https://astral.ninja/
* https://github.com/aljazceru/awesome-nostr
## dev
nodejs v18.x and npm v8.x are recommended.
after `npm install`, start by running a dev server with:
npm run serve
and point a browser to http://127.0.0.1:8001/
the `serve` command injects a live reload snippet. to build a "production" copy,
execute
npm run build
the build is done using [esbuild](https://esbuild.github.io/), with a config in
[esbuildconf.js](esbuildconf.js). the result is placed in `dist` directory.

@ -0,0 +1,34 @@
import { createRequire } from 'module';
import alias from 'esbuild-plugin-alias';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
// see docs at https://esbuild.github.io/api/
export const options = {
entryPoints: [
'src/main.js',
'src/main.css',
'src/index.html',
'src/bubble.svg'
],
outdir: 'dist',
//entryNames: '[name]-[hash]', TODO: replace urls in index.html with hashed paths
loader: {'.html': 'copy', '.svg': 'copy'},
bundle: true,
platform: 'browser',
minify: false, // TODO: true for release and enable sourcemap
define: {
window: 'self',
global: 'self'
},
// https://github.com/esbuild/community-plugins
plugins: [
alias({
// cipher-base require's "stream"
stream: createRequire(import.meta.url).resolve('readable-stream')
}),
NodeGlobalsPolyfillPlugin({buffer: true})
]
};
export default {options: options}

1620
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,17 @@
{
"name": "nostrweb",
"version": "0.0.1",
"private": true,
"type": "module",
"devDependencies": {
"@esbuild-plugins/node-globals-polyfill": "^0.1.1",
"esbuild": "^0.14.54",
"esbuild-plugin-alias": "^0.2.1",
"events": "^3.3.0",
"nostr-tools": "0.24.1"
},
"scripts": {
"build": "node tools/build.js",
"serve": "node tools/serve.js"
}
}

@ -0,0 +1,4 @@
<?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>

After

Width:  |  Height:  |  Size: 1.7 KiB

@ -0,0 +1,20 @@
/* 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,18 @@
/**
* 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,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nostr sandbox</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="tabs">
<div class="tab">
<input type="radio" name="maintabs" id="homefeed" checked>
<label for="homefeed">feed</label>
<div class="content">
<div class="cards" id="feedlist"></div>
</div>
</div>
<div class="tab">
<input type="radio" name="maintabs" id="trending">
<label for="trending">trending</label>
<div class="content">
<p><a href="https://github.com/nostr-protocol/nips/blob/master/12.md">NIP-12 (generic queries)</a></p>
</div>
</div>
<div class="tab">
<input type="radio" name="maintabs" id="direct">
<label for="direct">direct</label>
<div class="content">
<p><a href="https://github.com/nostr-protocol/nips/blob/master/04.md">NIP-04 (direct msg)</a></p>
</div>
</div>
<div class="tab">
<input type="radio" name="maintabs" id="chat">
<label for="chat">chat</label>
<div class="content">
<p><a href="https://github.com/nostr-protocol/nips/blob/master/28.md">NIP-28 (public chat)</a></p>
</div>
</div>
</div>
</body>
<script src="main.js"></script>
</html>

@ -0,0 +1,39 @@
@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%;
}

@ -0,0 +1,28 @@
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,54 @@
.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,9 @@
import esbuild from 'esbuild';
import config from '../esbuildconf.js';
(async () => {
config.options.metafile = true;
let res = await esbuild.build(config.options);
let text = await esbuild.analyzeMetafile(res.metafile);
console.log(text);
})();

@ -0,0 +1,55 @@
import { createServer, request } from 'http'
import esbuild from 'esbuild';
import config from '../esbuildconf.js';
// from https://github.com/evanw/esbuild/issues/802
const clients = [];
config.options.banner = {
js: ' (() => new EventSource("/_live").onmessage = () => location.reload())();'
};
config.options.watch = {
onRebuild(err, res) {
if (err) {
console.log(err);
return;
}
clients.forEach((c) => c.write('data: update\n\n'));
const n = clients.length;
clients.length = 0;
console.log(`>>> sent reload msg to ${n} client(s)`);
}
};
esbuild.build(config.options).catch(() => process.exit(1));
const s = {
host: '127.0.0.1',
servedir: config.options.outdir,
onRequest: (req) => {
console.log(`${req.method} ${req.path} ${req.status} ${req.timeInMS}ms`);
}
};
esbuild.serve(s, {}).then(server => {
const {host, port} = server;
const livePort = port + 1;
console.log(`serving content from http://${host}:${port}/`);
console.log(`serving live reload at http://${host}:${livePort}/`);
createServer((req, resp) => {
const { url, method, headers } = req;
if (url === '/_live') {
clients.push(resp.writeHead(200, {
'content-type': 'text/event-stream',
'cache-control': 'no-cache',
'connection': 'keep-alive',
}));
console.log(`>>> client connected; total is now ${clients.length}`);
return;
}
const path = ~url.split('/').pop().indexOf('.') ? url : '/index.html';
const proxyReq = request({hostname: host, port: port, path, method, headers}, (proxyResp) => {
resp.writeHead(proxyResp.statusCode, proxyResp.headers);
proxyResp.pipe(resp, {end: true});
});
req.pipe(proxyReq, {end: true});
}).listen(livePort, host);
});
Loading…
Cancel
Save