@cogenta/theme-canonical 1.1.2 → 1.3.3

package/src/render/blocks/collection-list.ts

@@ -1,47 +1,80 @@
 import type { CollectionListBlock } from '@cogenta/blocks'
-import type { ContentEntry, RenderContext } from '../../theme-contract.js'
-import { entryDate, entryExcerpt, entryHref, entryTitle } from '../entry.js'
+import { renderImageSource } from '@cogenta/theme-kit'
+import type { ContentEntry, ImageSource, RenderContext } from '../../theme-contract.js'
+import { formatEntryDate } from '../dates.js'
+import { entryDate, entryExcerpt, entryHref, entryImage, entryTitle } from '../entry.js'
 import { blockHeadingTag, type HeadingTag, heading, nestedHeadingTag } from '../heading.js'
 import { type HtmlElement, h } from '../html.js'
 
 /**
- * The only block of the twelve that reads data at render time — contract B
- * marks it `runtime: 'server'` for that reason.
+ * The only block of the vocabulary that reads data at render time — contract
+ * B marks it `runtime: 'server'` for that reason.
  *
  * The read is *not* done here. `query` builds the request (`@cogenta/theme-kit`'s
  * `buildCollectionListQuery`, shared across every theme since it derives
  * purely from the block's own fields), the caller awaits `ctx.content.list(...)`
  * before rendering starts, and this function stays a pure function of the
- * entries it is handed. That keeps the markup snapshot-testable and keeps a
- * theme's single door to data — the read-only content client — in one visible
- * place.
+ * entries it is handed.
+ *
+ * Three layouts, three readings of the same entries:
+ *
+ * - `list` is an index: the date in its own narrow column, then the title and
+ *   the summary. No picture: a reader scans an index by date and title.
+ * - `grid` sets entries in columns, each opened by its picture
+ *   (`entryImage`, `theme@1.4`) — but only when every entry of the list has
+ *   one. A row where one entry opens on a photograph and its neighbour on
+ *   nothing reads as a missing image, so a list with any entry lacking a
+ *   picture is set in type alone, every entry opening on the same rule.
+ * - `carousel` is the grid as a horizontal row the reader scrolls, under the
+ *   same all-or-none rule for pictures.
  */
 export { buildCollectionListQuery as query } from '@cogenta/theme-kit'
 
-function renderEntry(entry: ContentEntry, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+function renderEntry(
+  entry: ContentEntry,
+  ctx: RenderContext,
+  tag: HeadingTag,
+  picture: ImageSource | undefined,
+): HtmlElement {
   const date = entryDate(entry)
   const excerpt = entryExcerpt(entry)
+  const href = entryHref(entry, ctx)
   return h(
     'li',
-    { class: 'cg-entry' },
+    { class: 'cg-entry', 'data-picture': picture === undefined ? 'false' : 'true' },
     h(
       'article',
       { class: 'cg-entry__body' },
       heading(
         tag,
         { class: 'cg-entry__title' },
-        h('a', { class: 'cg-entry__link', href: entryHref(entry, ctx) }, entryTitle(entry, ctx)),
+        h('a', { class: 'cg-entry__link', href }, entryTitle(entry, ctx)),
       ),
       date === undefined
         ? null
         : h(
             'time',
             { class: 'cg-entry__date', datetime: date },
-            // Formatted in the rendered locale rather than left as an ISO
-            // string: the machine-readable form is already in `datetime`.
-            new Intl.DateTimeFormat(ctx.locale, { dateStyle: 'long' }).format(new Date(date)),
+            // The machine-readable form is already in `datetime`.
+            formatEntryDate(date, ctx.locale),
           ),
       excerpt === undefined ? null : h('p', { class: 'cg-entry__excerpt' }, excerpt),
+      picture === undefined
+        ? null
+        : h(
+            'a',
+            // The picture follows the title's link for a pointer, and is left
+            // out of the tab order and of the accessibility tree: the title
+            // already is the one named link to this entry.
+            { class: 'cg-entry__media', href, tabindex: '-1', 'aria-hidden': 'true' },
+            renderImageSource(
+              { ...picture, alt: '' },
+              {
+                className: 'cg-entry__image',
+                sizes: '(min-width: 72rem) 23rem, (min-width: 40rem) 50vw, 100vw',
+              },
+            ),
+          ),
     ),
   )
 }
@@ -53,13 +86,18 @@ export function renderCollectionList(
 ): HtmlElement {
   const hasTitle = block.title !== undefined
   const entryTag = nestedHeadingTag('collectionList', hasTitle)
+  const pictures =
+    block.layout === 'list' ? [] : entries.map((entry) => entryImage(entry, ctx, { width: 960 }))
+  const everyPicture = pictures.length > 0 && pictures.every((picture) => picture !== undefined)
   const items =
     entries.length === 0
       ? h('p', { class: 'cg-collection__empty' }, ctx.t('collection.empty'))
       : h(
           'ul',
           { class: 'cg-collection__items' },
-          entries.map((entry) => renderEntry(entry, ctx, entryTag)),
+          entries.map((entry, index) =>
+            renderEntry(entry, ctx, entryTag, everyPicture ? pictures[index] : undefined),
+          ),
         )
 
   return h(
@@ -76,7 +114,7 @@ export function renderCollectionList(
           block.title ?? '',
         )
       : null,
-    block.layout === 'carousel'
+    block.layout === 'carousel' && entries.length > 0
       ? h(
           'div',
           {

package/src/render/blocks/embed.ts

@@ -1,5 +1,6 @@
 import type { EmbedBlock } from '@cogenta/blocks'
 import type { RenderContext } from '../../theme-contract.js'
+import { arrowWords } from '../arrow-link.js'
 import { type HtmlElement, h } from '../html.js'
 import { aspectRatio } from '../media.js'
 
@@ -64,11 +65,11 @@ function consentCard(block: EmbedBlock, ctx: RenderContext, reason: string): Htm
     h(
       'a',
       {
-        class: 'cg-embed__link',
+        class: 'cg-arrow-link cg-embed__link',
         href: ctx.link(block.url),
         rel: 'noopener noreferrer nofollow',
       },
-      ctx.t('embed.open', { provider: block.provider }),
+      arrowWords(ctx.t('embed.open', { provider: block.provider })),
     ),
   )
 }

package/src/render/blocks/gallery.ts

@@ -21,7 +21,10 @@ export function renderGallery(block: GalleryBlock, ctx: RenderContext): HtmlElem
       h(
         'li',
         { class: 'cg-gallery__item' },
-        image(ctx, item.media, { sizes: '(min-width: 45rem) 20rem, 60vw' }),
+        image(ctx, item.media, {
+          className: 'cg-gallery__image',
+          sizes: '(min-width: 64rem) 24rem, 50vw',
+        }),
       ),
     ),
   )

package/src/render/blocks/hero.ts

@@ -16,7 +16,13 @@ export function renderHero(block: HeroBlock, ctx: RenderContext): HtmlElement {
   const tag = blockHeadingTag('hero') ?? 'h1'
   return h(
     'section',
-    { class: 'cg-block cg-hero', 'data-block': 'hero' },
+    {
+      class: 'cg-block cg-hero',
+      'data-block': 'hero',
+      // Two compositions: words alone, or words over a wide photograph. The
+      // attribute says which, so the stylesheet never has to guess.
+      'data-media': block.media === undefined ? 'false' : 'true',
+    },
     h(
       'div',
       { class: 'cg-hero__body' },
@@ -39,7 +45,8 @@ export function renderHero(block: HeroBlock, ctx: RenderContext): HtmlElement {
           // is a measured Lighthouse regression, not a theoretical one.
           image(ctx, block.media, {
             loading: 'eager',
-            sizes: '(min-width: 60rem) 50vw, 100vw',
+            className: 'cg-hero__image',
+            sizes: '(min-width: 72rem) 72rem, 100vw',
           }),
         ),
   )

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

@@ -3,11 +3,17 @@ import type { RenderContext } from '../../theme-contract.js'
 import { actionLink } from '../actions.js'
 import { blockHeadingTag, type HeadingTag, heading, nestedHeadingTag } from '../heading.js'
 import { type HtmlElement, h } from '../html.js'
+import { word } from '../strings.js'
 
 /**
  * `blocks@2.0` (RFC 0001). `highlighted` is editorial emphasis, not a colour:
- * it becomes `data-highlighted` for the skin to style, and `aria-current`
- * (loosely "the one on offer") so it is announced, not only shown.
+ * it becomes `data-highlighted` for the stylesheet, `aria-current` (loosely
+ * "the one on offer") so it is announced, and a short label under the plan's
+ * name so it is read in words, never only seen as a heavier rule.
+ *
+ * Each plan is four rows (name, price, features, action) that the stylesheet
+ * lines up across plans, so prices sit on one line and actions on another
+ * whatever the length of each feature list.
  */
 function renderTier(tier: PricingTier, ctx: RenderContext, tag: HeadingTag): HtmlElement {
   return h(
@@ -17,7 +23,14 @@ function renderTier(tier: PricingTier, ctx: RenderContext, tag: HeadingTag): Htm
       'data-highlighted': tier.highlighted === true ? 'true' : undefined,
       'aria-current': tier.highlighted === true ? 'true' : undefined,
     },
-    heading(tag, { class: 'cg-pricing__name' }, tier.name),
+    h(
+      'div',
+      { class: 'cg-pricing__head' },
+      heading(tag, { class: 'cg-pricing__name' }, tier.name),
+      tier.highlighted === true
+        ? h('p', { class: 'cg-pricing__flag' }, word(ctx.locale, 'recommended'))
+        : null,
+    ),
     h(
       'p',
       { class: 'cg-pricing__price' },
@@ -38,7 +51,12 @@ function renderTier(tier: PricingTier, ctx: RenderContext, tag: HeadingTag): Htm
       : h(
           'div',
           { class: 'cg-pricing__action' },
-          actionLink(ctx, { ...tier.action, emphasis: tier.action.emphasis ?? 'primary' }),
+          actionLink(ctx, {
+            ...tier.action,
+            // An emphasis the editor left unset follows the plan: the
+            // recommended plan gets the filled button, the others an outline.
+            emphasis: tier.action.emphasis ?? (tier.highlighted === true ? 'primary' : 'secondary'),
+          }),
         ),
   )
 }

package/src/render/chrome.ts

@@ -5,101 +5,187 @@ import {
   escapeAttribute,
   escapeText,
   renderBrandMark,
+  renderFooterWidgets,
   renderSocialLinks,
   renderThemeToggle,
   serialize,
 } from '@cogenta/theme-kit'
+import { word } from './strings.js'
 
 /**
- * The site header and footer — moved here, verbatim, from what used to be
- * `@cogenta/cli`'s own hardcoded `<header class="cg-site-header">`/`<footer
- * class="cg-site-footer">` template (`packages/cli/src/commands/theme-render.ts`,
- * before the chrome extension point existed). Byte-identical output to that
- * template: this is the reference theme, and every site that installed it
- * before a second theme existed must render exactly as it always has.
+ * The site header and footer of the reference theme.
  *
- * A future theme with a structurally different header (a mega-menu, a cart
- * icon, no header at all) implements its own `renderChrome` instead — this is
- * simply the one this package ships.
+ * **Header.** One bar on the page's own ground, closed by a hairline: the
+ * site's name (or its uploaded logo) at the start, then the primary pages,
+ * then the `headerAction` (`theme@1.4`) as the page's one filled button and
+ * the light/dark control. The bar scrolls away with the page: a default theme
+ * has no reason to keep a strip of the window for itself.
  *
- * `theme@1.4` (L25 D2) adds four optional fields, each rendered only when
- * present: `headerAction` as a button-styled link at the end of the header
- * nav, `tagline` under the site name in the footer, `social` as an icon-link
- * row (`renderSocialLinks`), `footerNote` as a short "about" paragraph. A
- * site that sets none of them, and a `1.3` render that never reaches this
- * file at all, both keep the pre-1.4 header/footer byte for byte — see
- * `test/chrome.test.ts`'s own "without the new fields" case.
+ * Below the wide breakpoint the pages move into a panel under the bar, opened
+ * by a CSS-only control: a checkbox named by a visible "Menu" label, placed
+ * before the `<nav>` so the sibling combinator reaches it. No script. The
+ * source order (name, menu, pages, action, light/dark) is also the visual
+ * order at both widths, so keyboard focus never jumps around the bar.
+ *
+ * **Footer.** On a band a step off the page. The site's name, its `tagline`,
+ * the `footerNote` (an address or a legal mention, kept to its own lines) and
+ * the social profiles on the first columns; the footer menu on the last ones.
+ * An unlinked item of the footer menu (a `submenu-placeholder` such as
+ * "Company") starts a column and names it, so an editor builds the columns in
+ * the menu screen; a menu without one is a single column. Under a hairline,
+ * the legal line: the year and the site's name, then the host's
+ * `brandingHtml`, placed once and as received.
+ *
+ * **Footer widgets** (`theme@1.6`). The footer columns an editor fills in the
+ * widgets screen (`footer-1`..`footer-4`) are one row of their own, under the
+ * identity and the menu and above the legal line, on the same grid. A footer
+ * with no widget renders exactly as it did before.
+ *
+ * Every optional field renders only when present: a site that sets none of
+ * them gets no empty wrapper for any of them (`test/chrome.test.ts`).
  */
 
-function renderNavLinks(links: readonly ChromeNavLink[]): string {
-  if (links.length === 0) return ''
-  const items = 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)
-      const target = link.openInNewTab ? ' target="_blank" rel="noopener"' : ''
-      return `<li><a href="${href}"${target}${titleAttr}>${label}</a></li>`
-    })
-    .join('')
-  return items === '' ? '' : `<ul class="cg-menu">${items}</ul>`
+interface FooterGroup {
+  readonly heading: string | null
+  readonly links: readonly ChromeNavLink[]
 }
 
-/** 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-site-header__action" data-emphasis="primary" ` +
-    `href="${escapeAttribute(action.href)}">${escapeText(action.label)}</a>`
-  )
+/** Links a visitor can follow, plus the unlinked headings that name a column. */
+function usable(links: readonly ChromeNavLink[]): readonly ChromeNavLink[] {
+  return links.filter((link) => link.href !== null || link.kind === 'submenu-placeholder')
 }
 
-export function renderChrome(input: ChromeInput): ChromeResult {
-  const siteName = escapeAttribute(input.site.name)
-  const headerNav = renderNavLinks(input.headerNav)
-  const footerNav = renderNavLinks(input.footerNav)
+function linkItem(link: ChromeNavLink): string {
+  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 target = link.openInNewTab ? ' target="_blank" rel="noopener"' : ''
+  return `<li><a href="${escapeAttribute(link.href)}"${target}${titleAttr}>${label}</a></li>`
+}
+
+/** The footer menu, split into columns at each unlinked heading. */
+export function footerGroups(links: readonly ChromeNavLink[]): readonly FooterGroup[] {
+  const groups: { heading: string | null; links: ChromeNavLink[] }[] = []
+  for (const link of usable(links)) {
+    if (link.kind === 'submenu-placeholder' && link.href === null) {
+      groups.push({ heading: link.label, links: [] })
+      continue
+    }
+    const current = groups[groups.length - 1]
+    if (current === undefined) groups.push({ heading: null, links: [link] })
+    else current.links.push(link)
+  }
+  return groups.filter((group) => group.links.length > 0)
+}
+
+/** `footerNote` as paragraphs at blank lines, each keeping its own line breaks. */
+function renderFooterNote(note: 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="cg-site-footer__about">${paragraphs
+    .map(
+      (lines) =>
+        `<p class="cg-site-footer__note">${lines.map((line) => escapeText(line)).join('<br>')}</p>`,
+    )
+    .join('')}</div>`
+}
+
+function renderHeader(input: ChromeInput): string {
+  const siteName = escapeText(input.site.name)
+  const home = escapeAttribute(input.homeHref)
   // 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.
+  // footer keeps the site's name in text, so a page whose logo fails to load
+  // still names the site.
   const mark = renderBrandMark(input.brand, { className: 'cg-site-header__logo' }) ?? siteName
-  const headerAction = renderHeaderAction(input.headerAction)
-  const themeToggle = serialize(renderThemeToggle(input.locale, { className: 'cg-theme-toggle' }))
+  const links = usable(input.headerNav).map(linkItem).join('')
+  const actionHref =
+    input.headerAction === undefined ? '' : escapeAttribute(input.headerAction.href)
+  const actionLabel = input.headerAction === undefined ? '' : escapeText(input.headerAction.label)
+  // On a phone the bar holds the name, the menu control and the light/dark
+  // control; the action moves to the foot of the menu panel. It is the same
+  // link twice in the source, and the stylesheet shows exactly one of them at
+  // any width (`display: none` hides the other from assistive technology
+  // too), so it is never announced twice.
+  const menuAction =
+    input.headerAction === undefined
+      ? ''
+      : `<p class="cg-site-header__menu-action"><a class="cg-action" data-emphasis="primary" href="${actionHref}">${actionLabel}</a></p>`
+  const menu =
+    links === ''
+      ? ''
+      : `<input type="checkbox" id="cg-nav-toggle" class="cg-nav-toggle" aria-controls="cg-site-nav">` +
+        `<label for="cg-nav-toggle" class="cg-nav-toggle__label">${escapeText(word(input.locale, 'menu'))}</label>` +
+        `<nav class="cg-site-header__nav" id="cg-site-nav" aria-label="${escapeAttribute(
+          word(input.locale, 'primaryNavigation'),
+        )}"><ul class="cg-menu">${links}</ul>${menuAction}</nav>`
+  const action =
+    input.headerAction === undefined
+      ? ''
+      : `<a class="cg-action cg-site-header__action" data-emphasis="primary" href="${actionHref}">${actionLabel}</a>`
+  const toggle = serialize(renderThemeToggle(input.locale, { className: 'cg-theme-toggle' }))
 
-  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-site-header__nav" aria-label="Primary">${headerNav}</nav>`}` +
-    `${themeToggle}` +
-    `${headerAction}` +
+  return (
+    `<header class="cg-site-header" data-nav="${links === '' ? 'none' : 'links'}"><div class="cg-site-header__inner">` +
+    `<a class="cg-site-header__home" href="${home}">${mark}</a>` +
+    menu +
+    `<div class="cg-site-header__end">${action}${toggle}</div>` +
     `</div></header>`
+  )
+}
 
+function renderFooter(input: ChromeInput): string {
+  const siteName = escapeText(input.site.name)
   const tagline =
     input.tagline === undefined
       ? ''
       : `<p class="cg-site-footer__tagline">${escapeText(input.tagline)}</p>`
-  const social =
-    input.social === undefined
+  const note = input.footerNote === undefined ? '' : renderFooterNote(input.footerNote)
+  const socialLinks = renderSocialLinks(input.social, {
+    className: 'cg-site-footer__social',
+    itemClassName: 'cg-site-footer__social-item',
+  })
+  const social = socialLinks === null ? '' : serialize(socialLinks)
+  const groups = footerGroups(input.footerNav)
+  const nav =
+    groups.length === 0
       ? ''
-      : 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>`
+      : `<nav class="cg-site-footer__nav" aria-label="${escapeAttribute(
+          word(input.locale, 'footerNavigation'),
+        )}" data-columns="${Math.min(groups.length, 3)}">${groups
+          .map(
+            (group) =>
+              `<div class="cg-site-footer__group">${
+                group.heading === null
+                  ? ''
+                  : `<p class="cg-site-footer__heading">${escapeText(group.heading)}</p>`
+              }<ul class="cg-menu">${group.links.map(linkItem).join('')}</ul></div>`,
+          )
+          .join('')}</nav>`
+  const widgets = renderFooterWidgets(input.widgets, {
+    className: 'cg-site-footer__widgets',
+    headingLevel: 'h2',
+  })
+  const year = new Date().getFullYear()
 
-  const footer =
+  return (
     `<footer class="cg-site-footer"><div class="cg-site-footer__inner">` +
-    `<span>${siteName}</span>${tagline}` +
-    `${footerNav === '' ? '' : `<nav class="cg-site-footer__nav" aria-label="Footer">${footerNav}</nav>`}` +
-    `${social}` +
-    `${footerNote === '' ? '' : `<div class="cg-site-footer__about">${footerNote}</div>`}` +
-    `${input.brandingHtml}</div></footer>`
+    `<div class="cg-site-footer__identity"><p class="cg-site-footer__name">${siteName}</p>${tagline}${note}${social}</div>` +
+    nav +
+    (widgets === null ? '' : serialize(widgets)) +
+    `<div class="cg-site-footer__legal"><p class="cg-site-footer__copyright">© ${year} ${siteName}</p>${input.brandingHtml}</div>` +
+    `</div></footer>`
+  )
+}
 
-  return { header, footer }
+export function renderChrome(input: ChromeInput): ChromeResult {
+  return { header: renderHeader(input), footer: renderFooter(input) }
 }

package/src/render/dates.ts

@@ -0,0 +1,14 @@
+/**
+ * The one date format of this theme — `Intl`'s long date, in the page's own
+ * language — shared by the collection list, the term archive and the entry
+ * header (`renderEntryHeader` formats the same way), so a date reads alike on
+ * every page. An invalid locale or date falls back to the ISO day, a true
+ * answer rather than a thrown error.
+ */
+export function formatEntryDate(iso: string, locale: string): string {
+  try {
+    return new Intl.DateTimeFormat(locale, { dateStyle: 'long' }).format(new Date(iso))
+  } catch {
+    return iso.slice(0, 10)
+  }
+}

package/src/render/render-block.ts

@@ -3,6 +3,7 @@ import {
   type FetchedEntries,
   type PageContent,
   pageHasOwnHeading,
+  providedBlockNode,
   renderEntryHeader,
   resolveBlockForRender,
   withBlockKey,
@@ -43,6 +44,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 twelve —
   // `theme-render.ts` cannot know at compile time what a block zone holds.

package/src/render/strings.ts

@@ -0,0 +1,30 @@
+import { themeLocaleFor } from '@cogenta/theme-kit'
+
+/**
+ * The few words this theme prints on its own, beyond `THEME_STRINGS`
+ * (`@cogenta/theme-kit`): the name of the menu control and of the two
+ * navigation landmarks, and the label over a recommended plan. The same two
+ * languages as the shared table, resolved the same way (`fr-CA` is French,
+ * anything unknown is English).
+ */
+
+const WORDS = {
+  en: {
+    menu: 'Menu',
+    primaryNavigation: 'Primary',
+    footerNavigation: 'Footer',
+    recommended: 'Recommended',
+  },
+  fr: {
+    menu: 'Menu',
+    primaryNavigation: 'Principale',
+    footerNavigation: 'Pied de page',
+    recommended: 'Recommandé',
+  },
+} as const
+
+export type ThemeWord = keyof (typeof WORDS)['en']
+
+export function word(locale: string, key: ThemeWord): string {
+  return WORDS[themeLocaleFor(locale)][key]
+}