@wxxb789/anc 0.0.1

package/src/components/NoteGraph.astro

@@ -0,0 +1,434 @@
+---
+/**
+ * The graph, as real HTML.
+ *
+ * This is the component the whole ticket is about, and its shape is the
+ * argument: **inline SVG containing real `<a>` elements, laid out at build
+ * time**. It is crawlable, keyboard-navigable, and complete with scripting
+ * disabled — none of which Quartz's graph is, because `Graph.tsx` emits three
+ * empty `<div>`s and everything else arrives as roughly 525 KB brotli of d3 and
+ * PixiJS from a third-party CDN.
+ *
+ * Six properties are load-bearing:
+ *
+ * 1. **No JavaScript, and none to load.** `src/lib/graph.ts` computed every
+ *    coordinate during the build. TK-21's interactive layer enhances this and
+ *    must not be stubbed in here — what ships must be what survives when that
+ *    enhancement fails.
+ * 2. **No inline `style`, anywhere.** An SVG is exactly where they creep in, and
+ *    the CSP is `style-src 'self'`. Every visual property is a class in
+ *    `src/styles/graph.css` or an SVG presentation attribute; geometry travels
+ *    in `cx`, `cy`, `x1`, and the rest, which are attributes rather than styles.
+ * 3. **Direction is never carried by colour.** Requirements section 17 forbids
+ *    it and section 13.2 requires the distinction. An outgoing edge is solid, an
+ *    incoming one dashed, a mutual one solid with an arrowhead at both ends —
+ *    three different *shapes*, legible in monochrome — and each node's
+ *    accessible name says the relationship in words.
+ * 4. **Every node is a link with a real accessible name.** The circle and the
+ *    label are `aria-hidden`, because a screen reader reading a truncated label
+ *    beside a full one is reading the same note twice; the `<a>` carries the
+ *    untruncated title, the relationship, and the drawn degree through
+ *    `graphNodeLabel`. Decorative parts hidden, content parts named.
+ * 5. **The table is the equivalent representation**, not a fallback. It carries
+ *    the same notes, the same relationships, and the same drawn degrees, in the
+ *    same order, and it is present whether or not the SVG rendered.
+ * 6. **Chrome is per document.** Every string comes from `translate()`, so a
+ *    zh-CN note's graph is in Chinese — including the accessible names, which
+ *    are the strings a reader never sees and a screen reader always does.
+ *
+ * `prefers-reduced-motion` needs no rule here: a static layout has nothing to
+ * animate, which is the requirement satisfied by construction rather than by a
+ * media query.
+ */
+import {
+  NODE_RADIUS,
+  SUBJECT_RADIUS,
+  boundCounts,
+  drawnNeighbours,
+  hasDrawableGraph,
+  type Graph,
+  type GraphNode,
+} from '../lib/graph.js';
+import { relationKey, type RelationKey } from '../lib/graph-layout.js';
+import { noteRoute } from '../lib/routes.js';
+import { partLanguage, translate } from '../lib/translations.js';
+
+interface Props {
+  graph: Graph;
+  /** Identifies the region: the heading takes `<region>-title`. */
+  region: string;
+  heading: string;
+  /** How the layout was derived, since a reader cannot see a layout rule. */
+  derivation: string;
+  /** Rendered in place of the figure when there is nothing to draw. */
+  empty: string;
+  /** Where "show me the rest" goes, and what it says. */
+  expand: { href: string; text: string; label: string };
+  /**
+   * Stated when the bound dropped notes. Takes the drawn and total *neighbour*
+   * counts, which `boundCounts` computes — the subject is in neither.
+   */
+  bounded: (shown: number, total: number) => string;
+  /** The page's own language, which decides every string's grammar. */
+  lang: string;
+  /** Heading level, so the region sits correctly in each page's outline. */
+  level?: 1 | 2;
+  /**
+   * When present, a live explorer enhances this figure over the shared snapshot
+   * Worker. Absent means the static figure is the whole experience.
+   */
+  explore?: {
+    scope: 'local' | 'global';
+    centerSlug: string | null;
+    /** An initial tag filter for a global scope, if any. */
+    initialTag?: string | null;
+    /** Tag choices for a global scope; absent for a local one. */
+    tags?: readonly { key: string; label: string }[];
+  };
+}
+
+const {
+  graph,
+  region,
+  heading,
+  derivation,
+  empty,
+  expand,
+  bounded,
+  lang,
+  level = 2,
+  explore,
+} = Astro.props;
+const t = translate(lang);
+
+const titleId = `${region}-title`;
+const Heading = `h${level}` as 'h1' | 'h2';
+
+/**
+ * The relationship word each state carries, in this document's language.
+ *
+ * Keyed by the shared `relationKey` classifier, so a sixth state or a rename
+ * fails this record instead of falling through to a wrong word — and the
+ * `data-graph-relation-<key>` attributes the client reads are derived from the
+ * same keys below rather than re-spelled.
+ */
+const relationLabels: Record<RelationKey, string> = {
+  subject: t.graphSubjectRelation,
+  outgoing: t.graphOutgoingRelation,
+  incoming: t.graphIncomingRelation,
+  mutual: t.graphMutualRelation,
+  linked: t.graphLinkedRelation,
+};
+
+/** The relationship word a node's accessible name and the table both use. */
+function relationOf(node: Graph['nodes'][number]): string {
+  return relationLabels[relationKey(node)];
+}
+
+/** The class carrying a node's role. Shape and weight, never colour alone. */
+function nodeClass(node: GraphNode): string {
+  return node.isSubject ? 'graph-node graph-node-subject' : 'graph-node';
+}
+
+const isDrawable = hasDrawableGraph(graph);
+const drawn = graph.nodes.length;
+
+/**
+ * The two numbers the bound sentence interpolates, from the model.
+ *
+ * Computed by `boundCounts` rather than here: the sentence counts *neighbouring
+ * notes* and a note is not its own neighbour, which two shipped versions got
+ * wrong — and a test restating the same arithmetic did not catch the second,
+ * because it compared the model against a copy of this expression rather than
+ * against this component. Neither corpus reaches the bound, so no built page
+ * renders the sentence and no gate over `dist/` can see it either.
+ */
+const { shown, total } = boundCounts(graph);
+
+/** Which notes each drawn node is joined to, for the table's fourth column. */
+const joined = drawnNeighbours(graph);
+
+/**
+ * The client's chrome, carried as data attributes so the script bundle holds no
+ * locale table. Only the attributes the explorer reads are emitted.
+ */
+const exploreData = explore
+  ? Object.fromEntries([
+      ['data-graph-scope', explore.scope],
+      ['data-graph-center', explore.centerSlug ?? ''],
+      ['data-graph-initial-tag', explore.initialTag ?? ''],
+      ['data-graph-recenter', t.graphExplorerRecenter],
+      // The same visible text, but named for the note it re-centers on: a table
+      // holds one of these per row, so twelve identical "Re-center" names say
+      // nothing about which control does what.
+      ['data-graph-recenter-label', t.graphExplorerRecenterLabel],
+      ['data-graph-status-local', t.graphExplorerStatusLocal],
+      ['data-graph-status-global', t.graphExplorerStatusGlobal],
+      ['data-graph-status-filtered', t.graphExplorerStatusFiltered],
+      ['data-graph-loading', t.graphExplorerLoading],
+      ['data-graph-failed', t.graphExplorerFailed],
+      ['data-graph-unknown-center', t.graphExplorerUnknownCenter],
+      ['data-graph-empty-filter', t.graphExplorerEmptyFilter],
+      ['data-graph-node-label', t.graphExplorerNodeLabel],
+      ['data-graph-node-label-one', t.graphExplorerNodeLabelOne],
+      // The live figure's accessible name, count-free on purpose: the count
+      // sentence is the status line's job.
+      ['data-graph-figure-name', t.graphDescription],
+      ...Object.entries(relationLabels).map(([key, label]) => [
+        `data-graph-relation-${key}`,
+        label,
+      ]),
+      ['data-graph-no-links', t.graphNoLinks],
+    ])
+  : undefined;
+---
+
+<section class="graph-region" aria-labelledby={titleId} data-graph-region={region}>
+  <div class="section-heading">
+    <Heading id={titleId}>{heading}</Heading>
+    {isDrawable && (
+      <span data-graph-figure-label>{t.graphFigureLabel(drawn, graph.edges.length)}</span>
+    )}
+  </div>
+
+  {/* Progressive enhancement, offered only where a figure exists to enhance:
+      on an edge-less corpus an explorer would draw nothing while its live
+      status claimed a graph. Hidden until the client runs; every string is a
+      `data-` attribute above, so the script carries no locale table. */}
+  {explore && isDrawable && (
+    <div class="graph-explorer" hidden data-graph-controls {...exploreData}>
+      <button type="button" data-graph-activate>{t.graphExplorerOpen}</button>
+      <button type="button" data-graph-reset-control hidden>{t.graphExplorerReset}</button>
+      {explore.tags && explore.tags.length > 0 && (
+        <label>
+          <span>{t.graphExplorerFilterLabel}</span>
+          <select data-graph-tag>
+            <option value="">{t.graphExplorerFilterAll}</option>
+            {explore.tags.map((tag) => (
+              <option value={tag.key}>{tag.label}</option>
+            ))}
+          </select>
+        </label>
+      )}
+    </div>
+  )}
+  {/* The live status line belongs with the controls and the figure they
+      enhance; with nothing drawable the empty state below is the whole
+      statement, so there is no second sentence for the client to fill. */}
+  {isDrawable && <p class="graph-status" role="status" aria-live="polite" data-graph-status></p>}
+
+  {!isDrawable ? (
+    <p class="empty-state">{empty}</p>
+  ) : (
+    <>
+      {/* The scroll container is a keyboard stop, for the reason a `<pre>` and a
+          diagram canvas are: a graph wider than the measure scrolls
+          horizontally at 320 px, and a scrollable region must be reachable by
+          keyboard (axe `scrollable-region-focusable`, WCAG 2.1.1).
+
+          The `<figure>` takes no `aria-labelledby`: a figure with a figcaption
+          is already named by it, and naming it twice is how an element ends up
+          announced twice. */}
+      <figure class="graph">
+        <div class="graph-canvas" tabindex="0" data-graph-canvas>
+          {/*
+            `role="group"`, **not** `role="img"`.
+
+            An `img` is a leaf: the accessibility API presents it as a single
+            graphic, so a focusable descendant inside one is a contradiction —
+            axe reports it as `nested-interactive` (serious), 56 times across
+            the fixture corpus in both themes, which is how this was found. And
+            it is not a lint technicality: under `role="img"` the node links are
+            in the tab order while being inside a subtree a screen reader
+            announces as one image, so a reader can focus links their own screen
+            reader has flattened away.
+
+            `group` is what this actually is — a named set of related elements
+            that may contain interactive descendants. The name still states the
+            counts, because the figure's size is the first thing a sighted
+            reader takes in and the one thing a non-visual reader cannot.
+
+            `focusable="false"` keeps the `<svg>` element itself out of the tab
+            order, so the group is a container rather than one more stop before
+            its first node.
+
+            `width` and `height` are attributes rather than CSS so the figure has
+            an intrinsic size and an aspect ratio before the stylesheet arrives —
+            no layout shift, and the `viewBox` scales it down to fit.
+          */}
+          <svg
+            class="graph-svg"
+            viewBox={graph.viewBox}
+            width={graph.width}
+            height={graph.height}
+            role="group"
+            focusable="false"
+            aria-label={t.graphFigureLabel(drawn, graph.edges.length)}
+          >
+            {/* The arrowhead, declared once and referenced by every edge. It is
+                pure decoration — direction is stated in words on each node's
+                accessible name — so the whole `<defs>` is hidden. */}
+            <defs aria-hidden="true">
+              <marker
+                id={`${region}-arrow`}
+                class="graph-arrow"
+                viewBox="0 0 10 10"
+                refX="9"
+                refY="5"
+                markerWidth="5"
+                markerHeight="5"
+                orient="auto-start-reverse"
+              >
+                <path d="M 0 1 L 9 5 L 0 9 z" />
+              </marker>
+            </defs>
+
+            {/* Edges first, so a node's circle paints over the line that reaches
+                it. `aria-hidden` on the whole group: an edge is not separately
+                reachable, and the relationship it draws is already in the name
+                of the node at its end and in the table below. */}
+            <g class="graph-edges" aria-hidden="true">
+              {graph.edges.map((edge) => (
+                <line
+                  class={[
+                    'graph-edge',
+                    edge.isMutual && 'graph-edge-mutual',
+                    // An edge the subject *receives* is dashed and one it sends
+                    // is solid, so the distinction is a shape rather than a
+                    // colour. `/graph/` has no subject, so its edges carry no
+                    // direction and are drawn plain — there is no "incoming"
+                    // without a somewhere to come in to.
+                    edge.direction === 'incoming' && 'graph-edge-incoming',
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                  x1={edge.x1}
+                  y1={edge.y1}
+                  x2={edge.x2}
+                  y2={edge.y2}
+                  marker-end={`url(#${region}-arrow)`}
+                  marker-start={edge.isMutual ? `url(#${region}-arrow)` : undefined}
+                />
+              ))}
+            </g>
+
+            <g class="graph-nodes">
+              {graph.nodes.map((node) => (
+              /*
+               * A real `<a href>`, which is the whole point: this is a link in
+               * the HTML, so a crawler follows it, the keyboard reaches it, and
+               * it works with scripting disabled.
+               *
+               * `aria-label` on the anchor and `aria-hidden` on everything
+               * inside it: the circle is decoration and the visible label is a
+               * truncation of the title the anchor already states. Without the
+               * hiding, a screen reader announces the shortened title and then
+               * the full one.
+               */
+              <a
+                class={nodeClass(node)}
+                href={noteRoute(node.entry.slug)}
+                aria-label={t.graphNodeLabel(node.entry.title, relationOf(node), node.degree)}
+                lang={partLanguage(node.entry.language, lang)}
+              >
+                <circle
+                  class="graph-dot"
+                  cx={node.x}
+                  cy={node.y}
+                  r={node.isSubject ? SUBJECT_RADIUS : NODE_RADIUS}
+                  aria-hidden="true"
+                />
+                {/* `dy` places the label below the circle by an em rather than
+                    by a pixel count, so it follows the reader's own text size. */}
+                <text class="graph-label" x={node.x} y={node.y} dy="1.9em" aria-hidden="true">{node.label}</text>
+              </a>
+            ))}
+            </g>
+          </svg>
+        </div>
+        <figcaption>{derivation}</figcaption>
+      </figure>
+
+      {/*
+        Requirements section 17: "graph data available as an equivalent
+        list/table". **Equivalent**, so the fourth column exists: it names the
+        notes each row is joined to, which is the edge set itself. A table of
+        node, relationship, and a *degree* states how many lines touch a node
+        while withholding which notes they run to — and on `/graph/`, where no
+        node has a relationship to a subject, that would leave the whole edge
+        set unavailable to a non-visual reader. A count is the summary section
+        17 excludes.
+
+        It is a `<details>` rather than an always-open table: the same data in
+        two forms one after the other is a long page, and native disclosure
+        costs no script, is keyboard-operable, and is announced as one. The
+        summary states what is inside, so nobody has to open it to find out.
+      */}
+      <details class="graph-table">
+        <summary>{t.graphTableCaption}</summary>
+        {/* The scroll container the article's own Markdown tables still lack:
+            four columns do not fit 320 px, and a wrapper is what lets the table
+            scroll instead of widening the page while keeping its semantics —
+            `display: block` on the `<table>` itself would strip them. It is a
+            keyboard stop for the same reason the figure's canvas is (axe
+            `scrollable-region-focusable`, WCAG 2.1.1). */}
+        <div class="graph-table-scroll" tabindex="0">
+          <table>
+          <caption class="sr-only">{t.graphTableCaption}</caption>
+          <thead>
+            <tr>
+              <th scope="col">{t.graphColumnNote}</th>
+              <th scope="col">{t.graphColumnRelation}</th>
+              <th scope="col">{t.graphColumnLinks}</th>
+              <th scope="col">{t.graphColumnLinkedTo}</th>
+            </tr>
+          </thead>
+          <tbody data-graph-body>
+            {graph.nodes.map((node) => (
+              <tr>
+                <th scope="row">
+                  <a href={noteRoute(node.entry.slug)} lang={partLanguage(node.entry.language, lang)}
+                  >{node.entry.title}</a>
+                </th>
+                <td>{relationOf(node)}</td>
+                <td>{node.degree}</td>
+                <td>
+                  {/* The notes at the other end of every line this node
+                      carries, each a link — so the table is a way *through* the
+                      graph and not only a description of it. A node the figure
+                      draws with no line to another drawn node says so rather
+                      than rendering an empty cell, which reads as missing data. */}
+                  {(joined.get(node.entry.slug) ?? []).length === 0 ? (
+                    <span class="graph-none">{t.graphNoLinks}</span>
+                  ) : (
+                    <ul class="graph-joined">
+                      {(joined.get(node.entry.slug) ?? []).map((other) => (
+                        <li>
+                          <a
+                            href={noteRoute(other.slug)}
+                            lang={partLanguage(other.language, lang)}
+                          >{other.title}</a>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+          </table>
+        </div>
+      </details>
+
+      {/* The bound, and the expansion action beside it — requirements section
+          13.2. Rendered only when the bound actually dropped something, so a
+          graph drawing everything does not claim to be partial. The link is
+          unconditional: "see the whole graph" is useful whether or not this one
+          was truncated. */}
+      <p class="graph-bound">
+        {graph.omitted > 0 && <span data-graph-bound>{bounded(shown, total)} </span>}
+        <a href={expand.href} aria-label={expand.label}>{expand.text}</a>
+      </p>
+    </>
+  )}
+</section>

package/src/components/NoteList.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * A list of published notes, used by every route that shows more than one.
+ *
+ * The heading level is a prop because these lists appear at two depths: under a
+ * section heading on the home page, and directly under the page `h1` on a
+ * facet or recent page. Hardcoding one level would make the other route either
+ * skip a heading level or carry a heading that restates its own title.
+ */
+import type { ContentEntry } from '../lib/content.js';
+import { noteRoute } from '../lib/routes.js';
+import { partLanguage, translate } from '../lib/translations.js';
+
+interface Props {
+  entries: readonly ContentEntry[];
+  /** Heading level for each card title, chosen so the page never skips a level. */
+  level?: 2 | 3;
+  /** The page's own language, which decides the chrome around these cards. */
+  lang: string;
+}
+
+const { entries, level = 3, lang } = Astro.props;
+const t = translate(lang);
+const Heading = `h${level}` as 'h2' | 'h3';
+---
+
+{/* Only the home page and `/recent/` can reach the empty state: a facet page
+    exists because an entry produced it, so its list is never empty. The message
+    is the locale's rather than a caller's prop — every caller passed the same
+    string, and a per-caller override nobody used is a string nobody maintains. */}
+{entries.length === 0 ? (
+  <p class="empty-state">{t.noNotesYet}</p>
+) : (
+  <div class="note-grid">
+    {entries.map((entry) => (
+      <article class="note-card">
+        {/*
+          The title and the excerpt are the author's words, so they are rendered
+          verbatim — and marked with their own `lang` when it differs from the
+          page's. Every route lists the whole corpus, so on a bilingual site most
+          of these grids are mixed; without the attribute a screen reader reads a
+          Chinese title in an English voice, which is WCAG 2.2 AA 3.1.2. The
+          attribute is emitted only on the cards that need it, so a single-
+          language corpus carries none.
+        */}
+        <Heading lang={partLanguage(entry.language, lang)}>
+          <a href={noteRoute(entry.slug)}>{entry.title}</a>
+        </Heading>
+        <p lang={partLanguage(entry.language, lang)}>{entry.excerpt}</p>
+        <a class="read-more" href={noteRoute(entry.slug)}>{t.readNote}</a>
+      </article>
+    ))}
+  </div>
+)}

package/src/components/SiteMetadata.astro

@@ -0,0 +1,143 @@
+---
+/**
+ * Everything a route says about itself to something that is not a browser: the
+ * canonical URL, the Open Graph and Twitter card metadata, and the feed
+ * discovery link.
+ *
+ * It renders into `Layout.astro`'s `<slot name="head" />`, which TK-05a left for
+ * exactly this, and the layout renders it once — so every route carries this
+ * metadata by construction rather than because eight page files each remembered
+ * to ask for it.
+ *
+ * **The article facts are looked up from the route, not passed down.** A note
+ * page would otherwise have to thread `type`, `published`, and `updated` through
+ * `Layout`'s props, widening the interface TK-05a's slot exists to keep narrow,
+ * and every future page would have to remember to pass them. Instead this reads
+ * the same `Astro.url.pathname` the canonical URL is already derived from: if
+ * that path is a note route, the artifact has the note's dates, and if it is
+ * not, there are no article facts to state. The two answers cannot disagree
+ * because they come from one source.
+ *
+ * Every value is derived from `Astro.site`, `Astro.url`, or an artifact field.
+ * Nothing here reads a clock and nothing invents a default, so two builds of one
+ * artifact emit identical bytes.
+ */
+import { getEntry } from '../lib/content.js';
+import { noteSlugFromPath } from '../lib/route-path.js';
+import {
+  FEED_PATH,
+  SITE_NAME,
+  SOCIAL_CARD_PATH,
+  canonicalUrl,
+  isIndexable,
+  openGraphLocale,
+  rfc3339,
+  socialTitle,
+} from '../lib/site.js';
+import { translate } from '../lib/translations.js';
+
+interface Props {
+  title: string;
+  description: string;
+  /** The document's own BCP 47 tag, as `<html lang>` declares it. */
+  lang: string;
+}
+
+const { title, description, lang } = Astro.props;
+
+/**
+ * This page's canonical URL.
+ *
+ * `Astro.url.pathname` rather than a route the caller passes: the canonical URL
+ * of a page is the address it is served at, and deriving it from anything else
+ * is how a page comes to declare a canonical URL that is not its own. With
+ * `trailingSlash: 'always'` this is already the normalized form.
+ */
+const canonical = canonicalUrl(Astro.site, Astro.url.pathname);
+/**
+ * The absolute URL of the social card, or `undefined` when there is none.
+ *
+ * No card is the shipped state — `src/lib/site.ts` records why — so this is
+ * normally `undefined` and the three card tags below are simply absent.
+ */
+const card = SOCIAL_CARD_PATH === undefined ? undefined : canonicalUrl(Astro.site, SOCIAL_CARD_PATH);
+
+const slug = noteSlugFromPath(Astro.url.pathname);
+const note = slug === undefined ? undefined : getEntry(slug);
+const locale = openGraphLocale(lang);
+// This component renders into the head of whichever document the layout is
+// building, so its one reader-facing string follows that document like every
+// other chrome string. A feed client shows the title when subscribing.
+const t = translate(lang);
+---
+
+{/* The 404 document has no address of its own — the host serves its body for
+    every unmatched request — so it claims no canonical URL. Declaring one would
+    tell a crawler that every mistyped address on this site is canonically
+    `/404/`, which is an instruction to index the error page under arbitrary
+    names. `noindex, follow` says the true thing instead, and `follow` keeps the
+    site map in its body useful. */}
+{isIndexable(Astro.url.pathname) ? (
+  <link rel="canonical" href={canonical} />
+) : (
+  <meta name="robots" content="noindex, follow" />
+)}
+
+{/* Open Graph. `og:type` is `article` only on a note page — the index, facet,
+    and static pages are not articles, and typing them as one would ask a
+    consumer to look for an author and a publication date that do not exist. */}
+<meta property="og:type" content={note === undefined ? 'website' : 'article'} />
+<meta property="og:site_name" content={SITE_NAME} />
+{/* Without the ` · anc` suffix the `<title>` carries: a card renders
+    this line directly above `og:site_name`, so keeping it prints the site's
+    name twice on every card. */}
+<meta property="og:title" content={socialTitle(title)} />
+<meta property="og:description" content={description} />
+<meta property="og:url" content={canonical} />
+{/* Only when the document's language names a territory: Open Graph's value is
+    `language_TERRITORY`, and a bare `en` is not a valid one. `<html lang>`
+    carries the exact BCP 47 tag on every page regardless. */}
+{locale !== undefined && <meta property="og:locale" content={locale} />}
+{/* The card, and all three tags stand or fall together.
+
+    A site with no configured card emits none of them. `og:image` pointing at a
+    file that does not exist is worse than silence — a consumer renders a broken
+    image rather than falling back to the title and description — and
+    `og:image:alt` describing an absent image is a label for nothing.
+
+    `twitter:card` goes with them, which is the one that looks separable and is
+    not. `summary_large_image` is a promise *about an image*: it tells a client
+    to reserve a large image region, so with no `og:image` to fill it the card
+    renders as an empty box above the text. The honest answer with no image is to
+    state no card type and let the consumer choose its own text treatment.
+
+    No `twitter:site` or `twitter:creator` either: this tool names no account,
+    and a metadata tag is not the place to invent one. */}
+{card !== undefined && (
+  <>
+    <meta property="og:image" content={card} />
+    {/* The card is a rendering of the site's own mark, identical on every route,
+        so the alternative text says what it is rather than describing the page. */}
+    <meta property="og:image:alt" content={t.socialCardAlt(SITE_NAME)} />
+    <meta name="twitter:card" content="summary_large_image" />
+  </>
+)}
+
+{/* Widened to the full RFC 3339 form Open Graph's DateTime type requires; the
+    artifact may carry a bare calendar date. The `<time datetime>` on the page
+    itself keeps the artifact's own precision. Each is emitted only when the
+    artifact carries it — this projection states no date it was not given. */}
+{note?.created !== undefined && (
+  <meta property="article:published_time" content={rfc3339(note.created)} />
+)}
+{note?.updated !== undefined && (
+  <meta property="article:modified_time" content={rfc3339(note.updated)} />
+)}
+
+{/* Feed discovery. Absolute, so it is unambiguous wherever the markup is read. */}
+<link
+  rel="alternate"
+  type="application/atom+xml"
+  title={t.feedTitle(SITE_NAME)}
+  href={canonicalUrl(Astro.site, FEED_PATH)}
+/>