@cogenta/theme-restaurant 0.3.2 → 0.5.3

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

@@ -1,74 +1,62 @@
 import type { PricingTableBlock, PricingTier } from '@cogenta/blocks'
 import {
   actionLink,
-  blockHeadingTag,
-  type HeadingTag,
   type HtmlElement,
   h,
   heading,
   nestedHeadingTag,
   type RenderContext,
 } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * `blocks@2.0` (RFC 0001). Rendered as a set-menu comparison — a "tasting
- * menu" / "prix fixe" tier is the shape this block already has (a name, a
- * price, a feature list), so this theme reuses the same restrained bordered
- * plates the rest of the vocabulary uses rather than a distinct pricing
- * skin. `highlighted` becomes a small "chef's pick" rule rather than a
- * colour.
+ * Set menus side by side (lunch, the evening menu, a menu for a private
+ * party), set the way a menu card prints them: ruled columns rather than
+ * cards, the name of the menu in small capitals, the price light and large in
+ * the display serif with tabular figures and what it covers ("per guest")
+ * under it, then the courses one per line between hairlines, and the action
+ * at the foot.
+ *
+ * `highlighted` is an editorial emphasis, drawn as the column's top rule in
+ * ink instead of a hairline. No ribbon, no raised card, no accent fill.
  */
-function renderTier(tier: PricingTier, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+function tier(item: PricingTier, ctx: RenderContext, titled: boolean): HtmlElement {
   return h(
     'li',
-    {
-      class: 'cg-set-menu__tier',
-      'data-highlighted': tier.highlighted === true ? 'true' : undefined,
-      'aria-current': tier.highlighted === true ? 'true' : undefined,
-    },
-    heading(tag, { class: 'cg-set-menu__name' }, tier.name),
+    { class: 'cr-set__tier', 'data-highlighted': item.highlighted === true ? 'true' : 'false' },
+    heading(nestedHeadingTag('pricingTable', titled), { class: 'cr-set__name' }, item.name),
     h(
       'p',
-      { class: 'cg-set-menu__price' },
-      h('span', { class: 'cg-set-menu__amount' }, tier.price),
-      tier.interval === undefined
-        ? null
-        : h('span', { class: 'cg-set-menu__interval' }, tier.interval),
+      { class: 'cr-set__price' },
+      h('span', { class: 'cr-set__amount' }, item.price),
+      item.interval === undefined ? null : h('span', { class: 'cr-set__interval' }, item.interval),
     ),
-    tier.features.length === 0
+    item.features.length === 0
       ? null
       : h(
           'ul',
-          { class: 'cg-set-menu__features' },
-          tier.features.map((feature) => h('li', { class: 'cg-set-menu__feature' }, feature)),
+          { class: 'cr-set__courses' },
+          item.features.map((feature) => h('li', { class: 'cr-set__course' }, feature)),
         ),
-    tier.action === undefined
+    item.action === undefined
       ? null
-      : h(
-          'div',
-          { class: 'cg-set-menu__action' },
-          actionLink(ctx, { ...tier.action, emphasis: tier.action.emphasis ?? 'primary' }),
-        ),
+      : h('div', { class: 'cr-set__action' }, actionLink(ctx, item.action)),
   )
 }
 
 export function renderPricingTable(block: PricingTableBlock, ctx: RenderContext): HtmlElement {
-  const hasTitle = block.title !== undefined
-  const tierTag = nestedHeadingTag('pricingTable', hasTitle)
-  return h(
+  const titled = block.title !== undefined
+  return section(
     'section',
-    { class: 'cg-set-menu', 'data-block': 'pricingTable' },
-    hasTitle
-      ? heading(
-          blockHeadingTag('pricingTable') ?? 'h2',
-          { class: 'cg-set-menu__title', 'data-field': 'title' },
-          block.title ?? '',
-        )
-      : null,
+    'pricingTable',
+    'cr-set',
+    { 'data-count': String(Math.min(block.tiers.length, 4)) },
+    'div',
+    sectionHead('pricingTable', block.title),
     h(
       'ul',
-      { class: 'cg-set-menu__tiers' },
-      block.tiers.map((tier) => renderTier(tier, ctx, tierTag)),
+      { class: 'cr-set__tiers' },
+      block.tiers.map((item) => tier(item, ctx, titled)),
     ),
   )
 }

package/src/render/blocks/prose.ts

@@ -1,19 +1,28 @@
 import type { ProseBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, type RenderContext, renderRichText } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * "Our story" — a short, centred, narrow column (`--cg-measure-narrow` in
- * `tokens.css`), the quiet editorial interlude every one of the reference
- * templates (Divi/Astra "Restaurant") places between the hero and the menu.
+ * Running text: the kitchen's story, how to book, a legal notice.
  *
- * `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`.
+ * `prose` declares `headingLevel: 'none'`, so it adds no heading of its own;
+ * the rich text's own headings start at `h2`. The column starts at the third
+ * of twelve and holds a reading measure of about sixty-four characters, so a
+ * page title set at the first column and the text under it make one
+ * asymmetric line rather than a centred column.
+ *
+ * One exception, asked for by the editor rather than guessed: a prose block
+ * whose `align` variant is `center` is a welcome, a few sentences set large
+ * in the display serif and centred under the opening photograph, the way a
+ * menu card opens with a line from the house.
  */
 export function renderProse(block: ProseBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
+    'div',
+    'prose',
+    'cr-prose',
+    {},
     'div',
-    { class: 'cg-story', 'data-block': 'prose' },
-    h('div', { class: 'cg-story__body' }, renderRichText(ctx, block.body)),
+    h('div', { class: 'cr-prose__body' }, renderRichText(ctx, block.body)),
   )
 }

package/src/render/blocks/quote.ts

@@ -1,38 +1,48 @@
 import type { QuoteBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * A single centred line, set in the display serif — the "menu insert"
- * pull-quote, distinct from `testimonial`'s guestbook card.
+ * A line from the press, set the way a newspaper sets a pull quote rather
+ * than the way a template sets a review card: the words large and light in
+ * the display serif across nine columns from the second, with real quotation
+ * marks hung in the margin by the stylesheet; the writer's name and the
+ * publication small beneath, after a short hairline. A portrait, when there
+ * is one, is a small square beside the name, never a circle above the words.
  */
 export function renderQuote(block: QuoteBlock, ctx: RenderContext): HtmlElement {
-  const hasAttribution =
-    block.author !== undefined || block.role !== undefined || block.avatar !== undefined
-  return h(
-    'figure',
-    { class: 'cg-line', 'data-block': 'quote' },
-    h('blockquote', { class: 'cg-line__text' }, h('p', { 'data-field': 'text' }, block.text)),
-    hasAttribution
-      ? h(
+  const who =
+    block.author === undefined && block.role === undefined
+      ? null
+      : h(
           'figcaption',
-          { class: 'cg-line__attribution' },
+          { class: 'cr-quote__attribution' },
           block.avatar === undefined
             ? null
-            : image(ctx, block.avatar, {
-                className: 'cg-line__avatar',
-                variant: { width: 72, height: 72, fit: 'cover' },
-              }),
+            : image(ctx, block.avatar, { className: 'cr-quote__avatar', sizes: '3rem' }),
           h(
             'span',
-            { class: 'cg-line__who' },
+            { class: 'cr-quote__who' },
             block.author === undefined
               ? null
-              : h('span', { class: 'cg-line__author', 'data-field': 'author' }, block.author),
+              : h('span', { class: 'cr-quote__author', 'data-field': 'author' }, block.author),
             block.role === undefined
               ? null
-              : h('span', { class: 'cg-line__role', 'data-field': 'role' }, block.role),
+              : h('span', { class: 'cr-quote__role', 'data-field': 'role' }, block.role),
           ),
         )
-      : null,
+
+  return section(
+    'div',
+    'quote',
+    'cr-quote',
+    {},
+    'figure',
+    h(
+      'blockquote',
+      { class: 'cr-quote__quote' },
+      h('p', { class: 'cr-quote__text', 'data-field': 'text' }, block.text),
+    ),
+    who,
   )
 }

package/src/render/blocks/stat-counter.ts

@@ -1,37 +1,32 @@
-import type { StatCounterBlock, StatCounterItem } from '@cogenta/blocks'
-import {
-  blockHeadingTag,
-  type HtmlElement,
-  h,
-  heading,
-  type RenderContext,
-} from '@cogenta/theme-kit'
+import type { StatCounterBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, type RenderContext } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * `blocks@2.0` (RFC 0001). Narrower than `stats` (no `unit`) — rendered the
- * same restrained "figures row" way as `stats`, one accent hairline apart:
- * this theme has no boastful, boxed "impact numbers" register to reach for.
+ * The narrower sibling of `stats` (a value and a label, no unit), drawn in
+ * the same register: figures in the display serif under one hairline.
+ * Nothing counts up; a number that animates into place is a number a guest
+ * has to wait for.
  */
-function renderItem(item: StatCounterItem): HtmlElement {
-  return h(
-    'div',
-    { class: 'cg-tally' },
-    h('dd', { class: 'cg-tally__value' }, item.value),
-    h('dt', { class: 'cg-tally__label' }, item.label),
-  )
-}
-
 export function renderStatCounter(block: StatCounterBlock, _ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
     'section',
-    { class: 'cg-tallies', 'data-block': 'statCounter' },
-    block.title === undefined
-      ? null
-      : heading(
-          blockHeadingTag('statCounter') ?? 'h2',
-          { class: 'cg-tallies__title', 'data-field': 'title' },
-          block.title,
+    'statCounter',
+    'cr-figures',
+    { 'data-count': String(Math.min(block.stats.length, 4)) },
+    'div',
+    sectionHead('statCounter', block.title),
+    h(
+      'dl',
+      { class: 'cr-figures__items' },
+      block.stats.map((stat) =>
+        h(
+          'div',
+          { class: 'cr-figures__item' },
+          h('dt', { class: 'cr-figures__label' }, stat.label),
+          h('dd', { class: 'cr-figures__value' }, stat.value),
         ),
-    h('dl', { class: 'cg-tallies__items' }, block.stats.map(renderItem)),
+      ),
+    ),
   )
 }

package/src/render/blocks/stats.ts

@@ -1,48 +1,38 @@
-import type { StatItem, StatsBlock } from '@cogenta/blocks'
-import {
-  blockHeadingTag,
-  type HtmlElement,
-  h,
-  heading,
-  type RenderContext,
-} from '@cogenta/theme-kit'
+import type { StatsBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, type RenderContext } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * "Since 1994 · 3 chefs · 120 seats" — a quiet row of figures set in the
- * display serif, separated by hairline rules rather than boxed into cards:
- * the restrained, editorial register this theme uses everywhere a fact is
- * stated rather than sold.
- *
- * A description list, as every built-in theme uses for `stats`: each figure
- * is the description of its label, which is what `<dt>`/`<dd>` mean, and it
- * survives being read linearly (WCAG 1.3.2 — reading order and visual order
- * stay independent regardless of how the skin repaints them).
+ * Figures a kitchen can stand behind (covers a night, farms it buys from, the
+ * year it opened), set as a row of columns under one hairline: the number
+ * (the `dd`, drawn above its label) light and large in the display serif with
+ * lining tabular figures, its unit a step smaller, and a sentence of context
+ * under it. No box, no tint, no counter animation.
  */
-function renderItem(item: StatItem): HtmlElement {
-  return h(
-    'div',
-    { class: 'cg-figures__item' },
-    h(
-      'dd',
-      { class: 'cg-figures__value' },
-      item.value,
-      item.unit === undefined ? null : h('span', { class: 'cg-figures__unit' }, item.unit),
-    ),
-    h('dt', { class: 'cg-figures__label' }, item.label),
-  )
-}
-
 export function renderStats(block: StatsBlock, _ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
     'section',
-    { class: 'cg-figures', 'data-block': 'stats' },
-    block.title === undefined
-      ? null
-      : heading(
-          blockHeadingTag('stats') ?? 'h2',
-          { class: 'cg-figures__title', 'data-field': 'title' },
-          block.title,
+    'stats',
+    'cr-figures',
+    { 'data-count': String(Math.min(block.items.length, 4)) },
+    'div',
+    sectionHead('stats', block.title),
+    h(
+      'dl',
+      { class: 'cr-figures__items' },
+      block.items.map((item) =>
+        h(
+          'div',
+          { class: 'cr-figures__item' },
+          h('dt', { class: 'cr-figures__label' }, item.label),
+          h(
+            'dd',
+            { class: 'cr-figures__value' },
+            item.value,
+            item.unit === undefined ? null : h('span', { class: 'cr-figures__unit' }, item.unit),
+          ),
         ),
-    h('dl', { class: 'cg-figures__items' }, block.items.map(renderItem)),
+      ),
+    ),
   )
 }

package/src/render/blocks/testimonial.ts

@@ -1,41 +1,36 @@
 import type { TestimonialBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext, renderRichText } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * A centred, oversized quotation mark stands above the quote (a CSS
- * pseudo-glyph, not markup) — the guestbook-page treatment this theme's
- * elegance calls for, rather than a bordered "client success" card.
- *
- * `<figure><blockquote>…</blockquote><figcaption>` is the attribution
- * pattern the HTML spec prescribes: putting the author inside the
- * `<blockquote>` would claim the author's name was part of what was said.
- *
- * The avatar is decorative — the name sits right beside it in text — so its
- * media entity's alt text is expected to be empty; `image` still writes the
- * attribute either way (WCAG 1.1.1).
+ * A guest's own words, set like a note left in the book by the door: the text
+ * in the serif italic at the lead size on seven columns from the fourth, the
+ * name and the occasion beneath it at the caption size. Smaller and quieter
+ * than a press quote, on purpose. The layout does not depend on a portrait;
+ * when one is there it is a small square beside the name.
  */
 export function renderTestimonial(block: TestimonialBlock, ctx: RenderContext): HtmlElement {
   const { attribution } = block
-  return h(
+  return section(
+    'div',
+    'testimonial',
+    'cr-note',
+    {},
     'figure',
-    { class: 'cg-testimonial', 'data-block': 'testimonial' },
-    h('blockquote', { class: 'cg-testimonial__quote' }, renderRichText(ctx, block.quote)),
+    h('blockquote', { class: 'cr-note__quote' }, renderRichText(ctx, block.quote)),
     h(
       'figcaption',
-      { class: 'cg-testimonial__attribution' },
+      { class: 'cr-note__attribution' },
       attribution.avatar === undefined
         ? null
-        : image(ctx, attribution.avatar, {
-            className: 'cg-testimonial__avatar',
-            variant: { width: 88, height: 88, fit: 'cover' },
-          }),
+        : image(ctx, attribution.avatar, { className: 'cr-note__avatar', sizes: '3.5rem' }),
       h(
         'span',
-        { class: 'cg-testimonial__who' },
-        h('span', { class: 'cg-testimonial__name' }, attribution.name),
+        { class: 'cr-note__who' },
+        h('span', { class: 'cr-note__name' }, attribution.name),
         attribution.role === undefined
           ? null
-          : h('span', { class: 'cg-testimonial__role' }, attribution.role),
+          : h('span', { class: 'cr-note__role' }, attribution.role),
       ),
     ),
   )