create-ginko 0.4.0 → 0.6.0

package/templates/restaurant/app/pages/events/[slug].vue

@@ -0,0 +1,106 @@
+<!-- Synced from templates/_features/events/app/pages/events/[slug].vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { Component, ComputedRef } from 'vue'
+import { safeHref } from '@lupinum/ginko'
+import type { SessionJsonLdInput } from '@lupinum/ginko/basics'
+import { ArrowLeft, Mail, Phone } from '@lucide/vue'
+
+// One event: date with weekday and time (site time zone), place (its location, else the online link, else the
+// site's name and address when app.config `events.atTheBusiness` is true; otherwise no row: content/site.md is the organiser, not the venue), price, the description, and how to take part: the
+// booking link until `bookingUntil`, else phone and email of the business (content/site.md); "fully booked" or
+// "booking has closed" replaces both. Event JSON-LD with the time zone offset. An unknown or past event is a 404.
+// A feature may show more after the description with app/components/event/Programme.vue (prop `id`: the event's
+// entry id), and give the event's sessions to its JSON-LD with `useSessionsLd` in app/composables/useSessions.ts;
+// the sessions feature brings both: the event's programme. Without those files, nothing is added.
+const EventProgramme = Object.values(import.meta.glob<Component>('~/components/event/Programme.vue', { eager: true, import: 'default' }))[0]
+type SessionsLd = (event: () => string) => ComputedRef<SessionJsonLdInput[]>
+const useSessionsLd = Object.values(import.meta.glob<SessionsLd>('~/composables/useSessions.ts', { eager: true, import: 'useSessionsLd' }))[0]
+const route = useRoute()
+const event = useGinkoEntry('events', () => route.params.slug)
+const site = useGinko('site')
+const { t } = useI18n('events')
+const { dates, times, price, ltr } = useEventText()
+const venue = useEventVenue()
+const path = useGinkoPath()
+const langOf = useGinkoLang()
+const description = await useGinkoMarkdown(() => event.value.data.description)
+const sessions = useSessionsLd?.(() => event.value.id)
+const jsonLd = useEventJsonLd(() => ({ ...event.value.data, url: event.value.url ?? route.path }), () => description.value, () => sessions?.value)
+// The meta description is plain text: the isolate marks of a right-to-left page stay out of it.
+const metaDescription = () => `${dates(event.value.data)}${times(event.value.data) ? `, ${times(event.value.data)}` : ''}`.replace(/[\u2066\u2069]/g, '')
+usePageSeo(() => ({ title: event.value.data.title, description: metaDescription(), image: event.value.data.image ?? undefined, jsonLd: [jsonLd.value] }))
+
+const contact = computed(() => site.value.data)
+const bookingOf = useEventBooking()
+const closedOf = useBookingClosed()
+const booking = computed(() => bookingOf(event.value.data))
+const closed = computed(() => closedOf(event.value.data))
+const online = computed(() => safeHref(event.value.data.online ?? undefined))
+const atBusiness = computed(() => (event.value.data.location || online.value ? undefined : venue(event.value.data)))
+const place = computed(() => event.value.data.location || (online.value ? t('online') : atBusiness.value?.name))
+const businessAddress = computed(() => {
+  const a = atBusiness.value?.address
+  return a && [a.street, [a.postalCode, a.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')
+})
+</script>
+
+<template>
+  <article>
+    <div class="mx-auto max-w-page px-gutter pt-8 md:pt-12">
+      <NuxtLink :to="path('events')" class="-ms-1 inline-flex min-h-11 items-center gap-2 px-1 text-small font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
+        <ArrowLeft class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+        {{ t('all') }}
+      </NuxtLink>
+    </div>
+    <header class="mx-auto max-w-page px-gutter pt-4 pb-8 md:pb-12">
+      <div class="flex max-w-3xl flex-col gap-5">
+        <h1 class="text-h1" :lang="langOf(event, 'title')">{{ event.data.title }}</h1>
+        <dl class="grid gap-x-8 gap-y-3 sm:grid-cols-[auto_1fr]">
+          <dt class="text-small text-muted-foreground">{{ t('date') }}</dt>
+          <dd class="font-medium tabular-nums">{{ dates(event.data) }}</dd>
+          <template v-if="times(event.data)">
+            <dt class="text-small text-muted-foreground">{{ t('time') }}</dt>
+            <dd class="font-medium tabular-nums">{{ times(event.data) }}</dd>
+          </template>
+          <template v-if="place">
+            <dt class="text-small text-muted-foreground">{{ t('place') }}</dt>
+            <dd class="font-medium">
+              <a v-if="!event.data.location && online" :href="online" rel="noopener" class="text-primary underline">{{ place }}</a>
+              <span v-else>{{ place }}</span>
+              <span v-if="businessAddress" class="block font-normal text-muted-foreground">{{ businessAddress }}</span>
+            </dd>
+          </template>
+          <template v-if="price(event.data)">
+            <dt class="text-small text-muted-foreground">{{ t('price') }}</dt>
+            <dd class="font-medium tabular-nums">{{ price(event.data) }}</dd>
+          </template>
+        </dl>
+        <p v-if="event.data.soldOut" class="text-lead font-semibold">{{ t('soldOut') }}</p>
+        <p v-else-if="closed" class="text-lead font-semibold">{{ t('bookingClosed') }}</p>
+        <div v-else-if="booking" class="flex flex-wrap gap-3">
+          <Button as-child size="lg" class="max-sm:w-full">
+            <a :href="booking" rel="noopener">{{ t('book') }}</a>
+          </Button>
+        </div>
+        <div v-else-if="contact.phone || contact.email" class="flex flex-col gap-3">
+          <p class="text-muted-foreground">{{ t('reserve') }}</p>
+          <div class="flex flex-wrap gap-3">
+            <Button v-if="contact.phone" as-child size="lg" class="max-sm:w-full">
+              <a :href="telHref(contact.phone)"><Phone aria-hidden="true" />{{ t('call', { phone: ltr(contact.phone) }) }}</a>
+            </Button>
+            <Button v-if="contact.email" as-child size="lg" :variant="contact.phone ? 'outline' : 'default'" class="max-sm:w-full">
+              <a :href="`mailto:${contact.email}`"><Mail aria-hidden="true" />{{ t('email') }}</a>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </header>
+    <div v-if="event.data.image" class="mx-auto max-w-page px-gutter pb-10">
+      <GinkoImage :image="event.data.image" eager sizes="(min-width: 1216px) 1152px, 100vw" class="aspect-video w-full rounded-block bg-muted object-cover" :lang="langOf(event, 'image.alt')" />
+    </div>
+    <div :lang="langOf(event, 'description')">
+      <ProseBody :value="event.data.description" />
+    </div>
+    <component :is="EventProgramme" v-if="EventProgramme" :id="event.id" />
+  </article>
+</template>

package/templates/restaurant/app/pages/events/index.vue

@@ -0,0 +1,20 @@
+<!-- Synced from templates/_features/events/app/pages/events/index.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// Upcoming events (content/events/), the next first, with weekday, date, time, price and "fully booked". An event
+// leaves this list, the sitemap and search engines after its last day. The cards' titles are h3: a hidden h2 keeps the
+// heading order (h1, h2, h3) for screen readers.
+const cards = useUpcomingEvents()
+const { t } = useI18n('events')
+usePageSeo(() => ({ title: t('title'), description: t('lead') }))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader :title="t('title')" :lead="t('lead')" />
+    <div class="mx-auto max-w-page px-gutter">
+      <h2 v-if="cards.length" class="sr-only">{{ t('upcoming') }}</h2>
+      <BlockCards v-if="cards.length" :items="cards" :columns="3" />
+      <p v-else class="max-w-prose text-lead text-muted-foreground">{{ t('none') }}</p>
+    </div>
+  </div>
+</template>

package/templates/restaurant/app/pages/gallery.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+// All photos of content/gallery.md in justified rows; each opens in the lightbox.
+const gallery = useGinko('gallery')
+const { t } = useI18n('home')
+const images = computed(() => gallery.value.data.images.map((entry) => entry.image))
+usePageSeo(() => ({ title: t('gallery'), description: t('galleryLead'), image: images.value[0] }))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader :title="t('gallery')" :lead="t('galleryLead')" />
+    <div class="mx-auto max-w-page px-gutter">
+      <BlockGallery v-if="images.length" :images="images" />
+      <BlockEmpty v-else :title="t('galleryEmpty')" path="content/gallery.md" />
+    </div>
+  </div>
+</template>

package/templates/restaurant/app/pages/index.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { formatMoney } from '@lupinum/ginko'
+import { isLunchPlaceholder, restaurantJsonLd } from '@lupinum/ginko-preset-gastro'
+import { ArrowRight, Mail, MapPin, Phone } from '@lucide/vue'
+
+// The home page answers the first questions on the first screen: open now, the menu, how to reserve (phone and email,
+// no form), where (the address with a map link) and today's lunch as one line that links to its card. Below: the lunch card, a few dishes, the next events, photos, and
+// the hours with the address.
+const home = useGinko('home')
+const site = useGinko('site')
+const gallery = useGinko('gallery')
+const { groups } = useMenu()
+const { lunch, days } = useLunch()
+const { ctx, today, now } = useHours()
+const { name, url, timeZone } = useGinkoSite()
+const { t, language } = useI18n('home')
+const path = useGinkoPath()
+const langOf = useGinkoLang()
+const country: string = useRuntimeConfig().public.ginko.country
+const { t: tm } = useI18n('menu')
+const allergenName = useAllergenName()
+
+const contact = computed(() => site.value.data)
+const reserve = computed(() => (contact.value.phone ? { label: t('call', { phone: contact.value.phone }), to: telHref(contact.value.phone) } : undefined))
+// A few dishes from the menu: the first mains, in the owner's order (the order of content/menu/).
+const dishes = computed(() => (groups.value.find((group) => group.category === 'mains') ?? groups.value[0])?.dishes.slice(0, 4) ?? [])
+const address = computed(() => [contact.value.street, [contact.value.postalCode, contact.value.city].filter(Boolean).join(' ')].filter(Boolean))
+// "Open in maps": a link to OpenStreetMap with the address, no embedded map (nothing loads from another company).
+const maps = computed(() => (address.value.length ? `https://www.openstreetmap.org/search?query=${encodeURIComponent([...address.value, country].join(', '))}` : undefined))
+
+// Today's lunch while it is served; once today's lunch time is over, tomorrow's dish (or nothing), so the card never
+// offers a dish the kitchen no longer serves. The lead says when lunch is served; the allergens are spelled out in one line (no letter chips, which need a hover).
+const lunchCard = computed(() => {
+  const day = days.value.find((d) => d.today && !d.closed)
+  if (day && !(day.served && clockIn(timeZone, now.value) >= day.served.to)) return { day, title: t('lunch') }
+  const tomorrow = days.value.find((d) => d.date === plusDays(today.value, 1) && !d.closed)
+  return tomorrow ? { day: tomorrow, title: t('lunchTomorrow') } : undefined
+})
+const lunchShowsAllergens = computed(() => lunchCard.value !== undefined && !isLunchPlaceholder(lunchCard.value.day.dish))
+const lunchAllergens = computed(() => allergenList(lunchShowsAllergens.value ? lunchCard.value?.day.allergens.map(String) : []).map((code) => `${code} ${allergenName(code)}`).join(', '))
+
+// The house for search engines: a Restaurant with address, phone, opening hours (the same rule as the page) and the
+// menu with today's prices.
+const absolute = (p: string) => new URL(p, url).href
+const restaurant = computed(() => restaurantJsonLd({
+  name,
+  url: absolute(path('home')),
+  today: today.value,
+  hours: ctx.value,
+  address: contact.value.street && contact.value.city ? { street: contact.value.street, postalCode: contact.value.postalCode, city: contact.value.city, country } : undefined,
+  telephone: contact.value.phone,
+  email: contact.value.email,
+  menu: {
+    url: absolute(path('menu')),
+    sections: groups.value.map((group) => ({
+      name: tm(`categories.${group.category}`),
+      items: group.dishes.map((dish) => ({ name: dish.item.data.name, description: dish.item.data.description ?? undefined, price: dish.price })),
+    })),
+  },
+}))
+usePageSeo(() => ({ home: true, description: home.value.data.lead, image: home.value.data.image ?? undefined, organization: restaurant.value }))
+</script>
+
+<template>
+  <div>
+    <BlockHero
+      :title="home.data.title"
+      :lead="home.data.lead"
+      :primary="reserve"
+      :secondary="{ label: t('menu'), to: path('menu') }"
+      :image="home.data.image ?? undefined"
+    >
+      <template #status>
+        <HoursToday />
+      </template>
+      <div class="flex flex-col text-small text-muted-foreground">
+        <p v-if="contact.email">
+          {{ t('orEmail') }}
+          <a :href="`mailto:${contact.email}`" class="inline-flex min-h-11 items-center font-medium text-foreground underline underline-offset-4 hover:text-primary">{{ contact.email }}</a>
+        </p>
+        <p v-if="address.length" class="flex flex-wrap items-center gap-x-2">
+          <MapPin class="size-4 shrink-0" aria-hidden="true" />
+          <span>{{ address.join(', ') }}</span>
+          <a v-if="maps" :href="maps" rel="noopener" class="inline-flex min-h-11 items-center font-medium text-foreground underline underline-offset-4 hover:text-primary">{{ t('maps') }}</a>
+        </p>
+        <p v-if="lunchCard && !isLunchPlaceholder(lunchCard.day.dish)">
+          <a href="#lunch" class="inline-block py-2.5 font-medium text-foreground underline underline-offset-4 hover:text-primary">{{ lunchCard.title }}: <span :lang="langOf(lunch, `days.${lunchCard.day._id}.dish`)">{{ lunchCard.day.dish }}</span><template v-if="lunchCard.day.price"> · <span class="whitespace-nowrap tabular-nums">{{ formatMoney(lunchCard.day.price, language) }}</span></template></a>
+        </p>
+      </div>
+    </BlockHero>
+
+    <BlockSection v-if="lunchCard" id="lunch" :title="lunchCard.title" :lead="lunchCard.day.served ? tm('lunch.served', { from: lunchCard.day.served.from, to: lunchCard.day.served.to }) : undefined">
+      <div class="flex flex-col gap-4 rounded-block border p-6">
+        <div class="flex items-baseline justify-between gap-6">
+          <p class="text-body font-semibold" :lang="langOf(lunch, `days.${lunchCard.day._id}.dish`)">{{ lunchCard.day.dish }}</p>
+          <p v-if="lunchCard.day.price" class="shrink-0 text-body tabular-nums">{{ formatMoney(lunchCard.day.price, language) }}</p>
+        </div>
+        <p v-if="lunchAllergens" class="text-small text-muted-foreground">{{ tm('allergens.label', { names: lunchAllergens }) }}</p>
+        <NuxtLink :to="path('lunch')" class="inline-flex min-h-11 items-center gap-2 self-start font-medium text-primary underline-offset-4 hover:underline">
+          {{ t('lunchWeek') }}
+          <ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+        </NuxtLink>
+      </div>
+    </BlockSection>
+
+    <BlockSection v-if="dishes.length" :title="t('dishes')" :lead="t('dishesLead')">
+      <ul class="flex flex-col divide-y border-y">
+        <li v-for="dish in dishes" :key="dish.item.id">
+          <MenuDish :dish="dish" />
+        </li>
+      </ul>
+      <NuxtLink :to="path('menu')" class="mt-4 inline-flex min-h-11 items-center gap-2 font-medium text-primary underline-offset-4 hover:underline">
+        {{ t('fullMenu') }}
+        <ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+      </NuxtLink>
+    </BlockSection>
+
+    <EventUpcoming :limit="3" />
+
+    <BlockSection v-if="gallery.data.images.length" :title="t('gallery')" :side="false">
+      <div class="flex flex-col gap-6">
+        <BlockGallery :images="gallery.data.images.slice(0, 3).map((entry) => entry.image)" />
+        <NuxtLink :to="path('gallery')" class="inline-flex min-h-11 items-center gap-2 self-start font-medium text-primary underline-offset-4 hover:underline">
+          {{ t('allPhotos') }}
+          <ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+        </NuxtLink>
+      </div>
+    </BlockSection>
+
+    <BlockSection id="visit" :title="t('visit')" :side="false">
+      <div class="grid gap-12 md:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] lg:gap-24">
+        <div class="flex flex-col gap-4">
+          <h3 class="text-body font-semibold">{{ t('hours') }}</h3>
+          <HoursTable :level="4" />
+        </div>
+        <div class="flex flex-col gap-4">
+          <h3 class="text-body font-semibold">{{ t('address') }}</h3>
+          <address class="flex flex-col gap-1 not-italic">
+            <span>{{ name }}</span>
+            <span v-for="line in address" :key="line">{{ line }}</span>
+          </address>
+          <ul class="flex flex-col">
+            <li v-if="maps">
+              <a :href="maps" rel="noopener" class="inline-flex min-h-11 items-center gap-3 underline-offset-4 hover:underline">
+                <MapPin class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />{{ t('maps') }}
+              </a>
+            </li>
+            <li v-if="contact.phone">
+              <a :href="telHref(contact.phone)" class="inline-flex min-h-11 items-center gap-3 tabular-nums underline-offset-4 hover:underline">
+                <Phone class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />{{ contact.phone }}
+              </a>
+            </li>
+            <li v-if="contact.email">
+              <a :href="`mailto:${contact.email}`" class="inline-flex min-h-11 items-center gap-3 underline-offset-4 hover:underline">
+                <Mail class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />{{ contact.email }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </BlockSection>
+  </div>
+</template>

package/templates/restaurant/app/pages/legal/[slug].vue

@@ -0,0 +1,46 @@
+<!-- Synced from templates/_features/site/app/pages/legal/[slug].vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// One legal text (content/legal/): privacy policy, terms, imprint. Address: /legal/<slug> in every language.
+// The imprint starts with the details of content/site.md (name, address, register, VAT number, email, phone), so the
+// owner writes them once; the text below adds what site.md cannot hold. A detail site.md does not have is left out.
+// Email and phone are links (mailto:, tel:), like on the contact page.
+const route = useRoute()
+const entry = useGinkoEntry('legal', () => route.params.slug)
+const site = useGinko('site')
+const { t, format } = useI18n('site')
+const details = computed(() => {
+  const d = site.value.data
+  if (entry.value.data.legalType !== 'imprint') return []
+  const rows: { label: string, value?: string, href?: string }[] = [
+    { label: t('imprint.address'), value: [d.legalName, d.street, d.city ? `${d.postalCode ?? ''} ${d.city}` : undefined].filter(Boolean).join('\n') },
+    { label: t('imprint.registry'), value: [d.registryCourt, d.registryNumber].filter(Boolean).join(', ') },
+    { label: t('imprint.vat'), value: d.vatId },
+    { label: t('imprint.email'), value: d.email, href: d.email ? `mailto:${d.email}` : undefined },
+    { label: t('imprint.phone'), value: d.phone, href: d.phone ? telHref(d.phone) : undefined },
+  ]
+  return rows.filter((row) => row.value)
+})
+usePageSeo(() => ({ title: entry.value.data.title, description: entry.value.data.description }))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader
+      :title="entry.data.title"
+      :lead="entry.data.description"
+      :meta="t('updated', { date: format.date(entry.data.updatedAt) })"
+    />
+    <!-- Each value keeps the direction of its own text (bdi), as in the footer. A link gets its 44 px tap height from
+         padding with a negative margin, so it stays on its label's line. -->
+    <dl v-if="details.length" class="mx-auto grid max-w-page gap-x-8 gap-y-1 px-gutter pb-10 sm:grid-cols-[auto_1fr] sm:gap-y-3">
+      <template v-for="row in details" :key="row.label">
+        <dt class="text-small text-muted-foreground max-sm:not-first:mt-3">{{ row.label }}</dt>
+        <dd class="whitespace-pre-line">
+          <a v-if="row.href" :href="row.href" dir="ltr" class="-my-2.5 inline-block py-2.5 underline underline-offset-4">{{ row.value }}</a>
+          <bdi v-else>{{ row.value }}</bdi>
+        </dd>
+      </template>
+    </dl>
+    <ProseBody :value="entry.data.body" />
+  </div>
+</template>

package/templates/restaurant/app/pages/lunch.vue

@@ -0,0 +1,30 @@
+<!-- Synced from templates/_features/menu/app/pages/lunch.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// The lunch menu of the week (content/lunch.md): shown for this work week only (at the weekend the coming one), so an
+// old week never stays online. When lunch is served (the day's first opening span); today is marked; a closed day says
+// so instead of a dish. A placeholder day (a fresh site) adds nothing to the allergen key.
+import { isLunchPlaceholder } from '@lupinum/ginko-preset-gastro'
+const { lunch, week, days, served } = useLunch()
+const { t, format } = useI18n('menu')
+const langOf = useGinkoLang()
+const range = computed(() => (days.value.length ? format.range(days.value[0]!.date, days.value.at(-1)!.date, { day: 'numeric', month: 'long' }) : undefined))
+const used = computed(() => days.value.filter((day) => !day.closed && !isLunchPlaceholder(day.dish)).flatMap((day) => day.allergens.map(String)))
+usePageSeo(() => ({ title: t('lunch.title'), description: week.value ? `${t('lunch.title')}: ${range.value}` : t('lunch.pending') }))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader :title="t('lunch.title')" :lead="week ? range : t('lunch.pending')" />
+    <div v-if="week" class="mx-auto flex max-w-page flex-col gap-10 px-gutter">
+      <div class="flex max-w-4xl flex-col gap-4">
+        <p v-if="served" class="tabular-nums">{{ t('lunch.served', { from: served.from, to: served.to }) }}</p>
+        <MenuLunchDays />
+        <p v-if="lunch.data.note" class="text-muted-foreground" :lang="langOf(lunch, 'note')">{{ lunch.data.note }}</p>
+      </div>
+      <section v-if="used.length" class="flex max-w-4xl flex-col gap-4" aria-labelledby="lunch-allergens">
+        <h2 id="lunch-allergens" class="text-h3">{{ t('allergens.title') }}</h2>
+        <MenuAllergenKey :codes="used" />
+      </section>
+    </div>
+  </div>
+</template>

package/templates/restaurant/app/pages/menu/index.vue

@@ -0,0 +1,46 @@
+<!-- Synced from templates/_features/menu/app/pages/menu/index.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { Printer } from '@lucide/vue'
+
+// The menu by category (content/menu/), today's prices, vegetarian and vegan dishes, the allergen codes and their
+// key. A dish taken off the menu is left out; a dish sold out today stays and says so. A row of links under the
+// header jumps to each category, so a long menu on a phone needs no scrolling to find the desserts.
+const { groups, allergens } = useMenu()
+const { t, localePath } = useI18n('menu')
+usePageSeo(() => ({ title: t('title'), description: t('lead') }))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader :title="t('title')" :lead="t('lead')" />
+    <div class="mx-auto flex max-w-page flex-col gap-2 px-gutter">
+      <NuxtLink :to="localePath('/menu/print')" data-menu-print class="inline-flex min-h-11 items-center gap-2 self-start text-small font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
+        <Printer class="size-4" aria-hidden="true" />
+        {{ t('print') }}
+      </NuxtLink>
+      <nav v-if="groups.length > 1" :aria-label="t('jump')">
+        <ul class="flex flex-wrap gap-x-5 text-small">
+          <li v-for="group in groups" :key="group.category">
+            <a :href="`#menu-${group.category}`" class="inline-flex min-h-11 items-center font-medium text-primary underline-offset-4 hover:underline">{{ t(`categories.${group.category}`) }}</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <BlockSection v-for="group in groups" :id="`menu-${group.category}`" :key="group.category" :title="t(`categories.${group.category}`)">
+      <ul class="flex flex-col divide-y border-y">
+        <li v-for="dish in group.dishes" :key="dish.item.id">
+          <MenuDish :dish="dish" />
+        </li>
+      </ul>
+    </BlockSection>
+    <BlockSection v-if="allergens.length" id="allergens" :title="t('allergens.title')" :lead="`${t('allergens.lead')} ${t('allergens.ask')}`">
+      <div class="flex flex-col gap-6">
+        <MenuAllergenKey :codes="allergens" />
+        <p class="text-small text-muted-foreground">{{ t('prices') }}</p>
+      </div>
+    </BlockSection>
+    <div v-if="!groups.length" class="mx-auto max-w-page px-gutter">
+      <BlockEmpty :title="t('empty')" path="content/menu/" />
+    </div>
+  </div>
+</template>

package/templates/restaurant/app/pages/menu/print.vue

@@ -0,0 +1,69 @@
+<!-- Synced from templates/_features/menu/app/pages/menu/print.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { formatMoney } from '@lupinum/ginko'
+import { ArrowLeft, Printer } from '@lucide/vue'
+
+// The menu on paper (A4): the name, every dish with its price, vegetarian or vegan and its allergen codes, the key,
+// the address and the day it was printed ("As of"), so an old printout shows its age. Not in the sitemap and not
+// indexed: the menu page is the one to find.
+definePageMeta({ layout: 'print' })
+const { groups, allergens } = useMenu()
+const site = useGinko('site')
+const { name } = useGinkoSite()
+const { t, format, language } = useI18n('menu')
+const today = useGinkoToday()
+const path = useGinkoPath()
+const langOf = useGinkoLang()
+const contact = computed(() => site.value.data)
+usePageSeo(() => ({ title: t('title'), noindex: true }))
+const print = () => window.print()
+const diet = (veg: unknown) => (veg === 'vegan' ? t('diet.vegan') : veg === 'vegetarian' ? t('diet.vegetarian') : undefined)
+</script>
+
+<template>
+  <div class="mx-auto max-w-3xl px-gutter py-8 print:max-w-none print:p-0">
+    <div class="mb-10 flex flex-wrap items-center justify-between gap-4 print:hidden">
+      <NuxtLink :to="path('menu')" class="inline-flex min-h-11 items-center gap-2 text-small font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
+        <ArrowLeft class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+        {{ t('back') }}
+      </NuxtLink>
+      <Button @click="print">
+        <Printer aria-hidden="true" />
+        {{ t('printNow') }}
+      </Button>
+    </div>
+
+    <header class="flex flex-col gap-1 border-b pb-4">
+      <p class="font-display text-h3">{{ name }}</p>
+      <h1 class="text-h2">{{ t('title') }}</h1>
+    </header>
+
+    <section v-for="group in groups" :key="group.category" class="mt-8" :aria-labelledby="`print-${group.category}`">
+      <h2 :id="`print-${group.category}`" class="text-h3">{{ t(`categories.${group.category}`) }}</h2>
+      <ul class="mt-2 flex flex-col divide-y border-y">
+        <li v-for="dish in group.dishes" :key="dish.item.id" class="flex items-baseline justify-between gap-6 py-2.5 break-inside-avoid">
+          <div class="flex flex-col">
+            <p class="font-medium">
+              <span :lang="langOf(dish.item, 'name')">{{ dish.item.data.name }}</span>
+              <span v-if="diet(dish.item.data.veg)" class="ms-2 text-small font-normal text-muted-foreground">{{ diet(dish.item.data.veg) }}</span>
+              <span v-if="dish.item.data.allergens.length" class="ms-2 text-small font-normal tracking-wide text-muted-foreground">{{ allergenList(dish.item.data.allergens.map(String)).join(' ') }}</span>
+            </p>
+            <p v-if="dish.item.data.description" class="text-small text-muted-foreground" :lang="langOf(dish.item, 'description')">{{ dish.item.data.description }}</p>
+          </div>
+          <p class="shrink-0 tabular-nums">{{ formatMoney(dish.price, language) }}</p>
+        </li>
+      </ul>
+    </section>
+
+    <section v-if="allergens.length" class="mt-8 break-inside-avoid text-small" aria-labelledby="print-allergens">
+      <h2 id="print-allergens" class="text-body font-semibold">{{ t('allergens.title') }}</h2>
+      <div class="mt-2"><MenuAllergenKey :codes="allergens" /></div>
+      <p class="mt-3 text-muted-foreground">{{ t('allergens.ask') }}</p>
+    </section>
+
+    <footer class="mt-10 flex flex-wrap justify-between gap-x-6 gap-y-1 border-t pt-3 text-small text-muted-foreground">
+      <p>{{ name }}<template v-if="contact.street">, {{ contact.street }}</template><template v-if="contact.city">, {{ contact.postalCode }} {{ contact.city }}</template><template v-if="contact.phone">, <span class="tabular-nums">{{ contact.phone }}</span></template></p>
+      <p class="tabular-nums">{{ t('prices') }} {{ t('asOf', { date: format.date(today, { day: 'numeric', month: 'long', year: 'numeric' }) }) }}</p>
+    </footer>
+  </div>
+</template>

package/templates/restaurant/app/pages/reservations.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { plainText, type Json } from '@lupinum/ginko'
+import { Mail, Phone } from '@lucide/vue'
+
+// How to reserve: one call button (the primary action) and an email button with the number and address of
+// content/site.md, whether anyone answers right now, the text of content/reservations.md, and the opening hours, since
+// a table is booked by phone during them. Each `##` of the text becomes a BlockSection (heading left, text right), like the hours. No form: nothing is sent to other companies.
+const page = useGinko('reservations')
+const site = useGinko('site')
+const { t } = useI18n('reservations')
+const { t: th } = useI18n('hours')
+const langOf = useGinkoLang()
+const contact = computed(() => site.value.data)
+const body = await useGinkoMarkdown(() => page.value.data.body)
+// The text split at its `##` headings: what comes before the first one, then one section per heading.
+const parts = computed(() => {
+  const intro: Json[] = []
+  const sections: { title: string; nodes: Json[] }[] = []
+  for (const node of body.value?.nodes ?? []) {
+    if (Array.isArray(node) && node[0] === 'h2') sections.push({ title: plainText({ nodes: [node] }), nodes: [] })
+    else (sections.at(-1)?.nodes ?? intro).push(node)
+  }
+  return { intro, sections }
+})
+usePageSeo(() => ({ title: page.value.data.title, description: page.value.data.lead ?? undefined }))
+</script>
+
+<template>
+  <article>
+    <BlockPageHeader :title="page.data.title" :lead="page.data.lead ?? undefined" />
+    <div class="mx-auto flex max-w-page flex-col gap-4 px-gutter pb-10">
+      <div v-if="contact.phone || contact.email" class="flex flex-wrap gap-3">
+        <Button v-if="contact.phone" as-child size="lg" class="max-sm:w-full">
+          <a :href="telHref(contact.phone)"><Phone aria-hidden="true" />{{ t('call', { phone: contact.phone }) }}</a>
+        </Button>
+        <Button v-if="contact.email" as-child size="lg" :variant="contact.phone ? 'outline' : 'default'" class="max-sm:w-full">
+          <a :href="`mailto:${contact.email}`"><Mail aria-hidden="true" />{{ t('email') }}</a>
+        </Button>
+      </div>
+      <HoursToday />
+    </div>
+    <div v-if="parts.intro.length" :lang="langOf(page, 'body')">
+      <ProseBody :value="{ nodes: parts.intro }" />
+    </div>
+    <BlockSection v-for="section in parts.sections" :key="section.title" :title="section.title" :lang="langOf(page, 'body')">
+      <GinkoMarkdown :value="{ nodes: section.nodes }" class="prose" />
+    </BlockSection>
+    <BlockSection :title="th('title')">
+      <HoursTable />
+    </BlockSection>
+  </article>
+</template>

package/templates/restaurant/app/routes.ts

@@ -0,0 +1,33 @@
+// The languages of this site and the web address of each page per language (TEMPLATES T8). The first language is
+// the main one: its addresses have no prefix, the others start with /<code>. `npm create ginko -- --locales` edits
+// the `locales` list and drops the entries of removed languages from the maps below.
+export const locales = ['en', 'de', 'it'] as const
+export type SiteLocale = (typeof locales)[number]
+
+/**
+ * The words of the addresses, per language: `localized('/menu/print')` gives `/de/speisekarte/drucken` in German. A
+ * part of a path that is not listed here stays as it is. Slugs allow only a–z, 0–9 and `-`. To rename a section,
+ * change its word here; the pages and links follow (`modules/page-paths/` reads this table for the page files).
+ */
+export const segments: Record<string, Partial<Record<SiteLocale, string>>> = {
+  menu: { en: 'menu', de: 'speisekarte', it: 'menu' },
+  print: { en: 'print', de: 'drucken', it: 'stampa' },
+  lunch: { en: 'lunch', de: 'mittagsmenue', it: 'pranzo' },
+  events: { en: 'events', de: 'veranstaltungen', it: 'eventi' },
+  gallery: { en: 'gallery', de: 'galerie', it: 'galleria' },
+  reservations: { en: 'reservations', de: 'reservierung', it: 'prenotazioni' },
+  legal: { en: 'legal', de: 'rechtliches', it: 'legale' },
+}
+
+/** The path prefix of a language: none for the main language, `/de` for German as a second language. */
+export const prefix = (locale: SiteLocale) => (locale === locales[0] ? '' : `/${locale}`)
+
+/** A path of `localized`: a route keeps its `[slug]`, so the result still fits a collection's `route`. */
+type Localized<P extends string> = P extends `${string}[slug]${string}` ? `/${string}[slug]${string}` : `/${string}`
+
+/** One address per language from a path in its English form, with the words of `segments`: `localized('/news')`. */
+export function localized<const P extends `/${string}`>(path: P): Record<SiteLocale, Localized<P>> {
+  const words = (locale: SiteLocale) => path.split('/').map((part) => segments[part]?.[locale] ?? part).join('/')
+  // Object.fromEntries loses the key and value types; the keys are exactly `locales`, and the words never touch `[slug]`.
+  return Object.fromEntries(locales.map((locale) => [locale, String(path) === '/' ? prefix(locale) || '/' : `${prefix(locale)}${words(locale)}`])) as Record<SiteLocale, Localized<P>>
+}