@cogenta/theme-portfolio 1.1.2 → 1.3.3

package/src/render/blocks/gallery.ts

@@ -1,49 +1,55 @@
 import type { GalleryBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.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.
+ * The sequence of pictures a case study is made of. Every picture keeps its
+ * own shape: a poster stays a poster, a spread stays a spread. The layout the
+ * editor chose decides the rhythm:
  *
- * Every tile carries a decorative index badge (`aria-hidden`, a CSS counter)
- * — a numbered contact sheet rather than a plain image wall, and never a
- * second name for the picture a screen reader would announce.
- *
- * 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.
+ * - `grid`: a sequence of three places on twelve columns, a large picture
+ *   across seven columns beside a smaller one across five set to the same
+ *   bottom line, then one across the whole container.
+ * - `masonry`: two columns (three on a wide screen) at each picture's own
+ *   shape.
+ * - `carousel`: one row at a single height that scrolls and snaps, focusable
+ *   and labelled; touch, trackpad and arrow keys are all native. No script.
  */
+function sizesFor(layout: GalleryBlock['layout'], place: number): string {
+  if (layout === 'carousel') return '(min-width: 64rem) 40rem, 80vw'
+  if (layout === 'masonry') return '(min-width: 64rem) 30rem, 50vw'
+  if (place === 3) return '(min-width: 96rem) 92rem, 100vw'
+  return place === 1 ? '(min-width: 64rem) 54rem, 100vw' : '(min-width: 64rem) 38rem, 100vw'
+}
+
 export function renderGallery(block: GalleryBlock, ctx: RenderContext): HtmlElement {
   const items = h(
     'ul',
-    { class: 'cg-gallery__items' },
-    block.items.map((item) =>
-      h(
+    { class: 'cg-pictures__items', 'data-count': String(block.items.length) },
+    block.items.map((item, index) => {
+      const place = (index % 3) + 1
+      return h(
         'li',
-        { class: 'cg-gallery__item' },
-        h('span', { class: 'cg-gallery__index', 'aria-hidden': 'true' }),
+        { class: 'cg-pictures__item', 'data-place': String(place) },
         image(ctx, item.media, {
-          className: 'cg-gallery__image',
-          sizes: '(min-width: 48rem) 22rem, 60vw',
+          className: 'cg-pictures__image',
+          sizes: sizesFor(block.layout, place),
         }),
-      ),
-    ),
+      )
+    }),
   )
 
-  return h(
-    'section',
-    {
-      class: 'cg-block cg-gallery',
-      '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-gallery__viewport',
+            class: 'cg-pictures__viewport',
             role: 'region',
             'aria-label': ctx.t('gallery.carousel'),
             tabindex: '0',

package/src/render/blocks/hero.ts

@@ -8,47 +8,50 @@ import {
   image,
   type RenderContext,
 } from '@cogenta/theme-kit'
+import { section } from '../layout.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 statement. `hero` carries the page's own `h1` (contract B), and on a
+ * studio's home page that heading is what the studio says it does, set very
+ * large in the display width across eleven columns. The eyebrow is a small
+ * line above it in the text face, never a badge. The subtitle drops to the
+ * right half of the grid, so the opening is asymmetric by construction; the
+ * actions follow it as underlined words.
  *
- * Structurally distinct from a centred banner: the eyebrow becomes a running
- * index mark set in the mono register (`— eyebrow`), the title is a display
- * headline that overflows its own column on wide screens (`blocks.css` gives
- * it a fluid `clamp()`), and the media is offset into the title's own
- * negative margin rather than sitting in a tidy second column — the overlap
- * is what makes this a poster, not a slide.
+ * A photograph or a film, when there is one, runs under the words across the
+ * whole container at 16:9: the one image above the fold, loaded eagerly.
  */
 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' },
-    h(
-      'div',
-      { class: 'cg-hero__frame' },
-      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')),
-    ),
+    'hero',
+    'cg-statement',
+    { 'data-media': block.media === undefined ? 'none' : 'image' },
+    'div',
+    block.eyebrow === undefined
+      ? null
+      : h('p', { class: 'cg-statement__eyebrow', 'data-field': 'eyebrow' }, block.eyebrow),
+    heading(tag, { class: 'cg-statement__title', 'data-field': 'title' }, block.title),
+    block.subtitle === undefined && (block.actions === undefined || block.actions.length === 0)
+      ? null
+      : h(
+          'div',
+          { class: 'cg-statement__aside' },
+          block.subtitle === undefined
+            ? null
+            : h('p', { class: 'cg-statement__subtitle', 'data-field': '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.
+          { class: 'cg-statement__media' },
           image(ctx, block.media, {
-            className: 'cg-hero__image',
+            className: 'cg-statement__image',
             loading: 'eager',
-            sizes: '(min-width: 64rem) 46vw, 100vw',
+            sizes: '(min-width: 96rem) 92rem, 100vw',
           }),
         ),
   )

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

@@ -1,38 +1,36 @@
 import type { LogoStripBlock, LogoStripItem } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * Lighter-weight than `logos` on purpose (RFC 0001): no per-mark `name`/
- * `url`, so no link, no accessible-name field to write, and no numbered
- * ledger row — this is the quieter "as seen in" strip, marks set edge to
- * edge with no dividers, desaturated exactly like `logos.ts`'s own marks
- * (the theme's one visual language for "a logo not currently in focus").
- * The image's own alt text (set once, in the media library) is what names
- * each mark, same as `logos.ts` falls back to when a link is absent — never
- * invented here, which is why `image` is called with no `altFrom`.
+ * A line of marks between two hairlines: the caption in the first three
+ * columns, the marks along the rest of the row at one height. `logoStrip`
+ * carries no name per mark, so each image's own alt text (set once, in the
+ * media library) names it. In the dark scheme the row sits on a light plate
+ * for the same reason `logos` does.
  */
 function renderItem(item: LogoStripItem, ctx: RenderContext): HtmlElement {
   return h(
     'li',
-    { class: 'cg-logostrip__item' },
-    image(ctx, item.media, {
-      className: 'cg-logostrip__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-logostrip', 'data-block': 'logoStrip' },
+  return section(
+    'div',
+    'logoStrip',
+    'cg-credits',
+    { 'data-captioned': block.caption === undefined ? 'false' : 'true' },
+    'div',
+    block.caption === undefined
+      ? null
+      : h('p', { class: 'cg-credits__caption', 'data-field': 'caption' }, block.caption),
     h(
       'ul',
-      { class: 'cg-logostrip__items' },
+      { class: 'cg-credits__items' },
       block.logos.map((item) => renderItem(item, ctx)),
     ),
-    block.caption === undefined
-      ? null
-      : h('figcaption', { class: 'cg-logostrip__caption', 'data-field': 'caption' }, block.caption),
   )
 }

package/src/render/blocks/logos.ts

@@ -1,63 +1,42 @@
 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'
 
 /**
- * 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.
- *
- * Rendered as a single-row ledger rather than a grid of tiles — a running
- * mono index beside each mark, in a desaturated register that resolves to
- * full ink only on hover or focus (`blocks.css`), which is the theme's own
- * take on the "selected clients" strip.
+ * Marks of clients or partners, each on its own plate in a ruled grid, the
+ * name under the plate in the caption size. The plate stays light in the dark
+ * scheme, so a dark wordmark drawn for white paper is never lost on black.
+ * The organisation's name is the image's accessible name when the media
+ * entity has none, and a mark with a URL links it.
  */
-function renderItem(item: LogoItem, ctx: RenderContext, index: number): HtmlElement {
-  const logo = image(ctx, item.media, {
-    className: 'cg-logo__image',
+function renderItem(item: LogoItem, ctx: RenderContext): HtmlElement {
+  const mark = image(ctx, item.media, {
+    className: 'cg-marks__image',
     altFrom: item.name,
     variant: { fit: 'contain' },
   })
   return h(
     'li',
-    { class: 'cg-logo' },
-    h(
-      'span',
-      { class: 'cg-logo__index', 'aria-hidden': 'true' },
-      String(index + 1).padStart(2, '0'),
-    ),
+    { class: 'cg-marks__item' },
     item.url === undefined
-      ? logo
-      : h(
-          'a',
-          { class: 'cg-logo__link', href: ctx.link(item.url), rel: 'noopener noreferrer' },
-          logo,
-        ),
+      ? h('div', { class: 'cg-marks__plate' }, mark)
+      : h('a', { class: 'cg-marks__plate', href: item.url, rel: 'noopener noreferrer' }, mark),
+    h('p', { class: 'cg-marks__name' }, item.name),
   )
 }
 
 export function renderLogos(block: LogosBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
     'section',
-    { class: 'cg-block cg-logos', 'data-block': 'logos' },
-    block.title === undefined
-      ? null
-      : heading(
-          blockHeadingTag('logos') ?? 'h2',
-          { class: 'cg-logos__title', 'data-field': 'title' },
-          block.title,
-        ),
+    'logos',
+    'cg-marks',
+    { 'data-count': String(block.items.length) },
+    'div',
+    sectionHead('logos', block.title),
     h(
       'ul',
-      { class: 'cg-logos__items' },
-      block.items.map((item, index) => renderItem(item, ctx, index)),
+      { class: 'cg-marks__items' },
+      block.items.map((item) => renderItem(item, ctx)),
     ),
   )
 }

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

@@ -1,38 +1,42 @@
 import type { MediaFigureBlock } from '@cogenta/blocks'
 import { aspectRatio, type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * `<figure>`/`<figcaption>` rather than a div and a paragraph: the
- * association between the picture and its caption is then in the markup,
- * and a screen reader announces the caption as belonging to the image
- * instead of as loose text after it.
+ * An image placed on the grid by its alignment, square-cornered, with a
+ * small caption under it on the image's own left edge and the credit after
+ * the caption. Alignment is how a case study gets its rhythm of large and
+ * small pictures:
  *
- * The "Fig. 01" plate number that precedes the caption is drawn entirely
- * from a CSS counter (`counter-increment: cg-figure` in `blocks.css`) — it
- * is not stored data, so it renumbers itself as figures are added or
- * removed and never needs updating here.
- *
- * `align` is written as a data attribute, never as a class: contract B's
- * values are `start`/`end`, an intent that mirrors in right-to-left
- * locales, and the skin decides what it means.
+ * - `center` (the default): columns 3 to 10.
+ * - `start`: the first seven columns. `end`: the last seven.
+ * - `wide`: the whole container.
+ * - `full`: edge to edge, the caption returning to the grid.
  */
 export function renderMediaFigure(block: MediaFigureBlock, ctx: RenderContext): HtmlElement {
   const ratio = aspectRatio(block.ratio)
+  const align = block.align ?? 'center'
   const hasCaption = block.caption !== undefined || block.credit !== undefined
-  return h(
-    'figure',
+  return section(
+    'div',
+    'mediaFigure',
+    'cg-figure',
     {
-      class: 'cg-block cg-figure',
-      'data-block': 'mediaFigure',
-      'data-align': block.align ?? 'center',
+      'data-align': align,
       style: ratio === undefined ? undefined : `--cg-ratio:${ratio}`,
     },
+    'figure',
     h(
       'div',
       { class: 'cg-figure__frame' },
       image(ctx, block.media, {
-        className: 'cg-figure__media',
-        sizes: '(min-width: 48rem) 42rem, 100vw',
+        className: 'cg-figure__image',
+        sizes:
+          align === 'full'
+            ? '100vw'
+            : align === 'wide'
+              ? '(min-width: 96rem) 92rem, 100vw'
+              : '(min-width: 64rem) 56rem, 100vw',
       }),
     ),
     hasCaption
@@ -41,7 +45,11 @@ export function renderMediaFigure(block: MediaFigureBlock, ctx: RenderContext):
           { class: 'cg-figure__caption' },
           block.caption === undefined
             ? null
-            : h('span', { class: 'cg-figure__plate' }, block.caption),
+            : h(
+                'span',
+                { class: 'cg-figure__caption-text', 'data-field': 'caption' },
+                block.caption,
+              ),
           block.credit === undefined
             ? null
             : h('span', { class: 'cg-figure__credit', 'data-field': 'credit' }, block.credit),

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

@@ -1,7 +1,6 @@
 import type { PricingTableBlock, PricingTier } from '@cogenta/blocks'
 import {
   actionLink,
-  blockHeadingTag,
   type HeadingTag,
   type HtmlElement,
   h,
@@ -9,60 +8,60 @@ import {
   nestedHeadingTag,
   type RenderContext,
 } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * `highlighted` is an editorial signal, never a colour (RFC 0001's own
- * comment on the field): it is written as `data-highlighted="true"` for the
- * skin to key off, and the tier additionally carries `aria-current="true"`
- * — the closest native semantic for "the one the author means you to pick"
- * among a set of siblings.
+ * Fees or engagements, set as the columns of a ruled table rather than as
+ * cards: each tier opens on a hairline, its name in the text face, the price
+ * in the display width with tabular numerals and the interval after it, what
+ * it includes as a list divided by hairlines, and its action at the foot. The
+ * tier the editor highlighted opens on a heavy rule in ink instead, and its
+ * action is the filled one; the others keep their words underlined.
  */
 function renderTier(tier: PricingTier, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  const highlighted = tier.highlighted === true
   return h(
     'li',
-    {
-      class: 'cg-pricing__tier',
-      'data-highlighted': tier.highlighted === true ? 'true' : undefined,
-      'aria-current': tier.highlighted === true ? 'true' : undefined,
-    },
-    heading(tag, { class: 'cg-pricing__name' }, tier.name),
+    { class: 'cg-fees__tier', 'data-highlighted': highlighted ? 'true' : undefined },
+    heading(tag, { class: 'cg-fees__name' }, tier.name),
     h(
       'p',
-      { class: 'cg-pricing__price' },
-      tier.price,
-      tier.interval === undefined
-        ? null
-        : h('span', { class: 'cg-pricing__interval' }, tier.interval),
+      { class: 'cg-fees__price' },
+      h('span', { class: 'cg-fees__amount' }, tier.price),
+      tier.interval === undefined ? null : h('span', { class: 'cg-fees__interval' }, tier.interval),
     ),
     tier.features.length === 0
       ? null
       : h(
           'ul',
-          { class: 'cg-pricing__features' },
-          tier.features.map((feature) => h('li', {}, feature)),
+          { class: 'cg-fees__features' },
+          tier.features.map((feature) => h('li', { class: 'cg-fees__feature' }, feature)),
         ),
     tier.action === undefined
       ? null
-      : h('div', { class: 'cg-pricing__action' }, actionLink(ctx, tier.action)),
+      : h(
+          'div',
+          { class: 'cg-fees__action' },
+          actionLink(ctx, {
+            ...tier.action,
+            emphasis: tier.action.emphasis ?? (highlighted ? 'primary' : 'secondary'),
+          }),
+        ),
   )
 }
 
 export function renderPricingTable(block: PricingTableBlock, ctx: RenderContext): HtmlElement {
-  const hasTitle = block.title !== undefined
-  const tierTag = nestedHeadingTag('pricingTable', hasTitle)
-  return h(
+  const tierTag = nestedHeadingTag('pricingTable', block.title !== undefined)
+  return section(
     'section',
-    { class: 'cg-block cg-pricing', 'data-block': 'pricingTable' },
-    hasTitle
-      ? heading(
-          blockHeadingTag('pricingTable') ?? 'h2',
-          { class: 'cg-pricing__title', 'data-field': 'title' },
-          block.title ?? '',
-        )
-      : null,
+    'pricingTable',
+    'cg-fees',
+    { 'data-count': String(Math.min(block.tiers.length, 4)) },
+    'div',
+    sectionHead('pricingTable', block.title),
     h(
       'ul',
-      { class: 'cg-pricing__tiers' },
+      { class: 'cg-fees__tiers' },
       block.tiers.map((tier) => renderTier(tier, ctx, tierTag)),
     ),
   )

package/src/render/blocks/prose.ts

@@ -1,22 +1,47 @@
-import type { ProseBlock } from '@cogenta/blocks'
+import type { ProseBlock, RichTextDocument } from '@cogenta/blocks'
 import { type HtmlElement, h, type RenderContext, renderRichText } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * `prose` declares `headingLevel: 'none'`: it contributes no heading of its
- * own. Whatever headings appear come from the rich text document, whose
- * vocabulary starts at `h2`.
+ * Running text on the studio grid. When the text opens with a subhead, the
+ * subhead moves into the first three columns as the section's label and the
+ * text starts at the fourth, level with it: the asymmetric page of a case
+ * study. Without a subhead the text simply takes the reading column.
  *
- * The wrapper is deliberately plain — a rich text document is arbitrary
- * editorial content, and the only honest DOM shape for arbitrary content is
- * "here it is". The distinctive editorial treatment (a dropped first
- * capital, an oversized `h2`, a hairline-and-number rule before each
- * heading) lives entirely in `blocks.css`, driven off the very structure
- * `renderRichText` already produces.
+ * On a project page a long text sets in two columns on a wide screen
+ * (`work.css`). A short one stays in one: two columns of four lines each
+ * read as a mistake, not as a page. Everywhere else the text keeps one
+ * column at the reading measure.
  */
+
+/** Below this many words, a text is kept in one column. */
+export const TWO_COLUMN_MIN_WORDS = 110
+
+function wordCount(document: RichTextDocument): number {
+  let words = 0
+  for (const node of document) {
+    if (node._type !== 'block') continue
+    for (const span of node.children) {
+      words += span.text.split(/\s+/u).filter((word) => word !== '').length
+    }
+  }
+  return words
+}
+
 export function renderProse(block: ProseBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  const [first, ...rest] = block.body
+  const opensOnSubhead = first !== undefined && first._type === 'block' && first.style === 'h2'
+  const body = opensOnSubhead ? rest : block.body
+  return section(
+    'div',
+    'prose',
+    'cg-prose',
+    {
+      'data-label': opensOnSubhead ? 'true' : 'false',
+      'data-length': wordCount(body) >= TWO_COLUMN_MIN_WORDS ? 'long' : 'short',
+    },
     'div',
-    { class: 'cg-block cg-prose', 'data-block': 'prose' },
-    renderRichText(ctx, block.body),
+    opensOnSubhead ? h('div', { class: 'cg-prose__label' }, renderRichText(ctx, [first])) : null,
+    h('div', { class: 'cg-prose__body' }, renderRichText(ctx, body)),
   )
 }

package/src/render/blocks/quote.ts

@@ -1,27 +1,27 @@
 import type { QuoteBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * `<figure><blockquote>…</blockquote><figcaption>` is the attribution
- * pattern the HTML spec prescribes: putting the author inside the
- * `<blockquote>` would claim the author's name is part of what was said.
- *
- * Set left-aligned at display scale rather than centred — a pull quote that
- * fills the column edge to edge, the way a magazine breaks one out of a
- * feature. The attribution is set in the mono register, the theme's
- * register for credits and metadata.
- *
- * The avatar is decorative here — the name is right beside it in text — so
- * its media entity's alt text is expected to be empty. `image` still writes
- * the attribute either way.
+ * A client's words, set large in the text width from the fourth column, with
+ * typographic quotation marks from the stylesheet (`quotes`), and the speaker
+ * under them in the caption size: their name, then their role. The portrait,
+ * when there is one, is a small square: it is decorative (the name is beside
+ * it in text), so it keeps the media library's own empty `alt`.
  */
 export function renderQuote(block: QuoteBlock, ctx: RenderContext): HtmlElement {
-  const hasAttribution =
-    block.author !== undefined || block.role !== undefined || block.avatar !== undefined
-  return h(
+  const hasAttribution = block.author !== undefined || block.role !== undefined
+  return section(
+    'div',
+    'quote',
+    'cg-quote',
+    {},
     'figure',
-    { class: 'cg-block cg-quote', 'data-block': 'quote' },
-    h('blockquote', { class: 'cg-quote__text' }, h('p', { 'data-field': 'text' }, block.text)),
+    h(
+      'blockquote',
+      { class: 'cg-quote__quote' },
+      h('p', { class: 'cg-quote__text', 'data-field': 'text' }, block.text),
+    ),
     hasAttribution
       ? h(
           'figcaption',
@@ -34,7 +34,7 @@ export function renderQuote(block: QuoteBlock, ctx: RenderContext): HtmlElement
               }),
           h(
             'span',
-            { class: 'cg-quote__names' },
+            { class: 'cg-quote__who' },
             block.author === undefined
               ? null
               : h('span', { class: 'cg-quote__author', 'data-field': 'author' }, block.author),