@cogenta/theme-magazine 1.1.2

package/src/render/blocks/logo-strip.ts

@@ -0,0 +1,35 @@
+import type { LogoStripBlock, LogoStripItem } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * `blocks@2.0` (RFC 0001). The lighter-weight "as used by" strip next to
+ * `logos`'s own press row (`cg-press`, which titles itself and links each
+ * mark to its organisation): `logoStrip` has no per-logo name or url, so it
+ * carries no title and no links — a plain band of marks with an optional
+ * caption set underneath, the way a colophon credits its supporters along
+ * the bottom of a masthead page. Each image's own alt text (set once, in
+ * the media library) is what names it, exactly as `logos` already falls
+ * back to when a link is absent.
+ */
+function renderItem(item: LogoStripItem, ctx: RenderContext): HtmlElement {
+  return h(
+    'li',
+    { class: 'cg-imprint__item' },
+    image(ctx, item.media, { className: 'cg-imprint__image', variant: { fit: 'contain' } }),
+  )
+}
+
+export function renderLogoStrip(block: LogoStripBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'figure',
+    { class: 'cg-block cg-imprint', 'data-block': 'logoStrip' },
+    h(
+      'ul',
+      { class: 'cg-imprint__items' },
+      block.logos.map((item) => renderItem(item, ctx)),
+    ),
+    block.caption === undefined
+      ? null
+      : h('figcaption', { class: 'cg-imprint__caption', 'data-field': 'caption' }, block.caption),
+  )
+}

package/src/render/blocks/logos.ts

@@ -0,0 +1,57 @@
+import type { LogoItem, LogosBlock } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  image,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * A press strip — "As seen in" — a single row divided by hairline rules
+ * rather than a card grid, the way a masthead credits its syndication
+ * partners along one line.
+ *
+ * The organisation's name is contract B's own accessible name for the link:
+ * the logo image carries it as `alt` when the media entity has none, so no
+ * visually hidden duplicate text is needed — a link whose only content is an
+ * image with `alt` text is already named.
+ */
+function renderItem(item: LogoItem, ctx: RenderContext): HtmlElement {
+  const logo = image(ctx, item.media, {
+    className: 'cg-press__image',
+    altFrom: item.name,
+    variant: { fit: 'contain' },
+  })
+  return h(
+    'li',
+    { class: 'cg-press__item' },
+    item.url === undefined
+      ? logo
+      : h(
+          'a',
+          { class: 'cg-press__link', href: ctx.link(item.url), rel: 'noopener noreferrer' },
+          logo,
+        ),
+  )
+}
+
+export function renderLogos(block: LogosBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-block cg-press', 'data-block': 'logos' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('logos') ?? 'h2',
+          { class: 'cg-press__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h(
+      'ul',
+      { class: 'cg-press__items' },
+      block.items.map((item) => renderItem(item, ctx)),
+    ),
+  )
+}

package/src/render/blocks/media-figure.ts

@@ -0,0 +1,43 @@
+import type { MediaFigureBlock } from '@cogenta/blocks'
+import { aspectRatio, type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * A plate, in the print sense: the picture runs large, and the caption sits
+ * under a hairline rule set in small caps with the credit line trailing it —
+ * the way a photo essay is captioned, rather than a card with a paragraph
+ * under it.
+ *
+ * `<figure>`/`<figcaption>` keep the caption announced as belonging to the
+ * image; `align` stays a data attribute (contract B's intent, not a class),
+ * so the skin — here, this theme — decides what `start`/`end`/`wide`/`full`
+ * mean.
+ */
+export function renderMediaFigure(block: MediaFigureBlock, ctx: RenderContext): HtmlElement {
+  const ratio = aspectRatio(block.ratio)
+  const hasCaption = block.caption !== undefined || block.credit !== undefined
+  return h(
+    'figure',
+    {
+      class: 'cg-block cg-plate',
+      'data-block': 'mediaFigure',
+      'data-align': block.align ?? 'center',
+      style: ratio === undefined ? undefined : `--cg-ratio:${ratio}`,
+    },
+    image(ctx, block.media, {
+      className: 'cg-plate__media',
+      sizes: '(min-width: 60rem) 48rem, 100vw',
+    }),
+    hasCaption
+      ? h(
+          'figcaption',
+          { class: 'cg-plate__caption' },
+          block.caption === undefined
+            ? null
+            : h('span', { class: 'cg-plate__text' }, block.caption),
+          block.credit === undefined
+            ? null
+            : h('span', { class: 'cg-plate__credit', 'data-field': 'credit' }, block.credit),
+        )
+      : null,
+  )
+}

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

@@ -0,0 +1,76 @@
+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). A classified-ads rate card: tiers set side by
+ * side and separated by the theme's one visible column rule (the same
+ * device `hero` and `collectionList` use), rather than a set of raised
+ * cards — a print page has no elevation to raise a card off of.
+ *
+ * `highlighted` is an editorial signal, not a colour: it becomes
+ * `data-highlighted` for the stylesheet to pick up (an ink-reversed panel,
+ * here) and `aria-current` so it is announced, not only shown.
+ */
+function renderTier(tier: PricingTier, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  return h(
+    'li',
+    {
+      class: 'cg-ratecard__tier',
+      'data-highlighted': tier.highlighted === true ? 'true' : undefined,
+      'aria-current': tier.highlighted === true ? 'true' : undefined,
+    },
+    heading(tag, { class: 'cg-ratecard__name' }, tier.name),
+    h(
+      'p',
+      { class: 'cg-ratecard__price' },
+      h('span', { class: 'cg-ratecard__amount' }, tier.price),
+      tier.interval === undefined
+        ? null
+        : h('span', { class: 'cg-ratecard__interval' }, tier.interval),
+    ),
+    tier.features.length === 0
+      ? null
+      : h(
+          'ul',
+          { class: 'cg-ratecard__features' },
+          tier.features.map((feature) => h('li', { class: 'cg-ratecard__feature' }, feature)),
+        ),
+    tier.action === undefined
+      ? null
+      : h(
+          'div',
+          { class: 'cg-ratecard__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-ratecard', 'data-block': 'pricingTable' },
+    hasTitle
+      ? heading(
+          blockHeadingTag('pricingTable') ?? 'h2',
+          { class: 'cg-ratecard__title', 'data-field': 'title' },
+          block.title ?? '',
+        )
+      : null,
+    h(
+      'ul',
+      { class: 'cg-ratecard__tiers' },
+      block.tiers.map((tier) => renderTier(tier, ctx, tierTag)),
+    ),
+  )
+}

package/src/render/blocks/prose.ts

@@ -0,0 +1,22 @@
+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, and `renderRichText` (shared, `@cogenta/theme-kit`) is what actually
+ * turns the document into markup, including its embedded figures
+ * (`.cg-prose__figure`, a class name that module already fixes — this file's
+ * own container class has to match it).
+ *
+ * The drop cap and the pull-quote treatment on a nested `<blockquote>` are
+ * both pure CSS, keyed off `.cg-prose > :first-child` and `.cg-prose
+ * blockquote` in `blocks.css` — nothing here has to know which paragraph
+ * came first.
+ */
+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,46 @@
+import type { QuoteBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * The pull quote — the one typographic gesture a magazine spread always
+ * makes. Set large in the display serif, indented from a heavy left rule
+ * rather than centred under a giant glyph, with the attribution trailing it
+ * on its own line, joined by a typographic em-rule instead of a comma the
+ * markup does not carry.
+ *
+ * `<figure><blockquote>…</blockquote><figcaption>` is the attribution
+ * pattern the HTML spec itself prescribes — the author's name sitting
+ * outside the `<blockquote>` is what stops it from being claimed as part of
+ * what was said.
+ */
+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-pullquote', 'data-block': 'quote' },
+    h('blockquote', { class: 'cg-pullquote__text' }, h('p', { 'data-field': 'text' }, block.text)),
+    hasAttribution
+      ? h(
+          'figcaption',
+          { class: 'cg-pullquote__attribution' },
+          block.avatar === undefined
+            ? null
+            : image(ctx, block.avatar, {
+                className: 'cg-pullquote__avatar',
+                variant: { width: 96, height: 96, fit: 'cover' },
+              }),
+          h(
+            'span',
+            { class: 'cg-pullquote__names' },
+            block.author === undefined
+              ? null
+              : h('span', { class: 'cg-pullquote__author', 'data-field': 'author' }, block.author),
+            block.role === undefined
+              ? null
+              : h('span', { class: 'cg-pullquote__role', 'data-field': 'role' }, block.role),
+          ),
+        )
+      : null,
+  )
+}

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

@@ -0,0 +1,39 @@
+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 circulation tally, set apart from `stats`'s own
+ * `cg-figures` (which carries vertical column rules and an optional `unit`):
+ * `statCounter` has no `unit`, so it is laid out as a single running line —
+ * each figure and its label separated only by a shared baseline rule, the
+ * way a masthead prints its circulation and edition counts along one strip.
+ */
+function renderItem(item: StatCounterItem): HtmlElement {
+  return h(
+    'div',
+    { class: 'cg-tally__item' },
+    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-block cg-tally', 'data-block': 'statCounter' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('statCounter') ?? 'h2',
+          { class: 'cg-tally__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h('dl', { class: 'cg-tally__items' }, block.stats.map(renderItem)),
+  )
+}

package/src/render/blocks/stats.ts

@@ -0,0 +1,46 @@
+import type { StatItem, StatsBlock } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * "By the numbers" — an infographic sidebar with a real newspaper
+ * `column-rule` between figures, each set in the display serif with tabular
+ * numerals so a column of changing digits never shifts width.
+ *
+ * A description list, as in the reference theme: each figure *describes* its
+ * label, which is exactly what `<dt>`/`<dd>` mean, and it survives being read
+ * linearly by anything that ignores the stylesheet.
+ */
+function renderItem(item: StatItem): HtmlElement {
+  return h(
+    'div',
+    { class: 'cg-figures__item' },
+    h('dt', { class: 'cg-figures__label' }, item.label),
+    h(
+      'dd',
+      { class: 'cg-figures__value' },
+      item.value,
+      item.unit === undefined ? null : h('span', { class: 'cg-figures__unit' }, item.unit),
+    ),
+  )
+}
+
+export function renderStats(block: StatsBlock, _ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-block 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,44 @@
+import type { TestimonialBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext, renderRichText } from '@cogenta/theme-kit'
+
+/**
+ * `blocks@2.0` (RFC 0001). A reader's letter, not a pull quote: `quote`
+ * already owns the theme's one "loud" typographic gesture (the giant quote
+ * mark and heavy rule in `cg-pullquote`), so a testimonial reads instead as
+ * a boxed letter-to-the-editor — a framed panel, the quote set in italic
+ * serif at body size rather than blown up, and a byline row underneath a
+ * hairline rule, the way a magazine runs its reader mail column.
+ *
+ * The quote is rich text (unlike `quote`'s plain-text `text`), so a
+ * testimonial can carry a link or emphasis; `renderRichText` handles it the
+ * same way `accordion`'s answers and `prose`'s body do.
+ *
+ * The avatar is decorative, exactly like `quote`'s own: the name sits right
+ * beside it in text, so its media entity's alt text is expected to be empty.
+ */
+export function renderTestimonial(block: TestimonialBlock, ctx: RenderContext): HtmlElement {
+  const { attribution } = block
+  return h(
+    'figure',
+    { class: 'cg-block cg-letter', 'data-block': 'testimonial' },
+    h('blockquote', { class: 'cg-letter__quote' }, renderRichText(ctx, block.quote)),
+    h(
+      'figcaption',
+      { class: 'cg-letter__byline' },
+      attribution.avatar === undefined
+        ? null
+        : image(ctx, attribution.avatar, {
+            className: 'cg-letter__avatar',
+            variant: { width: 96, height: 96, fit: 'cover' },
+          }),
+      h(
+        'span',
+        { class: 'cg-letter__names' },
+        h('span', { class: 'cg-letter__name' }, attribution.name),
+        attribution.role === undefined
+          ? null
+          : h('span', { class: 'cg-letter__role' }, attribution.role),
+      ),
+    ),
+  )
+}

package/src/render/chrome.ts

@@ -0,0 +1,162 @@
+import {
+  type ChromeInput,
+  type ChromeNavLink,
+  type ChromeResult,
+  escapeAttribute,
+  escapeText,
+  renderBrandMark,
+  renderSocialLinks,
+  renderThemeToggle,
+  serialize,
+} from '@cogenta/theme-kit'
+
+/**
+ * The masthead. A magazine's front matter is a nameplate — the title set in
+ * the display serif, centred, with a hairline rule above and below — and a
+ * quiet rubric bar underneath it, the way a print contents strip reads. That
+ * is a structurally different header from a left-aligned wordmark plus a
+ * right-aligned menu (`theme-canonical`'s own layout): the nameplate gets
+ * its own row so it can be set large without competing with the nav for
+ * width, and the nav becomes a second, quieter row.
+ *
+ * L25 pro pass (`theme@1.4`): the top strip now names today's date rather
+ * than a static tagline (`Intl.DateTimeFormat(ctx.locale, { dateStyle:
+ * 'full' })` on `new Date()` — legitimate here because every page renders
+ * per request, `cogenta serve` never caches a rendered page across a day
+ * boundary for an anonymous visitor beyond `security.pageMaxAge`, and this
+ * theme's own masthead has never claimed to be static-generated — `theme.
+ * config.ts` still declares `runtime: 'static'`, which describes what this
+ * theme *needs* to render a page, not a promise that today's date is frozen
+ * at build time); the rubric row now also carries `headerAction` as a filled
+ * "Subscribe"-style button; and a CSS-only `<details>` disclosure collapses
+ * the whole rubric row into a hamburger below the nameplate's own
+ * breakpoint, exactly the technique `theme-blog`'s masthead already proved
+ * against a real browser (a closed `<details>`'s non-summary content cannot
+ * be forced open by CSS alone, so the collapsed and expanded nav are two
+ * separate `<nav>`s, never one pushed into a state it was never opened
+ * into — see that theme's own `chrome.ts` for the verified detail).
+ *
+ * L26 D4 — the manual light/dark/system toggle (`renderThemeToggle`,
+ * `@cogenta/theme-kit`) sits in the top strip, next to today's date, not in
+ * the rubric row below: the top strip renders unconditionally on every
+ * page, while the rubric (`hasRubric`) only renders when there is a nav or
+ * a header action — a toggle placed there would vanish on a site with
+ * neither, which is exactly the "dark mode looks unsupported" bug this
+ * feature exists to fix.
+ */
+
+function renderNavItems(links: readonly ChromeNavLink[], className: string): string {
+  const items = 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('')
+  return items === '' ? '' : `<ul class="${className}">${items}</ul>`
+}
+
+/** The rubric row's own call-to-action link (`theme@1.4`) — a filled button, the masthead's one place of solid colour. */
+function renderHeaderAction(action: ChromeInput['headerAction']): string {
+  if (action === undefined) return ''
+  return (
+    `<a class="cg-action cg-masthead__action" data-emphasis="primary" ` +
+    `href="${escapeAttribute(action.href)}">${escapeText(action.label)}</a>`
+  )
+}
+
+/** A hamburger mark drawn from three stacked bars — no icon font, no glyph a font might not ship. */
+function menuGlyph(): string {
+  return '<span class="cg-masthead__bars" aria-hidden="true"></span>'
+}
+
+function todaysDate(locale: string): string {
+  try {
+    return new Intl.DateTimeFormat(locale, { dateStyle: 'full' }).format(new Date())
+  } catch {
+    return new Date().toISOString().slice(0, 10)
+  }
+}
+
+export function renderChrome(input: ChromeInput): ChromeResult {
+  const siteNameText = escapeText(input.site.name)
+  const navItems = renderNavItems(input.headerNav, 'cg-masthead__menu')
+  const headerAction = renderHeaderAction(input.headerAction)
+  const footerNav = renderNavItems(input.footerNav, 'cg-colophon__menu')
+  const homeHref = escapeAttribute(input.homeHref)
+  // A nameplate is the one place a masthead earns a logo: it replaces the
+  // wordmark on its own row. The colophon keeps the name in text, so the
+  // site is still named in a page whose images never load.
+  const nameplate = renderBrandMark(input.brand, { className: 'cg-masthead__logo' }) ?? siteNameText
+  const themeToggle = serialize(renderThemeToggle(input.locale, { className: 'cg-theme-toggle' }))
+
+  const hasRubric = navItems !== '' || headerAction !== ''
+  // Two renderings of the same rubric row, never both visible at once (CSS,
+  // `min-width: 56rem`) — see the file-level comment for why this cannot be
+  // a single `<details open>` forced open at width.
+  const mobileRubric = !hasRubric
+    ? ''
+    : `<details class="cg-masthead__disclosure">` +
+      `<summary class="cg-masthead__toggle" aria-label="Menu">${menuGlyph()}</summary>` +
+      `<nav class="cg-masthead__panel" aria-label="Primary">${navItems}${headerAction}</nav>` +
+      `</details>`
+  const desktopRubric = !hasRubric
+    ? ''
+    : `<nav class="cg-masthead__nav" aria-label="Primary"><div class="cg-masthead__nav-inner">${navItems}${headerAction}</div></nav>`
+
+  const header =
+    `<header class="cg-masthead">` +
+    `<div class="cg-masthead__top">` +
+    `<span class="cg-masthead__date">${escapeText(todaysDate(input.locale))}</span>` +
+    `${themeToggle}` +
+    `</div>` +
+    `<div class="cg-masthead__nameplate">` +
+    `<a class="cg-masthead__wordmark" href="${homeHref}">${nameplate}</a>` +
+    `${mobileRubric}` +
+    `</div>` +
+    `${desktopRubric}` +
+    `</header>`
+
+  const tagline =
+    input.tagline === undefined
+      ? ''
+      : `<p class="cg-colophon__tagline" data-field="tagline">${escapeText(input.tagline)}</p>`
+  const social =
+    input.social === undefined
+      ? ''
+      : serialize(
+          renderSocialLinks(input.social, {
+            className: 'cg-colophon__social',
+            itemClassName: 'cg-colophon__social-item',
+          }) ?? { kind: 'text', value: '' },
+        )
+  const footerNote =
+    input.footerNote === undefined
+      ? ''
+      : `<p class="cg-colophon__note">${escapeText(input.footerNote)}</p>`
+
+  const footer =
+    `<footer class="cg-colophon"><div class="cg-colophon__grid">` +
+    `<div class="cg-colophon__about">` +
+    `<a class="cg-colophon__wordmark" href="${homeHref}">${siteNameText}</a>` +
+    `${tagline}</div>` +
+    `<div class="cg-colophon__sections">` +
+    `<p class="cg-colophon__heading">Sections</p>` +
+    `${footerNav === '' ? '' : `<nav aria-label="Footer">${footerNav}</nav>`}` +
+    `</div>` +
+    `<div class="cg-colophon__follow">` +
+    `<p class="cg-colophon__heading">Follow</p>` +
+    `${social}` +
+    `</div>` +
+    `<div class="cg-colophon__meta">` +
+    `${footerNote}` +
+    `<div class="cg-colophon__branding">${input.brandingHtml}</div>` +
+    `</div>` +
+    `</div></footer>`
+
+  return { header, footer }
+}