pandorga 1.8.4 → 1.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 120307b06e8e2a6083eb4684bef760944c0fa334155262ea202be58493e0cdd6
-  data.tar.gz: e17010ea2587987f38dc6236944c99c4790a380d87fcd994cc1462f5d184bee0
+  metadata.gz: a5c4864b0ecb92d3a9cceac946312495c0371449bbb2bc42077606bff30f704f
+  data.tar.gz: cb0dbfac5fb52318dafb2d07f9f8621d480220cd38bcef92d1d15eceac6b5784
 SHA512:
-  metadata.gz: ef13097e5f083e7741ecfddbce6b994b84697f1a5bc593e43cdce93bd41bab6b94da9864555a12908a419d4e4ff0836b2230085f495f30d155810bac87f0ef0b
-  data.tar.gz: 1c0e9c4a2e1f8d3cc6fdf3cd58103261f6271e445629e5f4e661f5d402f3525cc36fe717f1b86204640a0ffaeb25cb5171086645df15bab958781226f5fb2e75
+  metadata.gz: ccf07024fda631b0a2ee24a9a51f6dbf865cd93e8f9b141e6593d3512b478f119e8b2e43e7ed2a20730247c5752f2a4ffcdd4a4de58248b4bdb5c79cc8b5bc74
+  data.tar.gz: 9106591a4826bd84bbaa006dae1a6bec544313956e9775830363a1e356ec5a986ef9e173a93495dc9704c55f7ba862ef45dad2f81a1cd399a227979aab05c5a1

data/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## [1.9.1] — 2026-10-14
+
+### Fixed
+
+- The article description under the detail title uses `--type-prose`, the
+  same size as the body text. Family, weight, color, and spacing stay as
+  they were
+- Bordered and boxed read-more pills do not underline the label.
+  Plain text read-more links stay underlined. Focus still shows the
+  outline
+
+## [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/article.css

@@ -745,7 +745,7 @@ body.figure-lightbox-open {
 
 .article-sidebar-description {
   font-family: var(--font-body);
-  font-size: var(--type-body);
+  font-size: var(--type-prose);
   font-weight: var(--weight-body);
   line-height: var(--leading-body);
   letter-spacing: normal;

data/assets/css/base.css

@@ -1026,6 +1026,16 @@ a.ledger-chip:hover {
   text-decoration-color: color-mix(in srgb, var(--color-link-hover) 75%, transparent);
 }
 
+/* Pill read-more only. The box is the affordance, so the label line would
+   cross the border. Plain text read-more keeps the underline above.
+   Focus keeps the outline. */
+:is(.ledger-cta--emphasis, .ledger-cta--emphasis-alt):is(:link, :visited, :hover, :focus, :focus-visible, :active),
+:is(.home-featured-foot, .writing-lead-foot) :is(.home-featured-cta, .writing-lead-cta):is(:link, :visited, :hover, :focus, :focus-visible, :active),
+:is(.ledger-cta--emphasis, .ledger-cta--emphasis-alt):is(:link, :visited, :hover, :focus, :focus-visible, :active)>span:not(.ledger-cta-arrow):not(.ledger-cta-icon),
+:is(.home-featured-foot, .writing-lead-foot) :is(.home-featured-cta, .writing-lead-cta).ledger-cta:is(:link, :visited, :hover, :focus, :focus-visible, :active)>span:not(.ledger-cta-arrow):not(.ledger-cta-icon) {
+  text-decoration: none;
+}
+
 .ledger-cta-arrow {
   transition: transform var(--motion-duration-fast) var(--motion-ease-default);
 }

data/assets/css/ledger/detail.css

@@ -464,12 +464,11 @@ aside:has(> .text-detail-sidebar) {
 }
 
 /* Lead thesis. `description` is the article's own one-sentence claim — body
-   face and body size, in legend ink so it sits under the H1 without matching
-   the reading column. */
+   face at the prose size, in legend ink so it sits under the H1. */
 .text-detail-sidebar .article-sidebar-description {
   font-family: var(--font-body);
   font-style: normal;
-  font-size: var(--type-body);
+  font-size: var(--type-prose);
   font-weight: var(--weight-body);
   line-height: var(--leading-body);
   color: var(--color-legend);

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.1"
         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.1"
 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.1
 platform: ruby
 authors:
 - The Pandorga contributors