@rathnasgala2/template 3.0.1 → 3.2.0

package/src/core/internal/appearance/base-layer.js

@@ -524,6 +524,7 @@ export const GALA_BASE_COMPONENT_CSS = `
   .g-article-head h1 { font-size: clamp(2.25rem, 1.2rem + 3.8vw, var(--gala-display-max)); }
   .g-article-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--gala-space-4); width: 100%; padding-top: 1.1rem; border-top: var(--gala-border-width) solid var(--gala-color-border); flex-wrap: wrap; }
   .g-share { display: flex; gap: var(--gala-space-1); }
+  [data-gala-slot="edition-selector"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gala-space-2); min-width: 0; max-width: 100%; }
   .g-article-cover { margin-block: 0; }
   .g-article-cover img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--gala-radius-large); border: var(--gala-border-card); box-shadow: var(--gala-shadow-card); filter: var(--gala-media-filter); }
   .g-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--gala-content-measure)) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(2rem, 5vw, 3.5rem) var(--gala-space-4); }
@@ -654,6 +655,83 @@ export const GALA_BASE_COMPONENT_CSS = `
   [aria-selected="true"] > .g-search-hit > .g-icon { opacity: 1; color: var(--gala-color-accent); }
   .g-search-empty { padding: var(--gala-space-6) var(--gala-space-4); color: var(--gala-color-text-muted); font-family: var(--gala-font-ui); text-align: center; }
 
+  /* reader interactions: server-rendered section and the classes the browser script creates */
+  .g-interactions { display: grid; gap: var(--gala-space-4); min-width: 0; padding: var(--gala-space-6); border-radius: var(--gala-radius-large); background: var(--gala-color-surface); border: var(--gala-border-card); font-family: var(--gala-font-ui); }
+  .g-interactions__title { font-family: var(--gala-font-display); font-weight: var(--gala-weight-title); font-size: 1.25rem; letter-spacing: var(--gala-tracking-title); text-transform: var(--gala-title-transform); line-height: 1.2; }
+  .g-interactions__notice, .g-interactions__status { font-size: .875rem; color: var(--gala-color-text-muted); overflow-wrap: anywhere; }
+  .g-interactions__status:empty { display: none; }
+  .g-interactions__signout { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--gala-color-link); text-decoration: underline; text-underline-offset: var(--gala-link-offset); cursor: pointer; }
+  .g-interactions__signout:hover { color: var(--gala-color-text); }
+  .g-reactions { display: flex; flex-wrap: wrap; gap: var(--gala-space-2); }
+  .g-reaction {
+    display: inline-flex; align-items: center; gap: .5em; min-height: 2.75rem; max-width: 100%; padding: .45rem .95rem;
+    border-radius: var(--gala-radius-pill); border: var(--gala-border-width) solid var(--gala-color-border); background: var(--gala-color-canvas); color: var(--gala-color-text-muted);
+    font-family: var(--gala-font-ui); font-weight: var(--gala-weight-ui); font-size: .9rem; line-height: 1.2; cursor: pointer;
+    transition: transform var(--gala-duration-fast) var(--gala-ease-standard), border-color var(--gala-duration-fast) var(--gala-ease-standard), color var(--gala-duration-fast) var(--gala-ease-standard), background-color var(--gala-duration-fast) var(--gala-ease-standard);
+  }
+  .g-reaction:hover:not(:disabled) { border-color: var(--gala-color-text); color: var(--gala-color-text); }
+  .g-reaction:active:not(:disabled) { transform: scale(.96); }
+  .g-reaction:disabled { opacity: .55; cursor: default; }
+  .g-reaction__icon { display: inline-grid; place-items: center; font-size: 1.1rem; line-height: 1; }
+  .g-reaction__icon .g-icon { width: 1.15rem; height: 1.15rem; }
+  .g-reaction__label { overflow-wrap: anywhere; }
+  .g-reaction__count { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--gala-color-text-faint); padding-left: var(--gala-space-2); border-left: var(--gala-border-width) solid var(--gala-color-border); }
+  .g-reaction__count:empty { display: none; }
+  .g-reaction[aria-pressed="true"], .g-reaction--active { border-color: var(--gala-color-accent); background: var(--gala-paint-chip); color: var(--gala-color-chip-text); }
+  .g-reaction[aria-pressed="true"] .g-icon, .g-reaction--active .g-icon { fill: currentColor; color: var(--gala-color-accent); }
+  .g-comments { display: grid; gap: var(--gala-space-4); min-width: 0; padding-top: var(--gala-space-4); border-top: var(--gala-border-width) solid var(--gala-color-border); }
+  .g-comments__title { font-family: var(--gala-font-display); font-weight: var(--gala-weight-title); font-size: 1.05rem; }
+  .g-comments__count { font-family: var(--gala-font-ui); font-weight: var(--gala-weight-normal); font-size: .875rem; color: var(--gala-color-text-faint); font-variant-numeric: tabular-nums; }
+  .g-comments__more {
+    justify-self: start; min-height: 2.75rem; padding: .5rem 1.1rem; border-radius: var(--gala-radius-pill); border: var(--gala-border-width) solid var(--gala-color-border); background: transparent; color: var(--gala-color-text);
+    font-family: var(--gala-font-ui); font-weight: var(--gala-weight-ui); font-size: .9rem; cursor: pointer;
+    transition: border-color var(--gala-duration-fast) var(--gala-ease-standard), transform var(--gala-duration-fast) var(--gala-ease-standard);
+  }
+  .g-comments__more:hover { border-color: var(--gala-color-text); }
+  .g-comments__more:active { transform: scale(.97); }
+  .g-composer { display: grid; gap: var(--gala-space-3); min-width: 0; }
+  .g-composer label { font-size: .875rem; font-weight: var(--gala-weight-ui); color: var(--gala-color-text-muted); }
+  .g-composer__input, .g-report select, .g-report textarea {
+    width: 100%; max-width: 100%; min-height: 2.75rem; padding: .7rem .9rem; border-radius: var(--gala-radius-medium); border: var(--gala-border-width) solid var(--gala-color-border);
+    background: var(--gala-color-canvas); color: var(--gala-color-text); font-family: var(--gala-font-body); font-size: 1rem; line-height: 1.5;
+  }
+  .g-composer__input, .g-report textarea { min-height: 6rem; resize: vertical; }
+  .g-composer__input:hover, .g-report select:hover, .g-report textarea:hover { border-color: var(--gala-color-text-muted); }
+  .g-composer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gala-space-3); justify-content: space-between; font-size: .875rem; color: var(--gala-color-text-muted); }
+  .g-composer__submit, .g-composer__signin, .g-report button[type="submit"] {
+    display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 2.75rem; padding: .6rem 1.2rem; border-radius: var(--gala-radius-pill);
+    background: var(--gala-paint-button); color: var(--gala-color-btn-text); border: var(--gala-border-button); box-shadow: var(--gala-shadow-button);
+    font-family: var(--gala-font-ui); font-weight: var(--gala-weight-ui); font-size: .9375rem; cursor: pointer;
+    transition: transform var(--gala-duration-fast) var(--gala-ease-standard), filter var(--gala-duration-base) var(--gala-ease-standard);
+  }
+  .g-composer__submit:hover:not(:disabled), .g-composer__signin:hover, .g-report button[type="submit"]:hover { filter: brightness(1.07) saturate(1.05); }
+  .g-composer__submit:active:not(:disabled), .g-composer__signin:active { transform: scale(.97); }
+  .g-composer__submit:disabled { opacity: .55; cursor: default; box-shadow: none; }
+  .g-composer__cancel, .g-report button[type="button"] {
+    min-height: 2.75rem; padding: .6rem 1rem; border-radius: var(--gala-radius-pill); border: var(--gala-border-width) solid var(--gala-color-border); background: transparent; color: var(--gala-color-text);
+    font-family: var(--gala-font-ui); font-weight: var(--gala-weight-ui); font-size: .9rem; cursor: pointer;
+  }
+  .g-composer__cancel:hover, .g-report button[type="button"]:hover { border-color: var(--gala-color-text); }
+  .g-comment-list { display: grid; gap: var(--gala-space-4); min-width: 0; }
+  .g-comment { display: grid; gap: var(--gala-space-2); min-width: 0; }
+  .g-comment__head { display: flex; align-items: center; gap: var(--gala-space-3); min-width: 0; }
+  .g-comment__avatar { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--gala-radius-avatar); background: var(--gala-paint-button); color: var(--gala-color-btn-text); box-shadow: var(--gala-shadow-avatar-ring); font-family: var(--gala-font-display); font-weight: var(--gala-weight-display); font-size: .8rem; text-transform: uppercase; }
+  .g-comment__author { font-weight: var(--gala-weight-ui); font-size: .9375rem; overflow-wrap: anywhere; min-width: 0; }
+  .g-comment__time { font-size: .8125rem; color: var(--gala-color-text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .g-comment__body { margin: 0; font-family: var(--gala-font-body); font-size: 1rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
+  .g-comment__body a { color: var(--gala-color-link); text-decoration: underline; text-decoration-color: var(--gala-color-link-underline); text-underline-offset: var(--gala-link-offset); }
+  .g-comment__body a:hover { text-decoration-color: var(--gala-color-link-underline-hover); }
+  .g-comment__actions { display: flex; flex-wrap: wrap; gap: var(--gala-space-1) var(--gala-space-3); }
+  .g-comment__action { min-height: 2.5rem; padding: 0 .5rem; margin-left: -.5rem; border: 0; border-radius: var(--gala-radius-small); background: transparent; color: var(--gala-color-text-muted); font-family: var(--gala-font-ui); font-weight: var(--gala-weight-ui); font-size: .8125rem; cursor: pointer; transition: color var(--gala-duration-fast) var(--gala-ease-standard), background-color var(--gala-duration-fast) var(--gala-ease-standard); }
+  .g-comment__action:hover { color: var(--gala-color-text); background: var(--gala-color-surface-raised); }
+  .g-comment__replies { display: grid; gap: var(--gala-space-4); min-width: 0; margin-top: var(--gala-space-2); padding-left: var(--gala-space-4); border-left: var(--gala-border-width) solid var(--gala-color-border); }
+  .g-comment--tombstone > .g-comment__body { font-style: italic; color: var(--gala-color-text-faint); }
+  .g-comment--mine > .g-comment__head .g-comment__avatar { box-shadow: 0 0 0 2px var(--gala-color-accent); }
+  .g-report { width: min(28rem, calc(100% - 2rem)); max-width: 100%; padding: var(--gala-space-6); border-radius: var(--gala-radius-large); border: var(--gala-border-card); background: var(--gala-color-surface); color: var(--gala-color-text); box-shadow: var(--gala-shadow-dialog); font-family: var(--gala-font-ui); }
+  .g-report::backdrop { background: var(--gala-color-overlay); }
+  .g-report form { display: grid; gap: var(--gala-space-3); }
+  .g-report menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--gala-space-3); margin: 0; padding: 0; }
+
   /* toast */
   .g-toast {
     position: fixed; left: 50%; bottom: var(--gala-space-6); z-index: 60; max-width: calc(100% - 2rem); padding: .7rem 1.1rem;
@@ -709,6 +787,10 @@ export const GALA_BASE_COMPONENT_CSS = `
     .g-article-cover img { aspect-ratio: 16 / 10; }
     .g-footer-grid { grid-template-columns: minmax(0, 1fr); }
     .g-author-card { flex-direction: column; }
+    .g-interactions { padding: var(--gala-space-4); }
+    .g-comment__replies { padding-left: var(--gala-space-3); }
+    .g-composer__actions { flex-direction: column; align-items: stretch; }
+    .g-composer__submit, .g-composer__signin { width: 100%; }
     .g-topic-head { align-items: flex-start; }
   }
 

package/src/core/internal/chrome.js

@@ -142,6 +142,9 @@ function renderSocialLinks(socialLinks, rssHref, messages) {
  * @param {string} options.footerProfileHtml the already-rendered footer card
  *   body (may be empty)
  * @param {string | undefined} options.copyrightText the copyright line
+ * @param {boolean} options.showAttribution whether the Galascribe
+ *   attribution line renders: the build input's
+ *   `appearance.attribution.showMadeWith`, shown when absent
  * @param {Readonly<Record<string, string | ((...args: string[]) => string)>>} options.messages
  * @returns {string} the rendered footer
  */
@@ -158,6 +161,7 @@ export function renderFooter({
   authorHtml,
   footerProfileHtml,
   copyrightText,
+  showAttribution,
   messages,
 }) {
   const label = (/** @type {string} */ key) =>
@@ -190,10 +194,9 @@ export function renderFooter({
     renderSlot('account-intent') +
     renderSlot('conversation') +
     renderSlot('newsletter') +
-    renderSlot('edition-selector') +
     `<div class="g-wrap g-footer-base">` +
     (copyrightText ? `<span>${escapeHtml(copyrightText)}</span>` : '') +
-    `<span>${label('footerAttributionLabel')}</span>` +
+    (showAttribution ? `<span>${label('footerAttributionLabel')}</span>` : '') +
     `</div></footer>`
   );
 }

package/src/core/internal/components.js

@@ -14,6 +14,7 @@
  * published one is never rendered.
  */
 
+import { RenderPolicyViolationError } from '../errors.js';
 import { escapeHtml } from './skeleton.js';
 import { icon } from './icons.js';
 import { joinBasePathAndRoute } from './route.js';
@@ -197,18 +198,76 @@ export function renderImage({
 }
 
 /**
- * Add `loading="lazy" decoding="async"` to every `<img>` in an
- * already-sanitized body. Applied at render time only: the body's own
- * digest is over the stored bytes and is never recomputed.
+ * The widest slot a content image fills, in CSS pixels: the prose column
+ * never exceeds it, so a content image's `src` is its largest output file
+ * no wider than this.
+ */
+export const CONTENT_IMAGE_SLOT_WIDTH = 960;
+
+/** The `sizes` value every content image carries (the slot above). */
+export const CONTENT_IMAGE_SIZES = `(max-width: ${CONTENT_IMAGE_SLOT_WIDTH}px) 100vw, ${CONTENT_IMAGE_SLOT_WIDTH}px`;
+
+/**
+ * Build the two renderers for a content image (an image a body references,
+ * already resolved by `media/content-images.js` and processed by the media
+ * pipeline). The page form names every output file of the image in
+ * `srcset`; its `src` is the largest output file no wider than
+ * {@link CONTENT_IMAGE_SLOT_WIDTH}, or the original when the image has no
+ * narrower file (a GIF, WebP or AVIF passes through as its original only).
+ * Applied at render time only: the body's own digest is over the stored
+ * bytes and is never recomputed.
  *
- * @param {string} bodyHtml sanitized body HTML
- * @returns {string} the body with loading hints on its images
+ * @param {object} options
+ * @param {Readonly<Record<string, readonly {path: string, width: number, height: number}[]>>} options.mediaVariants
+ *   the media pipeline's output files per source digest, ascending width
+ * @param {string} options.publicBasePath the public base path
+ * @returns {{page: (reference: {path: string, sourceDigest: string}, altAttribute: string) => string, feed: (reference: {path: string, sourceDigest: string}, altAttribute: string) => string}}
+ *   the page form (responsive, lazy) and the feed form (one `src`, no
+ *   loading hints); `altAttribute` is the body's own entity-encoded `alt`
  */
-export function lazyBodyImages(bodyHtml) {
-  return bodyHtml.replace(
-    /<img\b(?![^>]*\bloading=)/g,
-    '<img loading="lazy" decoding="async"',
-  );
+export function createContentImage({ mediaVariants, publicBasePath }) {
+  /**
+   * @param {{path: string, sourceDigest: string}} reference
+   * @returns {{url: string, width: number, height: number}[]} every output
+   *   file of the image, ascending width
+   */
+  const filesOf = (reference) => {
+    const variants = mediaVariants[reference.sourceDigest] ?? [];
+    if (variants.length === 0) {
+      throw new RenderPolicyViolationError(
+        `content image ${reference.path} has no media pipeline output; this is a renderer defect`,
+      );
+    }
+    return variants.map((variant) => ({
+      url: joinBasePathAndRoute(publicBasePath, `/${variant.path}`),
+      width: variant.width,
+      height: variant.height,
+    }));
+  };
+  /**
+   * @param {{url: string, width: number, height: number}[]} files
+   * @returns {{url: string, width: number, height: number}} the `src` file
+   */
+  const fitting = (files) =>
+    files.filter((file) => file.width <= CONTENT_IMAGE_SLOT_WIDTH).at(-1) ??
+    files[0];
+  return {
+    page(reference, altAttribute) {
+      const files = filesOf(reference);
+      const source = fitting(files);
+      const srcset = files
+        .map((file) => `${file.url} ${file.width}w`)
+        .join(', ');
+      return (
+        `<img src="${escapeHtml(source.url)}" srcset="${escapeHtml(srcset)}" sizes="${CONTENT_IMAGE_SIZES}"` +
+        ` alt="${altAttribute}" width="${source.width}" height="${source.height}" loading="lazy" decoding="async">`
+      );
+    },
+    feed(reference, altAttribute) {
+      const source = fitting(filesOf(reference));
+      return `<img src="${escapeHtml(source.url)}" alt="${altAttribute}" width="${source.width}" height="${source.height}">`;
+    },
+  };
 }
 
 /**

package/src/core/internal/editions.js

@@ -0,0 +1,297 @@
+/**
+ * Editions: repository documents of `kind: "edition"` that restate one
+ * article at another depth (a quick read, a standard edition, a deep dive).
+ *
+ * An edition is an ordinary rendered document, not a module: the build input
+ * already carries it as a `content[]` record whose front matter names the
+ * article it restates (`edition.of`, the article's slug) and its depth
+ * (`edition.kind`). Whether the edition is current (generated from the
+ * article's present text) is decided upstream, before the build input exists,
+ * so an edition that arrives here is rendered as given.
+ *
+ * What this renderer does with one:
+ *
+ * - it renders at `<article route>/<segment>` where the segment is
+ *   `quick-read`, `standard` or `deep-dive`, built from `edition.of`
+ *   ({@link editionRoute}), so `/post` has `/post/quick-read` beside it;
+ * - its `<link rel="canonical">` names the article and its robots directive is
+ *   `noindex, follow`, so the article stays the indexed reference;
+ * - it never appears in a listing, tag or series page, a feed, the sitemap, the
+ *   search index or the `llms` documents (each of those selects `kind:
+ *   "article"` / `"page"` records, or skips `noindex` pages);
+ * - the article and each of its editions carry the same accessible selector,
+ *   a `<nav aria-label="Editions">` of links in the core `edition-selector`
+ *   slot, listing the original and each edition that exists, the current page
+ *   marked `aria-current="page"`; an edition page also carries a one-line
+ *   label saying the page is a generated edition and the original is the
+ *   reference.
+ *
+ * Styling is the base layer's: the selector uses the existing pill hooks, so
+ * the published theme styling contract does not change.
+ *
+ * An edition that cannot be placed is a malformed build input and fails closed
+ * before anything is written ({@link resolveEditions}).
+ */
+
+import { BuildInputValidationError } from '../errors.js';
+import { icon } from './icons.js';
+import { escapeHtml, renderSlot } from './skeleton.js';
+
+/** @typedef {'QUICK_READ' | 'STANDARD' | 'DEEP_DIVE'} EditionKind */
+
+/**
+ * One edition placed beside its article.
+ *
+ * @typedef {object} EditionEntry
+ * @property {import('../../../types/index.d.ts').ContentBuildRecord} record
+ *   the edition document
+ * @property {import('../../../types/index.d.ts').ContentBuildRecord} original
+ *   the article it restates
+ * @property {EditionKind} kind its depth
+ * @property {string} route its un-joined route
+ */
+
+/**
+ * Every edition of a build input.
+ *
+ * @typedef {object} EditionResolution
+ * @property {ReadonlyMap<import('../../../types/index.d.ts').ContentBuildRecord, EditionEntry>} byRecord
+ *   each edition record's placement
+ * @property {ReadonlyMap<import('../../../types/index.d.ts').ContentBuildRecord, readonly EditionEntry[]>} byOriginal
+ *   each article's editions, in selector order (quick read, standard, deep dive)
+ */
+
+/**
+ * The edition kinds in the order the selector lists them.
+ *
+ * @type {readonly EditionKind[]}
+ */
+export const EDITION_KINDS = Object.freeze([
+  'QUICK_READ',
+  'STANDARD',
+  'DEEP_DIVE',
+]);
+
+/** @type {Readonly<Record<EditionKind, string>>} */
+const EDITION_SEGMENTS = Object.freeze({
+  QUICK_READ: 'quick-read',
+  STANDARD: 'standard',
+  DEEP_DIVE: 'deep-dive',
+});
+
+/** @type {Readonly<Record<EditionKind, string>>} */
+const EDITION_LABEL_KEYS = Object.freeze({
+  QUICK_READ: 'editionQuickReadLabel',
+  STANDARD: 'editionStandardLabel',
+  DEEP_DIVE: 'editionDeepDiveLabel',
+});
+
+/** Where a reader of an edition diagnostic finds the rule. */
+const DOCUMENTATION_URL = 'https://github.com/rathnasgala2/template#editions';
+
+/**
+ * @param {{of: string, kind: EditionKind}} edition an edition's front-matter
+ *   `edition` object
+ * @returns {string} the edition's un-joined route, `/<of>/<segment>`
+ */
+export function editionRoute(edition) {
+  return `/${edition.of}/${EDITION_SEGMENTS[edition.kind]}`;
+}
+
+/**
+ * @param {EditionKind} kind an edition kind
+ * @param {Readonly<Record<string, string | ((...args: string[]) => string)>>} messages
+ *   the resolved message catalog
+ * @returns {string} the kind's plain-text label ("Quick read")
+ */
+export function editionKindLabel(kind, messages) {
+  return /** @type {string} */ (messages[EDITION_LABEL_KEYS[kind]]);
+}
+
+/**
+ * @param {string} code the diagnostic code
+ * @param {number} index the record's index in `content`
+ * @param {string} sourcePath the record's repository source path
+ * @param {string} remediation what the author or producer should change
+ * @returns {Record<string, string>} one diagnostic, shaped like a schema
+ *   validation diagnostic
+ */
+function diagnostic(code, index, sourcePath, remediation) {
+  return {
+    code,
+    severity: 'ERROR',
+    instancePointer: `/content/${index}`,
+    actualValueClass: 'object',
+    rule: 'template:edition',
+    sourcePath,
+    remediation,
+    documentationUrl: DOCUMENTATION_URL,
+  };
+}
+
+/**
+ * Place every edition beside the article it restates, before anything is
+ * written. Fails closed with one diagnostic per edition that cannot be placed:
+ * its `edition.of` names no `kind: "article"` document in this build
+ * (`EDITION_ORIGINAL_UNRESOLVED`), two editions share an article and a depth
+ * (`EDITION_DUPLICATE`), or its route is already another document's route or
+ * redirect (`EDITION_ROUTE_CONFLICT`).
+ *
+ * @param {readonly import('../../../types/index.d.ts').ContentBuildRecord[]} content
+ *   the build input's `content[]`
+ * @param {(frontmatter: import('../../../types/index.d.ts').ContentFrontmatterNormalized) => string} routeOf
+ *   a document's own un-joined route
+ * @returns {EditionResolution} every edition's placement
+ * @throws {BuildInputValidationError} when an edition cannot be placed
+ */
+export function resolveEditions(content, routeOf) {
+  /** @type {Map<string, import('../../../types/index.d.ts').ContentBuildRecord>} */
+  const articles = new Map();
+  /** @type {Set<string>} */
+  const occupied = new Set();
+  for (const record of content) {
+    const { frontmatter } = record;
+    if (frontmatter.kind === 'edition') continue;
+    if (frontmatter.kind === 'article') articles.set(frontmatter.slug, record);
+    occupied.add(routeOf(frontmatter));
+    for (const source of frontmatter.redirects) occupied.add(source);
+  }
+
+  /** @type {Map<import('../../../types/index.d.ts').ContentBuildRecord, EditionEntry>} */
+  const byRecord = new Map();
+  /** @type {Map<import('../../../types/index.d.ts').ContentBuildRecord, EditionEntry[]>} */
+  const byOriginal = new Map();
+  /** @type {Set<string>} */
+  const claimed = new Set();
+  /** @type {Record<string, string>[]} */
+  const diagnostics = [];
+
+  content.forEach((record, index) => {
+    const { frontmatter } = record;
+    if (frontmatter.kind !== 'edition') return;
+    const { edition } = frontmatter;
+    const original = edition ? articles.get(edition.of) : undefined;
+    if (!edition || !original) {
+      diagnostics.push(
+        diagnostic(
+          'EDITION_ORIGINAL_UNRESOLVED',
+          index,
+          record.sourcePath,
+          `The edition ${record.sourcePath} restates "${edition?.of ?? ''}", which is not an article in this build. Publish the article with it, or remove the edition.`,
+        ),
+      );
+      return;
+    }
+    const route = editionRoute(edition);
+    if (occupied.has(route)) {
+      diagnostics.push(
+        diagnostic(
+          'EDITION_ROUTE_CONFLICT',
+          index,
+          record.sourcePath,
+          `The edition ${record.sourcePath} would render at ${route}, which another document already uses. Rename or move that document.`,
+        ),
+      );
+      return;
+    }
+    if (claimed.has(route)) {
+      diagnostics.push(
+        diagnostic(
+          'EDITION_DUPLICATE',
+          index,
+          record.sourcePath,
+          `The article "${edition.of}" already has a ${edition.kind} edition. Keep one.`,
+        ),
+      );
+      return;
+    }
+    claimed.add(route);
+    /** @type {EditionEntry} */
+    const entry = { record, original, kind: edition.kind, route };
+    byRecord.set(record, entry);
+    byOriginal.set(original, [...(byOriginal.get(original) ?? []), entry]);
+  });
+
+  if (diagnostics.length > 0) throw new BuildInputValidationError(diagnostics);
+
+  for (const [original, entries] of byOriginal) {
+    byOriginal.set(
+      original,
+      entries.sort(
+        (a, b) => EDITION_KINDS.indexOf(a.kind) - EDITION_KINDS.indexOf(b.kind),
+      ),
+    );
+  }
+  return { byRecord, byOriginal };
+}
+
+/**
+ * The editions a reader is offered next to an article: every published one,
+ * plus the one being read. An `unlisted` edition stays reachable by its own
+ * address but is not advertised.
+ *
+ * @param {readonly EditionEntry[] | undefined} entries every edition of the
+ *   article, in selector order
+ * @param {EditionEntry | undefined} current the edition being read, if any
+ * @returns {EditionEntry[]} the editions to list
+ */
+export function listedEditions(entries, current) {
+  return (entries ?? []).filter(
+    (entry) =>
+      entry === current || entry.record.frontmatter.status === 'published',
+  );
+}
+
+/**
+ * Render the `edition-selector` slot for an article or one of its editions.
+ *
+ * @param {object} options rendering options
+ * @param {Readonly<Record<string, string | ((...args: string[]) => string)>>} options.messages
+ *   the resolved message catalog
+ * @param {string} options.originalHref the article's joined route
+ * @param {readonly EditionEntry[]} options.entries the editions to list, in
+ *   selector order ({@link listedEditions})
+ * @param {EditionEntry | undefined} options.current the edition being read;
+ *   `undefined` on the article itself
+ * @param {(route: string) => string} options.site joins a route with the
+ *   public base path
+ * @returns {string} the slot, or an empty string when there is no edition to
+ *   offer (a slot with nothing to say is not rendered)
+ */
+export function renderEditionSelector({
+  messages,
+  originalHref,
+  entries,
+  current,
+  site,
+}) {
+  if (entries.length === 0) return '';
+  const text = (/** @type {string} */ key) =>
+    escapeHtml(/** @type {string} */ (messages[key]));
+  const item = (
+    /** @type {string} */ href,
+    /** @type {string} */ label,
+    /** @type {string} */ iconName,
+    /** @type {boolean} */ isCurrent,
+  ) =>
+    `<li><a class="g-pill" href="${escapeHtml(href)}"${isCurrent ? ' aria-current="page"' : ''}>` +
+    `${icon(iconName)}<span>${label}</span></a></li>`;
+  const links = [
+    item(originalHref, text('editionOriginalLabel'), 'pen', !current),
+    ...entries.map((entry) =>
+      item(
+        site(entry.route),
+        escapeHtml(editionKindLabel(entry.kind, messages)),
+        'sparkle',
+        entry === current,
+      ),
+    ),
+  ].join('');
+  return renderSlot('edition-selector', {
+    html:
+      `<nav aria-label="${text('editionsNavigationLabel')}"><ul class="g-pills">${links}</ul></nav>` +
+      (current
+        ? `<p class="g-label">${icon('sparkle')}${text('editionNoticeLabel')}</p>`
+        : ''),
+  });
+}

package/src/core/internal/eleventy-render.js

@@ -38,7 +38,6 @@ import {
   APPEARANCE_SERVER_DEFAULT_RESOLVED_MODE,
   COLOR_SCHEME_META_CONTENT,
 } from './appearance/contract.js';
-import { contentSecurityPolicyMetaTag } from './content-security.js';
 import { PAGE_KIND_ATTRIBUTE } from './page-kinds.js';
 
 /**
@@ -133,9 +132,12 @@ const SKELETON_LAYOUT_SOURCE = [
   '<head>',
   '<meta charset="utf-8">',
   '<meta name="viewport" content="width=device-width, initial-scale=1">',
-  contentSecurityPolicyMetaTag(),
+  '{{ cspMetaTag | safe }}',
   `<meta name="color-scheme" content="${COLOR_SCHEME_META_CONTENT}">`,
-  '<script src="{{ appearanceScriptHref }}"></script>',
+  // The interactions script (article pages, module on) is deferred and sits
+  // on the appearance script's line, so a page without it is byte-identical
+  // to before.
+  '<script src="{{ appearanceScriptHref }}"></script>{% if interactionsScriptHref %}<script src="{{ interactionsScriptHref }}" defer></script>{% endif %}',
   '<title>{{ title }}</title>',
   '{% if description %}<meta name="description" content="{{ description }}">{% endif %}',
   '{% if robotsContent %}<meta name="robots" content="{{ robotsContent }}">{% endif %}',

package/src/core/internal/feeds.js

@@ -18,7 +18,7 @@
  * media pipeline scope decisions in the package README).
  */
 
-import { escapeHtml } from './skeleton.js';
+import { escapeHtml, unescapeHtml } from './skeleton.js';
 import { derivePublicBasePath, joinPublicRoute } from './route.js';
 import { deriveAuthorSlugs } from './route-labels.js';
 import {
@@ -48,19 +48,6 @@ function toRfc822(rfc3339) {
   return new Date(rfc3339).toUTCString();
 }
 
-/**
- * @param {string} value an attribute value as it appears in HTML source
- * @returns {string} the value with the five predefined entities decoded
- */
-function decodeAttribute(value) {
-  return value
-    .replace(/"/g, '"')
-    .replace(/'/g, "'")
-    .replace(/&lt;/g, '<')
-    .replace(/&gt;/g, '>')
-    .replace(/&amp;/g, '&');
-}
-
 /**
  * Make every `href`/`src` in an article body absolute against the article's
  * own URL: a feed reader renders the body away from the site, so a relative
@@ -75,7 +62,7 @@ export function absolutizeBodyLinks(bodyHtml, pageUrl) {
     /\b(href|src)="([^"]*)"/g,
     (match, attribute, value) => {
       try {
-        return `${attribute}="${escapeHtml(new URL(decodeAttribute(value), pageUrl).toString())}"`;
+        return `${attribute}="${escapeHtml(new URL(unescapeHtml(value), pageUrl).toString())}"`;
       } catch {
         return match;
       }
@@ -99,11 +86,14 @@ function cdata(text) {
  * validated `build-input:2.0.0` instance.
  *
  * @param {import('../../../types/index.d.ts').NormalizedBuildInput} validatedInput
+ * @param {object} options feed options
+ * @param {(body: string) => string} options.feedBody turns an article body
+ *   into its feed form (every image naming its media derivative)
  * @returns {{atomXml: string, rssXml: string, atomSelfUrl: string, rssSelfUrl: string}}
  *   both feed documents' exact UTF-8 text, plus each feed's own absolute
  *   self URL (for the shared layout's feed-discovery `<link>` tags)
  */
-export function buildFeeds(validatedInput) {
+export function buildFeeds(validatedInput, { feedBody }) {
   const { publication, authors, content, basePath, baseUrl } = validatedInput;
   const authorsById = new Map(authors.map((author) => [author.id, author]));
   const authorSlugs = deriveAuthorSlugs(authors);
@@ -144,7 +134,7 @@ export function buildFeeds(validatedInput) {
       const categoriesXml = frontmatter.tags
         .map((tag) => `<category term="${escapeHtml(tag)}"/>`)
         .join('');
-      const contentXml = `<content type="html">${escapeHtml(absolutizeBodyLinks(record.body, entryUrl))}</content>`;
+      const contentXml = `<content type="html">${escapeHtml(absolutizeBodyLinks(feedBody(record.body), entryUrl))}</content>`;
       const summaryXml = frontmatter.description
         ? `<summary>${escapeHtml(frontmatter.description)}</summary>`
         : '';
@@ -200,7 +190,7 @@ export function buildFeeds(validatedInput) {
         creatorsXml +
         categoriesXml +
         descriptionXml +
-        `<content:encoded>${cdata(absolutizeBodyLinks(record.body, itemUrl))}</content:encoded>` +
+        `<content:encoded>${cdata(absolutizeBodyLinks(feedBody(record.body), itemUrl))}</content:encoded>` +
         `</item>`
       );
     })

package/src/core/internal/icons.js

@@ -35,6 +35,8 @@ export const ICONS = Object.freeze({
     '<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/><path d="M19 16l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z"/>',
   list: '<path d="M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01"/>',
   layers: '<path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/>',
+  heart:
+    '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7z"/>',
   pen: '<path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13 7 4 4"/>',
 });