@hagicode/hagilight-core 0.8.1-dev.85.1.ebda464 → 0.8.1-dev.87.1.57ea49d

package/PromotoBanner.astro

@@ -196,6 +196,10 @@ const { fallback, locale = Astro.currentLocale ?? 'en' } = Astro.props;
     object-fit: cover;
   }
 
+  .hagilight-promoto__media picture {
+    display: contents;
+  }
+
   .hagilight-promoto__cta {
     grid-area: cta;
     display: inline-flex;

package/README.md

@@ -39,6 +39,8 @@ const links = resolveSiteLinks('en-US');
 
 The shared banner (`PromotoBanner`, `loadActivePromotions`) displays only promotions whose `platforms` array in Index's `/promote.json` includes `web`, in addition to being enabled, inside their activation window, and matched with `/promote_content.json`. This follows the `platforms` flag documented in the Index README. An entry whose `platforms` is missing, empty, or not an array of strings is not displayed, other values such as `hagicode` are ignored, and matching is exact (`Web` does not match). When no promotion remains, the banner shows its site fallback or stays hidden, as before.
 
+A promotion's `image` may also carry `sources`, the alternative image files that Index publishes in the order AVIF, WebP, then the original. The banner renders them as a `<picture>` in that order, with the original as its `<img>`, and skips any entry whose `type` is not an `image/*` media type or whose URL is unsafe. Each `src` is resolved against `https://index.hagicode.com` when the promotion documents load. If the browser fails to load a tier, the banner removes it and the next tier is used. A card without `sources` renders the plain `<img>` as before, and `sources` never affect the dismissal signature, so a dismissed banner stays dismissed when only its image chain changes.
+
 ## Google Analytics click events
 
 `GoogleAnalytics` also reports clicks on the key links and download buttons that the shared components render. There is nothing to configure: events follow the same rules as page views, so they are sent only on production pages where Google Analytics is enabled, never on the Starlight 404 page, and silently skipped when `gtag` is missing (development builds, blocked scripts).

package/dist/promotions.d.ts

@@ -1,10 +1,15 @@
 type FetchLike = typeof fetch;
+export interface PromotionImageSource {
+    type: string;
+    src: string;
+}
 export interface PromotionImage {
     src: string;
     alt: string;
     variant?: string;
     width?: number;
     height?: number;
+    sources?: PromotionImageSource[];
 }
 export interface PromotionCard {
     id: string;

package/dist/promotions.js

@@ -15,6 +15,26 @@ function parseLocalizedMap(value) {
     const entries = Object.entries(value).filter((entry) => nonEmptyString(entry[0]) && nonEmptyString(entry[1]));
     return entries.length ? Object.fromEntries(entries.map(([key, text]) => [key.trim(), text.trim()])) : null;
 }
+function parseImageSources(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value.flatMap((item) => {
+        if (!isRecord(item) || !nonEmptyString(item.type) || !nonEmptyString(item.src))
+            return [];
+        const type = item.type.trim().toLowerCase();
+        if (!type.startsWith('image/'))
+            return [];
+        try {
+            const url = new URL(item.src.trim(), INDEX_ORIGIN);
+            if (!['http:', 'https:'].includes(url.protocol))
+                return [];
+            return [{ type, src: url.toString() }];
+        }
+        catch {
+            return [];
+        }
+    });
+}
 function parseImage(value, record) {
     const image = isRecord(value) ? value : {};
     const src = nonEmptyString(value)
@@ -46,6 +66,7 @@ function parseImage(value, record) {
     catch {
         return undefined;
     }
+    const sources = parseImageSources(image.sources);
     return {
         src: normalizedSrc,
         alt: nonEmptyString(image.alt)
@@ -56,6 +77,7 @@ function parseImage(value, record) {
         variant: nonEmptyString(image.variant) ? image.variant.trim() : undefined,
         width,
         height,
+        ...(sources.length ? { sources } : {}),
     };
 }
 function isSafeLink(value) {

package/dist/promoto-banner.d.ts

@@ -1,6 +1,7 @@
-import { type PromotionCard } from './promotions.js';
+import { type PromotionCard, type PromotionImage, type PromotionImageSource } from './promotions.js';
 export type PromotionVisibility = 'dismissed' | 'footer-hidden' | 'hidden' | 'ready';
 export declare function selectPromotionCards(remote: PromotionCard[], fallback?: PromotionCard | null): PromotionCard[];
+export declare function getPromotionImageSources(image: PromotionImage | undefined): PromotionImageSource[];
 export declare function getPromotionSetSignature(cards: PromotionCard[]): string | null;
 export declare function getPromotionVisibility(cards: PromotionCard[], signature: string | null, dismissedSignature: string | null, footerVisible: boolean): PromotionVisibility;
 export declare function getNextPromotionIndex(index: number, count: number, direction: -1 | 1): number;

package/dist/promoto-banner.js

@@ -1,5 +1,5 @@
 import { gaEventAttributes } from './analytics-events.js';
-import { loadActivePromotions } from './promotions.js';
+import { loadActivePromotions, } from './promotions.js';
 const ELEMENT_NAME = 'hagilight-promoto-banner';
 const DISMISSED_SIGNATURE_KEY = 'hagilight:promoto-banner:dismissed-signature';
 const ROTATION_INTERVAL_MS = 8000;
@@ -37,6 +37,28 @@ export function selectPromotionCards(remote, fallback) {
         return eligibleRemote;
     return fallback && isUsableCard(fallback) ? [fallback] : [];
 }
+export function getPromotionImageSources(image) {
+    if (!image || !Array.isArray(image.sources))
+        return [];
+    return image.sources.filter((source) => source.type.toLowerCase().startsWith('image/')
+        && isSafeUrl(source.src)
+        && source.src !== image.src);
+}
+function sourceUrl(source) {
+    return new URL(source.srcset, document.baseURI).href;
+}
+function advancePromotionImageSource(image) {
+    const picture = image.parentElement;
+    if (!(picture instanceof HTMLPictureElement))
+        return;
+    const failed = Array.from(picture.querySelectorAll('source'))
+        .find((source) => sourceUrl(source) === image.currentSrc);
+    if (!failed)
+        return;
+    failed.remove();
+    // Re-assigning src makes the browser re-run source selection over the remaining tiers.
+    image.src = image.src;
+}
 export function getPromotionSetSignature(cards) {
     if (!cards.length)
         return null;
@@ -241,7 +263,6 @@ export function definePromotoBannerElement() {
                     media.className = 'hagilight-promoto__media';
                     const image = document.createElement('img');
                     image.className = 'hagilight-promoto__image';
-                    image.src = card.image.src;
                     image.alt = card.image.alt || card.title;
                     image.loading = index === this.currentIndex ? 'eager' : 'lazy';
                     image.decoding = 'async';
@@ -249,7 +270,24 @@ export function definePromotoBannerElement() {
                         image.width = card.image.width;
                     if (card.image.height)
                         image.height = card.image.height;
-                    media.append(image);
+                    const sources = getPromotionImageSources(card.image);
+                    if (sources.length) {
+                        const picture = document.createElement('picture');
+                        picture.className = 'hagilight-promoto__picture';
+                        for (const source of sources) {
+                            const element = document.createElement('source');
+                            element.type = source.type;
+                            element.srcset = source.src;
+                            picture.append(element);
+                        }
+                        picture.append(image);
+                        image.addEventListener('error', () => advancePromotionImageSource(image));
+                        media.append(picture);
+                    }
+                    else {
+                        media.append(image);
+                    }
+                    image.src = card.image.src;
                     slide.append(media);
                 }
                 slide.append(link);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hagicode/hagilight-core",
-  "version": "0.8.1-dev.85.1.ebda464",
+  "version": "0.8.1-dev.87.1.57ea49d",
   "type": "module",
   "description": "Shared TypeScript utilities, components, and assets for HagiCode Astro and Starlight sites",
   "repository": {