@yz-social/civildefense.io 4.4.1

package/public/stylesheets/style.css

@@ -0,0 +1,442 @@
+:root {
+    --md-filter-chip-label-text-font: roboto;
+    --md-sys-color-primary: #0A2E7C;
+    --md-sys-color-outline: var(--md-sys-color-primary);
+    --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-primary);
+
+    --md-sys-color-secondary: #BD2E2F;
+    --md-filled-text-field-input-text-placeholder-color: var(--md-sys-color-secondary);
+
+    --md-sys-color-on-surface: #191c1c;
+    --md-sys-color-secondary-container: white; /* selected filter chip */
+    --md-sys-color-surface-container-highest: white; /* filled text field */
+    --md-menu-container-color: white;
+    /* --md-filled-text-field-container-shape: 16px; */
+    /* --md-filter-chip-container-shape: 16px; */
+    --md-sys-shape-corner-full: 12px;
+
+    --about-image-size: 80px;
+
+    /* --md-sys-color-tertiary-container: blue; */
+    /* --md-sys-color-background: yellow; */
+    /* --md-sys-color-primary-container: green; /\* #B8C2D7; /\* #cce8e7;*\/ */
+    /* --md-sys-color-surface: wheat; */
+    /* --md-sys-color-surface-container: magenta; */
+    /* --md-sys-color-surface-container-high: blue; */
+    /* --md-sys-color-surface-container-highest: purple;   */
+    /* --md-sys-color-surface-container-lowest: purple;       */
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
+    overflow: hidden;
+    color: var(--md-sys-color-primary);
+}
+.leaflet-bar a, .leaflet-container a.leaflet-popup-close-button, .leaflet-popup-content-wrapper {
+    color: var(--md-sys-color-primary);
+    border-color: var(--md-sys-color-primary);
+}
+.leaflet-touch .leaflet-bar {
+    border-radius: 12px;
+    & > a:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
+    & > a:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
+}
+:not(md-filled-icon-button) > md-icon {
+    color: var(--md-sys-color-primary);
+}
+.remove, .icon.leading, .reply-input md-tonal-icon-button md-icon  {
+    color: var(--md-sys-color-primary);
+    --md-menu-item-supporting-text-color: var(--md-sys-color-primary);
+    --md-menu-item-label-text-color: var(--md-sys-color-primary);
+}
+md-outlined-text-field {
+    --md-outlined-text-field-label-text-color: var(--md-sys-color-secondary);
+    --md-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);
+    --md-outlined-field-outline-color: var(--md-sys-color-primary);
+}
+.pubtag-choice {
+    color: unset;
+}
+:not(.alert) .leaflet-popup-content {
+    font-family: 'Roboto';
+    min-width: 80px;
+}
+.alert .leaflet-popup-content, .display-content {
+    max-width: 90vw;
+    min-width: min(84vw, 600px);
+    max-height: 80vh;
+    overflow: auto;
+}
+#map {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.info-banner {
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(255, 255, 255, 0.95);
+    padding: 12px 20px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    z-index: 1000;
+    font-size: 14px;
+    text-align: center;
+    max-width: 90%;
+}
+
+.loading {
+    color: var(--md-sys-color-primary);
+    font-weight: 500;
+}
+
+.error {
+    color: var(--md-sys-color-secondary);
+    font-weight: 500;
+}
+
+.instructions {
+    color: #059669;
+    font-weight: 500;
+}
+
+.faded {
+    opacity: 0;
+    transition: opacity 2s;
+}
+
+#mapCapture {
+    height: 100vh;
+}
+#mapCapture > img {
+    position: absolute;
+    opacity: 0;
+    left: 5px;
+    top: 5px;
+    z-index: 1100;
+}
+#map + img.about-image {
+    pointer-events: none;
+}
+.about-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+}
+button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon-button, md-filled-icon-button, md-tonal-icon-button, md-elevated-button, md-checkbox, .attachment > md-icon {
+    transition: transform 0.2s ease;
+    &:hover { transform: scale(1.1); }
+}
+.leaflet-marker-icon:hover { filter: saturate(4) !important; }
+.about-image {
+    width: var(--about-image-size);
+    height: auto;
+    display: block;
+}
+#subPopoverControls {
+    z-index:675;
+    pointer-events: none;
+    width: 100dvw;
+    height: 100dvh;
+    position: fixed;
+    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
+}
+#subPopoverControls > * > * {
+    pointer-events: auto;
+}
+.button-container {
+    bottom: 0;
+    left: 5px;
+    position: absolute;
+    display: flex;
+    gap: 5px;
+}
+
+.watching-hashtags {
+    position: absolute;
+    width: calc(100% - 130px);
+    bottom: calc((sign(calc(100vh - 100dvh)) - 1) * -18px); /* 18px for attribution in desktop, none if iphone dynamic viewsize. */
+    right: 5px;
+    flex-direction: row-reverse;
+    flex-wrap: wrap-reverse;
+    align-items: flex-end;
+}
+.watching-hashtags md-filled-text-field.newtag {
+    --md-filled-field-top-space: 0px;
+    --md-filled-field-bottom-space: 0px;
+    --md-filled-text-field-leading-space: 8px;
+    --md-filled-text-field-trailing-space: 0px;
+    width: 125px;
+    height: 34px;
+}
+.alert-marker {
+    text-shadow: 8px -3px 10px rgb(0 0 0 / 60%);
+    animation: pulse ease 0.8s 1;
+}
+.alert-commented {
+    display: none;
+    height: 40px;
+    border-radius: 20px;
+    background-image: radial-gradient(transparent 30%, var(--md-sys-color-secondary), transparent 70%);
+    animation: pulse ease 0.8s 1;
+}
+.alert-pin {
+    text-shadow: 8px -3px 10px rgb(0 0 0 / 60%);
+    font-size: 30px;
+    line-height: 30px;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    text-align: center;
+}
+@keyframes pulse {
+    0% { filter: saturate(1); }
+    25% { filter: saturate(4); }
+    50% { filter: saturate(1); }
+    75% { filter: saturate(0); }
+    100% { filter: saturate(1); }
+}
+@keyframes pulse2 { /* for restarting */
+    0% { filter: saturate(1); }
+    25% { filter: saturate(4); }
+    50% { filter: saturate(1); }
+    75% { filter: saturate(0); }
+    100% { filter: saturate(1); }
+}
+
+#checkForUpdates, #downloadUpdates, #updateContainer md-elevated-button {
+    width: 150px;
+}
+.source-updates {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.pub {
+    animation: pulse ease 0.8s 1;
+    --_label-text-weight: 800;
+    --_selected-label-text-color: var(--md-sys-color-secondary);
+    --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-secondary);
+}
+md-filter-chip {
+    --md-sys-color-surface-container-low: #B8C2D7; /* non-selected elevated filter chip */
+}
+md-filter-chip minidenticon-svg + md-icon-button {
+    bottom: 10px;
+}
+md-filter-chip md-icon-button {
+    position: relative;
+    bottom: 3px;
+    right: 3px;
+}
+md-filter-chip[selected]:not(.pub) md-icon::after {
+    content: "radio_button_unchecked";
+}
+md-filter-chip[selected].pub md-icon::after {
+    content: "radio_button_checked";
+}
+md-filter-chip:not([selected]) md-icon::after {
+    content: "cancel";
+}
+md-filter-chip.pub md-icon {
+    color: var(--md-sys-color-secondary);
+}
+md-filter-chip minidenticon-svg {
+    background: white;
+}
+md-outlined-icon-button minidenticon-svg, md-outlined-icon-button img {
+    height: 40px;
+    width: 40px;
+    border-radius: 12px;
+}
+.alert span minidenticon-svg {
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+    vertical-align: text-bottom;
+}
+.alert-pin minidenticon-svg {
+    display: inline-block;
+    position: relative;
+    height: 40px;
+    width: 40px;
+    top: 7px;
+    background: white;
+}
+.alert form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.alert div.post-input {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    margin-top: 10px;
+    min-width: 300px;
+}
+.alert div.post-input md-outlined-text-field {
+    width: 210px;
+}
+.alert p, .alert span {
+    font-size: 18px;
+}
+.alert .actions {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+}
+.alert md-filled-button {
+    width: 100px;
+}
+.alert md-icon {
+    width: 22px;
+    height: 22px;
+}
+md-menu {
+    min-width: 150px;
+}
+.attribution {
+    padding: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 5px;
+}
+.attribution > div:last-child {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+}
+md-outlined-button {
+    padding: 10px;
+}
+.attribution > div:last-child > span {
+    text-wrap: nowrap;
+}
+md-menu-item minidenticon-svg {
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+}
+.reply {
+    margin-top: 5px;
+}
+.reply > span {
+    padding: 5px;
+}
+.reply > img, .reply > .attachment, .reply > a > img {
+    width: 100%;
+    border-style: solid;
+}
+.reply .attribution {
+    border-style: solid solid none solid;
+    border-radius: 12px 12px 0 0;
+}
+.reply .message {
+    color: black;
+    border-color: var(--md-sys-color-primary);
+    border-width: 1px;
+    border-radius: 0 0 12px 12px;
+    border-style: solid;
+    width: 100%;
+    padding-left: 5px;
+    padding-right: 5px;
+    display: inline-block;
+}
+.attribution-metadata {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+}
+.alert {
+    font-family: roboto;
+}
+.reply .attachment md-icon {
+    vertical-align: bottom;
+}
+.attachment-preview {
+    margin-top: 15px;
+    text-align: right;
+}
+input[type="file"] {
+    display: none;
+}
+.reply-input {
+    width: 100%;
+}
+
+.button-container button {
+    background: none;
+    border: none;
+}
+.button-image {
+    width: 40px;
+    height: auto;
+    background: none;
+    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4));
+}
+
+#qrContainer, #aboutContainer, #updateContainer, #correspondentContainer {
+    position: absolute;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: transparent;
+    z-index: 600;
+    display: flex;
+    justify-content: center; /* Centers horizontally */
+    align-items: center;    /* Centers vertically */
+}
+.display-content {
+    background: white;
+    position: relative;
+
+    padding: 15px;
+    border-radius: 12px;
+    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+}
+.display-content > * {
+    margin-top: 10px;
+}
+.display-content ul {
+    margin-left: 15px;
+}
+#correspondentContainer md-outlined-button {
+    max-width: 70vw;
+}
+.handle-avatar {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+#correspondentContainer .handle {
+    color: var(--md-sys-color-secondary);
+}
+#qrContainer > .display-content {
+    padding: 0;
+    min-width: unset;
+}
+.describe {
+    margin-bottom: 5px;
+}
+
+.hidden {
+    display: none !important;
+}

package/routes/index.js

@@ -0,0 +1,123 @@
+import express from 'express';
+export var router = express.Router();
+
+// The DHT runs a hook here to connect nodes to each other, which uses WebSockets during
+// the connection and then gets out of the way.
+// It also runs some headless peers here to provide stable continuity to the network.
+
+// But that isn't ready just yet. So temporarily, the DHT pub/sub is handled in-memory
+// here, communicating through WebSocket for the whole client session.
+
+// Each client is identified by its websocket connection.  When a client subscribes to
+// a key, we ensure that its websocket appears in the set maintained for that key.
+// When a publish event happens for a given key, we signal all the websockets in that
+// key's set.  At that point we also add the published event to a set of "sticky"
+// publishes for the key, with a timed removal set up for the future.  Any client
+// newly subscribing to a key is sent the key's current set of sticky values.
+
+// When a client's user moves or resizes the map, the set of keys to subscribe to is
+// recomputed.  The client unsubscribes from any keys it is no longer interested in,
+// and subscribes to new keys of interest.  Because each event is published at a wide
+// range of scales, it is likely to be a frequent occurrence that even a major move
+// or rescale results in the map showing exactly the same events as before, albeit
+// supplied through different subscriptions.
+
+const SUBSCRIPTION_TIMEOUT = 60 * 60e3; // Delete after an hour. Must be renewed by app.
+const PUBLISH_TIMEOUT = 10 * 60e3;      // Delete after 10 minutes.
+const timeouts = {pub: {}, sub: {}};
+function expire(type, subject, remover, timeout) { // Cancellably schedule remover() to fire at timeout.
+  timeouts[type][subject] = setTimeout(remover, timeout);
+}
+function cancel(type, subject) { // Cancel a sheduled expiration.
+  clearTimeout(timeouts[type][subject]);
+}
+
+// pub maps eventName => {[subject]: storageItem, ...}, where subject is the message id. Entries purged after PUBLISH_TIMEOUT.
+// sub maps  eventName => {[subject]: ws, ...}, where subject is the subscriber id. Entries purged after SUBSCRIPTION_TIMEOUT.
+const data = {pub: {}, sub: {}};
+function removeBucket(type, eventName, subject, bucket = data[type][eventName]) { // Remove from data.
+  if (!bucket) return;
+  delete bucket[subject];
+  if (Object.keys(bucket).length) return;
+  delete data[type][eventName];
+}
+
+function setSticky(eventName, storageItem) { // Associate string eventName, for use by getSticky.
+  const {payload, subject} = storageItem;
+  const bucket = data.pub[eventName] ||= {};
+  function removeMessage() {
+    removeBucket('pub', eventName, subject, bucket);
+  }
+  cancel('pub', subject);
+  if (payload === null) removeMessage();
+  else {
+    bucket[subject] = JSON.stringify(storageItem);
+    expire('pub', subject, removeMessage, PUBLISH_TIMEOUT);
+  }
+}
+function getSticky(eventName) { // Answer array of previously set strings that are still associated with eventName.
+  return Object.values(data.pub[eventName] || {});
+}
+
+router.ws('/ws', function(ws, req, next) {
+  // no on('connection') needed; connection is already made
+  function deleteFromKeySubs(eventName, subject, keySubs = data.sub[eventName]) {
+    removeBucket('sub', eventName, subject, keySubs);
+  }
+  function deleteWS() {
+    for (const eventName in data.sub)  {
+      const keySubs = data.sub[eventName];
+      for (const [subject, socket] of Object.entries(keySubs)) {
+	if (ws === socket) deleteFromKeySubs(eventName, subject, keySubs);
+      }
+    }
+  }
+  let heartbeat = setInterval(() => ws.ping(), 10e3);
+  ws.on('message', message => {
+    const {eventName, type, subject, payload, ...rest} = JSON.parse(message);
+    let keySubs = data.sub[eventName] ||= {};
+    switch (type) {
+    case 'pub':
+      const subscribedSockets = Object.values(keySubs);
+      //console.log('publishing', eventName, 'to', Object.keys(keySubs));
+      for (const ws of subscribedSockets) ws.send(message);
+      setSticky(eventName, {eventName, subject, payload, ...rest, type: 'event'});
+      break;
+    case 'ext':
+      cancel('pub', subject);
+      expire('pub', subject, () => removeBucket('pub', eventName, subject), PUBLISH_TIMEOUT);
+      break;
+    case 'sub':
+      cancel('sub', subject);
+      if (payload) {
+	//console.log('subscribing', eventName, 'among', Object.keys(keySubs));
+	// In the DHT, the payload is the node name so that we can fire the event to it later.
+	// Here we have/store the websocket.
+	if (subject !== payload) throw new Error('Subscription with payload:', payload, 'and subject:', subject);
+	keySubs[subject] = ws;
+	for (const string of getSticky(eventName)) {
+	  console.log('sending sticky', string);
+	  ws.send(string);
+	}
+	expire('sub', subject, () => deleteFromKeySubs(eventName, subject), SUBSCRIPTION_TIMEOUT);
+      } else {
+	deleteFromKeySubs(eventName, subject, keySubs);
+      }
+      break;
+    default:
+      console.error(`Unrecognized type ${type}`, message);
+    }
+  });
+
+  ws.on('close', () => {
+    console.log(`Client disconnected`);
+    clearInterval(heartbeat);
+    deleteWS();
+  });
+
+  ws.on('error', error => {
+    console.error('WebSocket error:', error);
+    deleteWS();
+  });
+});
+

package/server/app.js

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+import process from 'node:process';
+import { exec } from 'node:child_process';
+import {cpus, availableParallelism } from 'node:os';
+import cluster from 'node:cluster';
+import http from 'node:http';
+import express from 'express';
+import logger from 'morgan';
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+import { resolve } from './dirname.js';
+
+
+const logicalCores = availableParallelism();
+
+const argv = yargs(hideBin(process.argv))
+      .usage(`Start an http server for Alert and with nPortals nodes to connect through. Model description "${cpus()[0].model}", ${logicalCores} logical cores.`)
+      .option('nPortals', {
+	alias: 'p',
+	type: 'number',
+	default: logicalCores,
+	description: "The number of steady nodes that handle initial connections."
+      })
+      .option('baseURL', {
+	type: 'string',
+	default: 'http://localhost:3000/kdht',
+	description: "The base URL of the portal server through which to bootstrap."
+      })
+      .option('externalBaseURL', {
+	type: 'string',
+	default: '',
+	description: "The base URL of the some other portal server to which we should connect ours, if any."
+      })
+      .option('announce', {
+	type: 'boolean',
+	default: false,
+	description: "Announce our availability on the DHT, so that other nodes can enter through us if their original portal goes down."
+      })
+      .option('fixedSpacing', {
+	type: 'number',
+	default: 2,
+	description: "Minimum seconds to add between each portal."
+      })
+      .options('variableSpacing', {
+	type: 'number',
+	default: 5,
+	description: "Additional variable seconds (+/- variableSpacing/2) to add to fixedSpacing between each portal."
+      })
+      .option('verbose', {
+	alias: 'v',
+	type: 'boolean',
+	default: false,
+	description: "Run with verbose logging."
+      })
+      .parse();
+
+if (cluster.isPrimary) { // Parent process with portal webserver through which clienta can bootstrap
+  const port = parseInt((new URL(argv.baseURL)).port || '80');
+  process.title = 'yz.social';
+  const app = express();
+  app.use(logger(':date[iso] :status :method :url :res[content-length] - :response-time ms'));
+
+  // if (argv.announce) { // The default is to not announce.
+  //   let announce = null;
+  //   // Different portals can be set up in different ways, with no easy place to look to know our domain name.
+  //   // So here we wait until someone connects to the server, and make note of the request host.
+  //   app.use((req, res, next) => {
+  //     if (!announce && req.hostname !== 'localhost') {
+  // 	const host = req.headers["x-forwarded-host"] || req.headers.host; // Including port, if specified
+  // 	announce = `node ${resolve('announce.js')} --portalURL https://${host}/kdht`;
+  // 	console.log(announce);
+  // 	exec(announce);
+  // 	setInterval(() => exec(announce), 12 * 60 * 60e3); // Every 12 hours that we are running.
+  //     }
+  //     next();
+  //   });
+  // }
+
+  // We must allow expressWs to bach the internals of app before
+  // pulling in routes/index.js. Thus a dynamic import is used so that
+  // we can control when routes/index.js is processed.
+  // expressWs(app);
+  // const Yz = await import('./routes/index.js');
+
+  //console.log(`${cpus()[0].model}, ${logicalCores} logical cores. Starting ${argv.nPortals}.`);
+  app.use(express.json());
+
+  app.use('/images', express.static(resolve('../public/images'), {
+    maxAge: '1d',
+    etag: true,
+    immutable: true
+  }));
+  app.use(express.static(resolve('../public'), {
+    extensions: ['js'] // Some dependencies refer to .js files as relative pathnames, with the .js missing.
+  }));
+
+  app.listen(port);
+  console.log('Listening on', port, 'and starting', argv.nPortals, 'nodes.');
+  for (let i = 0; i < argv.nPortals; i++) cluster.fork();
+} else {
+  process.title = 'axona-starting';
+  const { P2PWebNetwork } = await import('../public/javascripts/p2pWebNetwork.js');
+  await P2PWebNetwork.delay(cluster.worker?.id * 1e3); // One second between startups.
+  const { location:region } = await import('./getLocation.js');  // First invocation caches.
+  const network = await P2PWebNetwork.create({region});
+  process.title = 'axona-' + network.identity.id;
+  let update = null//setInterval(() => network.info(network.health().axonRoles.map(role => role.topic)), 5e3);
+  process.on('SIGINT', async () => { // Leave the network politely.
+    console.log(process.title, 'Shutdown for Ctrl+C');
+    clearInterval(update)
+    await network.disconnect();
+    process.exit(0);
+});
+  await network.host();
+
+}