create-ginko 0.4.0 → 0.6.0

package/templates/portfolio/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/portfolio/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/portfolio/app/composables/useProjectJsonLd.ts

@@ -0,0 +1,26 @@
+/** A project's photos in their order: the main photo (`image`), then the others (`photos`). */
+export function projectPhotos(project: GinkoItem<'projects'>) {
+  return [...(project.data.image ? [project.data.image] : []), ...(project.data.photos ?? []).map((row) => row.image)]
+}
+
+/**
+ * The CreativeWork JSON-LD of a project: its facts, all its photos and the studio as creator. The projects feature's
+ * project page finds this composable and puts the result into the page's one `usePageSeo` call.
+ */
+export function useProjectJsonLd() {
+  const { name, url } = useGinkoSite()
+  const { language } = useI18n()
+  const absolute = (path: string) => new URL(path, url).href
+  return (project: GinkoItem<'projects'>): Record<string, unknown> => ({
+    '@context': 'https://schema.org',
+    '@type': 'CreativeWork',
+    name: project.data.title,
+    description: project.data.summary,
+    url: project.url ? absolute(project.url) : undefined,
+    image: projectPhotos(project).map((photo) => absolute(photo.url)),
+    dateCreated: project.data.year === undefined ? undefined : String(project.data.year),
+    locationCreated: project.data.place ? { '@type': 'Place', name: project.data.place } : undefined,
+    creator: { '@type': 'Organization', name, url },
+    inLanguage: language.value,
+  })
+}

package/templates/portfolio/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/portfolio/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/portfolio/app/composables/useStartProject.ts

@@ -0,0 +1,12 @@
+/**
+ * "Start a project": an email to the studio (the address of content/site.md) with the subject already filled in, so
+ * every enquiry arrives the same way. The site has no form (T13). Undefined when content/site.md has no email.
+ */
+export function useStartProject() {
+  const site = useGinko('site')
+  const { t } = useI18n()
+  return computed(() => {
+    const email = site.value.data.email
+    return email ? `mailto:${email}?subject=${encodeURIComponent(t('start.subject'))}` : undefined
+  })
+}

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ArrowRight } from '@lucide/vue'
+
+// The home page answers "what do you make, and is it good?" with the work itself: one sentence and a lead
+// (content/home.md) with the one main action, "Start a project" (an email with its subject) and the address written
+// out below it, for a visitor whose browser opens no mail app; then the first three projects of content/projects/ as
+// large photos, the latest journal entries, and a closing band with the same action and the email, phone and address
+// of content/site.md (SiteContact). A section whose list is empty is left out.
+const home = useGinko('home')
+const projects = useGinko('projects')
+const site = useGinko('site')
+const posts = useBlogPosts()
+const start = useStartProject()
+const path = useGinkoPath()
+const { t } = useI18n()
+const selected = computed(() => projects.value.items.slice(0, 3))
+const latest = computed(() => posts.value.slice(0, 2))
+const email = computed(() => site.value.data.email)
+// The tab and search result say what the studio does and where; the share card keeps the sentence of the first screen
+// and the photo of the first project. Search engines learn that the studio is a ProfessionalService.
+usePageSeo(() => ({
+  home: true,
+  title: t('home.title'),
+  description: home.value.data.lead,
+  image: selected.value[0]?.data.image,
+  organization: { '@type': 'ProfessionalService' },
+}))
+</script>
+
+<template>
+  <div>
+    <BlockHero
+      :title="home.data.title"
+      :lead="home.data.lead"
+      :primary="start ? { label: t('start.action'), to: start } : undefined"
+    >
+      <p v-if="email" class="text-small text-muted-foreground">
+        {{ t('start.or') }} <a :href="`mailto:${email}`" dir="ltr" class="inline-flex min-h-11 items-center font-medium text-foreground underline underline-offset-4">{{ email }}</a>
+      </p>
+    </BlockHero>
+
+    <BlockSection v-if="selected.length" :title="t('home.work')" :side="false">
+      <ProjectsList :items="selected" feature heading-level="h3" />
+      <NuxtLink :to="path('projects')" class="mt-8 inline-flex min-h-11 items-center gap-2 font-medium text-primary underline-offset-4 hover:underline">
+        {{ t('projects.all') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+      </NuxtLink>
+    </BlockSection>
+
+    <BlockSection v-if="latest.length" :title="t('home.journal')">
+      <BlogPostList :items="latest" heading-level="h3" />
+      <NuxtLink :to="path('news')" class="mt-6 inline-flex min-h-11 items-center gap-2 font-medium text-primary underline-offset-4 hover:underline">
+        {{ t('blog.latest') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+      </NuxtLink>
+    </BlockSection>
+
+    <BlockCta v-if="start" :title="t('home.cta.title')" :text="t('home.cta.text')" :action="{ label: t('start.action'), to: start }">
+      <SiteContact :address="false" />
+    </BlockCta>
+  </div>
+</template>

package/templates/portfolio/app/pages/legal/[slug].vue

@@ -0,0 +1,46 @@
+<!-- Synced from templates/_features/site/app/pages/legal/[slug].vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// One legal text (content/legal/): privacy policy, terms, imprint. Address: /legal/<slug> in every language.
+// The imprint starts with the details of content/site.md (name, address, register, VAT number, email, phone), so the
+// owner writes them once; the text below adds what site.md cannot hold. A detail site.md does not have is left out.
+// Email and phone are links (mailto:, tel:), like on the contact page.
+const route = useRoute()
+const entry = useGinkoEntry('legal', () => route.params.slug)
+const site = useGinko('site')
+const { t, format } = useI18n('site')
+const details = computed(() => {
+  const d = site.value.data
+  if (entry.value.data.legalType !== 'imprint') return []
+  const rows: { label: string, value?: string, href?: string }[] = [
+    { label: t('imprint.address'), value: [d.legalName, d.street, d.city ? `${d.postalCode ?? ''} ${d.city}` : undefined].filter(Boolean).join('\n') },
+    { label: t('imprint.registry'), value: [d.registryCourt, d.registryNumber].filter(Boolean).join(', ') },
+    { label: t('imprint.vat'), value: d.vatId },
+    { label: t('imprint.email'), value: d.email, href: d.email ? `mailto:${d.email}` : undefined },
+    { label: t('imprint.phone'), value: d.phone, href: d.phone ? telHref(d.phone) : undefined },
+  ]
+  return rows.filter((row) => row.value)
+})
+usePageSeo(() => ({ title: entry.value.data.title, description: entry.value.data.description }))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader
+      :title="entry.data.title"
+      :lead="entry.data.description"
+      :meta="t('updated', { date: format.date(entry.data.updatedAt) })"
+    />
+    <!-- Each value keeps the direction of its own text (bdi), as in the footer. A link gets its 44 px tap height from
+         padding with a negative margin, so it stays on its label's line. -->
+    <dl v-if="details.length" class="mx-auto grid max-w-page gap-x-8 gap-y-1 px-gutter pb-10 sm:grid-cols-[auto_1fr] sm:gap-y-3">
+      <template v-for="row in details" :key="row.label">
+        <dt class="text-small text-muted-foreground max-sm:not-first:mt-3">{{ row.label }}</dt>
+        <dd class="whitespace-pre-line">
+          <a v-if="row.href" :href="row.href" dir="ltr" class="-my-2.5 inline-block py-2.5 underline underline-offset-4">{{ row.value }}</a>
+          <bdi v-else>{{ row.value }}</bdi>
+        </dd>
+      </template>
+    </dl>
+    <ProseBody :value="entry.data.body" />
+  </div>
+</template>

package/templates/portfolio/app/pages/news/[slug].vue

@@ -0,0 +1,94 @@
+<!-- Synced from templates/_features/blog/app/pages/news/[slug].vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { postJsonLd } from '@lupinum/ginko/basics'
+import { ArrowLeft, ArrowRight } from '@lucide/vue'
+
+// One post: title, summary, date and reading time, authors (initials and role, linked to their page when people have
+// one), cover (3:2), text and tags (linked to their pages), with BlogPosting JSON-LD; then the older and the newer
+// post and a link to all news, so a visitor who comes from a share or the feed does not end above the footer. A template
+// may bring `app/components/site/PageCta.vue`, its closing band: it shows at the end of the post.
+const cta = Object.values(import.meta.glob<Component>('../../components/site/PageCta.vue', { eager: true, import: 'default' }))[0]
+const route = useRoute()
+const entry = useGinkoEntry('posts', () => route.params.slug)
+const posts = useBlogPosts()
+const tagPath = useTagPath()
+const path = useGinkoPath()
+const { url } = useGinkoSite()
+const { t, format, language } = useI18n('blog')
+// Read the entry first: it answers 404 for an unknown or hidden slug, also in a language whose list is empty (there
+// `find` never calls its callback). Past that line the entry is visible, so the list has it.
+const index = computed(() => {
+  const id = entry.value.id
+  return posts.value.findIndex((item) => item.id === id)
+})
+const post = computed(() => posts.value[index.value]!)
+// The list is newest first: the newer post comes before this one, the older one after it.
+const newer = computed(() => posts.value[index.value - 1])
+const older = computed(() => posts.value[index.value + 1])
+const absolute = (path: string) => new URL(path, url).href
+usePageSeo(() => ({
+  title: post.value.title,
+  description: post.value.description,
+  image: post.value.image,
+  jsonLd: [postJsonLd({
+    title: post.value.title,
+    url: absolute(route.path),
+    date: post.value.date,
+    modified: entry.value.updatedAt,
+    description: post.value.description,
+    image: post.value.image ? absolute(post.value.image.url) : undefined,
+    authors: post.value.authors.map((author) => ({ name: author.name, url: author.to ? absolute(author.to) : undefined })),
+    tags: post.value.tags,
+    lang: language.value,
+  })],
+}))
+</script>
+
+<template>
+  <div>
+    <article>
+      <BlockPageHeader :title="post.title" :lead="post.description">
+        <p class="text-small text-muted-foreground tabular-nums">
+          <time :datetime="post.date">{{ format.date(post.date) }}</time>
+          <template v-if="post.minutes"><span aria-hidden="true"> · </span><span class="sr-only">, </span>{{ t('minutes', { count: post.minutes }) }}</template>
+        </p>
+        <BlogByline :authors="post.authors" />
+      </BlockPageHeader>
+      <div v-if="post.image" class="mx-auto max-w-page px-gutter pb-10">
+        <GinkoImage :image="post.image" eager sizes="(min-width: 1216px) 896px, 100vw" class="aspect-3/2 w-full max-w-4xl rounded-block bg-muted object-cover" />
+      </div>
+      <ProseBody :value="entry.data.body" />
+      <div v-if="post.tags.length" class="mx-auto max-w-page px-gutter pt-10">
+        <h2 class="sr-only">{{ t('tags') }}</h2>
+        <ul class="flex flex-wrap gap-2">
+          <li v-for="tag in post.tags" :key="tag">
+            <NuxtLink :to="tagPath(tag)" rel="tag" class="inline-flex min-h-11 items-center rounded-md border px-4 text-small transition-[color,background-color,border-color] duration-150 hover:bg-accent">{{ tagLabel(tag) }}</NuxtLink>
+          </li>
+        </ul>
+      </div>
+      <nav v-if="older || newer" :aria-label="t('pager')" class="mx-auto max-w-page px-gutter pt-10">
+        <ul class="grid max-w-4xl gap-3 sm:grid-cols-2">
+          <li v-if="older">
+            <NuxtLink :to="older.to" rel="prev" class="flex h-full min-h-11 flex-col gap-1 rounded-block border p-5 transition-colors duration-150 hover:bg-accent">
+              <span class="inline-flex items-center gap-2 text-small text-muted-foreground"><ArrowLeft class="size-4 rtl:-scale-x-100" aria-hidden="true" />{{ t('older') }}</span>
+              <span class="font-medium">{{ older.title }}</span>
+            </NuxtLink>
+          </li>
+          <li v-if="newer" class="sm:col-start-2">
+            <NuxtLink :to="newer.to" rel="next" class="flex h-full min-h-11 flex-col items-end gap-1 rounded-block border p-5 text-end transition-colors duration-150 hover:bg-accent">
+              <span class="inline-flex items-center gap-2 text-small text-muted-foreground">{{ t('newer') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" /></span>
+              <span class="font-medium">{{ newer.title }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
+      </nav>
+      <div class="mx-auto max-w-page px-gutter pt-10">
+        <NuxtLink :to="path('news')" class="inline-flex min-h-11 items-center gap-2 font-medium text-primary underline-offset-4 hover:underline">
+          {{ t('latest') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+        </NuxtLink>
+      </div>
+    </article>
+    <component :is="cta" v-if="cta" />
+  </div>
+</template>