@cogenta/theme-magazine 1.1.2 → 1.3.3

package/src/render/blocks/embed.ts

@@ -1,16 +1,17 @@
 import type { EmbedBlock } from '@cogenta/blocks'
 import { aspectRatio, type HtmlElement, h, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * Nothing here contacts a third party before the visitor has consented — the
- * same rule the reference theme enforces, reused verbatim: an iframe (or a
- * thumbnail fetch) already hands the provider an IP address and a cookie,
- * which is exactly the transfer consent is supposed to gate. No consent
- * *button* ships either, because this theme ships no JavaScript to wire one
- * to: granting consent is a site-wide decision for a future consent layer,
- * not a block's.
+ * Nothing here contacts a third party before the visitor consents: when
+ * `consentRequired` is set, or the provider has no cookie-free frame source,
+ * a notice and an outbound link render instead of an `<iframe>`. No
+ * preconnect, no thumbnail fetched from the provider.
+ *
+ * The frame and the notice both take the reading column at the block's
+ * ratio. The notice holds the place the player will take: a hairline frame,
+ * the provider named in small capitals, one sentence, one arrow link.
  */
-
 function frameSource(provider: EmbedBlock['provider'], rawUrl: string): string | null {
   const url = URL.parse(rawUrl)
   if (url === null) return null
@@ -40,23 +41,20 @@ function frameSource(provider: EmbedBlock['provider'], rawUrl: string): string |
     case 'soundcloud':
       return `https://w.soundcloud.com/player/?url=${encodeURIComponent(rawUrl)}`
     default:
-      // bluesky, mastodon, other: a post embed is a script tag this theme
-      // does not load. The sidebar note card is the rendering.
       return null
   }
 }
 
-/** A boxed sidebar note — dashed rule, small caps label — the editorial way of saying "not loaded here". */
-function noteCard(block: EmbedBlock, ctx: RenderContext, reason: string): HtmlElement {
+function notice(block: EmbedBlock, ctx: RenderContext, reason: string): HtmlElement {
   return h(
     'div',
-    { class: 'cg-sidenote__box' },
-    h('p', { class: 'cg-sidenote__label' }, ctx.t('embed.label')),
-    h('p', { class: 'cg-sidenote__notice' }, reason),
+    { class: 'cg-embed__notice' },
+    h('p', { class: 'cg-embed__label' }, ctx.t('embed.label')),
+    h('p', { class: 'cg-embed__reason' }, reason),
     h(
       'a',
       {
-        class: 'cg-sidenote__link',
+        class: 'cg-arrow-link cg-embed__link',
         href: ctx.link(block.url),
         rel: 'noopener noreferrer nofollow',
       },
@@ -69,31 +67,37 @@ export function renderEmbed(block: EmbedBlock, ctx: RenderContext): HtmlElement
   const source = block.consentRequired ? null : frameSource(block.provider, block.url)
   const ratio = aspectRatio(block.ratio) ?? '16 / 9'
 
-  return h(
+  return section(
     'div',
+    'embed',
+    'cg-embed',
     {
-      class: 'cg-block cg-sidenote',
-      'data-block': 'embed',
       'data-provider': block.provider,
       'data-consent': block.consentRequired ? 'required' : 'not-required',
       style: `--cg-ratio:${ratio}`,
     },
-    source === null
-      ? noteCard(
-          block,
-          ctx,
-          block.consentRequired
-            ? ctx.t('embed.consentRequired', { provider: block.provider })
-            : ctx.t('embed.unsupported', { provider: block.provider }),
-        )
-      : h('iframe', {
-          class: 'cg-sidenote__frame',
-          src: source,
-          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,
-        }),
+    'div',
+    h(
+      'div',
+      { class: 'cg-embed__frame' },
+      source === null
+        ? notice(
+            block,
+            ctx,
+            block.consentRequired
+              ? ctx.t('embed.consentRequired', { provider: block.provider })
+              : ctx.t('embed.unsupported', { provider: block.provider }),
+          )
+        : h('iframe', {
+            class: 'cg-embed__player',
+            src: source,
+            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

@@ -7,52 +7,47 @@ import {
   type RenderContext,
   renderRichText,
 } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * A reader-mailbag column: numbered questions set in the display serif, the
- * answer running underneath once opened. `<details>`/`<summary>` still does
- * all the work — expand/collapse, keyboard operation and the announced
- * expanded state all come from the browser at zero bytes of JavaScript,
- * exactly as in the reference theme; only the typography and the numbering
- * are this theme's own.
+ * Questions and their answers, set open, the way a newspaper prints a
+ * reader's guide: the title in the left three columns, and down the right
+ * the questions in the display face with each answer under it, divided by
+ * hairlines. Nothing is hidden behind a disclosure: a short guide is read
+ * whole. (`accordion` is the collapsible form of the same content.)
  */
-function renderItem(item: FaqItem, ctx: RenderContext, index: number): HtmlElement {
+function renderItem(item: FaqItem, ctx: RenderContext, tag: 'h3' | 'h2'): HtmlElement {
   return h(
-    'li',
-    { class: 'cg-mailbag__item' },
-    h(
-      'details',
-      { class: 'cg-mailbag__details' },
-      h(
-        'summary',
-        { class: 'cg-mailbag__question' },
-        h(
-          'span',
-          { class: 'cg-mailbag__number', 'aria-hidden': 'true' },
-          String(index + 1).padStart(2, '0'),
-        ),
-        h('span', { class: 'cg-mailbag__question-text' }, item.question),
-      ),
-      h('div', { class: 'cg-mailbag__answer' }, renderRichText(ctx, item.answer)),
-    ),
+    'div',
+    { class: 'cg-guide__item' },
+    heading(tag, { class: 'cg-guide__question' }, item.question),
+    h('div', { class: 'cg-guide__answer' }, renderRichText(ctx, item.answer)),
   )
 }
 
 export function renderFaq(block: FaqBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  const titled = block.title !== undefined
+  return section(
     'section',
-    { class: 'cg-block cg-mailbag', 'data-block': 'faq' },
-    block.title === undefined
-      ? null
-      : heading(
-          blockHeadingTag('faq') ?? 'h2',
-          { class: 'cg-mailbag__title', 'data-field': 'title' },
-          block.title,
-        ),
+    'faq',
+    'cg-guide',
+    { 'data-titled': titled ? 'true' : 'false' },
+    'div',
+    titled
+      ? h(
+          'div',
+          { class: 'cg-guide__head' },
+          heading(
+            blockHeadingTag('faq') ?? 'h2',
+            { class: 'cg-guide__title', 'data-field': 'title' },
+            block.title ?? '',
+          ),
+        )
+      : null,
     h(
-      'ul',
-      { class: 'cg-mailbag__items' },
-      block.items.map((item, index) => renderItem(item, ctx, index)),
+      'div',
+      { class: 'cg-guide__items' },
+      block.items.map((item) => renderItem(item, ctx, titled ? 'h3' : 'h2')),
     ),
   )
 }

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

@@ -1,6 +1,5 @@
 import type { FeatureGridBlock, FeatureItem } from '@cogenta/blocks'
 import {
-  blockHeadingTag,
   type HeadingTag,
   type HtmlElement,
   h,
@@ -9,53 +8,44 @@ import {
   nestedHeadingTag,
   type RenderContext,
 } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * A contents index, not a card grid: a bordered panel, a real newspaper
- * `column-rule` between the columns it falls into at width, and each entry
- * numbered by a CSS counter rather than an icon chip — this vocabulary's
- * `icon` names a symbol no icon set this theme ships can resolve into
- * markup, so a numeral the browser generates for free reads as considered
- * rather than as a placeholder.
- *
- * The item's own title carries the link, exactly as in the reference theme:
- * a bare "read more" repeated across a grid fails WCAG 2.4.4, and the block
- * has no separate label field to fix that with.
+ * A set of short items, set as a contents panel: up to four columns divided
+ * by vertical hairlines, each item a title in the display face and a line of
+ * text. An item with a link makes its title the link, with an arrow set
+ * inline after the last word so the underline runs under the words and never
+ * under a lone arrow. No icon tiles: `icon` names are ignored on purpose, a
+ * newspaper sets a contents panel in type.
  */
 function renderItem(item: FeatureItem, ctx: RenderContext, tag: HeadingTag): HtmlElement {
-  const title =
-    item.link === undefined
-      ? heading(tag, { class: 'cg-index__title' }, item.title)
-      : heading(
-          tag,
-          { class: 'cg-index__title' },
-          h('a', { class: 'cg-index__link', href: href(ctx, item.link) }, item.title),
-        )
   return h(
     'li',
-    { class: 'cg-index__item', 'data-icon': item.icon },
-    title,
-    item.text === undefined ? null : h('p', { class: 'cg-index__text' }, item.text),
+    { class: 'cg-contents__item' },
+    heading(
+      tag,
+      { class: 'cg-contents__title' },
+      item.link === undefined
+        ? item.title
+        : h('a', { class: 'cg-arrow-link', href: href(ctx, item.link) }, item.title),
+    ),
+    item.text === undefined ? null : h('p', { class: 'cg-contents__text' }, item.text),
   )
 }
 
 export function renderFeatureGrid(block: FeatureGridBlock, ctx: RenderContext): HtmlElement {
-  const hasTitle = block.title !== undefined
-  const itemTag = nestedHeadingTag('featureGrid', hasTitle)
-  return h(
+  const tag = nestedHeadingTag('featureGrid', block.title !== undefined)
+  return section(
     'section',
-    { class: 'cg-block cg-index', 'data-block': 'featureGrid' },
-    hasTitle
-      ? heading(
-          blockHeadingTag('featureGrid') ?? 'h2',
-          { class: 'cg-index__heading', 'data-field': 'title' },
-          block.title ?? '',
-        )
-      : null,
+    'featureGrid',
+    'cg-contents',
+    { 'data-count': String(Math.min(block.items.length, 4)) },
+    'div',
+    sectionHead('featureGrid', block.title),
     h(
-      'ol',
-      { class: 'cg-index__items' },
-      block.items.map((item) => renderItem(item, ctx, itemTag)),
+      'ul',
+      { class: 'cg-contents__items' },
+      block.items.map((item) => renderItem(item, ctx, tag)),
     ),
   )
 }

package/src/render/blocks/gallery.ts

@@ -1,40 +1,46 @@
 import type { GalleryBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * A contact sheet: numbered frames (a CSS counter, drawn in the negative
- * space of the print corner) in a tight grid with hairline gutters, rather
- * than the reference theme's rounded, shadowed tiles.
+ * A picture page, square-cornered, with a constant gutter:
  *
- * The carousel layout ships **no JavaScript** — a scroll-snapping, focusable,
- * labelled region gives keyboard, touch and trackpad scrolling for free
- * (WCAG 2.4.3/4.1.2), with none of a scripted carousel's failure modes.
+ * - `grid`: the first photograph across eight columns, the next two stacked
+ *   beside it, then rows of three at 3:2, the rhythm of a picture spread.
+ * - `masonry`: three columns at each picture's own ratio.
+ * - `carousel`: one row that scrolls and snaps, focusable and labelled; touch,
+ *   trackpad and arrow keys are all native. No script.
  */
 export function renderGallery(block: GalleryBlock, ctx: RenderContext): HtmlElement {
   const items = h(
     'ul',
-    { class: 'cg-contactsheet__items' },
-    block.items.map((item) =>
+    { class: 'cg-pictures__items', 'data-count': String(block.items.length) },
+    block.items.map((item, index) =>
       h(
         'li',
-        { class: 'cg-contactsheet__item' },
-        image(ctx, item.media, { sizes: '(min-width: 45rem) 18rem, 50vw' }),
+        { class: 'cg-pictures__item' },
+        image(ctx, item.media, {
+          className: 'cg-pictures__image',
+          sizes:
+            block.layout === 'grid' && index === 0
+              ? '(min-width: 64rem) 52rem, 100vw'
+              : '(min-width: 64rem) 26rem, (min-width: 40rem) 45vw, 90vw',
+        }),
       ),
     ),
   )
 
-  return h(
-    'section',
-    {
-      class: 'cg-block cg-contactsheet',
-      'data-block': 'gallery',
-      'data-layout': block.layout,
-    },
+  return section(
+    'div',
+    'gallery',
+    'cg-pictures',
+    { 'data-layout': block.layout },
+    'div',
     block.layout === 'carousel'
       ? h(
           'div',
           {
-            class: 'cg-contactsheet__viewport',
+            class: 'cg-pictures__viewport',
             role: 'region',
             'aria-label': ctx.t('gallery.carousel'),
             tabindex: '0',

package/src/render/blocks/hero.ts

@@ -8,47 +8,47 @@ import {
   image,
   type RenderContext,
 } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * The cover story. `hero` carries the page's own `h1` (contract B's
- * `headingLevel: 'h1'`), so this is the one place the masthead's front page
- * lives: an eyebrow set as a kicker, a big serif headline, a dek, and the
- * lead image on the other side of a hairline column rule — the two-column
- * "story well" a print front page opens on, rather than a centred banner.
+ * A cover story. `hero` carries the page's own `h1` (contract B), so it is
+ * set as the opening of a special issue: the eyebrow as a red kicker, the
+ * headline in the display face at its largest, the subtitle as an italic
+ * standfirst, and the photograph beside the words across seven columns,
+ * its bottom edge on the same line as the last action. Without a photograph
+ * the headline takes ten columns over a double rule.
  */
 export function renderHero(block: HeroBlock, ctx: RenderContext): HtmlElement {
   const tag = blockHeadingTag('hero') ?? 'h1'
-  return h(
+  return section(
     'section',
-    { class: 'cg-block cg-hero', 'data-block': 'hero' },
+    'hero',
+    'cg-cover',
+    { 'data-media': block.media === undefined ? 'none' : 'image' },
+    'div',
     h(
       'div',
-      { class: 'cg-hero__grid' },
-      h(
-        'div',
-        { class: 'cg-hero__copy' },
-        block.eyebrow === undefined
-          ? null
-          : h('p', { class: 'cg-hero__eyebrow', 'data-field': 'eyebrow' }, block.eyebrow),
-        heading(tag, { class: 'cg-hero__title', 'data-field': 'title' }, block.title),
-        block.subtitle === undefined
-          ? null
-          : h('p', { class: 'cg-hero__subtitle', 'data-field': 'subtitle' }, block.subtitle),
-        actionList(ctx, block.actions, ctx.t('hero.actions')),
-      ),
-      block.media === undefined
+      { class: 'cg-cover__copy' },
+      block.eyebrow === undefined
         ? null
-        : h(
-            'div',
-            { class: 'cg-hero__media' },
-            // The only image above the fold, so the only one loaded eagerly —
-            // lazy-loading it is a measured LCP regression, not a theory.
-            image(ctx, block.media, {
-              className: 'cg-hero__image',
-              loading: 'eager',
-              sizes: '(min-width: 64rem) 56vw, 100vw',
-            }),
-          ),
+        : h('p', { class: 'cg-cover__kicker', 'data-field': 'eyebrow' }, block.eyebrow),
+      heading(tag, { class: 'cg-cover__title', 'data-field': 'title' }, block.title),
+      block.subtitle === undefined
+        ? null
+        : h('p', { class: 'cg-cover__standfirst', 'data-field': 'subtitle' }, block.subtitle),
+      actionList(ctx, block.actions, ctx.t('hero.actions')),
     ),
+    block.media === undefined
+      ? null
+      : h(
+          'div',
+          { class: 'cg-cover__media' },
+          // The one image above the fold, so the one loaded eagerly.
+          image(ctx, block.media, {
+            className: 'cg-cover__image',
+            loading: 'eager',
+            sizes: '(min-width: 64rem) 46rem, 100vw',
+          }),
+        ),
   )
 }

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

@@ -1,35 +1,35 @@
 import type { LogoStripBlock, LogoStripItem } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * `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.
+ * A line of credits: the caption in small capitals on the left three
+ * columns, the marks in one tone along the rest of the row, between two
+ * hairlines. `logoStrip` has no per-mark name or link, so each image's own
+ * alt text (set once, in the media library) is what names it.
  */
 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' } }),
+    { class: 'cg-credits__item' },
+    image(ctx, item.media, { className: 'cg-credits__image', variant: { fit: 'contain' } }),
   )
 }
 
 export function renderLogoStrip(block: LogoStripBlock, ctx: RenderContext): HtmlElement {
-  return h(
-    'figure',
-    { class: 'cg-block cg-imprint', 'data-block': 'logoStrip' },
+  return section(
+    'div',
+    'logoStrip',
+    'cg-credits',
+    {},
+    'div',
+    block.caption === undefined
+      ? null
+      : h('p', { class: 'cg-credits__caption', 'data-field': 'caption' }, block.caption),
     h(
       'ul',
-      { class: 'cg-imprint__items' },
+      { class: 'cg-credits__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

@@ -1,56 +1,48 @@
 import type { LogoItem, LogosBlock } from '@cogenta/blocks'
-import {
-  blockHeadingTag,
-  type HtmlElement,
-  h,
-  heading,
-  image,
-  type RenderContext,
-} from '@cogenta/theme-kit'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * 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.
+ * Organisations credited by name, set as a ruled grid of marks in ink: up to
+ * six to a row on a wide screen (`data-count`, never fewer than three columns,
+ * so two marks do not stretch across the page), a hairline between each, the
+ * marks reduced to
+ * one tone so no brand colour competes with the page's single red.
  *
- * 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.
+ * The organisation's name is contract B's own accessible name: the image
+ * carries it as `alt` when the media entity has none, so a linked mark is
+ * named without a hidden duplicate.
  */
 function renderItem(item: LogoItem, ctx: RenderContext): HtmlElement {
-  const logo = image(ctx, item.media, {
-    className: 'cg-press__image',
+  const mark = image(ctx, item.media, {
+    className: 'cg-marks__image',
     altFrom: item.name,
     variant: { fit: 'contain' },
   })
   return h(
     'li',
-    { class: 'cg-press__item' },
+    { class: 'cg-marks__item' },
     item.url === undefined
-      ? logo
+      ? mark
       : h(
           'a',
-          { class: 'cg-press__link', href: ctx.link(item.url), rel: 'noopener noreferrer' },
-          logo,
+          { class: 'cg-marks__link', href: ctx.link(item.url), rel: 'noopener noreferrer' },
+          mark,
         ),
   )
 }
 
 export function renderLogos(block: LogosBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
     '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,
-        ),
+    'logos',
+    'cg-marks',
+    { 'data-count': String(Math.min(Math.max(block.items.length, 3), 6)) },
+    'div',
+    sectionHead('logos', block.title),
     h(
       'ul',
-      { class: 'cg-press__items' },
+      { class: 'cg-marks__items' },
       block.items.map((item) => renderItem(item, ctx)),
     ),
   )