pmtiles-swarm 0.60.0 → 0.61.0

package/CHANGELOG.md

@@ -7,6 +7,31 @@
 ### 🐞 Bug fixes
 - _...Add new stuff here..._
 
+## 0.61.0
+### ✨ Features and improvements
+- **"Style URL" is now "source URL", because that is what it is.** It goes in a style's
+  `sources` block and is not itself a style, so the old name told a reader to put it in the
+  wrong place. The field on `/api/categories` and `/latest/` is `sourceUrl`; `styleUrl` is
+  still sent alongside it and is deprecated, so nothing reading the old name breaks on the
+  correction.
+
+- **A copy button copies, rather than opening a box to copy from.** `navigator.clipboard`
+  needs a secure context and a console reached by IP over plain HTTP on a LAN is not one —
+  which is how most of them are reached — so the console fell back to `window.prompt` every
+  time. It now falls back to the selection API, which predates the clipboard API and carries
+  no such requirement, and confirms on the button itself the way the public page does. The
+  public page gained the same fallback: it was failing outright wherever the console was
+  prompting, which is the same nodes.
+
+- **The XYZ template is offered on the public catalogue page too**, beside the TileJSON it
+  already had. 0.60.0 added it to the console only, which is the wrong way round: the console
+  is for the operator, and the person who needs a tile URL to paste into a Leaflet layer or a
+  GIS client is usually looking at the public page. Both draw from the same builder, so the
+  field was already in the public payload and only the button was missing.
+
+### 🐞 Bug fixes
+- _...Add new stuff here..._
+
 ## 0.60.0
 ### ✨ Features and improvements
 - **A tile URL that survives a rebuild.** Every archive is addressed by infohash, which is

package/docs/configuration.md

@@ -407,7 +407,7 @@ on. This is that address.
 Narrower than `publicUrl` on purpose: `publicUrl` overrides every URL the node
 emits and so gives up the multi-domain behaviour, while this overrides only the
 ones that have to be permanent. Everything else — TileJSON, tile templates,
-`.torrent` links, style URLs, the feeds — goes on naming whichever host the
+`.torrent` links, source URLs, the feeds — goes on naming whichever host the
 request arrived as.
 
 ```json

package/docs/internals.md

@@ -725,7 +725,7 @@ own and asks for nothing guarded.
 
 Three things joined the public list to make it work, and each is a read of
 something already published: `/api/categories`, which groups the same archives
-and carries the style URL for each; the per-archive `/preview`; and `/vendor/`,
+and carries the source URL for each; the per-archive `/preview`; and `/vendor/`,
 which is the MapLibre bundle the preview renders with. The preview used to be
 excluded on the grounds that it is console furniture and would not render
 without `/vendor` anyway — both true, and both answered by publishing the pair

package/docs/serving-tiles.md

@@ -45,7 +45,7 @@ See [internals.md](internals.md#serving-an-mbtiles-archive).
 
 `GET /latest/` lists every category this node publishes, with the endpoints
 that resolve to each one's newest build — the TileJSON, the `.torrent`, the
-magnet, the per-category feed, and the style URL with the magnet in its
+magnet, the per-category feed, and the source URL with the magnet in its
 fragment.
 
 Public, and deliberately so. Everything else under `/latest/` is — the
@@ -274,7 +274,7 @@ everywhere:
 | torrent-aware                     | joins **before any network call**, and still can if the fetch fails |
 
 The console's **Copy TileJSON URL + swarm** button produces exactly this, and so
-does the `styleUrl` on every row of `/api/categories` and `/latest/`.
+does the `sourceUrl` on every row of `/api/categories` and `/latest/`.
 
 ### Two handles, and why both
 

package/docs/tilejson.md

@@ -110,7 +110,7 @@ minor one. **A browser has no DHT** — WebTorrent's `browser` field maps
 UDP or TCP sockets at all. Given only a public key, a browser would have to fetch
 this TileJSON before it could join anything. Since this magnet is routinely
 carried in the _fragment of the TileJSON URL itself_ — see
-[`styleUrl`](#where-this-magnet-shows-up) — that would make the fragment useless
+[`sourceUrl`](#where-this-magnet-shows-up) — that would make the fragment useless
 to the one client most likely to be reading it.
 
 The infohash does go stale on the next rebuild. That is acceptable and expected:
@@ -122,7 +122,7 @@ going to follow the series anyway. It is a starting point, not a subscription.
 Three places, all built from the same function, so they agree:
 
 - `torrent.mutable.magnet` in this document.
-- The fragment on `styleUrl`, from `GET /api/categories` — a
+- The fragment on `sourceUrl`, from `GET /api/categories` — a
   `…/latest/<category>/tiles.json#magnet:?…`. One string that a plain client
   fetches over HTTP and a swarm client joins directly, with no extra round trip
   for either.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmtiles-swarm",
-  "version": "0.60.0",
+  "version": "0.61.0",
   "description": "BitTorrent distribution for PMTiles map archives: create torrents, watch folders, publish and subscribe to RSS feeds, and seed through qBittorrent or an embedded client",
   "type": "module",
   "main": "src/index.js",

package/src/api.js

@@ -158,12 +158,17 @@ function withSwarmHandles(url, { torrent, magnet }) {
 
 /**
  * A TileJSON URL carrying the ways into the swarm in its fragment.
+ *
+ * A *source* URL, not a style one — it goes in a style's `sources` block, and
+ * a style is the document that would contain it. It was called the other thing
+ * for a while, which is a name that tells a reader to put it in the wrong
+ * place.
  * @param {string} category - Which category.
  * @param {object} newest - Its newest entry.
  * @param {string} base - Public base URL.
- * @returns {string} - The URL a style should use.
+ * @returns {string} - The URL a source should point at.
  */
-function styleUrlFor(category, newest, base) {
+function sourceUrlFor(category, newest, base) {
   const url = `${base}/latest/${category}/tiles.json`;
   const magnet = newest?.mutable?.publicKey
     ? mutableMagnet(newest.mutable.publicKey, {
@@ -2178,7 +2183,13 @@ export function createApp({
             // and resolves the current build over the DHT. Otherwise the
             // newest build's own magnet, which pins that build but still
             // beats a blank map when the fallback is needed at all.
-            styleUrl: servable ? styleUrlFor(category, newest, base) : null,
+            // What goes in a style's `sources` block. It is a TileJSON URL
+            // with the ways into the swarm in its fragment, so it is a source
+            // by every reading: what it addresses, and where it is written.
+            sourceUrl: servable ? sourceUrlFor(category, newest, base) : null,
+            // The name this had until 0.61.0, kept so a consumer that reads it
+            // is not broken by the correction. Deprecated: read `sourceUrl`.
+            styleUrl: servable ? sourceUrlFor(category, newest, base) : null,
             // Points at the category, not at a build. The page reads the
             // TileJSON beside it, so it renders whatever is current — which
             // makes it the same URL a style holds, demonstrating itself rather

package/src/web/index.html

@@ -241,9 +241,11 @@
         padding: 0 0.45rem;
       }
       button.copy:hover { color: var(--fg); border-color: var(--fg); }
+      /* The same green the public catalogue page confirms a copy with. */
+      button.copy.done { border-color: currentColor; color: #3fb950; }
       /* Category endpoints. `th, td` is nowrap for the archive table, where a
          wrapped number is worse than a wide one — but here the cell holds a
-         style URL and a paragraph explaining it, so nowrap pushed the table
+         source URL and a paragraph explaining it, so nowrap pushed the table
          wider than the window and took the Copy and Open buttons off the far
          edge with it. Fixed layout keeps the two end columns where they are
          and gives the middle whatever is left. */
@@ -999,17 +1001,60 @@
         return data;
       }
 
-      const copy = async (text, what) => {
+      /**
+       * Puts text on the clipboard, in a console that is usually not a secure
+       * context.
+       *
+       * `navigator.clipboard` requires one, and a console reached by IP over
+       * plain HTTP on a LAN is not — which is how most of them are reached. So
+       * the interesting path here is the fallback, not the modern call: the
+       * selection API predates the clipboard API and carries no such
+       * requirement, so it works exactly where the other one does not.
+       *
+       * What this replaces was `window.prompt`, which does put the text
+       * somewhere it can be copied from and makes the reader do the copying.
+       * A button that says "copy" should copy.
+       *
+       * Deliberately duplicated in public.html rather than shared. Both pages
+       * are single files with their script inlined, and one browser shim is a
+       * poor reason to give that up.
+       * @param {string} text - What to put on the clipboard.
+       * @returns {Promise<boolean>} - Whether it landed.
+       */
+      const toClipboard = async (text) => {
         try {
           await navigator.clipboard.writeText(text);
-          toast(`${what} copied`);
+          return true;
         } catch {
-          // Clipboard access needs a secure context, which a plain-http LAN
-          // deployment is not. Fall back to showing it to select by hand.
-          window.prompt(`Copy ${what}:`, text);
+          // Off-screen rather than hidden: an element with `display:none` or
+          // `visibility:hidden` cannot hold a selection, so the copy would
+          // silently do nothing.
+          const field = document.createElement('textarea');
+          field.value = text;
+          field.setAttribute('readonly', '');
+          field.style.position = 'fixed';
+          field.style.top = '-1000px';
+          document.body.append(field);
+          field.select();
+          // select() alone is not enough on iOS.
+          field.setSelectionRange(0, field.value.length);
+          try {
+            return document.execCommand('copy');
+          } catch {
+            return false;
+          } finally {
+            field.remove();
+          }
         }
       };
 
+      const copy = async (text, what) => {
+        if (await toClipboard(text)) return toast(`${what} copied`);
+        // Both ways of reaching the clipboard refused. Showing the text is the
+        // only thing left that is better than nothing.
+        window.prompt(`Copy ${what}:`, text);
+      };
+
       // ── Archives ──────────────────────────────────────────────────────────
       let archives = [];
       let selected = null;
@@ -3676,7 +3721,7 @@ Every piece is hashed against the ` +
             // torrent client, a feed reader — and following one from here
             // achieves nothing, so they copy.
             //
-            // The style URL is not printed. It is a TileJSON URL carrying a
+            // The source URL is not printed. It is a TileJSON URL carrying a
             // `.torrent` URL and a percent-encoded magnet in its fragment,
             // several hundred characters of it, and it was truncated to 96
             // here — long enough to fill the row and too short to be the
@@ -3721,14 +3766,16 @@ Every piece is hashed against the ` +
                          ${copyable(ends.magnet, 'magnet', true)}
                          ${copyable(ends.feed, 'RSS')}
                          ${copyable(ends.latestFeed, 'RSS, newest only')}
-                         ${copyable(ends.styleUrl, 'style URL')}
+                         ${copyable(ends.sourceUrl, 'source URL')}
                        </div>
                        <div class="sub" style="margin-top:0.5rem">
-                         The style URL is the TileJSON with the .torrent URL and
-                         the magnet in its fragment, which is never sent to the
-                         server — an ordinary client fetches the TileJSON and
-                         ignores them, a swarm-aware one reads them first, and
-                         both follow the category rather than this build.
+                         The source URL is the TileJSON with the .torrent URL
+                         and the magnet in its fragment, which is never sent to
+                         the server — an ordinary client fetches the TileJSON
+                         and ignores them, a swarm-aware one reads them first,
+                         and both follow the category rather than this build.
+                         It goes in a style's <code>sources</code> block; it is
+                         not itself a style.
                        </div>`
                     : '<div class="sub">not a PMTiles archive, so there is no tile endpoint</div>'
                 }
@@ -3737,15 +3784,32 @@ Every piece is hashed against the ` +
           .join('');
 
         for (const button of list.querySelectorAll('[data-copy-url]')) {
+          // The URL either way, so there is something to select by hand if
+          // both routes to the clipboard are shut.
+          button.title = button.dataset.copyUrl;
+          const label = button.textContent;
+          // Said on the button rather than in a toast: these sit in a row of
+          // seven, and which one was pressed is the thing worth confirming.
+          // The public catalogue page does the same, and the two are the same
+          // control in two places.
+          const said = (text, ok) => {
+            button.textContent = text;
+            if (ok) button.classList.add('done');
+            setTimeout(() => {
+              button.textContent = label;
+              button.classList.remove('done');
+            }, 1200);
+          };
           button.onclick = async () => {
             const url = button.dataset.copyUrl;
-            if (!button.dataset.copyFetch) return copy(url, 'URL');
             try {
               // A plain fetch, not `api`: that one parses JSON, and this
               // endpoint answers text/plain.
-              const response = await fetch(url);
-              if (!response.ok) throw new Error(response.statusText);
-              copy((await response.text()).trim(), 'magnet');
+              const value = button.dataset.copyFetch
+                ? (await (await fetch(url)).text()).trim()
+                : url;
+              const landed = await toClipboard(value);
+              said(landed ? 'copied' : 'it is in the tooltip', landed);
             } catch (error) {
               toast(error.message);
             }

package/src/web/public.html

@@ -290,6 +290,48 @@
 
       // A row of "label: copyable URL". The URLs are the point of the page, so
       // they are shown in full rather than hidden behind link text.
+      /**
+       * Puts text on the clipboard, including where there is no secure context.
+       *
+       * `navigator.clipboard` requires one. This page is usually reached over
+       * HTTPS and so usually has it — but a node answering by IP on a LAN does
+       * not, and there the button did nothing but say so. The selection API
+       * predates the clipboard API and carries no such requirement, so it
+       * works exactly where the other one fails.
+       *
+       * Deliberately duplicated in index.html rather than shared. Both pages
+       * are single files with their script inlined, and one browser shim is a
+       * poor reason to give that up.
+       * @param {string} text - What to put on the clipboard.
+       * @returns {Promise<boolean>} - Whether it landed.
+       */
+      const toClipboard = async (text) => {
+        try {
+          await navigator.clipboard.writeText(text);
+          return true;
+        } catch {
+          // Off-screen rather than hidden: an element with `display:none` or
+          // `visibility:hidden` cannot hold a selection, so the copy would
+          // silently do nothing.
+          const field = document.createElement('textarea');
+          field.value = text;
+          field.setAttribute('readonly', '');
+          field.style.position = 'fixed';
+          field.style.top = '-1000px';
+          document.body.append(field);
+          field.select();
+          // select() alone is not enough on iOS.
+          field.setSelectionRange(0, field.value.length);
+          try {
+            return document.execCommand('copy');
+          } catch {
+            return false;
+          } finally {
+            field.remove();
+          }
+        }
+      };
+
       const urlRow = (label, url) => {
         const row = el('div');
         row.append(el('span', null, label));
@@ -454,9 +496,11 @@
                 const value = fetched
                   ? (await (await fetch(absolute)).text()).trim()
                   : absolute;
-                await navigator.clipboard.writeText(value);
-                button.classList.add('done');
-                button.textContent = 'copied';
+                const landed = await toClipboard(value);
+                button.classList.toggle('done', landed);
+                button.textContent = landed
+                  ? 'copied'
+                  : 'copy failed — it is in the tooltip';
                 setTimeout(() => {
                   button.classList.remove('done');
                   button.textContent = text;
@@ -470,6 +514,11 @@
 
           const ends = entry.endpoints;
           if (ends.tileJson) copy(ends.tileJson, 'TileJSON');
+          // The XYZ template beside the document that carries it. Anything
+          // that takes a URL with braces in it rather than a TileJSON — a
+          // Leaflet layer, an OpenLayers source, a GIS client — wants this
+          // one, and it follows the category, so it survives a rebuild.
+          if (ends.xyz) copy(ends.xyz, 'XYZ');
           // The newest build's preview, which is what "show me this
           // category" means.
           if (ends.preview) add(ends.preview, 'preview');
@@ -486,7 +535,7 @@
           // URL carrying the .torrent URL and a percent-encoded magnet in its
           // fragment. Printed in full it was most of the card — several
           // hundred characters of it — and it is never read, only pasted.
-          if (ends.styleUrl) copy(ends.styleUrl, 'style URL');
+          if (ends.sourceUrl) copy(ends.sourceUrl, 'source URL');
           card.append(links);
 
           host.append(card);