@cogenta/theme-magazine 1.1.2

package/src/render/render-block.ts

@@ -0,0 +1,137 @@
+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 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, exactly the
+  // same reasoning `withBlockKey` in `renderPage` already follows for `_key`.
+  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. `null`, not a throw — a theme has no `@cogenta/core` error types
+      // to reach for (contract D refuses that import), and a fallback block
+      // is the render layer's decision, not the theme's.
+      const unreachable: never = known
+      void unreachable
+      return null
+    }
+  }
+}
+
+/**
+ * Wraps every block in `<main id="cg-main">` — the skip link's anchor — and
+ * marks each rendered block with its own `_key` (`withBlockKey`, mandatory:
+ * it is what lets the L16 page builder map a clicked element on the real
+ * rendered page back to the block that produced it). A page whose blocks
+ * already carry a heading (a `hero`) gets no second `<h1>`.
+ *
+ * A page carrying `entry` (contract D `theme@1.4`) gets `renderEntryHeader`'s
+ * furniture — classification eyebrow (styled in this masthead's own
+ * journal-red accent, see `styles/base.css`'s `.cg-entry-header__terms`),
+ * title, excerpt, date/author/reading-time meta and cover — instead of the
+ * bare `<h1>` every other page falls back to; `renderEntryHeader` itself
+ * returns `null` for a `blocks`-only page (e.g. `about`, which carries no
+ * `entry`) or one that already draws its own heading, so the bare-title
+ * fallback still applies there, exactly as before.
+ */
+export function renderPage(
+  page: PageContent,
+  ctx: RenderContext,
+  entries: FetchedEntries = {},
+  registry?: BlockRegistry,
+): HtmlElement {
+  const ownHeading = pageHasOwnHeading(page.blocks)
+  const entryHeader = ownHeading ? null : renderEntryHeader(page, ctx)
+  return h(
+    'main',
+    { class: 'cg-main', id: 'cg-main' },
+    ownHeading ? null : (entryHeader ?? h('h1', { class: 'cg-page__title' }, page.title)),
+    page.blocks.map((block) =>
+      withBlockKey(renderBlock(block, ctx, entries, registry), block._key),
+    ),
+  )
+}

package/src/render/term-archive.ts

@@ -0,0 +1,87 @@
+import { type HtmlElement, h, type TermArchiveInput } from '@cogenta/theme-kit'
+
+/**
+ * The taxonomy-term archive (contract D `theme@1.3`), as a section front.
+ *
+ * A magazine's archive is a section page, so it is built from the same
+ * `cg-issue__row` rows `collectionList` already sets here — a contents strip,
+ * not a card grid — under a section head that names the taxonomy as a kicker
+ * and the term as the section title. Reusing the block's classes is what
+ * keeps the two looking like the same publication without a second
+ * stylesheet.
+ */
+export function renderTermArchive(input: TermArchiveInput): HtmlElement {
+  const rows = input.entries.map((entry, index) =>
+    h(
+      'li',
+      { class: 'cg-issue__row' },
+      h(
+        'span',
+        { class: 'cg-issue__row-number', 'aria-hidden': 'true' },
+        String(index + 1).padStart(2, '0'),
+      ),
+      h(
+        'div',
+        { class: 'cg-issue__row-body' },
+        h(
+          'h2',
+          { class: 'cg-issue__row-title' },
+          entry.href === null
+            ? entry.title
+            : h('a', { class: 'cg-issue__link', href: entry.href }, entry.title),
+        ),
+        entry.publishedAt === null
+          ? null
+          : h(
+              'time',
+              { class: 'cg-issue__row-date', datetime: entry.publishedAt },
+              entry.publishedAt.slice(0, 10),
+            ),
+        entry.summary === null ? null : h('p', { class: 'cg-issue__lead-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('p', { class: 'cg-issue__kicker' }, input.taxonomyName),
+    h('h1', { class: 'cg-page__title' }, 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-issue__empty' }, input.labels.empty)
+      : h('ul', { class: 'cg-issue__rest' }, ...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),
+  )
+}

package/src/styles/archive.css

@@ -0,0 +1,40 @@
+/*
+ * The taxonomy-term archive (contract D `theme@1.3`).
+ *
+ * Only the three things an archive adds beyond what `collectionList` already
+ * styles — a breadcrumb, a sub-term row, a prev/next pager. The entry list
+ * itself reuses the `cg-entry`/`cg-collection__items` rules, on purpose: an
+ * archive of articles must look like this theme's list of articles, and a
+ * second set of card rules is exactly how those two drift apart.
+ */
+
+.cg-archive {
+  max-inline-size: var(--cg-page);
+  margin-inline: auto;
+  padding: var(--cg-s10) var(--cg-gutter);
+}
+
+.cg-archive__breadcrumb ol,
+.cg-archive__children {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cg-s3);
+  margin: 0 0 var(--cg-s4);
+  padding: 0;
+  list-style: none;
+  font-size: var(--cg-text-sm);
+}
+
+.cg-archive__children {
+  margin-block: var(--cg-s4) var(--cg-s8);
+}
+
+.cg-archive__pager {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--cg-s4);
+  margin-block-start: var(--cg-s10);
+  padding-block-start: var(--cg-s5);
+  border-block-start: 1px solid var(--cg-rule-soft);
+  font-weight: var(--cg-weight-semibold);
+}