vowel 0.7.1 → 0.7.4

package/bin.js

@@ -2,6 +2,7 @@
 
 import fs from "node:fs/promises"
 import os from "node:os"
+import path from "node:path"
 import { intro, note, text, select, confirm, spinner, outro, box, isCancel, cancel } from "@clack/prompts"
 import { parse } from "@bomb.sh/args"
 import t from "@bomb.sh/tab"
@@ -55,6 +56,22 @@ async function removeDatabase(verbose) {
   }
 }
 
+/**
+ * Empties the buffer cache: an image's measurements and derivative list,
+ * cached by votive so a warm start doesn't decode it again. Without
+ * this, a reset still reused every image's old read. Only the `.json`
+ * results go. The `cache-key` file stays, because votive empties a
+ * folder that has no key, so removing it would discard the next
+ * launch's fresh cache. URL fetches are not cached here.
+ * @param {boolean} verbose
+ */
+async function removeBufferCache(verbose) {
+  const entries = await fs.readdir(config.cacheDirectory).catch(() => [])
+  const results = entries.filter(name => name.endsWith(".json"))
+  await Promise.all(results.map(name => fs.rm(path.join(config.cacheDirectory, name), { force: true })))
+  if (verbose) console.info(`${styleText("dim", "loading:")} ${styleText("green", results.length ? "buffer cache cleared" : "no buffer cache found")}`)
+}
+
 /** @param {boolean} verbose */
 async function removeOutput(verbose) {
   try {
@@ -290,6 +307,7 @@ async function main() {
 
   if (shouldClear(args)) {
     await removeDatabase(args.logging === "verbose")
+    await removeBufferCache(args.logging === "verbose")
     await removeOutput(args.logging === "verbose")
   }
   await fs.mkdir(config.targetFolder, { recursive: true })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vowel",
   "type": "module",
-  "version": "0.7.1",
+  "version": "0.7.4",
   "engines": {
     "node": ">=26"
   },
@@ -67,8 +67,7 @@
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "unpic": "^4.2.2",
-    "url-metadata": "^5.4.1",
-    "votive": "0.5.2",
+    "votive": "0.5",
     "xml": "^1.0.1",
     "yaml": "^2.8.2"
   },

package/plugins/atproto/body.js

@@ -5,6 +5,7 @@ import { gfmFootnoteToMarkdown } from "mdast-util-gfm-footnote"
 import { gfmTaskListItemToMarkdown } from "mdast-util-gfm-task-list-item"
 import { toText } from "hast-util-to-text"
 import { emojiFor } from "../markdown/emoji.js"
+import { alertLabel } from "../html/editor/directives.js"
 
 /**
  * A page's body as a record carries it, from the rendered
@@ -17,7 +18,8 @@ import { emojiFor } from "../markdown/emoji.js"
  *   and footnotes vowel itself reads. Links and images are absolute; an
  *   image links to its copy on the site. An icon is its emoji, or its
  *   shortcode as text. A listing is a list of links. A hashtag is a link
- *   whose text keeps its `#`. No title: it is outside the section.
+ *   whose text keeps its `#`. An alert is GFM's (`> [!NOTE]`). No
+ *   title: it is outside the section.
  * - **Rich text** (`richTextBody`), for a `text` field with `facets`
  *   beside it: plain text, and a facet for each link, hashtag and mark
  *   the lexicon has a feature for. The rest is dropped, images included.
@@ -113,7 +115,9 @@ function phrase(node, base) {
   }
   if (tag === "picture") {
     const img = (node.children ?? []).find(child => is(child, "img"))
-    const src = node.properties?.dataOriginal ?? img?.properties?.src
+    // The <img>'s src is the largest derivative in the image's own
+    // format; the original is not published (plugins/images).
+    const src = img?.properties?.src
     return src ? [{ type: "image", url: absolute(String(src), base), alt: String(img?.properties?.alt ?? "") }] : []
   }
   if (tag === "a") {
@@ -179,7 +183,8 @@ function block(node, base) {
   if (/^h[1-6]$/.test(tag)) return [{ type: "heading", depth: Number(tag[1]), children: trimPhrasing(phrasing(node.children ?? [], base)) }]
   if (tag === "hr") return [{ type: "thematicBreak" }]
   if (tag === "picture") return [paragraph([node], base)]
-  if (tag === "blockquote" || hasClass(node, "markdown-alert")) return [{ type: "blockquote", children: blocks(node.children ?? [], base) }]
+  if (tag === "aside" && hasClass(node, "alert")) return [alert(node, base)]
+  if (tag === "blockquote") return [{ type: "blockquote", children: blocks(node.children ?? [], base) }]
   if (tag === "pre") {
     const code = (node.children ?? []).find(child => is(child, "code")) ?? node
     const language = classes(code).find(name => name.startsWith("language-"))?.slice("language-".length)
@@ -191,6 +196,30 @@ function block(node, base) {
   return blocks(node.children ?? [], base)
 }
 
+/**
+ * An alert, `<aside class="alert note">` with its heading first, back in
+ * GFM's form: `> [!NOTE]`, then the text on the next line. A heading the
+ * author wrote stays on the marker's line (`> [!NOTE] How to render`,
+ * Obsidian's title, which vowel reads too); the default one, the type in
+ * sentence case, is left off. The marker is raw `html` so that it is
+ * not escaped as a link reference.
+ * @param {any} node
+ * @param {string} base
+ */
+function alert(node, base) {
+  const type = classes(node).find(name => name !== "alert") ?? "note"
+  const [first, ...rest] = (node.children ?? []).filter(child => child.type === "element")
+  const hasHeading = /^h[1-6]$/.test(first?.tagName ?? "")
+  const title = hasHeading && toText(first).trim() !== alertLabel(type) ? trimPhrasing(phrasing(first.children ?? [], base)) : []
+  const marker = [{ type: "html", value: `[!${type.toUpperCase()}]` }, ...(title.length ? [{ type: "text", value: " " }, ...title] : [])]
+  const body = blocks(hasHeading ? rest : [first, ...rest].filter(child => child), base)
+  const [lead, ...after] = body
+  const children = lead?.type === "paragraph"
+    ? [{ ...lead, children: [...marker, { type: "text", value: "\n" }, ...lead.children] }, ...after]
+    : [{ type: "paragraph", children: marker }, ...body]
+  return { type: "blockquote", children }
+}
+
 /** @param {any} node @param {string} base */
 function list(node, base) {
   const items = (node.children ?? []).filter(child => is(child, "li"))

package/plugins/atproto/publish.js

@@ -11,6 +11,8 @@ import { PUBLICATION, siteOrigin, publicationURI, pageRecordURI } from "./record
 import { createLexiconResolver, resolvePDS } from "./lexicons.js"
 import { mapRecord } from "./mapper.js"
 import { markdownBody, richTextBody } from "./body.js"
+import { imageURL } from "../html/image.js"
+import { imageSizes } from "../../utils.js"
 
 /**
  * `vowel --command atproto-publish`: make the account's records match the
@@ -267,7 +269,9 @@ function recordPages(database) {
  * its status, and what mapper.js reads - the site's own settings, and
  * the publication's name, description and icon. The icon is read from
  * the build's output - it is a URL path from the root (frontmatter.js
- * resolves it), which is where the output has it. Built into a scratch
+ * resolves it), which is where the output has it; a png or jpeg is read
+ * from its largest derivative, since the original is not published
+ * (plugins/images). Built into a scratch
  * folder that is removed afterwards.
  * @param {import("votive").VotiveConfig} config
  */
@@ -306,7 +310,9 @@ async function collectPages(config) {
       const home = site.database.target.get("index.html")
       const name = root.raw("fm_name")?.[0]?.at(-1) ?? (home?.source ? home.metadata.title : undefined)
       const iconPath = settings.icon ?? root.lastNonNull("logo")
-      const icon = iconPath ? await readIcon(path.join(scratch, "output"), iconPath) : undefined
+      // imageURL asks an api for the target; the database answers the same.
+      const builtIcon = imageURL(iconPath, { target: (targetPath) => site.database.target.get(targetPath) }, imageSizes.at(-1))
+      const icon = builtIcon ? await readIcon(path.join(scratch, "output"), builtIcon) : undefined
       const publication = { name, description: settings.description, iconPath, icon }
       return { did, pds, domain, pages, publication }
     } finally {

package/plugins/html/bundle/index.js

@@ -20156,7 +20156,7 @@ ${fallback_html}`;
 	  const tag = element.tagName;
 	  if (tag === "P") {
 	    const picture = pictureIn(element);
-	    if (picture && !element.textContent.trim()) return imageFrom(picture, null, element, context)
+	    if (picture && !element.textContent.trim()) return imageFrom(context)
 	    return context.create({
 	      type: "paragraph",
 	      content: textValue(element, context)
@@ -20224,29 +20224,17 @@ ${fallback_html}`;
 	  }
 	  if (tag === "FIGURE") {
 	    const picture = pictureIn(element);
-	    const caption = element.querySelector("figcaption");
-	    if (picture) return imageFrom(picture, caption, element, context)
+	    if (picture) return imageFrom(context)
 	  }
 	  if (tag === "PICTURE") {
-	    return imageFrom(element, null, element, context)
+	    return imageFrom(context)
 	  }
 	  context.unrecognised.push(tag.toLowerCase() + (element.className ? `.${element.className}` : ""));
 	  return null
 	}
-	function imageFrom(picture, caption, outer, context) {
-	  const img = picture.querySelector("img");
-	  const source = picture.getAttribute("data-original");
-	  if (!source) {
-	    context.unrecognised.push("picture (no data-original)");
-	    return null
-	  }
-	  return context.create({
-	    type: "image",
-	    source,
-	    alt: img ? (img.getAttribute("alt") || "") : "",
-	    caption: caption ? caption.textContent : "",
-	    html: outer.outerHTML
-	  })
+	function imageFrom(context) {
+	  context.unrecognised.push("picture");
+	  return null
 	}
 	function ingest(contentElement, generateId) {
 	  const nodes = {};
@@ -20989,28 +20977,42 @@ ${fallback_html}`;
 	  }, {})
 	}
 	function naturalLine(element) {
+	  if (element.tagName === "FIGURE") return figureLine(element)
 	  const property = element.getAttribute("itemprop");
 	  if (property === "date") return element.textContent.trim()
 	  if (property === "description") return `${element.textContent.trim()}\n\n---`
 	  if (property !== "image") return null
-	  const img = element.tagName === "IMG" ? element : element.querySelector("img");
-	  const source = element.getAttribute("data-original") ?? img?.getAttribute("src");
-	  return source ? `![${img?.getAttribute("alt") ?? ""}](${source})` : null
+	  if (element.tagName !== "IMG") return null
+	  const source = element.getAttribute("src");
+	  return source ? `![${element.getAttribute("alt") ?? ""}](${source})` : null
+	}
+	function figureLine(figure) {
+	  const image = figure.querySelector(":scope > [itemprop=image]");
+	  const line = image ? naturalLine(image) : null;
+	  if (!line) return null
+	  const caption = figure.querySelector(":scope > figcaption")?.textContent.trim();
+	  return caption ? `${line} ${caption}` : line
+	}
+	function isNatural(child) {
+	  if ([...child.classList].some(name => name.startsWith("fm_"))) return false
+	  if (child.hasAttribute("itemprop")) return true
+	  return child.tagName === "FIGURE" && Boolean(child.querySelector(":scope > [itemprop=image]"))
 	}
 	function readFrontmatter(main) {
 	  const children = [...main.children];
 	  const declared = (key) => (child) => child.classList.contains(`fm_${key}`);
 	  const heading = children.find(child => child.tagName === "H1");
 	  const date = children.find(declared("date"));
-	  const image = children.find(declared("image"));
 	  const description = children.find(declared("description"));
-	  const natural = children
-	    .filter(child => child.hasAttribute("itemprop") && ![...child.classList].some(name => name.startsWith("fm_")))
+	  const naturalChildren = children.filter(isNatural);
+	  const natural = naturalChildren
 	    .map(naturalLine)
 	    .filter(Boolean);
+	  const unrecognised = naturalChildren
+	    .filter(child => child.tagName === "PICTURE" || child.querySelector("picture"))
+	    .map(() => "picture");
 	  const known = {
 	    ...(date ? { date: dateFrom(date) } : {}),
-	    ...(image ? { image: image.getAttribute("data-original") } : {}),
 	    ...(description ? { description: description.textContent.trim() } : {})
 	  };
 	  const generic = children
@@ -21020,7 +21022,8 @@ ${fallback_html}`;
 	    title: heading ? heading.textContent.trim() : null,
 	    titleDeclared: Boolean(heading?.classList.contains("fm_title")),
 	    properties: { ...known, ...generic },
-	    natural: natural.length ? `${natural.join("\n\n")}\n\n` : ""
+	    natural: natural.length ? `${natural.join("\n\n")}\n\n` : "",
+	    unrecognised
 	  }
 	}
 
@@ -21044,7 +21047,10 @@ ${fallback_html}`;
 	  socket.addEventListener('message', e => {
 	    if (!isOpen()) return
 	    const target = JSON.parse(e.data);
-	    if (target.extension !== ".html") return
+	    if (target.extension !== ".html") {
+	      retryImages("/" + target.path);
+	      return
+	    }
 	    const regex = new RegExp(window.location.pathname + "(index)?(\\.html)");
 	    if (!("/" + target.path).match(regex)) return
 	    updateFromTarget(target);
@@ -21131,6 +21137,19 @@ ${fallback_html}`;
 	    if (!produced.has(keyOf(element)) && wasProduced(element)) element.remove();
 	  }
 	}
+	function retryImages(url) {
+	  const failed = [...document.images].filter(img => img.complete && img.naturalWidth === 0);
+	  const elements = failed.map(img => img.parentElement?.tagName === "PICTURE" ? img.parentElement : img);
+	  const naming = elements.filter(element => urlsOf(element).includes(url));
+	  for (const element of naming) element.replaceWith(element.cloneNode(true));
+	}
+	function urlsOf(element) {
+	  const nodes = [element, ...element.querySelectorAll("source, img")];
+	  return nodes.flatMap(node => {
+	    const candidates = (node.getAttribute("srcset") ?? "").split(",").map(candidate => candidate.trim().split(/\s+/)[0]);
+	    return [node.getAttribute("src"), ...candidates].filter(Boolean)
+	  })
+	}
 	function wasProduced(element) {
 	  if (element.tagName === "SCRIPT") return false
 	  if (element.hasAttribute("data-vowel-client")) return false
@@ -21139,7 +21158,7 @@ ${fallback_html}`;
 
 	openSocket();
 	const content = document.getElementById("content");
-	const noFrontmatter = { title: null, properties: {} };
+	const noFrontmatter = { title: null, properties: {}, unrecognised: [] };
 	function startEditing() {
 	  const { session, unrecognised } = create_session(content);
 	  if (!session) {
@@ -21151,6 +21170,10 @@ ${fallback_html}`;
 	  }
 	  const main = content.closest("main");
 	  const frontmatter = main ? readFrontmatter(main) : noFrontmatter;
+	  if (frontmatter.unrecognised.length) {
+	    console.warn("[vowel] editor stayed read-only: <main> holds natural metadata it can't write back:", frontmatter.unrecognised);
+	    return frontmatter.unrecognised
+	  }
 	  content.replaceChildren();
 	  mount(Editor, { target: content, props: { session, frontmatter } });
 	  document.documentElement.dataset.vowelEditing = "true";

package/plugins/html/editor/frontmatter.js

@@ -77,20 +77,49 @@ function objectFrom(list) {
  * @returns {string|null}
  */
 function naturalLine(element) {
+  if (element.tagName === "FIGURE") return figureLine(element)
   const property = element.getAttribute("itemprop")
   if (property === "date") return element.textContent.trim()
   if (property === "description") return `${element.textContent.trim()}\n\n---`
   if (property !== "image") return null
 
-  // A <picture>, or a plain <img> until the image has been read.
-  const img = element.tagName === "IMG" ? element : element.querySelector("img")
-  const source = element.getAttribute("data-original") ?? img?.getAttribute("src")
-  return source ? `![${img?.getAttribute("alt") ?? ""}](${source})` : null
+  // A plain <img> links the path as written. A <picture> names only its
+  // derivatives, so it can't be written back, and readFrontmatter
+  // reports it.
+  if (element.tagName !== "IMG") return null
+  const source = element.getAttribute("src")
+  return source ? `![${element.getAttribute("alt") ?? ""}](${source})` : null
+}
+
+/**
+ * A captioned image, back as the image and its caption on one line. The
+ * caption's inline marks are flattened to its text, as a description's
+ * are and as ingest does for a captioned image in the content.
+ * @param {Element} figure
+ * @returns {string|null}
+ */
+function figureLine(figure) {
+  const image = figure.querySelector(":scope > [itemprop=image]")
+  const line = image ? naturalLine(image) : null
+  if (!line) return null
+  const caption = figure.querySelector(":scope > figcaption")?.textContent.trim()
+  return caption ? `${line} ${caption}` : line
+}
+
+/**
+ * A captioned image carries its itemprop on the image inside its
+ * <figure>, so the figure is natural metadata when that image is.
+ * @param {Element} child - of <main>
+ */
+function isNatural(child) {
+  if ([...child.classList].some(name => name.startsWith("fm_"))) return false
+  if (child.hasAttribute("itemprop")) return true
+  return child.tagName === "FIGURE" && Boolean(child.querySelector(":scope > [itemprop=image]"))
 }
 
 /**
  * @param {Element} main
- * @returns {{title: string|null, titleDeclared: boolean, properties: object, natural: string}}
+ * @returns {{title: string|null, titleDeclared: boolean, properties: object, natural: string, unrecognised: string[]}}
  */
 export default function readFrontmatter(main) {
   const children = [...main.children]
@@ -98,17 +127,21 @@ export default function readFrontmatter(main) {
 
   const heading = children.find(child => child.tagName === "H1")
   const date = children.find(declared("date"))
-  const image = children.find(declared("image"))
   const description = children.find(declared("description"))
 
-  const natural = children
-    .filter(child => child.hasAttribute("itemprop") && ![...child.classList].some(name => name.startsWith("fm_")))
+  const naturalChildren = children.filter(isNatural)
+  const natural = naturalChildren
     .map(naturalLine)
     .filter(Boolean)
+  // A natural image that is a <picture> can't be written back
+  // (naturalLine), so the page stays read-only rather than losing the
+  // line on save.
+  const unrecognised = naturalChildren
+    .filter(child => child.tagName === "PICTURE" || child.querySelector("picture"))
+    .map(() => "picture")
 
   const known = {
     ...(date ? { date: dateFrom(date) } : {}),
-    ...(image ? { image: image.getAttribute("data-original") } : {}),
     ...(description ? { description: description.textContent.trim() } : {})
   }
 
@@ -123,6 +156,7 @@ export default function readFrontmatter(main) {
     title: heading ? heading.textContent.trim() : null,
     titleDeclared: Boolean(heading?.classList.contains("fm_title")),
     properties: { ...known, ...generic },
-    natural: natural.length ? `${natural.join("\n\n")}\n\n` : ""
+    natural: natural.length ? `${natural.join("\n\n")}\n\n` : "",
+    unrecognised
   }
 }

package/plugins/html/editor/ingest.js

@@ -185,7 +185,7 @@ function blockFrom(element, context) {
     // The image transform replaces an <img> in place, so a paragraph whose
     // only element is a <picture> is an image block, not prose.
     const picture = pictureIn(element)
-    if (picture && !element.textContent.trim()) return imageFrom(picture, null, element, context)
+    if (picture && !element.textContent.trim()) return imageFrom(context)
 
     return context.create({
       type: "paragraph",
@@ -274,12 +274,11 @@ function blockFrom(element, context) {
 
   if (tag === "FIGURE") {
     const picture = pictureIn(element)
-    const caption = element.querySelector("figcaption")
-    if (picture) return imageFrom(picture, caption, element, context)
+    if (picture) return imageFrom(context)
   }
 
   if (tag === "PICTURE") {
-    return imageFrom(element, null, element, context)
+    return imageFrom(context)
   }
 
   context.unrecognised.push(tag.toLowerCase() + (element.className ? `.${element.className}` : ""))
@@ -287,26 +286,14 @@ function blockFrom(element, context) {
 }
 
 /**
- * @param {Element} picture
- * @param {Element|null} caption
- * @param {Element} outer the element whose markup is kept for rendering
+ * An image can't be edited yet. Its <picture> names only the image's
+ * derivatives, and the path the author wrote is not in the page (per
+ * Sam, the output carries no data-original for the editor), so a save
+ * could only guess it. It is reported, which leaves the page read-only.
  */
-function imageFrom(picture, caption, outer, context) {
-  const img = picture.querySelector("img")
-  const source = picture.getAttribute("data-original")
-
-  if (!source) {
-    context.unrecognised.push("picture (no data-original)")
-    return null
-  }
-
-  return context.create({
-    type: "image",
-    source,
-    alt: img ? (img.getAttribute("alt") || "") : "",
-    caption: caption ? caption.textContent : "",
-    html: outer.outerHTML
-  })
+function imageFrom(context) {
+  context.unrecognised.push("picture")
+  return null
 }
 
 /**

package/plugins/html/editor/main.js

@@ -15,7 +15,7 @@ openSocket()
 // document's source of truth (see ingest.js).
 const content = document.getElementById("content")
 
-const noFrontmatter = { title: null, properties: {} }
+const noFrontmatter = { title: null, properties: {}, unrecognised: [] }
 
 /**
  * Swaps the server-rendered body for the editor. A previewed page runs
@@ -50,6 +50,10 @@ function startEditing() {
   // them is what lets a save reproduce the whole file.
   const main = content.closest("main")
   const frontmatter = main ? readFrontmatter(main) : noFrontmatter
+  if (frontmatter.unrecognised.length) {
+    console.warn("[vowel] editor stayed read-only: <main> holds natural metadata it can't write back:", frontmatter.unrecognised)
+    return frontmatter.unrecognised
+  }
 
   // Svedit renders the document itself rather than hydrating over the
   // server output, so the original children go before it mounts.

package/plugins/html/editor/socket.js

@@ -51,10 +51,12 @@ export default function openSocket() {
 
     const target = JSON.parse(e.data)
 
-    // Nothing here knows what a non-html target should do on change yet -
-    // that's each content type's own concern to add, same as html's own
-    // patch logic below isn't generic.
-    if (target.extension !== ".html") return
+    // A file that isn't a page can only matter to this page as something
+    // it loads: an image the page named before its file existed.
+    if (target.extension !== ".html") {
+      retryImages("/" + target.path)
+      return
+    }
 
     const regex = new RegExp(window.location.pathname + "(index)?(\\.html)")
     if (!("/" + target.path).match(regex)) return
@@ -185,6 +187,34 @@ function patchBody(body, nextBody) {
   }
 }
 
+/**
+ * A page can arrive before the image files it names: an image's
+ * derivatives are encoded after the page is written, and a browser never
+ * asks again for an image that failed. When a file lands, every image
+ * that failed and names it is replaced with a copy of itself, which
+ * asks again. A <picture> is copied whole, so its <source>s are chosen
+ * from again too.
+ * @param {string} url - the file's url, from the root
+ */
+function retryImages(url) {
+  const failed = [...document.images].filter(img => img.complete && img.naturalWidth === 0)
+  const elements = failed.map(img => img.parentElement?.tagName === "PICTURE" ? img.parentElement : img)
+  const naming = elements.filter(element => urlsOf(element).includes(url))
+  for (const element of naming) element.replaceWith(element.cloneNode(true))
+}
+
+/**
+ * Every url an <img> or a <picture> could load.
+ * @param {Element} element
+ */
+function urlsOf(element) {
+  const nodes = [element, ...element.querySelectorAll("source, img")]
+  return nodes.flatMap(node => {
+    const candidates = (node.getAttribute("srcset") ?? "").split(",").map(candidate => candidate.trim().split(/\s+/)[0])
+    return [node.getAttribute("src"), ...candidates].filter(Boolean)
+  })
+}
+
 /**
  * The client adds elements that aren't the build's: the editor's own
  * <script type="module">, and whatever Svelte mounts into the body (the