@cogenta/theme-association 0.3.2

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

@@ -0,0 +1,73 @@
+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). Rarely a nonprofit's own price list, but not never
+ * (a membership fee, a course fee) — kept in the shared, rounded-card
+ * register the rest of this theme uses. `highlighted` becomes
+ * `data-highlighted` for the skin to style, and `aria-current` so it is
+ * announced, not only shown.
+ */
+function renderTier(tier: PricingTier, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  return h(
+    'li',
+    {
+      class: 'cg-pricing__tier',
+      'data-highlighted': tier.highlighted === true ? 'true' : undefined,
+      'aria-current': tier.highlighted === true ? 'true' : undefined,
+    },
+    heading(tag, { class: 'cg-pricing__name' }, tier.name),
+    h(
+      'p',
+      { class: 'cg-pricing__price' },
+      h('span', { class: 'cg-pricing__amount' }, tier.price),
+      tier.interval === undefined
+        ? null
+        : h('span', { class: 'cg-pricing__interval' }, tier.interval),
+    ),
+    tier.features.length === 0
+      ? null
+      : h(
+          'ul',
+          { class: 'cg-pricing__features' },
+          tier.features.map((feature) => h('li', {}, feature)),
+        ),
+    tier.action === undefined
+      ? null
+      : h(
+          'div',
+          { class: 'cg-pricing__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-block cg-pricing', 'data-block': 'pricingTable' },
+    hasTitle
+      ? heading(
+          blockHeadingTag('pricingTable') ?? 'h2',
+          { class: 'cg-pricing__title', 'data-field': 'title' },
+          block.title ?? '',
+        )
+      : null,
+    h(
+      'ul',
+      { class: 'cg-pricing__tiers' },
+      block.tiers.map((tier) => renderTier(tier, ctx, tierTag)),
+    ),
+  )
+}

package/src/render/blocks/prose.ts

@@ -0,0 +1,15 @@
+import type { ProseBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, type RenderContext, renderRichText } from '@cogenta/theme-kit'
+
+/**
+ * `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-block cg-prose', 'data-block': 'prose' },
+    renderRichText(ctx, block.body),
+  )
+}

package/src/render/blocks/quote.ts

@@ -0,0 +1,39 @@
+import type { QuoteBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * `<figure><blockquote>…</blockquote><figcaption>` is the attribution
+ * pattern the HTML spec prescribes: putting the author inside the
+ * `<blockquote>` would claim the author's name is part of what was said.
+ *
+ * The avatar is decorative here — the name is right beside it in text — so
+ * its media entity's alt text is expected to be empty. `image` still writes
+ * the attribute either way.
+ */
+export function renderQuote(block: QuoteBlock, ctx: RenderContext): HtmlElement {
+  const hasAttribution =
+    block.author !== undefined || block.role !== undefined || block.avatar !== undefined
+  return h(
+    'figure',
+    { class: 'cg-block cg-quote', 'data-block': 'quote' },
+    h('blockquote', { class: 'cg-quote__text' }, h('p', { 'data-field': 'text' }, block.text)),
+    hasAttribution
+      ? h(
+          'figcaption',
+          { class: 'cg-quote__attribution' },
+          block.avatar === undefined
+            ? null
+            : image(ctx, block.avatar, {
+                className: 'cg-quote__avatar',
+                variant: { width: 96, height: 96, fit: 'cover' },
+              }),
+          block.author === undefined
+            ? null
+            : h('span', { class: 'cg-quote__author', 'data-field': 'author' }, block.author),
+          block.role === undefined
+            ? null
+            : h('span', { class: 'cg-quote__role', 'data-field': 'role' }, block.role),
+        )
+      : null,
+  )
+}

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

@@ -0,0 +1,36 @@
+import type { StatCounterBlock, StatCounterItem } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * `blocks@2.0` (RFC 0001). A `<dl>`, exactly like `stats` — narrower on
+ * purpose (no `unit`), for one big figure and its label.
+ */
+function renderItem(item: StatCounterItem): HtmlElement {
+  return h(
+    'div',
+    { class: 'cg-stat-counter' },
+    h('dt', { class: 'cg-stat-counter__label' }, item.label),
+    h('dd', { class: 'cg-stat-counter__value' }, item.value),
+  )
+}
+
+export function renderStatCounter(block: StatCounterBlock, _ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-block cg-stat-counters', 'data-block': 'statCounter' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('statCounter') ?? 'h2',
+          { class: 'cg-stat-counters__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h('dl', { class: 'cg-stat-counters__items' }, block.stats.map(renderItem)),
+  )
+}

package/src/render/blocks/stats.ts

@@ -0,0 +1,45 @@
+import type { StatItem, StatsBlock } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * The impact band — "12,400 meals served", "380 volunteers" — rendered as a
+ * description list so each big figure stays the description of its label
+ * (WCAG 1.3.2). Reading order is label then figure, exactly as the markup
+ * says; the stylesheet paints the figure first with `column-reverse` (see
+ * `blocks.css`'s own comment on `.cg-impact-stat`) — the paint order changes,
+ * the DOM order a screen reader follows does not.
+ */
+function renderItem(item: StatItem): HtmlElement {
+  return h(
+    'div',
+    { class: 'cg-impact-stat' },
+    h('dt', { class: 'cg-impact-stat__label' }, item.label),
+    h(
+      'dd',
+      { class: 'cg-impact-stat__value' },
+      item.value,
+      item.unit === undefined ? null : h('span', { class: 'cg-impact-stat__unit' }, item.unit),
+    ),
+  )
+}
+
+export function renderStats(block: StatsBlock, _ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-block cg-impact', 'data-block': 'stats' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('stats') ?? 'h2',
+          { class: 'cg-impact__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h('dl', { class: 'cg-impact__items' }, block.items.map(renderItem)),
+  )
+}

package/src/render/blocks/testimonial.ts

@@ -0,0 +1,36 @@
+import type { TestimonialBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext, renderRichText } from '@cogenta/theme-kit'
+
+/**
+ * `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.
+ */
+export function renderTestimonial(block: TestimonialBlock, ctx: RenderContext): HtmlElement {
+  const { attribution } = block
+  return h(
+    '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' },
+          }),
+      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,134 @@
+import {
+  type ChromeInput,
+  type ChromeNavLink,
+  type ChromeResult,
+  escapeAttribute,
+  escapeText,
+  renderBrandMark,
+  renderSocialLinks,
+  renderThemeToggle,
+  serialize,
+} from '@cogenta/theme-kit'
+
+/**
+ * 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 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.
+ *
+ * `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.
+ *
+ * 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.
+ */
+
+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('')
+}
+
+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>`
+}
+
+/** 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>`
+  )
+}
+
+/** 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>'
+
+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 mobileToggle =
+    headerNavMobile === ''
+      ? ''
+      : `<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>`
+
+  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}` +
+    `</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-link" href="${escapeAttribute(input.homeHref)}">${siteNameText}</a>` +
+    `${tagline}` +
+    `</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>` +
+    `</div>` +
+    `<div class="cg-site-footer__bottom"><span>${siteNameText}</span>${input.brandingHtml}</div>` +
+    `</footer>`
+
+  return { header, footer }
+}

package/src/render/render-block.ts

@@ -0,0 +1,140 @@
+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 { pageHasOwnHeading, renderEntryHeader, withBlockKey }
+
+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
+  // `withBlockVariant` (blocks@2.0, RFC 0002) is applied once here, after
+  // dispatch, rather than inside each of the seventeen block renderers —
+  // `variant` is envelope data every block carries identically.
+  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. Returning null rather than throwing is deliberate — a theme has
+      // no access to `@cogenta/core`'s error types (contract D refuses the
+      // import), and choosing a fallback block is the render layer's job,
+      // not the theme's.
+      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.
+ *
+ * `theme@1.4` (L25 D2): `renderEntryHeader` returns `null` both for a page
+ * with no `entry` meta and for one whose blocks already draw their own
+ * heading (a `hero`) — the bare `<h1 class="cg-page__title">` fallback below
+ * is the right markup in both of those cases and only those, so the page
+ * always carries exactly one `<h1>`.
+ *
+ * `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.
+ */
+export function renderPage(
+  page: PageContent,
+  ctx: RenderContext,
+  entries: FetchedEntries = {},
+  registry?: BlockRegistry,
+): HtmlElement {
+  const entryHeader = renderEntryHeader(page, ctx)
+  return h(
+    'main',
+    { class: 'cg-main', id: 'cg-main' },
+    entryHeader,
+    entryHeader === null && !pageHasOwnHeading(page.blocks)
+      ? h('h1', { class: 'cg-page__title' }, page.title)
+      : null,
+    page.blocks.map((block) =>
+      withBlockKey(renderBlock(block, ctx, entries, registry), block._key),
+    ),
+  )
+}

package/src/render/term-archive.ts

@@ -0,0 +1,92 @@
+import { type HtmlElement, h, type TermArchiveInput } from '@cogenta/theme-kit'
+
+/**
+ * The taxonomy-term archive (contract D `theme@1.3`) — a card grid, the same
+ * register the home page's "Upcoming events" `collectionList` uses: a
+ * rounded, shadowed card per entry, with a big day/month badge when the
+ * entry carries a publication date, title and summary underneath. There is
+ * no `entryImage` here (`TermArchiveEntry` carries no image field), so the
+ * card leans on the date badge and warm surface colour for shape instead of
+ * a missing photo.
+ */
+function dateBadge(publishedAt: string | null): HtmlElement | null {
+  if (publishedAt === null) return null
+  const date = new Date(publishedAt)
+  if (Number.isNaN(date.getTime())) return null
+  return h(
+    'time',
+    { class: 'cg-archive-card__date', datetime: publishedAt },
+    h('span', { class: 'cg-archive-card__day' }, String(date.getUTCDate())),
+    h(
+      'span',
+      { class: 'cg-archive-card__month' },
+      new Intl.DateTimeFormat('en', { month: 'short' }).format(date),
+    ),
+  )
+}
+
+export function renderTermArchive(input: TermArchiveInput): HtmlElement {
+  const cards = input.entries.map((entry) =>
+    h(
+      'li',
+      { class: 'cg-archive-card' },
+      dateBadge(entry.publishedAt),
+      h(
+        'div',
+        { class: 'cg-archive-card__body' },
+        h(
+          'h2',
+          { class: 'cg-archive-card__title' },
+          entry.href === null
+            ? entry.title
+            : h('a', { class: 'cg-archive-card__link', href: entry.href }, entry.title),
+        ),
+        entry.summary === null
+          ? null
+          : h('p', { class: 'cg-archive-card__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((link) => h('li', {}, h('a', { href: link.href }, link.label))),
+          ),
+        ),
+    h('h1', { class: 'cg-archive__title' }, input.term.label),
+    input.children.length === 0
+      ? null
+      : h(
+          'ul',
+          { class: 'cg-archive__children', 'aria-label': input.labels.subterms },
+          ...input.children.map((child) => h('li', {}, h('a', { href: child.href }, child.label))),
+        ),
+    cards.length === 0
+      ? h('p', { class: 'cg-archive__empty' }, input.labels.empty)
+      : h('ul', { class: 'cg-archive__grid' }, ...cards),
+    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),
+  )
+}