create-ginko 0.4.0 → 0.5.0

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

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

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// Shown by the pages feature at the top of a page of content/pages/ (below its title): on "How we work" the way to
+// start a project (the email with its subject, the phone and the address of content/site.md), so a visitor who has
+// read how a project runs can begin right there. Other pages get nothing.
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <div v-if="id === 'pages/how-we-work'" class="mx-auto max-w-page px-gutter pb-10">
+    <StartProject />
+  </div>
+</template>

package/templates/portfolio/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/portfolio/app/components/people/TeamContact.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// Shown by the people feature on the studio page, between its header and the people: the way to start a project (the
+// email with its subject, then email, phone and address of content/site.md), as on "How we work", so a visitor who
+// wants to meet the studio can begin right there.
+</script>
+
+<template>
+  <StartProject />
+</template>

package/templates/portfolio/app/components/projects/Body.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ArrowRight } from '@lucide/vue'
+
+/**
+ * A project's page below its title (the projects feature shows it instead of its photo and text): all photos large
+ * and one below the other with their descriptions, each opening the lightbox, then the facts (client, year, place,
+ * scope) right above the text, the next project in the studio's order (after the last, the first), and the way to
+ * start a project with the email, phone and address of content/site.md. The CreativeWork JSON-LD comes from
+ * app/composables/useProjectJsonLd.ts.
+ */
+const props = defineProps<{ project: GinkoItem<'projects'> }>()
+const projects = useGinko('projects')
+const start = useStartProject()
+const { t } = useI18n()
+const data = computed(() => props.project.data)
+const facts = computed(() => [
+  { key: 'client', label: t('project.client'), value: data.value.client },
+  { key: 'year', label: t('project.year'), value: data.value.year === undefined ? undefined : String(data.value.year) },
+  { key: 'place', label: t('project.place'), value: data.value.place },
+  { key: 'scope', label: t('project.scope'), value: data.value.scope },
+].filter((fact): fact is { key: string, label: string, value: string } => !!fact.value))
+// On phones two columns: client and year share a row when both are there; every other fact takes the whole row, so
+// no fact sits next to an empty half.
+const half = (key: string) => (key === 'client' || key === 'year') && facts.value.filter((fact) => fact.key === 'client' || fact.key === 'year').length === 2
+const photos = computed(() => projectPhotos(props.project))
+const next = computed(() => {
+  const items = projects.value.items
+  const i = items.findIndex((item) => item.id === props.project.id)
+  return items.length > 1 && i >= 0 ? items[(i + 1) % items.length] : undefined
+})
+</script>
+
+<template>
+  <div>
+    <div class="mx-auto flex max-w-page flex-col gap-10 px-gutter md:gap-12">
+      <section v-if="photos.length" :aria-label="t('project.photos')">
+        <BlockGallery :images="photos" stack />
+      </section>
+      <section v-if="facts.length" :aria-label="t('project.facts')">
+        <dl class="grid grid-cols-2 gap-x-6 gap-y-5 border-y py-6 md:grid-cols-4">
+          <div v-for="fact in facts" :key="fact.key" class="flex min-w-0 flex-col gap-1" :class="!half(fact.key) && 'max-md:col-span-2'">
+            <dt class="text-small text-muted-foreground">{{ fact.label }}</dt>
+            <dd class="hyphens-auto" :class="fact.key === 'year' && 'tabular-nums'">{{ fact.value }}</dd>
+          </div>
+        </dl>
+      </section>
+    </div>
+    <ProseBody :value="data.body" class="pt-10 md:pt-12" />
+    <nav v-if="next" :aria-label="t('project.next')" class="mx-auto max-w-page px-gutter pt-section print:hidden">
+      <NuxtLink :to="next.url" class="group flex items-center justify-between gap-6 border-t pt-8">
+        <span class="flex min-w-0 flex-col gap-2">
+          <span class="text-small text-muted-foreground">{{ t('project.next') }}</span>
+          <span class="font-display text-h2 hyphens-auto underline-offset-4 group-hover:underline">{{ next.data.title }}</span>
+        </span>
+        <ArrowRight class="size-6 shrink-0 text-muted-foreground rtl:-scale-x-100" aria-hidden="true" />
+      </NuxtLink>
+    </nav>
+    <BlockCta v-if="start" :title="t('project.cta.title')" :text="t('project.cta.text')" :action="{ label: t('start.action'), to: start }">
+      <SiteContact :address="false" />
+    </BlockCta>
+  </div>
+</template>

package/templates/portfolio/app/components/projects/List.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+/**
+ * The work as large photos (3:2), each with its title and the client and year below; the whole item is one link. Two
+ * per row from `md`. `feature`: with an odd count the first project spans the row from `md` (16:9), as the home page's
+ * opening; with an even count all stay half width, so no project is left alone in a half row. The projects feature
+ * shows this list on the projects page instead of its cards. A project without a photo keeps its title and facts,
+ * without a gap.
+ */
+const props = withDefaults(defineProps<{ items: GinkoItem<'projects'>[], feature?: boolean, headingLevel?: 'h2' | 'h3' }>(), { headingLevel: 'h2' })
+const meta = (project: GinkoItem<'projects'>) => [project.data.client, project.data.year].filter(Boolean).join(' · ')
+const wide = (i: number) => props.feature && i === 0 && props.items.length % 2 === 1
+</script>
+
+<template>
+  <ul class="grid gap-x-6 gap-y-12 md:grid-cols-2 md:gap-y-16">
+    <li
+      v-for="(project, i) in items"
+      :key="project.id"
+      class="group relative flex flex-col gap-4 rounded-block has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-3 has-[a:focus-visible]:outline-ring"
+      :class="wide(i) && 'md:col-span-2'"
+    >
+      <GinkoImage
+        v-if="project.data.image"
+        :image="project.data.image"
+        :eager="i === 0"
+        :sizes="wide(i) ? '(min-width: 1216px) 1152px, calc(100vw - 2rem)' : '(min-width: 1216px) 564px, (min-width: 768px) 50vw, calc(100vw - 2rem)'"
+        class="aspect-3/2 w-full rounded-block bg-muted object-cover"
+        :class="wide(i) && 'md:aspect-video'"
+      />
+      <div class="flex flex-col gap-1">
+        <component :is="headingLevel" class="text-h3">
+          <NuxtLink :to="project.url" class="outline-none underline-offset-4 after:absolute after:inset-0 group-hover:underline">{{ project.data.title }}</NuxtLink>
+        </component>
+        <p v-if="meta(project)" class="text-small text-muted-foreground tabular-nums">{{ meta(project) }}</p>
+      </div>
+    </li>
+  </ul>
+</template>

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