pandorga 1.7.4 → 1.7.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8935cbf5ca2ee93ea990c5e18d61831877f04f03b3ba569b3d4347dec3387718
-  data.tar.gz: 5c9663302fcce8b2ecf4a5197b03ca66f1f0cca0c7eb2ee0b9d9c9ab2d5e320e
+  metadata.gz: b5073aa0e7217490eff99e42008ea7eb10fdd6d5f7218d924d7ede563a77c2f4
+  data.tar.gz: 38b8947ef41f97e1e1c6c6c2d2048fd5a16ebd1a441d4dc6ae62a9b5237582c1
 SHA512:
-  metadata.gz: ba771e313ba7ecbc5d13473c75454468d22d18f6f2ec1d22ca896d3bf9bec124aa9b32f5efff0dce38c7495a20a422110313910d56808f7b123ce4e07b29e322
-  data.tar.gz: b29d2e32efc698af41f0fdcf7b9da605adfbc238a249dd050c157103493b9305e9fb71a355f919e8189a4a43d41b76b25df2a96b446627a3ba6380f6631fc1f5
+  metadata.gz: 73d9948f8662e076b4f652697969ed7da53c108b336efea4b91c497310c7332f3c82f3d4ee854f6630a248c27356d219b6d50ffec70e437b098340a1153b1ee0
+  data.tar.gz: b2dde560408d681b3cfcf3a4f5bc377542d1179b28279a19bbd065b8f7f9d04a994ebe7800a20645a18eb6562c9335d6e785f22f952d6c4b605c4f61f1ad912e

data/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## [1.7.6] — 2026-10-12
+
+### Fixed
+
+- A long inline formula scrolls inside the article column below 768px.
+  Display math was already contained, and a 390px phone still measured
+  scrollWidth 667 because `mjx-container` without `display="true"` is
+  `display: inline` and cannot scroll. Below 768px that box is
+  `inline-block`, `max-width: 100%`, `overflow-x: auto`, and
+  `overflow-y: hidden`. Wider viewports keep it inline. `html` and
+  `body` do not set overflow.
+
+No `pandorga:` config keys were added or renamed. Font roles and the
+ledger fallbacks are unchanged.
+
+## [1.7.5] — 2026-10-12
+
+### Fixed
+
+- A display equation scrolls inside the article column. On a 390px
+  viewport a MathJax display box about 455px wide was stretching the
+  document to a scrollWidth of 667, so the page moved sideways and the
+  sticky header scrolled with it. `mjx-container[display="true"]` and
+  `mjx-container[jax][display="true"]` are `max-width: 100%` with
+  `overflow-x: auto` and `overflow-y: hidden`. Tables, figures, and
+  article SVG are bounded to the column. Mermaid still scrolls inside
+  `.mermaid`. `html` and `body` do not set overflow, so the sticky
+  header still sticks.
+- A detail URL served by the listing shell had two `h1` elements: the
+  listing title (Articles, Rascunhos, Projects, Curriculum) and the
+  entry title. While the entry is showing, the listing heading is not
+  an `h1`. The document title is the entry title, and `html` `lang`
+  follows the entry (`en`, `pt-BR`, `fr`, `es`). Articles, posts,
+  projects, and products.
+
+No `pandorga:` config keys were added or renamed. Font roles and the
+ledger fallbacks are unchanged.
+
 ## [1.7.4] — 2026-10-12
 
 ### Fixed

data/_includes/content-runtime/50-detail.html

@@ -526,11 +526,71 @@
       el.setAttribute('href', url);
     }
 
+    /* The listing shell is one document for the index and every detail URL.
+       The static h1 is the index title ("Articles"). The runtime then paints
+       the entry title as a second h1. Demote the index heading while a detail
+       is showing so the document has one h1, and put it back for the index. */
+    var listingDocumentSnapshot = null;
+
+    function rememberListingDocument() {
+      if (listingDocumentSnapshot) return;
+      listingDocumentSnapshot = {
+        title: document.title,
+        lang: document.documentElement.getAttribute('lang') || ''
+      };
+    }
+
+    function concealListingHeader() {
+      var header = document.querySelector('[data-content-page-header]');
+      if (!header) return;
+      header.setAttribute('hidden', '');
+      var heading = header.querySelector('h1');
+      if (!heading) return;
+      var replacement = document.createElement('p');
+      replacement.className = heading.className;
+      replacement.setAttribute('data-listing-heading', 'demoted');
+      while (heading.firstChild) replacement.appendChild(heading.firstChild);
+      heading.replaceWith(replacement);
+    }
+
+    function restoreListingDocument() {
+      var header = document.querySelector('[data-content-page-header]');
+      if (header) {
+        header.removeAttribute('hidden');
+        var demoted = header.querySelector('[data-listing-heading="demoted"]');
+        if (demoted) {
+          var heading = document.createElement('h1');
+          heading.className = demoted.className;
+          while (demoted.firstChild) heading.appendChild(demoted.firstChild);
+          demoted.replaceWith(heading);
+        }
+      }
+      if (!listingDocumentSnapshot) return;
+      document.title = listingDocumentSnapshot.title;
+      document.documentElement.lang = listingDocumentSnapshot.lang;
+      listingDocumentSnapshot = null;
+    }
+
+    /* Site codes (enus, ptbr, en_us, pt_br) are not BCP-47. The html lang
+       attribute has to be. */
+    function htmlLangFromContent(language) {
+      var compact = String(language || '').trim().toLowerCase().replace(/[_-]/g, '');
+      if (!compact) return '';
+      var primary = compact.slice(0, 2);
+      if (primary === 'en') return 'en';
+      if (primary === 'pt') return 'pt-BR';
+      if (primary === 'fr') return 'fr';
+      if (primary === 'es') return 'es';
+      return '';
+    }
+
     function applyDocumentMeta(meta) {
       meta = meta || {};
       var siteSuffix = (window.ContentRuntimeConfig && window.ContentRuntimeConfig.siteSuffix) || '';
       var title = meta.title ? String(meta.title) + siteSuffix : document.title;
       document.title = title;
+      var htmlLang = htmlLangFromContent(meta.lang);
+      if (htmlLang) document.documentElement.lang = htmlLang;
       if (meta.description) setMetaTag('description', meta.description);
       setMetaTag('og:title', title, 'property');
       if (meta.description) setMetaTag('og:description', meta.description, 'property');
@@ -736,12 +796,15 @@
 
     async function renderRuntimeDetailSection(options) {
       var fm = options.frontMatter || {};
+      rememberListingDocument();
+      concealListingHeader();
       if (options.documentMeta !== false) {
         applyDocumentMeta({
           title: fm.title,
           description: fm.description,
           url: window.location.pathname,
-          image: fm.og_image || fm.thumbnail
+          image: fm.og_image || fm.thumbnail,
+          lang: fm.language || ((fm.layout === 'post' || options.detailAttribute === 'data-dynamic-post-detail') ? 'ptbr' : '')
         });
       }
       var section = document.createElement('section');

data/_includes/content-runtime/90-bootstrap.html

@@ -39,6 +39,7 @@
       insertRuntimeBackLink: insertRuntimeBackLink,
       removeRuntimeBackLink: removeRuntimeBackLink,
       renderRuntimeDetailSection: renderRuntimeDetailSection,
+      restoreListingDocument: restoreListingDocument,
       reportDetailLoadError: reportDetailLoadError,
       buildDetailActions: buildDetailActions,
       buildTextSidebar: buildTextSidebar,

data/_layouts/articles.html

@@ -434,6 +434,7 @@ layout: shell
       if (detailSidebar) detailSidebar.innerHTML = '';
       runtime.removeRuntimeBackLink();
       runtime.removeArticleToc();
+      runtime.restoreListingDocument();
     }
 
     async function renderArticleDetail(article, articles) {

data/_layouts/blog.html

@@ -425,6 +425,7 @@ layout: shell
       if (detailSidebar) detailSidebar.innerHTML = '';
       runtime.removeRuntimeBackLink();
       runtime.removeArticleToc();
+      runtime.restoreListingDocument();
     }
 
     async function renderPostDetail(post, posts) {

data/_layouts/cv.html

@@ -280,6 +280,7 @@ layout: shell
             if (detailMain) detailMain.innerHTML = '';
             if (detailSidebar) detailSidebar.innerHTML = '';
             runtime.removeRuntimeBackLink();
+            runtime.restoreListingDocument();
         }
 
         async function renderProductDetail(item) {

data/_layouts/projects.html

@@ -354,6 +354,7 @@ layout: shell
       if (detailHero) detailHero.innerHTML = '';
       runtime.removeArticleToc();
       runtime.removeRuntimeBackLink();
+      runtime.restoreListingDocument();
     }
 
     function renderListing(projects) {

data/assets/css/article.css

@@ -99,6 +99,23 @@
   vertical-align: baseline;
 }
 
+/* Below 768px a long inline formula is still `display: inline`, so it has
+   no scrollport and widens the document. Display math was already contained,
+   and a 390px phone still measured scrollWidth 667 from the inline boxes.
+   `inline-block` keeps the formula in the line and lets max-width and
+   overflow apply. `[jax]` stays ahead of MathJax's own container rule.
+   Desktop stays inline. Do not put this overflow on html or body. */
+@media (max-width: 767px) {
+  .article-content mjx-container:not([display="true"]),
+  .article-content mjx-container[jax]:not([display="true"]) {
+    display: inline-block;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    vertical-align: baseline;
+  }
+}
+
 /* A display equation is a block in the prose flow, so it takes the paragraph
    gap and nothing more. Two things used to inflate it, to a measured 52px
    above the equation and 39px below against a 22px paragraph gap.
@@ -112,44 +129,58 @@
    which outranks `.article-content mjx-container[display="true"]` on
    specificity. The 0.5rem this file asked for was never what the page drew.
 
-   So the wrapper owns the gap, the scroll and the padding; the container
-   inside it owns none of them. */
+   The wrapper owns the paragraph gap. The container owns the scroll. */
 .article-content .math-display {
   display: block;
+  max-width: 100%;
   /* The bottom gap is the paragraph gap `.article-content p` sets in
      ledger/detail.css; the top gap is left to the previous block, exactly as
      it is between two paragraphs. The negative top margin hands back the
-     padding below, which a margin collapse cannot absorb — the two are one
-     number, so change them together or the rhythm moves. */
+     container padding below, which a margin collapse cannot absorb. The two
+     are one number, so change them together or the rhythm moves. */
   margin: -1.25rem 0 calc(1.15em - 1.25rem);
-  /* overflow-x lets an over-wide equation scroll sideways. CSS forces
-     overflow-y to auto alongside it, so a bracket, radical or matrix rule that
-     MathJax draws past its own line box gets clipped, or grows a vertical
-     scrollbar it has no use for. The padding is the allowance for that
-     overshoot: 1.25rem clears the worst case on the object-centric article
-     (a 3-row bmatrix, measured at 12px past a 0.5rem allowance). It costs
-     nothing visually, because the margin above gives it straight back. */
-  padding: 1.25rem 0;
+  padding: 0;
   overflow-x: auto;
+  overflow-y: hidden;
   text-align: center;
 }
 
-/* `[jax]` is redundant as a selector — every MathJax container carries it —
-   but it lifts this rule past MathJax's own injected margin, which is the
-   whole point of the rule. */
+/* `[jax]` lifts this rule past MathJax's injected margin
+   (`mjx-container[jax="CHTML"][display="true"]`). The container is the clip
+   edge: on a 390px phone a display `mjx-math` about 455px wide was stretching
+   the document to a scrollWidth of 667, because this rule was
+   `overflow: visible`. The page then scrolled sideways and the sticky header
+   moved with it. `max-width: 100%` plus `overflow-x: auto` and
+   `overflow-y: hidden` scroll the equation inside the column, the way `pre`
+   already scrolls code. `overflow-y: hidden` is stated so a radical does not
+   grow a vertical scrollbar, and so a specified `visible` cannot let the
+   equation's min-content widen the column. The 1.25rem padding is the
+   allowance for a bracket, radical, or matrix rule MathJax draws past its
+   line box (a 3-row bmatrix, measured at 12px past a 0.5rem allowance).
+   Do not move this overflow onto `html` or `body`. That scrollport breaks
+   `position: sticky` on the header. */
 .article-content .math-display mjx-container[jax][display="true"] {
+  display: block;
   margin: 0;
-  padding: 0;
-  overflow: visible;
+  padding: 1.25rem 0;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  text-align: center;
 }
 
 /* Display math the wrapper regex cannot reach, because the `$$` sits inside a
    list item or a table cell rather than alone in a paragraph. It still has to
    break the line; its vertical margin stays MathJax's own 1em, which lands
-   within a pixel of the paragraph gap. */
-.article-content mjx-container[display="true"] {
+   within a pixel of the paragraph gap. `[jax]` names the same box. Every
+   MathJax container carries it, and the attribute keeps this rule ahead of
+   the injected stylesheet. */
+.article-content mjx-container[display="true"],
+.article-content mjx-container[jax][display="true"] {
   display: block;
+  max-width: 100%;
   overflow-x: auto;
+  overflow-y: hidden;
   text-align: center;
 }
 
@@ -248,7 +279,9 @@
 :is(.article-content, .article-cite-block) pre {
   background: var(--color-surface-container);
   padding: 1rem;
+  max-width: 100%;
   overflow-x: auto;
+  overflow-y: hidden;
   margin-bottom: 1rem;
   font-family: var(--font-code);
 }
@@ -359,11 +392,30 @@
   margin: 1.5rem auto;
   text-align: center;
   width: 100%;
+  max-width: 100%;
   display: block;
   background: var(--color-surface-container-low);
   padding: var(--space-md);
 }
 
+/* A wide SVG, video, or iframe must stay inside the plate. Cut-in plates
+   and YouTube shorts set a narrower max-width on a more specific rule.
+   Mermaid and display-math SVG opt back out below so those boxes scroll
+   instead of shrinking the drawing. Iframes keep their own height: `height:
+   auto` collapses a YouTube or Plotly frame that has no intrinsic ratio. */
+.article-content figure svg,
+.article-content svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.article-content figure video,
+.article-content figure iframe,
+.article-content figure canvas,
+.article-content iframe {
+  max-width: 100%;
+}
+
 .article-content figure img {
   margin-inline: auto;
 }
@@ -554,7 +606,9 @@ body.figure-lightbox-open {
   padding: var(--space-xl) var(--space-lg);
   background: var(--color-surface-container);
   text-align: center;
+  max-width: 100%;
   overflow-x: auto;
+  overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -567,6 +621,15 @@ body.figure-lightbox-open {
   height: auto;
 }
 
+/* SVG output of a display equation keeps its own width and scrolls inside
+   `mjx-container`. Inline math is not included: `display: block` here would
+   pull an inline equation out of the line. */
+.article-content mjx-container[display="true"] svg {
+  max-width: none;
+  width: auto;
+  height: auto;
+}
+
 /* Captions are sentences. The include centres the whole figure, and a centred
    paragraph of provenance is harder to read than a left-set one; the rule on
    the element itself beats the `text-center` utility the runtime emits. The
@@ -628,6 +691,7 @@ body.figure-lightbox-open {
 /* ── Tables ── */
 .article-content table {
   width: 100%;
+  max-width: 100%;
   border-collapse: collapse;
   margin-bottom: 1.5rem;
   font-size: var(--type-dek);

data/assets/css/ledger/detail.css

@@ -323,6 +323,17 @@ a.back-link .material-symbols-outlined {
 
    Every detail page uses this one rule, including the projects page, which
    only differs in holding the split back to 1024px (ledger/projects.css). */
+/* A grid item's automatic minimum is its widest child. A display equation
+   used to be that child, so the column grew past the viewport, the document
+   scrolled sideways, and the sticky header scrolled with it. The track is
+   already allowed to shrink (`minmax(0, 1fr)` from 768px, and `grid-cols-1`
+   below that). The item has to be allowed to shrink with it. Wide children
+   scroll inside their own boxes; this does not put overflow on `html` or
+   `body`. */
+.grid.text-detail-grid > * {
+  min-width: 0;
+}
+
 @media (min-width: 768px) {
   .grid.text-detail-grid {
     --detail-column-gap: 2rem;
@@ -1120,6 +1131,7 @@ nav.text-page-nav:not(:has(a)) {
     width: 100%;
     max-width: 100%;
     overflow-x: auto;
+    overflow-y: hidden;
   }
 
   .article-content th,

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.7.4"
+        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v1.7.6"
         gem "csv"
         gem "base64"
       RUBY

data/lib/pandorga/version.rb

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

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

@@ -99,6 +99,133 @@ sheets.each do |path|
   end
 end
 
+# PLT-AC-36. A display equation scrolls inside the article column. Overflow
+# on html or body would scroll the sticky header off the viewport.
+def declaration_bodies(css, selector)
+  wanted = selector.gsub(/\s+/, " ").strip
+  bodies = []
+  css.scan(/([^{}]+)\{([^{}]*)\}/m) do |sel, body|
+    parts = sel.split(",").map { |part| part.gsub(/\s+/, " ").strip }
+    bodies << body if parts.include?(wanted)
+  end
+  bodies
+end
+
+def declarations(body)
+  body.downcase.gsub(/\s+/, "")
+end
+
+def require_declarations(errors, label, css, selector, required)
+  bodies = declaration_bodies(css, selector)
+  if bodies.empty?
+    errors << "#{label}: missing #{selector}"
+    return
+  end
+
+  blob = bodies.map { |body| declarations(body) }.join(";")
+  required.each do |decl|
+    needle = decl.downcase.gsub(/\s+/, "")
+    next if blob.include?(needle)
+
+    errors << "#{label}: #{selector} missing #{decl}"
+  end
+end
+
+def strip_comments(source)
+  source.gsub(%r{/\*.*?\*/}m, "")
+end
+
+article_sheet = strip_comments(File.read(CSS_ROOT.join("article.css")))
+detail_sheet = strip_comments(File.read(CSS_ROOT.join("ledger/detail.css")))
+math_box = ["max-width: 100%", "overflow-x: auto", "overflow-y: hidden"]
+
+require_declarations(
+  errors, "assets/css/article.css", article_sheet,
+  ".article-content .math-display", math_box
+)
+require_declarations(
+  errors, "assets/css/article.css", article_sheet,
+  '.article-content .math-display mjx-container[jax][display="true"]', math_box
+)
+require_declarations(
+  errors, "assets/css/article.css", article_sheet,
+  '.article-content mjx-container[display="true"]', math_box
+)
+require_declarations(
+  errors, "assets/css/article.css", article_sheet,
+  '.article-content mjx-container[jax][display="true"]', math_box
+)
+
+if article_sheet.match?(/mjx-container[^{]*\{[^}]*overflow\s*:\s*visible/m)
+  errors << "assets/css/article.css: display math sets overflow: visible"
+end
+
+# PLT-AC-38. Inline formulas scroll inside the column below 768px. The
+# unscoped rule stays display:inline so a short formula on a wide column
+# remains in the line.
+inline_selector = '.article-content mjx-container:not([display="true"])'
+inline_jax = '.article-content mjx-container[jax]:not([display="true"])'
+inline_bodies = declaration_bodies(article_sheet, inline_selector)
+inline_base = inline_bodies.find { |body| body.match?(/display:\s*inline\s*;/) && !body.match?(/inline-block/) }
+unless inline_base
+  errors << "assets/css/article.css: #{inline_selector} must stay display:inline outside the phone query"
+end
+
+mobile_inline = nil
+article_sheet.scan(/@media\s*\(\s*max-width:\s*767px\s*\)\s*\{((?:[^{}]|\{[^{}]*\})*)\}/m) do |inner,|
+  mobile_inline = inner if inner.include?(inline_selector)
+end
+if mobile_inline.nil?
+  errors << "assets/css/article.css: inline math scroll is not limited to max-width 767px"
+else
+  require_declarations(errors, "assets/css/article.css", mobile_inline, inline_selector, math_box + ["display: inline-block"])
+  require_declarations(errors, "assets/css/article.css", mobile_inline, inline_jax, math_box + ["display: inline-block"])
+end
+
+require_declarations(
+  errors, "assets/css/article.css", article_sheet,
+  ".article-content figure", ["max-width: 100%"]
+)
+require_declarations(
+  errors, "assets/css/article.css", article_sheet,
+  ".article-content svg", ["max-width: 100%"]
+)
+require_declarations(
+  errors, "assets/css/article.css", article_sheet,
+  ".article-content .mermaid", math_box
+)
+require_declarations(
+  errors, "assets/css/article.css", article_sheet,
+  ".article-content .mermaid svg", ["max-width: none"]
+)
+require_declarations(
+  errors, "assets/css/article.css", article_sheet,
+  ".article-content table", ["max-width: 100%"]
+)
+require_declarations(
+  errors, "assets/css/ledger/detail.css", detail_sheet,
+  ".article-content table", ["max-width: 100%", "overflow-x: auto", "overflow-y: hidden"]
+)
+require_declarations(
+  errors, "assets/css/ledger/detail.css", detail_sheet,
+  ".grid.text-detail-grid > *", ["min-width: 0"]
+)
+
+sheets.each do |path|
+  relative = Pathname.new(path).relative_path_from(REPO_ROOT)
+  cleaned = strip_noise(File.read(path))
+  cleaned.scan(/([^{}]+)\{([^{}]*)\}/m) do |sel, body|
+    next unless body.match?(/overflow/i)
+
+    sel.split(",").each do |part|
+      name = part.gsub(/\s+/, " ").strip
+      next unless name == "html" || name == "body" || name == "html body"
+
+      errors << "#{relative}: #{name} sets overflow and would break the sticky header"
+    end
+  end
+end
+
 fail!("CSS structure problems:\n  - #{errors.join("\n  - ")}") unless errors.empty?
 
 puts "  #{sheets.size} stylesheet(s) balanced, no conflict markers."

data/scripts/test/test-shell-a11y.rb

@@ -54,4 +54,20 @@ ICON_FILES.each do |path|
   end
 end
 
+# PLT-AC-37. The listing shell keeps its index h1 in the document. A detail
+# URL then adds the entry title, so the page has two h1 elements. The runtime
+# demotes the index heading and sets the document title and lang from the entry.
+DETAIL = ROOT.join("_includes/content-runtime/50-detail.html").read
+BOOT = ROOT.join("_includes/content-runtime/90-bootstrap.html").read
+fail!("detail runtime does not demote the listing h1") unless DETAIL.include?("data-listing-heading") && DETAIL.include?("concealListingHeader")
+fail!("detail runtime does not restore the listing document") unless DETAIL.include?("function restoreListingDocument")
+fail!("detail runtime does not set html lang") unless DETAIL.include?("document.documentElement.lang")
+fail!("detail runtime dropped the entry title h1") unless DETAIL.include?('<h1 class="text-title">')
+fail!("restoreListingDocument is not on the runtime") unless BOOT.include?("restoreListingDocument: restoreListingDocument")
+
+%w[articles blog projects cv].each do |layout|
+  source = ROOT.join("_layouts/#{layout}.html").read
+  fail!("#{layout} listing does not restore the document") unless source.include?("restoreListingDocument()")
+end
+
 puts "PASS test-shell-a11y"

metadata

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