npm - @cogenta/theme-canonical - Versions diffs - 0.1.0 - Mend

@cogenta/theme-canonical 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

package/dist/src/index.d.ts +21 -0
package/dist/src/index.d.ts.map +1 -0
package/dist/src/index.js +21 -0
package/dist/src/index.js.map +1 -0
package/dist/src/render/actions.d.ts +17 -0
package/dist/src/render/actions.d.ts.map +1 -0
package/dist/src/render/actions.js +43 -0
package/dist/src/render/actions.js.map +1 -0
package/dist/src/render/blocks/collection-list.d.ts +16 -0
package/dist/src/render/blocks/collection-list.d.ts.map +1 -0
package/dist/src/render/blocks/collection-list.js +54 -0
package/dist/src/render/blocks/collection-list.js.map +1 -0
package/dist/src/render/blocks/cta.d.ts +5 -0
package/dist/src/render/blocks/cta.d.ts.map +1 -0
package/dist/src/render/blocks/cta.js +10 -0
package/dist/src/render/blocks/cta.js.map +1 -0
package/dist/src/render/blocks/embed.d.ts +5 -0
package/dist/src/render/blocks/embed.d.ts.map +1 -0
package/dist/src/render/blocks/embed.js +88 -0
package/dist/src/render/blocks/embed.js.map +1 -0
package/dist/src/render/blocks/faq.d.ts +5 -0
package/dist/src/render/blocks/faq.d.ts.map +1 -0
package/dist/src/render/blocks/faq.js +21 -0
package/dist/src/render/blocks/faq.js.map +1 -0
package/dist/src/render/blocks/feature-grid.d.ts +5 -0
package/dist/src/render/blocks/feature-grid.d.ts.map +1 -0
package/dist/src/render/blocks/feature-grid.js +27 -0
package/dist/src/render/blocks/feature-grid.js.map +1 -0
package/dist/src/render/blocks/gallery.d.ts +15 -0
package/dist/src/render/blocks/gallery.d.ts.map +1 -0
package/dist/src/render/blocks/gallery.js +28 -0
package/dist/src/render/blocks/gallery.js.map +1 -0
package/dist/src/render/blocks/hero.d.ts +12 -0
package/dist/src/render/blocks/hero.d.ts.map +1 -0
package/dist/src/render/blocks/hero.js +25 -0
package/dist/src/render/blocks/hero.js.map +1 -0
package/dist/src/render/blocks/logos.d.ts +5 -0
package/dist/src/render/blocks/logos.d.ts.map +1 -0
package/dist/src/render/blocks/logos.js +25 -0
package/dist/src/render/blocks/logos.js.map +1 -0
package/dist/src/render/blocks/media-figure.d.ts +15 -0
package/dist/src/render/blocks/media-figure.d.ts.map +1 -0
package/dist/src/render/blocks/media-figure.js +30 -0
package/dist/src/render/blocks/media-figure.js.map +1 -0
package/dist/src/render/blocks/prose.d.ts +10 -0
package/dist/src/render/blocks/prose.d.ts.map +1 -0
package/dist/src/render/blocks/prose.js +11 -0
package/dist/src/render/blocks/prose.js.map +1 -0
package/dist/src/render/blocks/quote.d.ts +14 -0
package/dist/src/render/blocks/quote.d.ts.map +1 -0
package/dist/src/render/blocks/quote.js +25 -0
package/dist/src/render/blocks/quote.js.map +1 -0
package/dist/src/render/blocks/stats.d.ts +5 -0
package/dist/src/render/blocks/stats.d.ts.map +1 -0
package/dist/src/render/blocks/stats.js +23 -0
package/dist/src/render/blocks/stats.js.map +1 -0
package/dist/src/render/entry.d.ts +7 -0
package/dist/src/render/entry.d.ts.map +1 -0
package/dist/src/render/entry.js +35 -0
package/dist/src/render/entry.js.map +1 -0
package/dist/src/render/heading.d.ts +14 -0
package/dist/src/render/heading.d.ts.map +1 -0
package/dist/src/render/heading.js +34 -0
package/dist/src/render/heading.js.map +1 -0
package/dist/src/render/html.d.ts +44 -0
package/dist/src/render/html.d.ts.map +1 -0
package/dist/src/render/html.js +96 -0
package/dist/src/render/html.js.map +1 -0
package/dist/src/render/media.d.ts +32 -0
package/dist/src/render/media.d.ts.map +1 -0
package/dist/src/render/media.js +42 -0
package/dist/src/render/media.js.map +1 -0
package/dist/src/render/render-block.d.ts +26 -0
package/dist/src/render/render-block.d.ts.map +1 -0
package/dist/src/render/render-block.js +66 -0
package/dist/src/render/render-block.js.map +1 -0
package/dist/src/render/rich-text.d.ts +5 -0
package/dist/src/render/rich-text.d.ts.map +1 -0
package/dist/src/render/rich-text.js +105 -0
package/dist/src/render/rich-text.js.map +1 -0
package/dist/src/theme-contract.d.ts +165 -0
package/dist/src/theme-contract.d.ts.map +1 -0
package/dist/src/theme-contract.js +21 -0
package/dist/src/theme-contract.js.map +1 -0
package/dist/theme.config.d.ts +31 -0
package/dist/theme.config.d.ts.map +1 -0
package/dist/theme.config.js +42 -0
package/dist/theme.config.js.map +1 -0
package/package.json +57 -0
package/src/blocks/CollectionList.astro +20 -0
package/src/blocks/Cta.astro +11 -0
package/src/blocks/Embed.astro +18 -0
package/src/blocks/Faq.astro +16 -0
package/src/blocks/FeatureGrid.astro +11 -0
package/src/blocks/Gallery.astro +17 -0
package/src/blocks/Hero.astro +25 -0
package/src/blocks/Logos.astro +11 -0
package/src/blocks/MediaFigure.astro +11 -0
package/src/blocks/Prose.astro +11 -0
package/src/blocks/Quote.astro +11 -0
package/src/blocks/Stats.astro +11 -0
package/src/components/BlockZone.astro +62 -0
package/src/index.ts +20 -0
package/src/layouts/Base.astro +63 -0
package/src/render/actions.ts +57 -0
package/src/render/blocks/collection-list.ts +98 -0
package/src/render/blocks/cta.ts +17 -0
package/src/render/blocks/embed.ts +111 -0
package/src/render/blocks/faq.ts +42 -0
package/src/render/blocks/feature-grid.ts +54 -0
package/src/render/blocks/gallery.ts +49 -0
package/src/render/blocks/hero.ts +42 -0
package/src/render/blocks/logos.ts +45 -0
package/src/render/blocks/media-figure.ts +42 -0
package/src/render/blocks/prose.ts +17 -0
package/src/render/blocks/quote.ts +39 -0
package/src/render/blocks/stats.ts +41 -0
package/src/render/entry.ts +40 -0
package/src/render/heading.ts +44 -0
package/src/render/html.ts +122 -0
package/src/render/media.ts +62 -0
package/src/render/render-block.ts +97 -0
package/src/render/rich-text.ts +150 -0
package/src/styles/theme.css +606 -0
package/src/theme-contract.ts +159 -0
package/tokens.json +36 -0

package/src/components/BlockZone.astro ADDED Viewed

@@ -0,0 +1,62 @@
+---
+import type { VocabularyBlock } from '@cogenta/blocks'
+import CollectionList from '../blocks/CollectionList.astro'
+import Cta from '../blocks/Cta.astro'
+import Embed from '../blocks/Embed.astro'
+import Faq from '../blocks/Faq.astro'
+import FeatureGrid from '../blocks/FeatureGrid.astro'
+import Gallery from '../blocks/Gallery.astro'
+import Hero from '../blocks/Hero.astro'
+import Logos from '../blocks/Logos.astro'
+import MediaFigure from '../blocks/MediaFigure.astro'
+import Prose from '../blocks/Prose.astro'
+import Quote from '../blocks/Quote.astro'
+import Stats from '../blocks/Stats.astro'
+import { pageHasOwnHeading } from '../render/render-block.js'
+import type { RenderContext } from '../theme-contract.js'
+/**
+ * Dispatches a block zone to the twelve components.
+ *
+ * The dispatch happens here rather than inside `renderBlock` because
+ * `collectionList` has to await its data, and an async renderer would make the
+ * number of round trips depend on the markup. Everything else about the mapping
+ * — which block renders what — stays in `src/render/`.
+ */
+interface Props {
+  ctx: RenderContext
+  blocks: readonly VocabularyBlock[]
+  /** Used as the `h1` when no `hero` on the page carries one. */
+  title: string
+}
+const { ctx, blocks, title } = Astro.props as Props
+const COMPONENTS = {
+  hero: Hero,
+  prose: Prose,
+  mediaFigure: MediaFigure,
+  featureGrid: FeatureGrid,
+  cta: Cta,
+  gallery: Gallery,
+  quote: Quote,
+  faq: Faq,
+  stats: Stats,
+  logos: Logos,
+  collectionList: CollectionList,
+  embed: Embed,
+} as const
+---
+<main class="cg-main" id="cg-main">
+  {/* Exactly one h1 per page: the hero renders it, or this does. */}
+  {!pageHasOwnHeading(blocks) && <h1 class="cg-page__title">{title}</h1>}
+  {
+    blocks.map((block) => {
+      const Component = COMPONENTS[block._type]
+      // An unknown block is dropped, not guessed at: picking a fallback is the
+      // render layer's job (contract B's `fallback`), not the theme's.
+      return Component === undefined ? null : <Component block={block} ctx={ctx} />
+    })
+  }
+</main>

package/src/index.ts ADDED Viewed

@@ -0,0 +1,20 @@
+export * from './render/actions.js'
+export * from './render/blocks/collection-list.js'
+export * from './render/blocks/cta.js'
+export * from './render/blocks/embed.js'
+export * from './render/blocks/faq.js'
+export * from './render/blocks/feature-grid.js'
+export * from './render/blocks/gallery.js'
+export * from './render/blocks/hero.js'
+export * from './render/blocks/logos.js'
+export * from './render/blocks/media-figure.js'
+export * from './render/blocks/prose.js'
+export * from './render/blocks/quote.js'
+export * from './render/blocks/stats.js'
+export * from './render/entry.js'
+export * from './render/heading.js'
+export * from './render/html.js'
+export * from './render/media.js'
+export * from './render/render-block.js'
+export * from './render/rich-text.js'
+export * from './theme-contract.js'

package/src/layouts/Base.astro ADDED Viewed

@@ -0,0 +1,63 @@
+---
+import type { RenderContext } from '../theme-contract.js'
+import '../styles/theme.css'
+interface Props {
+  ctx: RenderContext
+  /** The document title. The page's `h1` is rendered by the content, not here. */
+  title: string
+  description?: string
+}
+const { ctx, title, description } = Astro.props as Props
+// The skin is a *served file*, not an import: changing skin rewrites it and the
+// next request picks it up, with no rebuild (L3, "Skins et changement à chaud").
+// Inlining the tokens here would turn every skin change into a build.
+const SKIN_HREF = '/_cogenta/skin.css'
+---
+<!doctype html>
+<!--
+  `lang` is the rendered locale, which assistive technology needs to pick the
+  right voice (WCAG 3.1.1). `dir="auto"` because contract D's `ctx` carries no
+  writing direction: inferring it from the first strong character is honest,
+  while hard-coding `ltr` would be wrong for half the locales a site may add.
+-->
+<html lang={ctx.locale} dir="auto">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+    {description && <meta name="description" content={description} />}
+    <link rel="canonical" href={ctx.url.href} />
+    <link rel="stylesheet" href={SKIN_HREF} />
+  </head>
+  <body>
+    <!--
+      First focusable element on the page, visible as soon as it takes focus.
+      Its target is the `id` `renderPage` puts on `<main>`.
+    -->
+    <a class="cg-skip-link" href="#cg-main">{ctx.t('a11y.skipToContent')}</a>
+    <header class="cg-site-header">
+      <div class="cg-site-header__inner">
+        <a class="cg-site-header__home" href={ctx.link({ path: '/' })}>{ctx.site.name}</a>
+        <slot name="navigation" />
+      </div>
+    </header>
+    <slot />
+    <footer class="cg-site-footer">
+      <div class="cg-site-footer__inner">
+        <slot name="footer" />
+      </div>
+    </footer>
+    <!--
+      No script tag. Nothing on this page hydrates: the FAQ uses <details>, the
+      carousel uses scroll snapping, and the embeds load nothing before consent.
+    -->
+  </body>
+</html>

package/src/render/actions.ts ADDED Viewed

@@ -0,0 +1,57 @@
+import type { Action, LinkTarget } from '@cogenta/blocks'
+import type { RenderContext } from '../theme-contract.js'
+import { type HtmlElement, h } from './html.js'
+/**
+ * A target is resolved through `ctx.link` in every case, including an external
+ * `href`: the context is the only thing that knows the locale prefix and the
+ * site's base URL, and duplicating that reasoning here is how a theme starts
+ * emitting broken links in a sub-path deployment.
+ */
+export function href(ctx: RenderContext, target: LinkTarget): string {
+  return 'href' in target ? ctx.link(target.href) : ctx.link(target)
+}
+/** A link that leaves the site gets the protection; a same-site one must not. */
+function isExternal(ctx: RenderContext, url: string): boolean {
+  if (!/^[a-z][a-z0-9+.-]*:/i.test(url)) return false
+  const site = URL.parse(ctx.site.url)
+  const target = URL.parse(url)
+  if (site === null || target === null) return false
+  return site.host !== target.host
+}
+export function actionLink(ctx: RenderContext, action: Action): HtmlElement {
+  const url = href(ctx, action.target)
+  const external = isExternal(ctx, url)
+  return h(
+    'a',
+    {
+      class: 'cg-action',
+      // `emphasis` is a semantic intent, so it stays an attribute the skin reads
+      // rather than a class the block dictated. Default `secondary`: promoting
+      // an unstated action to primary is a decision the editor did not make.
+      'data-emphasis': action.emphasis ?? 'secondary',
+      href: url,
+      rel: external ? 'noopener noreferrer' : undefined,
+    },
+    action.label,
+  )
+}
+/**
+ * A list, not a row of loose anchors: a screen reader then announces "list, 2
+ * items" and the actions are navigable as a group.
+ */
+export function actionList(
+  ctx: RenderContext,
+  actions: readonly Action[] | undefined,
+  label: string,
+): HtmlElement | null {
+  if (actions === undefined || actions.length === 0) return null
+  return h(
+    'ul',
+    { class: 'cg-actions', 'aria-label': label },
+    actions.map((action) => h('li', {}, actionLink(ctx, action))),
+  )
+}

package/src/render/blocks/collection-list.ts ADDED Viewed

@@ -0,0 +1,98 @@
+import type { CollectionListBlock } from '@cogenta/blocks'
+import type { ContentEntry, QueryRequest, RenderContext } from '../../theme-contract.js'
+import { entryDate, entryExcerpt, entryHref, entryTitle } from '../entry.js'
+import { blockHeadingTag, type HeadingTag, heading, nestedHeadingTag } from '../heading.js'
+import { type HtmlElement, h } from '../html.js'
+/**
+ * The only block of the twelve that reads data at render time — contract B
+ * marks it `runtime: 'server'` for that reason.
+ *
+ * The read is *not* done here. `query` builds the request, the `.astro`
+ * component awaits `ctx.content.list(...)` in its frontmatter, and this
+ * function stays a pure function of the entries it is handed. That keeps the
+ * markup snapshot-testable and keeps the theme's single door to data — the
+ * read-only content client — in one visible place.
+ */
+export function query(block: CollectionListBlock): QueryRequest {
+  return {
+    collection: block.collection,
+    ...(block.filter === undefined ? {} : { filter: block.filter }),
+    ...(block.sort === undefined ? {} : { sort: block.sort }),
+    // Capped by contract B at 100; an absent limit still must not mean "all".
+    limit: block.limit ?? 10,
+  }
+}
+function renderEntry(entry: ContentEntry, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  const date = entryDate(entry)
+  const excerpt = entryExcerpt(entry)
+  return h(
+    'li',
+    { class: 'cg-entry' },
+    h(
+      'article',
+      { class: 'cg-entry__body' },
+      heading(
+        tag,
+        { class: 'cg-entry__title' },
+        h('a', { class: 'cg-entry__link', href: entryHref(entry, ctx) }, entryTitle(entry, ctx)),
+      ),
+      date === undefined
+        ? null
+        : h(
+            'time',
+            { class: 'cg-entry__date', datetime: date },
+            // Formatted in the rendered locale rather than left as an ISO
+            // string: the machine-readable form is already in `datetime`.
+            new Intl.DateTimeFormat(ctx.locale, { dateStyle: 'long' }).format(new Date(date)),
+          ),
+      excerpt === undefined ? null : h('p', { class: 'cg-entry__excerpt' }, excerpt),
+    ),
+  )
+}
+export function renderCollectionList(
+  block: CollectionListBlock,
+  ctx: RenderContext,
+  entries: readonly ContentEntry[],
+): HtmlElement {
+  const hasTitle = block.title !== undefined
+  const entryTag = nestedHeadingTag('collectionList', hasTitle)
+  const items =
+    entries.length === 0
+      ? h('p', { class: 'cg-collection__empty' }, ctx.t('collection.empty'))
+      : h(
+          'ul',
+          { class: 'cg-collection__items' },
+          entries.map((entry) => renderEntry(entry, ctx, entryTag)),
+        )
+  return h(
+    'section',
+    {
+      class: 'cg-block cg-collection',
+      'data-block': 'collectionList',
+      'data-layout': block.layout,
+    },
+    hasTitle
+      ? heading(
+          blockHeadingTag('collectionList') ?? 'h2',
+          { class: 'cg-collection__title' },
+          block.title ?? '',
+        )
+      : null,
+    block.layout === 'carousel'
+      ? h(
+          'div',
+          {
+            class: 'cg-collection__viewport',
+            role: 'region',
+            'aria-label': block.title ?? ctx.t('collection.carousel'),
+            tabindex: '0',
+          },
+          items,
+        )
+      : items,
+  )
+}

package/src/render/blocks/cta.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import type { CtaBlock } from '@cogenta/blocks'
+import type { RenderContext } from '../../theme-contract.js'
+import { actionList } from '../actions.js'
+import { blockHeadingTag, heading } from '../heading.js'
+import { type HtmlElement, h } from '../html.js'
+export function renderCta(block: CtaBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-block cg-cta', 'data-block': 'cta' },
+    heading(blockHeadingTag('cta') ?? 'h2', { class: 'cg-cta__title' }, block.title),
+    block.text === undefined ? null : h('p', { class: 'cg-cta__text' }, block.text),
+    // `actions` is required and non-empty for a `cta`, so the list is always
+    // rendered; the null branch stays reachable only through invalid data.
+    actionList(ctx, block.actions, block.title),
+  )
+}

package/src/render/blocks/embed.ts ADDED Viewed

@@ -0,0 +1,111 @@
+import type { EmbedBlock } from '@cogenta/blocks'
+import type { RenderContext } from '../../theme-contract.js'
+import { type HtmlElement, h } from '../html.js'
+import { aspectRatio } from '../media.js'
+/**
+ * Nothing here contacts a third party before the visitor has consented.
+ *
+ * When `consentRequired` is true the block renders a self-contained card and an
+ * outbound link — no `<iframe>`, no `<script>`, no preconnect, no poster image
+ * fetched from the provider. An embed that "only" loads a thumbnail has already
+ * handed the visitor's IP address and a cookie to the provider, which is the
+ * exact transfer consent was supposed to gate.
+ *
+ * The theme ships no consent *button*, because it ships no JavaScript: granting
+ * consent is a site-wide decision that belongs to the consent layer, not to a
+ * block. Until that layer exists, the card is the honest rendering — it says
+ * what would be loaded and lets the visitor go there deliberately.
+ */
+/** `null` means "this provider has no embeddable frame we trust". */
+function frameSource(provider: EmbedBlock['provider'], rawUrl: string): string | null {
+  const url = URL.parse(rawUrl)
+  if (url === null) return null
+  const segments = url.pathname.split('/').filter((segment) => segment !== '')
+  switch (provider) {
+    case 'youtube': {
+      // `youtube-nocookie.com` is the privacy-preserving host, and the only one
+      // this theme will point an iframe at.
+      const id = url.hostname.endsWith('youtu.be')
+        ? segments[0]
+        : (url.searchParams.get('v') ?? segments[1])
+      return id === undefined || id === null ? null : `https://www.youtube-nocookie.com/embed/${id}`
+    }
+    case 'vimeo': {
+      const id = segments.find((segment) => /^\d+$/.test(segment))
+      return id === undefined ? null : `https://player.vimeo.com/video/${id}`
+    }
+    case 'dailymotion': {
+      const id = url.hostname.endsWith('dai.ly') ? segments[0] : segments[segments.length - 1]
+      return id === undefined ? null : `https://geo.dailymotion.com/player.html?video=${id}`
+    }
+    case 'spotify': {
+      const [kind, id] = segments
+      return kind === undefined || id === undefined
+        ? null
+        : `https://open.spotify.com/embed/${kind}/${id}`
+    }
+    case 'soundcloud':
+      return `https://w.soundcloud.com/player/?url=${encodeURIComponent(rawUrl)}`
+    default:
+      // bluesky, mastodon, other: a post embed is a script tag, which this theme
+      // does not load. The link card is the rendering.
+      return null
+  }
+}
+function consentCard(block: EmbedBlock, ctx: RenderContext, reason: string): HtmlElement {
+  return h(
+    'div',
+    { class: 'cg-embed__placeholder' },
+    h('p', { class: 'cg-embed__notice' }, reason),
+    h(
+      'a',
+      {
+        class: 'cg-embed__link',
+        href: ctx.link(block.url),
+        rel: 'noopener noreferrer nofollow',
+      },
+      ctx.t('embed.open', { provider: block.provider }),
+    ),
+  )
+}
+export function renderEmbed(block: EmbedBlock, ctx: RenderContext): HtmlElement {
+  const source = block.consentRequired ? null : frameSource(block.provider, block.url)
+  // Video providers are 16:9 unless the editor framed them otherwise; without a
+  // ratio the frame would collapse and shift the layout as it loads.
+  const ratio = aspectRatio(block.ratio) ?? '16 / 9'
+  return h(
+    'div',
+    {
+      class: 'cg-block cg-embed',
+      'data-block': 'embed',
+      'data-provider': block.provider,
+      'data-consent': block.consentRequired ? 'required' : 'not-required',
+      style: `--cg-ratio:${ratio}`,
+    },
+    source === null
+      ? consentCard(
+          block,
+          ctx,
+          block.consentRequired
+            ? ctx.t('embed.consentRequired', { provider: block.provider })
+            : ctx.t('embed.unsupported', { provider: block.provider }),
+        )
+      : h('iframe', {
+          class: 'cg-embed__frame',
+          src: source,
+          // An iframe with no accessible name is announced as "frame" and
+          // nothing else. WCAG 4.1.2, and the single most common embed defect.
+          title: ctx.t('embed.title', { provider: block.provider }),
+          loading: 'lazy',
+          referrerpolicy: 'strict-origin-when-cross-origin',
+          allow: 'accelerometer; clipboard-write; encrypted-media; picture-in-picture; fullscreen',
+          allowfullscreen: true,
+        }),
+  )
+}

package/src/render/blocks/faq.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import type { FaqBlock, FaqItem } from '@cogenta/blocks'
+import type { RenderContext } from '../../theme-contract.js'
+import { blockHeadingTag, heading } from '../heading.js'
+import { type HtmlElement, h } from '../html.js'
+import { renderRichText } from '../rich-text.js'
+/**
+ * `<details>`/`<summary>` rather than a scripted accordion: expanding, keyboard
+ * operation, the expanded state announced to assistive technology and in-page
+ * search all come from the browser, at zero bytes of JavaScript.
+ *
+ * The question is plain text inside `<summary>`, not a heading: a heading
+ * nested in a summary is rendered inconsistently across screen readers, and the
+ * questions are already reachable as a list under the block's own heading.
+ */
+function renderItem(item: FaqItem, ctx: RenderContext): HtmlElement {
+  return h(
+    'li',
+    { class: 'cg-faq__item' },
+    h(
+      'details',
+      { class: 'cg-faq__details' },
+      h('summary', { class: 'cg-faq__question' }, item.question),
+      h('div', { class: 'cg-faq__answer' }, renderRichText(ctx, item.answer)),
+    ),
+  )
+}
+export function renderFaq(block: FaqBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-block cg-faq', 'data-block': 'faq' },
+    block.title === undefined
+      ? null
+      : heading(blockHeadingTag('faq') ?? 'h2', { class: 'cg-faq__title' }, block.title),
+    h(
+      'ul',
+      { class: 'cg-faq__items' },
+      block.items.map((item) => renderItem(item, ctx)),
+    ),
+  )
+}

package/src/render/blocks/feature-grid.ts ADDED Viewed

@@ -0,0 +1,54 @@
+import type { FeatureGridBlock, FeatureItem } from '@cogenta/blocks'
+import type { RenderContext } from '../../theme-contract.js'
+import { href } from '../actions.js'
+import { blockHeadingTag, type HeadingTag, heading, nestedHeadingTag } from '../heading.js'
+import { type HtmlElement, h } from '../html.js'
+/**
+ * The item's title is the link, so the link's accessible name is the feature's
+ * name. A bare "learn more" repeated six times is the classic failure of
+ * WCAG 2.4.4, and the block carries no label field to write one anyway.
+ *
+ * `icon` names a symbol, never markup: it is exposed as a data attribute for
+ * the skin and marked `aria-hidden`, since the title already names the feature.
+ */
+function renderItem(item: FeatureItem, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  const title =
+    item.link === undefined
+      ? heading(tag, { class: 'cg-feature__title' }, item.title)
+      : heading(
+          tag,
+          { class: 'cg-feature__title' },
+          h('a', { class: 'cg-feature__link', href: href(ctx, item.link) }, item.title),
+        )
+  return h(
+    'li',
+    { class: 'cg-feature' },
+    item.icon === undefined
+      ? null
+      : h('span', { class: 'cg-feature__icon', 'data-icon': item.icon, 'aria-hidden': 'true' }),
+    title,
+    item.text === undefined ? null : h('p', { class: 'cg-feature__text' }, item.text),
+  )
+}
+export function renderFeatureGrid(block: FeatureGridBlock, ctx: RenderContext): HtmlElement {
+  const hasTitle = block.title !== undefined
+  const itemTag = nestedHeadingTag('featureGrid', hasTitle)
+  return h(
+    'section',
+    { class: 'cg-block cg-features', 'data-block': 'featureGrid' },
+    hasTitle
+      ? heading(
+          blockHeadingTag('featureGrid') ?? 'h2',
+          { class: 'cg-features__title' },
+          block.title ?? '',
+        )
+      : null,
+    h(
+      'ul',
+      { class: 'cg-features__items' },
+      block.items.map((item) => renderItem(item, ctx, itemTag)),
+    ),
+  )
+}

package/src/render/blocks/gallery.ts ADDED Viewed

@@ -0,0 +1,49 @@
+import type { GalleryBlock } from '@cogenta/blocks'
+import type { RenderContext } from '../../theme-contract.js'
+import { type HtmlElement, h } from '../html.js'
+import { image } from '../media.js'
+/**
+ * The carousel ships **no JavaScript**. It is a scroll-snapping list, which
+ * gives touch swiping, trackpad scrolling and — because the list is focusable
+ * and labelled — arrow-key scrolling, with none of the failure modes of a
+ * scripted carousel: no auto-advance to fight (WCAG 2.2.2), no focus stolen
+ * from an off-screen slide, and it still works before hydration.
+ *
+ * A focusable scrollable region needs an accessible name, or a screen reader
+ * announces an unlabelled tab stop; that is WCAG 2.4.3 and 4.1.2 both.
+ */
+export function renderGallery(block: GalleryBlock, ctx: RenderContext): HtmlElement {
+  const items = h(
+    'ul',
+    { class: 'cg-gallery__items' },
+    block.items.map((item) =>
+      h(
+        'li',
+        { class: 'cg-gallery__item' },
+        image(ctx, item.media, { sizes: '(min-width: 45rem) 20rem, 60vw' }),
+      ),
+    ),
+  )
+  return h(
+    'section',
+    {
+      class: 'cg-block cg-gallery',
+      'data-block': 'gallery',
+      'data-layout': block.layout,
+    },
+    block.layout === 'carousel'
+      ? h(
+          'div',
+          {
+            class: 'cg-gallery__viewport',
+            role: 'region',
+            'aria-label': ctx.t('gallery.carousel'),
+            tabindex: '0',
+          },
+          items,
+        )
+      : items,
+  )
+}

package/src/render/blocks/hero.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import type { HeroBlock } from '@cogenta/blocks'
+import type { RenderContext } from '../../theme-contract.js'
+import { actionList } from '../actions.js'
+import { blockHeadingTag, heading } from '../heading.js'
+import { type HtmlElement, h } from '../html.js'
+import { image } from '../media.js'
+/**
+ * The hero carries the page's `h1` — contract B declares `headingLevel: 'h1'`
+ * for it, and `renderPage` relies on that to avoid emitting a second one.
+ *
+ * The eyebrow is a paragraph, not a small heading: it labels the page, and
+ * turning it into a heading would put an `h*` above the `h1` in the outline.
+ */
+export function renderHero(block: HeroBlock, ctx: RenderContext): HtmlElement {
+  const tag = blockHeadingTag('hero') ?? 'h1'
+  return h(
+    'section',
+    { class: 'cg-block cg-hero', 'data-block': 'hero' },
+    h(
+      'div',
+      { class: 'cg-hero__body' },
+      block.eyebrow === undefined ? null : h('p', { class: 'cg-hero__eyebrow' }, block.eyebrow),
+      heading(tag, { class: 'cg-hero__title' }, block.title),
+      block.subtitle === undefined ? null : h('p', { class: 'cg-hero__subtitle' }, block.subtitle),
+      actionList(ctx, block.actions, ctx.t('hero.actions')),
+    ),
+    block.media === undefined
+      ? null
+      : h(
+          'div',
+          { class: 'cg-hero__media' },
+          // The only image on the page that is above the fold by construction,
+          // so the only one that must not be lazy: lazy-loading the LCP element
+          // is a measured Lighthouse regression, not a theoretical one.
+          image(ctx, block.media, {
+            loading: 'eager',
+            sizes: '(min-width: 60rem) 50vw, 100vw',
+          }),
+        ),
+  )
+}

package/src/render/blocks/logos.ts ADDED Viewed

@@ -0,0 +1,45 @@
+import type { LogoItem, LogosBlock } from '@cogenta/blocks'
+import type { RenderContext } from '../../theme-contract.js'
+import { blockHeadingTag, heading } from '../heading.js'
+import { type HtmlElement, h } from '../html.js'
+import { image } from '../media.js'
+/**
+ * Contract B says the organisation's name **is** the accessible name of the
+ * link. So the logo image carries it as alt text when the media entity has
+ * none, and no visually hidden duplicate is added: 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-logo__image',
+    altFrom: item.name,
+    variant: { fit: 'contain' },
+  })
+  return h(
+    'li',
+    { class: 'cg-logo' },
+    item.url === undefined
+      ? logo
+      : h(
+          'a',
+          { class: 'cg-logo__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-logos', 'data-block': 'logos' },
+    block.title === undefined
+      ? null
+      : heading(blockHeadingTag('logos') ?? 'h2', { class: 'cg-logos__title' }, block.title),
+    h(
+      'ul',
+      { class: 'cg-logos__items' },
+      block.items.map((item) => renderItem(item, ctx)),
+    ),
+  )
+}