pandorga 1.14.0 → 2.0.0

data/assets/css/ledger/projects.css

@@ -161,23 +161,16 @@
   overflow: hidden;
   display: grid;
   background: var(--color-surface-card);
-  border: 1px solid var(--border-gentle-subtle);
-  border-left: 3px solid var(--color-primary);
+  border: 1px solid var(--border-ink);
+  border-top: 2px solid var(--color-primary);
   margin-bottom: var(--space-3xl);
   transition: border-color var(--motion-duration-fast) var(--motion-ease-default);
 }
 
 .projects-page .projects-lead:hover {
   border-color: var(--border-gentle-hover);
-  border-left-color: var(--color-primary);
-}
-
-.projects-page .projects-lead-shard {
-  right: -5rem;
-  top: -5rem;
-  width: 18rem;
-  height: 18rem;
-  background: var(--color-primary);
+  /* Keep the primary top rule; the shorthand above would repaint it. */
+  border-top-color: var(--color-primary);
 }
 
 .projects-page .projects-lead-media {
@@ -420,14 +413,6 @@
   margin-bottom: var(--space-2xl);
 }
 
-.projects-page .projects-hero-shard {
-  right: -4rem;
-  bottom: -6rem;
-  width: 16rem;
-  height: 16rem;
-  background: var(--color-secondary);
-}
-
 .projects-page .projects-hero-body {
   position: relative;
   z-index: 1;
@@ -542,6 +527,19 @@
    reason recorded in the layout: at tablet width the dossier is narrow enough
    to break a repository slug across three lines mid-word. */
 @media (max-width: 767px) {
+  .projects-page .projects-lead-body {
+    padding: var(--space-md);
+  }
+
+  .projects-page .projects-grid {
+    gap: var(--space-md);
+  }
+
+  .projects-page .ledger-system-card>.ledger-poster,
+  .projects-page .ledger-system-card>.projects-plate {
+    margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) 0;
+  }
+
   .projects-page .projects-hero-body {
     padding: var(--space-lg);
   }

data/assets/css/ledger/rascunhos.css

@@ -25,33 +25,6 @@
   margin-bottom: var(--space-2xl);
 }
 
-/* Sized to the masthead it accents. It used to be 24rem x 15rem, which fitted
-   while the filter deck was a strip under the title and made the masthead
-   260px tall; with the filter moved into the rail the masthead is 107px and a
-   15rem shard hung 50px into the body, cutting across the rail's keyword box.
-   An accent that reaches the content it is accenting is not an accent. */
-.rascunhos-shard {
-  top: calc(-1 * var(--space-2xl));
-  right: calc(-1 * var(--space-xl));
-  width: 16rem;
-  height: 9rem;
-  /* Page accent (ochre via `.page-accent--ochre`), not the triad secondary. */
-  background: var(--color-primary);
-}
-
-/* Between the 640px shard cut-off and the desktop layout a 24rem shard is
-   wider than the masthead is tall: at 768px it covered the title and the
-   standfirst and read as a mis-clipped slab rather than a corner accent. The
-   writing lead and the CV dossier carry the same correction. */
-@media (max-width: 1023px) {
-  .rascunhos-shard {
-    top: calc(-1 * var(--space-xl));
-    right: calc(-1 * var(--space-lg));
-    width: 12rem;
-    height: 8rem;
-  }
-}
-
 .rascunhos-header {
   position: relative;
   z-index: 1;

data/assets/css/ledger/sources.css

@@ -7,32 +7,11 @@
    `language`, and the publisher host from `link`. Every colour is a token, so
    both palettes resolve from the same rules. */
 
-/* ── Shards ──
-   The page had no depth treatment of any kind, and it is the wrong shape for
-   the ambient pool the home bands carry: a pool behind a grid of many small
-   cards only darkens one corner of it. Shards instead, the two canonical
-   polygons from base.css, one at each end of the run — top right above the
-   grid, bottom left below it, the diagonal pair the CV dossier uses inside
-   one panel, opened out across the page. In dark the source cards stay
-   opaque so the shard reads in the gutter, not through the poster.
-
-   Neither container takes `overflow: hidden`: the masthead holds the filter
-   popover, which would be clipped by it. The offsets are therefore sized to
-   stay inside the page's own gutter at every width the shards survive, the
-   way the rascunhos masthead does it. The shared utility already unmounts
-   both below 640px. */
-/* The masthead outranks the grid because the filter popover opens out of it.
-   Lifting the header over its own shard puts the popover inside a stacking
-   context, and the grid below has to be lifted over the foot shard in the
-   same way — without this the cards would be painted over an open filter
-   panel. */
 .sources-masthead {
   position: relative;
   z-index: 2;
 }
 
-
-
 .sources-header {
   position: relative;
   z-index: 1;
@@ -43,14 +22,6 @@
   opacity: 0.85;
 }
 
-.sources-masthead-shard {
-  top: calc(-1 * var(--space-2xl));
-  right: calc(-1 * var(--space-xl));
-  width: 16rem;
-  height: 9rem;
-  background: var(--color-primary);
-}
-
 .sources-body {
   position: relative;
 }
@@ -65,34 +36,6 @@
   z-index: 1;
 }
 
-/* The foot of the page, beside the pagination. It reaches up behind the last
-   row of cards. In dark those cards are opaque again, so what shows is the
-   wedge in the gutter and the band across the pagination strip. */
-.sources-foot-shard {
-  left: calc(-1 * var(--space-xl));
-  bottom: calc(-1 * var(--space-lg));
-  width: 14rem;
-  height: 8rem;
-  background: color-mix(in srgb, var(--color-primary) 70%, transparent);
-}
-
-/* Below the desktop layout the page gutter halves, so the shards have to come
-   back inside it or they widen the document. */
-@media (max-width: 1023px) {
-  .sources-masthead-shard {
-    top: calc(-1 * var(--space-xl));
-    right: calc(-1 * var(--space-lg));
-    width: 12rem;
-    height: 8rem;
-  }
-
-  .sources-foot-shard {
-    left: calc(-1 * var(--space-lg));
-    width: 10rem;
-    height: 7rem;
-  }
-}
-
 /* Pagination hides rather than unmounts, so the cards keep their identity
    between pages and the filter only has to toggle a class. */
 .resource-hidden {

data/assets/css/ledger/writing.css

@@ -59,40 +59,6 @@
   }
 }
 
-/* The mockup filled the right of this panel with a fabricated proof figure.
-   A shard bleeding off the corner holds that weight instead.
-
-   This used to be a single 19rem wedge at the top right, stood down whenever
-   the entry carried a thumbnail — and the panel picks the first entry that
-   *has* a thumbnail, so the condition was always true and the shard never
-   rendered on a built page. It is a pair now, placed around the plate rather
-   than instead of it.
-
-   The alpha sits bottom left, under the foot of the copy, the one corner the
-   plate never reaches at any width. The beta is a true corner accent at the
-   top right: it is offset far enough up that its visible part is the triangle
-   above the plate's top edge, and it tucks behind the plate as it descends
-   rather than fighting it. Neither corner repeats the home panel's pair, and
-   the hues are the only two this page has — `.page-accent--green` rebinds
-   primary onto secondary, so green and ochre is the whole palette here. */
-.writing-index .writing-lead-shard {
-  left: -3.5rem;
-  bottom: -4rem;
-  width: 12rem;
-  height: 12rem;
-  background: var(--color-primary);
-}
-
-.writing-index .writing-lead-shard--beta {
-  left: auto;
-  right: -4rem;
-  bottom: auto;
-  top: -5rem;
-  width: 10rem;
-  height: 10rem;
-  background: var(--color-tertiary);
-}
-
 .writing-index .writing-lead-inner {
   position: relative;
   z-index: 1;
@@ -739,34 +705,6 @@ html[data-theme="light"] .writing-index .writing-lead-media .ledger-poster {
   }
 }
 
-/* Between the 640px shard cut-off and the desktop layout the panel is narrow
-   enough that a shard sized for the wide card reaches the middle of it: at
-   768px the 19rem one this started as ran straight through the lead headline.
-   Back to corner accents. The CV dossier and the rascunhos masthead carry the
-   same correction. Both corners are restated, not just the size, because the
-   base rule sets one of `top`/`bottom` and `left`/`right` to `auto` on the
-   beta and a size-only override would leave the pair half-placed: the beta
-   carries both class names, so the alpha rule matches it too, and an element
-   left with all four offsets set resolves to top and left, which drops the
-   pair into a single corner. */
-@media (max-width: 1023px) {
-  .writing-index .writing-lead-shard {
-    left: -2.5rem;
-    bottom: -3rem;
-    width: 8.5rem;
-    height: 8.5rem;
-  }
-
-  .writing-index .writing-lead-shard--beta {
-    left: auto;
-    bottom: auto;
-    right: -3rem;
-    top: -3.5rem;
-    width: 7.5rem;
-    height: 7.5rem;
-  }
-}
-
 /* Pagination count face/size live on `.pagination-count` in base.css. */
 
 /* global-link.css underlines any <a> hovered inside an <article>, which would

data/lib/pandorga/commands/new.rb

@@ -22,9 +22,9 @@ module Pandorga
 
         source "https://rubygems.org"
 
-        gem "pandorga", "~> 1.3"
+        gem "pandorga", "~> 2.0"
         # Local checkout: gem "pandorga", path: "../pandorga"
-        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v1.14.0"
+        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v2.0.0"
         gem "csv"
         gem "base64"
       RUBY

data/lib/pandorga/commands/thumbnails.rb

@@ -5,8 +5,9 @@ require_relative "../thumbnail_variants"
 
 module Pandorga
   module Commands
-    # Generate 16:9 center-cropped width variants for local project thumbnails.
-    # Refs: PLT-AC-44
+    # Generate 16:9 center-cropped width variants for local project thumbnails
+    # and the home hero photographs.
+    # Refs: PLT-AC-44, PLT-AC-51
     class Thumbnails
       def run(argv)
         site_root = Pathname.new(argv[0] || Dir.pwd).expand_path

data/lib/pandorga/registry/schema.yml

@@ -49,9 +49,6 @@ 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. At or below 767px it is used only when no `pages/home/portraits.json` entry has its own `landscape` URL. Home front matter `hero_landscape` overrides this key. Omitted, and with no entry landscape, the phone plate stays 3:4
 
 fonts:
   title: "`pandorga.fonts`"

data/lib/pandorga/thumbnail_variants.rb

@@ -12,8 +12,8 @@ require_relative "registry"
 
 module Pandorga
   # Generates 16:9 center-cropped width variants for local project thumbnails
-  # and computes their srcset strings.
-  # Refs: PLT-AC-44
+  # and the home hero photographs, and computes their srcset strings.
+  # Refs: PLT-AC-44, PLT-AC-51
   module ThumbnailVariants
     WIDTHS = [480, 960, 1440].freeze
     IMAGE_EXTENSIONS = %w[.jpg .jpeg .png .webp].freeze
@@ -25,6 +25,9 @@ module Pandorga
       root = Pathname.new(site_root).expand_path
       content_root = resolve_content_root(root)
       sources = project_thumbnail_sources(root, content_root)
+      hero_sources(content_root).each do |src|
+        sources << src unless sources.any? { |known| known.expand_path == src.expand_path }
+      end
 
       summary = { sources: sources.length, written: 0, skipped: 0, failed: 0 }
       return summary if sources.empty?
@@ -55,7 +58,10 @@ module Pandorga
           end
 
           dest = variants_dir.join("#{stem}-#{width}.jpg")
-          if dest.file? && dest.mtime >= src_mtime
+          # A newer variant is kept only when it is already this 16:9 size.
+          # Hero variants used to be 3:4 under the same names.
+          if dest.file? && dest.mtime >= src_mtime &&
+             identify_size(bins[:identify], dest) == [width, (width * 9) / 16]
             summary[:skipped] += 1
             next
           end
@@ -159,6 +165,16 @@ module Pandorga
       sources
     end
 
+    # Every image directly in media/images/hero/ (the hero pool, PLT-AC-51).
+    def hero_sources(content_root)
+      dir = Pathname.new(content_root).join("media/images/hero")
+      return [] unless dir.directory?
+
+      dir.children.select do |path|
+        path.file? && IMAGE_EXTENSIONS.include?(path.extname.downcase)
+      end.sort_by { |path| path.basename.to_s }
+    end
+
     def normalize_local_media_path(path)
       value = path.to_s.strip
       return nil if value.empty?
@@ -237,6 +253,16 @@ module Pandorga
       nil
     end
 
+    def identify_size(identify_cmd, src)
+      cmd = [*identify_cmd, "-ping", "-format", "%w %h", "#{src}[0]"]
+      out, _err, status = Open3.capture3(*cmd)
+      return nil unless status.success?
+
+      out.to_s.split.map(&:to_i)
+    rescue StandardError
+      nil
+    end
+
     def write_variant(convert_cmd, src, dest, width)
       height = (width * 9) / 16
       FileUtils.mkdir_p(dest.dirname)

data/lib/pandorga/version.rb

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

data/scripts/check_home_lists.mjs

@@ -172,7 +172,12 @@ function filled(result) {
   return result.projects > 0 && result.articles > 0 && result.posts > 0;
 }
 
-async function main() {
+// On the runner Chrome sometimes never opens its DevTools port (the dbus
+// noise in its stderr is unrelated). A second launch with a fresh profile
+// and port gets past that; the list checks below do not change.
+const LAUNCH_ATTEMPTS = 2;
+
+async function launchChrome() {
   const profile = await mkdtemp(join(tmpdir(), 'pandorga-home-'));
   const port = await freePort();
   const chrome = spawn(chromePath, [
@@ -187,10 +192,35 @@ async function main() {
     `--user-data-dir=${profile}`,
     'about:blank'
   ], { stdio: ['ignore', 'ignore', 'pipe'] });
+  return { chrome, profile, port };
+}
+
+async function stopChrome(chrome, profile) {
+  chrome.kill('SIGKILL');
+  await delay(100);
+  await rm(profile, { recursive: true, force: true });
+}
+
+async function main() {
+  let chrome;
+  let profile;
+  let version;
+  for (let launch = 1; launch <= LAUNCH_ATTEMPTS; launch += 1) {
+    const started = await launchChrome();
+    chrome = started.chrome;
+    profile = started.profile;
+    try {
+      version = await waitForDevtools(started.port, chrome, profile);
+      break;
+    } catch (error) {
+      await stopChrome(chrome, profile);
+      if (launch === LAUNCH_ATTEMPTS) throw error;
+      console.error(`WARN: ${error.message.split('\n')[0].slice(0, 200)}; launching Chrome again`);
+    }
+  }
 
   let failed = false;
   try {
-    const version = await waitForDevtools(port, chrome, profile);
     const ws = await openSocket(version.webSocketDebuggerUrl);
     const browser = new Cdp(ws);
     const created = await browser.send('Target.createTarget', { url: 'about:blank' });
@@ -223,9 +253,7 @@ async function main() {
     }
     ws.close();
   } finally {
-    chrome.kill('SIGKILL');
-    await delay(100);
-    await rm(profile, { recursive: true, force: true });
+    await stopChrome(chrome, profile);
   }
 
   if (failed) process.exit(1);

data/scripts/content/hero_portraits.rb

@@ -3,22 +3,20 @@
 # The home hero pool is the folder. The content export writes the public
 # 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 16:9 file for a narrow
-# viewport is the optional `landscape` field on a portraits.json entry.
-# pandorga.home.hero_landscape is only the fallback when no entry has one.
+# The plate is 16:9 at every width (PLT-AC-51). The export writes 16:9 width
+# variants under variants/ with the project thumbnail generator
+# (Pandorga::ThumbnailVariants), so they are not extra draws. An entry lists
+# only the variants that are 16:9: the old 3:4 hero variants had the same
+# names and must not reach srcset when ImageMagick could not replace them.
 
 require "pathname"
 
 module HeroPortraits
   IMAGE_EXTENSIONS = %w[.jpg .jpeg .png .webp .gif].freeze
   WIDTHS = [480, 960, 1440].freeze
-  # 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"
+  # Below 1024px the plate spans the column (edge to edge on a phone); from
+  # 1024px it takes a little under half the row.
+  SIZES = "(max-width: 1023px) 100vw, 50vw"
 
   module_function
 
@@ -29,7 +27,7 @@ module HeroPortraits
       stem = file.basename.to_s.sub(/\.[^.]+\z/, "")
       parts = WIDTHS.filter_map do |width|
         variant = root.join("media/images/hero/variants/#{stem}-#{width}.jpg")
-        next unless variant.file?
+        next unless variant.file? && wide?(variant)
 
         "/media/images/hero/variants/#{variant.basename} #{width}w"
       end
@@ -47,4 +45,54 @@ module HeroPortraits
       path.file? && IMAGE_EXTENSIONS.include?(path.extname.downcase)
     end.sort_by { |path| path.basename.to_s }
   end
+
+  # True when the file is 16:9 to within a pixel.
+  def wide?(path)
+    size = image_size(path)
+    return false unless size
+
+    width, height = size
+    width.positive? && (height - (width * 9 / 16.0)).abs <= 1
+  end
+
+  # [width, height] from a JPEG or PNG header, sniffed by content, or nil.
+  def image_size(path)
+    File.open(path, "rb") do |io|
+      head = io.read(24).to_s
+      if head.start_with?("\x89PNG\r\n\x1A\n".b) && head.byteslice(12, 4) == "IHDR"
+        return head.byteslice(16, 8).unpack("NN")
+      end
+      return nil unless head.start_with?("\xFF\xD8".b)
+
+      jpeg_size(io)
+    end
+  rescue StandardError
+    nil
+  end
+
+  def jpeg_size(io)
+    io.seek(2)
+    loop do
+      byte = io.read(1)
+      return nil unless byte
+      next unless byte.ord == 0xFF
+
+      marker = io.read(1)&.ord
+      return nil unless marker
+      next if marker == 0xFF || marker == 0x01 || (0xD0..0xD8).cover?(marker)
+      return nil if marker == 0xD9 || marker == 0xDA
+
+      length = io.read(2)&.unpack1("n")
+      return nil unless length && length >= 2
+
+      if (0xC0..0xCF).cover?(marker) && ![0xC4, 0xC8, 0xCC].include?(marker)
+        data = io.read(5)
+        return nil unless data && data.bytesize == 5
+
+        height, width = data.byteslice(1, 4).unpack("nn")
+        return [width, height]
+      end
+      io.seek(length - 2, IO::SEEK_CUR)
+    end
+  end
 end

data/scripts/test/test-css-structure.rb

@@ -84,7 +84,6 @@ sheets.each do |path|
     ledger-section-rule
     home-band--ruled
     home-index-shard--gamma
-    home-index-note
     post-content
     home-hero-pandorga-svg
     table-csv