@cogenta/theme-restaurant 0.3.3 → 0.5.4

package/src/render/render-block.ts

@@ -5,8 +5,8 @@ import {
   h,
   type PageContent,
   pageHasOwnHeading,
+  providedBlockNode,
   type RenderContext,
-  renderEntryHeader,
   resolveBlockForRender,
   withBlockKey,
   withBlockVariant,
@@ -28,6 +28,7 @@ import { renderQuote } from './blocks/quote.js'
 import { renderStatCounter } from './blocks/stat-counter.js'
 import { renderStats } from './blocks/stats.js'
 import { renderTestimonial } from './blocks/testimonial.js'
+import { isDishPage, renderDishHeader, renderPageHeader } from './dish.js'
 
 export type { FetchedEntries, PageContent }
 
@@ -37,13 +38,19 @@ export function renderBlock(
   entries: FetchedEntries = {},
   registry?: BlockRegistry,
 ): HtmlElement | null {
-  // `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
-  // block into its declared fallback instead of a silently blank slot.
+  // 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)
+  // A stored block is not always literally one of the shared vocabulary:
+  // resolving here turns an unimplemented theme-private block into its
+  // declared fallback instead of a silently blank slot.
   const resolved = resolveBlockForRender(block, VOCABULARY_NAMES, registry)
   if (resolved === null) return null
   const known = resolved as unknown as VocabularyBlock
+  // `variant` is envelope data every block carries identically, applied once
+  // here rather than by each of the seventeen renderers.
   return withBlockVariant(renderKnownBlock(known, ctx, entries), known.variant)
 }
 
@@ -88,9 +95,9 @@ function renderKnownBlock(
     case 'logoStrip':
       return renderLogoStrip(known, ctx)
     default: {
-      // Exhaustive over contract B's vocabulary: `known` is `never` here, so
-      // a block this package does not implement stops it compiling until it
-      // is.
+      // Exhaustive over contract B: `known` is `never` here, so a block this
+      // package does not implement stops it compiling until it is. `null`
+      // rather than a throw: choosing a fallback is the render layer's job.
       const unreachable: never = known
       void unreachable
       return null
@@ -99,53 +106,57 @@ function renderKnownBlock(
 }
 
 /**
- * `<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.
- *
- * `withBlockKey` stamps every rendered block with its contract-B `_key` —
- * required so the visual page builder (L16) can map a clicked element in
- * the rendered iframe back to the block that produced it.
- *
- * A routed collection with no `blocks` field of its own — this theme's
- * `menu_item`, in particular — reaches here with an empty block list, so
- * `page.entry` (contract D `theme@1.4`) is what carries its furniture:
- * `renderEntryHeader` draws the title, excerpt (the dish's own
- * `description`, via `entryExcerpt`'s field-name convention) and cover
- * photo. `PageEntryMeta` has no room for a schema-specific field such as
- * `price`/`category`, so a menu item's own page cannot show them without a
- * contract D change — the theme's real, honest limit; the price and
- * category chip the brief also asks for are exactly what the home page's
- * `collectionList` menu already renders for every dish, and the item page
- * still links back there.
- */
-/**
- * A second, theme-local stamp beside `withBlockKey`'s own `data-block-key`:
- * a real `id` attribute, so this theme's single-page navigation (the
- * blueprint's header/footer links into `#home-menu`/`#home-story`/etc.) has
- * something to scroll to. Contract B's `_key` is already guaranteed unique
- * within one page's block list (the reorder/diff identity every block
- * carries), so reusing it as the DOM id can never collide on a page this
- * theme rendered — safe to do generically, for every block, not only the
- * ones a blueprint happens to link to.
+ * A real `id` beside `withBlockKey`'s `data-block-key`, so a menu link to
+ * `/#<key>` still has somewhere to land: sites built on this theme before its
+ * multi-page blueprint linked their header straight into home page blocks.
+ * Contract B's `_key` is unique within one page's block list, so it can never
+ * collide on a page this theme rendered.
  */
 function withAnchorId(element: HtmlElement | null, key: string): HtmlElement | null {
   if (element === null) return null
   return { ...element, attrs: { ...element.attrs, id: key } }
 }
 
+/**
+ * `<main id="cg-main">` is mandatory: it is the skip link's target, written
+ * by the host outside any theme's control.
+ *
+ * Three openings, and exactly one `h1` in each:
+ *
+ * - a page whose blocks include a `hero` lets the hero carry the title;
+ * - a dish (`isDishPage`: its `theme@1.5` fields carry a price) gets the dish
+ *   sheet: photograph, section, name, description, price, details;
+ * - anything else gets its title set large on the grid.
+ *
+ * A host older than `theme@1.5` sends no fields, so its dish pages open like
+ * any other page: title and description, never a price read from somewhere
+ * it was not given. A host older than `theme@1.4` sends no entry at all, and
+ * the page opens on its bare title.
+ *
+ * `withBlockKey` stamps every rendered block with its contract-B `_key`, so
+ * the visual page builder (L16) can map a clicked element back to its block.
+ */
 export function renderPage(
   page: PageContent,
   ctx: RenderContext,
   entries: FetchedEntries = {},
   registry?: BlockRegistry,
 ): HtmlElement {
-  const heading = pageHasOwnHeading(page.blocks)
+  const ownHeading = pageHasOwnHeading(page.blocks)
+  const dish = !ownHeading && isDishPage(page.entry) ? page.entry : undefined
+  const opening = ownHeading
     ? null
-    : (renderEntryHeader(page, ctx) ?? h('h1', { class: 'cg-page__title' }, page.title))
+    : dish !== undefined
+      ? renderDishHeader(page, dish, ctx)
+      : renderPageHeader(page, ctx)
+
   return h(
     'main',
-    { class: 'cg-main', id: 'cg-main' },
-    heading,
+    {
+      class: dish === undefined ? 'cg-main cr-main' : 'cg-main cr-main cr-main--dish',
+      id: 'cg-main',
+    },
+    opening,
     page.blocks.map((block) =>
       withAnchorId(
         withBlockKey(renderBlock(block, ctx, entries, registry), block._key),

package/src/render/strings.ts

@@ -0,0 +1,44 @@
+import { interpolate, themeLocaleFor } from '@cogenta/theme-kit'
+
+/**
+ * The few words a restaurant's own pages need that the shared vocabulary
+ * does not: the labels of a dish's details, and the word a menu prints beside
+ * a vegetarian dish.
+ *
+ * `@cogenta/theme-kit`'s `THEME_STRINGS` carries the dozen strings every
+ * theme's blocks share; these belong to one register (a menu and a dish
+ * page), so they live with the theme that draws them, in the two languages
+ * the shared table knows. A locale the table does not know reads English, the
+ * same rule `createThemeTranslator` follows.
+ */
+
+type MenuStringKey = 'price' | 'vegetarian' | 'details' | 'sourcing' | 'allergens' | 'pairing'
+
+const STRINGS: Readonly<Record<'en' | 'fr', Readonly<Record<MenuStringKey, string>>>> = {
+  en: {
+    price: 'Price',
+    vegetarian: 'Vegetarian',
+    details: 'About the dish',
+    sourcing: 'From',
+    allergens: 'Allergens',
+    pairing: 'To drink',
+  },
+  fr: {
+    price: 'Prix',
+    vegetarian: 'Végétarien',
+    details: 'À propos du plat',
+    sourcing: 'Provenance',
+    allergens: 'Allergènes',
+    pairing: 'À boire',
+  },
+}
+
+export function menuString(
+  locale: string,
+  key: MenuStringKey,
+  values?: Readonly<Record<string, string | number>>,
+): string {
+  return interpolate(STRINGS[themeLocaleFor(locale)][key], values)
+}
+
+export type { MenuStringKey }

package/src/render/term-archive.ts

@@ -1,65 +1,86 @@
 import { type HtmlElement, h, type TermArchiveInput } from '@cogenta/theme-kit'
 
 /**
- * The taxonomy-term archive (contract D `theme@1.3`) — a resource index.
+ * The taxonomy-term archive (contract D `theme@1.3`), set in the dining
+ * room's own register: a breadcrumb in small words, the term as the page
+ * title in the display serif, its sub-terms as a ruled line of links, then
+ * the classified entries as ruled rows of titles and summaries, and a pager
+ * of two arrow links.
  *
- * Built from the same `cg-index__row` rows this theme's `collectionList`
- * dishes would sit in, minus the price column: a date rail on the left,
- * the title and its summary on the right.
+ * `TermArchiveEntry` carries no picture and no price, so an archive cannot be
+ * a menu or a band of plates; it is an index, drawn like one, rather than a
+ * menu of dishes with their prices missing. A restaurant that wants a priced
+ * section of its menu on a page of its own builds it from a
+ * `collectionList`, which carries both.
  */
 export function renderTermArchive(input: TermArchiveInput): HtmlElement {
   const rows = input.entries.map((entry) =>
     h(
       'li',
-      { class: 'cg-index__row' },
-      entry.publishedAt === null
-        ? null
-        : h(
-            'time',
-            { class: 'cg-index__date', datetime: entry.publishedAt },
-            entry.publishedAt.slice(0, 10),
-          ),
+      { class: 'cr-index__item' },
       h(
-        'div',
-        { class: 'cg-index__body' },
-        h(
-          '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__excerpt' }, entry.summary),
+        'h2',
+        { class: 'cr-index__name' },
+        entry.href === null
+          ? entry.title
+          : h('a', { class: 'cr-index__link', href: entry.href }, entry.title),
       ),
+      entry.summary === null ? null : h('p', { class: 'cr-index__text' }, entry.summary),
     ),
   )
 
   return h(
     'main',
-    { class: 'cg-main cg-archive', id: 'cg-main' },
-    input.ancestors.length === 0
+    { class: 'cg-main cr-main cr-archive', id: 'cg-main' },
+    h(
+      'header',
+      { class: 'cr-page-head' },
+      h(
+        'div',
+        { class: 'cr-container cr-page-head__inner' },
+        input.ancestors.length === 0
+          ? null
+          : h(
+              'nav',
+              { class: 'cr-archive__breadcrumb', 'aria-label': input.labels.breadcrumb },
+              h(
+                'ol',
+                { class: 'cr-archive__trail' },
+                input.ancestors.map((link) => h('li', {}, h('a', { href: link.href }, link.label))),
+              ),
+            ),
+        h('h1', { class: 'cr-page-head__title' }, input.term.label),
+      ),
+    ),
+    input.children.length === 0
       ? null
       : h(
-          'nav',
-          { class: 'cg-archive__breadcrumb', 'aria-label': input.labels.breadcrumb },
+          'div',
+          { class: 'cr-section cr-archive__children' },
           h(
-            'ol',
-            {},
-            ...input.ancestors.map((l) => h('li', {}, h('a', { href: l.href }, l.label))),
+            'div',
+            { class: 'cr-container' },
+            h(
+              'ul',
+              { class: 'cr-archive__terms', 'aria-label': input.labels.subterms },
+              input.children.map((child) =>
+                h('li', { class: 'cr-archive__term' }, h('a', { href: child.href }, child.label)),
+              ),
+            ),
           ),
         ),
-    h('h1', { class: 'cg-index__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-index__empty' }, input.labels.empty)
-      : h('ul', { class: 'cg-index__items' }, ...rows),
-    pager(input),
+    h(
+      'section',
+      { class: 'cr-section cr-list', 'data-shape': rows.length === 0 ? 'empty' : 'index' },
+      h(
+        'div',
+        { class: 'cr-container cr-list__inner' },
+        rows.length === 0
+          ? h('p', { class: 'cr-empty' }, input.labels.empty)
+          : h('ul', { class: 'cr-list__items cr-index' }, rows),
+        pager(input),
+      ),
+    ),
   )
 }
 
@@ -67,12 +88,25 @@ function pager(input: TermArchiveInput): HtmlElement | null {
   if (input.page.previousHref === null && input.page.nextHref === null) return null
   return h(
     'nav',
-    { class: 'cg-archive__pager', 'aria-label': input.labels.pagination },
+    { class: 'cr-archive__pager', 'aria-label': input.labels.pagination },
     input.page.previousHref === null
       ? null
-      : h('a', { rel: 'prev', href: input.page.previousHref }, input.labels.previous),
+      : h(
+          'a',
+          {
+            class: 'cr-arrow-link',
+            'data-direction': 'back',
+            rel: 'prev',
+            href: input.page.previousHref,
+          },
+          input.labels.previous,
+        ),
     input.page.nextHref === null
       ? null
-      : h('a', { rel: 'next', href: input.page.nextHref }, input.labels.next),
+      : h(
+          'a',
+          { class: 'cr-arrow-link', rel: 'next', href: input.page.nextHref },
+          input.labels.next,
+        ),
   )
 }

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
+ * charcoal footer, on the footer's own twelve columns; the page areas are
+ * placed by the host in the shared `cg-sidebar-layout` markup, which
+ * `styles/widgets.css` sets as the margin of a printed menu card.
+ */
+export const widgetAreas: readonly {
+  readonly id: string
+  readonly label: string
+  readonly description?: string
+}[] = [
+  {
+    id: 'sidebar',
+    label: 'Beside the page',
+    description: 'Beside a dish, a page that opens on its title, and search results.',
+  },
+  {
+    id: 'content-after',
+    label: 'Under the page',
+    description: 'After a dish or a page, before the footer.',
+  },
+]

package/src/styles/archive.css

@@ -1,84 +1,74 @@
 /*
- * 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 reuses its own `cg-index__*` rules rather than a second set,
- * so an archive looks like the rest of this theme's reading lists.
+ * The taxonomy-term archive (contract D `theme@1.3`): the page title and the
+ * index rows come from `base.css` and `menu.css`; this sheet adds the
+ * breadcrumb, the sub-terms and the pager.
  */
 
-.cg-archive {
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
-  padding: var(--cg-s10) var(--cg-gutter);
+.cr-archive__breadcrumb {
+  margin-block-end: var(--cr-s2);
 }
 
-.cg-index__title-heading {
-  margin: 0 0 var(--cg-s8);
-  font-size: var(--cg-text-2xl);
-  text-align: center;
-}
-
-.cg-archive__breadcrumb ol,
-.cg-archive__children {
+.cr-archive__trail {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
-  gap: var(--cg-s3);
-  margin: 0 0 var(--cg-s4);
+  gap: 0 var(--cr-s2);
+  margin: 0;
   padding: 0;
   list-style: none;
-  font-size: var(--cg-text-sm);
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-caption);
 }
 
-.cg-archive__children {
-  margin-block: var(--cg-s4) var(--cg-s8);
+.cr-archive__trail li + li::before {
+  content: "/" / "";
+  margin-inline-end: var(--cr-s2);
+  color: var(--cr-ink-subtle);
 }
 
-.cg-index__items {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.cr-archive__trail a {
+  color: var(--cr-ink-muted);
 }
 
-.cg-index__row {
-  display: flex;
-  gap: var(--cg-s4);
-  padding-block: var(--cg-s5);
-  border-block-end: 1px solid var(--cg-line-soft);
+.cr-archive__children {
+  padding-block: 0;
 }
 
-.cg-index__date {
-  flex: 0 0 auto;
-  font-size: var(--cg-text-sm);
-  color: var(--cg-ink-muted);
+.cr-archive__terms {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cr-s2) var(--cr-s8);
+  margin: 0;
+  padding-block: var(--cr-s4);
+  padding-inline: 0;
+  border-block: var(--cr-rule) solid var(--cr-line);
+  list-style: none;
 }
 
-.cg-index__title {
-  margin: 0 0 var(--cg-s1);
-  font-size: var(--cg-text-lg);
+.cr-archive__term a {
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-text-xl);
+  text-decoration-color: transparent;
 }
 
-.cg-index__link {
-  color: var(--cg-ink);
-  text-decoration: none;
+.cr-archive__term a:hover {
+  text-decoration-color: currentColor;
 }
 
-.cg-index__excerpt {
-  margin: 0;
-  color: var(--cg-ink-muted);
+.cr-archive__pager {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--cr-s8);
+  margin-block-start: var(--cr-s10);
 }
 
-.cg-index__empty {
-  text-align: center;
-  color: var(--cg-ink-muted);
+.cr-archive__pager a[rel="next"] {
+  margin-inline-start: auto;
 }
 
-.cg-archive__pager {
-  display: flex;
-  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);
+@media (min-width: 64rem) {
+  .cr-archive .cr-index,
+  .cr-archive .cr-empty,
+  .cr-archive__pager {
+    grid-column: 1 / span 9;
+  }
 }