create-ginko 0.4.0 → 0.5.0

package/templates/nonprofit/app/components/block/Cards.vue

@@ -0,0 +1,54 @@
+<!-- Synced from templates/_features/site/app/components/block/Cards.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { ImageValue } from '@lupinum/ginko'
+import { ArrowRight } from '@lucide/vue'
+
+export interface Card {
+  key: string
+  title: string
+  to: string
+  text?: string
+  /** A date, price or status line above the title, in tabular numbers. */
+  meta?: string
+  image?: ImageValue
+}
+
+/** Two to four cards per row; the whole card is one link (the title's link stretches over it), marked by an arrow.
+ *  Photos are 3:2. `headingLevel`: h3 under a section's h2 (default), h2 when the cards follow the page's h1.
+ *  `compact`: on phones (below `sm`) each card is one row, a square photo of 96 px at the start next to the meta line
+ *  and the title, without the text and the arrow, so a list of three fits in less than a screen. */
+const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean }>(), { columns: 3, headingLevel: 'h3' })
+// Never an empty column at lg: fewer items than `columns` take that many columns (two at least; one item stays as is).
+const lgColumns = computed(() => (props.items.length > 1 ? Math.min(props.columns, Math.max(2, props.items.length)) : props.columns))
+const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw, ${props.compact ? '96px' : '100vw'}`)
+</script>
+
+<template>
+  <ul
+    class="grid gap-6 sm:grid-cols-2"
+    :class="{ 'lg:grid-cols-3': lgColumns === 3, 'lg:grid-cols-4': lgColumns === 4, 'max-sm:gap-3': compact }"
+  >
+    <li
+      v-for="item in items"
+      :key="item.key"
+      class="group relative flex overflow-hidden rounded-block border bg-card transition-[color,background-color,border-color] duration-150 hover:bg-muted has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-3 has-[a:focus-visible]:outline-ring"
+      :class="compact ? 'max-sm:items-center sm:flex-col' : 'flex-col'"
+    >
+      <GinkoImage
+        v-if="item.image"
+        :image="item.image"
+        :sizes="sizes"
+        class="aspect-3/2 w-full bg-muted object-cover"
+        :class="{ 'max-sm:m-3 max-sm:me-0 max-sm:aspect-square max-sm:size-24 max-sm:shrink-0 max-sm:rounded-md': compact }"
+      />
+      <div class="flex flex-1 flex-col gap-2 p-6" :class="{ 'max-sm:gap-1 max-sm:p-4': compact }">
+        <p v-if="item.meta" class="text-small text-muted-foreground tabular-nums">{{ item.meta }}</p>
+        <component :is="headingLevel" class="text-h3">
+          <NuxtLink :to="item.to" class="outline-none after:absolute after:inset-0">{{ item.title }}</NuxtLink>
+        </component>
+        <p v-if="item.text" class="text-muted-foreground" :class="{ 'max-sm:hidden': compact }">{{ item.text }}</p>
+        <ArrowRight class="mt-auto size-5 text-muted-foreground rtl:-scale-x-100" :class="{ 'max-sm:hidden': compact }" aria-hidden="true" />
+      </div>
+    </li>
+  </ul>
+</template>

package/templates/nonprofit/app/components/block/Cta.vue

@@ -0,0 +1,26 @@
+<!-- Synced from templates/_features/site/app/components/block/Cta.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/** The closing band of a page, on the accent colour: one sentence and one action. At most one per page; never on
+ *  legal, contact or error pages. The slot takes one more line below the text, such as the next date. */
+defineProps<{
+  title: string
+  text?: string
+  action: { label: string, to: string }
+}>()
+const titleId = useId()
+</script>
+
+<template>
+  <section :aria-labelledby="titleId" class="mx-auto max-w-page px-gutter pt-section print:hidden">
+    <div class="surface-primary flex flex-col gap-8 rounded-block px-6 py-12 sm:px-12 md:flex-row md:items-end md:justify-between md:py-16">
+      <div class="flex max-w-2xl flex-col gap-4">
+        <h2 :id="titleId" class="text-h2">{{ title }}</h2>
+        <p v-if="text" class="text-lead text-muted-foreground">{{ text }}</p>
+        <slot />
+      </div>
+      <Button as-child size="lg" class="shrink-0 max-sm:w-full">
+        <NuxtLink :to="action.to">{{ action.label }}</NuxtLink>
+      </Button>
+    </div>
+  </section>
+</template>

package/templates/nonprofit/app/components/block/Empty.vue

@@ -0,0 +1,26 @@
+<!-- Synced from templates/_features/site/app/components/block/Empty.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { FilePlus } from '@lucide/vue'
+
+/** An empty list: what to add, and in files mode where (`path`, for example `content/pages/`). The path is for the
+ *  owner: it shows in development only (`npm run dev`), never to visitors of the built site. */
+defineProps<{
+  title: string
+  text?: string
+  path?: string
+}>()
+const dev = import.meta.dev
+</script>
+
+<template>
+  <div class="flex flex-col items-start gap-3 rounded-block border border-dashed p-8">
+    <FilePlus class="size-6 text-muted-foreground" aria-hidden="true" />
+    <p class="text-body font-medium">{{ title }}</p>
+    <p v-if="text" class="text-muted-foreground">{{ text }}</p>
+    <p v-if="path && dev" class="text-small text-muted-foreground">
+      <I18nT k="site.empty" :params="{ path }">
+        <template #code="{ text: file }"><code>{{ file }}</code></template>
+      </I18nT>
+    </p>
+  </div>
+</template>

package/templates/nonprofit/app/components/block/Features.vue

@@ -0,0 +1,24 @@
+<!-- Synced from templates/_features/site/app/components/block/Features.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+export interface Feature {
+  title: string
+  text: string
+  /** A lucide icon component, for example `Leaf` from '@lucide/vue'. */
+  icon?: Component
+}
+
+/** Two to six short items divided by lines, no cards. Use inside BlockSection. */
+defineProps<{ items: Feature[] }>()
+</script>
+
+<template>
+  <ul class="grid gap-x-10 sm:grid-cols-2">
+    <li v-for="item in items" :key="item.title" class="flex flex-col gap-3 border-t py-8">
+      <component :is="item.icon" v-if="item.icon" class="size-6 text-primary" aria-hidden="true" />
+      <h3 class="text-h3">{{ item.title }}</h3>
+      <p class="text-muted-foreground">{{ item.text }}</p>
+    </li>
+  </ul>
+</template>

package/templates/nonprofit/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/nonprofit/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/nonprofit/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/nonprofit/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/nonprofit/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/nonprofit/app/components/blog/Byline.vue

@@ -0,0 +1,22 @@
+<!-- Synced from templates/_features/blog/app/components/blog/Byline.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { BlogPost } from '~/composables/useBlog'
+
+/** The authors of a post with their initials and role, under the post's header; the name links to the author's page
+ *  when people have pages. */
+defineProps<{ authors: BlogPost['authors'] }>()
+const { t } = useI18n('blog')
+</script>
+
+<template>
+  <ul v-if="authors.length" class="flex flex-wrap gap-x-8 gap-y-4" :aria-label="t('authors')">
+    <li v-for="author in authors" :key="author.id" class="flex items-center gap-3">
+      <InitialsAvatar :name="author.name" />
+      <span class="flex flex-col">
+        <NuxtLink v-if="author.to" :to="author.to" class="font-medium underline-offset-4 hover:underline">{{ author.name }}</NuxtLink>
+        <span v-else class="font-medium">{{ author.name }}</span>
+        <span v-if="author.role" class="text-small text-muted-foreground">{{ author.role }}</span>
+      </span>
+    </li>
+  </ul>
+</template>

package/templates/nonprofit/app/components/blog/PostList.vue

@@ -0,0 +1,33 @@
+<!-- Synced from templates/_features/blog/app/components/blog/PostList.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { BlogPost } from '~/composables/useBlog'
+
+/** Posts as rows divided by lines: date and authors, title (the link), summary, and the cover (3:2) at the end of the
+ *  row from `sm` up, above the text on phones. A post without a cover is a row without an image, not a gap. `images` false
+ *  leaves the covers out (a teaser on a home page). */
+withDefaults(defineProps<{ items: BlogPost[], headingLevel?: 'h2' | 'h3', images?: boolean }>(), { headingLevel: 'h2', images: true })
+const { format, t } = useI18n('blog')
+</script>
+
+<template>
+  <ul class="flex flex-col border-b">
+    <li v-for="post in items" :key="post.id" class="group relative flex flex-col gap-5 border-t py-8 sm:flex-row-reverse sm:items-start sm:gap-8">
+      <GinkoImage
+        v-if="images && post.image"
+        :image="post.image"
+        sizes="(min-width: 640px) 224px, 100vw"
+        class="aspect-3/2 w-full shrink-0 rounded-block bg-muted object-cover sm:w-56"
+      />
+      <div class="flex min-w-0 flex-1 flex-col gap-2">
+        <p class="text-small text-muted-foreground">
+          <time :datetime="post.date">{{ format.date(post.date) }}</time>
+          <template v-if="post.authors.length"><span aria-hidden="true"> · </span><span class="sr-only">, </span>{{ t('by', { names: format.list(post.authors.map((a) => a.name)) }) }}</template>
+        </p>
+        <component :is="headingLevel" class="text-h3">
+          <NuxtLink :to="post.to" class="underline-offset-4 after:absolute after:inset-0 group-hover:underline">{{ post.title }}</NuxtLink>
+        </component>
+        <p v-if="post.description" class="text-muted-foreground">{{ post.description }}</p>
+      </div>
+    </li>
+  </ul>
+</template>

package/templates/nonprofit/app/components/blog/TagList.vue

@@ -0,0 +1,17 @@
+<!-- Synced from templates/_features/blog/app/components/blog/TagList.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/** The tags as chips: label and number of posts, linked to the tag's page. A screen reader hears one phrase per chip. */
+defineProps<{ tags: { name: string, slug: string, to: string, count: number }[] }>()
+const { t } = useI18n('blog')
+</script>
+
+<template>
+  <ul class="flex flex-wrap gap-2">
+    <li v-for="tag in tags" :key="tag.slug">
+      <NuxtLink :to="tag.to" rel="tag" class="inline-flex min-h-11 items-center gap-2 rounded-md border px-4 text-small transition-[color,background-color,border-color] duration-150 hover:bg-accent">
+        <span class="sr-only">{{ t('topicCount', { name: tag.name, count: tag.count }) }}</span>
+        <span aria-hidden="true">{{ tag.name }}</span><span class="text-muted-foreground tabular-nums" aria-hidden="true">{{ tag.count }}</span>
+      </NuxtLink>
+    </li>
+  </ul>
+</template>

package/templates/nonprofit/app/components/downloads/FileButton.vue

@@ -0,0 +1,21 @@
+<!-- Synced from templates/_features/downloads/app/components/downloads/FileButton.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { Download } from '@lucide/vue'
+
+/** One document of the downloads brick, by id, as a secondary button: `label`, then file type, size and the document's
+ *  language when it is not the page's ("PDF, 240 kB, English"). Another feature shows it without knowing the brick:
+ *  the services page finds this file and passes a product's `sheet`. Nothing when the id names no document. */
+const props = defineProps<{ id: string, label: string }>()
+const downloads = useGinko('downloads')
+const { type, size, languageName, hreflang, mediaType } = useDownloadText()
+const doc = computed(() => downloads.value.items.find((item) => item.id === props.id)?.data)
+</script>
+
+<template>
+  <Button v-if="doc" as-child size="lg" variant="outline" class="max-sm:w-full">
+    <a :href="doc.file.url" :type="mediaType(doc)" :hreflang="hreflang(doc)">
+      <Download aria-hidden="true" />{{ label }}
+      <span class="font-normal text-muted-foreground tabular-nums">{{ [type(doc), size(doc), languageName(doc)].filter(Boolean).join(', ') }}</span>
+    </a>
+  </Button>
+</template>

package/templates/nonprofit/app/components/downloads/List.vue

@@ -0,0 +1,37 @@
+<!-- Synced from templates/_features/downloads/app/components/downloads/List.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { Download } from '@lucide/vue'
+
+/** Files to download as rows: title (a direct link to the file), summary, and date, file type and size. The language
+ *  of a document shows when it is not the language of the page ("English" on the German page); a document without
+ *  one is in the site's main language. */
+defineProps<{ items: GinkoItem<'downloads'>[] }>()
+const { t, format } = useI18n('downloads')
+const { type, size, languageName, hreflang, mediaType } = useDownloadText()
+</script>
+
+<template>
+  <ul class="flex flex-col border-b">
+    <li v-for="item in items" :key="item.id" class="group relative flex items-start gap-4 border-t py-6">
+      <div class="flex min-w-0 flex-1 flex-col gap-1.5">
+        <h2 class="text-h3">
+          <a
+            :href="item.data.file.url"
+            :type="mediaType(item.data)"
+            :hreflang="hreflang(item.data)"
+            class="underline-offset-4 after:absolute after:inset-0 group-hover:underline"
+          >{{ item.data.title }}</a>
+        </h2>
+        <p v-if="item.data.summary" class="text-muted-foreground">{{ item.data.summary }}</p>
+        <!-- Each part in its own bdi, so a Latin file type next to a number keeps its order on a right-to-left page. -->
+        <p class="text-small text-muted-foreground tabular-nums">
+          <time :datetime="item.data.date">{{ format.date(item.data.date) }}</time>
+          <template v-for="part in [type(item.data), size(item.data), languageName(item.data) && t('in', { language: languageName(item.data)! })].filter(Boolean)" :key="part">
+            <span aria-hidden="true"> · </span><span class="sr-only">, </span><bdi>{{ part }}</bdi>
+          </template>
+        </p>
+      </div>
+      <Download class="mt-1 size-5 shrink-0 text-muted-foreground" aria-hidden="true" />
+    </li>
+  </ul>
+</template>

package/templates/nonprofit/app/components/event/Next.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// The next date of content/events/: its title, the day with the weekday and, for one day, the time (several days:
+// the range of dates, as on the cards) and the place. Events leave the site after their last day, so the first one is
+// the next. Renders nothing when no date is planned. Shown in the home hero and at the top of the Get involved page;
+// the title links to the event's page. The time sits in <bdi> so a range keeps its order in Arabic.
+const events = useGinko('events')
+const { t } = useI18n()
+const { dates, times } = useEventText()
+const next = computed(() => events.value.items[0])
+</script>
+
+<template>
+  <div v-if="next" class="flex flex-col gap-1">
+    <p class="text-small font-medium text-muted-foreground">{{ t('event.next') }}</p>
+    <p class="font-semibold">
+      <NuxtLink v-if="next.url" :to="next.url" class="underline underline-offset-4 hover:decoration-2">{{ next.data.title }}</NuxtLink>
+      <template v-else>{{ next.data.title }}</template>
+    </p>
+    <p class="tabular-nums">
+      <time :datetime="next.data.when.from">{{ dates(next.data) }}</time><template v-if="next.data.when.from === next.data.when.to && times(next.data)">{{ t('event.separator') }}<bdi>{{ times(next.data) }}</bdi></template>
+    </p>
+    <p v-if="next.data.location"><bdi>{{ next.data.location }}</bdi></p>
+  </div>
+</template>

package/templates/nonprofit/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/nonprofit/app/components/pages/Top.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// Shown by the pages feature at the top of a page of content/pages/ (below its title): on the Get involved page the
+// next date, so the main way to help has its date right there, the dates after it, and the contact details of
+// content/site.md, which the text of the page points to. Other pages get nothing.
+defineProps<{ id: string }>()
+const { t } = useI18n()
+</script>
+
+<template>
+  <div v-if="id === 'pages/get-involved'" class="pb-10">
+    <div class="mx-auto max-w-page px-gutter">
+      <EventNext class="max-w-3xl rounded-block border p-6" />
+    </div>
+    <EventUpcoming :skip="1" :title="t('event.later')" />
+    <div class="mx-auto max-w-page px-gutter pt-10">
+      <SiteContact />
+    </div>
+  </div>
+</template>

package/templates/nonprofit/app/components/people/List.vue

@@ -0,0 +1,41 @@
+<!-- Synced from templates/_features/people/app/components/people/List.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/** People as a grid: photo (4:5) or initials, name (a link to the person's page when people have pages), role, short
+ *  bio and contact. Never a stock face for a named person: without a photo the initials stand in, on phones small and
+ *  beside the name, so the bios stay close. */
+defineProps<{ items: GinkoItem<'people'>[] }>()
+const { t } = useI18n('people')
+const locale = useGinkoLocale()
+</script>
+
+<template>
+  <ul class="grid gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
+    <li v-for="person in items" :id="person.id.split('/').pop()" :key="person.id" class="flex flex-col gap-4 break-inside-avoid">
+      <GinkoImage
+        v-if="person.data.photo"
+        :image="person.data.photo"
+        sizes="(min-width: 1024px) 384px, (min-width: 640px) 50vw, 100vw"
+        class="aspect-4/5 w-full rounded-block bg-muted object-cover"
+      />
+      <div class="flex flex-col gap-4" :class="!person.data.photo && 'max-sm:flex-row max-sm:items-center'">
+        <InitialsAvatar v-if="!person.data.photo" :name="person.data.name" size="lg" class="max-sm:size-12 max-sm:text-body" />
+        <div class="flex min-w-0 flex-col gap-1">
+          <h2 class="text-h3">
+            <NuxtLink v-if="person.urls?.[locale]" :to="person.urls[locale]" class="underline-offset-4 hover:underline">{{ person.data.name }}</NuxtLink>
+            <template v-else>{{ person.data.name }}</template>
+          </h2>
+          <p v-if="person.data.role" class="text-muted-foreground">{{ person.data.role }}</p>
+        </div>
+      </div>
+      <p v-if="person.data.bio">{{ person.data.bio }}</p>
+      <ul v-if="person.data.email || person.data.phone" class="flex flex-col text-small" :aria-label="t('contact', { name: person.data.name })">
+        <li v-if="person.data.email">
+          <a :href="`mailto:${person.data.email}`" dir="ltr" class="inline-flex min-h-11 items-center text-primary underline underline-offset-4">{{ person.data.email }}</a>
+        </li>
+        <li v-if="person.data.phone">
+          <a :href="telHref(person.data.phone)" dir="ltr" class="inline-flex min-h-11 items-center tabular-nums text-primary underline underline-offset-4">{{ person.data.phone }}</a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</template>

package/templates/nonprofit/app/components/people/TeamContact.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+// The association's email, phone and address above the people, from content/site.md.
+</script>
+
+<template>
+  <SiteContact class="border-y py-6" />
+</template>

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