droppage 0.2.0 → 0.2.2

package/README.md

@@ -49,13 +49,17 @@ Open the printed link in any browser. That's it.
 | `droppage recipients resend <slug> <email>` | Queue a fresh invitation for an existing recipient. |
 | `droppage image upload <files...> --page <slug>` | Advanced: add images (PNG, JPEG, GIF, WebP, AVIF, SVG; up to 4 MB each) to an existing page and print their URLs. `--json` prints `[{file,id,url,bytes,content_type,existing}]`. |
 | `droppage image list [--page <slug>]` | List your pages' images; with `--page`, one page and its image budget. `--json` for machines. |
-| `droppage image delete <id-or-url...>` | Delete images. Cached copies may still show for up to a day. |
+| `droppage image delete <id-or-url...>` | Delete images. They stop being served within 5 minutes; a browser that already loaded one may keep it up to a day. |
 | `droppage quota` | Show the current plan, page usage, monthly meter, reset date, and enabled features. `--json` returns the account API body. |
 | `droppage feedback <message>` | Send feedback without requiring login. Options: `--kind idea|bug|review|other`, `--agent [model]`, `--contact <email>`, review-only `--rating <1-5>` and `--allow-quote`. Quote permission never publishes automatically. |
 | `droppage upgrade` | Install the latest CLI globally with npm and report the installed version. |
 
 Run `droppage <command> --help` for full option details.
 
+Slugs from 0.2.1 on never start with `-`. If an older page's slug does (say `-AbC12xYz9`), put `--` in front of
+it, with any options before the `--`: `droppage expire -- -AbC12xYz9 never` or
+`droppage update --expires 7d -- -AbC12xYz9 report.html`. The CLI prints the same hint when it happens.
+
 ## Access modes
 
 | Upload flag | Mode | Who can open the link |
@@ -100,6 +104,9 @@ only the page URL.
 
 - `update` uploads any new local images, keeps the same URL for an unchanged image, and deletes
   the page's images the new HTML no longer uses.
+- Besides `<img src>`, the CLI picks up local images in `srcset` on `<img>`/`<source>` (every
+  candidate, descriptors kept), `<link rel="icon"|"apple-touch-icon" href>`, and `url(...)` inside
+  `<style>` blocks (0.2.2+). Not picked up: `style="..."` attributes and `.ico` files.
 - Deleting a page, or the page expiring, removes its images too. Images never outlive their page.
 - Image budget per page by plan: Free 5 MB, Starter 20 MB, Builder 50 MB. Each image up to 4 MB.
   PNG, JPEG, GIF, WebP, AVIF, SVG. Image traffic counts toward your monthly bandwidth.
@@ -128,6 +135,25 @@ its images stop working. A daily cleanup then deletes the page and its images fo
 `droppage list` shows an EXPIRES column (`never` or a date); `list --json` rows have `expires_at`
 (`null` means never).
 
+## Sharing reports and dashboards
+
+droppage is a quick way to send an analysis to people who don't have your tools: a dashboard for your
+team, a weekly KPI or stakeholder report, a client deliverable, a notebook export. They open a link.
+
+- **Export one HTML file**, up to 5 MB, with the data inside it: `jupyter nbconvert --to html
+  analysis.ipynb`, Plotly's `fig.write_html("report.html", include_plotlyjs="cdn")`, Altair's
+  `chart.save("report.html")`, or your own Chart.js / ECharts page. Scripts run, so interactive
+  charts work, and chart libraries can load from a CDN.
+- **Pages run in a sandbox**: `localStorage`, cookies, and same-origin requests are not available, so
+  keep the data in the file rather than fetching it.
+- **Pick who sees it.** `--email cfo@example.com,ops@example.com` for named people (Builder; manage
+  them later with `droppage recipients`), `--password` for a group link (Starter and Builder),
+  `--private` for a draft. On the Free plan, pages can be public or private, without a password or email list.
+- **Same link every week.** `droppage update <slug> report.html` replaces the report and keeps the
+  link and its access settings (Starter and Builder). Use `--expires 30d` for one-off deliverables.
+- **Views are people.** `droppage list --json` shows `view_count` (unique visitors) and
+  `last_viewed_at` for each report.
+
 ## For agents and scripts
 
 droppage keeps a strict stream contract so it is safe to call from automation:

package/dist/cli.js

@@ -15,7 +15,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "droppage",
-      version: "0.2.0",
+      version: "0.2.2",
       description: "Publish HTML files as shareable, access-controlled live pages",
       type: "module",
       license: "Apache-2.0",
@@ -521,6 +521,76 @@ var init_duration = __esm({
 // src/lib/html-images.ts
 import { existsSync, realpathSync, statSync } from "fs";
 import { dirname, extname, relative, resolve, sep } from "path";
+function imageSlots(html) {
+  const slots = [];
+  const attrValue = (match) => ({ start: match.index + match[1].length + 1, value: match[3] });
+  for (const match of html.matchAll(SRC_RE)) {
+    const { start, value } = attrValue(match);
+    slots.push({ start, end: start + value.length, ref: value.trim() });
+  }
+  for (const match of html.matchAll(SRCSET_RE)) {
+    const { start, value } = attrValue(match);
+    for (const url of srcsetUrls(value)) slots.push({ start: start + url.offset, end: start + url.offset + url.ref.length, ref: url.ref });
+  }
+  for (const match of html.matchAll(LINK_RE)) {
+    const tag = match[0];
+    let rel = null;
+    let href = null;
+    for (const attr of tag.matchAll(ATTR_RE)) {
+      const name = attr[1].toLowerCase();
+      const value = attr[3] ?? attr[4];
+      const end = attr.index + attr[0].length - (attr[3] === void 0 ? 0 : 1);
+      if (name === "rel") rel = value;
+      if (name === "href") href = { offset: end - value.length, value };
+    }
+    if (!rel || !href || !rel.toLowerCase().split(/\s+/).some((token) => ICON_RELS.has(token))) continue;
+    const start = match.index + href.offset;
+    slots.push({ start, end: start + href.value.length, ref: href.value.trim() });
+  }
+  for (const match of html.matchAll(STYLE_RE)) {
+    const cssStart = match.index + match[1].length;
+    const css = match[2].replace(/\/\*[\s\S]*?\*\//g, (comment) => " ".repeat(comment.length));
+    for (const url of css.matchAll(CSS_URL_RE)) {
+      const value = url[1] ?? url[2] ?? url[3];
+      const quoted = url[1] !== void 0 || url[2] !== void 0;
+      const paren = url[0].indexOf("(") + 1;
+      const open2 = paren + url[0].slice(paren).search(/\S/);
+      const start = cssStart + url.index + open2 + (quoted ? 1 : 0);
+      slots.push({ start, end: start + value.length, ref: value.trim() });
+    }
+  }
+  slots.sort((a, b) => a.start - b.start);
+  const ordered = [];
+  for (const slot of slots) {
+    if (slot.ref && (ordered.length === 0 || slot.start >= ordered[ordered.length - 1].end)) ordered.push(slot);
+  }
+  return ordered;
+}
+function srcsetUrls(value) {
+  const urls = [];
+  let i = 0;
+  while (i < value.length) {
+    while (i < value.length && (/\s/.test(value[i]) || value[i] === ",")) i++;
+    if (i >= value.length) break;
+    const start = i;
+    while (i < value.length && !/\s/.test(value[i])) i++;
+    const raw = value.slice(start, i);
+    const ref = raw.replace(/,+$/, "");
+    if (ref) urls.push({ offset: start, ref });
+    if (ref.length !== raw.length) continue;
+    let depth = 0;
+    for (; i < value.length; i++) {
+      const c = value[i];
+      if (c === "(") depth++;
+      else if (c === ")") depth = Math.max(0, depth - 1);
+      else if (c === "," && depth === 0) {
+        i++;
+        break;
+      }
+    }
+  }
+  return urls;
+}
 function inside(base, path) {
   const rel = relative(base, path);
   return !!rel && !rel.startsWith("..") && !rel.startsWith(sep) && !/^[a-z]:/i.test(rel);
@@ -534,8 +604,7 @@ function findLocalImages(html, htmlFile) {
     return [];
   }
   const seen = /* @__PURE__ */ new Map();
-  for (const match of html.matchAll(SRC_RE)) {
-    const ref = match[3].trim();
+  for (const { ref } of imageSlots(html)) {
     if (seen.has(ref) || /^(?:[a-z][a-z0-9+.-]*:|\/|\\|#)/i.test(ref)) continue;
     let decoded;
     try {
@@ -558,17 +627,29 @@ function findLocalImages(html, htmlFile) {
   return [...seen.values()];
 }
 function rewriteImageRefs(html, urls) {
-  return html.replace(SRC_RE, (whole, before, quote, ref) => {
-    const url = urls.get(ref.trim());
-    return url ? `${before}${quote}${url}${quote}` : whole;
-  });
+  let out = "";
+  let last = 0;
+  for (const slot of imageSlots(html)) {
+    const url = urls.get(slot.ref);
+    if (!url) continue;
+    out += html.slice(last, slot.start) + url;
+    last = slot.end;
+  }
+  return out + html.slice(last);
 }
-var IMAGE_EXTS, SRC_RE;
+var IMAGE_EXTS, imgAttrRe, SRC_RE, SRCSET_RE, LINK_RE, ATTR_RE, ICON_RELS, STYLE_RE, CSS_URL_RE;
 var init_html_images = __esm({
   "src/lib/html-images.ts"() {
     "use strict";
     IMAGE_EXTS = /* @__PURE__ */ new Set([".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif", ".svg"]);
-    SRC_RE = /(<(?:img|source)\b[^>]*?\ssrc\s*=\s*)(["'])([^"']+)\2/gi;
+    imgAttrRe = (name) => new RegExp(`(<(?:img|source)\\b[^>]*?\\s${name}\\s*=\\s*)(["'])([^"']+)\\2`, "gi");
+    SRC_RE = imgAttrRe("src");
+    SRCSET_RE = imgAttrRe("srcset");
+    LINK_RE = /<link\b[^>]*>/gi;
+    ATTR_RE = /\s([a-z][a-z0-9-]*)\s*=\s*(?:(["'])([^"']*)\2|([^\s"'=<>`]+))/gi;
+    ICON_RELS = /* @__PURE__ */ new Set(["icon", "apple-touch-icon", "apple-touch-icon-precomposed"]);
+    STYLE_RE = /(<style\b[^>]*>)([\s\S]*?)<\/style\s*>/gi;
+    CSS_URL_RE = /\burl\(\s*(?:"([^"\n]*)"|'([^'\n]*)'|([^\s"'()]+))\s*\)/gi;
   }
 });
 
@@ -589,6 +670,7 @@ var init_share_url = __esm({
 });
 
 // src/services/images.ts
+import { createHash } from "crypto";
 import { readFile, stat } from "fs/promises";
 import { basename } from "path";
 async function accessToken() {
@@ -668,10 +750,11 @@ async function deleteImage(idOrUrl) {
   });
   return id;
 }
-async function pruneImages(slug) {
+async function pruneImages(slug, html) {
   const body = await call(`/api/pages/${encodeURIComponent(slug)}/images/prune`, {
     method: "POST",
-    headers: { Authorization: `Bearer ${await accessToken()}` }
+    headers: { Authorization: `Bearer ${await accessToken()}`, "Content-Type": "application/json" },
+    body: JSON.stringify(html ? { html_sha256: createHash("sha256").update(html).digest("hex") } : {})
   });
   return Number(body?.removed ?? 0);
 }
@@ -714,8 +797,16 @@ async function attachLocalImages(file, slug, { html, update = false } = {}) {
 async function hasLocalImages(file) {
   return findLocalImages((await readFile2(file)).toString("utf8"), file).length > 0;
 }
-async function pruneUnusedImages(slug) {
-  return pruneImages(slug);
+async function pruneUnusedImages(slug, html) {
+  try {
+    return await pruneImages(slug, html);
+  } catch (err) {
+    if (err instanceof ImageRequestError && err.status === 409) {
+      console.error(`droppage: warning: unused images were kept (${err.message}); the next update removes them`);
+      return 0;
+    }
+    throw err;
+  }
 }
 var init_page_images = __esm({
   "src/services/page-images.ts"() {
@@ -728,15 +819,26 @@ var init_page_images = __esm({
 // src/lib/slug.ts
 import { customAlphabet } from "nanoid";
 function createSlug() {
-  return generate();
+  return first() + rest();
 }
-var SLUG_LENGTH, alphabet, generate;
+function dashSlugHint(error) {
+  const slug = DASH_SLUG_ERROR.exec(error)?.[1];
+  if (!slug) return "";
+  return `droppage: if ${slug} is a page, put -- in front of it (options go before the --), for example:
+  droppage expire -- ${slug} never
+  droppage update --expires 7d -- ${slug} report.html
+`;
+}
+var SLUG_LENGTH, alphanumeric, alphabet, first, rest, DASH_SLUG_ERROR;
 var init_slug = __esm({
   "src/lib/slug.ts"() {
     "use strict";
     SLUG_LENGTH = 10;
-    alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_-";
-    generate = customAlphabet(alphabet, SLUG_LENGTH);
+    alphanumeric = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    alphabet = `${alphanumeric}_-`;
+    first = customAlphabet(alphanumeric, 1);
+    rest = customAlphabet(alphabet, SLUG_LENGTH - 1);
+    DASH_SLUG_ERROR = new RegExp(`unknown option '(-[A-Za-z0-9_][A-Za-z0-9_-]{${SLUG_LENGTH - 2}})'`);
   }
 });
 
@@ -1145,7 +1247,7 @@ function registerUpdate(program2) {
       validateHtmlUpload(file, await readFile5(file));
       const { html } = await attachLocalImages(file, slug, { update: true });
       const result = await updatePageHtml({ slug, file, user, html });
-      const removed = await pruneUnusedImages(slug);
+      const removed = await pruneUnusedImages(slug, html);
       if (removed) console.error(`droppage: removed ${removed} image(s) the page no longer uses`);
       if (expiresAt !== void 0) {
         await setPageExpiry(slug, expiresAt);
@@ -1860,7 +1962,7 @@ function fail(err) {
   process.exitCode = 1;
 }
 function registerImage(program2) {
-  const image = program2.command("image").description("Images that belong to a page (uploaded automatically by upload/update from local <img src> files)");
+  const image = program2.command("image").description("Images that belong to a page (uploaded automatically by upload/update from local files the HTML references)");
   image.command("upload").description("Add images to one of your pages and print their URLs (PNG, JPEG, GIF, WebP, AVIF, SVG; up to 4 MB each)").argument("<files...>", "image files").requiredOption("--page <slug>", "the page the images belong to (they go when it is deleted or expires)").option("--json", "print the results as JSON").action(async (files, options) => {
     if (!await signedIn()) return;
     const results = [];
@@ -1904,7 +2006,7 @@ function registerImage(program2) {
       fail(err);
     }
   });
-  image.command("delete").description("Delete images (by id or URL); a browser that already loaded one may keep it up to a day").argument("<images...>", "image ids or URLs").action(async (ids) => {
+  image.command("delete").description("Delete images (by id or URL); they stop being served within 5 minutes; a browser that already loaded one may keep it up to a day").argument("<images...>", "image ids or URLs").action(async (ids) => {
     if (!await signedIn()) return;
     for (const value of ids) {
       try {
@@ -1934,7 +2036,7 @@ import { Command } from "commander";
 function createProgram() {
   const program2 = new Command().name("droppage").description(
     "Publish HTML files as shareable, access-controlled live pages"
-  ).version(package_default.version);
+  ).version(package_default.version).configureOutput({ outputError: (str, write) => write(str + dashSlugHint(str)) });
   registerLogin(program2);
   registerLogout(program2);
   registerUpload(program2);
@@ -1963,6 +2065,7 @@ var init_index = __esm({
     init_feedback2();
     init_upgrade();
     init_image();
+    init_slug();
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "droppage",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Publish HTML files as shareable, access-controlled live pages",
   "type": "module",
   "license": "Apache-2.0",