create-ginko 0.4.0 → 0.6.0

package/templates/restaurant/app/components/block/Gallery.vue

@@ -0,0 +1,81 @@
+<!-- Synced from templates/_features/gallery/app/components/block/Gallery.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { ImageValue } from '@lupinum/ginko'
+
+/**
+ * Photos and one lightbox for all of them. On phones one column at full width, each photo cropped to 3:2, so no photo
+ * stands narrower than the page. Up to three photos: from `sm` one row of equal 3:2 tiles. More: from `sm` justified
+ * rows, each row fills the width and every photo keeps its ratio, so nothing jumps while loading; an empty last item
+ * takes the rest of a short last row, so its photos keep about the row height instead of growing past the rows above.
+ * Each photo is a button that opens the lightbox at that photo.
+ * `stack`: one photo below the other at full width, each in its own ratio, the first loaded at once (the main photos of
+ * a page, such as the photos of one project). A photo's description (`alt`) is not shown below it; it stays on the
+ * image and in the name of the photo's button.
+ */
+const props = defineProps<{ images: ImageValue[], stack?: boolean }>()
+const { t } = useI18n('gallery')
+const list = useTemplateRef<HTMLUListElement>('list')
+const open = ref(false)
+const index = ref(0)
+const ratio = (image: ImageValue) => (image.width && image.height ? image.width / image.height : 1.5)
+const few = computed(() => !props.stack && props.images.length <= 3)
+const rows = computed(() => !props.stack && !few.value)
+// Whole class names, so Tailwind finds them in the source.
+const columns = ['', 'sm:grid-cols-1', 'sm:grid-cols-2', 'sm:grid-cols-3'] as const
+const sizes = computed(() => {
+  if (props.stack) return '(min-width: 1216px) 1152px, calc(100vw - 2rem)'
+  return few.value
+    ? `(min-width: 1216px) ${Math.round(1152 / props.images.length)}px, (min-width: 640px) ${Math.round(100 / props.images.length)}vw, calc(100vw - 2rem)`
+    : '(min-width: 768px) 40vw, (min-width: 640px) 50vw, calc(100vw - 2rem)'
+})
+function show(i: number) {
+  index.value = i
+  open.value = true
+}
+/** After the lightbox closes: the photo shown last, in this gallery (a page may hold more than one). */
+function focusPhoto(i: number) {
+  list.value?.querySelectorAll<HTMLElement>(':scope > li > button')[i]?.focus()
+}
+</script>
+
+<template>
+  <div>
+    <ul
+      ref="list"
+      :class="stack ? 'flex flex-col gap-8 md:gap-12' : few ? ['grid gap-2 break-inside-avoid md:gap-3', columns[props.images.length]] : 'flex flex-col gap-2 sm:flex-row sm:flex-wrap md:gap-3'"
+    >
+      <li
+        v-for="(image, i) in props.images"
+        :key="`${i}-${image.url}`"
+        class="break-inside-avoid"
+        :class="rows && 'sm:max-w-(--max) sm:grow-(--grow) sm:basis-(--basis) md:max-w-(--max-md) md:basis-(--basis-md)'"
+        :style="rows ? {
+          '--grow': ratio(image),
+          '--ratio': String(ratio(image)),
+          '--basis': `${ratio(image) * 160}px`,
+          '--max': `${ratio(image) * 260}px`,
+          '--basis-md': `${ratio(image) * 260}px`,
+          '--max-md': `${ratio(image) * 420}px`,
+        } : undefined"
+      >
+        <button
+          type="button"
+          aria-haspopup="dialog"
+          :aria-label="t('open', { n: i + 1, count: props.images.length, alt: image.alt ?? '' })"
+          class="block w-full overflow-hidden rounded-block bg-muted"
+          @click="show(i)"
+        >
+          <GinkoImage
+            :image="image"
+            :sizes="sizes"
+            :eager="stack && i === 0"
+            class="w-full"
+            :class="!stack && ['aspect-3/2 object-cover', rows && 'sm:aspect-(--ratio)']"
+          />
+        </button>
+      </li>
+      <li v-if="rows" class="max-sm:hidden sm:grow-[100]" aria-hidden="true" />
+    </ul>
+    <SiteLightbox v-model:open="open" v-model:index="index" :images="props.images" :focus-photo="focusPhoto" />
+  </div>
+</template>

package/templates/restaurant/app/components/block/Hero.vue

@@ -0,0 +1,47 @@
+<!-- Synced from templates/_features/site/app/components/block/Hero.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { ImageValue } from '@lupinum/ginko'
+
+/**
+ * The first section of the home page: the page's one h1, a lead, one primary and one secondary action, and an
+ * optional photo (16:9, 4:3 from lg). Without a photo the text takes the full width: a complete layout, not a missing image.
+ * Slots: `status`, one line above the title that answers the visitor's first question (open now, the next date);
+ * the default slot, a short line after the actions (another way to get in touch).
+ */
+defineProps<{
+  title: string
+  lead?: string
+  primary?: { label: string, to: string }
+  secondary?: { label: string, to: string }
+  image?: ImageValue
+}>()
+const titleId = useId()
+</script>
+
+<template>
+  <section :aria-labelledby="titleId" class="mx-auto max-w-page px-gutter pt-12 md:pt-20">
+    <div :class="image ? 'grid items-center gap-10 lg:grid-cols-12 lg:gap-16' : 'max-w-4xl'">
+      <div class="flex flex-col gap-6" :class="image && 'lg:col-span-6'">
+        <slot name="status" />
+        <h1 :id="titleId" class="text-h1">{{ title }}</h1>
+        <p v-if="lead" class="max-w-3xl text-lead text-muted-foreground">{{ lead }}</p>
+        <div v-if="primary || secondary" class="mt-2 flex flex-wrap gap-3">
+          <Button v-if="primary" as-child size="lg" class="h-auto min-h-12 max-w-full py-3 text-center whitespace-normal max-sm:w-full">
+            <NuxtLink :to="primary.to">{{ primary.label }}</NuxtLink>
+          </Button>
+          <Button v-if="secondary" as-child variant="outline" size="lg" class="h-auto min-h-12 max-w-full py-3 text-center whitespace-normal max-sm:w-full">
+            <NuxtLink :to="secondary.to">{{ secondary.label }}</NuxtLink>
+          </Button>
+        </div>
+        <slot />
+      </div>
+      <GinkoImage
+        v-if="image"
+        :image="image"
+        eager
+        sizes="(min-width: 1024px) 576px, 100vw"
+        class="aspect-video w-full rounded-block bg-muted object-cover lg:col-span-6 lg:aspect-4/3"
+      />
+    </div>
+  </section>
+</template>

package/templates/restaurant/app/components/block/PageHeader.vue

@@ -0,0 +1,21 @@
+<!-- Synced from templates/_features/site/app/components/block/PageHeader.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/** The first section of every page except home: the page's one h1, an optional lead and a meta line (a date). The
+ *  slot takes more below them, such as a post's authors. */
+defineProps<{
+  title: string
+  lead?: string
+  meta?: string
+}>()
+</script>
+
+<template>
+  <header class="mx-auto max-w-page px-gutter pt-12 pb-8 md:pt-20 md:pb-12">
+    <div class="flex max-w-3xl flex-col gap-5">
+      <h1 class="text-h1">{{ title }}</h1>
+      <p v-if="lead" class="text-lead text-muted-foreground">{{ lead }}</p>
+      <p v-if="meta" class="text-small text-muted-foreground tabular-nums">{{ meta }}</p>
+      <slot />
+    </div>
+  </header>
+</template>

package/templates/restaurant/app/components/block/Section.vue

@@ -0,0 +1,31 @@
+<!-- Synced from templates/_features/site/app/components/block/Section.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/**
+ * A section with a short label as heading, an optional lead, and the content in the slot. `side`: from `lg` the
+ * heading takes 4 of 12 columns and the content 8; otherwise the content runs below the heading at full width.
+ * The label is `text-h3`, the size of a Markdown `##`, so every h2 of a page has one size (only BlockCta's sentence
+ * is larger). On paper a section that fits on one page starts on a new page rather than leave its heading alone at
+ * the bottom (Chrome ignores `break-after: avoid` on the heading here); a longer one still breaks inside.
+ */
+withDefaults(defineProps<{
+  title: string
+  lead?: string
+  id?: string
+  side?: boolean
+}>(), { side: true })
+const titleId = useId()
+</script>
+
+<template>
+  <section :id="id" :aria-labelledby="titleId" class="mx-auto max-w-page px-gutter pt-section print:break-inside-avoid">
+    <div :class="side ? 'grid gap-8 lg:grid-cols-12 lg:gap-16' : 'flex flex-col gap-10'">
+      <div class="flex max-w-2xl flex-col gap-4" :class="side && 'lg:col-span-4'">
+        <h2 :id="titleId" class="text-h3">{{ title }}</h2>
+        <p v-if="lead" class="text-muted-foreground">{{ lead }}</p>
+      </div>
+      <div class="min-w-0" :class="side && 'lg:col-span-8'">
+        <slot />
+      </div>
+    </div>
+  </section>
+</template>

package/templates/restaurant/app/components/event/Upcoming.vue

@@ -0,0 +1,25 @@
+<!-- Synced from templates/_features/events/app/components/event/Upcoming.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { ArrowRight } from '@lucide/vue'
+
+/** The next events as a section of another page (the home page): up to `limit` cards and a link to all. Nothing
+ *  when no event is coming up, so a quiet month leaves no empty box on the home page. `skip` leaves out the first
+ *  events, for a page that already shows the next one on its own (the nonprofit's Get involved). */
+const props = withDefaults(defineProps<{ title?: string, limit?: number, skip?: number }>(), { limit: 3, skip: 0 })
+const upcoming = useUpcomingEvents(() => props.skip + props.limit)
+const cards = computed(() => upcoming.value.slice(props.skip))
+const { t } = useI18n('events')
+const path = useGinkoPath()
+</script>
+
+<template>
+  <BlockSection v-if="cards.length" :title="title ?? t('upcoming')" :side="false">
+    <div class="flex flex-col gap-6">
+      <BlockCards :items="cards" :columns="3" />
+      <NuxtLink :to="path('events')" class="inline-flex min-h-11 items-center gap-2 self-start font-medium text-primary underline-offset-4 hover:underline">
+        {{ t('all') }}
+        <ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+      </NuxtLink>
+    </div>
+  </BlockSection>
+</template>

package/templates/restaurant/app/components/hours/Table.vue

@@ -0,0 +1,119 @@
+<!-- Synced from templates/_features/hours/app/components/hours/Table.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { spansOf, weekdayOf, type DayHours, type HourPlan } from '@lupinum/ginko/basics'
+import { ChevronDown } from '@lucide/vue'
+
+/**
+ * The week's opening hours with today in bold and the word "Today" (no background: the rows already have lines; today's
+ * row says what applies today, a closure or other hours win), the hours that start soon (winter hours, new hours from a
+ * date; folded, one line each), the rule for public holidays and the closures ahead (a single day with its weekday,
+ * flush with the rows of the week). Times in tabular numbers; a span never breaks across lines. Place it in a section that gives
+ * the heading ("Opening hours"); `level` is the heading level of "Closures" inside it (default 3, under an h2).
+ */
+const props = withDefaults(defineProps<{ level?: 3 | 4 }>(), { level: 3 })
+const { hours, week, today, todayRule, comingPlans, closures, ctx } = useHours()
+const { t, format, locale } = useI18n('hours')
+const langOf = useGinkoLang()
+
+// 1 January 2024 was a Monday: the weekday names in the page's language from one reference week.
+const REFERENCE: Record<string, string> = { mo: '2024-01-01', tu: '2024-01-02', we: '2024-01-03', th: '2024-01-04', fr: '2024-01-05', sa: '2024-01-06', su: '2024-01-07' }
+const weekday = (key: string) => format.date(REFERENCE[key] ?? REFERENCE.mo!, { weekday: 'long' })
+const todayKey = computed(() => weekdayOf(today.value))
+// One entry per time range: the cell shows each on its own line (the "and" join stays in the one-line readers).
+const timesOf = (day: DayHours) => (day.closed || !spansOf(day).length ? [t('closed')] : spanLines(spansOf(day)))
+const todayTimes = computed(() => (todayRule.value.closed ? [t('closed')] : spanLines(todayRule.value.times)))
+const dayMonth = { day: 'numeric', month: 'long' } as const
+/** Two dates as a range: Intl's short form in one year ("1–15 November"); across a year each date in full, joined by
+ *  a spaced dash ("1 November 2026 – 31 March 2027"; Intl writes "01 novembre" in Italian there). */
+const dateRange = (from: string, to: string) => {
+  if (from.slice(0, 4) === to.slice(0, 4)) return format.range(from, to, dayMonth)
+  const full = { ...dayMonth, year: 'numeric' } as const
+  return `${format.date(from, full)} – ${format.date(to, full)}`
+}
+/** A closure's dates; a single day with its weekday ("Fri 27 November"), so the visitor sees which day is lost. */
+const closureDates = (from: string, to: string) => (from === to ? format.date(from, { weekday: 'short', ...dayMonth }) : dateRange(from, to))
+const holidayRule = computed(() => {
+  const rule = ctx.value.hours.holidays ?? 'sunday'
+  return rule === 'normal' ? undefined : t(rule === 'closed' ? 'holidays.closed' : 'holidays.sunday')
+})
+// A season that runs today, with its end (a yearly season: this year's end, which may be next year).
+const season = computed(() => {
+  const plan = week.value.plan
+  const end = comingEnd(plan)
+  if (!plan || !end) return plan?.label
+  const date = format.date(end, dayMonth)
+  return plan.label ? t('season', { name: plan.label, date }) : t('seasonUnnamed', { date })
+})
+function comingEnd(plan: HourPlan | undefined) {
+  if (!plan?.to) return undefined
+  if (!plan.yearly) return plan.to
+  const md = plan.to.slice(5)
+  const year = Number(today.value.slice(0, 4))
+  return `${today.value.slice(5) > md ? year + 1 : year}-${md}`
+}
+const planTitle = (plan: HourPlan, starts: string, ends?: string) => {
+  const dates = ends ? dateRange(starts, ends) : t('from', { date: format.date(starts, dayMonth) })
+  return plan.label ? `${dates}: ${plan.label}` : dates
+}
+const reasonOf = (closure: (typeof closures.value)[number]) => {
+  if ('holiday' in closure) return locale.value === 'de' || locale.value === 'en' ? closure.holiday[locale.value] : t('holiday')
+  return closure.reason
+}
+const reasonLang = (closure: (typeof closures.value)[number]) => ('holiday' in closure ? undefined : langOf(hours.value, `exceptions.${closure._id}.reason`))
+</script>
+
+<template>
+  <div class="flex flex-col gap-10">
+    <div class="flex flex-col gap-3">
+      <p v-if="week.plan" class="text-small text-muted-foreground">
+        {{ season }}
+      </p>
+      <table class="w-full tabular-nums">
+        <caption class="sr-only">{{ t('title') }}</caption>
+        <tbody>
+          <tr
+            v-for="day in week.days"
+            :key="day.day"
+            :aria-current="day.day === todayKey ? 'date' : undefined"
+            class="border-b first:border-t"
+          >
+            <th scope="row" class="py-3 pe-6 text-start align-baseline font-normal">
+              <span :class="day.day === todayKey && 'font-semibold'">{{ weekday(day.day) }}</span>
+              <span v-if="day.day === todayKey" class="ms-2 text-small text-muted-foreground">{{ t('today') }}</span>
+            </th>
+            <td class="py-3 text-end align-baseline" :class="day.day === todayKey && 'font-semibold'">
+              <span v-for="line in (day.day === todayKey ? todayTimes : timesOf(day))" :key="line" class="block whitespace-nowrap">{{ line }}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <p v-if="holidayRule" class="text-small text-muted-foreground">{{ holidayRule }}</p>
+    </div>
+
+    <details v-for="coming in comingPlans" :key="coming.plan._id ?? coming.starts" class="group flex flex-col gap-3">
+      <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 font-semibold tabular-nums [&::-webkit-details-marker]:hidden">
+        {{ planTitle(coming.plan, coming.starts, coming.ends) }}
+        <ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-180" aria-hidden="true" />
+      </summary>
+      <table class="mt-2 w-full text-small tabular-nums">
+        <caption class="sr-only">{{ planTitle(coming.plan, coming.starts, coming.ends) }}</caption>
+        <tbody>
+          <tr v-for="day in coming.plan.week" :key="day.day" class="border-b first:border-t">
+            <th scope="row" class="py-2 pe-6 text-start font-normal">{{ weekday(day.day) }}</th>
+            <td class="py-2 text-end"><span v-for="line in timesOf(day)" :key="line" class="block whitespace-nowrap">{{ line }}</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </details>
+
+    <div v-if="closures.length" class="flex flex-col gap-3">
+      <component :is="`h${props.level}`" class="text-body font-semibold">{{ t('closures') }}</component>
+      <ul class="flex flex-col">
+        <li v-for="closure in closures" :key="closure._id" class="flex flex-wrap justify-between gap-x-6 border-b py-2 first:border-t">
+          <span class="tabular-nums">{{ closureDates(closure.when.from, closure.when.to) }}</span>
+          <span class="text-muted-foreground"><span :lang="reasonLang(closure)">{{ reasonOf(closure) || t('closedDays') }}</span></span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

package/templates/restaurant/app/components/hours/Today.vue

@@ -0,0 +1,55 @@
+<!-- Synced from templates/_features/hours/app/components/hours/Today.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/**
+ * The answer to "are you open?": open now and until when, opening later today, or closed today with the owner's
+ * reason or the public holiday, then today's times or the next opening. The state is a word, the dot only repeats it.
+ * The clock moves on every minute, so a page left open stays true; on paper it would go stale, so it does not print.
+ * `small`: in small text, for the footer.
+ */
+defineProps<{ small?: boolean }>()
+const { state, todayRule, nextOpen, now } = useHours()
+const { t, format, locale } = useI18n('hours')
+
+onMounted(() => {
+  now.value = Date.now()
+  const timer = setInterval(() => (now.value = Date.now()), 60_000)
+  onBeforeUnmount(() => clearInterval(timer))
+})
+
+const open = computed(() => state.value.kind === 'open')
+const headline = computed(() => {
+  const s = state.value
+  if (s.kind === 'open') return t('now.open')
+  if (s.kind === 'later') return s.again ? t('now.again', { time: s.at }) : t('now.later', { time: s.at })
+  if (s.kind === 'over') return t('now.over')
+  if (s.kind === 'closed') return t('now.closed')
+  return t('now.unknown')
+})
+const detail = computed(() => {
+  const s = state.value
+  if (s.kind === 'open') return t('now.until', { time: s.until })
+  if (s.kind !== 'closed') return undefined
+  if (s.holiday) return locale.value === 'de' || locale.value === 'en' ? s.holiday[locale.value] : t('holiday')
+  return s.reason
+})
+// Today's spans while they still matter; once the day is over or closed, the next opening instead.
+const times = computed(() => (state.value.kind === 'open' || state.value.kind === 'later') && todayRule.value.times.length
+  ? t('todayTimes', { times: spansLine(todayRule.value.times, t('and')) })
+  : undefined)
+const next = computed(() => (state.value.kind === 'over' || state.value.kind === 'closed') && nextOpen.value
+  ? t('now.next', { day: format.date(nextOpen.value.date, { weekday: 'long', day: 'numeric', month: 'long' }), time: nextOpen.value.from })
+  : undefined)
+</script>
+
+<template>
+  <div class="flex flex-col gap-1 print:hidden" data-hours-now>
+    <p class="flex flex-wrap items-center gap-x-2 tabular-nums" :class="small ? 'text-small' : 'text-body'">
+      <span class="inline-flex items-center gap-2 font-semibold">
+        <span class="size-2.5 shrink-0 rounded-full" :class="open ? 'bg-success' : 'bg-muted-foreground'" aria-hidden="true" />
+        {{ headline }}
+      </span>
+      <span v-if="detail" class="text-muted-foreground">{{ detail }}</span>
+    </p>
+    <p v-if="times || next" class="ps-4.5 text-small text-muted-foreground tabular-nums">{{ times ?? next }}</p>
+  </div>
+</template>

package/templates/restaurant/app/components/menu/AllergenKey.vue

@@ -0,0 +1,17 @@
+<!-- Synced from templates/_features/menu/app/components/menu/AllergenKey.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/** The key to the allergen codes used on the page: code and name, the EU letters in alphabetical order. A code the
+ *  menu texts do not name stands alone. */
+const props = defineProps<{ codes: readonly string[] }>()
+const nameOf = useAllergenName()
+const codes = computed(() => allergenList(props.codes))
+</script>
+
+<template>
+  <dl v-if="codes.length" class="grid grid-cols-2 gap-x-6 gap-y-2 sm:grid-cols-3 print:grid-cols-4">
+    <div v-for="code in codes" :key="code" class="flex items-baseline gap-3">
+      <dt class="min-w-4 font-semibold tabular-nums">{{ code }}</dt>
+      <dd v-if="nameOf(code) !== code" class="text-muted-foreground">{{ nameOf(code) }}</dd>
+    </div>
+  </dl>
+</template>

package/templates/restaurant/app/components/menu/Allergens.vue

@@ -0,0 +1,24 @@
+<!-- Synced from templates/_features/menu/app/components/menu/Allergens.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/**
+ * The allergen codes of a dish as the menu stores them. Each code is shown, its name is read out and shown on hover;
+ * the page also shows the key (MenuAllergenKey). A code the menu texts do not name shows as it is written. "No
+ * allergens" only when the stored list is empty.
+ */
+const props = defineProps<{ codes: readonly string[] }>()
+const { t } = useI18n('menu')
+const nameOf = useAllergenName()
+const codes = computed(() => allergenList(props.codes))
+</script>
+
+<template>
+  <span v-if="codes.length" class="inline-flex flex-wrap gap-1">
+    <abbr
+      v-for="code in codes"
+      :key="code"
+      :title="nameOf(code)"
+      class="inline-grid h-6 min-w-6 place-items-center rounded-sm border px-1 text-xs font-medium text-muted-foreground no-underline"
+    ><span aria-hidden="true">{{ code }}</span><span class="sr-only">{{ nameOf(code) }}</span></abbr>
+  </span>
+  <span v-else class="text-small text-muted-foreground">{{ t('allergens.none') }}</span>
+</template>

package/templates/restaurant/app/components/menu/Diet.vue

@@ -0,0 +1,16 @@
+<!-- Synced from templates/_features/menu/app/components/menu/Diet.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { Leaf } from '@lucide/vue'
+
+/** "vegetarian" or "vegan" as a word with a leaf; nothing for other dishes. */
+const props = defineProps<{ veg: string }>()
+const { t } = useI18n('menu')
+const label = computed(() => (props.veg === 'vegan' ? t('diet.vegan') : props.veg === 'vegetarian' ? t('diet.vegetarian') : undefined))
+</script>
+
+<template>
+  <span v-if="label" class="inline-flex items-center gap-1.5 text-small">
+    <Leaf class="size-4 shrink-0 text-success" aria-hidden="true" />
+    {{ label }}
+  </span>
+</template>

package/templates/restaurant/app/components/menu/Dish.vue

@@ -0,0 +1,30 @@
+<!-- Synced from templates/_features/menu/app/components/menu/Dish.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { formatMoney } from '@lupinum/ginko'
+
+/** One dish: name and today's price on one line, the description, then vegetarian or vegan and the allergen letters.
+ *  A dish sold out today says so in words; a price change within two weeks is announced under the price. */
+defineProps<{ dish: ReturnType<typeof useMenu>['dishes']['value'][number] }>()
+const { t, format, language } = useI18n('menu')
+const langOf = useGinkoLang()
+</script>
+
+<template>
+  <div class="flex flex-col gap-1.5 py-4 break-inside-avoid">
+    <div class="flex items-baseline justify-between gap-6">
+      <h3 class="text-body font-semibold" :class="dish.soldOut && 'text-muted-foreground'">
+        <span :lang="langOf(dish.item, 'name')">{{ dish.item.data.name }}</span>
+        <template v-if="dish.soldOut">{{ ' ' }}<span class="ms-1 text-small font-medium whitespace-nowrap text-foreground">{{ t('soldOut') }}</span></template>
+      </h3>
+      <p class="shrink-0 text-body tabular-nums" :class="dish.soldOut && 'text-muted-foreground'">{{ formatMoney(dish.price, language) }}</p>
+    </div>
+    <p v-if="dish.next" class="text-small text-muted-foreground tabular-nums">
+      {{ t('priceFrom', { date: format.date(dish.next.from, { day: 'numeric', month: 'long' }), price: formatMoney(dish.next.price, language) }) }}
+    </p>
+    <p v-if="dish.item.data.description" class="max-w-prose text-small text-muted-foreground" :lang="langOf(dish.item, 'description')">{{ dish.item.data.description }}</p>
+    <div class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1.5">
+      <MenuDiet :veg="String(dish.item.data.veg)" />
+      <MenuAllergens :codes="dish.item.data.allergens.map(String)" />
+    </div>
+  </div>
+</template>

package/templates/restaurant/app/components/menu/LunchDays.vue

@@ -0,0 +1,42 @@
+<!-- Synced from templates/_features/menu/app/components/menu/LunchDays.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { formatMoney } from '@lupinum/ginko'
+import { isLunchPlaceholder } from '@lupinum/ginko-preset-gastro'
+
+/** The lunch days of the week shown: weekday and date, the dish, its price and allergen letters. Days before today
+ *  are left out on screen (a guest cannot order them) and stay on paper. Today is marked in words; a day the place
+ *  is closed says "Closed" instead of a dish. A day still holding the placeholder dish of a fresh site has no
+ *  allergen line: there is no dish to name allergens for. */
+const { lunch, days } = useLunch()
+const { t, format, language } = useI18n('menu')
+const langOf = useGinkoLang()
+// Index of today; at the weekend (the coming week) there is none, so nothing is hidden.
+const first = computed(() => Math.max(0, days.value.findIndex((day) => day.today)))
+</script>
+
+<template>
+  <ol class="flex flex-col border-t">
+    <li
+      v-for="(day, index) in days"
+      :key="day._id"
+      :aria-current="day.today ? 'date' : undefined"
+      :class="index < first && 'not-print:hidden'"
+      class="grid gap-x-6 gap-y-1 border-b px-3 py-4 break-inside-avoid aria-[current=date]:bg-muted sm:grid-cols-[11rem_1fr_auto] sm:items-baseline print:aria-[current=date]:bg-transparent"
+    >
+      <p class="flex flex-wrap gap-x-2 text-small text-muted-foreground tabular-nums">
+        <span class="whitespace-nowrap" :class="day.today && 'font-semibold text-foreground'">{{ format.date(day.date, { weekday: 'long', day: 'numeric', month: 'long' }) }}</span>
+        <span v-if="day.today" class="whitespace-nowrap print:hidden">{{ t('lunch.today') }}</span>
+      </p>
+      <template v-if="day.closed">
+        <p class="text-muted-foreground">{{ t('lunch.closed') }}<template v-if="day.reason"> · {{ day.reason }}</template></p>
+      </template>
+      <template v-else>
+        <div class="flex flex-col gap-1.5">
+          <p class="font-medium" :lang="langOf(lunch, `days.${day._id}.dish`)">{{ day.dish }}</p>
+          <MenuAllergens v-if="!isLunchPlaceholder(day.dish)" :codes="day.allergens.map(String)" />
+        </div>
+        <p v-if="day.price" class="tabular-nums sm:text-end">{{ formatMoney(day.price, language) }}</p>
+      </template>
+    </li>
+  </ol>
+</template>

package/templates/restaurant/app/components/site/Contact.vue

@@ -0,0 +1,38 @@
+<!-- Synced from templates/_features/site/app/components/site/Contact.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { Mail, MapPin, Phone } from '@lucide/vue'
+
+// The email, phone and address of content/site.md for a page that points to them in its text (the pages feature's
+// `components/pages/Top.vue` hook, below the page title). The values are never copied into a text: the owner changes
+// them once, in site.md, and the footer, the imprint and this block follow. `address="false"`: only email and phone, for
+// a band whose page has the address in the footer anyway.
+const { address = true } = defineProps<{ address?: boolean }>()
+const site = useGinko('site')
+const contact = computed(() => site.value.data)
+// A narrow screen breaks a long address after the @ (the <wbr>), not inside a word.
+const email = computed(() => {
+  const value = contact.value.email ?? ''
+  const at = value.indexOf('@') + 1
+  return [value.slice(0, at), value.slice(at)]
+})
+</script>
+
+<template>
+  <!-- Each line keeps the direction of its own text (bdi); email and phone are always left to right, as in the footer. -->
+  <address v-if="contact.email || contact.phone || (address && contact.city)" class="flex flex-col not-italic">
+    <a v-if="contact.email" :href="`mailto:${contact.email}`" dir="ltr" class="inline-flex min-h-11 items-center gap-2 self-start text-primary underline underline-offset-4">
+      <Mail class="size-4 shrink-0" aria-hidden="true" /><span>{{ email[0] }}<wbr>{{ email[1] }}</span>
+    </a>
+    <a v-if="contact.phone" :href="telHref(contact.phone)" dir="ltr" class="inline-flex min-h-11 items-center gap-2 self-start tabular-nums text-primary underline underline-offset-4">
+      <Phone class="size-4 shrink-0" aria-hidden="true" />{{ contact.phone }}
+    </a>
+    <span v-if="address && contact.city" class="flex items-start gap-2 py-2">
+      <MapPin class="mt-1 size-4 shrink-0" aria-hidden="true" />
+      <span class="flex flex-col">
+        <span v-if="contact.legalName"><bdi>{{ contact.legalName }}</bdi></span>
+        <span v-if="contact.street"><bdi>{{ contact.street }}</bdi></span>
+        <span><bdi>{{ contact.postalCode }} {{ contact.city }}</bdi></span>
+      </span>
+    </span>
+  </address>
+</template>