┌─ ASTRO ───────────────────────────────────────────────────────────────────[ COPY ]─┐
│ ---                                                                                │
│ import Pre from "../Pre/Pre.astro";                                                │
│ import { FRAME_W, MOBILE_FRAME_W } from "../../lib/config";                        │
│ import { layoutListing, type ListingRow, type Props } from "./GitListing";         │
│ import "./GitListing.scss";                                                        │
│                                                                                    │
│ const { entries, treeBase, blobBase, commitBase, isLinked } = Astro.props as Props │
│  & {                                                                               │
│   isLinked?: (e: (typeof entries)[number]) => boolean;                             │
│ };                                                                                 │
│ const variants: [string, ListingRow[]][] = [                                       │
│   ["frame-wide", layoutListing(entries, FRAME_W, treeBase, blobBase, commitBase, i │
│ sLinked)],                                                                         │
│   ["frame-narrow", layoutListing(entries, MOBILE_FRAME_W, treeBase, blobBase, comm │
│ itBase, isLinked)],                                                                │
│ ];                                                                                 │
│ ---                                                                                │
│ <div class="git-listing">                                                          │
│   {variants.map(([variant, rows]) =>                                               │
│     rows.map((r) => (                                                              │
│       <Pre class={variant}><a class="listing-link" href={r.href}>{r.name}</a>{r.ga │
│ p1}{r.subject                                                                      │
│         ? <a class="listing-subject" href={r.subjectHref}>{r.subject}</a>          │
│         : ""}{r.gap2}{r.date}</Pre>                                                │
│     ))                                                                             │
│   )}                                                                               │
│ </div>                                                                             │
└────────────────────────────────────────────────────────────────────────────────────┘

┌─ ASTRO ─────────────────────────────[ COPY ]─┐
│ ---                                          │
│ import Pre from "../Pre/Pre.astro";          │
│ import { FRAME_W, MOBILE_FRAME_W } from "../ │
│ ../lib/config";                              │
│ import { layoutListing, type ListingRow, typ │
│ e Props } from "./GitListing";               │
│ import "./GitListing.scss";                  │
│                                              │
│ const { entries, treeBase, blobBase, commitB │
│ ase, isLinked } = Astro.props as Props & {   │
│   isLinked?: (e: (typeof entries)[number]) = │
│ > boolean;                                   │
│ };                                           │
│ const variants: [string, ListingRow[]][] = [ │
│   ["frame-wide", layoutListing(entries, FRAM │
│ E_W, treeBase, blobBase, commitBase, isLinke │
│ d)],                                         │
│   ["frame-narrow", layoutListing(entries, MO │
│ BILE_FRAME_W, treeBase, blobBase, commitBase │
│ , isLinked)],                                │
│ ];                                           │
│ ---                                          │
│ <div class="git-listing">                    │
│   {variants.map(([variant, rows]) =>         │
│     rows.map((r) => (                        │
│       <Pre class={variant}><a class="listing │
│ -link" href={r.href}>{r.name}</a>{r.gap1}{r. │
│ subject                                      │
│         ? <a class="listing-subject" href={r │
│ .subjectHref}>{r.subject}</a>                │
│         : ""}{r.gap2}{r.date}</Pre>          │
│     ))                                       │
│   )}                                         │
│ </div>                                       │
└──────────────────────────────────────────────┘