create-ginko 0.4.0 → 0.5.0

package/templates/nonprofit/app/composables/useBlog.ts

@@ -0,0 +1,103 @@
+// Synced from templates/_features/blog/app/composables/useBlog.ts by `pnpm templates sync`. Edit the source, not this copy.
+import { wordsOf } from '@lupinum/ginko'
+
+/** A post as the blog's lists and pages show it: the entry plus its authors' names and roles from `people`. */
+export interface BlogPost {
+  id: string
+  title: string
+  to: string
+  date: string
+  description?: string
+  image?: GinkoItem<'posts'>['data']['image']
+  tags: string[]
+  /** Reading time in whole minutes, at least 1; 0 when the text's length is unknown. */
+  minutes: number
+  /** `to` is the author's page when `people` has a route. */
+  authors: { id: string, name: string, role?: string, to?: string }[]
+}
+
+/** Words a reader reads in a minute, for the reading time. */
+const WORDS_PER_MINUTE = 200
+
+/**
+ * The visible posts in the current language, newest first, with their authors (entries of `people`, by id). A draft
+ * (`draft: true` in its file) and a post dated after the build day are never among them: they stay out of the build.
+ */
+export function useBlogPosts() {
+  const posts = useGinko('posts')
+  const people = useGinko('people')
+  const locale = useGinkoLocale()
+  return computed<BlogPost[]>(() => {
+    const byId = new Map(people.value.items.map((person) => [person.id, person]))
+    return posts.value.items.map((post) => {
+      // The bundle carries the text's word count next to its reference, so a list needs no text to show the time.
+      const words = wordsOf(post.data.body) ?? 0
+      return {
+        id: post.id,
+        title: post.data.title,
+        to: post.urls?.[locale.value] ?? '',
+        date: post.data.date,
+        description: post.data.description,
+        image: post.data.image,
+        // A tag without letters or digits has no address (empty slug), so it is left out instead of breaking the route.
+        tags: (post.data.tags ?? []).map((row) => row.tag).filter((tag) => tagSlug(tag)),
+        minutes: words ? Math.max(1, Math.round(words / WORDS_PER_MINUTE)) : 0,
+        authors: (post.data.authors ?? []).flatMap((id) => {
+          const person = byId.get(id)
+          return person ? [{ id, name: person.data.name, role: person.data.role, to: person.urls?.[locale.value] }] : []
+        }),
+      }
+    })
+  })
+}
+
+/** The address word of a tag: "Street trees" → "street-trees", "Vögel" → "voegel". Tags are free text per language. */
+export function tagSlug(tag: string) {
+  return tag
+    .replace(/[äöüÄÖÜß]/g, (c) => ({ ä: 'ae', ö: 'oe', ü: 'ue', Ä: 'ae', Ö: 'oe', Ü: 'ue', ß: 'ss' })[c] ?? c)
+    .normalize('NFKD')
+    .replace(/\p{M}/gu, '')
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}]+/gu, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+/** A tag as a visitor reads it: tags are free text and often lowercase in the files ("tips"), so the first letter is upper-cased. */
+export function tagLabel(tag: string) {
+  return tag.charAt(0).toLocaleUpperCase() + tag.slice(1)
+}
+
+/**
+ * The address of a tag's page (news/tags/[tag].vue) in the current language: `/news/tags/water`, or with the words
+ * of `segments` in app/routes.ts `/de/aktuelles/themen/wasser`. The page has no `pages` key, so the address comes from
+ * its route (ginko-i18n names the route of each language `<name>__<code>`).
+ */
+export function useTagPath() {
+  const router = useRouter()
+  const locale = useGinkoLocale()
+  return (tag: string) => router.resolve({ name: `news-tags-tag__${locale.value}`, params: { tag: tagSlug(tag) } }).path
+}
+
+/** Every tag of the visible posts, most used first, with the number of posts and its page. */
+export function useBlogTags() {
+  const posts = useBlogPosts()
+  const tagPath = useTagPath()
+  return computed(() => {
+    const tags = new Map<string, { name: string, slug: string, to: string, count: number }>()
+    for (const post of posts.value) {
+      for (const name of new Set(post.tags)) {
+        const slug = tagSlug(name)
+        const tag = tags.get(slug)
+        if (tag) tag.count++
+        else tags.set(slug, { name: tagLabel(name), slug, to: tagPath(name), count: 1 })
+      }
+    }
+    return [...tags.values()].sort((a, b) => b.count - a.count || a.name.localeCompare(b.name, undefined, { numeric: true }))
+  })
+}
+
+/** The path of the news feed of the current language: `<news page>/rss.xml`. */
+export function useFeedPath() {
+  const path = useGinkoPath()
+  return computed(() => `${path('news')}/rss.xml`)
+}

package/templates/nonprofit/app/composables/useDownloads.ts

@@ -0,0 +1,54 @@
+// Synced from templates/_features/downloads/app/composables/useDownloads.ts by `pnpm templates sync`. Edit the source, not this copy.
+/** What the downloads feature reads of a document: its file and, optionally, its language (`downloads()` of basics). */
+export interface DownloadFacts {
+  file: { name: string, size: number }
+  language?: string | null
+}
+
+/**
+ * The facts of a document in the page's language, for the list and for a link to one document elsewhere (a product
+ * sheet): file type ("PDF"), size ("240 kB"), and the document's language when it is not the page's ("English" on the
+ * German page; a document without one is in the site's main language), with its `hreflang` and media type.
+ */
+export function useDownloadText() {
+  const { format, language } = useI18n('downloads')
+  const { mainLocale } = useGinkoSite()
+  const base = (tag: string) => tag.toLowerCase().split('-')[0]!
+  /** The document's language as a BCP 47 tag (`en`, `de-AT`), or undefined. The field is free text: a word such as
+   *  "Englisch" is no tag, so it never becomes an hreflang; it then shows as written. */
+  const tagOf = (code: string | null | undefined) => (code && /^[a-z]{2,3}(-[a-z\d]{2,8})*$/i.test(code) ? code : undefined)
+  /** `hreflang` of the link: the document's tag, the main language for a document without one, none for free text. */
+  const hreflang = (doc: DownloadFacts) => tagOf(doc.language) ?? (doc.language ? undefined : mainLocale)
+  /** The document's language by name in the page's language, or undefined when it is the page's own. */
+  function languageName(doc: DownloadFacts): string | undefined {
+    const code = doc.language
+    if (code && !tagOf(code)) return code
+    const tag = code || mainLocale
+    if (base(tag) === base(language.value)) return undefined
+    try {
+      return new Intl.DisplayNames([language.value], { type: 'language' }).of(tag)
+    } catch {
+      return tag
+    }
+  }
+  const type = (doc: DownloadFacts) => doc.file.name.split('.').at(-1)?.toUpperCase() ?? ''
+  /** The media type for the link's `type`, from the file's extension; undefined for one this list does not know. */
+  const mediaType = (doc: DownloadFacts) => MEDIA_TYPES[doc.file.name.split('.').at(-1)?.toLowerCase() ?? '']
+  function size(doc: DownloadFacts) {
+    const mb = doc.file.size / 1024 / 1024
+    return mb >= 1
+      ? format.number(mb, { style: 'unit', unit: 'megabyte', maximumFractionDigits: 1 })
+      : format.number(Math.max(1, Math.round(doc.file.size / 1024)), { style: 'unit', unit: 'kilobyte' })
+  }
+  return { type, size, languageName, hreflang, mediaType }
+}
+
+const MEDIA_TYPES: Partial<Record<string, string>> = {
+  pdf: 'application/pdf',
+  zip: 'application/zip',
+  csv: 'text/csv',
+  txt: 'text/plain',
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+}

package/templates/nonprofit/app/composables/useEvents.ts

@@ -0,0 +1,182 @@
+// Synced from templates/_features/events/app/composables/useEvents.ts by `pnpm templates sync`. Edit the source, not this copy.
+import { formatMoney, safeHref, type ImageValue, type MarkdownTree, type Money } from '@lupinum/ginko'
+import { eventJsonLd, type SessionJsonLdInput } from '@lupinum/ginko/basics'
+
+/** What the events feature reads of an entry of the `events` brick (`events()` of `@lupinum/ginko/basics`). */
+export interface EventFacts {
+  title: string
+  when: { from: string, to: string }
+  start?: string | null
+  end?: string | null
+  location?: string | null
+  online?: string | null
+  price?: Money | null
+  booking?: string | null
+  /** The last day the booking link shows (ticket sales that close before the event). */
+  bookingUntil?: string | null
+  soldOut?: boolean | null
+  image?: ImageValue | null
+}
+
+/** `events` in app/app.config.ts. */
+export interface EventsAppConfig {
+  /** True when the events happen at the business itself (a restaurant's evenings): an event without a location and
+   *  without an online link then takes place at the site's name and address (content/site.md). Default false: such
+   *  an event shows no place, since content/site.md is the organiser's address, not necessarily the venue. */
+  atTheBusiness?: boolean
+}
+
+declare module 'nuxt/schema' {
+  interface CustomAppConfig {
+    events?: EventsAppConfig
+  }
+}
+
+/** A price in the page's language, without minor units when the amount is whole ("€38", "€12.50"). */
+export function wholeMoney(money: Money, language: string): string {
+  const digits = new Intl.NumberFormat('en', { style: 'currency', currency: money.currency }).resolvedOptions().maximumFractionDigits ?? 2
+  const value = money.amount / 10 ** digits
+  if (!Number.isInteger(value)) return formatMoney(money, language)
+  return new Intl.NumberFormat(language, { style: 'currency', currency: money.currency, maximumFractionDigits: 0 }).format(value).replace(/\s/g, ' ')
+}
+
+/**
+ * The booking link while booking is open: none when the event is fully booked or `bookingUntil` (a date in the site's
+ * time zone, the last day it shows) has passed. `today`: YYYY-MM-DD in the site's time zone.
+ */
+export function bookingHref(event: Pick<EventFacts, 'booking' | 'bookingUntil' | 'soldOut'>, today: string): string | undefined {
+  if (event.soldOut || (event.bookingUntil && today > event.bookingUntil)) return undefined
+  return safeHref(event.booking ?? undefined)
+}
+
+/** bookingHref at today's date in the site's time zone (the server's day, carried to the browser). */
+export function useEventBooking() {
+  const today = useGinkoToday()
+  return (event: Pick<EventFacts, 'booking' | 'bookingUntil' | 'soldOut'>) => bookingHref(event, today.value)
+}
+
+/** Booking has closed before the event (`bookingUntil` passed): say so instead of offering another way to book. */
+export function useBookingClosed() {
+  const today = useGinkoToday()
+  return (event: Pick<EventFacts, 'booking' | 'bookingUntil' | 'soldOut'>) =>
+    Boolean(!event.soldOut && safeHref(event.booking ?? undefined) && event.bookingUntil && today.value > event.bookingUntil)
+}
+
+/**
+ * Texts of an event in the page's language: the date with its weekday (a range for several days) and the clock times
+ * as the owner entered them, in the site's time zone; the price; "fully booked".
+ */
+export function useEventText() {
+  const { t, format, language, locale, locales } = useI18n('events')
+  // On a right-to-left page a clock range and a phone number keep their left-to-right order ("10:00–13:00", as the
+  // next date of the nonprofit shows it): an isolate, since the text also goes into cards, titles and buttons where
+  // no <bdi> fits.
+  const rtl = computed(() => locales.find((l) => l.code === locale.value)?.dir === 'rtl')
+  const ltr = (text: string) => (rtl.value ? `\u2066${text}\u2069` : text)
+  const weekday = (date: string) => format.date(date, { weekday: 'short' })
+  const long = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' } as const
+  const short = { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' } as const
+  const dates = (event: EventFacts, style: 'long' | 'short' = 'long') => {
+    const options = style === 'long' ? long : short
+    return event.when.from === event.when.to ? format.date(event.when.from, options) : format.range(event.when.from, event.when.to, options)
+  }
+  // `start` is the clock time of the first day and `end` of the last: over several days "Thu 09:00 – Fri 16:00", so
+  // the range never reads as the hours of each day.
+  const times = (event: EventFacts) => {
+    if (!event.start || !event.end) return event.start ?? undefined
+    if (event.when.from === event.when.to) return ltr(`${event.start}–${event.end}`)
+    return `${weekday(event.when.from)} ${ltr(event.start)} – ${weekday(event.when.to)} ${ltr(event.end)}`
+  }
+  /**
+   * One line for a card: "Fri, 29 Jan 2027 · 19:00". Over several days the dates only: the model has no daily hours,
+   * and first-day and last-day times next to a weekday range read as a repeat; the event page has the Time row.
+   */
+  const when = (event: EventFacts, style: 'long' | 'short' = 'long') =>
+    [dates(event, style), event.when.from === event.when.to ? times(event) : undefined].filter(Boolean).join(' · ')
+  /** "€38 per person": a whole amount without minor units, which read like a till receipt ("€38.00"). A price of 0 is "Free". */
+  const price = (event: EventFacts) => {
+    if (!event.price) return undefined
+    if (event.price.amount === 0) return t('free')
+    // Non-breaking spaces: the price never wraps inside ("€40 per / person").
+    return t('perPerson', { price: wholeMoney(event.price, language.value) }).replace(/\s/g, '\u00a0')
+  }
+  /** Price and "fully booked", for a list. */
+  const status = (event: EventFacts) => [price(event), event.soldOut ? t('soldOut') : undefined].filter(Boolean).join(' · ') || undefined
+  return { dates, times, when, price, status, ltr }
+}
+
+/** The events still to come (the brick hides an event after its last day), the next first. */
+export function useUpcomingEvents(limit?: () => number | undefined) {
+  const events = useGinko('events')
+  const { when, status } = useEventText()
+  return computed(() => events.value.items.slice(0, limit?.()).map((item) => ({
+    key: item.id,
+    title: item.data.title,
+    to: item.url ?? '',
+    // Date, time, price and "fully booked" in one line of tabular numbers above the title.
+    meta: [when(item.data, 'short'), status(item.data)].filter(Boolean).join(' · '),
+    // Where it takes place, so the list says as much as the home page's card.
+    text: item.data.location ?? undefined,
+    image: item.data.image ?? undefined,
+  })))
+}
+
+/**
+ * The business as the venue of an event without a location and without an online link, only when `events.atTheBusiness`
+ * is true in app/app.config.ts; otherwise (the default) such an event has no place, since content/site.md is the
+ * organiser's address, not necessarily the venue.
+ */
+export function useEventVenue() {
+  const site = useGinko('site')
+  const { name } = useGinkoSite()
+  // Only the sites that set `events` in app.config.ts have the key, so its type differs per template: narrow at run time.
+  const config: unknown = useAppConfig().events
+  const atTheBusiness = typeof config === 'object' && config !== null && 'atTheBusiness' in config && config.atTheBusiness === true
+  return (e: EventFacts) => {
+    if (!atTheBusiness || e.location || safeHref(e.online ?? undefined)) return undefined
+    const own = site.value.data
+    return { name, address: { street: own.street ?? '', postalCode: own.postalCode, city: own.city ?? '' } }
+  }
+}
+
+/**
+ * A builder of schema.org Event: dates with the site's time zone offset, the place (the event's own; else the business
+ * when `events.atTheBusiness` is true and there is no online link; else none), price, booking link or
+ * "sold out"; `description` is the page's Markdown tree, `sessions` the programme (each a `subEvent`). For pages that describe several events; one event page uses useEventJsonLd.
+ */
+export function useEventLd() {
+  const { url, timeZone } = useGinkoSite()
+  const country: string = useRuntimeConfig().public.ginko.country
+  const booking = useEventBooking()
+  const venue = useEventVenue()
+  const absolute = (path: string) => new URL(path, url).href
+  return (e: EventFacts & { url: string }, extra: { description?: MarkdownTree | null, sessions?: SessionJsonLdInput[] } = {}) => {
+    const location = e.location ? { name: e.location } : venue(e)
+    return eventJsonLd({
+      title: e.title,
+      url: absolute(e.url),
+      when: e.when,
+      start: e.start ?? undefined,
+      end: e.end ?? undefined,
+      timeZone,
+      location,
+      online: safeHref(e.online ?? undefined),
+      country: country || undefined,
+      description: extra.description ?? undefined,
+      image: e.image ? absolute(e.image.url) : undefined,
+      price: e.price ?? undefined,
+      booking: booking(e),
+      soldOut: e.soldOut === true,
+      sessions: extra.sessions,
+    })
+  }
+}
+
+/**
+ * schema.org Event for an event page (useEventLd), with the page's Markdown tree as `description` and, when a feature
+ * gives them, its sessions as `subEvent`.
+ */
+export function useEventJsonLd(event: () => EventFacts & { url: string }, description: () => MarkdownTree | null | undefined, sessions?: () => SessionJsonLdInput[] | undefined) {
+  const build = useEventLd()
+  return computed(() => build(event(), { description: description(), sessions: sessions?.() }))
+}

package/templates/nonprofit/app/composables/usePageSeo.ts

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

package/templates/nonprofit/app/composables/useProjects.ts

@@ -0,0 +1,31 @@
+// Synced from templates/_features/projects/app/composables/useProjects.ts by `pnpm templates sync`. Edit the source, not this copy.
+import type { Card } from '~/components/block/Cards.vue'
+
+/** The visible projects as cards (BlockCards): title, summary, photo, and for a campaign its last day. A campaign
+ *  leaves the site after its `ends` day by itself. */
+export function useProjectCards() {
+  const projects = useGinko('projects')
+  const locale = useGinkoLocale()
+  const { t, format } = useI18n('projects')
+  return computed<Card[]>(() => projects.value.items.map((project) => {
+    const { ends } = projectCampaign(project.data)
+    return {
+      key: project.id,
+      title: project.data.title,
+      to: project.urls?.[locale.value] ?? '',
+      text: project.data.summary,
+      meta: ends ? t('until', { date: format.date(ends) }) : undefined,
+      image: project.data.image,
+    }
+  }))
+}
+
+/** A campaign's last day and button. The brick of `projects({ details: true })` has neither field, so they are read
+ *  only where the template's brick has them. */
+export function projectCampaign(data: object) {
+  return {
+    ends: 'ends' in data && typeof data.ends === 'string' ? data.ends : undefined,
+    actionLabel: 'actionLabel' in data && typeof data.actionLabel === 'string' ? data.actionLabel : undefined,
+    actionUrl: 'actionUrl' in data && typeof data.actionUrl === 'string' ? data.actionUrl : undefined,
+  }
+}

package/templates/nonprofit/app/composables/useSiteAppConfig.ts

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

package/templates/nonprofit/app/error.vue

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

package/templates/nonprofit/app/layouts/default.vue

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

package/templates/nonprofit/app/lib/utils.ts

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

package/templates/nonprofit/app/pages/[...slug].vue

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

package/templates/nonprofit/app/pages/downloads.vue

@@ -0,0 +1,20 @@
+<!-- Synced from templates/_features/downloads/app/pages/downloads.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// Documents to download, newest first (content/downloads/, the files in public/). The address per language comes
+// from `pages.downloads` in ginko.config.ts.
+const downloads = useGinko('downloads')
+const { t } = useI18n('downloads')
+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">
+      <div class="max-w-4xl">
+        <DownloadsList v-if="downloads.items.length" :items="downloads.items" />
+        <BlockEmpty v-else :title="t('empty')" path="content/downloads/" />
+      </div>
+    </div>
+  </div>
+</template>