From 70dda566255ee4e0338bd14e2a8be40ed969c874 Mon Sep 17 00:00:00 2001
From: Levi Neuwirth <ln@levineuwirth.org>
Date: Sat, 23 May 2026 12:06:35 -0400
Subject: [PATCH] Popups: render the source page's monogram in internal
 previews

Internal-page hover popups now show the source's monogram alongside
the title / abstract / metadata when one exists. Two-column grid is
gated on .has-monogram so popups for pieces without an authored mark
keep their default single-column body. The serialised SVG comes from
the rendered page's own .frontmatter-mark--monogram figure, excluded
when it is the symmetric-layout placeholder roundel so empty-slot
pieces do not get a fake mark in the preview.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 static/css/popups.css | 34 ++++++++++++++++++++++++++++++++++
 static/js/popups.js   | 15 ++++++++++++++-
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/static/css/popups.css b/static/css/popups.css
index 8e3b379..175af05 100644
--- a/static/css/popups.css
+++ b/static/css/popups.css
@@ -36,6 +36,40 @@
    SHARED POPUP CONTENT
    ============================================================ */
 
+/* Internal-page popups with a monogram render in two columns:
+   the monogram on the left, title + abstract + meta on the right.
+   Without a monogram, the body fills normally (default block flow). */
+.popup-internal.has-monogram {
+    display: grid;
+    grid-template-columns: 56px minmax(0, 1fr);
+    gap: 0.65rem;
+    align-items: start;
+}
+
+/* Source label spans both columns when a monogram is present so it
+   reads as the popup's source attribution, not as a column entry. */
+.popup-internal.has-monogram > .popup-source {
+    grid-column: 1 / -1;
+}
+
+.popup-monogram {
+    grid-column: 1;
+    line-height: 0;
+    color: var(--text);
+}
+
+.popup-monogram svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    color: inherit;
+}
+
+.popup-internal-body {
+    grid-column: 2;
+    min-width: 0;
+}
+
 .popup-title {
     font-weight: 600;
     color: var(--text);
diff --git a/static/js/popups.js b/static/js/popups.js
index 18c2a75..a5b863c 100644
--- a/static/js/popups.js
+++ b/static/js/popups.js
@@ -348,6 +348,16 @@
                 var titleEl = doc.querySelector('h1.page-title');
                 if (!titleEl) return null;
 
+                /* Monogram \u2014 only when the source page renders a real
+                   authored mark.svg (not the placeholder roundel that
+                   the empty-frontmatter slot uses for symmetric layout).
+                   Serialised as an outerHTML string and trusted as
+                   already-sanitised SVG produced by our own build. */
+                var monoEl = doc.querySelector(
+                    'figure.frontmatter-mark--monogram:not(.frontmatter-mark--placeholder) svg'
+                );
+                var mono   = monoEl ? monoEl.outerHTML : '';
+
                 /* Abstract */
                 var abstrEl  = doc.querySelector('.meta-description');
                 var abstract = abstrEl ? abstrEl.textContent.trim() : '';
@@ -375,13 +385,16 @@
                 ].filter(Boolean).join(' · ');
 
                 return store(href,
-                    '<div class="popup-internal">'
+                    '<div class="popup-internal' + (mono ? ' has-monogram' : '') + '">'
                     + srcHtml('internal', 'levineuwirth.org')
+                    + (mono    ? '<div class="popup-monogram" aria-hidden="true">' + mono + '</div>' : '')
+                    + '<div class="popup-internal-body">'
                     + (tags    ? '<div class="popup-tags">'     + esc(tags)     + '</div>' : '')
                     + '<div class="popup-title">'               + esc(titleEl.textContent.trim()) + '</div>'
                     + (authors ? '<div class="popup-authors">'  + esc(authors)  + '</div>' : '')
                     + (abstract ? '<div class="popup-abstract">' + esc(abstract) + '</div>' : '')
                     + (stats   ? '<div class="popup-meta">'     + esc(stats)    + '</div>' : '')
+                    + '</div>'
                     + '</div>');
             })
             .catch(function () { return null; });