@cogenta/theme-entreprise 1.1.3 → 1.4.0

package/src/render/chrome.ts

@@ -4,42 +4,39 @@ import {
   type ChromeResult,
   escapeAttribute,
   escapeText,
+  type HtmlElement,
+  h,
   renderBrandMark,
+  renderFooterWidgets,
   renderSocialLinks,
   renderThemeToggle,
   serialize,
 } from '@cogenta/theme-kit'
 
 /**
- * This theme's own header and footer (`theme@1.4`) — a structurally
- * different chrome from the canonical theme's, not a recolour of it.
+ * This theme's own header and footer (`theme@1.4`), drawn the way a firm's
+ * website is: a quiet bar and a proper colophon.
  *
- * Header: a sticky bar with the corporate wordmark/logo on the left, a real
- * desktop `<nav>`, `headerAction` (`theme@1.4`) rendered as a filled button
- * — the one place this hairline-first chrome spends a solid accent surface
- * — and, below the breakpoint the stylesheet sets, a CSS-only mobile menu:
- * a checkbox (`#cg-nav-toggle`, visually hidden but still focusable and
- * Space-operable) paired with a `<label>` styled as a three-bar button. No
- * `<script>` anywhere: the sibling combinator in `base.css` is what shows
- * the nav panel when the box is checked. This replaces the previous
- * "the last header link doubles as the call to action" convention — with a
- * real `headerAction` field, inventing a role for a plain nav link is no
- * longer the honest reading of the data.
+ * Header: the firm's name set as a wordmark in the display serif (or its
+ * uploaded logo), the primary navigation in small interface text, the
+ * `headerAction` as the one filled control, and the light/dark control last.
+ * Below the breakpoint the navigation collapses into a panel opened by a
+ * CSS-only toggle: a visually hidden checkbox paired with a `<label>`, no
+ * `<script>`. The label must precede the `<nav>` for the sibling combinator
+ * in `base.css` to reach it; the theme toggle follows the `<nav>`, outside
+ * the panel it does not control, so a visitor can switch appearance without
+ * opening the menu first.
  *
- * Footer: a real four-column layout — a brand column (site name + `tagline`,
- * `theme@1.4`), the site's own footer navigation, `social` (`theme@1.4`, via
- * `renderSocialLinks`), and a fourth column carrying `footerNote`
- * (`theme@1.4`) above Cogenta's own credit (or its white-label replacement).
- * `brandingHtml` is placed exactly once, inside the footer, exactly as
- * received: never altered, never dropped.
+ * Footer: a twelve-column colophon. The name and `tagline` on the left, the
+ * footer navigation, the `footerNote` and the social profiles (real icons,
+ * via `renderSocialLinks`), then a legal line under a hairline with the
+ * copyright year and the site's name beside Cogenta's credit
+ * (`brandingHtml`, placed exactly once, exactly as received).
  *
- * The manual light/dark/system control (`renderThemeToggle`, `@cogenta/
- * theme-kit`, L26) sits beside the mobile menu button, outside the `<nav>`
- * it controls the collapse of — the `<nav>` panel is hidden under the
- * breakpoint until the checkbox is checked, but a visitor must be able to
- * flip appearance without opening that panel first, on desktop or mobile.
- * This module ships no CSS of its own for it (`base.css` owns
- * `.cg-theme-toggle`, in this theme's own visual register, not canonical's).
+ * `footerNote` is plain text. When an editor separates it into paragraphs
+ * with blank lines, each paragraph becomes its own block, and a paragraph of
+ * several lines gets its first line set as a label: an office city above its
+ * address, a heading above a legal mention. One line stays one paragraph.
  */
 
 function navItems(links: readonly ChromeNavLink[]): string {
@@ -61,7 +58,7 @@ function renderNavList(links: readonly ChromeNavLink[]): string {
   return items === '' ? '' : `<ul class="cg-nav__items">${items}</ul>`
 }
 
-/** The header's own call-to-action link (`theme@1.4`) — a filled button, distinct from the ordinary nav list. */
+/** The header's own call to action (`theme@1.4`): the one filled control in the bar. */
 function renderHeaderAction(action: ChromeInput['headerAction']): string {
   if (action === undefined) return ''
   return (
@@ -70,13 +67,43 @@ function renderHeaderAction(action: ChromeInput['headerAction']): string {
   )
 }
 
+/** `footerNote` as paragraphs: blank lines separate them, and a multi-line paragraph's first line is its label. */
+export function renderFooterNote(note: string): HtmlElement | null {
+  const paragraphs = note
+    .replace(/\r\n?/g, '\n')
+    .split(/\n\s*\n/)
+    .map((paragraph) =>
+      paragraph
+        .split('\n')
+        .map((line) => line.trim())
+        .filter((line) => line !== ''),
+    )
+    .filter((lines) => lines.length > 0)
+  if (paragraphs.length === 0) return null
+  return h(
+    'div',
+    { class: 'cg-site-footer__note', 'data-paragraphs': String(Math.min(paragraphs.length, 4)) },
+    paragraphs.map((lines) => {
+      const [first, ...rest] = lines as [string, ...string[]]
+      if (rest.length === 0) return h('p', { class: 'cg-site-footer__note-text' }, first)
+      return h(
+        'p',
+        { class: 'cg-site-footer__note-text' },
+        h('span', { class: 'cg-site-footer__note-label' }, first),
+        rest.flatMap((line, index) => (index === 0 ? [line] : [h('br'), line])),
+      )
+    }),
+  )
+}
+
 export function renderChrome(input: ChromeInput): ChromeResult {
   const siteNameText = escapeText(input.site.name)
   const headerNavList = renderNavList(input.headerNav)
   const headerAction = renderHeaderAction(input.headerAction)
   const footerNavList = renderNavList(input.footerNav)
-  // A B2B header is a corporate identity slot before it is a wordmark slot.
-  const mark = renderBrandMark(input.brand, { className: 'cg-site-header__logo' }) ?? siteNameText
+  const mark =
+    renderBrandMark(input.brand, { className: 'cg-site-header__logo' }) ??
+    `<span class="cg-site-header__name">${siteNameText}</span>`
   const themeToggle = serialize(renderThemeToggle(input.locale, { className: 'cg-theme-toggle' }))
 
   const header =
@@ -84,45 +111,53 @@ export function renderChrome(input: ChromeInput): ChromeResult {
     `<a class="cg-site-header__home" href="${escapeAttribute(input.homeHref)}">${mark}</a>` +
     `<input type="checkbox" id="cg-nav-toggle" class="cg-nav-toggle-input" aria-label="Menu">` +
     `<label for="cg-nav-toggle" class="cg-nav-toggle-label" aria-hidden="true">` +
-    `<span class="cg-nav-toggle-bar"></span><span class="cg-nav-toggle-bar"></span><span class="cg-nav-toggle-bar"></span>` +
+    `<span class="cg-nav-toggle-bar"></span><span class="cg-nav-toggle-bar"></span>` +
     `</label>` +
-    `${themeToggle}` +
     `<nav class="cg-site-header__nav" id="cg-nav" aria-label="Primary">` +
     `${headerNavList}${headerAction}` +
     `</nav>` +
+    `${themeToggle}` +
     `</div></header>`
 
   const tagline =
     input.tagline === undefined
       ? ''
       : `<p class="cg-site-footer__tagline" data-field="tagline">${escapeText(input.tagline)}</p>`
-  const social =
-    input.social === undefined
-      ? ''
-      : serialize(
-          renderSocialLinks(input.social, {
-            className: 'cg-site-footer__social',
-            itemClassName: 'cg-site-footer__social-item',
-          }) ?? { kind: 'text', value: '' },
-        )
-  const footerNote =
-    input.footerNote === undefined
-      ? ''
-      : `<p class="cg-site-footer__note">${escapeText(input.footerNote)}</p>`
+  const socialList = renderSocialLinks(input.social, {
+    className: 'cg-site-footer__social',
+    itemClassName: 'cg-site-footer__social-item',
+  })
+  const note = input.footerNote === undefined ? null : renderFooterNote(input.footerNote)
+  // The copyright year is the year the page is rendered, which is what a
+  // legal line on a live site means.
+  const year = new Date().getFullYear()
+  // The footer widget columns (`theme@1.6`) are one row under the colophon's
+  // own columns and above the legal line, in the same small type.
+  const footerWidgets = renderFooterWidgets(input.widgets, {
+    className: 'cg-site-footer__widgets',
+    headingLevel: 'h2',
+  })
 
   const footer =
-    `<footer class="cg-site-footer"><div class="cg-site-footer__grid">` +
+    `<footer class="cg-site-footer"><div class="cg-site-footer__inner">` +
+    `<div class="cg-site-footer__top">` +
     `<div class="cg-site-footer__brand">` +
-    `<a href="${escapeAttribute(input.homeHref)}">${siteNameText}</a>${tagline}` +
+    `<a class="cg-site-footer__name" href="${escapeAttribute(input.homeHref)}">${siteNameText}</a>${tagline}` +
     `</div>` +
     `${
       footerNavList === ''
         ? ''
         : `<nav class="cg-site-footer__nav" aria-label="Footer">${footerNavList}</nav>`
     }` +
-    `${social === '' ? '' : `<div class="cg-site-footer__social-col">${social}</div>`}` +
-    `<div class="cg-site-footer__meta">${footerNote}<div class="cg-site-footer__branding">${input.brandingHtml}</div></div>` +
-    `</div><div class="cg-site-footer__bottom"><span>${siteNameText}</span></div></footer>`
+    `${note === null ? '' : serialize(note)}` +
+    `${socialList === null ? '' : `<div class="cg-site-footer__social-col">${serialize(socialList)}</div>`}` +
+    `</div>` +
+    `${footerWidgets === null ? '' : serialize(footerWidgets)}` +
+    `<div class="cg-site-footer__bottom">` +
+    `<p class="cg-site-footer__legal">© ${year} ${siteNameText}</p>` +
+    `<div class="cg-site-footer__branding">${input.brandingHtml}</div>` +
+    `</div>` +
+    `</div></footer>`
 
   return { header, footer }
 }

package/src/render/layout.ts

@@ -0,0 +1,67 @@
+import { type Attributes, type Child, type HtmlElement, h } from '@cogenta/theme-kit'
+
+/**
+ * The frame every block of this theme renders into.
+ *
+ * The outer element is full width, so a band (the ink call to action, a
+ * muted variant) can paint edge to edge and so the section rhythm
+ * (`--cg-section`) is applied once, to every block alike. The inner element
+ * is the twelve-column container: one maximum width, one gutter, one column
+ * gap, for the whole site.
+ *
+ * `inner` is `figure` for the blocks whose own semantics are a figure (a
+ * quotation and its attribution, an image and its caption): `<figcaption>`
+ * must be a direct child of its `<figure>`, so the figure has to be the
+ * container itself rather than something nested inside it.
+ */
+export function section(
+  outer: 'section' | 'div',
+  block: string,
+  className: string,
+  attrs: Attributes,
+  inner: 'div' | 'figure',
+  ...children: readonly Child[]
+): HtmlElement {
+  return h(
+    outer,
+    { class: `cg-section ${className}`, 'data-block': block, ...attrs },
+    h(inner, { class: `cg-container ${className}__inner` }, ...children),
+  )
+}
+
+/** A two-digit, zero-padded ordinal: `01`, `02`… — the index language this theme uses for numbered rows. */
+export function ordinal(index: number): string {
+  return String(index + 1).padStart(2, '0')
+}
+
+/**
+ * A thin right arrow, drawn inline and hidden from assistive technology: it
+ * repeats what the link it sits in already says.
+ */
+export function arrow(): HtmlElement {
+  return h(
+    'svg',
+    {
+      class: 'cg-arrow',
+      viewBox: '0 0 20 20',
+      fill: 'none',
+      stroke: 'currentColor',
+      'stroke-width': '1.5',
+      'stroke-linecap': 'square',
+      'aria-hidden': 'true',
+      focusable: 'false',
+    },
+    h('path', { d: 'M3 10h13M11.5 5.5 16 10l-4.5 4.5' }),
+  )
+}
+
+/** `March 2026` in the page's locale, or `null` when the value is not a date `Intl` can format. */
+export function monthYear(iso: string, locale: string): string | null {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return null
+  try {
+    return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(date)
+  } catch {
+    return new Intl.DateTimeFormat('en', { month: 'long', year: 'numeric' }).format(date)
+  }
+}

package/src/render/render-block.ts

@@ -5,6 +5,7 @@ import {
   h,
   type PageContent,
   pageHasOwnHeading,
+  providedBlockNode,
   type RenderContext,
   renderEntryHeader,
   resolveBlockForRender,
@@ -38,6 +39,11 @@ export function renderBlock(
   entries: FetchedEntries = {},
   registry?: BlockRegistry,
 ): HtmlElement | null {
+  // A block a plugin provides arrives already rendered by the host, in a
+  // process of its own (contract D theme@1.7). Nothing else in this theme
+  // needs to know such blocks exist.
+  const provided = providedBlockNode(block, ctx)
+  if (provided !== null) return withBlockVariant(provided, block.variant)
   // `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
@@ -106,6 +112,23 @@ function renderKnownBlock(
   }
 }
 
+/** Below this, a reading time says nothing a reader can use. */
+const MIN_READING_MINUTES_SHOWN = 3
+
+/**
+ * A practice page or a short case study announcing "1 min read" reads like a
+ * blog, not like a firm: this theme shows a reading time only for a long
+ * read. The rest of the entry furniture is passed through untouched.
+ */
+function withoutShortReadingTime(page: PageContent): PageContent {
+  const entry = page.entry
+  if (entry?.readingMinutes === undefined || entry.readingMinutes >= MIN_READING_MINUTES_SHOWN) {
+    return page
+  }
+  const { readingMinutes: _short, ...rest } = entry
+  return { ...page, entry: rest }
+}
+
 /**
  * `<main id="cg-main">` is mandatory: it is the skip-link's target, written
  * once by `@cogenta/cli`'s `theme-render.ts` outside any theme's control.
@@ -129,7 +152,7 @@ export function renderPage(
   entries: FetchedEntries = {},
   registry?: BlockRegistry,
 ): HtmlElement {
-  const entryHeader = renderEntryHeader(page, ctx)
+  const entryHeader = renderEntryHeader(withoutShortReadingTime(page), ctx)
   return h(
     'main',
     { class: 'cg-main', id: 'cg-main' },

package/src/render/term-archive.ts

@@ -1,67 +1,71 @@
 import { type HtmlElement, h, type TermArchiveInput } from '@cogenta/theme-kit'
+import { monthYear } from './layout.js'
 
 /**
- * The taxonomy-term archive (contract D `theme@1.3`) — a resource index.
+ * The taxonomy-term archive (contract D `theme@1.3`): an index, set the way a
+ * firm lists its work by sector.
  *
- * Built from the same `cg-list__row` rows `collectionList` already renders
- * here: a date rail on the left, the title and its summary on the right,
- * which is the shape a B2B insights or resources index takes. Reusing the
- * block's own classes is what keeps an archive looking like the rest of the
- * site without a second stylesheet to maintain.
+ * A breadcrumb in small capitals, the term as the page title in the display
+ * serif, its sub-terms as a ruled line of links, then one hairline row per
+ * entry: the title on the left half of the grid, the summary on the right,
+ * the date (when there is one) in the margin. `TermArchiveEntry` carries no
+ * picture, so this is a typographic index by design rather than a grid of
+ * cards with empty image slots.
  */
 export function renderTermArchive(input: TermArchiveInput): HtmlElement {
-  const rows = input.entries.map((entry) =>
-    h(
+  const rows = input.entries.map((entry) => {
+    const date = entry.publishedAt === null ? null : monthYear(entry.publishedAt, input.locale)
+    return h(
       'li',
-      { class: 'cg-list__row' },
-      entry.publishedAt === null
-        ? null
-        : h(
-            'time',
-            { class: 'cg-list__date', datetime: entry.publishedAt },
-            entry.publishedAt.slice(0, 10),
-          ),
+      { class: 'cg-index__row' },
       h(
-        'div',
-        { class: 'cg-list__body' },
-        h(
-          'h2',
-          { class: 'cg-list__title' },
-          entry.href === null
-            ? entry.title
-            : h('a', { class: 'cg-list__link', href: entry.href }, entry.title),
-        ),
-        entry.summary === null ? null : h('p', { class: 'cg-list__excerpt' }, entry.summary),
+        'h2',
+        { class: 'cg-index__title' },
+        entry.href === null
+          ? entry.title
+          : h('a', { class: 'cg-index__link', href: entry.href }, entry.title),
       ),
-    ),
-  )
+      entry.summary === null ? null : h('p', { class: 'cg-index__summary' }, entry.summary),
+      entry.publishedAt === null || date === null
+        ? null
+        : h('time', { class: 'cg-index__date', datetime: entry.publishedAt }, date),
+    )
+  })
 
   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(
+      'div',
+      { class: 'cg-container cg-archive__inner' },
+      input.ancestors.length === 0
+        ? null
+        : h(
+            'nav',
+            { class: 'cg-archive__breadcrumb', 'aria-label': input.labels.breadcrumb },
+            h(
+              'ol',
+              {},
+              ...input.ancestors.map((link) =>
+                h('li', {}, h('a', { href: link.href }, link.label)),
+              ),
+            ),
           ),
-        ),
-    h('h1', { class: 'cg-list__title-heading' }, 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-list__empty' }, input.labels.empty)
-      : h('ul', { class: 'cg-list__items' }, ...rows),
-    pager(input),
+      h('h1', { class: 'cg-archive__title' }, input.term.label),
+      input.children.length === 0
+        ? null
+        : h(
+            'ul',
+            { class: 'cg-archive__children', 'aria-label': input.labels.subterms },
+            ...input.children.map((child) =>
+              h('li', {}, h('a', { href: child.href }, child.label)),
+            ),
+          ),
+      rows.length === 0
+        ? h('p', { class: 'cg-archive__empty' }, input.labels.empty)
+        : h('ol', { class: 'cg-index' }, ...rows),
+      pager(input),
+    ),
   )
 }
 

package/src/render/widget-areas.ts

@@ -0,0 +1,23 @@
+/**
+ * The widget areas this theme names (contract D `theme@1.6`). Declaring them
+ * is what tells the host this theme draws the footer columns inside its own
+ * footer; the page areas are placed by the host in the shared
+ * `cg-sidebar-layout` markup, which `styles/widgets.css` sets as the side
+ * column of a firm's report.
+ */
+export const widgetAreas: readonly {
+  readonly id: string
+  readonly label: string
+  readonly description?: string
+}[] = [
+  {
+    id: 'sidebar',
+    label: 'Side column',
+    description: 'Beside a case study, a practice, a sector and search results.',
+  },
+  {
+    id: 'content-after',
+    label: 'Under the text',
+    description: 'After a case study, a practice or a page, before the comments.',
+  },
+]