vowel 0.7.1-beta.0 → 0.7.3

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

package/plugins/html/image.js

@@ -1,10 +1,71 @@
-import { testURL, createImagePaths, imageSizes, imageExts } from "./../../utils.js"
+import { testURL, imageSizes, imageExts } from "./../../utils.js"
 import path from "node:path"
 import { h } from 'hastscript'
 import * as unpic from "unpic"
 
 /** @import * as Votive from "votive" */
 
+/**
+ * The image target a path names, from the root. Lowercased: every vowel
+ * target path is (config.js's router), and the author may well have
+ * typed the file's real name.
+ * @param {string} imagePath
+ * @param {import("votive").PluginAPI} api
+ */
+function findImage(imagePath, api) {
+  const relativePath = (imagePath.startsWith("/") ? path.relative("/", imagePath) : imagePath).toLowerCase()
+  return api.target(relativePath)
+}
+
+/**
+ * The derivative to link where one file goes rather than a srcset: in
+ * the image's own format, at `size` (one of imageSizes). Undefined for
+ * an image without derivatives (plugins/images: a format that isn't
+ * optimised, the root favicon.png, or an image not read yet).
+ * @param {any} image - the image's target
+ * @param {number} size
+ */
+function derivativeURL(image, size) {
+  const format = path.extname(image.path).slice(1)
+  const derivative = image.metadata?.derivatives?.find(entry => entry.format === format && entry.size === size)
+  if (!derivative) return
+  return "/" + derivative.path
+}
+
+/**
+ * The url to put where an image path goes as one file - og:image, the
+ * logo, an icon. A png or jpeg is not published at full size
+ * (plugins/images), so the path names a derivative; anything else, an
+ * external url included, is returned as it is. A tracked read, so the
+ * page is rewritten when the image is read or changes.
+ * @param {string | undefined} imagePath - from the root
+ * @param {import("votive").PluginAPI} api
+ * @param {number} size - one of imageSizes
+ */
+function imageURL(imagePath, api, size) {
+  if (!imagePath || testURL(imagePath) || !/\.(png|jpe?g)$/i.test(imagePath)) return imagePath
+  const image = findImage(imagePath, api)
+  if (!image) return imagePath
+  return derivativeURL(image, size) ?? imagePath
+}
+
+/**
+ * The page image's dominant colour as a style for the element that
+ * holds it - a page's <main>, a card's <article> - so CSS outside the
+ * image can use it (text that contrasts with it, say). The <picture>
+ * carries it too, for its own placeholder. Nothing here decides that
+ * anything should use it. Undefined for no image, an external one, or
+ * one not read yet.
+ * @param {string | undefined} imagePath - from the root
+ * @param {import("votive").PluginAPI} api
+ */
+function dominantStyle(imagePath, api) {
+  if (!imagePath || testURL(imagePath)) return
+  const dominant = findImage(imagePath, api)?.metadata.dominant
+  if (!dominant) return
+  return `--color-image-dominant: ${dominant}`
+}
+
 /**
  * @param {string} imagePath
  * @param {import("votive").PluginAPI} api
@@ -45,42 +106,39 @@ function createDynamicImage(imagePath, api, alt, itemprop) {
         })
       })
 
-      // The derivative paths in srcset are hash-based, so the original asset
-  // path cannot be recovered from them. Carried here rather than as a
-  // <source>, which is a loading candidate a browser could select.
-  return h("picture", { itemprop: itemprop && "image", "data-original": imagePath }, sources)
+      return h("picture", { itemprop: itemprop && "image" }, sources)
     }
   }
 
   if (!isImg) return
 
-  // Lowercased: every vowel target path is (config.js's router), and
-  // the author may well have typed the file's real name.
-  const relativePath = (imagePath.startsWith("/") ? path.relative("/", imagePath) : imagePath).toLowerCase()
-  const image = api.target(relativePath)
+  const image = findImage(imagePath, api)
   if (!image) return
-  // Until the image has been read (a deferred buffer read) it has no
-  // hash and no derivatives; a plain <img> stands in, and the tracked
-  // read of `hash` rewrites this page when they arrive. Derivatives are
-  // named from the *target* path, as the images processor declares them.
-  if (!image.metadata.hash) return h("img", { src: "/" + image.path, alt, loading: "lazy" })
-  const formats = createImagePaths(image.path, "./", image.metadata.hash)
+  // An image without derivatives is published as it is (the root
+  // favicon.png), and a plain <img> links it. The tracked read of
+  // `derivatives` rewrites this page if they arrive.
+  const { derivatives } = image.metadata
+  if (!derivatives) return h("img", { src: "/" + image.path, alt, loading: "lazy" })
+  // One group per format, in the order the read lists them, which is
+  // <picture> order: avif, webp, then the image's own format as the <img>.
+  const formats = [...new Set(derivatives.map(entry => entry.format))]
+    .map(format => derivatives.filter(entry => entry.format === format))
 
   // Intrinsic size, measured at read (plugins/images): the browser
   // reserves the right box before the bytes arrive, and the reset's
   // `img { height: auto }` keeps the ratio when the width is capped.
-  const { width, height, dominant } = image.metadata
+  const { width, height, dominant, placeholder } = image.metadata
 
   const sources = formats.map((format, index) => {
     const isImg = index === formats.length - 1
 
-    const sizes = format.map((size, index) => `/${size} ${imageSizes[index]}w`).join(", ")
-    const type = "image/" + path.extname(format[0]).slice(1)
+    const sizes = format.map(entry => `/${entry.path} ${entry.size}w`).join(", ")
+    const type = "image/" + format[0].format
     return h(isImg ? "img" : "source", {
       type,
       srcset: sizes,
       loading: isImg && "lazy",
-      src: isImg && "/" + format.at(-1),
+      src: isImg && "/" + format.at(-1).path,
       sizes: "100vw",
       width: isImg && width,
       height: isImg && height,
@@ -88,17 +146,20 @@ function createDynamicImage(imagePath, api, alt, itemprop) {
     })
   })
 
-  // The derivative paths in srcset are hash-based, so the original asset
-  // path cannot be recovered from them. Carried here rather than as a
-  // <source>, which is a loading candidate a browser could select.
-  // --dominant is the image's dominant colour, for a stylesheet to use
-  // as the placeholder behind a lazy image (`picture { background:
-  // var(--dominant) }`); nothing here decides that it should.
+  // Two values for a stylesheet to show behind the image while it loads:
+  // its dominant colour, and a tiny blurry copy (plugins/images; none
+  // for an image with transparency). Nothing here decides that it should.
+  const style = [
+    dominant && `--color-image-dominant: ${dominant}`,
+    // Unquoted: base64 has no character url() needs quoted, and the
+    // minifier would spell each quote as `&#34`.
+    placeholder && `--url-image-placeholder: url(${placeholder})`
+  ].filter(Boolean).join("; ")
   return h("picture", {
     itemprop: itemprop && "image",
-    "data-original": imagePath,
-    style: dominant && `--dominant: ${dominant}`
+    style: style || undefined
   }, sources)
 }
 
+export { dominantStyle, imageURL, derivativeURL }
 export default createDynamicImage