pmtiles-swarm 0.45.2 → 0.47.1

package/CHANGELOG.md

@@ -7,6 +7,71 @@
 ### 🐞 Bug fixes
 - _...Add new stuff here..._
 
+## 0.47.1
+### ✨ Features and improvements
+
+### 🐞 Bug fixes
+- **The magnet button copies a magnet, not a link to one.** `/latest/<category>/magnet` answers a
+  magnet URI as `text/plain`, and both pages were copying that endpoint's own address — so what
+  landed on the clipboard was an `http://` URL, which a torrent client cannot open. The button now
+  fetches the endpoint and copies what it answers. Every other endpoint is still copied by address,
+  because for those the address is the thing.
+
+## 0.47.0
+### ✨ Features and improvements
+- **The console's Categories tab now matches the public page.** They were two views of one thing that
+  had drifted into two shapes: a label/value table with Copy and Open on every row here, links and a
+  printed style URL there, different labels for the same endpoints, and a preview link on one and not
+  the other.
+
+  Both now offer each endpoint the way it is used — `.torrent` downloads, preview opens, and
+  TileJSON, magnet, RSS and the style URL copy. The console keeps `RSS, newest only`, which is its
+  own, and gains the preview link it was missing. The style URL is no longer printed on either page:
+  here it was truncated to 96 characters, which is long enough to fill the row and too short to be
+  the thing anybody wanted.
+
+### 🐞 Bug fixes
+
+## 0.46.0
+### ✨ Features and improvements
+- **Each category endpoint on the public page is now offered the way it is used.** A `.torrent` is a
+  file, so it downloads. A preview is a page, so it opens. The rest are addresses that belong
+  somewhere else — a style, a torrent client, a feed reader — and following one here achieves
+  nothing, so TileJSON, magnet, RSS and the style URL copy instead.
+
+  The style URL is no longer 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 most of the
+  card — while being the one thing on the page nobody reads and everybody pastes. Every copy button
+  also carries its URL as a tooltip, since a browser on plain HTTP has no clipboard and a string
+  somebody can select beats a button that does nothing.
+
+### 🐞 Bug fixes
+
+## 0.45.4
+### ✨ Features and improvements
+
+### 🐞 Bug fixes
+- **URLs shown in the console name the public port, not the admin one.** The console is served by the
+  admin listener, so every address it handed out named that listener — a TileJSON URL on `:8091`, a
+  `.torrent` on `:8091`, a style URL carrying both. Those are exactly the addresses that get pasted
+  into a style, a torrent client or another node, and none of them can reach the admin port: it binds
+  to localhost by default and serves nothing public even when it does not.
+
+  Only the port is corrected, and only when it is the admin one. The host stays whatever the request
+  arrived as, so a node behind a proxy still names itself correctly without anyone setting
+  `publicUrl` — and `publicUrl` still wins outright where it is set.
+
+## 0.45.3
+### ✨ Features and improvements
+
+### 🐞 Bug fixes
+- **The Copy and Open buttons on the Categories tab no longer sit off the edge of the page.** Table
+  cells are `nowrap`, which is right for the archive list where a wrapped number is worse than a wide
+  column — but a category cell holds a style URL and a paragraph explaining it, so nothing could
+  wrap and the table grew past the window, carrying the buttons at its end out of reach. The
+  endpoints table lays out fixed now: the label and button columns keep their width and the URL takes
+  what is left.
+
 ## 0.45.2
 ### ✨ Features and improvements
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmtiles-swarm",
-  "version": "0.45.2",
+  "version": "0.47.1",
   "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

@@ -317,8 +317,27 @@ export function createApp({
     // a torrent client handed the `torrent` link, another node syncing from
     // the feed -- silently gets something it cannot use.
     const configured = String(config.publicUrl ?? '').trim();
-    const base = configured || `${req.protocol}://${req.host}`;
-    return base.replace(/\/$/, '');
+    if (configured) return configured.replace(/\/$/, '');
+
+    // Never the admin port, whichever one the request came in on.
+    //
+    // The console lives on the admin listener, so every URL it showed named
+    // that listener — a TileJSON URL on :8091, a `.torrent` on :8091, a style
+    // URL carrying both. Those are the addresses people copy into a style, a
+    // torrent client or another node, and none of them can reach the admin
+    // port: it is bound to localhost by default and serves nothing public
+    // even when it is not. Half the addresses on a node pointing somewhere
+    // the other half do not is a confusion nobody should have to diagnose.
+    //
+    // The host is still whatever the request arrived as, so a node behind a
+    // proxy keeps naming itself correctly without anybody configuring
+    // `publicUrl`. Only the port is corrected, and only when it is the one
+    // port that is not for the public.
+    const host = onAdminPort(req)
+      ? String(req.host).replace(/:\d+$/, '') +
+        (config.port ? `:${config.port}` : '')
+      : req.host;
+    return `${req.protocol}://${host}`.replace(/\/$/, '');
   };
 
   /**

package/src/web/index.html

@@ -224,6 +224,32 @@
       }
       .tag.on { background: var(--accent); color: #fff; border-color: var(--accent); }
       #add-error { color: var(--bad); min-height: 1.2rem; }
+      /* One row of endpoints per category, matching the public page. */
+      #category-list .links {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4rem 0.9rem;
+        align-items: center;
+      }
+      /* A copy button reads as a link's sibling, not as a form control. */
+      button.copy {
+        border: 1px solid var(--line);
+        border-radius: 999px;
+        background: none;
+        color: var(--muted);
+        font-size: 0.74rem;
+        padding: 0 0.45rem;
+      }
+      button.copy:hover { color: var(--fg); border-color: var(--fg); }
+      /* 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
+         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. */
+      #category-list table { table-layout: fixed; }
+      #category-list td { white-space: normal; }
+      #category-list code { word-break: break-all; }
       /* Separates what acts on one archive from what acts on all of them. */
       .bar-gap { flex: 1 1 1.5rem; min-width: 0.75rem; }
       .tabs {
@@ -3468,20 +3494,40 @@ Every piece is hashed against the ` +
         list.innerHTML = categories
           .map((entry, index) => {
             const newest = entry.newest;
-            const rows = [
-              ['TileJSON', entry.endpoints.tileJson],
-              ['For a style', entry.endpoints.styleUrl],
-              ['Torrent', entry.endpoints.torrent],
-              ['Magnet', entry.endpoints.magnet],
-              ['Feed', entry.endpoints.feed],
-              ['Latest only', entry.endpoints.latestFeed],
-            ];
+            // The same shape as the public page, and for the same reason: what
+            // an endpoint is for decides how it is offered. A `.torrent` is a
+            // file, so it downloads; a preview is a page, so it opens. The
+            // rest are addresses that belong somewhere else — a style, a
+            // 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
+            // `.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
+            // thing anybody wanted.
+            const ends = entry.endpoints;
+            const link = (url, text, download) =>
+              url
+                ? `<a href="${escapeHtml(url)}"${download ? ' download' : ' target="_blank" rel="noreferrer"'}>${text}</a>`
+                : '';
+            // `fetched` for an endpoint whose *answer* is the thing worth
+            // having rather than its address. /magnet serves a magnet URI as
+            // text/plain, and copying the URL of that handed somebody a link
+            // to a magnet instead of a magnet — which a torrent client cannot
+            // open.
+            const copyable = (url, text, fetched) =>
+              url
+                ? `<button class="copy" data-copy-url="${escapeHtml(url)}"${
+                    fetched ? ' data-copy-fetch="1"' : ''
+                  } title="${escapeHtml(url)}">${text}</button>`
+                : '';
 
             return `
               <div class="panel" style="margin-bottom:0.8rem">
                 <h2 style="margin-top:0">
                   ${escapeHtml(entry.category)}
-                  <span class="sub">· ${entry.archives} archive${entry.archives === 1 ? '' : 's'}</span>
+                  <span class="sub">· ${entry.archives} build${entry.archives === 1 ? '' : 's'}</span>
                 </h2>
                 <div class="sub" style="margin-bottom:0.6rem">
                   ${
@@ -3490,60 +3536,44 @@ Every piece is hashed against the ` +
                       : 'nothing published under this tag yet'
                   }
                 </div>
-                <table>
-                  <tbody>
-                    ${rows
-                      .map(
-                        ([label, url], row) => `
-                          <tr>
-                            <td style="width:8rem">${label}</td>
-                            <td>${
-                              url
-                                ? `<code>${escapeHtml(
-                                    url.length > 96 ? `${url.slice(0, 96)}…` : url,
-                                  )}</code>${
-                                    label === 'For a style'
-                                      ? `<div class="sub">the .torrent URL and the magnet ride in the
-                                         fragment, which is never sent to the server — an ordinary
-                                         client fetches the TileJSON and ignores them, a swarm-aware
-                                         one reads them before making any call${
-                                           // Matched unanchored because the magnet is
-                                           // percent-encoded in the fragment now that it
-                                           // shares one with the .torrent URL.
-                                           url.includes('btpk')
-                                             ? ', and both follow the category rather than this build'
-                                             : ''
-                                         }</div>`
-                                      : ''
-                                  }`
-                                : '<span class="sub">not a PMTiles archive, so there is no tile endpoint</span>'
-                            }</td>
-                            <td style="width:11rem">${
-                              url
-                                ? `<button data-copy="${index}-${row}">Copy</button>
-                                   <a href="${escapeHtml(url)}" target="_blank" rel="noreferrer"><button type="button">Open</button></a>`
-                                : ''
-                            }</td>
-                          </tr>`,
-                      )
-                      .join('')}
-                  </tbody>
-                </table>
+                ${
+                  ends.tileJson
+                    ? `<div class="links">
+                         ${copyable(ends.tileJson, 'TileJSON')}
+                         ${link(ends.preview, 'preview')}
+                         ${link(ends.torrent, '.torrent', true)}
+                         ${copyable(ends.magnet, 'magnet', true)}
+                         ${copyable(ends.feed, 'RSS')}
+                         ${copyable(ends.latestFeed, 'RSS, newest only')}
+                         ${copyable(ends.styleUrl, 'style 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.
+                       </div>`
+                    : '<div class="sub">not a PMTiles archive, so there is no tile endpoint</div>'
+                }
               </div>`;
           })
           .join('');
 
-        for (const button of list.querySelectorAll('[data-copy]')) {
-          const [index, row] = button.dataset.copy.split('-').map(Number);
-          const url = [
-            categories[index].endpoints.tileJson,
-            categories[index].endpoints.styleUrl,
-            categories[index].endpoints.torrent,
-            categories[index].endpoints.magnet,
-            categories[index].endpoints.feed,
-            categories[index].endpoints.latestFeed,
-          ][row];
-          button.onclick = () => copy(url, 'URL');
+        for (const button of list.querySelectorAll('[data-copy-url]')) {
+          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');
+            } catch (error) {
+              toast(error.message);
+            }
+          };
         }
       }
 

package/src/web/public.html

@@ -118,6 +118,19 @@
         gap: 0.35rem 0.9rem;
         font-size: 0.9rem;
       }
+      /* A copy button reads as a link's sibling, not as a form control. */
+      .copy {
+        border: 1px solid var(--line);
+        border-radius: 999px;
+        background: none;
+        color: var(--muted);
+        font: inherit;
+        font-size: 0.74rem;
+        padding: 0 0.45rem;
+        cursor: pointer;
+      }
+      .copy:hover { color: var(--fg); border-color: var(--fg); }
+      .copy.done { border-color: currentColor; color: #3fb950; }
       .urls {
         margin-top: 0.7rem;
         display: grid;
@@ -390,30 +403,62 @@
             a.href = href;
             links.append(a);
           };
+          // What each endpoint is for decides how it is offered. A .torrent
+          // is a file to fetch, so it stays a link the browser downloads; a
+          // preview is a page to visit. The rest are addresses that belong
+          // somewhere else — a style, a torrent client, a feed reader — and
+          // following one here achieves nothing, so those copy.
+          // `fetched` for an endpoint whose *answer* is the thing worth
+          // having rather than its address. /magnet serves a magnet URI as
+          // text/plain, and copying the URL of that handed somebody a link to
+          // a magnet instead of a magnet — which a torrent client cannot open.
+          const copy = (href, text, fetched) => {
+            const button = el('button', 'copy', text);
+            button.type = 'button';
+            const absolute = new URL(href, location.href).href;
+            // The URL either way: a browser on plain HTTP has no clipboard,
+            // and a tooltip somebody can select beats a button that does
+            // nothing.
+            button.title = absolute;
+            button.onclick = async () => {
+              try {
+                const value = fetched
+                  ? (await (await fetch(absolute)).text()).trim()
+                  : absolute;
+                await navigator.clipboard.writeText(value);
+                button.classList.add('done');
+                button.textContent = 'copied';
+                setTimeout(() => {
+                  button.classList.remove('done');
+                  button.textContent = text;
+                }, 1200);
+              } catch {
+                button.textContent = 'copy failed — it is in the tooltip';
+              }
+            };
+            links.append(button);
+          };
+
           const ends = entry.endpoints;
-          if (ends.tileJson) add(ends.tileJson, 'TileJSON');
+          if (ends.tileJson) copy(ends.tileJson, 'TileJSON');
           // The newest build's preview, which is what "show me this
           // category" means.
           if (ends.preview) add(ends.preview, 'preview');
-          if (ends.torrent) add(ends.torrent, '.torrent');
-          if (ends.magnet) add(ends.magnet, 'magnet');
-          if (ends.feed) add(ends.feed, 'RSS');
-          card.append(links);
-
-          const urls = el('div', 'urls');
-          // The one worth copying: the TileJSON URL with the .torrent URL and
-          // the magnet in its fragment, which a plain client fetches over HTTP
-          // and a swarm-aware one joins directly.
-          if (ends.styleUrl) {
-            urls.append(
-              urlRow('style URL', new URL(ends.styleUrl, location.href).href),
-            );
-          } else if (ends.tileJson) {
-            urls.append(
-              urlRow('TileJSON', new URL(ends.tileJson, location.href).href),
-            );
+          // A file, so a link the browser saves rather than renders.
+          if (ends.torrent) {
+            const a = el('a', null, '.torrent');
+            a.href = ends.torrent;
+            a.download = '';
+            links.append(a);
           }
-          if (urls.childElementCount > 0) card.append(urls);
+          if (ends.magnet) copy(ends.magnet, 'magnet', true);
+          if (ends.feed) copy(ends.feed, 'RSS');
+          // The one worth copying and the one nobody wants to read: a TileJSON
+          // 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');
+          card.append(links);
 
           host.append(card);
         }