create-ginko 0.4.0 → 0.5.0

package/templates/saas/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/saas/app/components/block/Faq.vue

@@ -0,0 +1,19 @@
+<!-- Synced from templates/_features/faq/app/components/block/Faq.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/**
+ * Questions and answers as an accordion (one open at a time). Inside BlockSection, whose h2 is the label, the questions
+ * are h3 (the default); on a page of their own, pass `heading-level="h2"`. Pass `faqJsonLd(items)` from
+ * @lupinum/ginko/basics to the page's usePageSeo({ jsonLd }) for the FAQPage. Closed answers stay in the page (hidden
+ * until found), so the browser's search finds them and a printed page shows them all.
+ */
+withDefaults(defineProps<{ items: { id: string, question: string, answer: string }[], headingLevel?: 'h2' | 'h3' }>(), { headingLevel: 'h3' })
+</script>
+
+<template>
+  <Accordion type="single" collapsible :unmount-on-hide="false" class="border-t">
+    <AccordionItem v-for="item in items" :key="item.id" :value="item.id">
+      <AccordionTrigger :heading-level="headingLevel">{{ item.question }}</AccordionTrigger>
+      <AccordionContent class="whitespace-pre-line">{{ item.answer }}</AccordionContent>
+    </AccordionItem>
+  </Accordion>
+</template>

package/templates/saas/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/saas/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/saas/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/saas/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/saas/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/saas/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/saas/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/saas/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/saas/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/saas/app/components/changelog/Latest.vue

@@ -0,0 +1,32 @@
+<!-- Synced from templates/_features/changelog/app/components/changelog/Latest.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { ArrowRight } from '@lucide/vue'
+import type { ReleaseSummary } from '~/composables/useChangelog'
+
+/** The newest releases as rows divided by lines: date, version (a link to its section of the changelog) and its
+ *  summary; then a link to the whole changelog. Use inside BlockSection, whose h2 is the label. */
+withDefaults(defineProps<{ items: ReleaseSummary[], headingLevel?: 'h2' | 'h3' }>(), { headingLevel: 'h3' })
+const { t, format } = useI18n('changelog')
+const path = useGinkoPath()
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <ul class="flex flex-col border-b">
+      <li v-for="release in items" :key="release.id" class="group relative flex flex-col gap-1 border-t py-6 sm:flex-row sm:gap-8">
+        <p class="shrink-0 text-small text-muted-foreground tabular-nums sm:w-40 sm:pt-0.5">
+          <time :datetime="release.date">{{ format.date(release.date) }}</time>
+        </p>
+        <div class="flex min-w-0 flex-col gap-1">
+          <component :is="headingLevel" class="text-body font-semibold tabular-nums">
+            <NuxtLink :to="release.to" class="underline-offset-4 after:absolute after:inset-0 group-hover:underline">{{ t('version', { version: release.version }) }}</NuxtLink>
+          </component>
+          <p v-if="release.summary" class="text-muted-foreground">{{ release.summary }}</p>
+        </div>
+      </li>
+    </ul>
+    <NuxtLink :to="path('changelog')" 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>
+</template>

package/templates/saas/app/components/help/Contact.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// Where to turn when the help pages do not answer the question: the support email and phone of content/site.md.
+// On the help start page and under every help page (DocsPageEnd).
+const { t } = useI18n()
+const titleId = useId()
+</script>
+
+<template>
+  <aside :aria-labelledby="titleId" class="flex flex-col gap-3 rounded-block border p-6">
+    <h2 :id="titleId" class="text-h3 font-semibold">{{ t('help.stuck') }}</h2>
+    <p class="max-w-2xl text-muted-foreground">{{ t('help.stuckText') }}</p>
+    <SiteContact :address="false" />
+  </aside>
+</template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// Shown by the pages feature at the top of a page of content/pages/ (below its title): the contact details of
+// content/site.md on the Contact page, so the address is written once; on the About page the people of
+// content/people/ (initials, never a stock face; name, role and one sentence), so a visitor sees who builds the
+// product and answers support. Other pages get nothing.
+defineProps<{ id: string }>()
+const people = useGinko('people')
+const { t } = useI18n()
+</script>
+
+<template>
+  <div v-if="id === 'pages/contact'" class="mx-auto max-w-page px-gutter pb-10">
+    <SiteContact />
+  </div>
+  <div v-else-if="id === 'pages/about' && people.items.length" class="mx-auto max-w-page px-gutter pb-10">
+    <section aria-labelledby="about-team" class="flex flex-col gap-6 border-y py-8 break-inside-avoid">
+      <h2 id="about-team" class="text-h3">{{ t('about.team') }}</h2>
+      <ul class="grid gap-x-10 gap-y-8 sm:grid-cols-2 lg:grid-cols-3">
+        <li v-for="person in people.items" :key="person.id" class="flex gap-4">
+          <InitialsAvatar :name="person.data.name" />
+          <div class="flex flex-col gap-1">
+            <h3 class="font-semibold">{{ person.data.name }}</h3>
+            <p v-if="person.data.role" class="text-small text-muted-foreground">{{ person.data.role }}</p>
+            <p v-if="person.data.bio" class="text-small">{{ person.data.bio }}</p>
+          </div>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>

package/templates/saas/app/components/pricing/More.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ArrowRight } from '@lucide/vue'
+
+// Shown by the pricing feature below the plans: the first three questions of content/faq/ (billing, cancellation and
+// data export come first there) and a link to all questions. The FAQ page carries the FAQPage data for search engines.
+const questions = useGinko('faq')
+const path = useGinkoPath()
+const { t } = useI18n()
+const items = computed(() => questions.value.items.slice(0, 3).map((item) => ({ id: item.id, question: item.data.question, answer: item.data.answer })))
+</script>
+
+<template>
+  <BlockSection v-if="items.length" :title="t('pricing.questions')">
+    <div class="flex flex-col gap-6">
+      <BlockFaq :items="items" />
+      <NuxtLink :to="path('faq')" class="inline-flex min-h-11 items-center gap-2 self-start font-medium text-primary underline-offset-4 hover:underline">
+        {{ t('pricing.allQuestions') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+      </NuxtLink>
+    </div>
+  </BlockSection>
+</template>

package/templates/saas/app/components/pricing/Plans.vue

@@ -0,0 +1,60 @@
+<!-- Synced from templates/_features/pricing/app/components/pricing/Plans.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { Check } from '@lucide/vue'
+import type { Plan } from '~/composables/usePricing'
+
+/**
+ * The plans side by side from `md` (two to three per row, four from `lg`), stacked on phones. Each plan: its name,
+ * with the word "Recommended" next to it on the recommended one (its border takes the accent too, never the colour
+ * alone), for whom, the price per month and, below it, the price per year (or "Free" for a plan at 0, or "On request"), the action, and what is
+ * included. Side by side, these four parts share rows (CSS subgrid), so prices and buttons line up across the plans.
+ * The recommended plan's button is the page's main action; the others are outlined. A plan without an action keeps
+ * its empty row, so the rows still line up. Prices in tabular numbers; both intervals are written out, so the table
+ * needs no switch and no script.
+ */
+const props = withDefaults(defineProps<{ plans: Plan[], headingLevel?: 'h2' | 'h3' }>(), { headingLevel: 'h2' })
+const { t } = useI18n('pricing')
+const columns = computed(() => (props.plans.length >= 4 ? 'md:grid-cols-2 lg:grid-cols-4' : props.plans.length === 3 ? 'md:grid-cols-3' : props.plans.length === 2 ? 'md:grid-cols-2' : ''))
+</script>
+
+<template>
+  <ul class="grid gap-6" :class="columns">
+    <li
+      v-for="plan in plans"
+      :key="plan.id"
+      :data-plan="plan.id"
+      class="flex flex-col gap-6 rounded-block border p-6 md:row-span-4 md:grid md:grid-rows-subgrid lg:p-8"
+      :class="plan.recommended && 'border-primary'"
+    >
+      <div class="flex flex-col gap-2">
+        <div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
+          <component :is="headingLevel" class="text-h3 font-semibold">{{ plan.name }}</component>
+          <p v-if="plan.recommended" class="text-small font-semibold text-primary" data-recommended>{{ t('recommended') }}</p>
+        </div>
+        <p class="text-muted-foreground">{{ plan.summary }}</p>
+      </div>
+      <p v-if="plan.free" class="text-h2 font-semibold" data-free>{{ t('free') }}</p>
+      <div v-else-if="plan.prices" class="flex flex-col gap-1" data-prices>
+        <p class="flex flex-wrap items-baseline gap-x-2">
+          <span class="text-h2 font-semibold tabular-nums" data-monthly>{{ plan.prices.monthly }}</span>
+          <span class="text-muted-foreground">{{ t('perMonth') }}</span>
+        </p>
+        <p class="text-small text-muted-foreground tabular-nums" data-yearly>{{ t('orYearly', { price: plan.prices.yearly }) }}</p>
+      </div>
+      <p v-else class="text-h3 font-semibold" data-on-request>{{ t('onRequest') }}</p>
+      <Button v-if="plan.action.href" as-child size="lg" :variant="plan.recommended ? 'default' : 'outline'" class="h-auto min-h-12 w-full py-3 text-center whitespace-normal">
+        <NuxtLink :to="plan.action.href" no-rel>{{ plan.action.label }}</NuxtLink>
+      </Button>
+      <div v-else class="hidden md:block" />
+      <div v-if="plan.included.length" class="flex flex-col gap-3 border-t pt-6">
+        <p class="text-small font-medium">{{ t('included') }}</p>
+        <ul class="flex flex-col gap-3">
+          <li v-for="(item, i) in plan.included" :key="i" class="flex gap-3">
+            <Check class="mt-1 size-4 shrink-0 text-primary" aria-hidden="true" />
+            <span>{{ item }}</span>
+          </li>
+        </ul>
+      </div>
+    </li>
+  </ul>
+</template>

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