@cogenta/theme-portfolio 1.1.2

package/src/render/render-block.ts

@@ -0,0 +1,155 @@
+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'
+
+/**
+ * `PageContent`/`FetchedEntries`/`pageHasOwnHeading`/`withBlockKey` are
+ * `@cogenta/theme-kit`'s own — re-exported here so this package's public
+ * surface names them, the same shape every theme package shares them under.
+ */
+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, 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.
+      const unreachable: never = known
+      void unreachable
+      return null
+    }
+  }
+}
+
+/**
+ * `renderEntryHeader` (`theme@1.4`) draws the eyebrow/title/excerpt/meta/
+ * cover furniture for a page backed by a real content entry — a project —
+ * and already returns `null` for a page with no `entry` meta *and* for one
+ * whose blocks draw their own heading (a `hero`), so the bare
+ * `<h1 class="cg-page__title">` fallback below is the right markup in both
+ * of those cases and only those — never a double heading, and never a page
+ * with none at all. A page rendered before `theme@1.4` (`page.entry`
+ * absent) gets exactly the pre-1.4 markup, byte for byte.
+ */
+/**
+ * `withBlockKey` stamps `data-block-key` (the L16 builder's own hook); this
+ * theme additionally stamps a real `id`, the block's own `_key`, on the same
+ * element — `_key` is already unique within a page (contract B), so it
+ * doubles as a genuine in-page anchor. The header/footer's own single-page
+ * links (the `portfolio` blueprint's "Work"/"Services" nav) resolve to a
+ * real target this way, rather than a `#fragment` nothing on the page
+ * answers to.
+ */
+function withBlockAnchor(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 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) =>
+      withBlockAnchor(
+        withBlockKey(renderBlock(block, ctx, entries, registry), block._key),
+        block._key,
+      ),
+    ),
+  )
+}

package/src/render/term-archive.ts

@@ -0,0 +1,88 @@
+import { type HtmlElement, h, type TermArchiveInput } from '@cogenta/theme-kit'
+
+/**
+ * The taxonomy-term archive (contract D `theme@1.3`), in this theme's own
+ * brutalist-editorial voice: the term set as a display heading with the
+ * taxonomy name as a kicker above it, and the entries as the same numbered
+ * `cg-entry` rows `collectionList` already renders here — an index, not a
+ * card grid.
+ *
+ * Reusing the block's own classes rather than inventing archive-only ones is
+ * deliberate: it is what makes an archive of work look like this theme's
+ * lists without a second stylesheet to keep in step.
+ */
+export function renderTermArchive(input: TermArchiveInput): HtmlElement {
+  const items = input.entries.map((entry, index) =>
+    h(
+      'li',
+      { class: 'cg-entry' },
+      h(
+        'div',
+        { class: 'cg-entry__body' },
+        h(
+          'span',
+          { class: 'cg-entry__index', 'aria-hidden': 'true' },
+          String(index + 1).padStart(2, '0'),
+        ),
+        h(
+          'h2',
+          { class: 'cg-entry__title' },
+          entry.href === null
+            ? entry.title
+            : h('a', { class: 'cg-entry__link', href: entry.href }, entry.title),
+        ),
+        entry.publishedAt === null
+          ? null
+          : h(
+              'time',
+              { class: 'cg-entry__date', datetime: entry.publishedAt },
+              entry.publishedAt.slice(0, 10),
+            ),
+        entry.summary === null ? null : h('p', { class: 'cg-entry__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-collection__title' }, 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))),
+        ),
+    items.length === 0
+      ? h('p', { class: 'cg-collection__empty' }, input.labels.empty)
+      : h('ul', { class: 'cg-collection__items' }, ...items),
+    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-line-soft);
+  font-weight: var(--cg-weight-semibold);
+}