create-ginko 0.4.0 → 0.5.0

package/templates/events/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/events/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/events/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>

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

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ArrowRight, CalendarDays, MapPin } from '@lucide/vue'
+
+// The home page answers "when, where, and how do I get in?" on the first screen: the dates and the place of the next
+// event (content/events/, the first one that has sessions) with a link to the map, the ticket link (a ticket shop on
+// another website: no payment on this site) while sales are open, and the programme. On the event days the first
+// screen is for "what is on now": the hero drops its lead and photo, "now and next" follows it, and the programme is
+// the main action. Then a few sessions, speakers, sponsors, three questions, last year's photos and, while tickets
+// are on sale, a closing band with the price. A section whose list is empty is left out.
+const home = useGinko('home')
+const events = useGinko('events')
+const people = useGinko('people')
+const logos = useGinko('logos')
+const questions = useGinko('faq')
+const gallery = useGinko('gallery')
+const rows = useSessions()
+const { state } = useNowAndNext()
+const { dates, price } = useEventText()
+const booking = useEventBooking()
+const closedOf = useBookingClosed()
+const { t } = useI18n()
+const path = useGinkoPath()
+const links = useSiteLinks(() => [{ entry: 'pages/sponsoring' }, { entry: 'pages/venue' }])
+const link = (key: string) => links.value.find((l) => l.key === key)
+
+// The conference: the next event with a programme, else the next event at all.
+const event = computed(() => events.value.items.find((item) => rows.value.some((row) => row.event === item.id)) ?? events.value.items[0])
+const tickets = computed(() => {
+  const href = event.value && booking(event.value.data)
+  return href ? { label: t('home.tickets'), to: href } : undefined
+})
+const closed = computed(() => (event.value ? closedOf(event.value.data) : false))
+const programme = computed(() => ({ label: t('home.programme'), to: path('programme') }))
+// Without tickets (sales closed, fully booked, on the event days) the programme is the main action and the venue the
+// second one.
+const venue = computed(() => {
+  const page = link('pages/venue')
+  return page ? { label: page.label, to: page.to } : undefined
+})
+const onEventDay = computed(() => state.value.day)
+// "Open in maps": a link to OpenStreetMap with the place, no embedded map (nothing loads from another company).
+const maps = computed(() => (event.value?.data.location ? `https://www.openstreetmap.org/search?query=${encodeURIComponent(event.value.data.location)}` : undefined))
+// A few talks and workshops still to come: the sessions with a summary (not the breaks or the welcome), in programme
+// order. On an event day they start after "next", so they do not repeat "now and next" (the same clock).
+const { at } = useSessionClock()
+const highlights = computed(() => {
+  const after = state.value.next[0]?.from ?? at.value.clock
+  return rows.value.filter((row) => row.summary && row.status !== 'cancelled' && (row.date > at.value.date || (row.date === at.value.date && row.from > after))).slice(0, 4)
+})
+usePageSeo(() => ({ home: true, title: t('home.title'), description: home.value.data.lead, image: home.value.data.image ?? undefined }))
+</script>
+
+<template>
+  <div>
+    <BlockHero
+      :title="home.data.title"
+      :lead="onEventDay ? undefined : home.data.lead"
+      :primary="tickets ?? programme"
+      :secondary="tickets ? programme : venue"
+      :image="onEventDay ? undefined : home.data.image ?? undefined"
+    >
+      <template v-if="event" #status>
+        <div class="flex flex-col gap-1" data-event-when>
+          <p class="flex items-start gap-2 text-lead font-semibold tabular-nums">
+            <CalendarDays class="mt-1 size-5 shrink-0 text-muted-foreground" aria-hidden="true" />
+            <span>{{ dates(event.data) }}</span>
+          </p>
+          <div v-if="event.data.location" class="flex items-start gap-2 text-muted-foreground">
+            <MapPin class="mt-0.5 size-5 shrink-0" aria-hidden="true" />
+            <p class="flex flex-col items-start">
+              <span>{{ event.data.location }}</span>
+              <a v-if="maps" :href="maps" rel="noopener" class="inline-flex min-h-11 items-center font-medium whitespace-nowrap text-foreground underline underline-offset-4 hover:text-primary">{{ t('home.maps') }}</a>
+            </p>
+          </div>
+        </div>
+      </template>
+      <p v-if="event?.data.soldOut" class="text-lead font-semibold">{{ t('events.soldOut') }}</p>
+      <p v-else-if="closed && !onEventDay" class="text-lead font-semibold">{{ t('events.bookingClosed') }}</p>
+    </BlockHero>
+
+    <SessionNowNext />
+
+    <BlockSection v-if="highlights.length" :title="t('home.highlights')" :side="false">
+      <div class="flex flex-col gap-4">
+        <ul class="flex flex-col divide-y border-y">
+          <li v-for="session in highlights" :key="session.id">
+            <SessionRow :session="session" day />
+          </li>
+        </ul>
+        <NuxtLink v-if="!onEventDay" :to="path('programme')" class="inline-flex min-h-11 items-center gap-2 self-start font-medium text-primary underline-offset-4 hover:underline">
+          {{ t('sessions.programme.all') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+        </NuxtLink>
+      </div>
+    </BlockSection>
+
+    <BlockSection v-if="people.items.length" :title="t('home.speakers')" :side="false">
+      <div class="flex flex-col gap-8">
+        <SessionSpeakers :items="people.items.slice(0, 4)" />
+        <NuxtLink :to="path('speakers')" class="inline-flex min-h-11 items-center gap-2 self-start font-medium text-primary underline-offset-4 hover:underline">
+          {{ t('sessions.speakers.all') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+        </NuxtLink>
+      </div>
+    </BlockSection>
+
+    <BlockSection v-if="logos.items.length" :title="t('home.sponsors')">
+      <div class="flex flex-col gap-6">
+        <BlockLogos :items="logos.items" />
+        <NuxtLink v-if="link('pages/sponsoring')" :to="link('pages/sponsoring')!.to" class="inline-flex min-h-11 items-center gap-2 self-start font-medium text-primary underline-offset-4 hover:underline">
+          {{ t('home.sponsoring') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+        </NuxtLink>
+      </div>
+    </BlockSection>
+
+    <BlockSection v-if="questions.items.length" :title="t('home.questions')">
+      <div class="flex flex-col gap-6">
+        <BlockFaq :items="questions.items.slice(0, 3).map((item) => ({ id: item.id, question: item.data.question, answer: item.data.answer }))" />
+        <NuxtLink :to="path('faq')" class="inline-flex min-h-11 items-center gap-2 self-start font-medium text-primary underline-offset-4 hover:underline">
+          {{ t('home.allQuestions') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+        </NuxtLink>
+      </div>
+    </BlockSection>
+
+    <BlockSection v-if="gallery.data.images.length" :title="t('home.lastYear')" :side="false">
+      <BlockGallery :images="gallery.data.images.map((entry) => entry.image)" />
+    </BlockSection>
+
+    <BlockCta
+      v-if="tickets && event"
+      :title="t('home.ctaTitle')"
+      :text="event.data.price?.amount === 0 ? t('home.ctaTextFree') : price(event.data) ? t('home.ctaText', { price: price(event.data)! }) : undefined"
+      :action="tickets"
+    />
+  </div>
+</template>

package/templates/events/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/events/app/pages/programme.vue

@@ -0,0 +1,42 @@
+<!-- Synced from templates/_features/sessions/app/pages/programme.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// The programme: every session still to come, by day, with time, room, speakers and state (content/sessions/). A
+// session leaves the page after its day. During an event day a link jumps to what is on now. While tickets are on
+// sale, the ticket link of the event is this page's one main action. The Event JSON-LD with each session is on the
+// event's own page (useSessionsLd). The address per language comes from `pages.programme` in ginko.config.ts.
+const rows = useSessions()
+const events = useGinko('events')
+const { t } = useI18n('sessions')
+const { shortDay } = useSessionText()
+const { at } = useSessionClock()
+const booking = useEventBooking()
+const days = computed(() => byDay(rows.value).map((group) => group.date))
+// The session to jump to on an event day: the first one that has not ended (cancelled ones do not count).
+const current = computed(() => rows.value.find((row) => row.date === at.value.date && row.to > at.value.clock && row.status !== 'cancelled'))
+// The event of the programme (the first one with sessions) and its ticket link while booking is open.
+const tickets = computed(() => {
+  const event = events.value.items.find((item) => rows.value.some((row) => row.event === item.id))
+  return event ? booking(event.data) : undefined
+})
+usePageSeo(() => ({ title: t('programme.title'), description: t('programme.lead') }))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader :title="t('programme.title')" :lead="t('programme.lead')">
+      <div v-if="tickets || days.length > 1 || current" class="flex flex-col gap-4 print:hidden">
+        <Button v-if="tickets" as-child size="lg" class="self-start max-sm:w-full">
+          <a :href="tickets" rel="noopener">{{ t('programme.tickets') }}</a>
+        </Button>
+        <nav v-if="days.length > 1 || current" :aria-label="t('programme.days')" class="flex flex-wrap gap-2">
+          <a v-if="current" :href="`#session-${current.id.replace('/', '-')}`" class="inline-flex min-h-11 items-center rounded-full border border-primary bg-primary px-4 font-medium text-primary-foreground" data-jump-now>{{ t('programme.now') }}</a>
+          <a v-for="date in days" :key="date" :href="`#day-${date}`" class="inline-flex min-h-11 items-center rounded-full border px-4 font-medium tabular-nums hover:bg-accent">{{ shortDay(date) }}</a>
+        </nav>
+      </div>
+    </BlockPageHeader>
+    <div class="mx-auto max-w-page px-gutter">
+      <SessionProgramme v-if="rows.length" :rows="rows" :level="2" />
+      <BlockEmpty v-else :title="t('programme.empty')" path="content/sessions/" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,62 @@
+<!-- Synced from templates/_features/sessions/app/pages/speakers/[slug].vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { personJsonLd } from '@lupinum/ginko/basics'
+import { ArrowLeft } from '@lucide/vue'
+
+// One speaker: photo or initials, name, role, short bio, and their sessions with day, time and room, read from the
+// programme (useSessions), so a moved session is right here too. Person JSON-LD. An unknown speaker is a 404.
+const route = useRoute()
+const person = useGinkoEntry('people', () => route.params.slug)
+const rows = useSessions()
+const { t } = useI18n('sessions')
+const { url } = useGinkoSite()
+const path = useGinkoPath()
+const talks = computed(() => rows.value.filter((row) => row.speakers.some((speaker) => speaker.id === person.value.id)))
+const absolute = (p: string) => new URL(p, url).href
+usePageSeo(() => ({
+  title: person.value.data.name,
+  description: person.value.data.role ?? person.value.data.bio ?? undefined,
+  image: person.value.data.photo ?? undefined,
+  jsonLd: [personJsonLd({
+    name: person.value.data.name,
+    role: person.value.data.role,
+    bio: person.value.data.bio,
+    image: person.value.data.photo ? absolute(person.value.data.photo.url) : undefined,
+    url: absolute(person.value.url),
+  })],
+}))
+</script>
+
+<template>
+  <article>
+    <div class="mx-auto max-w-page px-gutter pt-8 md:pt-12">
+      <NuxtLink :to="path('speakers')" 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('speakers.all') }}
+      </NuxtLink>
+    </div>
+    <header class="mx-auto max-w-page px-gutter pt-4">
+      <div class="flex max-w-3xl flex-col gap-5">
+        <GinkoImage
+          v-if="person.data.photo"
+          :image="person.data.photo"
+          eager
+          sizes="160px"
+          class="aspect-4/5 w-40 rounded-block bg-muted object-cover"
+        />
+        <InitialsAvatar v-else :name="person.data.name" size="lg" />
+        <h1 class="text-h1">{{ person.data.name }}</h1>
+        <p v-if="person.data.role" class="text-lead text-muted-foreground">{{ person.data.role }}</p>
+        <p v-if="person.data.bio" class="max-w-prose">{{ person.data.bio }}</p>
+      </div>
+    </header>
+    <BlockSection :title="t('speakers.sessions')" :side="false">
+      <ul v-if="talks.length" class="flex flex-col divide-y border-y">
+        <li v-for="session in talks" :key="session.id">
+          <SessionRow :session="session" day :self="person.id" />
+        </li>
+      </ul>
+      <p v-else class="text-muted-foreground">{{ t('speakers.none') }}</p>
+    </BlockSection>
+  </article>
+</template>

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

@@ -0,0 +1,31 @@
+<!-- Synced from templates/_features/sessions/app/pages/speakers/index.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { personJsonLd } from '@lupinum/ginko/basics'
+
+// Everyone who speaks (content/people/), in the owner's order, each linked to their page with their sessions. The
+// address per language comes from `pages.speakers` in ginko.config.ts.
+const people = useGinko('people')
+const { url } = useGinkoSite()
+const { t } = useI18n('sessions')
+const absolute = (path: string) => new URL(path, url).href
+usePageSeo(() => ({
+  title: t('speakers.title'),
+  description: t('speakers.lead'),
+  jsonLd: people.value.items.map((person) => personJsonLd({
+    name: person.data.name,
+    role: person.data.role,
+    image: person.data.photo ? absolute(person.data.photo.url) : undefined,
+    url: absolute(person.url),
+  })),
+}))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader :title="t('speakers.title')" :lead="t('speakers.lead')" />
+    <div class="mx-auto max-w-page px-gutter">
+      <SessionSpeakers v-if="people.items.length" :items="people.items" heading="h2" />
+      <BlockEmpty v-else :title="t('speakers.empty')" path="content/people/" />
+    </div>
+  </div>
+</template>

package/templates/events/app/routes.ts

@@ -0,0 +1,31 @@
+// 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 dropped languages' entries from the maps below.
+export const locales = ['en', 'de'] as const
+export type SiteLocale = (typeof locales)[number]
+
+/**
+ * The words of the addresses, per language: `localized('/speakers/[slug]')` gives `/de/vortragende/[slug]` 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.
+ */
+export const segments: Record<string, Partial<Record<SiteLocale, string>>> = {
+  programme: { en: 'programme', de: 'programm' },
+  speakers: { en: 'speakers', de: 'vortragende' },
+  events: { en: 'events', de: 'termine' },
+  faq: { en: 'faq', de: 'fragen' },
+  legal: { en: 'legal', de: 'rechtliches' },
+}
+
+/** 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('/speakers')`. */
+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>>
+}

package/templates/events/app/utils/sessions.ts

@@ -0,0 +1,64 @@
+// Synced from templates/_features/sessions/app/utils/sessions.ts by `pnpm templates sync`. Edit the source, not this copy.
+// The rules behind the programme and "now and next" without Vue or Nuxt: plain functions of dates and clock times in
+// the site's time zone. useSessions and the components use them (auto-imported from app/utils/); tests import this
+// file directly.
+
+/** What these rules read of a session: its day, start and end (`HH:MM`, site time zone) and its state. */
+export interface SessionTimes {
+  date: string
+  from: string
+  to: string
+  status: string
+}
+
+/** The day (`YYYY-MM-DD`) and clock time (`HH:MM`, 24 h) of an instant in a time zone. */
+export function dayAndClock(timeZone: string, time: number): { date: string, clock: string } {
+  const parts = Object.fromEntries(new Intl.DateTimeFormat('en-GB', {
+    timeZone, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hourCycle: 'h23',
+  }).formatToParts(time).map((part) => [part.type, part.value]))
+  return { date: `${parts.year}-${parts.month}-${parts.day}`, clock: `${parts.hour}:${parts.minute}` }
+}
+
+/** Sessions grouped by day, in the order given (`sessionsInOrder` of the basics: date, then start time). */
+export function byDay<S extends { date: string }>(sessions: readonly S[]): { date: string, sessions: S[] }[] {
+  const days: { date: string, sessions: S[] }[] = []
+  for (const session of sessions) {
+    const last = days.at(-1)
+    if (last?.date === session.date) last.sessions.push(session)
+    else days.push({ date: session.date, sessions: [session] })
+  }
+  return days
+}
+
+/** What nowAndNext says about a moment of an event day. */
+export interface NowAndNext<S> {
+  /** The date has sessions; otherwise the rest is empty and the home page shows nothing. */
+  day: boolean
+  /** The sessions running at the clock, from their start up to, not including, their end. */
+  now: S[]
+  /** The sessions with the next start time after the clock on the same day, all of them when several rooms start together. */
+  next: S[]
+  /** Nothing has started yet today: the programme begins with `next`. */
+  before: boolean
+  /** The day's last session has ended. */
+  over: boolean
+  /** The first session of the next date with sessions, for "the programme continues on …" when the day is over. */
+  later?: S
+}
+
+/**
+ * What is on at `clock` on `date` and what comes next, from sessions in programme order. Only on a day with sessions.
+ * A cancelled session is never "now" or "next", and its start time does not count as the next one: a visitor who scans
+ * "now" would walk to its room. The programme still shows it with the word "cancelled".
+ */
+export function nowAndNext<S extends SessionTimes>(sessions: readonly S[], date: string, clock: string): NowAndNext<S> {
+  if (!sessions.some((s) => s.date === date)) return { day: false, now: [], next: [], before: false, over: false }
+  const held = sessions.filter((s) => s.status !== 'cancelled')
+  const today = held.filter((s) => s.date === date)
+  const now = today.filter((s) => s.from <= clock && clock < s.to)
+  const start = today.map((s) => s.from).filter((from) => from > clock).sort()[0]
+  const next = start ? today.filter((s) => s.from === start) : []
+  const over = !now.length && !next.length
+  const later = over ? held.find((s) => s.date > date) : undefined
+  return { day: true, now, next, before: today.every((s) => s.from > clock), over, ...(later ? { later } : {}) }
+}

package/templates/events/app/utils/telHref.ts

@@ -0,0 +1,3 @@
+// Synced from templates/_features/site/app/utils/telHref.ts by `pnpm templates sync`. Edit the source, not this copy.
+/** The `tel:` link for a phone number written for people ("+49 30 1234"): only digits and "+" are kept. */
+export const telHref = (phone: string) => `tel:${phone.replace(/[^\d+]/g, '')}`

package/templates/events/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/assets/css/main.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "composables": "@/composables",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib"
+  },
+  "registries": {}
+}

package/templates/events/content/events/1.open-data-days.de.md

@@ -0,0 +1,9 @@
+---
+title: Open Data Days
+---
+
+Zwei Tage über Daten, die alle nutzen dürfen: was Städte, Bibliotheken und Forschung veröffentlichen, wie Journalistinnen und Entwickler damit arbeiten, und was noch im Weg steht.
+
+Der erste Tag beginnt mit Vorträgen über Budgets, Metadaten und Datenschutz und endet mit Kurzvorträgen aus der Community. Am zweiten Tag geht es um Statistik und Verkehrsdaten, zum Abschluss diskutiert ein Podium, wer offene Daten bezahlt. Die Workshops im Studio laufen an beiden Tagen und haben weniger Plätze.
+
+Das Ticket gilt für beide Tage, mit Mittagessen und Kaffee. Studierende, Menschen ohne Einkommen und Ehrenamtliche zahlen weniger: Die Preise stehen im Ticketshop.