create-ginko 0.4.0 → 0.5.0

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

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

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

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

package/templates/events/app/components/block/Logos.vue

@@ -0,0 +1,22 @@
+<!-- Synced from templates/_features/logos-quotes/app/components/block/Logos.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/** A row of partner logos in their order, each at one height (2.5rem) and in its own width; a logo wider than the
+ *  screen shrinks as a whole, never squeezed. A logo with a website links there. Logos are images with the partner's
+ *  name as alt text; they keep their own colours. */
+defineProps<{ items: GinkoItem<'logos'>[] }>()
+</script>
+
+<template>
+  <ul class="flex flex-wrap items-center gap-x-12 gap-y-8">
+    <li v-for="logo in items" :key="logo.id">
+      <component
+        :is="logo.data.url ? 'a' : 'span'"
+        :href="logo.data.url"
+        :rel="logo.data.url ? 'noopener' : undefined"
+        class="inline-flex min-h-11 items-center rounded-md"
+      >
+        <GinkoImage :image="logo.data.image" sizes="200px" class="h-auto max-h-10 w-auto max-w-full" />
+      </component>
+    </li>
+  </ul>
+</template>

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

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

package/templates/events/app/components/block/Quote.vue

@@ -0,0 +1,19 @@
+<!-- Synced from templates/_features/logos-quotes/app/components/block/Quote.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { Quote } from '@lucide/vue'
+
+/** One quote: the words large, then who said it. No photo: a quote stands by its words (and never a stock face). */
+defineProps<{ text: string, name?: string, role?: string }>()
+</script>
+
+<template>
+  <figure class="flex max-w-3xl flex-col gap-6">
+    <Quote class="size-8 text-muted-foreground rtl:-scale-x-100" aria-hidden="true" />
+    <blockquote class="text-h3 font-medium text-balance">
+      <p>{{ text }}</p>
+    </blockquote>
+    <figcaption v-if="name || role" class="text-muted-foreground">
+      <span v-if="name" class="font-medium text-foreground">{{ name }}</span><template v-if="name && role">, </template>{{ role }}
+    </figcaption>
+  </figure>
+</template>

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

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

package/templates/events/app/components/event/Programme.vue

@@ -0,0 +1,16 @@
+<!-- Synced from templates/_features/sessions/app/components/event/Programme.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/** The programme of one event on its page (the events feature shows this file after the description): its sessions
+ *  by day, from the same rows as the programme page. Nothing when the event has no sessions. */
+const props = defineProps<{ id: string }>()
+const rows = useSessions()
+const { t } = useI18n('sessions')
+const own = computed(() => rows.value.filter((row) => row.event === props.id))
+</script>
+
+<template>
+  <section v-if="own.length" aria-labelledby="event-programme" class="mx-auto max-w-page px-gutter pt-section">
+    <h2 id="event-programme" class="text-h3">{{ t('programme.title') }}</h2>
+    <SessionProgramme :rows="own" :level="3" class="mt-8" />
+  </section>
+</template>

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

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

package/templates/events/app/components/pages/Top.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// Shown by the pages feature at the top of a page of content/pages/ (below its title): on the sponsoring page the
+// contact details of content/site.md, which its text points to. Other pages get nothing.
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <div v-if="id === 'pages/sponsoring'" class="mx-auto max-w-page px-gutter">
+    <SiteContact class="mb-10" />
+  </div>
+</template>

package/templates/events/app/components/session/NowNext.vue

@@ -0,0 +1,54 @@
+<!-- Synced from templates/_features/sessions/app/components/session/NowNext.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { ArrowRight } from '@lucide/vue'
+
+/**
+ * "Now and next" on an event day: the sessions running now and the ones that start next, with time, room and state,
+ * from the same rows as the programme; cancelled sessions are left out (the programme names them). Before the first
+ * session it says when the programme starts; after the last one, when it continues. The clock is the server's at
+ * render time, so the page and the browser agree; after that it moves on every minute. On a day without sessions it
+ * shows nothing.
+ */
+const { state, at, tick } = useNowAndNext()
+const { t } = useI18n('sessions')
+const { day } = useSessionText()
+const path = useGinkoPath()
+onMounted(tick)
+const empty = computed(() => {
+  const { before, over, next, later } = state.value
+  if (over) return later ? t('nowNext.later', { day: day(later.date), time: later.from }) : t('nowNext.over')
+  return before && next[0] ? t('nowNext.before', { time: next[0].from }) : t('nowNext.nothing')
+})
+// After the day's last session the link leads to the next day of the programme.
+const programme = computed(() => (state.value.later ? `${path('programme')}#day-${state.value.later.date}` : path('programme')))
+</script>
+
+<template>
+  <BlockSection v-if="state.day" :title="t('nowNext.title')" :lead="t('nowNext.at', { time: at.clock })" :side="false" data-now-next>
+    <div class="flex flex-col gap-8">
+      <div class="grid gap-8 md:grid-cols-2 md:gap-12">
+        <div class="flex flex-col" data-now>
+          <h3 class="text-small font-semibold text-muted-foreground">{{ t('nowNext.now') }}</h3>
+          <ul v-if="state.now.length" class="flex flex-col divide-y">
+            <li v-for="session in state.now" :key="session.id">
+              <SessionRow :session="session" heading="h4" :summary="false" />
+            </li>
+          </ul>
+          <p v-else class="py-5">{{ empty }}</p>
+        </div>
+        <div v-if="state.next.length" class="flex flex-col" data-next>
+          <h3 class="text-small font-semibold text-muted-foreground tabular-nums">{{ t('nowNext.next', { time: state.next[0]!.from }) }}</h3>
+          <ul class="flex flex-col divide-y">
+            <li v-for="session in state.next" :key="session.id">
+              <SessionRow :session="session" heading="h4" :summary="false" />
+            </li>
+          </ul>
+        </div>
+      </div>
+      <NuxtLink :to="programme" class="inline-flex min-h-11 items-center gap-2 self-start font-medium text-primary underline-offset-4 hover:underline">
+        {{ t('programme.all') }}
+        <ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+      </NuxtLink>
+    </div>
+  </BlockSection>
+</template>

package/templates/events/app/components/session/Programme.vue

@@ -0,0 +1,40 @@
+<!-- Synced from templates/_features/sessions/app/components/session/Programme.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/**
+ * Sessions by day: a heading per day (weekday and date) and its sessions in order of their start time. `level`: the
+ * heading level of the days (2 on the programme page, 3 under a section's h2); the sessions' titles are one below.
+ * Each day has an id (`day-2026-11-19`) for the day links at the top of the programme page. During an event day the
+ * running sessions say "Now" and the finished ones are muted (the clock of useSessionClock). In print each day after
+ * the first starts a new page.
+ */
+const props = withDefaults(defineProps<{ rows: SessionEntry[], level?: 2 | 3 }>(), { level: 2 })
+const { shortDay } = useSessionText()
+const { at, tick } = useSessionClock()
+onMounted(tick)
+const days = computed(() => byDay(props.rows))
+const clockOf = (session: SessionEntry) => {
+  if (session.date !== at.value.date) return undefined
+  if (session.to <= at.value.clock) return 'past'
+  return session.from <= at.value.clock && session.status !== 'cancelled' ? 'now' : undefined
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-12">
+    <section
+      v-for="(group, i) in days"
+      :id="`day-${group.date}`"
+      :key="group.date"
+      :aria-labelledby="`day-${group.date}-title`"
+      class="scroll-mt-6"
+      :class="i > 0 && 'print:break-before-page'"
+    >
+      <component :is="`h${level}`" :id="`day-${group.date}-title`" class="text-h3 tabular-nums">{{ shortDay(group.date) }}</component>
+      <ul class="mt-4 flex flex-col divide-y border-y">
+        <li v-for="session in group.sessions" :id="`session-${session.id.replace('/', '-')}`" :key="session.id" class="scroll-mt-6">
+          <SessionRow :session="session" :heading="level === 2 ? 'h3' : 'h4'" :clock="clockOf(session)" />
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>

package/templates/events/app/components/session/Row.vue

@@ -0,0 +1,61 @@
+<!-- Synced from templates/_features/sessions/app/components/session/Row.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { MapPin } from '@lucide/vue'
+
+/**
+ * One session: start and end time (with the day when `day` is set), title, its summary (`summary: false` leaves it
+ * out, as in the short "now and next" list), room, speakers linked to their pages, and its state as a word ("Sold
+ * out", "Cancelled"; nothing while it takes place). Every value comes from the session's entry (useSessions).
+ * `heading`: the level of the title under the list's own heading. `self`: the person whose page this is, named
+ * without a link. `clock`: on the programme during the event, "now" (a word, and `aria-current="time"`) or "past"
+ * (muted).
+ */
+withDefaults(defineProps<{
+  session: SessionEntry
+  day?: boolean
+  heading?: 'h3' | 'h4'
+  summary?: boolean
+  self?: string
+  clock?: 'now' | 'past'
+}>(), { heading: 'h3', summary: true })
+const { time, status, shortDay } = useSessionText()
+const { t } = useI18n('sessions')
+</script>
+
+<template>
+  <div
+    class="grid break-inside-avoid gap-x-8 gap-y-1 py-5 sm:grid-cols-[10rem_minmax(0,1fr)]"
+    :class="clock === 'past' && 'text-muted-foreground'"
+    :aria-current="clock === 'now' ? 'time' : undefined"
+    :data-session="session.id"
+    :data-session-clock="clock"
+  >
+    <p class="text-small text-muted-foreground tabular-nums sm:pt-0.5 sm:text-body sm:font-medium" :class="clock !== 'past' && 'sm:text-foreground'">
+      <span v-if="day" class="block">{{ shortDay(session.date) }}</span>
+      <time :datetime="`${session.date}T${session.from}`" data-session-time>{{ time(session) }}</time>
+      <span v-if="clock === 'now'" class="block text-small font-semibold text-primary" data-session-now>{{ t('nowNext.now') }}</span>
+    </p>
+    <div class="flex min-w-0 flex-col gap-1">
+      <component :is="heading" class="text-body font-semibold text-balance">{{ session.title }}</component>
+      <p v-if="summary && session.summary" class="max-w-prose text-small text-muted-foreground">{{ session.summary }}</p>
+      <p v-if="status(session)" class="text-small font-semibold" data-session-status>{{ status(session) }}</p>
+      <p v-if="session.room || session.speakers.length" class="flex flex-wrap items-center gap-x-3 gap-y-1 text-small text-muted-foreground">
+        <span v-if="session.room" class="inline-flex items-center gap-1.5" data-session-room>
+          <MapPin class="size-3.5 shrink-0" aria-hidden="true" />{{ session.room }}
+        </span>
+        <span v-if="session.speakers.length">
+          <template v-for="(speaker, i) in session.speakers" :key="speaker.id">
+            <template v-if="i">, </template>
+            <!-- Padding on an inline link widens its touch area to 44 px without moving the line. -->
+            <NuxtLink
+              v-if="speaker.to && speaker.id !== self"
+              :to="speaker.to"
+              class="font-medium text-foreground underline underline-offset-4 hover:text-primary pointer-coarse:py-3"
+            >{{ speaker.name }}</NuxtLink>
+            <span v-else>{{ speaker.name }}</span>
+          </template>
+        </span>
+      </p>
+    </div>
+  </div>
+</template>

package/templates/events/app/components/session/Speakers.vue

@@ -0,0 +1,28 @@
+<!-- Synced from templates/_features/sessions/app/components/session/Speakers.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/**
+ * Speakers as a grid: photo (4:5) or initials, name linked to the speaker's page, role. Never a stock face for a named
+ * person: without a photo the initials stand in. `heading`: h2 on the speakers page, h3 under a section's h2.
+ */
+withDefaults(defineProps<{ items: GinkoItem<'people'>[], heading?: 'h2' | 'h3' }>(), { heading: 'h3' })
+</script>
+
+<template>
+  <ul class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-3 lg:grid-cols-4">
+    <li v-for="person in items" :key="person.id" class="group relative flex flex-col gap-4 has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-3 has-[a:focus-visible]:outline-ring">
+      <GinkoImage
+        v-if="person.data.photo"
+        :image="person.data.photo"
+        sizes="(min-width: 1024px) 288px, (min-width: 640px) 33vw, 50vw"
+        class="aspect-4/5 w-full rounded-block bg-muted object-cover"
+      />
+      <InitialsAvatar v-else :name="person.data.name" size="lg" />
+      <div class="flex flex-col gap-1">
+        <component :is="heading" class="text-body font-semibold">
+          <NuxtLink :to="person.url" class="outline-none underline-offset-4 group-hover:underline after:absolute after:inset-0">{{ person.data.name }}</NuxtLink>
+        </component>
+        <p v-if="person.data.role" class="text-small text-muted-foreground">{{ person.data.role }}</p>
+      </div>
+    </li>
+  </ul>
+</template>

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

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

package/templates/events/app/components/site/Footer.vue

@@ -0,0 +1,81 @@
+<!-- Synced from templates/_features/site/app/components/site/Footer.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'
+
+// Identity and contact from content/site.md, the tagline, navigation, more links and profiles from app.config.ts,
+// the language switch, and the legal texts from content/legal/. On paper only the name, address, email and phone stay,
+// so a printed page says whose it is and how to reach them. One muted background, no border: the bottom bar's
+// line divides inside it. A feature may bring `app/components/site/FooterStatus.vue` (the hours feature: open now);
+// the contact column then shows it first, on every page, without a copy of this footer per template.
+const status = Object.values(import.meta.glob<Component>('./FooterStatus.vue', { eager: true, import: 'default' }))[0]
+const config = useSiteAppConfig()
+const { name } = useGinkoSite()
+const site = useGinko('site')
+const legal = useGinko('legal')
+const locale = useGinkoLocale()
+const pages = useSiteLinks(() => [...config.nav, ...config.footer])
+const { t } = useI18n('site')
+const contact = computed(() => site.value.data)
+const tagline = computed(() => config.tagline?.[locale.value])
+const year = useGinkoToday().value.slice(0, 4)
+</script>
+
+<template>
+  <footer class="mt-section bg-muted print:mt-10 print:border-t print:bg-transparent">
+    <div class="mx-auto grid max-w-page gap-8 px-gutter py-14 md:grid-cols-3 md:gap-10 print:gap-2 print:py-4">
+      <div class="flex flex-col gap-3">
+        <p class="font-display text-body font-semibold"><bdi>{{ name }}</bdi></p>
+        <p v-if="tagline" class="max-w-xs text-small text-muted-foreground print:hidden">{{ tagline }}</p>
+        <ul v-if="config.socials.length" class="flex flex-wrap gap-x-5 gap-y-1 text-small print:hidden" :aria-label="t('footer.links')">
+          <li v-for="social in config.socials" :key="social.url">
+            <a :href="safeHref(social.url)" rel="me noopener" class="inline-flex min-h-11 min-w-11 items-center text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">{{ social.label }}</a>
+          </li>
+        </ul>
+      </div>
+
+      <nav v-if="pages.length" aria-labelledby="footer-pages" class="flex flex-col gap-2 print:hidden">
+        <h2 id="footer-pages" class="text-small font-semibold">{{ t('footer.pages') }}</h2>
+        <ul class="flex flex-col text-small">
+          <li v-for="link in pages" :key="link.key">
+            <SiteNavLink :to="link.to" class="inline-flex min-h-11 min-w-11 items-center text-muted-foreground underline-offset-4 hover:text-foreground hover:underline aria-[current=page]:text-foreground aria-[current=page]:underline">{{ link.label }}</SiteNavLink>
+          </li>
+        </ul>
+      </nav>
+
+      <div v-if="status || contact.email || contact.phone || contact.city" class="flex flex-col gap-2">
+        <h2 class="text-small font-semibold print:hidden">{{ t('footer.contact') }}</h2>
+        <div v-if="status" class="py-2 print:hidden">
+          <component :is="status" />
+        </div>
+        <address v-if="contact.email || contact.phone || contact.city" class="flex flex-col text-small text-muted-foreground not-italic">
+          <!-- Each line keeps the direction of its own text (bdi), so a Latin address keeps its order and its full
+               stops on a right-to-left page; email and phone are always left to right. -->
+          <span v-if="contact.city" class="flex flex-col py-2">
+            <span v-if="contact.legalName"><bdi>{{ contact.legalName }}</bdi></span>
+            <span v-if="contact.street"><bdi>{{ contact.street }}</bdi></span>
+            <span><bdi>{{ contact.postalCode }} {{ contact.city }}</bdi></span>
+          </span>
+          <a v-if="contact.email" :href="`mailto:${contact.email}`" dir="ltr" class="inline-flex min-h-11 items-center self-start underline-offset-4 hover:text-foreground hover:underline">{{ contact.email }}</a>
+          <a v-if="contact.phone" :href="telHref(contact.phone)" dir="ltr" class="inline-flex min-h-11 items-center self-start tabular-nums underline-offset-4 hover:text-foreground hover:underline">{{ contact.phone }}</a>
+        </address>
+      </div>
+    </div>
+
+    <div class="border-t print:hidden">
+      <div class="mx-auto flex max-w-page flex-col gap-2 px-gutter py-5 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+        <p>© {{ year }} <bdi>{{ contact.legalName || name }}</bdi></p>
+        <div class="flex flex-col sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-8 print:hidden">
+          <SiteLanguageSwitch names />
+          <nav v-if="legal.items.length" :aria-label="t('footer.legal')">
+            <ul class="flex flex-wrap gap-x-5">
+              <li v-for="item in legal.items" :key="item.id">
+                <SiteNavLink :to="item.urls?.[locale] ?? ''" class="inline-flex min-h-11 min-w-11 items-center underline-offset-4 hover:text-foreground hover:underline aria-[current=page]:text-foreground aria-[current=page]:underline">{{ item.data.title }}</SiteNavLink>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>