┌─ ASTRO ────────────────────────────────────────────────────────────────────┐
│ --- │
│ import Pre from "../Pre/Pre.astro"; │
│ import Frame from "../Frame/Frame.astro"; │
│ import Badge from "../Badge/Badge.astro"; │
│ import { pad, rule, ruleD } from "../../lib/ascii"; │
│ import { FRAME_W, MOBILE_FRAME_W } from "../../lib/config"; │
│ import { layoutMeta, layoutMetaTags, META_KEY_W, TAG_GAP, type MetaEntry, type Pro │
│ ps } from "./ArticleMeta"; │
│ │
│ const { entries, tags = [] } = Astro.props as Props; │
│ const upper = tags.map((t) => t.toUpperCase()); │
│ const tagHref = (t: string) => `/?q=${encodeURIComponent(t.toLowerCase())}`; │
│ const gapStr = " ".repeat(TAG_GAP); │
│ │
│ const variants: [string, MetaEntry[], string[][]][] = [ │
│ ["frame-wide", layoutMeta(entries, FRAME_W), layoutMetaTags(upper, FRAME_W)], │
│ ["frame-narrow", layoutMeta(entries, MOBILE_FRAME_W), layoutMetaTags(upper, MOBI │
│ LE_FRAME_W)], │
│ ]; │
│ --- │
│ <div class="article-meta"> │
│ <Frame build={(w) => [rule(w), ""].join("\n")} /> │
│ {variants.map(([variant, rows, tagRows]) => ( │
│ <Fragment> │
│ {rows.map((e) => ( │
│ <Pre class={variant}>{pad(e.key, META_KEY_W)}{e.href │
│ ? <a class="meta-link" href={e.href}>{e.value}</a> │
│ : e.value}</Pre> │
│ ))} │
│ {tagRows.map((row, i) => ( │
│ <Pre class={variant}>{pad(i === 0 ? "TAGS" : "", META_KEY_W)}{row.map((t, │
│ j) => ( │
│ <Fragment>{j > 0 ? gapStr : ""}<Badge label={t} href={tagHref(t)} /></Fr │
│ agment> │
│ ))}</Pre> │
│ ))} │
│ </Fragment> │
│ ))} │
│ <Frame build={(w) => ruleD(w)} /> │
│ </div> │
│ │
│ <style lang="scss"> │
│ .article-meta { │
│ display: block; │
│ │
│ .meta-link { │
│ color: var(--ink); │
│ text-decoration: underline; │
│ text-underline-offset: 3px; │
│ │
│ &:focus-visible { │
│ outline: 1px dashed var(--ink); │
│ outline-offset: 1px; │
│ } │
│ } │
│ } │
│ </style> │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ ASTRO ──────────────────────────────┐
│ --- │
│ import Pre from "../Pre/Pre.astro"; │
│ import Frame from "../Frame/Frame.astro"; │
│ import Badge from "../Badge/Badge.astro"; │
│ import { pad, rule, ruleD } from "../../lib/ │
│ ascii"; │
│ import { FRAME_W, MOBILE_FRAME_W } from "../ │
│ ../lib/config"; │
│ import { layoutMeta, layoutMetaTags, META_KE │
│ Y_W, TAG_GAP, type MetaEntry, type Props } f │
│ rom "./ArticleMeta"; │
│ │
│ const { entries, tags = [] } = Astro.props a │
│ s Props; │
│ const upper = tags.map((t) => t.toUpperCase( │
│ )); │
│ const tagHref = (t: string) => `/?q=${encode │
│ URIComponent(t.toLowerCase())}`; │
│ const gapStr = " ".repeat(TAG_GAP); │
│ │
│ const variants: [string, MetaEntry[], string │
│ [][]][] = [ │
│ ["frame-wide", layoutMeta(entries, FRAME_W │
│ ), layoutMetaTags(upper, FRAME_W)], │
│ ["frame-narrow", layoutMeta(entries, MOBIL │
│ E_FRAME_W), layoutMetaTags(upper, MOBILE_FRA │
│ ME_W)], │
│ ]; │
│ --- │
│ <div class="article-meta"> │
│ <Frame build={(w) => [rule(w), ""].join("\ │
│ n")} /> │
│ {variants.map(([variant, rows, tagRows]) = │
│ > ( │
│ <Fragment> │
│ {rows.map((e) => ( │
│ <Pre class={variant}>{pad(e.key, MET │
│ A_KEY_W)}{e.href │
│ ? <a class="meta-link" href={e.hre │
│ f}>{e.value}</a> │
│ : e.value}</Pre> │
│ ))} │
│ {tagRows.map((row, i) => ( │
│ <Pre class={variant}>{pad(i === 0 ? │
│ "TAGS" : "", META_KEY_W)}{row.map((t, j) => │
│ ( │
│ <Fragment>{j > 0 ? gapStr : ""}<Ba │
│ dge label={t} href={tagHref(t)} /></Fragment │
│ > │
│ ))}</Pre> │
│ ))} │
│ </Fragment> │
│ ))} │
│ <Frame build={(w) => ruleD(w)} /> │
│ </div> │
│ │
│ <style lang="scss"> │
│ .article-meta { │
│ display: block; │
│ │
│ .meta-link { │
│ color: var(--ink); │
│ text-decoration: underline; │
│ text-underline-offset: 3px; │
│ │
│ &:focus-visible { │
│ outline: 1px dashed var(--ink); │
│ outline-offset: 1px; │
│ } │
│ } │
│ } │
│ </style> │
└──────────────────────────────────────────────┘