pandorga 1.8.4 → 1.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 120307b06e8e2a6083eb4684bef760944c0fa334155262ea202be58493e0cdd6
-  data.tar.gz: e17010ea2587987f38dc6236944c99c4790a380d87fcd994cc1462f5d184bee0
+  metadata.gz: 5ce749863130651664857439b365492b57207e7d0aba994315be703200fe0f48
+  data.tar.gz: 1b8f5293944f8cd27c76ee413f69e02869e9dc1cd6619aa48cfde1daf2355b98
 SHA512:
-  metadata.gz: ef13097e5f083e7741ecfddbce6b994b84697f1a5bc593e43cdce93bd41bab6b94da9864555a12908a419d4e4ff0836b2230085f495f30d155810bac87f0ef0b
-  data.tar.gz: 1c0e9c4a2e1f8d3cc6fdf3cd58103261f6271e445629e5f4e661f5d402f3525cc36fe717f1b86204640a0ffaeb25cb5171086645df15bab958781226f5fb2e75
+  metadata.gz: 157e81581c2e84cf398ab699902f1a3a17023e26b4fdbc27e76cba5013f1f7e2f5609cafe2dc65cf9bad36c9027bdb520d0ab22891324c9dfc63c3aabda76abc
+  data.tar.gz: b016e51119eadedc1ae7b063800580dfa04519cc84f0f9cae4237a4a9e4a356c8d329ac44d8d9da4220e48bab33b68a74c891e59e50a07c947685750d178377f

data/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [1.9.0] — 2026-10-13
+
+### Added
+
+- Optional `pandorga.home.hero_landscape` (home front matter
+  `hero_landscape` overrides it): a 16:9 image for viewports at or below
+  767px, via `<picture>`, shown whole in a 16:9 plate
+
+### Changed
+
+- Without that key the phone hero plate stays 3:4. It no longer cover-crops
+  the portrait into a 4:3 band
+- The hero image keeps `fetchpriority="high"`. A configured landscape file
+  is preloaded on narrow viewports. The portrait probe sets `fetchPriority`
+  to `high`, applies `srcset` before `src`, and the plate draw starts with
+  the other home fetches
+- Home links `tailwind.css` before the icon scripts so that sheet is not
+  held behind parser-blocking script
+
+Text faces still load after the first paint with `display=swap` and the
+metric-matched fallbacks from 1.8.4. One listing shell still serves every
+detail URL.
+
+## [1.8.5] — 2026-10-13
+
+### Fixed
+
+- Home hero `sizes` nudged above the plate width so 1.75–2× DPR picks a
+  sharp 3:4 variant; document that hero variants must be portrait fills
+
 ## [1.8.4] — 2026-10-12
 
 ### Fixed

data/_includes/content-runtime/60-fragments.html

@@ -578,10 +578,13 @@
       }
       return new Promise(function (resolve) {
         var probe = new Image();
+        probe.fetchPriority = 'high';
+        applyHeroPortraitSources(probe, chosen);
         probe.onload = function () {
-          img.src = nextSrc;
           img.alt = nextAlt;
           applyHeroPortraitSources(img, chosen);
+          img.fetchPriority = 'high';
+          img.src = nextSrc;
           img.classList.add('is-shown');
           resolve(true);
         };
@@ -610,9 +613,44 @@
       return next();
     }
 
+    function heroLandscapeActive(img) {
+      var url = img && img.getAttribute('data-hero-landscape');
+      if (!url || !String(url).trim() || !window.matchMedia) return false;
+      return window.matchMedia('(max-width: 767px)').matches;
+    }
+
+    function clearHeroSources(img) {
+      img.removeAttribute('src');
+      img.removeAttribute('srcset');
+      img.removeAttribute('sizes');
+      img.alt = '';
+    }
+
+    function watchHeroFrame(img) {
+      var url = img.getAttribute('data-hero-landscape');
+      if (!url || !String(url).trim() || !window.matchMedia) return;
+      var mq = window.matchMedia('(max-width: 767px)');
+      if (!mq.addEventListener) return;
+      mq.addEventListener('change', function () {
+        if (mq.matches) {
+          clearHeroSources(img);
+          img.classList.add('is-shown');
+          return;
+        }
+        img.classList.remove('is-shown');
+        loadJson('pages/home/portraits.json').then(function (data) {
+          return showHeroPortrait(img, heroPortraitEntries(data));
+        }).catch(function (error) {
+          console.error(error);
+        });
+      });
+    }
+
     function hydrateHeroPortrait() {
       var img = document.querySelector('[data-content-hero-portrait]');
       if (!img) return Promise.resolve();
+      watchHeroFrame(img);
+      if (heroLandscapeActive(img)) return Promise.resolve();
       return loadJson('pages/home/portraits.json').then(function (data) {
         return showHeroPortrait(img, heroPortraitEntries(data));
       }).catch(function (error) {
@@ -621,6 +659,7 @@
     }
 
     function hydratePageFragments() {
+      hydrateHeroPortrait();
       var headers = Array.prototype.slice.call(document.querySelectorAll('[data-content-page-header]'));
       var chain = Promise.resolve();
       headers.forEach(function (el) {
@@ -644,7 +683,6 @@
         hydrateHomeSections();
         hydrateBandArt();
         hydrateContacts();
-        hydrateHeroPortrait();
       });
     }
 

data/_layouts/home.html

@@ -17,6 +17,7 @@ layout: shell
 {%- assign _hero_name = site.pandorga.identity | pandorga_hero_name: site.author, site.title -%}
 {%- assign _cv_page = site.pages | where: "key", "cv" | first -%}
 {%- assign _hero_art = site.pandorga.home.hero_art | default: "page/hero-default.html" -%}
+{%- assign _hero_landscape = page.hero_landscape | default: site.pandorga.home.hero_landscape | default: "" | strip -%}
 {%- assign _home_bands = site.data.pandorga_home_bands -%}
 
 <main class="home-ledger">
@@ -53,8 +54,15 @@ layout: shell
           <span class="shard-accent home-hero-shard" aria-hidden="true"></span>
           <div class="home-hero-plate-wrap">
             <span class="ledger-frame-crosshairs" aria-hidden="true"></span>
-            <figure class="home-hero-plate">
-              <img alt="" width="1200" height="800" fetchpriority="high" data-content-hero-portrait />
+            <figure class="home-hero-plate{% if _hero_landscape != blank %} home-hero-plate--landscape{% endif %}">
+              {%- if _hero_landscape != blank -%}
+              <picture>
+                <source media="(max-width: 767px)" srcset="{{ _hero_landscape | escape }}" />
+                <img alt="" width="1600" height="900" fetchpriority="high" decoding="sync" data-content-hero-portrait data-hero-landscape="{{ _hero_landscape | escape }}" />
+              </picture>
+              {%- else -%}
+              <img alt="" width="960" height="1280" fetchpriority="high" decoding="sync" data-content-hero-portrait />
+              {%- endif -%}
               <span class="ledger-frame-corners" aria-hidden="true"></span>
             </figure>
           </div>

data/_layouts/shell.html

@@ -66,6 +66,10 @@
   {%- endcomment -%}
   <link href="https://fonts.googleapis.com" rel="preconnect" />
   <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
+  {%- assign _hero_landscape = page.hero_landscape | default: site.pandorga.home.hero_landscape | default: "" | strip -%}
+  {%- if page.layout == "home" and _hero_landscape != blank -%}
+  <link rel="preload" as="image" href="{{ _hero_landscape | escape }}" fetchpriority="high" media="(max-width: 767px)" />
+  {%- endif -%}
   {% include theme/critical-preload.html %}
   <link rel="stylesheet" href="/assets/css/base.css" />
   <link rel="stylesheet" href="/assets/css/global-link.css" />
@@ -120,6 +124,11 @@
   {%- for _sheet in _ledger -%}
   <link rel="stylesheet" href="/assets/css/ledger/{{ _sheet }}.css" />
   {%- endfor -%}
+  {%- comment -%}
+    Utilities before the icon scripts. Those scripts are parser-blocking,
+    so a sheet after them waits until they finish before the scanner sees it.
+  {%- endcomment -%}
+  <link rel="stylesheet" href="/assets/css/tailwind.css" />
   {% include theme/font-loader.html %}
   {%- comment -%}
     Named icons only. The full variable face is about a megabyte, and a
@@ -194,7 +203,6 @@
   <style>
     :root { --drop-cap-lines: {{ site.drop_cap_lines | default: 2 }}; }
   </style>
-  <link rel="stylesheet" href="/assets/css/tailwind.css" />
 </head>
 
 <body class="bg-background text-on-surface">

data/assets/css/ledger/home.css

@@ -370,8 +370,10 @@
 
 /* ── Portrait plate ──
    Beside the copy on a wide page the plate is portrait (3:4): its height
-   matches the left column and the width is W = 3/4 × H. Edge-to-edge on a
-   phone it is landscape (4:3) from the band width. */
+   matches the left column and the width is W = 3/4 × H. On a phone it stays
+   3:4. A wider box would cover-crop that portrait a second time. When
+   hero_landscape is set, the phone plate is 16:9 and the picture source is
+   that file. */
 .home-hero-plate {
   position: relative;
   z-index: 1;
@@ -389,12 +391,6 @@
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-on-surface) 10%, transparent);
 }
 
-@media (max-width: 767px) {
-  .home-hero-plate {
-    aspect-ratio: 4 / 3;
-  }
-}
-
 :root:not([data-theme="dark"]) .home-hero-plate,
 html[data-theme="light"] .home-hero-plate {
   border-width: 1px;
@@ -451,6 +447,13 @@ html[data-theme="light"] .home-hero-plate {
   }
 }
 
+.home-hero-plate picture {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
 .home-hero-plate img {
   width: 100%;
   height: 100%;
@@ -469,6 +472,21 @@ html[data-theme="light"] .home-hero-plate {
   opacity: 1;
 }
 
+/* 16:9 file in a 16:9 plate. contain shows the whole frame. The image is
+   visible without waiting for the portrait runtime, so it can be the LCP. */
+@media (max-width: 767px) {
+  .home-hero-plate--landscape {
+    aspect-ratio: 16 / 9;
+  }
+
+  .home-hero-plate--landscape img {
+    object-fit: contain;
+    object-position: center center;
+    opacity: 1;
+    transition: none;
+  }
+}
+
 .home-hero-plate:hover img {
   transform: scale(1.02);
 }
@@ -1933,8 +1951,9 @@ html[data-theme="light"] .home-featured .ledger-poster {
    ends flush with the viewport and adds no scrollable width; this must stay
    below 768px, which is where .home-band-inner swaps that token for --gutter.
    The side hairlines go with it: a border pinned to the screen edge reads as a
-   frame cut off rather than as the plate's edge. Orientation still owns the
-   crop; object-fit: cover re-crops the image inside the wider box. */
+   frame cut off rather than as the plate's edge. The plate stays 3:4, the
+   same frame as the portrait file, so cover does not crop it again. A
+   configured hero_landscape switches this query to 16:9 and contain. */
 @media (max-width: 767px) {
   .home-hero-portrait {
     max-width: none;

data/lib/pandorga/commands/new.rb

@@ -24,7 +24,7 @@ module Pandorga
 
         gem "pandorga", "~> 1.3"
         # Local checkout: gem "pandorga", path: "../pandorga"
-        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v1.8.4"
+        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v1.9.0"
         gem "csv"
         gem "base64"
       RUBY

data/lib/pandorga/registry/schema.yml

@@ -49,6 +49,9 @@ home:
     hero_art:
       type: string
       notes: Include path for hero decoration (default `page/hero-default.html`)
+    hero_landscape:
+      type: string
+      notes: Optional URL of a 16:9 image used at or below 767px. Home front matter `hero_landscape` overrides this key. Omitted, the phone plate stays 3:4
 
 fonts:
   title: "`pandorga.fonts`"

data/lib/pandorga/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Pandorga
-  VERSION = "1.8.4"
+  VERSION = "1.9.0"
 end

data/scripts/content/hero_portraits.rb

@@ -4,13 +4,20 @@
 # paths to pages/home/portraits.json. The author uploads a photograph under
 # content/media/images/hero/ and does not keep a second list.
 # Optional width variants live under variants/ so they are not extra draws.
+# Variants should be 3:4 portrait fills (not landscape width-only resizes):
+# the plate is object-fit cover at 3:4, including on a phone, so a 480×270
+# landscape candidate is too short and looks soft. A separate 16:9 file for
+# narrow viewports is pandorga.home.hero_landscape, not a pool variant.
 
 require "pathname"
 
 module HeroPortraits
   IMAGE_EXTENSIONS = %w[.jpg .jpeg .png .webp .gif].freeze
   WIDTHS = [480, 960, 1440].freeze
-  SIZES = "(max-width: 767px) 100vw, (max-width: 1023px) 14rem, 16rem"
+  # Slightly above the plate CSS width (14/16rem at html 110%) so 1.75–2×
+  # DPR picks the next 3:4 variant instead of a soft 480w. Variants must be
+  # portrait fills; landscape width-only resizes are too short under cover.
+  SIZES = "(max-width: 767px) 100vw, (max-width: 1023px) 18rem, 20rem"
 
   module_function
 

data/scripts/test/test-hero-portraits.rb

@@ -23,6 +23,7 @@ require_relative "../content/hero_portraits"
 ROOT = Pathname.new(__dir__).join("..", "..").expand_path
 EXPORT = ROOT.join("scripts/content/export-content-json.rb")
 LAYOUT = ROOT.join("_layouts/home.html")
+SHELL = ROOT.join("_layouts/shell.html")
 HOME_CSS = ROOT.join("assets/css/ledger/home.css")
 RUNTIME = ROOT.join("_includes/content-runtime/60-fragments.html")
 SCHEMA = ROOT.join("studio/schema.yml")
@@ -96,9 +97,28 @@ check!(!layout.include?("profile-monologue"),
        "the deleted shell photograph must not be referenced")
 check!(!ROOT.join("assets/images/profile-monologue.JPG").exist?,
        "profile-monologue.JPG must not exist")
-hero_img = layout[/<img[^>]*data-content-hero-portrait[^>]*>/m]
-check!(hero_img && !hero_img.include?("src=") && hero_img.include?('alt=""'),
-       "the plate starts without a photographic src and keeps an empty alt, got #{hero_img.inspect}")
+hero_imgs = layout.scan(/<img[^>]*data-content-hero-portrait[^>]*>/m)
+check!(hero_imgs.any?, "the plate image is missing")
+hero_imgs.each do |hero_img|
+  check!(!hero_img.include?("src=") && hero_img.include?('alt=""'),
+         "the plate starts without a photographic src and keeps an empty alt, got #{hero_img.inspect}")
+  check!(hero_img.include?('fetchpriority="high"'),
+         "the hero image must request fetchpriority high, got #{hero_img.inspect}")
+end
+check!(layout.include?("page.hero_landscape") && layout.include?("site.pandorga.home.hero_landscape"),
+       "narrow hero reads front matter and pandorga.home.hero_landscape")
+check!(layout.include?('media="(max-width: 767px)"') && layout.include?("<picture>"),
+       "a configured landscape file is a picture source for narrow viewports")
+check!(layout.include?("data-hero-landscape"),
+       "the image carries the landscape URL for the runtime")
+shell = SHELL.read
+check!(shell.include?('rel="preload" as="image"') && shell.include?('fetchpriority="high"') &&
+         shell.include?('media="(max-width: 767px)"') && shell.include?("hero_landscape"),
+       "the shell preloads a configured landscape image on narrow viewports")
+tailwind_at = shell.index('href="/assets/css/tailwind.css"')
+icons_at = shell.index("window.__pandorgaIconsHref")
+check!(tailwind_at && icons_at && tailwind_at < icons_at,
+       "tailwind must be linked before the icon scripts")
 
 home_css = HOME_CSS.read
 check!(home_css.include?("background: black"),
@@ -109,6 +129,14 @@ check!(plate_img&.match?(/opacity:\s*0/) && plate_img.match?(/transition:[^;]*op
 shown = home_css[/^\.home-hero-plate img\.is-shown \{.*?\n\}/m]
 check!(shown&.match?(/opacity:\s*1/),
        "a ready photograph fades to full opacity, got #{shown.inspect}")
+check!(!home_css.include?("aspect-ratio: 4 / 3"),
+       "the phone plate must not cover-crop the portrait into 4:3")
+landscape_plate = home_css[/@media \(max-width: 767px\) \{\s*\.home-hero-plate--landscape \{[^}]*\}/m]
+check!(landscape_plate&.include?("aspect-ratio: 16 / 9"),
+       "a landscape plate is 16:9 on a phone, got #{landscape_plate.inspect}")
+landscape_img = home_css[/\.home-hero-plate--landscape img \{[^}]*\}/m]
+check!(landscape_img&.include?("object-fit: contain") && landscape_img.include?("opacity: 1"),
+       "the 16:9 file is shown whole and can paint without the portrait fade, got #{landscape_img.inspect}")
 
 runtime = RUNTIME.read
 start = runtime.index("function heroPortraitEntries")
@@ -125,6 +153,20 @@ onload = body[/probe\.onload = function \(\) \{.*?\n        \};/m]
 check!(onload&.include?("img.src = nextSrc") && onload.include?("img.alt = nextAlt") &&
          onload.include?("img.classList.add('is-shown')"),
        "src, alt, and the fade-in must be applied together after load, got #{onload.inspect}")
+check!(onload && onload.index("applyHeroPortraitSources") && onload.index("img.src = nextSrc") &&
+         onload.index("applyHeroPortraitSources") < onload.index("img.src = nextSrc"),
+       "srcset must be applied before src so the full file is not the first request")
+check!(body.include?("probe.fetchPriority = 'high'"),
+       "the portrait probe must use fetchPriority high")
+check!(body.include?("heroLandscapeActive") && body.include?("data-hero-landscape"),
+       "a narrow viewport with hero_landscape must not swap in a portrait")
+check!(runtime.include?("hydrateHeroPortrait();"),
+       "hydratePageFragments must draw the plate before the later fragment chain")
+plate_call = runtime.index("function hydratePageFragments")
+later = runtime.index("hydrateHomeSections();", plate_call || 0)
+check!(plate_call && runtime.index("hydrateHeroPortrait();", plate_call) &&
+         runtime.index("hydrateHeroPortrait();", plate_call) < later,
+       "the plate draw must start at the beginning of hydratePageFragments")
 onerror = body[/probe\.onerror = function \(\) \{.*?\n        \};/m]
 check!(onerror && !onerror.include?("img.src") && !onerror.include?("is-shown"),
        "a failed image load must leave the plate black, got #{onerror.inspect}")

data/scripts/validate.sh

@@ -68,6 +68,7 @@ TESTS=(
   scripts/test/test-fonts.rb
   scripts/test/test-css-delivery.rb
   scripts/test/test-discovery.rb
+  scripts/test/test-hero-portraits.rb
 )
 
 failed=0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pandorga
 version: !ruby/object:Gem::Version
-  version: 1.8.4
+  version: 1.9.0
 platform: ruby
 authors:
 - The Pandorga contributors