@cogenta/theme-association 0.3.2 → 0.5.3

package/src/render/blocks/testimonial.ts

@@ -1,35 +1,44 @@
 import type { TestimonialBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext, renderRichText } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * `blocks@2.0` (RFC 0001). A volunteer's own words — the same
- * `<figure><blockquote>…</blockquote><figcaption>` pattern `quote` uses, but
- * the quote itself is rich text and the attribution is the block's single
- * grouped `attribution` field. The avatar sits in a round frame, echoing the
- * hero's own rounded, friendly treatment.
+ * One person's own account of what the organisation meant to them, told
+ * with their photograph: the portrait cropped to 4:5 on the first four
+ * columns, the words in the display face on the last seven, starting on a
+ * hung quotation mark, and the name and what they do here beneath them.
+ * Without a portrait the words take the reading column alone; nothing stands
+ * in for the missing face.
  */
 export function renderTestimonial(block: TestimonialBlock, ctx: RenderContext): HtmlElement {
   const { attribution } = block
-  return h(
+  return section(
+    'div',
+    'testimonial',
+    'ca-story',
+    { 'data-portrait': String(attribution.avatar !== undefined) },
     'figure',
-    { class: 'cg-block cg-testimonial', 'data-block': 'testimonial' },
-    h('blockquote', { class: 'cg-testimonial__quote' }, renderRichText(ctx, block.quote)),
-    h(
-      'figcaption',
-      { class: 'cg-testimonial__attribution' },
-      attribution.avatar === undefined
-        ? null
-        : image(ctx, attribution.avatar, {
-            className: 'cg-testimonial__avatar',
-            variant: { width: 96, height: 96, fit: 'cover' },
+    attribution.avatar === undefined
+      ? null
+      : h(
+          'div',
+          { class: 'ca-story__portrait' },
+          image(ctx, attribution.avatar, {
+            className: 'ca-story__image',
+            sizes: '(min-width: 64rem) 26rem, 70vw',
           }),
+        ),
+    h(
+      'div',
+      { class: 'ca-story__words' },
+      h('blockquote', { class: 'ca-story__quote' }, renderRichText(ctx, block.quote)),
       h(
-        'span',
-        { class: 'cg-testimonial__who' },
-        h('span', { class: 'cg-testimonial__name' }, attribution.name),
+        'figcaption',
+        { class: 'ca-story__attribution' },
+        h('span', { class: 'ca-story__name' }, attribution.name),
         attribution.role === undefined
           ? null
-          : h('span', { class: 'cg-testimonial__role' }, attribution.role),
+          : h('span', { class: 'ca-story__role' }, attribution.role),
       ),
     ),
   )

package/src/render/chrome.ts

@@ -5,130 +5,204 @@ import {
   escapeAttribute,
   escapeText,
   renderBrandMark,
+  renderFooterWidgets,
   renderSocialLinks,
   renderThemeToggle,
   serialize,
 } from '@cogenta/theme-kit'
+import { associationString } from './strings.js'
 
 /**
- * This theme's own header and footer — a warm, community-notice-board read
- * rather than a corporate one: a sticky header with a pill-shaped nav and a
- * rounded, filled action button, and a four-column footer (brand+tagline,
- * navigation, social, a short note) on a tinted band, closing with Cogenta's
- * own credit.
+ * The header and footer of a charity's site (`theme@1.4`).
  *
- * The mobile nav is a `<details>`/`<summary>` disclosure — the same
- * zero-JavaScript mechanism `faq`/`accordion` already use — rather than a
- * scripted hamburger: expanding, keyboard operation and the open state
- * announced to assistive technology all come from the browser. The same
- * links are rendered twice (once inside the disclosure, once as a plain
- * inline row) and `src/styles/base.css` shows exactly one of the two at any
- * given width via `display:none` — which also removes the hidden copy from
- * the accessibility tree, so nothing is ever announced twice.
+ * Header: one row on the paper under a hairline. The organisation's name in
+ * the display face (or its uploaded logo), the pages in plain words, then the
+ * `headerAction` as the yellow button, the one standing ask of a charity's
+ * site, and the light/dark control. The action sits outside the navigation
+ * list on purpose: on a phone it stays in the header row beside the menu
+ * button.
  *
- * `theme@1.4` (L25 D2) fields — `headerAction`, `tagline`, `social`,
- * `footerNote` — are each rendered only when present; a render with none of
- * them set still produces a complete header/footer, exactly the additive
- * guarantee the contract promises.
+ * Below the wide breakpoint the pages become a panel of large links under the
+ * header, opened by a CSS-only toggle: a visually hidden checkbox paired with
+ * a `<label>` that says "Menu" (and "Close" once open), placed before the
+ * `<nav>` so the sibling combinator reaches it. One `<nav>` in the markup,
+ * retiled by CSS. The panel repeats the `tagline` under the links.
  *
- * The manual light/dark toggle (`renderThemeToggle`, `@cogenta/theme-kit`,
- * L26) is unconditional — it sits between the desktop nav and the header
- * action, outside the `<details>` mobile disclosure so it stays reachable at
- * every width rather than one tap deep inside the hamburger menu.
+ * Footer: the green band. The name, the `tagline`, the `footerNote` (a blank
+ * line starts a new paragraph, a line break stays a line break, so the
+ * registered charity number, the address and the contact lines keep their
+ * shape), the social profiles with their names; then the footer navigation in
+ * columns: a `submenu-placeholder` (an unlinked item such as "Get involved")
+ * starts a column and names it, the links after it fill it. Under a hairline,
+ * the legal line: the copyright year and the name, beside the host's
+ * `brandingHtml`, placed once, as received. Every `theme@1.4` field renders
+ * only when present.
+ *
+ * Footer widget columns (`theme@1.6`) are one row under the name and the
+ * menu, above the legal line, in the band's own small type; with none, the
+ * footer is exactly what it was before widgets existed.
  */
 
-function navItems(links: readonly ChromeNavLink[]): string {
-  return links
-    .filter((link) => link.href !== null || link.kind === 'submenu-placeholder')
-    .map((link) => {
-      const label = escapeText(link.label)
-      const titleAttr = link.title === null ? '' : ` title="${escapeAttribute(link.title)}"`
-      if (link.href === null) return `<li><span${titleAttr}>${label}</span></li>`
-      const href = escapeAttribute(link.href)
-      const target = link.openInNewTab ? ' target="_blank" rel="noopener"' : ''
-      return `<li><a href="${href}"${target}${titleAttr}>${label}</a></li>`
-    })
-    .join('')
+interface FooterGroup {
+  readonly heading: string | null
+  readonly links: readonly ChromeNavLink[]
+}
+
+function usable(links: readonly ChromeNavLink[]): readonly ChromeNavLink[] {
+  return links.filter((link) => link.href !== null || link.kind === 'submenu-placeholder')
 }
 
-function renderNav(links: readonly ChromeNavLink[], className: string, label: string): string {
-  const items = navItems(links)
-  if (items === '') return ''
-  return `<nav class="${className}" aria-label="${escapeAttribute(label)}"><ul class="cg-nav__items">${items}</ul></nav>`
+function linkItem(link: ChromeNavLink, className: string): string {
+  const label = escapeText(link.label)
+  const titleAttr = link.title === null ? '' : ` title="${escapeAttribute(link.title)}"`
+  if (link.href === null) return `<li class="${className}"><span${titleAttr}>${label}</span></li>`
+  const target = link.openInNewTab ? ' target="_blank" rel="noopener"' : ''
+  return `<li class="${className}"><a href="${escapeAttribute(link.href)}"${target}${titleAttr}>${label}</a></li>`
 }
 
-/** The header's own call-to-action link (`theme@1.4`) — a filled, rounded button, the "Donate"/"Volunteer" treatment. */
-function renderHeaderAction(action: ChromeInput['headerAction']): string {
-  if (action === undefined) return ''
-  return (
-    `<a class="cg-action cg-site-header__action" data-emphasis="primary" ` +
-    `href="${escapeAttribute(action.href)}">${escapeText(action.label)}</a>`
-  )
+/** The footer menu, split into columns at each unlinked heading. */
+export function footerGroups(links: readonly ChromeNavLink[]): readonly FooterGroup[] {
+  const groups: { heading: string | null; links: ChromeNavLink[] }[] = []
+  for (const link of usable(links)) {
+    if (link.kind === 'submenu-placeholder' && link.href === null) {
+      groups.push({ heading: link.label, links: [] })
+      continue
+    }
+    const current = groups[groups.length - 1]
+    if (current === undefined) groups.push({ heading: null, links: [link] })
+    else current.links.push(link)
+  }
+  return groups.filter((group) => group.links.length > 0)
 }
 
-/** A plain hamburger glyph — three bars, drawn as `<path>`s so nothing here needs the icon set's closed vocabulary. */
-const MENU_GLYPH =
-  '<svg class="cg-nav-toggle__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">' +
-  '<path d="M4 7h16M4 12h16M4 17h16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>' +
-  '</svg>'
+/** `footerNote` as paragraphs at blank lines, each keeping its own line breaks. */
+function renderFooterNote(note: string): string {
+  const paragraphs = note
+    .replace(/\r\n?/g, '\n')
+    .split(/\n\s*\n/)
+    .map((paragraph) =>
+      paragraph
+        .split('\n')
+        .map((line) => line.trim())
+        .filter((line) => line !== ''),
+    )
+    .filter((lines) => lines.length > 0)
+  if (paragraphs.length === 0) return ''
+  return `<div class="ca-footer__note">${paragraphs
+    .map((lines) => `<p>${lines.map(noteLine).join('<br>')}</p>`)
+    .join('')}</div>`
+}
+
+/**
+ * A line of the footer note that is nothing but an email address or a
+ * telephone number is what a visitor taps to reach the organisation, so it
+ * becomes a link; every other line stays text.
+ */
+function noteLine(line: string): string {
+  const text = escapeText(line)
+  if (/^[^\s@<>"']+@[^\s@<>"']+\.[a-z]{2,}$/i.test(line)) {
+    return `<a href="mailto:${escapeAttribute(line)}">${text}</a>`
+  }
+  const digits = line.replace(/[\s().-]/g, '')
+  if (/^\+?\d{7,15}$/.test(digits)) return `<a href="tel:${digits}">${text}</a>`
+  return text
+}
 
 export function renderChrome(input: ChromeInput): ChromeResult {
-  const siteNameText = escapeText(input.site.name)
-  const headerNavDesktop = renderNav(input.headerNav, 'cg-nav cg-nav--desktop', 'Primary')
-  const headerNavMobile = navItems(input.headerNav)
-  const footerNav = renderNav(input.footerNav, 'cg-site-footer__nav', 'Footer')
-  const mark = renderBrandMark(input.brand, { className: 'cg-site-header__logo' }) ?? siteNameText
-  const headerAction = renderHeaderAction(input.headerAction)
-  const themeToggle = serialize(renderThemeToggle(input.locale, { className: 'cg-theme-toggle' }))
+  const siteName = escapeText(input.site.name)
+  const home = escapeAttribute(input.homeHref)
+  const links = usable(input.headerNav)
+    .map((link) => linkItem(link, 'ca-header__item'))
+    .join('')
+  const action =
+    input.headerAction === undefined
+      ? ''
+      : `<a class="ca-header__action" href="${escapeAttribute(input.headerAction.href)}">${escapeText(
+          input.headerAction.label,
+        )}</a>`
+  const toggle = serialize(renderThemeToggle(input.locale, { className: 'cg-theme-toggle' }))
+  const logo = renderBrandMark(input.brand, { className: 'ca-header__logo' })
+  const mark = logo ?? `<span class="ca-header__wordmark">${siteName}</span>`
+  const panelTagline =
+    input.tagline === undefined
+      ? ''
+      : `<p class="ca-header__tagline">${escapeText(input.tagline)}</p>`
 
-  const mobileToggle =
-    headerNavMobile === ''
+  const menu =
+    links === ''
       ? ''
-      : `<details class="cg-nav-toggle">` +
-        `<summary class="cg-nav-toggle__button" aria-label="Menu">${MENU_GLYPH}</summary>` +
-        `<nav class="cg-nav cg-nav--mobile" aria-label="Primary"><ul class="cg-nav__items">${headerNavMobile}</ul></nav>` +
-        `</details>`
+      : `<input type="checkbox" id="ca-nav-toggle" class="ca-nav-toggle-input" aria-label="${escapeAttribute(
+          associationString(input.locale, 'menu'),
+        )}">` +
+        `<label for="ca-nav-toggle" class="ca-nav-toggle-label" aria-hidden="true">` +
+        `<span class="ca-nav-toggle-open">${escapeText(associationString(input.locale, 'menu'))}</span>` +
+        `<span class="ca-nav-toggle-close">${escapeText(associationString(input.locale, 'close'))}</span>` +
+        `</label>` +
+        `<nav class="ca-header__nav" id="ca-nav" aria-label="${escapeAttribute(
+          associationString(input.locale, 'primaryNav'),
+        )}">` +
+        `<ul class="ca-header__links">${links}</ul>` +
+        `${panelTagline}` +
+        `</nav>`
 
   const header =
-    `<header class="cg-site-header"><div class="cg-site-header__inner">` +
-    `<a class="cg-site-header__home" href="${escapeAttribute(input.homeHref)}">${mark}</a>` +
-    `${headerNavDesktop}` +
-    `${themeToggle}` +
-    `${headerAction}` +
-    `${mobileToggle}` +
+    `<header class="ca-header" data-nav="${links === '' ? 'none' : 'links'}" data-action="${
+      action === '' ? 'none' : 'link'
+    }">` +
+    `<div class="ca-header__inner">` +
+    `<a class="ca-header__brand" href="${home}">${mark}</a>` +
+    `${menu}` +
+    `${action}` +
+    `${toggle}` +
     `</div></header>`
 
   const tagline =
     input.tagline === undefined
       ? ''
-      : `<p class="cg-site-footer__tagline">${escapeText(input.tagline)}</p>`
-  const social =
-    input.social === undefined
-      ? ''
-      : serialize(
-          renderSocialLinks(input.social, {
-            className: 'cg-site-footer__social',
-            itemClassName: 'cg-site-footer__social-item',
-          }) ?? { kind: 'text', value: '' },
-        )
-  const footerNote =
-    input.footerNote === undefined
+      : `<p class="ca-footer__tagline" data-field="tagline">${escapeText(input.tagline)}</p>`
+  const note = input.footerNote === undefined ? '' : renderFooterNote(input.footerNote)
+  const social = renderSocialLinks(input.social, {
+    className: 'ca-footer__social',
+    itemClassName: 'ca-footer__social-item',
+  })
+  const groups = footerGroups(input.footerNav)
+  const nav =
+    groups.length === 0
       ? ''
-      : `<p class="cg-site-footer__note">${escapeText(input.footerNote)}</p>`
+      : `<nav class="ca-footer__nav" aria-label="${escapeAttribute(
+          associationString(input.locale, 'footerNav'),
+        )}" data-columns="${Math.min(groups.length, 3)}">${groups
+          .map(
+            (group) =>
+              `<div class="ca-footer__group">${
+                group.heading === null
+                  ? ''
+                  : `<p class="ca-footer__heading">${escapeText(group.heading)}</p>`
+              }<ul class="ca-footer__links">${group.links
+                .map((link) => linkItem(link, 'ca-footer__item'))
+                .join('')}</ul></div>`,
+          )
+          .join('')}</nav>`
+  const year = new Date().getFullYear()
+  const widgets = renderFooterWidgets(input.widgets, {
+    className: 'ca-footer__widgets',
+    headingLevel: 'h2',
+  })
 
   const footer =
-    `<footer class="cg-site-footer">` +
-    `<div class="cg-site-footer__grid">` +
-    `<div class="cg-site-footer__brand">` +
-    `<a class="cg-site-footer__brand-link" href="${escapeAttribute(input.homeHref)}">${siteNameText}</a>` +
-    `${tagline}` +
+    `<footer class="ca-footer"><div class="ca-footer__inner">` +
+    `<div class="ca-footer__about">` +
+    `<a class="ca-footer__name" href="${home}">${siteName}</a>` +
+    `${tagline}${note}` +
+    `${social === null ? '' : serialize(social)}` +
     `</div>` +
-    `<div class="cg-site-footer__col">${footerNav}</div>` +
-    `<div class="cg-site-footer__col">${social}</div>` +
-    `<div class="cg-site-footer__col">${footerNote}</div>` +
+    `${nav}` +
+    `${widgets === null ? '' : serialize(widgets)}` +
+    `<div class="ca-footer__legal">` +
+    `<p class="ca-footer__copyright">© ${year} ${siteName}</p>` +
+    `${input.brandingHtml === '' ? '' : `<div class="ca-footer__branding">${input.brandingHtml}</div>`}` +
     `</div>` +
-    `<div class="cg-site-footer__bottom"><span>${siteNameText}</span>${input.brandingHtml}</div>` +
-    `</footer>`
+    `</div></footer>`
 
   return { header, footer }
 }

package/src/render/details.ts

@@ -0,0 +1,276 @@
+import { type HtmlElement, h } from '@cogenta/theme-kit'
+import { associationString } from './strings.js'
+
+/**
+ * Reading an event's date and a programme's practical details out of plain
+ * content data.
+ *
+ * Contract A fixes the system fields and nothing else, so a theme can only
+ * recognise these by convention: an entry with a date in `startsAt`, `start`,
+ * `date` or `eventDate` is something that happens on a day, and its
+ * `location`, `address`, `cost` and `booking` fields say where and how to
+ * come. The same convention reads an event in a list (the raw entry) and on
+ * its own page (`theme@1.5`'s `PageEntryMeta.fields`), so the two can never
+ * disagree about a date.
+ *
+ * Dates are written in UTC. Contract D carries no site time zone, and a
+ * server's own zone is an accident of where it happens to run; a stored
+ * `2026-10-15T18:00:00Z` therefore reads "6pm" on every server, which is
+ * what an editor who typed six o'clock meant.
+ */
+
+export const START_FIELDS = ['startsAt', 'start', 'date', 'eventDate'] as const
+export const END_FIELDS = ['endsAt', 'end'] as const
+
+const PLACE_FIELDS = ['location', 'venue', 'place'] as const
+const SCHEDULE_FIELDS = ['schedule', 'when', 'hours'] as const
+
+type Source = Readonly<Record<string, unknown>>
+
+export interface Moment {
+  readonly iso: string
+  readonly date: Date
+  /** `false` for a bare `YYYY-MM-DD`: the day is known, the hour is not. */
+  readonly hasTime: boolean
+}
+
+export interface EventTime {
+  readonly start: Moment
+  readonly end: Moment | undefined
+}
+
+/** A non-empty string, trimmed, or `undefined`. */
+export function textOf(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined
+  const trimmed = value.trim()
+  return trimmed === '' ? undefined : trimmed
+}
+
+function firstText(source: Source, names: readonly string[]): string | undefined {
+  for (const name of names) {
+    const value = textOf(source[name])
+    if (value !== undefined) return value
+  }
+  return undefined
+}
+
+function momentOf(value: unknown): Moment | undefined {
+  const text = textOf(value)
+  if (text === undefined || !/^\d{4}-\d{2}-\d{2}/.test(text)) return undefined
+  const date = new Date(text)
+  if (Number.isNaN(date.getTime())) return undefined
+  return { iso: text, date, hasTime: /T\d{2}:\d{2}/.test(text) }
+}
+
+/** The start (and end, when there is one after it) of whatever this entry says happens. */
+export function eventTimeOf(source: Source | undefined): EventTime | undefined {
+  if (source === undefined) return undefined
+  let start: Moment | undefined
+  for (const name of START_FIELDS) {
+    start = momentOf(source[name])
+    if (start !== undefined) break
+  }
+  if (start === undefined) return undefined
+  let end: Moment | undefined
+  for (const name of END_FIELDS) {
+    end = momentOf(source[name])
+    if (end !== undefined) break
+  }
+  return { start, end: end !== undefined && end.date > start.date ? end : undefined }
+}
+
+function format(date: Date, locale: string, options: Intl.DateTimeFormatOptions): string {
+  const resolved = { ...options, timeZone: 'UTC' }
+  try {
+    return new Intl.DateTimeFormat(locale, resolved).format(date)
+  } catch {
+    return new Intl.DateTimeFormat('en', resolved).format(date)
+  }
+}
+
+export function dayOf(moment: Moment, locale: string): string {
+  return format(moment.date, locale, { day: 'numeric' })
+}
+
+export function monthOf(moment: Moment, locale: string): string {
+  return format(moment.date, locale, { month: 'short' }).replace(/\.$/, '')
+}
+
+export function weekdayOf(moment: Moment, locale: string): string {
+  return format(moment.date, locale, { weekday: 'short' }).replace(/\.$/, '')
+}
+
+export function yearOf(moment: Moment, locale: string): string {
+  return format(moment.date, locale, { year: 'numeric' })
+}
+
+export function longDateOf(moment: Moment, locale: string): string {
+  return format(moment.date, locale, { weekday: 'long', day: 'numeric', month: 'long' })
+}
+
+export function fullDateOf(moment: Moment, locale: string): string {
+  return format(moment.date, locale, {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })
+}
+
+/**
+ * A time of day the way a charity's own printed copy writes it. A locale
+ * whose clock is twelve-hour reads "6pm", "7.30pm", "10am": lowercase, no
+ * ":00", a dot before the minutes. A locale whose clock is twenty-four-hour
+ * keeps the platform's own form ("18:30"). Which clock a locale uses comes
+ * from `Intl`, never from a list of countries.
+ */
+export function timeOf(moment: Moment, locale: string): string {
+  let resolved: Intl.DateTimeFormat
+  try {
+    resolved = new Intl.DateTimeFormat(locale, { hour: 'numeric', timeZone: 'UTC' })
+  } catch {
+    resolved = new Intl.DateTimeFormat('en', { hour: 'numeric', timeZone: 'UTC' })
+  }
+  const cycle = resolved.resolvedOptions().hourCycle
+  if (cycle !== 'h12' && cycle !== 'h11') {
+    return format(moment.date, locale, { hour: '2-digit', minute: '2-digit', hourCycle: 'h23' })
+  }
+  const hours = moment.date.getUTCHours()
+  const minutes = moment.date.getUTCMinutes()
+  const hour = hours % 12 === 0 ? 12 : hours % 12
+  const suffix = hours < 12 ? 'am' : 'pm'
+  return minutes === 0 ? `${hour}${suffix}` : `${hour}.${String(minutes).padStart(2, '0')}${suffix}`
+}
+
+/** "6pm to 7.30pm", "6pm", or `undefined` for an event with no hour. */
+export function hoursOf(time: EventTime, locale: string): string | undefined {
+  if (!time.start.hasTime) return undefined
+  const start = timeOf(time.start, locale)
+  const end = time.end
+  if (end === undefined || !end.hasTime) return start
+  const sameDay = end.date.toISOString().slice(0, 10) === time.start.date.toISOString().slice(0, 10)
+  if (!sameDay) return start
+  return associationString(locale, 'timeRange', { start, end: timeOf(end, locale) })
+}
+
+export function placeOf(source: Source): string | undefined {
+  return firstText(source, PLACE_FIELDS)
+}
+
+export interface Fact {
+  readonly key: string
+  readonly label: string
+  readonly value: string
+  /** A second line under the value: the street address under the name of a hall. */
+  readonly detail?: string
+  readonly href?: string
+}
+
+function contactHref(value: string): string | undefined {
+  if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return `mailto:${value}`
+  const digits = value.replace(/[\s().-]/g, '')
+  if (/^\+?\d{7,15}$/.test(digits)) return `tel:${digits}`
+  return undefined
+}
+
+/**
+ * The practical details a visitor looks for before they come, in the order
+ * they look: when, where, who it is for, what it costs, whether to book, and
+ * who to ask. An event's "when" is its date; a programme's is its schedule.
+ * Only what the entry actually says is listed.
+ */
+export function factsOf(source: Source, locale: string): readonly Fact[] {
+  const facts: Fact[] = []
+  const time = eventTimeOf(source)
+  if (time !== undefined) {
+    const hours = hoursOf(time, locale)
+    facts.push({
+      key: 'when',
+      label: associationString(locale, 'when'),
+      value: fullDateOf(time.start, locale),
+      ...(hours === undefined ? {} : { detail: hours }),
+    })
+  } else {
+    const schedule = firstText(source, SCHEDULE_FIELDS)
+    if (schedule !== undefined) {
+      facts.push({ key: 'when', label: associationString(locale, 'when'), value: schedule })
+    }
+  }
+  const place = placeOf(source)
+  const address = textOf(source.address)
+  if (place !== undefined) {
+    facts.push({
+      key: 'where',
+      label: associationString(locale, 'where'),
+      value: place,
+      ...(address === undefined ? {} : { detail: address }),
+    })
+  } else if (address !== undefined) {
+    facts.push({ key: 'where', label: associationString(locale, 'address'), value: address })
+  }
+  for (const key of ['audience', 'cost', 'booking'] as const) {
+    const value = textOf(source[key])
+    if (value !== undefined) facts.push({ key, label: associationString(locale, key), value })
+  }
+  const contact = textOf(source.contact)
+  if (contact !== undefined) {
+    const href = contactHref(contact)
+    facts.push({
+      key: 'contact',
+      label: associationString(locale, 'contact'),
+      value: contact,
+      ...(href === undefined ? {} : { href }),
+    })
+  }
+  return facts
+}
+
+/** The details as a definition list, or `null` when the entry says none of them. */
+export function renderFacts(facts: readonly Fact[], className: string): HtmlElement | null {
+  if (facts.length === 0) return null
+  return h(
+    'dl',
+    { class: className, 'data-count': String(Math.min(facts.length, 4)) },
+    facts.map((fact) =>
+      h(
+        'div',
+        { class: `${className}-item`, 'data-fact': fact.key },
+        h('dt', { class: `${className}-label` }, fact.label),
+        h(
+          'dd',
+          { class: `${className}-value` },
+          fact.href === undefined ? fact.value : h('a', { href: fact.href }, fact.value),
+          fact.detail === undefined
+            ? null
+            : h('span', { class: `${className}-detail` }, fact.detail),
+        ),
+      ),
+    ),
+  )
+}
+
+/**
+ * The typographic date block: the day large, the month in small capitals,
+ * the weekday under them. The whole block is one `<time>`, so a reader hears
+ * one date rather than three loose words.
+ */
+export function renderDateBlock(
+  time: EventTime,
+  locale: string,
+  className: string,
+  options: { readonly year?: boolean } = {},
+): HtmlElement {
+  return h(
+    'time',
+    { class: className, datetime: time.start.iso },
+    h('span', { class: `${className}-month` }, monthOf(time.start, locale)),
+    h('span', { class: `${className}-day` }, dayOf(time.start, locale)),
+    h(
+      'span',
+      { class: `${className}-weekday` },
+      options.year === true
+        ? `${weekdayOf(time.start, locale)} ${yearOf(time.start, locale)}`
+        : weekdayOf(time.start, locale),
+    ),
+  )
+}