@cogenta/theme-restaurant 0.3.2 → 0.5.3

package/src/render/chrome.ts

@@ -5,136 +5,154 @@ import {
   escapeAttribute,
   escapeText,
   renderBrandMark,
+  renderFooterWidgets,
   renderSocialLinks,
   renderThemeToggle,
   serialize,
 } from '@cogenta/theme-kit'
 
 /**
- * This theme's own header and footer, built for `theme@1.4` from the start
- * rather than retrofitted: `headerAction` renders as a button beside the
- * primary nav, `tagline`/`social`/`footerNote` fill the footer's brand
- * column, and — the one thing none of the four L23 themes had yet — a
- * genuinely CSS-only mobile menu.
+ * The restaurant's header and footer (`theme@1.4`).
  *
- * The mobile menu is a `<details>`/`<summary>` disclosure, not a checkbox
- * hack: expanding, keyboard operation (`Enter`/`Space` on the `<summary>`)
- * and the open/closed state announced to assistive technology all come from
- * the browser, at zero bytes of JavaScript. It carries the *same* links as
- * the desktop nav plus the header action — never a second, drifting list —
- * and is shown only below the breakpoint `base.css` sets for `.cg-nav`.
+ * Header: one quiet row on the grid, under a hairline. The restaurant's name
+ * on the left in the display serif (or its uploaded logo), the pages in words
+ * at the text size, then the `headerAction` ("Reserve") as the one underlined
+ * link after a hairline, and the light/dark control. The action sits outside
+ * the navigation list on purpose: on a phone it stays in the header row
+ * beside the menu toggle, because booking a table is what most visitors came
+ * to do.
  *
- * The manual light/dark toggle (L26) sits right after the desktop nav, before
- * the header action — `renderThemeToggle` (`@cogenta/theme-kit`) returns
- * markup only, this theme styles `.cg-theme-toggle` itself in `base.css`. It
- * is unconditional (rendered on every page, `theme@1.4` fields or not),
- * unlike the header/footer additions above it.
+ * Below the wide breakpoint the pages become a panel of large serif links
+ * under the header, opened by a CSS-only toggle: a visually hidden checkbox
+ * paired with a `<label>`, placed before the `<nav>` so the sibling
+ * combinator reaches it. One `<nav>` in the markup, retiled by CSS. Under
+ * the links the open panel repeats the `footerNote` (the address card), which
+ * the stylesheet shows in the panel only.
+ *
+ * Footer: a charcoal band. The name and the `tagline`; the `footerNote` set as
+ * the restaurant's address card (a blank line starts a new paragraph, a line
+ * break stays a line break, so an address and a set of opening hours keep
+ * their shape); the footer navigation; the social profiles with their names;
+ * the footer widget columns (`theme@1.6`), when a site has placed any, as a
+ * second tier under a hairline; then the legal line, with the copyright year and the name beside the host's
+ * `brandingHtml`, placed once, as received. Every `theme@1.4` field renders
+ * only when present.
  */
 
-function navItems(links: readonly ChromeNavLink[]): string {
+function navItems(links: readonly ChromeNavLink[], className: string): string {
   return links
     .filter((link) => link.href !== null || link.kind === 'submenu-placeholder')
     .map((link) => {
       const label = escapeText(link.label)
       const titleAttr = link.title === null ? '' : ` title="${escapeAttribute(link.title)}"`
-      if (link.href === null) return `<li><span${titleAttr}>${label}</span></li>`
-      const href = escapeAttribute(link.href)
+      if (link.href === null) {
+        return `<li class="${className}"><span${titleAttr}>${label}</span></li>`
+      }
       const target = link.openInNewTab ? ' target="_blank" rel="noopener"' : ''
-      return `<li><a href="${href}"${target}${titleAttr}>${label}</a></li>`
+      return `<li class="${className}"><a href="${escapeAttribute(link.href)}"${target}${titleAttr}>${label}</a></li>`
     })
     .join('')
 }
 
-/** Three bars, drawn directly rather than pulled from an icon font (R9/R10) — the universal "menu" glyph. */
-const HAMBURGER_GLYPH =
-  '<svg class="cg-mobile-nav__glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" ' +
-  'stroke-width="1.5" stroke-linecap="round" aria-hidden="true" focusable="false">' +
-  '<path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg>'
-
-/** The header's own call-to-action link (`theme@1.4`), styled like the block vocabulary's own primary action. */
-function renderHeaderAction(action: ChromeInput['headerAction']): string {
-  if (action === undefined) return ''
-  return (
-    `<a class="cg-action cg-nav__cta" data-emphasis="primary" ` +
-    `href="${escapeAttribute(action.href)}">${escapeText(action.label)}</a>`
-  )
-}
-
-/**
- * The mobile drawer — the same nav links and header action as the desktop
- * header, in one `<details>` disclosure. Absent entirely when there is
- * nothing to show, exactly like the desktop `<nav>` above it.
- */
-function renderMobileNav(input: ChromeInput): string {
-  const items = navItems(input.headerNav)
-  const actionItem =
-    input.headerAction === undefined ? '' : `<li>${renderHeaderAction(input.headerAction)}</li>`
-  if (items === '' && actionItem === '') return ''
-  return (
-    `<details class="cg-mobile-nav">` +
-    `<summary class="cg-mobile-nav__toggle" aria-label="Menu">${HAMBURGER_GLYPH}</summary>` +
-    `<div class="cg-mobile-nav__panel"><ul class="cg-mobile-nav__items">${items}${actionItem}</ul></div>` +
-    `</details>`
-  )
+/** `footerNote` as paragraphs at blank lines, each keeping its own line breaks. */
+function renderFooterNote(note: string, className: string): string {
+  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 ''
+  return `<div class="${className}">${paragraphs
+    .map((lines) => `<p>${lines.map((line) => escapeText(line)).join('<br>')}</p>`)
+    .join('')}</div>`
 }
 
 export function renderChrome(input: ChromeInput): ChromeResult {
-  const siteNameText = escapeText(input.site.name)
-  const headerNav = navItems(input.headerNav)
-  const footerNav = navItems(input.footerNav)
-  // The uploaded logo replaces the wordmark, and only the wordmark: the
-  // footer keeps the site's name in text, so a site whose logo fails to
-  // load is still named somewhere on every page.
-  const mark = renderBrandMark(input.brand, { className: 'cg-site-header__logo' }) ?? siteNameText
-  const themeToggle = serialize(renderThemeToggle(input.locale, { className: 'cg-theme-toggle' }))
-  const headerAction = renderHeaderAction(input.headerAction)
-  const mobileNav = renderMobileNav(input)
+  const siteName = escapeText(input.site.name)
+  const home = escapeAttribute(input.homeHref)
+  const links = navItems(input.headerNav, 'cr-header__item')
+  const action =
+    input.headerAction === undefined
+      ? ''
+      : `<a class="cr-header__action" href="${escapeAttribute(input.headerAction.href)}">${escapeText(
+          input.headerAction.label,
+        )}</a>`
+  const toggle = serialize(renderThemeToggle(input.locale, { className: 'cg-theme-toggle' }))
+  const logo = renderBrandMark(input.brand, { className: 'cr-header__logo' })
+  const mark = logo ?? `<span class="cr-header__wordmark">${siteName}</span>`
+
+  // On a phone the open panel also carries the address card, because the
+  // address and the hours are what a guest on the street opens the menu for.
+  // It is the footer's own note, shown only in the panel.
+  const panelCard =
+    input.footerNote === undefined ? '' : renderFooterNote(input.footerNote, 'cr-header__card')
+
+  const menu =
+    links === ''
+      ? ''
+      : `<input type="checkbox" id="cr-nav-toggle" class="cr-nav-toggle-input" aria-label="Navigation">` +
+        `<label for="cr-nav-toggle" class="cr-nav-toggle-label" aria-hidden="true">` +
+        `<span class="cr-nav-toggle-bar"></span><span class="cr-nav-toggle-bar"></span>` +
+        `</label>` +
+        `<nav class="cr-header__nav" id="cr-nav" aria-label="Primary">` +
+        `<ul class="cr-header__links">${links}</ul>` +
+        `${panelCard}` +
+        `</nav>`
 
   const header =
-    `<header class="cg-site-header"><div class="cg-site-header__inner">` +
-    `<a class="cg-site-header__home" href="${escapeAttribute(input.homeHref)}">${mark}</a>` +
-    `${
-      headerNav === ''
-        ? ''
-        : `<nav class="cg-nav" aria-label="Primary"><ul class="cg-nav__items">${headerNav}</ul></nav>`
-    }` +
-    `${themeToggle}` +
-    `${headerAction}` +
-    `${mobileNav}` +
+    `<header class="cr-header" data-nav="${links === '' ? 'none' : 'links'}" data-action="${
+      action === '' ? 'none' : 'link'
+    }">` +
+    `<div class="cr-header__inner">` +
+    `<a class="cr-header__brand" href="${home}">${mark}</a>` +
+    `${menu}` +
+    `${action}` +
+    `${toggle}` +
     `</div></header>`
 
   const tagline =
     input.tagline === undefined
       ? ''
-      : `<p class="cg-site-footer__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>`
+      : `<p class="cr-footer__tagline" data-field="tagline">${escapeText(input.tagline)}</p>`
+  const note =
+    input.footerNote === undefined ? '' : renderFooterNote(input.footerNote, 'cr-footer__note')
+  const footerLinks = navItems(input.footerNav, 'cr-footer__item')
+  const social = renderSocialLinks(input.social, {
+    className: 'cr-footer__social',
+    itemClassName: 'cr-footer__social-item',
+  })
+  const year = new Date().getFullYear()
+  // The footer widget columns (`theme@1.6`): a row of their own under the
+  // name, the address card, the pages and the profiles, above the legal
+  // line, on the footer's own twelve columns.
+  const footerWidgets = renderFooterWidgets(input.widgets, {
+    className: 'cr-footer__widgets',
+    headingLevel: 'h2',
+  })
 
   const footer =
-    `<footer class="cg-site-footer"><div class="cg-site-footer__grid">` +
-    `<div class="cg-site-footer__brand">` +
-    `<a class="cg-site-footer__brand-name" href="${escapeAttribute(input.homeHref)}">${siteNameText}</a>` +
-    `${tagline}${social}</div>` +
+    `<footer class="cr-footer"><div class="cr-footer__inner">` +
+    `<div class="cr-footer__about">` +
+    `<a class="cr-footer__name" href="${home}">${siteName}</a>` +
+    `${tagline}` +
+    `</div>` +
+    `${note}` +
     `${
-      footerNav === ''
+      footerLinks === ''
         ? ''
-        : `<nav class="cg-site-footer__nav" aria-label="Footer"><ul class="cg-nav__items">${footerNav}</ul></nav>`
+        : `<nav class="cr-footer__nav" aria-label="Footer"><ul class="cr-footer__links">${footerLinks}</ul></nav>`
     }` +
-    `<div class="cg-site-footer__about">${footerNote}</div>` +
-    `</div><div class="cg-site-footer__bottom">` +
-    `<span>${siteNameText}</span>` +
-    `<div class="cg-site-footer__branding">${input.brandingHtml}</div>` +
+    `${social === null ? '' : `<div class="cr-footer__follow">${serialize(social)}</div>`}` +
+    `${footerWidgets === null ? '' : serialize(footerWidgets)}` +
+    `<div class="cr-footer__legal">` +
+    `<p class="cr-footer__copyright">© ${year} ${siteName}</p>` +
+    `${input.brandingHtml === '' ? '' : `<div class="cr-footer__branding">${input.brandingHtml}</div>`}` +
+    `</div>` +
     `</div></footer>`
 
   return { header, footer }

package/src/render/dish.ts

@@ -0,0 +1,195 @@
+import {
+  type HtmlElement,
+  h,
+  type PageContent,
+  type PageEntryFieldValue,
+  type PageEntryMeta,
+  type RenderContext,
+  renderImageSource,
+} from '@cogenta/theme-kit'
+import {
+  currencyOf,
+  DETAIL_FIELDS,
+  formatPrice,
+  isVegetarian,
+  priceOf,
+  sectionOf,
+  textOf,
+} from './menu.js'
+import { menuString } from './strings.js'
+
+/**
+ * The page of one dish, and the plain title every other page gets.
+ *
+ * A dish page (an entry whose `theme@1.5` fields carry a numeric `price`)
+ * opens on two columns of the grid, the way a waiter would describe a plate:
+ *
+ * - the photograph, on the first six columns, cropped to 4:5 like every dish
+ *   photograph on the site;
+ * - on the last five, the part of the menu it belongs to in small capitals,
+ *   the name in the display serif, the short description in italic, the
+ *   price in tabular figures on a hairline, and then its details (where it
+ *   comes from, what to drink with it, the allergens) as a ruled list.
+ *
+ * A dish without a photograph keeps the same words on the first seven
+ * columns, so a glass of wine does not open on an empty frame.
+ *
+ * There is nothing to order on this page, and nothing pretends there is: a
+ * restaurant takes a table, not a dish, and the way to book lives on the
+ * site's own reservations page, linked from the header on every page.
+ */
+
+type Fields = Readonly<Record<string, PageEntryFieldValue>>
+
+export function isDishPage(entry: PageEntryMeta | undefined): entry is PageEntryMeta {
+  return entry !== undefined && priceOf(entry.fields?.price) !== undefined
+}
+
+function details(fields: Fields, locale: string): HtmlElement | null {
+  const rows = DETAIL_FIELDS.flatMap((name) => {
+    const value = textOf(fields[name])
+    if (value === undefined) return []
+    return [
+      h(
+        'div',
+        { class: 'cr-dish__fact', 'data-fact': name },
+        h('dt', { class: 'cr-dish__fact-label' }, menuString(locale, name)),
+        h('dd', { class: 'cr-dish__fact-value' }, value),
+      ),
+    ]
+  })
+  if (rows.length === 0) return null
+  return h(
+    'div',
+    { class: 'cr-dish__details' },
+    h('h2', { class: 'cg-visually-hidden' }, menuString(locale, 'details')),
+    h('dl', { class: 'cr-dish__facts' }, rows),
+  )
+}
+
+function terms(entry: PageEntryMeta): HtmlElement | null {
+  if (entry.terms === undefined || entry.terms.length === 0) return null
+  return h(
+    'ul',
+    { class: 'cr-dish__terms' },
+    entry.terms.map((term) =>
+      h('li', {}, term.href === null ? term.label : h('a', { href: term.href }, term.label)),
+    ),
+  )
+}
+
+export function renderDishHeader(
+  page: PageContent,
+  entry: PageEntryMeta,
+  ctx: RenderContext,
+): HtmlElement {
+  const fields: Fields = entry.fields ?? {}
+  const price = priceOf(fields.price) as number
+  const section = sectionOf(fields)
+  const image = entry.image
+
+  return h(
+    'article',
+    { class: 'cr-dish', 'data-media': String(image !== undefined) },
+    h(
+      'div',
+      { class: 'cr-container cr-dish__inner' },
+      image === undefined
+        ? null
+        : h(
+            'figure',
+            { class: 'cr-dish__media' },
+            renderImageSource(image, {
+              className: 'cr-dish__image',
+              loading: 'eager',
+              sizes: '(min-width: 64rem) 48vw, 100vw',
+            }),
+          ),
+      h(
+        'div',
+        { class: 'cr-dish__info' },
+        section === undefined ? null : h('p', { class: 'cr-dish__section' }, section),
+        h('h1', { class: 'cr-dish__title' }, page.title),
+        entry.excerpt === undefined ? null : h('p', { class: 'cr-dish__summary' }, entry.excerpt),
+        h(
+          'p',
+          { class: 'cr-dish__price-line' },
+          h(
+            'span',
+            { class: 'cr-dish__price' },
+            h('span', { class: 'cg-visually-hidden' }, `${menuString(ctx.locale, 'price')} `),
+            h(
+              'data',
+              { value: String(price) },
+              formatPrice(price, currencyOf(fields.currency), ctx.locale),
+            ),
+          ),
+          isVegetarian(fields)
+            ? h('span', { class: 'cr-dish__diet' }, menuString(ctx.locale, 'vegetarian'))
+            : null,
+        ),
+        details(fields, ctx.locale),
+        terms(entry),
+      ),
+    ),
+  )
+}
+
+function formatDate(iso: string, locale: string): string {
+  try {
+    return new Intl.DateTimeFormat(locale, { dateStyle: 'long' }).format(new Date(iso))
+  } catch {
+    return iso
+  }
+}
+
+/**
+ * Date, author and reading time, for a dated entry only: an opening-hours
+ * page is not something a guest reads against the clock.
+ */
+function pageMeta(entry: PageEntryMeta, ctx: RenderContext): HtmlElement | null {
+  if (entry.publishedAt === undefined) return null
+  const parts: HtmlElement[] = [
+    h('time', { datetime: entry.publishedAt }, formatDate(entry.publishedAt, ctx.locale)),
+  ]
+  if (entry.author !== undefined) parts.push(h('span', {}, entry.author.name))
+  if (entry.readingMinutes !== undefined) {
+    parts.push(h('span', {}, ctx.t('entry.readingTime', { minutes: entry.readingMinutes })))
+  }
+  return h('p', { class: 'cr-page-head__meta' }, parts)
+}
+
+/**
+ * Any other page: its title large and light on the grid, the entry's summary
+ * under it in the serif italic when it has one. A dated entry (a note from
+ * the kitchen) also carries its date, author and reading time in one small
+ * line, and its cover photograph under the title. An undated entry with a
+ * picture keeps the picture for the lists that link to it: its own page
+ * opens on words.
+ */
+export function renderPageHeader(page: PageContent, ctx: RenderContext): HtmlElement {
+  const entry = page.entry
+  const cover = entry?.publishedAt === undefined ? undefined : entry.image
+  return h(
+    'header',
+    { class: 'cr-page-head', 'data-cover': String(cover !== undefined) },
+    h(
+      'div',
+      { class: 'cr-container cr-page-head__inner' },
+      h('h1', { class: 'cr-page-head__title' }, page.title),
+      entry?.excerpt === undefined ? null : h('p', { class: 'cr-page-head__lead' }, entry.excerpt),
+      entry === undefined ? null : pageMeta(entry, ctx),
+      cover === undefined
+        ? null
+        : h(
+            'figure',
+            { class: 'cr-page-head__cover' },
+            renderImageSource(cover, {
+              className: 'cr-page-head__image',
+              loading: 'eager',
+              sizes: '(min-width: 90rem) 86rem, 100vw',
+            }),
+          ),
+    ),
+  )
+}

package/src/render/layout.ts

@@ -0,0 +1,64 @@
+import {
+  type Attributes,
+  blockHeadingTag,
+  type Child,
+  type HtmlElement,
+  h,
+  heading,
+} from '@cogenta/theme-kit'
+
+/**
+ * The frame every block of this theme renders into.
+ *
+ * The outer element carries the one section rhythm (`--cr-section`, the same
+ * for every block) and paints edge to edge when a variant asks for a band.
+ * The inner element is the twelve-column container, so a section title, a
+ * dish name, a caption and a price all start on the same line.
+ *
+ * `inner` is `figure` for a block whose semantics are a figure (a quotation
+ * and its attribution, an image and its caption): `<figcaption>` must be a
+ * direct child of its `<figure>`.
+ */
+export function section(
+  outer: 'section' | 'div',
+  block: string,
+  className: string,
+  attrs: Attributes,
+  inner: 'div' | 'figure',
+  ...children: readonly Child[]
+): HtmlElement {
+  return h(
+    outer,
+    { class: `cr-section ${className}`, 'data-block': block, ...attrs },
+    h(inner, { class: `cr-container ${className}__inner` }, ...children),
+  )
+}
+
+/**
+ * A titled block's heading: set in the display serif at the section size, on
+ * the first column of the grid. A dining room lets the food and the room
+ * carry the page, so a section names itself in a few words and nothing else.
+ */
+export function sectionHead(blockName: string, title: string | undefined): HtmlElement | null {
+  if (title === undefined) return null
+  return h(
+    'div',
+    { class: 'cr-head' },
+    heading(
+      blockHeadingTag(blockName) ?? 'h2',
+      { class: 'cr-head__title', 'data-field': 'title' },
+      title,
+    ),
+  )
+}
+
+/** A paragraph that renders only when the text is there: no empty `<p>` on the page. */
+export function optionalText(
+  tag: string,
+  className: string,
+  value: string | undefined,
+  attrs: Attributes = {},
+): HtmlElement | null {
+  if (value === undefined || value.trim() === '') return null
+  return h(tag, { class: className, ...attrs }, value)
+}

package/src/render/menu.ts

@@ -0,0 +1,117 @@
+/**
+ * Reading a dish out of plain content data.
+ *
+ * Contract A fixes the system fields and nothing else, so a theme can only
+ * recognise a dish by convention: an entry with a numeric `price` is
+ * something on the menu, whatever its collection is called, and its
+ * `category` (or `section`, or `course`) is the part of the menu it belongs
+ * to. The same convention reads a dish in a menu list (the raw entry) and on
+ * its own page (`theme@1.5`'s `PageEntryMeta.fields`), so the two can never
+ * disagree about a price.
+ *
+ * Money is shown, never computed: no rounding, no service charge, no
+ * conversion. The currency comes from the entry's own `currency` field (an
+ * ISO 4217 code); contract B has no currency, so an entry that does not say
+ * is shown in euros, the currency every dish this theme's blueprint seeds is
+ * priced in. A restaurant that charges in another currency sets the field.
+ */
+
+export const DEFAULT_CURRENCY = 'EUR'
+
+/** A finite, non-negative number, or `undefined` for anything else. */
+export function priceOf(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : undefined
+}
+
+/** An ISO 4217 code the platform accepts, or the default. */
+export function currencyOf(value: unknown): string {
+  if (typeof value !== 'string' || !/^[A-Za-z]{3}$/.test(value.trim())) return DEFAULT_CURRENCY
+  const code = value.trim().toUpperCase()
+  return Intl.supportedValuesOf('currency').includes(code) ? code : DEFAULT_CURRENCY
+}
+
+/**
+ * `€16` in English, `16 €` in French: the platform's own currency formatting
+ * in the page's locale. A whole amount shows no decimals, a price with cents
+ * shows two, so a menu of round prices does not read as a column of `.00`.
+ */
+export function formatPrice(amount: number, currency: string, locale: string): string {
+  const whole = Number.isInteger(amount)
+  const options: Intl.NumberFormatOptions = {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: whole ? 0 : 2,
+    maximumFractionDigits: whole ? 0 : 2,
+  }
+  try {
+    return new Intl.NumberFormat(locale, options).format(amount)
+  } catch {
+    return new Intl.NumberFormat('en', options).format(amount)
+  }
+}
+
+/** A non-empty string, trimmed, or `undefined`. */
+export function textOf(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined
+  const trimmed = value.trim()
+  return trimmed === '' ? undefined : trimmed
+}
+
+/** The first field among `names` that holds text. */
+export function firstText(
+  source: Readonly<Record<string, unknown>>,
+  names: readonly string[],
+): string | undefined {
+  for (const name of names) {
+    const value = textOf(source[name])
+    if (value !== undefined) return value
+  }
+  return undefined
+}
+
+/** The part of the menu a dish belongs to, under whichever of the usual names a collection gave it. */
+export const SECTION_FIELDS = ['category', 'section', 'course'] as const
+
+/** The plain details a dish page lists, in the order a guest reads them. */
+export const DETAIL_FIELDS = ['sourcing', 'pairing', 'allergens'] as const
+
+export type DetailField = (typeof DETAIL_FIELDS)[number]
+
+export function sectionOf(source: Readonly<Record<string, unknown>>): string | undefined {
+  return firstText(source, SECTION_FIELDS)
+}
+
+/** `vegetarian: true` says so; anything else says nothing. */
+export function isVegetarian(source: Readonly<Record<string, unknown>>): boolean {
+  return source.vegetarian === true
+}
+
+export interface MenuSection<T> {
+  /** `undefined` for dishes that name no section: one untitled group. */
+  readonly title: string | undefined
+  readonly items: readonly T[]
+}
+
+/**
+ * Groups dishes by section, keeping the order the list arrived in: a section
+ * appears where its first dish does, and its dishes keep their own order
+ * inside it. The editor orders the menu by ordering the entries; the theme
+ * never sorts it alphabetically behind their back.
+ */
+export function groupBySection<T extends Readonly<Record<string, unknown>>>(
+  entries: readonly T[],
+): readonly MenuSection<T>[] {
+  const order: (string | undefined)[] = []
+  const groups = new Map<string | undefined, T[]>()
+  for (const entry of entries) {
+    const title = sectionOf(entry)
+    const group = groups.get(title)
+    if (group === undefined) {
+      order.push(title)
+      groups.set(title, [entry])
+    } else {
+      group.push(entry)
+    }
+  }
+  return order.map((title) => ({ title, items: groups.get(title) ?? [] }))
+}