create-ginko 0.4.0 → 0.5.0

package/templates/local-business/app/components/ui/sheet/index.ts

@@ -0,0 +1,7 @@
+// Synced from templates/_features/ui/app/components/ui/sheet/index.ts by `pnpm templates sync`. Edit the source, not this copy.
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'

package/templates/local-business/app/components/visit/Book.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ExternalLink, Mail, Phone } from '@lucide/vue'
+
+/**
+ * How to book, the same on the home page, the contact page and every treatment page, always in this order: call (the
+ * number on the button, the phone hours right under it), email, and "Book online" when content/visit.md names a booking
+ * page. Each shows only when it exists; the first one is the main action. `subject`: the email's subject (a treatment
+ * page); `email`, `phone`: a person's own, else the practice's from content/site.md.
+ */
+const props = defineProps<{ subject?: string, email?: string, phone?: string }>()
+const { contact, visit, booking } = useVisit()
+const { t } = useI18n()
+const langOf = useGinkoLang()
+
+const phone = computed(() => props.phone || contact.value.phone)
+const email = computed(() => props.email || contact.value.email)
+const actions = computed(() => {
+  const call = phone.value ? { key: 'call', href: telHref(phone.value), label: t('visit.call', { phone: phone.value }), icon: Phone } : undefined
+  const mail = email.value
+    ? { key: 'email', href: `mailto:${email.value}${props.subject ? `?subject=${encodeURIComponent(props.subject)}` : ''}`, label: t('visit.email'), icon: Mail }
+    : undefined
+  const online = booking.value ? { key: 'booking', href: booking.value, label: t('visit.bookOnline'), icon: ExternalLink } : undefined
+  return [call, mail, online].filter((action) => action !== undefined)
+})
+// "Mon–Fri 08:00–12:00, Mon–Thu also 14:00–17:00": each part stays on one line, so a day range never breaks at its dash.
+const phoneHours = computed(() => visit.value.data.phoneHours?.split(/,\s*/).filter(Boolean) ?? [])
+</script>
+
+<template>
+  <div v-if="actions.length" class="flex flex-wrap gap-3">
+    <template v-for="(action, i) in actions" :key="action.key">
+      <Button as-child size="lg" :variant="i === 0 ? 'default' : 'outline'" class="max-sm:w-full">
+        <a :href="action.href" :rel="action.key === 'booking' ? 'noopener' : undefined">
+          <component :is="action.icon" aria-hidden="true" />{{ action.label }}
+        </a>
+      </Button>
+      <!-- Under the call button on phones; under the row of buttons from sm. -->
+      <p v-if="action.key === 'call' && phoneHours.length" class="basis-full text-small tabular-nums sm:order-last">
+        {{ t('visit.phoneHours') }}
+        <span :lang="langOf(visit, 'phoneHours')">
+          <template v-for="(part, j) in phoneHours" :key="part"><span class="whitespace-nowrap">{{ part }}</span>{{ j < phoneHours.length - 1 ? ', ' : '' }}</template>
+        </span>
+      </p>
+    </template>
+  </div>
+</template>

package/templates/local-business/app/composables/useHours.ts

@@ -0,0 +1,81 @@
+// Synced from templates/_features/hours/app/composables/useHours.ts by `pnpm templates sync`. Edit the source, not this copy.
+import {
+  calendarOfCountry, hoursLine, hoursOn, upcomingClosures, upcomingPlans, weekFor,
+  type DayHours, type HourPlan, type HoursContext, type HoursData, type Weekday,
+} from '@lupinum/ginko/basics'
+
+/** The days of the week in storage order. */
+const KEYS: Weekday[] = ['mo', 'tu', 'we', 'th', 'fr', 'sa', 'su']
+/** The owner's choices for public holidays (`HolidaySetting`). */
+const HOLIDAY_SETTINGS = ['sunday', 'closed', 'normal'] as const
+
+/**
+ * The opening hours of the site, read once per component: the `hours` single and the `hourPlans` entries, shaped for
+ * the rules of `@lupinum/ginko/basics`, with the site's country for public holidays. `now` is the time of the server's
+ * render, carried to the browser, so both show the same state; HoursToday moves it on every minute.
+ */
+export function useHours() {
+  const hours = useGinko('hours')
+  const hourPlans = useGinko('hourPlans')
+  const today = useGinkoToday()
+  const locale = useGinkoLocale()
+  const { timeZone } = useGinkoSite()
+  // `country` of ginko.config.ts (ISO 3166-1, '' when unset): its public holidays count, as in the Studio.
+  const country: string = useRuntimeConfig().public.ginko.country
+  const now = useState('hours:now', () => Date.now())
+  const { firstDay } = useGinkoWeek()
+
+  const data = computed<HoursData>(() => {
+    const { week, exceptions, closedOn, closedNote, holidays } = hours.value.data
+    return {
+      week: week.map((day) => ({ ...day, day: String(day.day), closed: day.closed === true })),
+      exceptions: exceptions.map((e) => ({ ...e, reason: e.reason ?? '', closed: e.closed === true })),
+      closedOn: closedOn ?? undefined,
+      closedNote: closedNote ?? undefined,
+      holidays: HOLIDAY_SETTINGS.find((setting) => setting === holidays),
+    }
+  })
+  const plans = computed<HourPlan[]>(() => hourPlans.value.items.map((plan) => ({
+    _id: plan.id,
+    label: plan.data.label,
+    from: plan.data.from,
+    to: plan.data.to ?? undefined,
+    yearly: plan.data.yearly === true,
+    week: plan.data.week.map((day) => ({ ...day, day: String(day.day), closed: day.closed === true })),
+  })))
+  const ctx = computed<HoursContext>(() => ({ hours: data.value, plans: plans.value, country }))
+
+  const line = computed(() => hoursLine(data.value, { timeZone, now: new Date(now.value), plans: plans.value, holidays: calendarOfCountry(country) ?? 'none' }))
+  const yesterday = computed(() => {
+    const rule = hoursOn(ctx.value, plusDays(today.value, -1))
+    return rule.closed ? [] : rule.times
+  })
+  const state = computed(() => hoursNow(line.value, clockIn(timeZone, now.value), locale.value, yesterday.value))
+  /** Today's opening spans (empty when closed). */
+  const todayRule = computed(() => hoursOn(ctx.value, today.value))
+  /** The next day after today on which the place opens, within two weeks, with its first opening time. */
+  const nextOpen = computed(() => {
+    for (let i = 1; i <= 14; i++) {
+      const date = plusDays(today.value, i)
+      const rule = hoursOn(ctx.value, date)
+      if (!rule.closed && rule.times[0]) return { date, from: rule.times[0].from }
+    }
+    return undefined
+  })
+  /** The week that applies today (a running season replaces the usual week), in the order of the site's week. */
+  const week = computed(() => {
+    const { week, plan } = weekFor(ctx.value, today.value)
+    const keys = [...KEYS.slice(firstDay - 1), ...KEYS.slice(0, firstDay - 1)]
+    return { plan, days: keys.map((key) => week.find((d) => d.day === key) ?? { day: key, closed: true } satisfies DayHours) }
+  })
+  /** Seasons and new hours that start within 120 days. */
+  const comingPlans = computed(() => upcomingPlans(plans.value, today.value, 120))
+  /** Closures that run on past today (a holiday that started) and those that start within 90 days (the owner's, a
+   *  day set as closed, closing public holidays), the next first. */
+  const closures = computed(() => [
+    ...data.value.exceptions.filter((e) => e.closed && e.when.from <= today.value && e.when.to > today.value),
+    ...upcomingClosures(ctx.value, today.value, 90),
+  ])
+
+  return { hours, ctx, now, today, state, todayRule, nextOpen, week, comingPlans, closures }
+}

package/templates/local-business/app/composables/usePageSeo.ts

@@ -0,0 +1,50 @@
+// Synced from templates/_features/site/app/composables/usePageSeo.ts by `pnpm templates sync`. Edit the source, not this copy.
+import { breadcrumbJsonLd } from '@lupinum/ginko'
+import { siteJsonLd } from '@lupinum/ginko/basics'
+
+export interface PageSeoInput {
+  title?: string
+  description?: string
+  image?: GinkoSeoInput['image']
+  /** The home page: the organisation from the `site` brick instead of WebPage and BreadcrumbList. */
+  home?: boolean
+  /** Home page: more properties of the organisation, which win over those from content/site.md (a subtype such as
+   *  `Restaurant`, opening hours, a menu). */
+  organization?: Record<string, unknown>
+  /** Keeps the page out of search engines (a print version). */
+  noindex?: boolean
+  /** More JSON-LD for this page, for example a FAQPage. */
+  jsonLd?: Record<string, unknown>[]
+}
+
+/**
+ * Title, description, share card and JSON-LD of a page (useGinkoSeo). The home page describes the organisation
+ * (Organization, LocalBusiness or NGO from app.config.ts, with address and contact from content/site.md and the
+ * country from ginko.config.ts); every other page is a WebPage with a BreadcrumbList from home to itself.
+ */
+export function usePageSeo(input: () => PageSeoInput) {
+  const site = useGinko('site')
+  const config = useSiteAppConfig()
+  const { name, url } = useGinkoSite()
+  const route = useRoute()
+  const path = useGinkoPath()
+  const { t, language } = useI18n('site')
+  const absolute = (p: string) => new URL(p, url).href
+  useGinkoSeo(() => {
+    const page = input()
+    const own = page.jsonLd ?? []
+    if (page.home) {
+      const organization = siteJsonLd(site.value.data, {
+        name,
+        url,
+        type: config.organization,
+        logo: config.logo ? absolute(config.logo.src) : undefined,
+        sameAs: config.socials.map((social) => social.url),
+      })
+      return { title: page.title, description: page.description, image: page.image, noindex: page.noindex, jsonLd: [{ ...organization, ...page.organization }, ...own] }
+    }
+    const webPage = { '@context': 'https://schema.org', '@type': 'WebPage', name: page.title, url: absolute(route.path), description: page.description, inLanguage: language.value }
+    const breadcrumbs = breadcrumbJsonLd([{ title: t('home'), path: path('home') }, { title: page.title ?? name, path: route.path }], url)
+    return { title: page.title, description: page.description, image: page.image, noindex: page.noindex, jsonLd: [webPage, breadcrumbs, ...own] }
+  })
+}

package/templates/local-business/app/composables/useServices.ts

@@ -0,0 +1,93 @@
+// Synced from templates/_features/services/app/composables/useServices.ts by `pnpm templates sync`. Edit the source, not this copy.
+import { formatMoney, type ImageValue, type Money } from '@lupinum/ginko'
+import { offerJsonLd } from '@lupinum/ginko/basics'
+import type { Card } from '~/components/block/Cards.vue'
+
+/** What the services feature reads of an entry of the `services` brick (app/bricks/services.ts). */
+export interface ServiceFacts {
+  title: string
+  /** `price` (a fixed price) or `onRequest`; a value the brick no longer offers counts as on request. */
+  pricing: string
+  price?: Money | null
+  duration?: number | null
+}
+
+/**
+ * Texts of a service in the page's language: its price ("€390", "€12.50") or "On request", the label of the price
+ * (with "plus VAT" or "incl. VAT" from `vat` in app.config.ts), its duration ("45 minutes", "90 minutes", "2 hours"),
+ * and the main action: "Ask for a date" for a fixed price, the enquiry for one on request. A fixed price always has
+ * its amount: the brick refuses `pricing: price` without one.
+ */
+export function useServiceText() {
+  const { t, format, language } = useI18n('services')
+  const { vat } = useSiteAppConfig()
+  const amount = (service: ServiceFacts) => (service.pricing === 'price' ? service.price ?? undefined : undefined)
+  const price = (service: ServiceFacts) => {
+    const money = amount(service)
+    return money ? formatMoney(money, language.value, { wholeWithoutMinor: true }) : t('onRequest')
+  }
+  /** The label of the price: with the VAT note for a real price, plain "Price" when it is on request. */
+  const priceLabel = (service: ServiceFacts) => (!amount(service) ? t('price') : vat === 'excluded' ? t('priceNet') : vat === 'included' ? t('priceGross') : t('price'))
+  const duration = (service: ServiceFacts) => {
+    const minutes = service.duration
+    if (!minutes) return undefined
+    return minutes >= 60 && minutes % 60 === 0
+      ? format.number(minutes / 60, { style: 'unit', unit: 'hour', unitDisplay: 'long' })
+      : format.number(minutes, { style: 'unit', unit: 'minute', unitDisplay: 'long' })
+  }
+  /** Price and duration in one line: "€390 · 2 hours". */
+  const meta = (service: ServiceFacts) => [price(service), duration(service)].filter(Boolean).join(' · ')
+  /** The label and email subject of the main action. */
+  const action = (service: ServiceFacts) => (amount(service)
+    ? { label: t('book'), subject: t('bookSubject', { title: service.title }) }
+    : { label: t('enquire'), subject: t('subject', { title: service.title }) })
+  return { price, priceLabel, duration, meta, action }
+}
+
+/** The services in their order as cards (BlockCards): price and duration above the title, the summary, the photo. */
+export function useServiceCards(limit?: () => number | undefined) {
+  const services = useGinko('services')
+  const { meta } = useServiceText()
+  return computed<Card[]>(() => services.value.items.slice(0, limit?.()).map((service) => ({
+    key: service.id,
+    title: service.data.title,
+    to: service.url,
+    text: service.data.summary,
+    meta: meta(service.data),
+    image: service.data.image,
+  })))
+}
+
+/** What the Service JSON-LD needs besides the texts: the address of the page and the photo. */
+export interface ServiceJsonLdInput extends ServiceFacts {
+  summary: string
+  url: string
+  image?: ImageValue | null
+}
+
+/**
+ * schema.org Service for a service page: name, summary, address, photo, the business as provider and, with a fixed
+ * price, an Offer with the amount in major units, its currency and, with `vat` in app.config.ts, whether VAT is
+ * included. A service on request has no Offer, so search engines never read a price the page does not show.
+ */
+export function useServiceJsonLd(service: () => ServiceJsonLdInput) {
+  const { name, url } = useGinkoSite()
+  const { vat } = useSiteAppConfig()
+  const country: string = useRuntimeConfig().public.ginko.country
+  const absolute = (path: string) => new URL(path, url).href
+  return computed(() => {
+    const s = service()
+    const price = s.pricing === 'price' ? s.price : undefined
+    return {
+      '@context': 'https://schema.org',
+      '@type': 'Service',
+      name: s.title,
+      description: s.summary,
+      url: absolute(s.url),
+      ...(s.image ? { image: absolute(s.image.url) } : {}),
+      provider: { '@type': 'Organization', name, url },
+      ...(country ? { areaServed: { '@type': 'Country', name: country } } : {}),
+      ...(price ? { offers: offerJsonLd(price, price.currency, vat ? { valueAddedTaxIncluded: vat === 'included' } : {}) } : {}),
+    }
+  })
+}

package/templates/local-business/app/composables/useSiteAppConfig.ts

@@ -0,0 +1,79 @@
+// Synced from templates/_features/site/app/composables/useSiteAppConfig.ts by `pnpm templates sync`. Edit the source, not this copy.
+/** A navigation item: a collection entry by id (`pages/about`, title and address from the content), a page of
+ *  `pages` in ginko.config.ts with its label per language, or an address on another site (`url`, for example the
+ *  sign-in of an app) with its label per language. */
+export type SiteNavItem = { entry: string } | { page: string, label: Record<string, string> } | { url: string, label: Record<string, string> }
+
+/** `site` in app/app.config.ts: the brand and navigation of the template. Name, address and contact come from
+ *  ginko.config.ts (`name`) and the `site` brick (content/site.md). */
+export interface SiteAppConfig {
+  /** Shown instead of the name in the header on phones. Default: the name from ginko.config.ts. */
+  shortName?: string
+  /** A logo file in public/ with its size in pixels. Without it, the header shows the name. */
+  logo?: { src: string, width: number, height: number }
+  /** One line under the name in the footer, per language code: `{ en: '…', de: '…' }`. A language without one shows none. */
+  tagline?: Record<string, string>
+  /** The schema.org type of the organisation on the home page. */
+  organization: 'Organization' | 'LocalBusiness' | 'NGO'
+  /** The header navigation: at most 6 items. The footer repeats it. */
+  nav: SiteNavItem[]
+  /** More links in the footer, for example a newsletter page. */
+  footer: SiteNavItem[]
+  /** Profiles elsewhere, as text links in the footer (no third-party icons or scripts). */
+  socials: { label: string, url: string }[]
+  /** Whether the site's prices include VAT: `excluded` for net prices to businesses ("Price (plus VAT)"), `included`
+   *  for prices to consumers. Price labels and the price's JSON-LD say so. Default: no VAT note. */
+  vat?: 'included' | 'excluded'
+}
+
+/** The collection keys useGinkoNav takes. */
+type NavBricks = Extract<Parameters<typeof useGinkoNav>[0], readonly unknown[]>
+
+/** The `site` part of app.config.ts. */
+export function useSiteAppConfig(): SiteAppConfig {
+  return useAppConfig().site
+}
+
+/** Entries already reported as missing, so the log names each one once. */
+const reported = new Set<string>()
+const overLimit = '\0over-limit'
+
+/** The items of a navigation list with their label and path in the current language. An entry that does not exist
+ *  in this language (untranslated or removed) is left out; one missing in the main language is also reported in the
+ *  dev server and build log, because it is a typo or a deleted file. With `limit`, a longer list is reported once
+ *  too (the header holds 6 links; the rest stay in the menu). */
+export function useSiteLinks(items: () => SiteNavItem[], limit?: number) {
+  const path = useGinkoPath()
+  const locale = useGinkoLocale()
+  const { mainLocale } = useGinkoSite()
+  // useGinkoNav takes the site's collection keys; the ids in app.config.ts are plain strings (`pages/about`), and a
+  // key that is no collection of this site is skipped by it.
+  const tree = useGinkoNav(() => [...new Set(items().flatMap((item) => ('entry' in item ? [item.entry.split('/')[0]!] : [])))] as NavBricks)
+  return computed(() => {
+    if (import.meta.server && limit && !reported.has(overLimit) && items().length > limit) {
+      reported.add(overLimit)
+      console.warn(`[site] app/app.config.ts has ${items().length} navigation entries; the header holds ${limit}, so the menu stays in the sheet.`)
+    }
+    const byId = new Map<string, { title: string, path: string }>()
+    const walk = (nodes: typeof tree.value) => nodes.forEach((node) => {
+      if (node.id) byId.set(node.id, node)
+      walk(node.children)
+    })
+    walk(tree.value)
+    return items().flatMap((item) => {
+      if ('entry' in item) {
+        const node = byId.get(item.entry)
+        if (node) return [{ key: item.entry, label: node.title, to: node.path }]
+        // An empty tree is content not loaded yet, not a missing entry.
+        if (import.meta.server && locale.value === mainLocale && tree.value.length > 0 && !reported.has(item.entry)) {
+          reported.add(item.entry)
+          console.warn(`[site] The navigation entry “${item.entry}” in app/app.config.ts matches no file in content/, so it is left out. An id is the folder and the file name without number: content/pages/1.about.md is pages/about.`)
+        }
+        return []
+      }
+      const label = item.label[locale.value] ?? item.label[mainLocale]
+      if (!label) return []
+      return 'url' in item ? [{ key: item.url, label, to: item.url }] : [{ key: item.page, label, to: path(item.page as GinkoPageKey) }]
+    })
+  })
+}

package/templates/local-business/app/composables/useVisit.ts

@@ -0,0 +1,19 @@
+import { safeHref } from '@lupinum/ginko'
+
+/**
+ * How to book and how to get here, for the home page and the contact page: phone, email and address from
+ * content/site.md (written once, there), the phone hours, an online booking page and the directions from
+ * content/visit.md, and "Open in maps" as a link to OpenStreetMap with the address: no embedded map, so nothing
+ * loads from another company until the visitor chooses it.
+ */
+export function useVisit() {
+  const site = useGinko('site')
+  const visit = useGinko('visit')
+  const country: string = useRuntimeConfig().public.ginko.country
+  const contact = computed(() => site.value.data)
+  const address = computed(() => [contact.value.street, [contact.value.postalCode, contact.value.city].filter(Boolean).join(' ')].filter(Boolean))
+  const maps = computed(() => (address.value.length ? `https://www.openstreetmap.org/search?query=${encodeURIComponent([...address.value, country].filter(Boolean).join(', '))}` : undefined))
+  // An address the owner typed: safeHref drops unsafe schemes (javascript: …); the field itself accepts only URLs.
+  const booking = computed(() => (visit.value.data.bookingUrl ? safeHref(visit.value.data.bookingUrl) : undefined))
+  return { contact, visit, address, maps, booking }
+}

package/templates/local-business/app/error.vue

@@ -0,0 +1,35 @@
+<!-- Synced from templates/_features/site/app/error.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+// 404 and other errors, in the site's layout and language, never indexed. The way out is the home page.
+const props = defineProps<{ error: NuxtError }>()
+const { t } = useI18n('site')
+const path = useGinkoPath()
+const notFound = computed(() => props.error.statusCode === 404)
+const title = computed(() => (notFound.value ? t('error.notFound') : t('error.failed')))
+// The title through seo.titleTemplate of ginko.config.ts, like every other page.
+useGinkoSeo(() => ({ title: title.value, noindex: true }))
+
+/** Leaves the error state, so the next page renders normally. */
+function home() {
+  clearError({ redirect: path('home') })
+}
+</script>
+
+<template>
+  <NuxtLayout>
+    <div class="mx-auto max-w-page px-gutter pt-12 md:pt-20">
+      <div class="flex max-w-3xl flex-col gap-5">
+        <p class="text-small font-medium text-muted-foreground tabular-nums">{{ t('error.code', { code: String(error.statusCode) }) }}</p>
+        <h1 class="text-h1">{{ title }}</h1>
+        <p class="text-lead text-muted-foreground">{{ notFound ? t('error.notFoundText') : t('error.failedText') }}</p>
+        <div class="mt-2">
+          <Button as-child size="lg">
+            <a :href="path('home')" @click.prevent="home">{{ t('error.home') }}</a>
+          </Button>
+        </div>
+      </div>
+    </div>
+  </NuxtLayout>
+</template>

package/templates/local-business/app/layouts/default.vue

@@ -0,0 +1,23 @@
+<!-- Synced from templates/_features/site/app/layouts/default.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { ConfigProvider } from 'reka-ui'
+
+// Every page: skip link, notices, header, content, footer. Reka's ConfigProvider gives its parts (sheet, menus,
+// accordion) the text direction of the language, so arrows and the sheet's side follow right-to-left languages.
+const { locale, locales } = useI18n()
+const dir = computed(() => locales.find((l) => l.code === locale.value)?.dir ?? 'ltr')
+</script>
+
+<template>
+  <ConfigProvider :dir="dir">
+    <div class="flex min-h-dvh flex-col">
+      <SiteSkipLink />
+      <SiteNotice />
+      <SiteHeader />
+      <main id="main" tabindex="-1" class="flex-1 focus-visible:outline-none">
+        <slot />
+      </main>
+      <SiteFooter />
+    </div>
+  </ConfigProvider>
+</template>

package/templates/local-business/app/lib/utils.ts

@@ -0,0 +1,26 @@
+// Synced from templates/_features/ui/app/lib/utils.ts by `pnpm templates sync`. Edit the source, not this copy.
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+/**
+ * tailwind-merge, told about the theme of tokens.css. Without it, `text-small` reads as a colour and `p-gutter` or
+ * `max-w-page` as unknown, so a conflicting class would not replace the component's own.
+ */
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ['h1', 'h2', 'h3', 'lead', 'body', 'small', 'xs'],
+      font: ['display'],
+      radius: ['block'],
+      shadow: ['overlay'],
+      spacing: ['section', 'gutter'],
+      container: ['page', 'prose'],
+    },
+  },
+})
+
+/** Joins class names (strings, arrays, `{ class: condition }`); a later class wins over a conflicting earlier one. */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/templates/local-business/app/pages/[...slug].vue

@@ -0,0 +1,36 @@
+<!-- Synced from templates/_features/pages/app/pages/[...slug].vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { safeHref } from '@lupinum/ginko'
+
+// A page of content/pages/ at /<slug> (in other languages /<code>/<slug>). An unknown address is a real 404.
+// A template can show more at the top of its pages with app/components/pages/Top.vue (prop `id`: the entry id, such
+// as `pages/get-involved`); without that file, nothing is added.
+const route = useRoute()
+const page = useGinkoEntry('pages', () => route.params.slug)
+const PagesTop = Object.values(import.meta.glob<Component>('~/components/pages/Top.vue', { eager: true, import: 'default' }))[0]
+const action = computed(() => {
+  const href = safeHref(page.value.data.actionUrl)
+  return href && page.value.data.actionLabel ? { label: page.value.data.actionLabel, href } : undefined
+})
+usePageSeo(() => ({
+  title: page.value.data.title,
+  description: page.value.data.summary,
+  image: page.value.data.image,
+}))
+</script>
+
+<template>
+  <article>
+    <BlockPageHeader :title="page.data.title" :lead="page.data.summary">
+      <Button v-if="action" as-child size="lg" class="self-start max-sm:self-stretch">
+        <a :href="action.href">{{ action.label }}</a>
+      </Button>
+    </BlockPageHeader>
+    <component :is="PagesTop" v-if="PagesTop" :id="page.id" />
+    <div v-if="page.data.image" class="mx-auto max-w-page px-gutter pb-10">
+      <GinkoImage :image="page.data.image" eager sizes="(min-width: 1216px) 1152px, 100vw" class="aspect-video w-full rounded-block bg-muted object-cover" />
+    </div>
+    <ProseBody :value="page.data.body" />
+  </article>
+</template>

package/templates/local-business/app/pages/contact.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { Accessibility, CircleParking, MapPin, TramFront } from '@lucide/vue'
+
+// How to book and how to find the practice: whether it is open now, then booking as on the home page (call with the
+// phone hours, email, the online booking page when content/visit.md names one); then the address with "Open in maps",
+// access, parking and public transport, the opening hours, and photos of the practice. No form: nothing is sent to
+// other companies. The address per language comes from `pages.contact` in ginko.config.ts.
+const gallery = useGinko('gallery')
+const { visit, address, maps } = useVisit()
+const { name } = useGinkoSite()
+const { t } = useI18n()
+const langOf = useGinkoLang()
+
+const directions = computed(() => [
+  { key: 'access', icon: Accessibility, label: t('visit.access'), text: visit.value.data.access },
+  { key: 'parking', icon: CircleParking, label: t('visit.parking'), text: visit.value.data.parking },
+  { key: 'transit', icon: TramFront, label: t('visit.transit'), text: visit.value.data.transit },
+].filter((row) => row.text))
+const images = computed(() => gallery.value.data.images.map((entry) => entry.image))
+usePageSeo(() => ({ title: t('contact.title'), description: t('contact.lead') }))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader :title="t('contact.title')" :lead="t('contact.lead')" />
+
+    <div class="mx-auto flex max-w-page flex-col gap-6 px-gutter">
+      <HoursToday />
+      <VisitBook />
+    </div>
+
+    <BlockSection :title="t('contact.directions')">
+      <div class="flex flex-col gap-8">
+        <div v-if="address.length" class="flex flex-col gap-2">
+          <address class="flex flex-col not-italic">
+            <span class="font-semibold"><bdi>{{ name }}</bdi></span>
+            <span v-for="line in address" :key="line"><bdi>{{ line }}</bdi></span>
+          </address>
+          <a v-if="maps" :href="maps" rel="noopener" class="inline-flex min-h-11 items-center gap-2 self-start font-medium text-primary underline underline-offset-4">
+            <MapPin class="size-4 shrink-0" aria-hidden="true" />{{ t('visit.maps') }}
+          </a>
+        </div>
+        <dl v-if="directions.length" class="flex flex-col border-b">
+          <div v-for="row in directions" :key="row.key" class="grid items-baseline gap-1 border-t py-4 sm:grid-cols-[minmax(0,14rem)_1fr] sm:gap-6">
+            <dt class="flex items-center gap-2 font-semibold">
+              <component :is="row.icon" class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />{{ row.label }}
+            </dt>
+            <dd :lang="langOf(visit, row.key)">{{ row.text }}</dd>
+          </div>
+        </dl>
+      </div>
+    </BlockSection>
+
+    <BlockSection :title="t('contact.hours')">
+      <HoursTable />
+    </BlockSection>
+
+    <BlockSection v-if="images.length" :title="t('contact.practice')" :side="false">
+      <BlockGallery :images="images" />
+    </BlockSection>
+  </div>
+</template>

package/templates/local-business/app/pages/faq.vue

@@ -0,0 +1,39 @@
+<!-- Synced from templates/_features/faq/app/pages/faq.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { faqJsonLd } from '@lupinum/ginko/basics'
+
+// The FAQ page (page key `faq`): the questions and answers of content/faq/ in the owner's order, as an accordion whose
+// questions are the page's h2, with FAQPage JSON-LD. Below them, one line leads to a person for a question that is not
+// listed: the site's contact page (`pages/contact`) when it has one, else the email, phone and address of
+// content/site.md (SiteContact). The address per language comes from `pages.faq` in ginko.config.ts; a template sets
+// its own title and lead with `faq.title` and `faq.lead` in its i18n/<code>.json. A template may bring
+// `app/components/site/PageCta.vue`, its closing band: it shows at the end of the page.
+const cta = Object.values(import.meta.glob<Component>('../components/site/PageCta.vue', { eager: true, import: 'default' }))[0]
+const questions = useGinko('faq')
+const contact = useSiteLinks(() => [{ entry: 'pages/contact' }])
+const { t } = useI18n('faq')
+const items = computed(() => questions.value.items.map((item) => ({ id: item.id, question: item.data.question, answer: item.data.answer })))
+usePageSeo(() => ({ title: t('title'), description: t('lead'), jsonLd: items.value.length ? [faqJsonLd(items.value)] : [] }))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader :title="t('title')" :lead="t('lead')" />
+    <div class="mx-auto max-w-page px-gutter">
+      <div v-if="items.length" class="flex max-w-prose flex-col gap-8">
+        <BlockFaq :items="items" heading-level="h2" />
+        <p v-if="contact[0]" data-faq-contact>
+          {{ t('more') }}
+          <NuxtLink :to="contact[0].to" class="-my-2.5 inline-block py-2.5 font-medium text-primary underline underline-offset-4">{{ contact[0].label }}</NuxtLink>
+        </p>
+        <div v-else class="flex flex-col gap-2" data-faq-contact>
+          <p>{{ t('more') }}</p>
+          <SiteContact />
+        </div>
+      </div>
+      <BlockEmpty v-else :title="t('empty')" path="content/faq/" />
+    </div>
+    <component :is="cta" v-if="cta" />
+  </div>
+</template>