@rathnasgala2/template 4.1.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathnasgala2/template",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Deterministic Eleventy-backed static publication renderer for Galascribe portable repositories.",
   "type": "module",
   "license": "Apache-2.0",

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

@@ -459,8 +459,8 @@ export const GALA_BASE_COMPONENT_CSS = `
   .g-card-media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--gala-radius-media); background: var(--gala-color-surface-raised); border-bottom: var(--gala-border-media-divider); max-width: 100%; }
   .g-card-media img { width: 100%; height: 100%; object-fit: cover; filter: var(--gala-media-filter); transition: transform 1s var(--gala-ease-standard), filter var(--gala-duration-slow) var(--gala-ease-standard); }
   .g-card:hover .g-card-media img { transform: scale(var(--gala-media-zoom)); filter: var(--gala-media-filter-hover); }
-  .g-card-placeholder { display: grid; place-items: center; aspect-ratio: 16 / 10; width: 100%; overflow: hidden; border-radius: var(--gala-radius-media); background: var(--gala-paint-panel); color: var(--gala-color-panel-text); }
-  .g-card-placeholder .g-icon { width: 2.25rem; height: 2.25rem; opacity: .85; }
+  .g-card-placeholder { display: grid; place-items: center; aspect-ratio: 16 / 10; width: 100%; overflow: hidden; border-radius: var(--gala-radius-media); background: var(--gala-color-surface-raised); color: var(--gala-color-text-muted); }
+  .g-card-placeholder .g-icon { width: 2.25rem; height: 2.25rem; opacity: .7; }
   .g-hero-media .g-card-placeholder { height: 100%; aspect-ratio: auto; border-radius: 0; }
   .g-card-body { display: flex; flex-direction: column; gap: .6rem; padding: var(--gala-card-pad); flex: 1; min-width: 0; }
   .g-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--gala-space-2); min-height: 1.6rem; }

package/src/core/internal/components.js

@@ -19,6 +19,7 @@ import { escapeHtml } from './skeleton.js';
 import { icon } from './icons.js';
 import { joinBasePathAndRoute } from './route.js';
 import { resolveOriginalDerivativePath } from './seo.js';
+import { cardMediaOf } from './first-body-image.js';
 
 /** Reading speed used for every reading-time estimate. */
 export const WORDS_PER_MINUTE = 230;
@@ -395,9 +396,10 @@ export function createComponents(context) {
   const card = (record, options = {}, variant = 'grid') => {
     const fm = record.frontmatter;
     const href = escapeHtml(recordHref(record));
-    const hero = mediaImage(fm.hero?.file);
+    const cardMedia = cardMediaOf(record);
+    const hero = mediaImage(cardMedia?.file);
     const media = hero
-      ? `<figure class="g-card-media">${renderImage({ image: hero, alt: fm.hero?.role === 'decorative' ? '' : (fm.hero?.alt ?? '') })}</figure>`
+      ? `<figure class="g-card-media">${renderImage({ image: hero, alt: cardMedia?.role === 'decorative' ? '' : (cardMedia?.alt ?? '') })}</figure>`
       : `<div class="g-card-placeholder" aria-hidden="true">${icon('sparkle')}</div>`;
     const seriesTag = options.partLabel
       ? `<span class="g-series-tag">${icon('book')}${escapeHtml(options.partLabel)}</span>`

package/src/core/internal/first-body-image.js

@@ -0,0 +1,91 @@
+/**
+ * The picture a post shows where the post is summarised (cards, the home
+ * hero, `og:image`) when its frontmatter carries no `hero`.
+ *
+ * A content record's `body` is already render-policy-conformant HTML (the
+ * authored Markdown after `normalizeAuthoredMarkdown`), so inline images
+ * (`![alt](assets/x.png)`), `./`-prefixed paths and reference-style images
+ * (`![alt][ref]` with a `[ref]: assets/x.png` definition) have all become
+ * `<img src alt>` elements by the time this module sees them; code samples
+ * are `<pre>`/`<code>` text whose `<` is entity-encoded. The scan is
+ * therefore over `<img>` elements, with the same path rule the prose
+ * renderer resolves them by (`media/content-images.js`).
+ */
+
+import { unescapeHtml } from './skeleton.js';
+import { repositoryPathOfImageSource } from './media/content-images.js';
+
+/** Code regions, removed before the scan so an image shown as code is skipped. */
+const CODE_REGION = /<pre\b[\s\S]*?<\/pre>|<code\b[\s\S]*?<\/code>/g;
+
+const IMG_ELEMENT = /<img\b[^>]*>/g;
+const ATTRIBUTE = /\s([a-zA-Z][a-zA-Z0-9-]*)="([^"]*)"/g;
+
+/** The media types a card picture may be (same set as body images). */
+const IMAGE_MEDIA_TYPES = new Set([
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/avif',
+  'image/gif',
+]);
+
+/**
+ * @param {string} body a content record's policy-conformant HTML body
+ * @returns {{path: string, alt: string} | undefined} the first image whose
+ *   source is a repository-relative `assets/` path (remote, `data:` and
+ *   code-region images are skipped), with its decoded alt text
+ */
+export function firstBodyImage(body) {
+  for (const element of body.replace(CODE_REGION, '').match(IMG_ELEMENT) ??
+    []) {
+    /** @type {{src?: string, alt?: string}} */
+    const attributes = {};
+    for (const [, name, value] of element.matchAll(ATTRIBUTE)) {
+      if (name === 'src' || name === 'alt') attributes[name] = value;
+    }
+    const path = repositoryPathOfImageSource(attributes.src);
+    if (path?.startsWith('assets/')) {
+      return { path, alt: unescapeHtml(attributes.alt ?? '') };
+    }
+  }
+  return undefined;
+}
+
+/** @type {WeakMap<object, unknown>} */
+const cache = new WeakMap();
+
+/**
+ * The picture a record shows on cards, the home hero and as its social
+ * image: `frontmatter.hero` when present, else the first body image that the
+ * record's own `media[]` inventories (so it carries the `sourceDigest` the
+ * media pipeline processed it by). Computed once per record.
+ *
+ * @param {import('../../../types/index.d.ts').ContentBuildRecord} record
+ * @returns {{file: {path: string, sourceDigest: string}, alt?: string, role: 'informative' | 'decorative'} | undefined}
+ */
+export function cardMediaOf(record) {
+  if (cache.has(record)) {
+    return /** @type {ReturnType<typeof cardMediaOf>} */ (cache.get(record));
+  }
+  /** @type {ReturnType<typeof cardMediaOf>} */
+  let media = /** @type {any} */ (record.frontmatter.hero);
+  if (!media) {
+    const image = firstBodyImage(record.body);
+    const entry = image
+      ? record.media?.find(
+          (file) =>
+            file.path === image.path && IMAGE_MEDIA_TYPES.has(file.mediaType),
+        )
+      : undefined;
+    if (image && entry) {
+      media = {
+        file: { path: entry.path, sourceDigest: entry.sourceDigest },
+        alt: image.alt,
+        role: 'informative',
+      };
+    }
+  }
+  cache.set(record, media);
+  return media;
+}

package/src/core/internal/page-kinds.js

@@ -78,6 +78,7 @@ import {
   resolveEditions,
 } from './editions.js';
 import { truncateAtWord } from './seo.js';
+import { cardMediaOf } from './first-body-image.js';
 import { createStructuredData } from './structured-data.js';
 import { icon } from './icons.js';
 import {
@@ -499,21 +500,22 @@ export function buildGeneratedPages(validatedInput, options) {
       }
     : {};
   /**
-   * @param {import('../../../types/index.d.ts').ContentFrontmatterNormalized} fm
+   * @param {import('../../../types/index.d.ts').ContentBuildRecord} record
    * @returns {{socialImageRef?: {path: string, sourceDigest: string}, socialImageAlt?: string}}
    */
-  const socialOfContent = (fm) =>
-    fm.socialImage
+  const socialOfContent = (record) => {
+    const fm = record.frontmatter;
+    const media = cardMediaOf(record);
+    return fm.socialImage
       ? { socialImageRef: fm.socialImage, socialImageAlt: fm.title }
-      : fm.hero
+      : media
         ? {
-            socialImageRef: fm.hero.file,
+            socialImageRef: media.file,
             socialImageAlt:
-              fm.hero.role === 'informative' && fm.hero.alt
-                ? fm.hero.alt
-                : fm.title,
+              media.role === 'informative' && media.alt ? media.alt : fm.title,
           }
         : defaultSocial;
+  };
   /**
    * @param {import('../../../types/index.d.ts').ContentBuildRecord} record
    * @returns {string} the page description: authored, else the body's
@@ -1004,15 +1006,15 @@ export function buildGeneratedPages(validatedInput, options) {
     // An edition with no social image of its own shares its article's.
     const social = socialOfContent(
       isEdition && !frontmatter.socialImage && !frontmatter.hero
-        ? original.frontmatter
-        : frontmatter,
+        ? original
+        : record,
     );
     const articleGraph = isArticle
       ? sd.article({
           url: ownUrl,
           headline: frontmatter.title,
           description: contentDescription(record),
-          image: absoluteImage(socialOfContent(frontmatter).socialImageRef),
+          image: absoluteImage(socialOfContent(record).socialImageRef),
           datePublished: frontmatter.publishedAt,
           dateModified: contentLastModified(frontmatter),
           language: frontmatter.language,
@@ -1095,7 +1097,8 @@ export function buildGeneratedPages(validatedInput, options) {
   const homeFeatured = featured
     ? (() => {
         const fm = featured.frontmatter;
-        const hero = mediaImage(fm.hero?.file);
+        const cardMedia = cardMediaOf(featured);
+        const hero = mediaImage(cardMedia?.file);
         const href = escapeHtml(recordHref(featured));
         return (
           `<section class="g-wrap g-hero" aria-labelledby="hero-title">` +
@@ -1103,7 +1106,10 @@ export function buildGeneratedPages(validatedInput, options) {
           (hero
             ? renderImage({
                 image: hero,
-                alt: fm.hero?.role === 'decorative' ? '' : (fm.hero?.alt ?? ''),
+                alt:
+                  cardMedia?.role === 'decorative'
+                    ? ''
+                    : (cardMedia?.alt ?? ''),
                 priority: true,
               })
             : `<span class="g-card-placeholder">${icon('sparkle')}</span>`) +

package/src/core/internal/source-inventory.js

@@ -6,6 +6,8 @@
  * appears once, and its role is the earliest value in the enum order.
  */
 
+import { cardMediaOf } from './first-body-image.js';
+
 /** @type {readonly string[]} */
 const ROLE_PRIORITY = Object.freeze([
   'publication',
@@ -77,13 +79,12 @@ export function collectIncludedSources(buildInput) {
       'content',
       contentRecord.sourceRevision,
     );
-    if (contentRecord.frontmatter.hero) {
-      recordResolvedFile(
-        record,
-        contentRecord.frontmatter.hero.file,
-        contentRecord.sourceRevision,
-      );
-    }
+    // The hero, else the first body image a card shows in its place.
+    recordResolvedFile(
+      record,
+      cardMediaOf(contentRecord)?.file,
+      contentRecord.sourceRevision,
+    );
     recordResolvedFile(
       record,
       contentRecord.frontmatter.socialImage,