┌─ ASTRO ───────────────────────────────────────────────────────────────────[ COPY ]─┐
│ ---                                                                                │
│ import Pre from "../Pre/Pre.astro";                                                │
│ import Button from "../Button/Button.astro";                                       │
│ import { buttonWidth } from "../Button/Button";                                    │
│ import { FRAME_W, MOBILE_FRAME_W } from "../../lib/config";                        │
│ import type { Props } from "./ArticlePagination";                                  │
│                                                                                    │
│ const { prev = null, next = null } = Astro.props as Props;                         │
│                                                                                    │
│ // ASCII < > rather than ?/?: the fontsource Cascadia latin subset only            │
│ // ships U+2191/U+2193, so horizontal arrows fall off-grid.                        │
│ const prevLabel = prev ? `< ${prev.note}` : null;                                  │
│ const nextLabel = next ? `${next.note} >` : null;                                  │
│ const gap = (w: number) =>                                                         │
│   Math.max(1, w - (prevLabel ? buttonWidth(prevLabel) : 0) - (nextLabel ? buttonWi │
│ dth(nextLabel) : 0));                                                              │
│ ---                                                                                │
│ {(prev || next) && (                                                               │
│   <nav class="article-pagination" aria-label="Adjacent notes">                     │
│     <Pre class="frame-wide">{prevLabel && prev && <Button label={prevLabel} href={ │
│ prev.href} />}{" ".repeat(gap(FRAME_W))}{nextLabel && next && <Button label={nextL │
│ abel} href={next.href} />}</Pre>                                                   │
│     <Pre class="frame-narrow">{prevLabel && prev && <Button label={prevLabel} href │
│ ={prev.href} />}{" ".repeat(gap(MOBILE_FRAME_W))}{nextLabel && next && <Button lab │
│ el={nextLabel} href={next.href} />}</Pre>                                          │
│   </nav>                                                                           │
│ )}                                                                                 │
└────────────────────────────────────────────────────────────────────────────────────┘

┌─ ASTRO ─────────────────────────────[ COPY ]─┐
│ ---                                          │
│ import Pre from "../Pre/Pre.astro";          │
│ import Button from "../Button/Button.astro"; │
│ import { buttonWidth } from "../Button/Butto │
│ n";                                          │
│ import { FRAME_W, MOBILE_FRAME_W } from "../ │
│ ../lib/config";                              │
│ import type { Props } from "./ArticlePaginat │
│ ion";                                        │
│                                              │
│ const { prev = null, next = null } = Astro.p │
│ rops as Props;                               │
│                                              │
│ // ASCII < > rather than ?/?: the fontsource │
│  Cascadia latin subset only                  │
│ // ships U+2191/U+2193, so horizontal arrows │
│  fall off-grid.                              │
│ const prevLabel = prev ? `< ${prev.note}` :  │
│ null;                                        │
│ const nextLabel = next ? `${next.note} >` :  │
│ null;                                        │
│ const gap = (w: number) =>                   │
│   Math.max(1, w - (prevLabel ? buttonWidth(p │
│ revLabel) : 0) - (nextLabel ? buttonWidth(ne │
│ xtLabel) : 0));                              │
│ ---                                          │
│ {(prev || next) && (                         │
│   <nav class="article-pagination" aria-label │
│ ="Adjacent notes">                           │
│     <Pre class="frame-wide">{prevLabel && pr │
│ ev && <Button label={prevLabel} href={prev.h │
│ ref} />}{" ".repeat(gap(FRAME_W))}{nextLabel │
│  && next && <Button label={nextLabel} href={ │
│ next.href} />}</Pre>                         │
│     <Pre class="frame-narrow">{prevLabel &&  │
│ prev && <Button label={prevLabel} href={prev │
│ .href} />}{" ".repeat(gap(MOBILE_FRAME_W))}{ │
│ nextLabel && next && <Button label={nextLabe │
│ l} href={next.href} />}</Pre>                │
│   </nav>                                     │
│ )}                                           │
└──────────────────────────────────────────────┘