@cogenta/theme-restaurant 0.3.2 → 0.5.3

package/src/render/blocks/faq.ts

@@ -1,53 +1,60 @@
 import type { FaqBlock, FaqItem } from '@cogenta/blocks'
 import {
-  blockHeadingTag,
   type HtmlElement,
   h,
-  heading,
+  nestedHeadingTag,
   type RenderContext,
   renderRichText,
 } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * `<details>`/`<summary>` — zero bytes of JavaScript. Kept visually distinct
- * from `accordion` (this theme's own "Hours & location"): each question
- * carries a small serif numeral rather than the plus/minus mark, the
- * "questions before you book" register of a restaurant's own FAQ.
+ * Questions before a visit (a table for eight, a child's plate, a dog in the
+ * room), in two columns on a wide screen: the title on the first four, and
+ * the questions on the last eight, each under a hairline.
+ *
+ * Every answer is a `<details>`: it opens without a script and is found by
+ * the browser's own search. The question sits in a real heading inside the
+ * summary, so a screen reader's heading list still reaches every one of
+ * them. The plus that turns into a minus is two hairlines drawn by the
+ * stylesheet, not a glyph.
  */
-function renderItem(item: FaqItem, ctx: RenderContext, index: number): HtmlElement {
-  const number = String(index + 1).padStart(2, '0')
+export function answerItem(
+  item: FaqItem,
+  ctx: RenderContext,
+  blockName: 'faq' | 'accordion',
+  titled: boolean,
+): HtmlElement {
   return h(
     'li',
-    { class: 'cg-faq__item' },
+    { class: 'cr-answers__item' },
     h(
       'details',
-      { class: 'cg-faq__details' },
+      { class: 'cr-answers__details' },
       h(
         'summary',
-        { class: 'cg-faq__question' },
-        h('span', { class: 'cg-faq__index', 'aria-hidden': 'true' }, number),
-        h('span', { class: 'cg-faq__question-text' }, item.question),
+        { class: 'cr-answers__summary' },
+        h(nestedHeadingTag(blockName, titled), { class: 'cr-answers__question' }, item.question),
+        h('span', { class: 'cr-answers__mark', 'aria-hidden': 'true' }),
       ),
-      h('div', { class: 'cg-faq__answer' }, renderRichText(ctx, item.answer)),
+      h('div', { class: 'cr-answers__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-faq', 'data-block': 'faq' },
-    block.title === undefined
-      ? null
-      : heading(
-          blockHeadingTag('faq') ?? 'h2',
-          { class: 'cg-faq__title', 'data-field': 'title' },
-          block.title,
-        ),
+    'faq',
+    'cr-answers',
+    { 'data-titled': String(titled) },
+    'div',
+    sectionHead('faq', block.title),
     h(
       'ul',
-      { class: 'cg-faq__items' },
-      block.items.map((item, index) => renderItem(item, ctx, index)),
+      { class: 'cr-answers__items' },
+      block.items.map((item) => answerItem(item, ctx, 'faq', titled)),
     ),
   )
 }

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

@@ -1,7 +1,5 @@
 import type { FeatureGridBlock, FeatureItem } from '@cogenta/blocks'
 import {
-  blockHeadingTag,
-  type HeadingTag,
   type HtmlElement,
   h,
   heading,
@@ -10,52 +8,104 @@ import {
   type RenderContext,
   renderIcon,
 } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * A row of three centred columns, each topped by a thin circular icon mark —
- * the "how we cook" / "what makes this kitchen" convention, never a boxed
- * feature card.
+ * Two readings of the same block, chosen by its content rather than by a
+ * setting:
+ *
+ * - **A ruled table**, when no item names an icon. The items are facts a
+ *   guest looks up (lunch, dinner, the address, the metro stop; a supplier
+ *   and what they bring), so they are set like the back of a menu card: the
+ *   title of the table on the first four columns, then one row per item under
+ *   a hairline, its name in the serif on the left and its sentence on the
+ *   right. A name with a link is an arrow link.
+ * - **Ruled columns**, when an item names an icon this theme can draw: a
+ *   small line icon, the name, its sentence, each column under a hairline.
+ *   Never a tinted tile behind an icon, never a card.
  */
-function renderItem(item: FeatureItem, ctx: RenderContext, tag: HeadingTag): HtmlElement {
-  const title =
-    item.link === undefined
-      ? heading(tag, { class: 'cg-craft__title' }, item.title)
-      : heading(
-          tag,
-          { class: 'cg-craft__title' },
-          h('a', { class: 'cg-craft__link', href: href(ctx, item.link) }, item.title),
-        )
+function hasIcons(block: FeatureGridBlock): boolean {
+  return block.items.some((item) => item.icon !== undefined)
+}
+
+function name(item: FeatureItem, ctx: RenderContext, className: string): HtmlElement | string {
+  return item.link === undefined
+    ? item.title
+    : h('a', { class: `cr-arrow-link ${className}`, href: href(ctx, item.link) }, item.title)
+}
+
+/**
+ * In a table the link belongs to the value a guest acts on (the telephone
+ * number, the address), not to its label: "Telephone" is a heading, the
+ * number is what they tap. A row with no sentence links its label instead.
+ */
+function row(item: FeatureItem, ctx: RenderContext, titled: boolean): HtmlElement {
+  const label = heading(
+    nestedHeadingTag('featureGrid', titled),
+    { class: 'cr-table__label' },
+    item.text === undefined ? name(item, ctx, 'cr-table__link') : item.title,
+  )
+  if (item.text === undefined) return h('li', { class: 'cr-table__row' }, label)
+  return h(
+    'li',
+    { class: 'cr-table__row' },
+    label,
+    h(
+      'p',
+      { class: 'cr-table__text' },
+      item.link === undefined
+        ? item.text
+        : h('a', { class: 'cr-table__value-link', href: href(ctx, item.link) }, item.text),
+    ),
+  )
+}
+
+function column(item: FeatureItem, ctx: RenderContext, titled: boolean): HtmlElement {
   const icon =
     item.icon === undefined
       ? null
-      : (renderIcon(item.icon, { className: 'cg-craft__glyph' }) ??
-        h('span', { class: 'cg-craft__mark-fallback', 'data-icon': item.icon }))
+      : renderIcon(item.icon, { className: 'cr-columns__icon', size: 22 })
   return h(
     'li',
-    { class: 'cg-craft__item' },
-    icon === null ? null : h('span', { class: 'cg-craft__mark', 'aria-hidden': 'true' }, icon),
-    title,
-    item.text === undefined ? null : h('p', { class: 'cg-craft__text' }, item.text),
+    { class: 'cr-columns__item' },
+    icon,
+    heading(
+      nestedHeadingTag('featureGrid', titled),
+      { class: 'cr-columns__name' },
+      name(item, ctx, 'cr-columns__link'),
+    ),
+    item.text === undefined ? null : h('p', { class: 'cr-columns__text' }, item.text),
   )
 }
 
 export function renderFeatureGrid(block: FeatureGridBlock, ctx: RenderContext): HtmlElement {
-  const hasTitle = block.title !== undefined
-  const itemTag = nestedHeadingTag('featureGrid', hasTitle)
-  return h(
+  const titled = block.title !== undefined
+  if (!hasIcons(block)) {
+    return section(
+      'section',
+      'featureGrid',
+      'cr-table',
+      { 'data-titled': String(titled) },
+      'div',
+      sectionHead('featureGrid', block.title),
+      h(
+        'ul',
+        { class: 'cr-table__rows' },
+        block.items.map((item) => row(item, ctx, titled)),
+      ),
+    )
+  }
+  return section(
     'section',
-    { class: 'cg-craft', 'data-block': 'featureGrid' },
-    hasTitle
-      ? heading(
-          blockHeadingTag('featureGrid') ?? 'h2',
-          { class: 'cg-craft__title-heading', 'data-field': 'title' },
-          block.title ?? '',
-        )
-      : null,
+    'featureGrid',
+    'cr-columns',
+    { 'data-titled': String(titled), 'data-count': String(Math.min(block.items.length, 4)) },
+    'div',
+    sectionHead('featureGrid', block.title),
     h(
       'ul',
-      { class: 'cg-craft__items' },
-      block.items.map((item) => renderItem(item, ctx, itemTag)),
+      { class: 'cr-columns__items' },
+      block.items.map((item) => column(item, ctx, titled)),
     ),
   )
 }

package/src/render/blocks/gallery.ts

@@ -1,40 +1,58 @@
 import type { GalleryBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * Ships **no JavaScript**. `layout: 'masonry'` (the dining-room gallery this
- * theme's own blueprint seeds) is a CSS multi-column flow — `column-count`
- * with `break-inside: avoid` on each tile — which needs no measurement pass
- * a script would otherwise have to do; `grid`/`carousel` keep the same
- * zero-JS scroll-snapping list every other layout in this theme uses.
+ * Photographs of plates and of the room, in the three layouts contract B
+ * names:
+ *
+ * - `grid`: a band of dish photographs, every one cropped to the same 4:5
+ *   portrait, four across on a wide screen (three when the count divides by
+ *   three, so a row is never left with one picture), two on a phone.
+ * - `masonry`: three columns of pictures at their own proportions.
+ * - `carousel`: a row of 4:5 crops that scrolls sideways, with native scroll
+ *   snapping. It is a focusable, labelled region so the row can be scrolled
+ *   from the keyboard; no script drives it.
  */
+function columnsFor(count: number): number {
+  if (count <= 2) return count
+  return count % 3 === 0 ? 3 : 4
+}
+
 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: 48rem) 22rem, 60vw' }),
-      ),
+  const carousel = block.layout === 'carousel'
+  const columns = columnsFor(block.items.length)
+  const items = block.items.map((item) =>
+    h(
+      'li',
+      { class: 'cr-gallery__item' },
+      image(ctx, item.media, {
+        className: 'cr-gallery__image',
+        sizes:
+          block.layout === 'grid'
+            ? `(min-width: 64rem) ${Math.round(90 / Math.max(columns, 1))}vw, 50vw`
+            : '(min-width: 64rem) 30vw, 80vw',
+      }),
     ),
   )
 
-  return h(
-    'section',
-    { class: 'cg-gallery', 'data-block': 'gallery', 'data-layout': block.layout },
-    block.layout === 'carousel'
+  return section(
+    'div',
+    'gallery',
+    'cr-gallery',
+    { 'data-layout': block.layout, 'data-columns': String(columns) },
+    'div',
+    carousel
       ? h(
           'div',
           {
-            class: 'cg-gallery__viewport',
+            class: 'cr-gallery__viewport',
             role: 'region',
             'aria-label': ctx.t('gallery.carousel'),
             tabindex: '0',
           },
-          items,
+          h('ul', { class: 'cr-gallery__items' }, items),
         )
-      : items,
+      : h('ul', { class: 'cr-gallery__items' }, items),
   )
 }

package/src/render/blocks/hero.ts

@@ -1,58 +1,65 @@
 import type { HeroBlock } from '@cogenta/blocks'
-import {
-  actionList,
-  blockHeadingTag,
-  type HtmlElement,
-  h,
-  heading,
-  image,
-  type RenderContext,
-} from '@cogenta/theme-kit'
+import { actionList, type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { optionalText } from '../layout.js'
 
 /**
- * The full-bleed dining-room hero: the media (when present) fills the whole
- * band, a gradient scrim sits between it and the copy so the centred text
- * stays legible over a photo of any tone, and the eyebrow/title/subtitle are
- * centred — the "elegant restaurant homepage" convention (Divi/Astra
- * "Restaurant") rather than the left-aligned marketing hero the other
- * built-in themes use.
+ * The opening of a page: the photograph of the room across the whole width
+ * of the window, then the name of the place set large and light in the
+ * display serif, on the page's own ground.
  *
- * The scrim is a CSS gradient composed from `--cg-scrim` (itself derived
- * from the skin's own ink, see `tokens.css`), never a literal colour: a
- * skin with a lighter ink still gets a scrim tuned to it.
+ * The words sit under the picture, never on it. A headline laid over a
+ * photograph needs a veil to stay legible on every picture an editor may
+ * choose, and a veil over a dining room is exactly what makes it look like
+ * every other restaurant template; set on the paper, the name is legible in
+ * both schemes whatever the photograph, and the room stays as it was lit.
+ *
+ * Name on the first eight columns, its baseline shared with the subtitle and
+ * the action on the last four. An eyebrow, when there is one, is a line of
+ * small capitals above the name, never a badge. Without media the block is
+ * the name row alone.
+ *
+ * The image is the only one on a page loaded eagerly: it is above the fold
+ * by construction.
  */
 export function renderHero(block: HeroBlock, ctx: RenderContext): HtmlElement {
-  const tag = blockHeadingTag('hero') ?? 'h1'
+  const actions = actionList(ctx, block.actions, ctx.t('hero.actions'))
+  const hasAside = block.subtitle !== undefined || actions !== null
+
   return h(
     'section',
     {
-      class: 'cg-hero',
+      class: 'cr-section cr-hero',
       'data-block': 'hero',
-      'data-has-media': block.media === undefined ? 'false' : 'true',
+      'data-media': block.media === undefined ? 'false' : 'true',
     },
     block.media === undefined
       ? null
       : h(
-          'div',
-          { class: 'cg-hero__media' },
+          'figure',
+          { class: 'cr-hero__media' },
           image(ctx, block.media, {
-            className: 'cg-hero__image',
+            className: 'cr-hero__image',
             loading: 'eager',
             sizes: '100vw',
           }),
-          h('div', { class: 'cg-hero__scrim', 'aria-hidden': 'true' }),
         ),
     h(
       'div',
-      { class: 'cg-hero__body' },
-      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')),
+      { class: 'cr-container cr-hero__inner' },
+      h(
+        'div',
+        { class: 'cr-hero__heading' },
+        optionalText('p', 'cr-hero__eyebrow', block.eyebrow, { 'data-field': 'eyebrow' }),
+        h('h1', { class: 'cr-hero__title', 'data-field': 'title' }, block.title),
+      ),
+      hasAside
+        ? h(
+            'div',
+            { class: 'cr-hero__aside' },
+            optionalText('p', 'cr-hero__subtitle', block.subtitle, { 'data-field': 'subtitle' }),
+            actions,
+          )
+        : null,
     ),
   )
 }

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

@@ -1,35 +1,37 @@
-import type { LogoStripBlock, LogoStripItem } from '@cogenta/blocks'
+import type { LogoStripBlock } 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 seen in" row next to
- * `logos`: no per-logo name or link, so no accessible-name field to
- * require — each image's own alt text (set once, in the media library)
- * names it, exactly as `logos` falls back to when a link is absent.
+ * The lighter row of marks: the caption at the caption size on the first
+ * three columns, the marks spread along one line across the rest, small and
+ * evenly spaced. No links, by contract B; each mark is named by its own alt
+ * text from the media library.
  */
-function renderItem(item: LogoStripItem, ctx: RenderContext): HtmlElement {
-  return h(
-    'li',
-    { class: 'cg-press-strip__item' },
-    image(ctx, item.media, { className: 'cg-press-strip__image', variant: { fit: 'contain' } }),
-  )
-}
-
 export function renderLogoStrip(block: LogoStripBlock, ctx: RenderContext): HtmlElement {
-  return h(
-    'figure',
-    { class: 'cg-press-strip', 'data-block': 'logoStrip' },
-    h(
-      'ul',
-      { class: 'cg-press-strip__items' },
-      block.logos.map((item) => renderItem(item, ctx)),
-    ),
+  return section(
+    'div',
+    'logoStrip',
+    'cr-strip',
+    { 'data-captioned': String(block.caption !== undefined) },
+    'div',
     block.caption === undefined
       ? null
-      : h(
-          'figcaption',
-          { class: 'cg-press-strip__caption', 'data-field': 'caption' },
-          block.caption,
+      : h('p', { class: 'cr-strip__caption', 'data-field': 'caption' }, block.caption),
+    h(
+      'ul',
+      { class: 'cr-strip__items' },
+      block.logos.map((logo) =>
+        h(
+          'li',
+          { class: 'cr-strip__item' },
+          h(
+            'span',
+            { class: 'cr-marks__plate' },
+            image(ctx, logo.media, { className: 'cr-marks__image', sizes: '10rem' }),
+          ),
         ),
+      ),
+    ),
   )
 }

package/src/render/blocks/logos.ts

@@ -1,53 +1,44 @@
-import type { LogoItem, LogosBlock } from '@cogenta/blocks'
-import {
-  blockHeadingTag,
-  type HtmlElement,
-  h,
-  heading,
-  image,
-  type RenderContext,
-} from '@cogenta/theme-kit'
+import type { LogosBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * "Featured in" / press mentions, held back to a quiet grayscale until
- * hovered — 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.
+ * Guides, publications, the growers' cooperative: their marks along one
+ * ruled row, each set small and in its own colours. A mark drawn for paper
+ * sits on a pale plate in the dark scheme so it never disappears.
+ *
+ * The organisation's name is the mark's accessible name when the media
+ * library has no alt text for it, and the link's own name when it links out.
  */
-function renderItem(item: LogoItem, ctx: RenderContext): HtmlElement {
-  const logo = image(ctx, item.media, {
-    className: 'cg-press__logo',
-    altFrom: item.name,
-    variant: { fit: 'contain' },
-  })
-  return h(
-    'li',
-    { class: 'cg-press__item' },
-    item.url === undefined
-      ? logo
-      : h(
-          'a',
-          { class: 'cg-press__link', href: ctx.link(item.url), rel: 'noopener noreferrer' },
-          logo,
-        ),
-  )
-}
-
 export function renderLogos(block: LogosBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
     'section',
-    { class: 'cg-press', 'data-block': 'logos' },
-    block.title === undefined
-      ? null
-      : heading(
-          blockHeadingTag('logos') ?? 'h2',
-          { class: 'cg-press__title', 'data-field': 'title' },
-          block.title,
-        ),
+    'logos',
+    'cr-marks',
+    {},
+    'div',
+    sectionHead('logos', block.title),
     h(
       'ul',
-      { class: 'cg-press__items' },
-      block.items.map((item) => renderItem(item, ctx)),
+      { class: 'cr-marks__items' },
+      block.items.map((item) => {
+        const mark = image(ctx, item.media, {
+          className: 'cr-marks__image',
+          altFrom: item.name,
+          sizes: '10rem',
+        })
+        return h(
+          'li',
+          { class: 'cr-marks__item' },
+          item.url === undefined
+            ? h('span', { class: 'cr-marks__plate' }, mark)
+            : h(
+                'a',
+                { class: 'cr-marks__plate', href: item.url, rel: 'noopener noreferrer' },
+                mark,
+              ),
+        )
+      }),
     ),
   )
 }

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

@@ -1,39 +1,64 @@
 import type { MediaFigureBlock } from '@cogenta/blocks'
 import { aspectRatio, type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * A thin hairline frame around the image, a small italic caption beneath —
- * the restrained, "printed menu insert" treatment consistent with this
- * theme's gallery and embed placeholder.
+ * A photograph and its caption.
+ *
+ * `align` is an editorial intent, read as a layout:
+ *
+ * - `start` / `end`: the room-and-story split. The photograph takes seven
+ *   columns on its side and the caption, set in the serif italic at the lead
+ *   size, takes the other four, so a caption reads as a line from the house
+ *   beside the picture.
+ * - `center`: eight columns, set in from the left edge.
+ * - `wide` (and no value): the whole container.
+ * - `full`: the whole window, edge to edge.
+ *
+ * The ratio crops from the middle, or from the media's own focal point; the
+ * corners stay square and the picture casts no shadow.
  */
 export function renderMediaFigure(block: MediaFigureBlock, ctx: RenderContext): HtmlElement {
+  const align = block.align ?? 'wide'
+  const split = align === 'start' || align === 'end'
   const ratio = aspectRatio(block.ratio)
-  const hasCaption = block.caption !== undefined || block.credit !== undefined
-  return h(
+
+  const caption =
+    block.caption === undefined && block.credit === undefined
+      ? null
+      : h(
+          'figcaption',
+          { class: 'cr-figure__caption' },
+          block.caption === undefined
+            ? null
+            : h('span', { class: 'cr-figure__text', 'data-field': 'caption' }, block.caption),
+          block.credit === undefined
+            ? null
+            : h('span', { class: 'cr-figure__credit', 'data-field': 'credit' }, block.credit),
+        )
+
+  return section(
+    'div',
+    'mediaFigure',
+    'cr-figure',
+    { 'data-align': align, 'data-layout': split ? 'split' : 'single' },
     'figure',
-    {
-      class: 'cg-plate',
-      'data-block': 'mediaFigure',
-      'data-align': block.align ?? 'center',
-      style: ratio === undefined ? undefined : `--cg-ratio:${ratio}`,
-    },
     h(
       'div',
-      { class: 'cg-plate__frame' },
+      {
+        class: 'cr-figure__frame',
+        style: ratio === undefined ? undefined : `aspect-ratio:${ratio}`,
+      },
       image(ctx, block.media, {
-        className: 'cg-plate__media',
-        sizes: '(min-width: 48rem) 42rem, 100vw',
+        className: 'cr-figure__image',
+        sizes:
+          align === 'full'
+            ? '100vw'
+            : split
+              ? '(min-width: 64rem) 55vw, 100vw'
+              : '(min-width: 90rem) 86rem, 100vw',
       }),
     ),
-    hasCaption
-      ? h(
-          'figcaption',
-          { class: 'cg-plate__caption' },
-          block.caption,
-          block.credit === undefined
-            ? null
-            : h('span', { class: 'cg-plate__credit', 'data-field': 'credit' }, block.credit),
-        )
-      : null,
+    caption,
   )
 }