explico 0.8.0 → 0.11.0

package/src/components/citation/CitationLayer.astro

@@ -1,40 +1,41 @@
 ---
 /**
- * Optional hover/pin panel for the inline `[n]` citation markers that the
- * `remarkCitation` adapter emits. The markers are real anchor links to the
- * on-page "References" list and work with no JavaScript; this island only
- * adds a quick look at the source without leaving the reader's place.
+ * Cards for the inline `[n]` citation markers that the `remarkCitation`
+ * adapter emits. The markers are real anchor links to the on-page
+ * "References" list and work with no JavaScript; this island only adds a
+ * quick look at the source without leaving the reader's place.
  *
  * It reads everything it shows from the page's own static markup — the
  * marker's `data-*` and the matching `#cite-n` reference-list item — so no
- * page serializes a second copy of the source database. Positioning, pin,
- * Escape, and outside-close come from the shared `HoverPanel` primitive.
+ * page serializes a second copy of the source database. Opening, pinning,
+ * Escape and placement come from the card manager (`../card-manager.ts`); a
+ * card per source, several at once.
  */
 import HoverPanel from '../HoverPanel.astro';
 ---
 
 <HoverPanel id="citation-panel" label="Source citation" data-citation-panel>
+  <p class="citation-panel-heading" slot="heading">
+    <span class="citation-panel-marker" data-panel-marker></span>
+    <span class="citation-panel-label" data-panel-label></span>
+  </p>
   <div class="citation-panel-body">
-    <p class="citation-panel-label" data-panel-label></p>
     <p class="citation-panel-locator" data-panel-locator hidden></p>
     <p class="citation-panel-status" data-panel-status hidden></p>
-    <a class="citation-panel-link" data-panel-link hidden>Open source link</a>
-    <a class="citation-panel-jump" data-panel-jump
-      >See it in the reference list</a
-    >
-    <button
-      class="citation-panel-pin"
-      type="button"
-      data-panel-pin
-      aria-pressed="false"
-    >
-      Pin
-    </button>
+    <p class="citation-panel-links">
+      <a class="citation-panel-link" data-panel-link hidden
+        >Go to the source<span aria-hidden="true" data-jump-arrow> ↗</span></a
+      >
+      <a class="citation-panel-jump" data-panel-jump
+        >Go to the reference list<span aria-hidden="true" data-jump-arrow> ↓</span></a
+      >
+    </p>
   </div>
 </HoverPanel>
 
 <script>
-  import { createHoverPanel, closestElement } from '../hover-panel';
+  import { cloneCardShell, registerCardSource } from '../card-manager';
+  import { wireJumpArrow } from '../card-jump';
   import { referenceLabelFromText } from '../../reference/citation-format.mjs';
 
   function setText(element: HTMLElement, value: string) {
@@ -42,38 +43,43 @@ import HoverPanel from '../HoverPanel.astro';
     element.hidden = value.length === 0;
   }
 
+  function closestElement(node: EventTarget | null, selector: string) {
+    return node instanceof Element ? node.closest<HTMLElement>(selector) : null;
+  }
+
   function setup() {
-    const panel = document.querySelector<HTMLElement>('[data-citation-panel]');
-    if (!panel || panel.dataset.hoverPanelReady === 'true') return;
-
-    const markers = Array.from(
-      document.querySelectorAll<HTMLAnchorElement>(
-        '.sl-markdown-content a.citation-ref[data-citation-id]',
-      ),
-    );
-    if (markers.length === 0) return;
-    const markerSet = new Set<HTMLElement>(markers);
-
-    const label = panel.querySelector<HTMLElement>('[data-panel-label]')!;
-    const locator = panel.querySelector<HTMLElement>('[data-panel-locator]')!;
-    const status = panel.querySelector<HTMLElement>('[data-panel-status]')!;
-    const link = panel.querySelector<HTMLAnchorElement>('[data-panel-link]')!;
-    const jump = panel.querySelector<HTMLAnchorElement>('[data-panel-jump]')!;
-    const pin = panel.querySelector<HTMLButtonElement>('[data-panel-pin]')!;
+    const template = document.getElementById('citation-panel');
+    if (
+      !(template instanceof HTMLTemplateElement) ||
+      template.dataset.cardSourceReady === 'true' ||
+      !document.querySelector('a.citation-ref[data-citation-id]')
+    ) {
+      return;
+    }
+    template.dataset.cardSourceReady = 'true';
 
+    // A marker anywhere this page's reference list explains it: the article,
+    // or a card previewing part of it. A card cloned from another page
+    // (`data-card-foreign`) numbers its sources by that page's list.
     const markerFrom = (node: EventTarget | null) => {
-      const candidate = closestElement(
-        node,
-        'a.citation-ref[data-citation-id]',
-      );
-      return candidate && markerSet.has(candidate) ? candidate : null;
+      const candidate = closestElement(node, 'a.citation-ref[data-citation-id]');
+      return candidate && !candidate.closest('[data-card-foreign]') ? candidate : null;
     };
 
-    // Fill the panel from the marker plus its `#cite-n` reference-list item —
+    // Fill a card from the marker plus its `#cite-n` reference-list item —
     // never from a serialized source table.
-    const render = (marker: HTMLElement, number: string) => {
+    const render = (number: string, marker: HTMLElement) => {
       const item = document.getElementById(`cite-${number}`);
-      if (!item) return false;
+      const el = cloneCardShell(template);
+      if (!item || !el) return null;
+      const field = (name: string) => el.querySelector<HTMLElement>(`[data-panel-${name}]`);
+      const markerEl = field('marker');
+      const label = field('label');
+      const locator = field('locator');
+      const status = field('status');
+      const link = el.querySelector<HTMLAnchorElement>('[data-panel-link]');
+      const jump = el.querySelector<HTMLAnchorElement>('[data-panel-jump]');
+      if (!markerEl || !label || !locator || !status || !link || !jump) return null;
 
       // The reference list is a tight list, so the `<li>` has no `<p>`
       // wrapper: clone it and drop the trailing link/status chrome.
@@ -86,8 +92,10 @@ import HoverPanel from '../HoverPanel.astro';
       const referenceText = line.textContent ?? '';
       const loc = marker.dataset.citationLocator ?? '';
 
+      markerEl.textContent = `[${number}]`;
       label.textContent = referenceLabelFromText(referenceText, loc);
       setText(locator, loc);
+      el.setAttribute('aria-label', `Source citation ${number}`);
 
       const sourceStatus = item
         .querySelector('.citation-status')
@@ -97,27 +105,23 @@ import HoverPanel from '../HoverPanel.astro';
       const sourceUrl = item.querySelector<HTMLAnchorElement>('a.citation-url');
       if (sourceUrl) {
         link.href = sourceUrl.href;
+        wireJumpArrow(link);
         link.hidden = false;
-      } else {
-        link.hidden = true;
       }
 
       jump.href = marker.getAttribute('href') ?? '#references';
-      return true;
+      wireJumpArrow(jump);
+      return el;
     };
 
-    createHoverPanel({
-      panel,
-      groupId: 'citation',
+    registerCardSource({
+      layer: 'citation',
       triggerFrom: markerFrom,
-      keyFor: (element) => element.dataset.citationNumber ?? null,
-      render,
-      pinControlFrom: (node) => closestElement(node, '[data-panel-pin]'),
-      onSync: ({ pinnedKey }) => {
-        const isPinned = pinnedKey !== null;
-        pin.setAttribute('aria-pressed', String(isPinned));
-        pin.textContent = isPinned ? 'Unpin' : 'Pin';
+      itemFor: (marker) => {
+        const number = marker.dataset.citationNumber;
+        return number && document.getElementById(`cite-${number}`) ? number : null;
       },
+      render,
     });
   }
 
@@ -127,11 +131,22 @@ import HoverPanel from '../HoverPanel.astro';
 
 <style>
   @layer starlight.components {
+    .citation-panel-heading,
     .citation-panel-body p {
       margin: 0 0 0.5rem;
       line-height: 1.5;
     }
 
+    .citation-panel-heading {
+      margin: 0;
+    }
+
+    .citation-panel-marker {
+      margin-inline-end: 0.4rem;
+      color: var(--sl-color-text-accent);
+      font-variant-numeric: tabular-nums;
+    }
+
     .citation-panel-label {
       font-weight: 600;
     }
@@ -146,29 +161,15 @@ import HoverPanel from '../HoverPanel.astro';
       text-transform: lowercase;
     }
 
+    .citation-panel-body .citation-panel-links {
+      margin: 0;
+    }
+
     .citation-panel-link,
     .citation-panel-jump {
       display: inline-block;
       margin-inline-end: 0.9rem;
       font-size: var(--sl-text-xs);
     }
-
-    .citation-panel-pin {
-      display: block;
-      margin-top: 0.6rem;
-      padding: 0.2rem 0.6rem;
-      border: 1px solid var(--sl-color-gray-5);
-      border-radius: 0.35rem;
-      background: var(--sl-color-bg);
-      color: var(--sl-color-text-accent);
-      font: inherit;
-      font-size: var(--sl-text-xs);
-      cursor: pointer;
-    }
-
-    .citation-panel-pin[aria-pressed='true'] {
-      border-color: var(--sl-color-accent);
-      background: var(--sl-color-accent-low);
-    }
   }
 </style>