@cogenta/theme-restaurant 0.3.2

package/src/render/blocks/pricing-table.ts

@@ -0,0 +1,74 @@
+import type { PricingTableBlock, PricingTier } from '@cogenta/blocks'
+import {
+  actionLink,
+  blockHeadingTag,
+  type HeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  nestedHeadingTag,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * `blocks@2.0` (RFC 0001). Rendered as a set-menu comparison — a "tasting
+ * menu" / "prix fixe" tier is the shape this block already has (a name, a
+ * price, a feature list), so this theme reuses the same restrained bordered
+ * plates the rest of the vocabulary uses rather than a distinct pricing
+ * skin. `highlighted` becomes a small "chef's pick" rule rather than a
+ * colour.
+ */
+function renderTier(tier: PricingTier, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  return h(
+    'li',
+    {
+      class: 'cg-set-menu__tier',
+      'data-highlighted': tier.highlighted === true ? 'true' : undefined,
+      'aria-current': tier.highlighted === true ? 'true' : undefined,
+    },
+    heading(tag, { class: 'cg-set-menu__name' }, tier.name),
+    h(
+      'p',
+      { class: 'cg-set-menu__price' },
+      h('span', { class: 'cg-set-menu__amount' }, tier.price),
+      tier.interval === undefined
+        ? null
+        : h('span', { class: 'cg-set-menu__interval' }, tier.interval),
+    ),
+    tier.features.length === 0
+      ? null
+      : h(
+          'ul',
+          { class: 'cg-set-menu__features' },
+          tier.features.map((feature) => h('li', { class: 'cg-set-menu__feature' }, feature)),
+        ),
+    tier.action === undefined
+      ? null
+      : h(
+          'div',
+          { class: 'cg-set-menu__action' },
+          actionLink(ctx, { ...tier.action, emphasis: tier.action.emphasis ?? 'primary' }),
+        ),
+  )
+}
+
+export function renderPricingTable(block: PricingTableBlock, ctx: RenderContext): HtmlElement {
+  const hasTitle = block.title !== undefined
+  const tierTag = nestedHeadingTag('pricingTable', hasTitle)
+  return h(
+    'section',
+    { class: 'cg-set-menu', 'data-block': 'pricingTable' },
+    hasTitle
+      ? heading(
+          blockHeadingTag('pricingTable') ?? 'h2',
+          { class: 'cg-set-menu__title', 'data-field': 'title' },
+          block.title ?? '',
+        )
+      : null,
+    h(
+      'ul',
+      { class: 'cg-set-menu__tiers' },
+      block.tiers.map((tier) => renderTier(tier, ctx, tierTag)),
+    ),
+  )
+}

package/src/render/blocks/prose.ts

@@ -0,0 +1,19 @@
+import type { ProseBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, type RenderContext, renderRichText } from '@cogenta/theme-kit'
+
+/**
+ * "Our story" — a short, centred, narrow column (`--cg-measure-narrow` in
+ * `tokens.css`), the quiet editorial interlude every one of the reference
+ * templates (Divi/Astra "Restaurant") places between the hero and the menu.
+ *
+ * `prose` declares `headingLevel: 'none'`: it contributes no heading of its
+ * own. Whatever headings appear come from the rich text document, whose
+ * vocabulary starts at `h2`.
+ */
+export function renderProse(block: ProseBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'div',
+    { class: 'cg-story', 'data-block': 'prose' },
+    h('div', { class: 'cg-story__body' }, renderRichText(ctx, block.body)),
+  )
+}

package/src/render/blocks/quote.ts

@@ -0,0 +1,38 @@
+import type { QuoteBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * A single centred line, set in the display serif — the "menu insert"
+ * pull-quote, distinct from `testimonial`'s guestbook card.
+ */
+export function renderQuote(block: QuoteBlock, ctx: RenderContext): HtmlElement {
+  const hasAttribution =
+    block.author !== undefined || block.role !== undefined || block.avatar !== undefined
+  return h(
+    'figure',
+    { class: 'cg-line', 'data-block': 'quote' },
+    h('blockquote', { class: 'cg-line__text' }, h('p', { 'data-field': 'text' }, block.text)),
+    hasAttribution
+      ? h(
+          'figcaption',
+          { class: 'cg-line__attribution' },
+          block.avatar === undefined
+            ? null
+            : image(ctx, block.avatar, {
+                className: 'cg-line__avatar',
+                variant: { width: 72, height: 72, fit: 'cover' },
+              }),
+          h(
+            'span',
+            { class: 'cg-line__who' },
+            block.author === undefined
+              ? null
+              : h('span', { class: 'cg-line__author', 'data-field': 'author' }, block.author),
+            block.role === undefined
+              ? null
+              : h('span', { class: 'cg-line__role', 'data-field': 'role' }, block.role),
+          ),
+        )
+      : null,
+  )
+}

package/src/render/blocks/stat-counter.ts

@@ -0,0 +1,37 @@
+import type { StatCounterBlock, StatCounterItem } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * `blocks@2.0` (RFC 0001). Narrower than `stats` (no `unit`) — rendered the
+ * same restrained "figures row" way as `stats`, one accent hairline apart:
+ * this theme has no boastful, boxed "impact numbers" register to reach for.
+ */
+function renderItem(item: StatCounterItem): HtmlElement {
+  return h(
+    'div',
+    { class: 'cg-tally' },
+    h('dd', { class: 'cg-tally__value' }, item.value),
+    h('dt', { class: 'cg-tally__label' }, item.label),
+  )
+}
+
+export function renderStatCounter(block: StatCounterBlock, _ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-tallies', 'data-block': 'statCounter' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('statCounter') ?? 'h2',
+          { class: 'cg-tallies__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h('dl', { class: 'cg-tallies__items' }, block.stats.map(renderItem)),
+  )
+}

package/src/render/blocks/stats.ts

@@ -0,0 +1,48 @@
+import type { StatItem, StatsBlock } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * "Since 1994 · 3 chefs · 120 seats" — a quiet row of figures set in the
+ * display serif, separated by hairline rules rather than boxed into cards:
+ * the restrained, editorial register this theme uses everywhere a fact is
+ * stated rather than sold.
+ *
+ * A description list, as every built-in theme uses for `stats`: each figure
+ * is the description of its label, which is what `<dt>`/`<dd>` mean, and it
+ * survives being read linearly (WCAG 1.3.2 — reading order and visual order
+ * stay independent regardless of how the skin repaints them).
+ */
+function renderItem(item: StatItem): HtmlElement {
+  return h(
+    'div',
+    { class: 'cg-figures__item' },
+    h(
+      'dd',
+      { class: 'cg-figures__value' },
+      item.value,
+      item.unit === undefined ? null : h('span', { class: 'cg-figures__unit' }, item.unit),
+    ),
+    h('dt', { class: 'cg-figures__label' }, item.label),
+  )
+}
+
+export function renderStats(block: StatsBlock, _ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-figures', 'data-block': 'stats' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('stats') ?? 'h2',
+          { class: 'cg-figures__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h('dl', { class: 'cg-figures__items' }, block.items.map(renderItem)),
+  )
+}

package/src/render/blocks/testimonial.ts

@@ -0,0 +1,42 @@
+import type { TestimonialBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext, renderRichText } from '@cogenta/theme-kit'
+
+/**
+ * A centred, oversized quotation mark stands above the quote (a CSS
+ * pseudo-glyph, not markup) — the guestbook-page treatment this theme's
+ * elegance calls for, rather than a bordered "client success" card.
+ *
+ * `<figure><blockquote>…</blockquote><figcaption>` is the attribution
+ * pattern the HTML spec prescribes: putting the author inside the
+ * `<blockquote>` would claim the author's name was part of what was said.
+ *
+ * The avatar is decorative — the name sits right beside it in text — so its
+ * media entity's alt text is expected to be empty; `image` still writes the
+ * attribute either way (WCAG 1.1.1).
+ */
+export function renderTestimonial(block: TestimonialBlock, ctx: RenderContext): HtmlElement {
+  const { attribution } = block
+  return h(
+    'figure',
+    { class: '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: 88, height: 88, fit: 'cover' },
+          }),
+      h(
+        'span',
+        { class: 'cg-testimonial__who' },
+        h('span', { class: 'cg-testimonial__name' }, attribution.name),
+        attribution.role === undefined
+          ? null
+          : h('span', { class: 'cg-testimonial__role' }, attribution.role),
+      ),
+    ),
+  )
+}

package/src/render/chrome.ts

@@ -0,0 +1,141 @@
+import {
+  type ChromeInput,
+  type ChromeNavLink,
+  type ChromeResult,
+  escapeAttribute,
+  escapeText,
+  renderBrandMark,
+  renderSocialLinks,
+  renderThemeToggle,
+  serialize,
+} from '@cogenta/theme-kit'
+
+/**
+ * This theme's own header and footer, built for `theme@1.4` from the start
+ * rather than retrofitted: `headerAction` renders as a button beside the
+ * primary nav, `tagline`/`social`/`footerNote` fill the footer's brand
+ * column, and — the one thing none of the four L23 themes had yet — a
+ * genuinely CSS-only mobile menu.
+ *
+ * The mobile menu is a `<details>`/`<summary>` disclosure, not a checkbox
+ * hack: expanding, keyboard operation (`Enter`/`Space` on the `<summary>`)
+ * and the open/closed state announced to assistive technology all come from
+ * the browser, at zero bytes of JavaScript. It carries the *same* links as
+ * the desktop nav plus the header action — never a second, drifting list —
+ * and is shown only below the breakpoint `base.css` sets for `.cg-nav`.
+ *
+ * The manual light/dark toggle (L26) sits right after the desktop nav, before
+ * the header action — `renderThemeToggle` (`@cogenta/theme-kit`) returns
+ * markup only, this theme styles `.cg-theme-toggle` itself in `base.css`. It
+ * is unconditional (rendered on every page, `theme@1.4` fields or not),
+ * unlike the header/footer additions above it.
+ */
+
+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('')
+}
+
+/** Three bars, drawn directly rather than pulled from an icon font (R9/R10) — the universal "menu" glyph. */
+const HAMBURGER_GLYPH =
+  '<svg class="cg-mobile-nav__glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" ' +
+  'stroke-width="1.5" stroke-linecap="round" aria-hidden="true" focusable="false">' +
+  '<path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg>'
+
+/** The header's own call-to-action link (`theme@1.4`), styled like the block vocabulary's own primary action. */
+function renderHeaderAction(action: ChromeInput['headerAction']): string {
+  if (action === undefined) return ''
+  return (
+    `<a class="cg-action cg-nav__cta" data-emphasis="primary" ` +
+    `href="${escapeAttribute(action.href)}">${escapeText(action.label)}</a>`
+  )
+}
+
+/**
+ * The mobile drawer — the same nav links and header action as the desktop
+ * header, in one `<details>` disclosure. Absent entirely when there is
+ * nothing to show, exactly like the desktop `<nav>` above it.
+ */
+function renderMobileNav(input: ChromeInput): string {
+  const items = navItems(input.headerNav)
+  const actionItem =
+    input.headerAction === undefined ? '' : `<li>${renderHeaderAction(input.headerAction)}</li>`
+  if (items === '' && actionItem === '') return ''
+  return (
+    `<details class="cg-mobile-nav">` +
+    `<summary class="cg-mobile-nav__toggle" aria-label="Menu">${HAMBURGER_GLYPH}</summary>` +
+    `<div class="cg-mobile-nav__panel"><ul class="cg-mobile-nav__items">${items}${actionItem}</ul></div>` +
+    `</details>`
+  )
+}
+
+export function renderChrome(input: ChromeInput): ChromeResult {
+  const siteNameText = escapeText(input.site.name)
+  const headerNav = navItems(input.headerNav)
+  const footerNav = navItems(input.footerNav)
+  // The uploaded logo replaces the wordmark, and only the wordmark: the
+  // footer keeps the site's name in text, so a site whose logo fails to
+  // load is still named somewhere on every page.
+  const mark = renderBrandMark(input.brand, { className: 'cg-site-header__logo' }) ?? siteNameText
+  const themeToggle = serialize(renderThemeToggle(input.locale, { className: 'cg-theme-toggle' }))
+  const headerAction = renderHeaderAction(input.headerAction)
+  const mobileNav = renderMobileNav(input)
+
+  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>` +
+    `${
+      headerNav === ''
+        ? ''
+        : `<nav class="cg-nav" aria-label="Primary"><ul class="cg-nav__items">${headerNav}</ul></nav>`
+    }` +
+    `${themeToggle}` +
+    `${headerAction}` +
+    `${mobileNav}` +
+    `</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="cg-site-footer__note">${escapeText(input.footerNote)}</p>`
+
+  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-name" href="${escapeAttribute(input.homeHref)}">${siteNameText}</a>` +
+    `${tagline}${social}</div>` +
+    `${
+      footerNav === ''
+        ? ''
+        : `<nav class="cg-site-footer__nav" aria-label="Footer"><ul class="cg-nav__items">${footerNav}</ul></nav>`
+    }` +
+    `<div class="cg-site-footer__about">${footerNote}</div>` +
+    `</div><div class="cg-site-footer__bottom">` +
+    `<span>${siteNameText}</span>` +
+    `<div class="cg-site-footer__branding">${input.brandingHtml}</div>` +
+    `</div></footer>`
+
+  return { header, footer }
+}

package/src/render/render-block.ts

@@ -0,0 +1,156 @@
+import { type BlockRegistry, VOCABULARY_NAMES, type VocabularyBlock } from '@cogenta/blocks'
+import {
+  type FetchedEntries,
+  type HtmlElement,
+  h,
+  type PageContent,
+  pageHasOwnHeading,
+  type RenderContext,
+  renderEntryHeader,
+  resolveBlockForRender,
+  withBlockKey,
+  withBlockVariant,
+} from '@cogenta/theme-kit'
+import { renderAccordion } from './blocks/accordion.js'
+import { renderCollectionList } from './blocks/collection-list.js'
+import { renderCta } from './blocks/cta.js'
+import { renderEmbed } from './blocks/embed.js'
+import { renderFaq } from './blocks/faq.js'
+import { renderFeatureGrid } from './blocks/feature-grid.js'
+import { renderGallery } from './blocks/gallery.js'
+import { renderHero } from './blocks/hero.js'
+import { renderLogoStrip } from './blocks/logo-strip.js'
+import { renderLogos } from './blocks/logos.js'
+import { renderMediaFigure } from './blocks/media-figure.js'
+import { renderPricingTable } from './blocks/pricing-table.js'
+import { renderProse } from './blocks/prose.js'
+import { renderQuote } from './blocks/quote.js'
+import { renderStatCounter } from './blocks/stat-counter.js'
+import { renderStats } from './blocks/stats.js'
+import { renderTestimonial } from './blocks/testimonial.js'
+
+export type { FetchedEntries, PageContent }
+
+export function renderBlock(
+  block: VocabularyBlock,
+  ctx: RenderContext,
+  entries: FetchedEntries = {},
+  registry?: BlockRegistry,
+): HtmlElement | null {
+  // `block`'s type says `VocabularyBlock`, but the value crossing this
+  // boundary from stored content is not always literally one of the shared
+  // vocabulary — resolving here is what turns an unimplemented theme-private
+  // block into its declared fallback instead of a silently blank slot.
+  const resolved = resolveBlockForRender(block, VOCABULARY_NAMES, registry)
+  if (resolved === null) return null
+  const known = resolved as unknown as VocabularyBlock
+  return withBlockVariant(renderKnownBlock(known, ctx, entries), known.variant)
+}
+
+function renderKnownBlock(
+  known: VocabularyBlock,
+  ctx: RenderContext,
+  entries: FetchedEntries,
+): HtmlElement | null {
+  switch (known._type) {
+    case 'hero':
+      return renderHero(known, ctx)
+    case 'prose':
+      return renderProse(known, ctx)
+    case 'mediaFigure':
+      return renderMediaFigure(known, ctx)
+    case 'featureGrid':
+      return renderFeatureGrid(known, ctx)
+    case 'cta':
+      return renderCta(known, ctx)
+    case 'gallery':
+      return renderGallery(known, ctx)
+    case 'quote':
+      return renderQuote(known, ctx)
+    case 'faq':
+      return renderFaq(known, ctx)
+    case 'stats':
+      return renderStats(known, ctx)
+    case 'logos':
+      return renderLogos(known, ctx)
+    case 'collectionList':
+      return renderCollectionList(known, ctx, entries[known._key] ?? [])
+    case 'embed':
+      return renderEmbed(known, ctx)
+    case 'testimonial':
+      return renderTestimonial(known, ctx)
+    case 'pricingTable':
+      return renderPricingTable(known, ctx)
+    case 'accordion':
+      return renderAccordion(known, ctx)
+    case 'statCounter':
+      return renderStatCounter(known, ctx)
+    case 'logoStrip':
+      return renderLogoStrip(known, ctx)
+    default: {
+      // Exhaustive over contract B's vocabulary: `known` is `never` here, so
+      // a block this package does not implement stops it compiling until it
+      // is.
+      const unreachable: never = known
+      void unreachable
+      return null
+    }
+  }
+}
+
+/**
+ * `<main id="cg-main">` is mandatory: it is the skip-link's target, written
+ * once by `@cogenta/cli`'s `theme-render.ts` outside any theme's control.
+ *
+ * `withBlockKey` stamps every rendered block with its contract-B `_key` —
+ * required so the visual page builder (L16) can map a clicked element in
+ * the rendered iframe back to the block that produced it.
+ *
+ * A routed collection with no `blocks` field of its own — this theme's
+ * `menu_item`, in particular — reaches here with an empty block list, so
+ * `page.entry` (contract D `theme@1.4`) is what carries its furniture:
+ * `renderEntryHeader` draws the title, excerpt (the dish's own
+ * `description`, via `entryExcerpt`'s field-name convention) and cover
+ * photo. `PageEntryMeta` has no room for a schema-specific field such as
+ * `price`/`category`, so a menu item's own page cannot show them without a
+ * contract D change — the theme's real, honest limit; the price and
+ * category chip the brief also asks for are exactly what the home page's
+ * `collectionList` menu already renders for every dish, and the item page
+ * still links back there.
+ */
+/**
+ * A second, theme-local stamp beside `withBlockKey`'s own `data-block-key`:
+ * a real `id` attribute, so this theme's single-page navigation (the
+ * blueprint's header/footer links into `#home-menu`/`#home-story`/etc.) has
+ * something to scroll to. Contract B's `_key` is already guaranteed unique
+ * within one page's block list (the reorder/diff identity every block
+ * carries), so reusing it as the DOM id can never collide on a page this
+ * theme rendered — safe to do generically, for every block, not only the
+ * ones a blueprint happens to link to.
+ */
+function withAnchorId(element: HtmlElement | null, key: string): HtmlElement | null {
+  if (element === null) return null
+  return { ...element, attrs: { ...element.attrs, id: key } }
+}
+
+export function renderPage(
+  page: PageContent,
+  ctx: RenderContext,
+  entries: FetchedEntries = {},
+  registry?: BlockRegistry,
+): HtmlElement {
+  const heading = pageHasOwnHeading(page.blocks)
+    ? null
+    : (renderEntryHeader(page, ctx) ?? h('h1', { class: 'cg-page__title' }, page.title))
+  return h(
+    'main',
+    { class: 'cg-main', id: 'cg-main' },
+    heading,
+    page.blocks.map((block) =>
+      withAnchorId(
+        withBlockKey(renderBlock(block, ctx, entries, registry), block._key),
+        block._key,
+      ),
+    ),
+  )
+}

package/src/render/term-archive.ts

@@ -0,0 +1,78 @@
+import { type HtmlElement, h, type TermArchiveInput } from '@cogenta/theme-kit'
+
+/**
+ * The taxonomy-term archive (contract D `theme@1.3`) — a resource index.
+ *
+ * Built from the same `cg-index__row` rows this theme's `collectionList`
+ * dishes would sit in, minus the price column: a date rail on the left,
+ * the title and its summary on the right.
+ */
+export function renderTermArchive(input: TermArchiveInput): HtmlElement {
+  const rows = input.entries.map((entry) =>
+    h(
+      'li',
+      { class: 'cg-index__row' },
+      entry.publishedAt === null
+        ? null
+        : h(
+            'time',
+            { class: 'cg-index__date', datetime: entry.publishedAt },
+            entry.publishedAt.slice(0, 10),
+          ),
+      h(
+        'div',
+        { class: 'cg-index__body' },
+        h(
+          'h2',
+          { class: 'cg-index__title' },
+          entry.href === null
+            ? entry.title
+            : h('a', { class: 'cg-index__link', href: entry.href }, entry.title),
+        ),
+        entry.summary === null ? null : h('p', { class: 'cg-index__excerpt' }, entry.summary),
+      ),
+    ),
+  )
+
+  return h(
+    'main',
+    { class: 'cg-main cg-archive', id: 'cg-main' },
+    input.ancestors.length === 0
+      ? null
+      : h(
+          'nav',
+          { class: 'cg-archive__breadcrumb', 'aria-label': input.labels.breadcrumb },
+          h(
+            'ol',
+            {},
+            ...input.ancestors.map((l) => h('li', {}, h('a', { href: l.href }, l.label))),
+          ),
+        ),
+    h('h1', { class: 'cg-index__title-heading' }, input.term.label),
+    input.children.length === 0
+      ? null
+      : h(
+          'ul',
+          { class: 'cg-archive__children', 'aria-label': input.labels.subterms },
+          ...input.children.map((c) => h('li', {}, h('a', { href: c.href }, c.label))),
+        ),
+    rows.length === 0
+      ? h('p', { class: 'cg-index__empty' }, input.labels.empty)
+      : h('ul', { class: 'cg-index__items' }, ...rows),
+    pager(input),
+  )
+}
+
+function pager(input: TermArchiveInput): HtmlElement | null {
+  if (input.page.previousHref === null && input.page.nextHref === null) return null
+  return h(
+    'nav',
+    { class: 'cg-archive__pager', 'aria-label': input.labels.pagination },
+    input.page.previousHref === null
+      ? null
+      : h('a', { rel: 'prev', href: input.page.previousHref }, input.labels.previous),
+    input.page.nextHref === null
+      ? null
+      : h('a', { rel: 'next', href: input.page.nextHref }, input.labels.next),
+  )
+}