@yz-social/civildefense.io 4.5.29 → 5.0.0

package/index.js

@@ -1,4 +1,5 @@
 export { P2PWebNetwork } from "./public/javascripts/p2pWebNetwork.js";
+export { dht } from './public/javascripts/protocol.js';
 export { topicRegion, agentTopic, alertTopic, canonicalTag } from "./public/javascripts/versions.js";
 export { getContainingCells } from "./public/javascripts/s2.js";
 export { location } from "./server/getLocation.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yz-social/civildefense.io",
   "description": "Browser app to safely share live sightings on a map.",
-  "version": "4.5.29",
+  "version": "5.0.0",
   "keywords": [
     "map",
     "browser",
@@ -20,7 +20,7 @@
     ".": "./index.js"
   },
   "dependencies": {
-    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.62.2",
+    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.84.0",
     "cors": "^2.8.6",
     "express": "^4.22.1",
     "leaflet": "^1.9.4",
@@ -28,8 +28,10 @@
     "morgan": "^1.10.1",
     "node-datachannel": "^0.32.3",
     "pica": "^9.0.1",
+    "redis": "^6.2.1",
     "s2js": "^1.44.0",
     "uuid": "^14.0.0",
+    "web-push": "^3.6.7",
     "ws": "^8.21.3",
     "yargs": "^18.0.0"
   },

package/public/about/en.html

@@ -90,27 +90,60 @@
 <!-- ── CONTENT ───────────────────────────────────────────────── -->
 <main class="content-wrap">
 
-  <h1>What You Do With It</h1>
+  <h1 id="do">What You Do With It</h1>
 
   <ul>
-    <li>Warn others of danger by tapping the map.</li>
-    <li>Add comments, photos, video, or other attachments.</li>
+    <li>Warn others of danger by tapping the map, creating an alert for others to see.</li>
+    <li>Add comments, photos, video, or other attachments by tapping on an alert.</li>
     <li>Get notified of new alerts near you or on your current map.</li>
     <li>Share to social media, text, or email.</li>
-    <li>Discuss an alert by secure video conference. (Coming this Fall.)</li>
+    <!-- <li>Discuss an alert by secure video conference. (Coming this Fall.)</li> -->
     <!-- <li>Alerts disappear after 24 hours—this is not an archive or long-term storage system. (This Winter, users will be able to download tamper-evident reports for use in other systems.)</li> -->
   </ul>
 
+  <p>
   <a href="/?tags=%F0%9F%8E%B8%20classic%20rock,%F0%9F%8E%BC%20classical,%F0%9F%A4%A0%20country,%F0%9F%8E%B7%20jazz,%F0%9F%8E%99%EF%B8%8F%20news,%F0%9F%8E%B5%20pop&z=5&lang=en" class="launch-btn" target="civildefense">
     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
     Try it!
   </a>
+  </p>
+
+  <h2 id="topics">Topics</h2>
+  <p>Control what topics are shown on the map by simply touching the topic labels to toggle them on and off. Like "hashtags", you add or create new topics by simply typing them - in this case, into the "add topic" box. There is no central list of topics.
+    <ul>
+      <li>If you like, you can begin a topic name with an emoji character, and that is what will be used on the map as a marker. Otherwise, a unique shape will be automatically generated and used until you receive an alert for that topic that <i>does</i> have a leading emoji.</li>
+      <li>You can remove a topic name from your screen altogether by toggling it off, and then touching the "x" that appears. You can add topics back by typing or selecting them from the "add topic" box.</li>
+      <li>The red "radio button" next to a topic name indicates that it will be the initial topic for a new alert you create by touching the map. (You can also change the topic of an alert you create by touching the topic name in the alert-conversation popup.)</li>
+    </ul>
+  </p>
+
+  <div class="centered">
+    <img class="topics" src="topics.png" alt="topic labels">
+  </div>
+
+
+  <h2 id="sharing">Sharing</h2>
+
+  <p>Every alert you make will be immediately visible to anyone with the app who is looking at that point on the map. Every reply you make will be immediately shared with anyone looking at the same alert.</p>
+  <p>You can use the share button to pass a link and message to those that may not yet have the app. The button appears on the map, at the top of an alert-conversation display, and next to each reply, and it shares whatever the button appears with.</p>
+  <div class="centered">
+    <img class="button-img" src="../images/share.svg" alt="share">
+  </div>
+
+  <h2 id="options">Options</h2>
+
+  <p>The app's "<span class="cd">CD</span>" button gives you control over <a href="notification.html">notifications</a>, <a href="identity.html">how you appear to others</a>, and <a href="pwa.html">updates</a>.</p>
+
+  <div class="hero-inner">
+    <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
+  </div>
+
 
   <!-- <hr class="rule"> -->
 
-  <h1>Broadcast Safely</h1>
+  <h1 id="broadcast">Broadcast Safely</h1>
 
-  <h2>Resist Tracking</h2>
+  <h2 id="tracking">Resist Tracking</h2>
   <ul>
     <li>You cannot be identified as a person because there is no login, sign-up, or accounts. No phone number or email is used. There is no app store logging downloads. Users can choose to let others recognize them over multiple interactions — without divulging their actual identity.</li>
     <li>It is extremely difficult to identify your IP address or network patterns, because alerts are distributed phone-to-phone over a peer-to-peer network.</li>
@@ -118,13 +151,13 @@
     <li>Each alert disappears everywhere on the network after 24 hours. There are no collected records of messages, comments, or requested topics, and this is not an archive or long-term storage system.</li>
   </ul>
 
-  <h2>Resist Censorship</h2>
+  <h2 id="censorship">Resist Censorship</h2>
   <ul>
     <li>No user can be censored because there are no accounts. No one can steal your account information because there isn't any.</li>
     <li>No content can be censored, there is no central organization who controls the network or has power to alter content.</li>
   </ul>
 
-  <h2>Resist Takedown</h2>
+  <h2 id="takedown">Resist Takedown</h2>
   <ul>
     <li>No app store can block Civil Defense — the app is just a web page.</li>
     <li>Taking down web servers or domain names cannot block access for those who already have it, because the app caches everything it needs on first use. The <a href="https://github.com/yz-social/civildefense.io" target="yz.other" rel="noopener">open-source code</a> is available so anyone can host an alternative mirror.</li>
@@ -134,7 +167,7 @@
   </ul>
   <!-- <hr class="rule"> -->
 
-  <h1>The Bigger Picture</h1>
+  <h1 id="more">The Bigger Picture</h1>
   <p>The Civil Defense runs on the <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">Axona network</a>. Both are free and open source.</p>
   <p>Axona is a modern descendant of the old <a href="https://en.wikipedia.org/wiki/Peer-to-peer" target="yz.other" rel="noopener">peer-to-peer networks</a> such as <a href="https://en.wikipedia.org/wiki/Napster">Napster</a>. It has a unique self-healing routing mechanism that uses neuron learning techniques to find the best way to distribute alerts. It is analogous to <a href="https://en.wikipedia.org/wiki/Tor_(network)" target="yz.other" rel="noopener">TOR</a> (The Onion Router), but designed from the ground up to run in mobile and desktop browsers.</p>
   <p>We are also developing a comprehensive quantum-ready cryptography system that will add private-groups for Civil Defense and any software on the network. We believe there are many applications where developers, users, and the public all benefit from open software and secure, decentralized networks — without app stores, servers, or data centers. Beyond Civil Defense, we are also developing large-scale <a href="https://en.wikipedia.org/wiki/Distributed_computing" target="yz.other" rel="noopener">multiuser collaboration</a> and <a href="https://poverty-action.org/inclusive-instant-payment-systems-evidence-based-approach-design-impact" target="yz.other" rel="noopener">Inclusive Instant Payment Systems</a>.</p>

package/public/about/identity.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CivilDefense: Identity</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="hero">
+    <div class="hero-inner">
+      <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
+      <h1>The Civil Defense <a href="index.html"><span>App</span></a></h1>
+    </div>
+  </header>
+  <main class="content-wrap">
+    <h1>Identity without Accounts</h1>
+    <p>Lorem ipsum</p>
+
+    <div class="centered">
+      <img src="prevail.jpg" alt="Cold-War Civil Defense poster - Prepare, Protect, Prevail">
+    </div>
+
+  </main>
+<footer>
+  <p><a href="/?lang=en" target="civildefense">civildefense.io</a> &mdash; Safe and free crowdmapping for vulnerable populations.</p>
+</footer>
+  
+</body>
+</html>

package/public/about/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <script>
-      location = `${navigator.language.split('-')[0].toLowerCase()}.html`;
+      location = `${navigator.language.split('-')[0].toLowerCase()}.html${location.hash}`;
     </script>
   </head>
 </html>  

package/public/about/notification.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CivilDefense: Notifications</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="hero">
+    <div class="hero-inner">
+      <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
+      <h1>The Civil Defense <a href="index.html"><span>App</span></a></h1>
+    </div>
+  </header>
+  <main class="content-wrap">
+    <h1>Notifications without a Feed</h1>
+    <p>Lorem ipsum</p>
+
+    <div class="centered">
+      <img src="serving-you.jpg" alt="Civil Defense Week poster - Serving you in time of emergency">
+    </div>
+
+  </main>
+<footer>
+  <p><a href="/?lang=en" target="civildefense">civildefense.io</a> &mdash; Safe and free crowdmapping for vulnerable populations.</p>
+</footer>
+  
+</body>
+</html>

package/public/about/pwa.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CivilDefense: Install, Update, Remove</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="hero">
+    <div class="hero-inner">
+      <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
+      <h1>The Civil Defense <a href="index.html"><span>App</span></a></h1>
+    </div>
+  </header>
+  <main class="content-wrap">
+    <h1>A Real App Without an App Store</h1>
+    <p><a href="/" target="civildefense">CivilDefense</a> is a full-featured <a href="https://en.wikipedia.org/wiki/Progressive_web_app">app in a web page</a>. However, it does not depend on any app store that can block or remove it, or track who downloaded it. You can run it directly from the <a href="/" target="civildefense">link</a>, without any installation or signup. You can also choose to install it.</p>
+
+    <h2 id="installation">Installation</h2>
+    <p>Installing the app makes it easy to run or <a href="#removal">remove</a> it from the home screen or dock a hurry.</p>
+    <p>In addition, <i>Apple mobile devices</i> allow <a href="notification.html">notifications</a> <i>only</i> from installed apps.</p>
+    <p>Install directly from the <a href="/" target="civildefense">app page</a> with one of these browser buttons. Note: Browser button layout changes faster than the AIs get updated!
+      <ul>
+	<li><a href="https://www.google.com/search?q=mobile+add+to+home+screen">"Add to Home Screen"</a> on <i>mobile devices</i>. Note that this button will not be visible when running inside of another app.</li>
+	<li><a href="https://www.google.com/search?q=safari+add+to+doc">"Add to Dock"</a> on <i>desktop Safari</i>.</li>
+	<li><a href="https://www.google.com/search?q=desktop+browser+install+app">"Install App"</a> on <i>other desktop browsers</i>.</li>
+      </ul>
+    </p>
+
+    <h2 id="updates">Updates</h2>
+    <p>Regardless of whether it is <a href="#installation">installed</a> or run from the browser, the <a href="/" target="civildefense">CivilDefense</a> app automatically keeps a local copy of itself. It periodically checks the original site for new versions, but it does not update without asking you. (You might be in the middle of something or have some other reason to stay on the old version.) The app's "<span class="cd">CD</span>" button also has a "check for updates" button to check immediately.</p>
+    <div class="hero-inner">
+      <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
+    </div>
+
+    <h2 id="removal">Removal</h2>
+    <p>There are no <a href="identity.html">accounts</a>, no database of user activity and preferences, and no data centers.
+      Instead, the list of your current active topics and other data are kept only on your own device.
+      No one can see (or steal, or sell) this information without physical access to your device.</p>
+    <p>To remove this local data on an <i><a href="#installation">installed app</a></i>, simply delete or uninstall the app. The operating system will delete all the local data</p>
+    <p>To remove it from the <i>browser</i>, use the "Wipe all CivilDefense data" link under the app's "<span class="cd">CD</span>" button. On mobile Safari, Apple keeps the browser data separate from the app data, and each must be removed separately. Other platforms share the data between app and browser.</p>
+
+    <div class="centered">
+      <img src="nazis.png" alt="WWII-style poster exhorting the public to use Civil Defense in case of Nazi attack.">
+    </div>
+    
+  </main>
+<footer>
+  <p><a href="/?lang=en" target="civildefense">civildefense.io</a> &mdash; Safe and free crowdmapping for vulnerable populations.</p>
+</footer>
+  
+</body>
+</html>

package/public/about/style.css

@@ -70,6 +70,8 @@ a:hover { color: var(--red); }
     max-width: 680px;
     margin: 0 auto;
 }
+.button-img { width: 80px; }
+.topics { max-width: 350px; }
 .hero-logo {
     width: 80px;
     height: 80px;
@@ -88,6 +90,10 @@ a:hover { color: var(--red); }
     margin-bottom: 0.75rem;
 }
 .hero h1 span { color: var(--red-light); }
+.cd {
+    color: var(--red);
+    font-weight: 700;
+}
 .hero-tagline {
     font-size: clamp(0.95rem, 2.5vw, 1.1rem);
     color: rgba(255,255,255,0.75);

package/public/about/template.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>The Civil Defense App</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="hero">
+    <div class="hero-inner">
+      <img class="hero-logo" src="civil-defense.png" alt="Civil Defense Logo">
+      <h1>The Civil Defense <a href="index.html"><span>App</span></a></h1>
+    </div>
+  </header>
+  <main class="content-wrap">
+    <h1>Some Title</h1>
+    <p>Lorem ipsum</p>
+  </main>
+<footer>
+  <p><a href="/?lang=en" target="civildefense">civildefense.io</a> &mdash; Safe and free crowdmapping for vulnerable populations.</p>
+</footer>
+  
+</body>
+</html>

package/public/index.html

@@ -78,26 +78,31 @@
 
       <div id="aboutContainer" class="hidden">
 	<div class="display-content">
-          <h1>Civil Defense</h1>
+          <h1>
+	    <a id="learnMore" href="about/index.html" target="yz.sidebar"><md-icon class="material-icons">help</md-icon></a>
+	    <span id="titleLabel">Civil Defense</span><span id="titleHostname"></span>
+	  </h1>
           <ul>
             <li id="aboutReport"></li>
             <li id="aboutShared"></li>
             <li id="aboutFade"></li>
           </ul>
-          <p> <a id="learnMore" href="about/index.html" target="yz.sidebar">Learn More</a> </p>
-          <p>
-            <span id="aboutAnyone1"></span>
-            <a id="aboutAnyone2" href="https://github.com/YZ-social/Yz.social" target="yz.sidebar"></a>
-            <span id="aboutAnyone3"></span>
-          </p>
+          <p>  </p>
+          <!-- <p> -->
+          <!--   <span id="aboutAnyone1"></span> -->
+          <!--   <a id="aboutAnyone2" href="https://github.com/YZ-social/Yz.social" target="yz.sidebar"></a> -->
+          <!--   <span id="aboutAnyone3"></span> -->
+          <!-- </p> -->
 	  <hr>
 	  <div>
+	    <a id="learnNotification" href="about/notification.html" target="yz.sidebar"><md-icon class="material-icons">help</md-icon></a>
 	    <label>
 	      <md-checkbox id="showNotifications" touch-target="wrapper"></md-checkbox>
 	      <span id="showNotificationsLabel"></span>
 	    </label>
 	  </div>
 	  <div class="handle-avatar">
+	    <a id="learnIdentity" href="about/identity.html" target="yz.sidebar"><md-icon class="material-icons">help</md-icon></a>
 	    <md-outlined-text-field id="myHandle" placeholder="anonymous"></md-outlined-text-field>
 	    <md-outlined-icon-button id="myAvatar"></md-outlined-icon-button>
 	  </div>
@@ -107,12 +112,15 @@
             <md-elevated-button id="downloadUpdates" class="hidden"></md-elevated-button>
             <span id="updateStatus"></span>
           </div>
-	  <p><small>
+	  <p class="pwa">
+	    <a id="learnPWA" href="about/pwa.html" target="yz.sidebar"><md-icon class="material-icons">help</md-icon></a>
+	    <small>
 	      <label for="scriptChooser"> <span id="version">Version</span></label>
 	      <span id="appVersion"></span>,
 	      kernel: <span id="kernelVersion"></span>.
 	    </small>
-	    <small><a id="wipe" href="#"></a></small></p>
+	    <small><a id="wipe" href="#"></a></small>
+	  </p>
 	  <input id="scriptChooser" type="file" accept="text/javascript"></input>
 	</div>
       </div>