@cogenta/theme-entreprise 1.1.3 → 1.3.3

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.',
+  },
+]

package/src/styles/archive.css

@@ -1,60 +1,123 @@
 /*
- * The taxonomy-term archive (contract D `theme@1.3`).
- *
- * Only the three things an archive adds beyond what `collectionList` already
- * styles — a breadcrumb, a sub-term row, a prev/next pager. The entry list
- * itself reuses the `cg-entry`/`cg-collection__items` rules, on purpose: an
- * archive of articles must look like this theme's list of articles, and a
- * second set of card rules is exactly how those two drift apart.
+ * The taxonomy-term archive (contract D `theme@1.3`): a typographic index.
+ * `TermArchiveEntry` carries no picture, so every row is title, summary and
+ * (when there is one) a date, between hairlines.
  */
 
-.cg-archive {
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-  padding: var(--cg-s10) var(--cg-gutter);
+.cg-archive__inner {
+  padding-block: calc(var(--cg-section) * 0.4) calc(var(--cg-section) / 2);
 }
 
-.cg-archive__breadcrumb ol,
-.cg-archive__children {
+.cg-archive__breadcrumb ol {
   display: flex;
   flex-wrap: wrap;
   gap: var(--cg-s3);
-  margin: 0 0 var(--cg-s4);
+  margin: 0 0 var(--cg-s6);
   padding: 0;
   list-style: none;
-  font-size: var(--cg-text-sm);
+  font-size: var(--cg-text-xs);
+  font-weight: var(--cg-weight-medium);
+  letter-spacing: var(--cg-tracking-label);
+  text-transform: uppercase;
+}
+
+.cg-archive__breadcrumb li + li::before {
+  content: "/";
+  margin-inline-end: var(--cg-s3);
+  color: var(--cg-ink-subtle);
+}
+
+.cg-archive__breadcrumb a {
+  color: var(--cg-ink-muted);
+  text-decoration: none;
+}
+
+.cg-archive__breadcrumb a:hover {
+  color: var(--cg-ink);
+}
+
+.cg-archive__title {
+  max-inline-size: 18ch;
+  margin-block-end: var(--cg-s12);
+  font-size: var(--cg-size-display);
+  line-height: var(--cg-leading-display);
+  letter-spacing: var(--cg-tracking-display);
 }
 
 .cg-archive__children {
-  margin-block: var(--cg-s4) var(--cg-s8);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cg-s2) var(--cg-s6);
+  margin: calc(var(--cg-s6) * -1) 0 var(--cg-s12);
+  padding: 0;
+  list-style: none;
+  font-size: var(--cg-text-ui);
+}
+
+.cg-archive__children a {
+  color: var(--cg-ink);
+  text-decoration-color: var(--cg-line-strong);
 }
 
-/* `TermArchiveEntry` carries no image (`@cogenta/theme-kit`'s `archive.ts`),
-   so an archive row can never be the cover card `collectionList` renders
-   for a real content entry — this is the honest, text-only equivalent: the
-   same hairline-divided rows, the same typography and colour, so an archive
-   still reads as part of this theme rather than as a second, unstyled
-   list. */
-.cg-archive .cg-list__items {
+.cg-index {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-block-start: var(--cg-rule) solid var(--cg-ink);
+}
+
+.cg-index__row {
+  position: relative;
   display: grid;
-  gap: 0;
+  gap: var(--cg-s3);
+  padding-block: var(--cg-s6) var(--cg-s8);
+  border-block-end: var(--cg-rule) solid var(--cg-line);
 }
 
-.cg-archive .cg-list__row {
-  display: flex;
-  align-items: baseline;
-  gap: var(--cg-s6);
-  padding-block: var(--cg-s6);
-  border-block-start: 1px solid var(--cg-line-soft);
+.cg-index__title {
+  font-size: var(--cg-size-subheading);
+  line-height: 1.15;
+}
+
+.cg-index__link {
+  color: var(--cg-ink);
+  text-decoration-line: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 0.18em;
+}
+
+.cg-index__link::after {
+  content: "";
+  position: absolute;
+  inset: 0;
 }
 
-.cg-archive .cg-list__row:last-child {
-  border-block-end: 1px solid var(--cg-line-soft);
+.cg-index__row:hover .cg-index__link {
+  text-decoration-color: currentColor;
 }
 
-.cg-archive .cg-list__date {
-  flex: none;
-  inline-size: 5.5rem;
+.cg-index__summary {
+  margin: 0;
+  max-inline-size: 52ch;
+  color: var(--cg-ink-muted);
+}
+
+.cg-index__date {
+  font-size: var(--cg-text-xs);
+  font-weight: var(--cg-weight-medium);
+  letter-spacing: var(--cg-tracking-label);
+  text-transform: uppercase;
+  font-variant-numeric: lining-nums tabular-nums;
+  color: var(--cg-ink-subtle);
+}
+
+.cg-archive__empty {
+  margin: 0;
+  padding-block: var(--cg-s10);
+  border-block: var(--cg-rule) solid var(--cg-line);
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-xl);
+  color: var(--cg-ink-muted);
 }
 
 .cg-archive__pager {
@@ -62,7 +125,41 @@
   justify-content: space-between;
   gap: var(--cg-s4);
   margin-block-start: var(--cg-s10);
-  padding-block-start: var(--cg-s5);
-  border-block-start: 1px solid var(--cg-line-soft);
-  font-weight: var(--cg-weight-semibold);
+  font-size: var(--cg-text-ui);
+}
+
+.cg-archive__pager a {
+  color: var(--cg-ink);
+}
+
+.cg-archive__pager a[rel="next"] {
+  margin-inline-start: auto;
+}
+
+@media (min-width: 64rem) {
+  .cg-archive__title {
+    grid-column: 1 / span 10;
+  }
+
+  .cg-index__row {
+    grid-template-columns: repeat(var(--cg-columns), minmax(0, 1fr));
+    column-gap: var(--cg-col-gap);
+    align-items: baseline;
+  }
+
+  .cg-index__title {
+    grid-column: 1 / span 5;
+    grid-row: 1;
+  }
+
+  .cg-index__summary {
+    grid-column: 7 / span 5;
+    grid-row: 1;
+  }
+
+  .cg-index__date {
+    grid-column: 12;
+    grid-row: 1;
+    justify-self: end;
+  }
 }