create-ginko 0.4.0 → 0.6.0

package/templates/nonprofit/app/assets/css/tokens.css

@@ -0,0 +1,400 @@
+/* Synced from templates/_features/ui/app/assets/css/tokens.css by `pnpm templates sync`. Edit the source, not this copy. */
+/* The design tokens every template shares (DESIGN.md). Neutral system values only: the template's accent and fonts
+   live in its own app/assets/css/main.css, which imports this file after Tailwind.
+   Tailwind's default palette, type scale, radii and shadows are removed, so only these utilities exist. A new value
+   is a new token here (or in main.css) and a row in DESIGN.md, in the same change. */
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-*: initial;
+  --font-*: initial;
+
+  /* Type scale. Headings use h1–h3; body text is 17px. */
+  --text-*: initial;
+  --text-h1: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
+  --text-h1--line-height: 1.05;
+  --text-h1--letter-spacing: -0.025em;
+  --text-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
+  --text-h2--line-height: 1.1;
+  --text-h2--letter-spacing: -0.02em;
+  --text-h3: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
+  --text-h3--line-height: 1.3;
+  --text-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
+  --text-lead--line-height: 1.5;
+  --text-body: 1.0625rem;
+  --text-body--line-height: 1.6;
+  --text-small: 0.9375rem;
+  --text-small--line-height: 1.5;
+  --text-xs: 0.8125rem;
+  --text-xs--line-height: 1.4;
+
+  --radius-*: initial;
+  --radius-full: 9999px;
+  /* Images, cards and the CTA band. Buttons and fields use --radius (rounded-md). */
+  --radius-block: 1rem;
+
+  --shadow-*: initial;
+  --inset-shadow-*: initial;
+  --drop-shadow-*: initial;
+  --text-shadow-*: initial;
+  /* The one elevation: panels above the page (nav sheet, dialog, lightbox, menus). */
+  --shadow-overlay: 0 12px 32px -8px rgb(9 9 11 / 0.28);
+
+  --spacing-section: clamp(3.5rem, 2.25rem + 5.5vw, 7rem);
+  --spacing-gutter: clamp(1rem, 0.5rem + 2.4vw, 2rem);
+  --container-page: 76rem;
+  /* About 65 characters of body text in Inter. In rem, not ch: ch follows the font, so text re-wrapped (a layout
+     shift) when Inter replaced its fallback. */
+  --container-prose: 43.5rem;
+
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Neutral colours (zinc). Contrast on --background: foreground 17.7:1 / 17.0:1, muted-foreground 7.7:1 / 7.9:1.
+   --brand and --brand-foreground (the accent and the text on it) come from main.css, light and dark. */
+:root {
+  color-scheme: light;
+  --primary: var(--brand);
+  --primary-foreground: var(--brand-foreground);
+  --background: #ffffff;
+  --foreground: #18181b;
+  --card: var(--background);
+  --card-foreground: var(--foreground);
+  --popover: var(--background);
+  --popover-foreground: var(--foreground);
+  --secondary: #f4f4f5;
+  --secondary-foreground: var(--foreground);
+  --muted: #f4f4f5;
+  --muted-foreground: #52525b;
+  --accent: #f4f4f5;
+  --accent-foreground: var(--foreground);
+  --border: #e4e4e7;
+  /* Borders of controls: 3:1 or more on the background (WCAG non-text contrast). */
+  --input: #8a8a93;
+  --ring: var(--primary);
+  --success: #15803d;
+  --warning: #a16207;
+  --destructive: #b42318;
+  /* Behind a dialog, the nav sheet or the lightbox. */
+  --scrim: rgb(9 9 11 / 0.6);
+  --radius: 0.625rem;
+}
+
+.dark {
+  color-scheme: dark;
+  --background: #0b0b0c;
+  --foreground: #f4f4f5;
+  --secondary: #18181b;
+  --muted: #18181b;
+  --muted-foreground: #a1a1aa;
+  --accent: #27272a;
+  --border: #27272a;
+  --input: #71717a;
+  --success: #4ade80;
+  --warning: #facc15;
+  --destructive: #f87171;
+  --scrim: rgb(0 0 0 / 0.72);
+}
+
+/* Paper is white and browsers leave out backgrounds when printing: a page printed in dark mode uses the light
+   neutrals, so its text stays dark. */
+@media print {
+  .dark {
+    color-scheme: light;
+    --background: #ffffff;
+    --foreground: #18181b;
+    --secondary: #f4f4f5;
+    --muted: #f4f4f5;
+    --muted-foreground: #52525b;
+    --accent: #f4f4f5;
+    --border: #e4e4e7;
+    --input: #8a8a93;
+    --success: #15803d;
+    --warning: #a16207;
+    --destructive: #b42318;
+  }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-destructive: var(--destructive);
+  --color-scrim: var(--scrim);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: var(--radius);
+  /* main.css sets --font-body and, optionally, --font-heading (headings; utility font-display). */
+  --font-sans: var(--font-body);
+  --font-display: var(--font-heading, var(--font-body));
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+/* A band on the accent colour (BlockCta). Text, secondary text, buttons and the focus ring switch, so every part
+   inside keeps its contrast. main.css may give the band its own colour with `--brand-surface` and
+   `--brand-surface-foreground` (for example a deep shade in `.dark`, where a full band of the light accent would be
+   the loudest thing on the page); without them the band is `--brand`. */
+.surface-primary {
+  --band: var(--brand-surface, var(--brand));
+  --band-foreground: var(--brand-surface-foreground, var(--brand-foreground));
+  --background: var(--band);
+  --foreground: var(--band-foreground);
+  --muted-foreground: var(--band-foreground);
+  --border: color-mix(in oklab, var(--band-foreground) 30%, transparent);
+  --input: var(--band-foreground);
+  --accent: color-mix(in oklab, var(--band-foreground) 12%, transparent);
+  --ring: var(--band-foreground);
+  --primary: var(--band-foreground);
+  --primary-foreground: var(--band);
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: var(--border);
+  }
+
+  html {
+    font-family: var(--font-body);
+    background-color: var(--background);
+    color: var(--foreground);
+    accent-color: var(--primary);
+    scroll-padding-top: 6rem;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-size-adjust: 100%;
+  }
+
+  body {
+    font-size: var(--text-body);
+    line-height: var(--text-body--line-height);
+    /* "anywhere", not "break-word": only "anywhere" lowers min-content width. Flex and grid items have
+       min-width: auto, so with break-word one long word still widens the item and then the page. The cost:
+       a short label next to long text in a flex row that does not wrap needs shrink-0 (or whitespace-nowrap),
+       or it breaks mid-word. */
+    overflow-wrap: anywhere;
+  }
+
+  /* Dates and row labels stay whole words. */
+  time,
+  th {
+    overflow-wrap: normal;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-heading, var(--font-body));
+    font-weight: 600;
+    text-wrap: balance;
+    hyphens: auto;
+    /* Only words of 10+ letters break, with at least 5 on each side: no "mu-nicipal". */
+    hyphenate-limit-chars: 10 5 5;
+  }
+
+  p,
+  li {
+    text-wrap: pretty;
+  }
+
+  time,
+  .tabular-nums {
+    font-variant-numeric: tabular-nums;
+  }
+
+  ::selection {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  /* One focus style for every interactive element: 2px ring in --ring, 3px away. */
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 3px;
+  }
+
+  a {
+    text-underline-offset: 0.2em;
+    text-decoration-thickness: 1px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+@layer components {
+  /* Rendered Markdown (ProseBody). Bodies start at h2. Only direct children are styled, so ginko-components keep
+     their own look. */
+  .prose {
+    max-width: var(--container-prose);
+  }
+
+  .prose :not(pre) > code {
+    border-radius: calc(var(--radius) - 4px);
+    background-color: var(--muted);
+    padding: 0.1em 0.3em;
+    font-size: 0.9em;
+  }
+
+  .prose > * + * {
+    margin-top: 1.1em;
+  }
+
+  .prose > h2 {
+    margin-top: 2.2em;
+    font-size: var(--text-h3);
+    line-height: var(--text-h3--line-height);
+  }
+
+  .prose > h3 {
+    margin-top: 1.8em;
+    font-size: var(--text-body);
+    line-height: var(--text-body--line-height);
+  }
+
+  .prose > :is(h2, h3) + * {
+    margin-top: 0.6em;
+  }
+
+  .prose > :first-child {
+    margin-top: 0;
+  }
+
+  .prose > :is(p, ul, ol, blockquote) a {
+    color: var(--primary);
+    text-decoration-line: underline;
+  }
+
+  .prose > :is(p, ul, ol, blockquote) a:hover {
+    text-decoration-thickness: 2px;
+  }
+
+  .prose > :is(ul, ol) {
+    padding-inline-start: 1.25em;
+  }
+
+  .prose > ul {
+    list-style-type: disc;
+  }
+
+  .prose > ol {
+    list-style-type: decimal;
+  }
+
+  .prose > :is(ul, ol) > li + li {
+    margin-top: 0.4em;
+  }
+
+  .prose > :is(ul, ol) > li::marker {
+    color: var(--muted-foreground);
+  }
+
+  .prose strong {
+    font-weight: 600;
+  }
+
+  .prose > blockquote {
+    border-inline-start: 2px solid var(--border);
+    padding-inline-start: 1.25em;
+    color: var(--muted-foreground);
+  }
+
+  .prose > hr {
+    margin-block: 2.5em;
+  }
+
+  .prose > :is(figure, section, div) {
+    margin-block: 2.5em;
+  }
+
+  .prose img {
+    border-radius: var(--radius-block);
+  }
+
+  /* A photo in a text with its caption: the image, and on the next line of the same paragraph `*The caption*`. The
+     photo takes the text's width (its width and height attributes keep the space while it loads); the caption sits
+     small and muted under it. */
+  .prose > p:has(> img) > img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  .prose > p:has(> img) > em:last-child {
+    display: block;
+    margin-top: 0.75em;
+    font-size: var(--text-small);
+    line-height: var(--text-small--line-height);
+    font-style: normal;
+    color: var(--muted-foreground);
+  }
+
+  /* Code blocks: a line around them, and long lines wrap instead of widening the page (a block that scrolled sideways
+     would need to take keyboard focus, which Markdown cannot give it). A highlighted block (Shiki, in files) colours
+     its words for light and dark (github-light, catppuccin-mocha: 4.5:1 or more on the page); its own background is
+     left out, so the block sits on the page like the text around it. */
+  .prose > pre {
+    white-space: pre-wrap;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem 1.25rem;
+    font-size: var(--text-small);
+    line-height: var(--text-small--line-height);
+  }
+
+  .prose > pre.shiki {
+    background-color: transparent !important;
+  }
+
+  .dark .prose .shiki,
+  .dark .prose .shiki span {
+    color: var(--shiki-dark, var(--foreground)) !important;
+  }
+}
+
+/* Print: the page's content with its address. Navigation, language and theme controls, the notices, the skip link and
+   the closing band carry `print:hidden` in their components; the header stays at the top of the first page only, and
+   the footer keeps the name and contact. A
+   link to another site prints its address after the text, and list items and figures do not break across pages. */
+@media print {
+  .prose a[href^="http"]::after {
+    content: " (" attr(href) ")";
+    color: var(--muted-foreground);
+  }
+
+  .prose :is(li, figure, blockquote, pre) {
+    break-inside: avoid;
+  }
+
+  .prose :is(h2, h3) {
+    break-after: avoid;
+  }
+}

package/templates/nonprofit/app/bricks/logos-quotes.ts

@@ -0,0 +1,47 @@
+// Synced from templates/_features/logos-quotes/app/bricks/logos-quotes.ts by `pnpm templates sync`. Edit the source, not this copy.
+import { collection, f, type BrickSource } from '@lupinum/ginko'
+
+// Partner logos and short quotes for strips on the home page. Logos: one file each in content/logos/ with the image in
+// public/logos/ (an SVG or a PNG on a transparent background); the number sets the order.
+export function logos(o: { source?: BrickSource } = {}) {
+  return collection({
+    label: { de: 'Logos', en: 'Logos', fr: 'Logos' },
+    ...(o.source ? { source: o.source } : {}),
+    max: 24,
+    order: 'manual',
+    fields: {
+      // A name is the same in every language; the image's description (`alt`) is translated.
+      name: f.text({ de: 'Name', en: 'Name', fr: 'Nom' }, { max: 80, translate: false }),
+      image: f.image({ de: 'Logo', en: 'Logo', fr: 'Logo' }),
+      url: f.text({ de: 'Website', en: 'Website', fr: 'Site web' }, { format: 'url', optional: true }),
+    },
+    tasks: [
+      { id: 'add', kind: 'create', label: { de: 'Logo hinzufügen', en: 'Add a logo', fr: 'Ajouter un logo' } },
+      { id: 'remove', kind: 'remove', label: { de: 'Logo entfernen', en: 'Remove a logo', fr: 'Retirer un logo' } },
+    ],
+  })
+}
+
+// Quotes: what members, partners or customers say, with their permission. No photo: a quote stands by its words.
+// One file each in content/quotes/; the number sets the order, and the home page shows the first one.
+export function quotes(o: { source?: BrickSource } = {}) {
+  return collection({
+    label: { de: 'Zitate', en: 'Quotes', fr: 'Citations' },
+    ...(o.source ? { source: o.source } : {}),
+    max: 24,
+    order: 'manual',
+    fields: {
+      text: f.longtext({ de: 'Zitat', en: 'Quote', fr: 'Citation' }, { max: 300 }),
+      name: f.text({ de: 'Name', en: 'Name', fr: 'Nom' }, { max: 80, optional: true, translate: false }),
+      role: f.text({ de: 'Rolle', en: 'Role', fr: 'Fonction' }, {
+        max: 120,
+        optional: true,
+        hint: { de: 'Zum Beispiel „Kundin seit 2021“.', en: 'For example “Customer since 2021”.', fr: 'Par exemple « Cliente depuis 2021 ».' },
+      }),
+    },
+    tasks: [
+      { id: 'add', kind: 'create', label: { de: 'Zitat hinzufügen', en: 'Add a quote', fr: 'Ajouter une citation' } },
+      { id: 'edit', kind: 'edit', pick: true, fields: ['text', 'name', 'role'], label: { de: 'Zitat bearbeiten', en: 'Edit a quote', fr: 'Modifier une citation' } },
+    ],
+  })
+}

package/templates/nonprofit/app/bricks/pages.ts

@@ -0,0 +1,38 @@
+// Synced from templates/_features/pages/app/bricks/pages.ts by `pnpm templates sync`. Edit the source, not this copy.
+import { collection, f, type BrickSource, type RouteTemplate } from '@lupinum/ginko'
+
+// Free pages such as About and Contact: one Markdown file each in content/pages/ (`1.about.md`, translations
+// `1.about.de.md`). The number sets the order; the summary is the page's lead and its search description. A page may
+// have one button below its title (`actionLabel` and `actionUrl`, both needed), for example "Donate online" leading
+// to a donation service: the page's one primary action.
+// With @lupinum/ginko-components installed (`components` in ginko.config.ts), the body may use its components.
+export function pages<const R extends Record<string, RouteTemplate>>(o: { route: R, source?: BrickSource }) {
+  return collection({
+    label: { de: 'Seiten', en: 'Pages', fr: 'Pages' },
+    ...(o.source ? { source: o.source } : {}),
+    max: 50,
+    order: 'manual',
+    route: o.route,
+    fields: {
+      title: f.text({ de: 'Titel', en: 'Title', fr: 'Titre' }, { max: 80 }),
+      slug: f.slug({ de: 'Adresse', en: 'Address', fr: 'Adresse' }, { from: 'title' }),
+      summary: f.longtext({ de: 'Kurzbeschreibung', en: 'Summary', fr: 'Résumé' }, {
+        max: 300,
+        optional: true,
+        hint: { de: 'Steht unter dem Titel und in Suchergebnissen.', en: 'Shown below the title and in search results.', fr: 'Affiché sous le titre et dans les résultats de recherche.' },
+      }),
+      image: f.image({ de: 'Bild', en: 'Image', fr: 'Image' }, { optional: true }),
+      actionLabel: f.text({ de: 'Button-Text', en: 'Button text', fr: 'Texte du bouton' }, {
+        max: 40,
+        optional: true,
+        hint: { de: 'Ein Button unter dem Titel, zum Beispiel „Online spenden“. Braucht auch die Adresse.', en: 'One button below the title, for example “Donate online”. Needs the address too.', fr: 'Un bouton sous le titre, par exemple « Faire un don en ligne ». Il faut aussi l’adresse.' },
+      }),
+      actionUrl: f.text({ de: 'Button-Adresse', en: 'Button address', fr: 'Adresse du bouton' }, { format: 'url', optional: true, translate: false }),
+      body: f.markdown({ de: 'Text', en: 'Text', fr: 'Texte' }, { profile: 'page' }),
+    },
+    tasks: [
+      { id: 'edit', kind: 'edit', pick: true, fields: ['title', 'summary', 'image', 'actionLabel', 'actionUrl', 'body'], label: { de: 'Seite bearbeiten', en: 'Edit a page', fr: 'Modifier une page' } },
+      { id: 'add', kind: 'create', label: { de: 'Seite hinzufügen', en: 'Add a page', fr: 'Ajouter une page' } },
+    ],
+  })
+}

package/templates/nonprofit/app/bricks/projects.ts

@@ -0,0 +1,114 @@
+// Synced from templates/_features/projects/app/bricks/projects.ts by `pnpm templates sync`. Edit the source, not this copy.
+import { collection, f, type BrickSource, type RouteTemplate } from '@lupinum/ginko'
+
+// Projects: what an organisation works on, one Markdown file each in content/projects/ (`1.my-project.md`,
+// translations `1.my-project.de.md`). The number sets the order. A campaign has an end date (`ends`): it leaves the
+// site after that day by itself, and the Studio's Today page lists campaigns that end within 7 days. A project may
+// have one button below its title (`actionLabel` and `actionUrl`, both needed), for example "Donate now".
+// `details: true` is for work that stays online: no end date and no button, but the facts of a commission (client,
+// year, place, scope) and the project's photos, each with its description (the build and the Studio refuse a photo
+// without one). A new project can wait as a draft (`draft: true` in its file), and Today lists the drafts. Without
+// `details` the stored shape stays as it is.
+type Options<R> = { route: R, source?: BrickSource }
+export function projects<const R extends Record<string, RouteTemplate>>(o: Options<R> & { details?: false }): ReturnType<typeof plain<R>>
+export function projects<const R extends Record<string, RouteTemplate>>(o: Options<R> & { details: true }): ReturnType<typeof detailed<R>>
+export function projects<const R extends Record<string, RouteTemplate>>(o: Options<R> & { details?: boolean }) {
+  return o.details ? detailed(o) : plain(o)
+}
+
+/** What both kinds share. */
+const common = <R>(o: Options<R>) => ({
+  label: { de: 'Projekte', en: 'Projects', fr: 'Projets' },
+  ...(o.source ? { source: o.source } : {}),
+  max: 50,
+  order: 'manual',
+  route: o.route,
+} as const)
+
+const editLabel = { de: 'Projekt bearbeiten', en: 'Edit a project', fr: 'Modifier un projet' }
+const add = { id: 'add', kind: 'create', label: { de: 'Projekt hinzufügen', en: 'Add a project', fr: 'Ajouter un projet' } } as const
+
+function plain<const R extends Record<string, RouteTemplate>>(o: Options<R>) {
+  return collection({
+    ...common(o),
+    fields: { ...fields(), ...campaign(), body: body() },
+    visible: { mode: 'until', field: 'ends' },
+    status: { count: true },
+    tasks: [
+      { id: 'edit', kind: 'edit', pick: true, fields: ['title', 'summary', 'image', 'ends', 'actionLabel', 'actionUrl', 'body'], label: editLabel },
+      add,
+    ],
+  })
+}
+
+function detailed<const R extends Record<string, RouteTemplate>>(o: Options<R>) {
+  return collection({
+    ...common(o),
+    fields: { ...fields(), ...details(), body: body() },
+    drafts: true,
+    tasks: [
+      { id: 'edit', kind: 'edit', pick: true, fields: ['title', 'summary', 'client', 'year', 'place', 'scope', 'image', 'photos', 'body'], label: editLabel },
+      { id: 'photos', kind: 'edit', pick: true, fields: ['image', 'photos'], label: { de: 'Fotos hinzufügen', en: 'Add photos', fr: 'Ajouter des photos' } },
+      add,
+    ],
+  })
+}
+
+function fields() {
+  return {
+    title: f.text({ de: 'Titel', en: 'Title', fr: 'Titre' }, { max: 80 }),
+    slug: f.slug({ de: 'Adresse', en: 'Address', fr: 'Adresse' }, { from: 'title' }),
+    summary: f.longtext({ de: 'Kurzbeschreibung', en: 'Summary', fr: 'Résumé' }, {
+      max: 300,
+      hint: { de: 'Steht auf der Karte, unter dem Titel und in Suchergebnissen.', en: 'Shown on the card, below the title and in search results.', fr: 'Affiché sur la carte, sous le titre et dans les résultats de recherche.' },
+    }),
+    image: f.image({ de: 'Bild', en: 'Image', fr: 'Image' }, { optional: true }),
+  }
+}
+
+/** A campaign's last day and its button (without `details`). */
+function campaign() {
+  return {
+    ends: f.date({ de: 'Endet am', en: 'Ends on', fr: 'Se termine le' }, {
+      optional: true,
+      hint: { de: 'Nur für Aktionen: Danach verschwindet das Projekt von der Website.', en: 'Campaigns only: the project leaves the site after this day.', fr: 'Pour les campagnes : le projet quitte le site après ce jour.' },
+    }),
+    actionLabel: f.text({ de: 'Button-Text', en: 'Button text', fr: 'Texte du bouton' }, {
+      max: 40,
+      optional: true,
+      hint: { de: 'Ein Button unter dem Titel, zum Beispiel „Jetzt spenden“. Braucht auch die Adresse.', en: 'One button below the title, for example “Donate now”. Needs the address too.', fr: 'Un bouton sous le titre, par exemple « Faire un don ». Il faut aussi l’adresse.' },
+    }),
+    actionUrl: f.text({ de: 'Button-Adresse', en: 'Button address', fr: 'Adresse du bouton' }, { format: 'url', optional: true, translate: false }),
+  }
+}
+
+const photo = { de: 'Foto', en: 'Photo', fr: 'Photo' }
+
+/** The facts of a commission and its photos (`details: true`). Every one is optional. */
+function details() {
+  return {
+    client: f.text({ de: 'Auftraggeber', en: 'Client', fr: 'Client' }, {
+      max: 80,
+      optional: true,
+      hint: { de: 'Name des Kunden oder zum Beispiel „Privatkundin“.', en: 'The client’s name, or for example “Private client”.', fr: 'Le nom du client, ou par exemple « Client privé ».' },
+    }),
+    year: f.number({ de: 'Jahr', en: 'Year', fr: 'Année' }, { min: 1900, max: 2199, step: 1, optional: true }),
+    place: f.text({ de: 'Ort', en: 'Place', fr: 'Lieu' }, { max: 80, optional: true }),
+    scope: f.text({ de: 'Leistungen', en: 'Scope', fr: 'Prestations' }, {
+      max: 160,
+      optional: true,
+      hint: { de: 'Kurz, zum Beispiel „Planung, Möbel, Licht“.', en: 'Briefly, for example “Planning, furniture, lighting”.', fr: 'En bref, par exemple « Plans, mobilier, éclairage ».' },
+    }),
+    // More photos after `image`, each with its description (required, so no photo goes online without one).
+    photos: f.list({ de: 'Fotos', en: 'Photos', fr: 'Photos' }, {
+      itemLabel: photo,
+      fields: { image: f.image(photo, { hint: { de: 'Beschreibe, was das Foto zeigt: Der Text steht darunter und wird vorgelesen.', en: 'Describe what the photo shows: the text is shown below it and read out.', fr: 'Décrivez ce que montre la photo : le texte s’affiche dessous et est lu à voix haute.' } }) },
+      max: 24,
+      optional: true,
+    }),
+  }
+}
+
+function body() {
+  return f.markdown({ de: 'Text', en: 'Text', fr: 'Texte' }, { profile: 'page' })
+}

package/templates/nonprofit/app/components/InitialsAvatar.vue

@@ -0,0 +1,18 @@
+<!-- Synced from templates/_features/site/app/components/InitialsAvatar.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/** A person without a photo: their initials on --muted. Never a stock face for a named person. */
+const props = withDefaults(defineProps<{ name: string, size?: 'md' | 'lg' }>(), { size: 'md' })
+// First and last name: "Anna Maria Huber" → "AH".
+const initials = computed(() => {
+  const parts = props.name.split(/\s+/).filter(Boolean)
+  return [parts[0], parts.length > 1 ? parts.at(-1) : undefined].map((part) => (part ? [...part][0] : '')).join('').toLocaleUpperCase()
+})
+</script>
+
+<template>
+  <span
+    class="inline-flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-foreground"
+    :class="size === 'lg' ? 'size-20 text-h3' : 'size-12 text-body'"
+    aria-hidden="true"
+  >{{ initials }}</span>
+</template>

package/templates/nonprofit/app/components/ProseBody.vue

@@ -0,0 +1,13 @@
+<!-- Synced from templates/_features/site/app/components/ProseBody.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { MarkdownValue } from '@lupinum/ginko'
+
+/** A Markdown body (headings start at h2); with @lupinum/ginko-components installed, also its components. */
+defineProps<{ value: MarkdownValue | undefined }>()
+</script>
+
+<template>
+  <div class="mx-auto max-w-page px-gutter">
+    <GinkoMarkdown :value="value" class="prose" />
+  </div>
+</template>