create-ginko 0.4.0 → 0.5.0

package/templates/company/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/company/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/company/app/pages/downloads.vue

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

package/templates/company/app/pages/events/[slug].vue

@@ -0,0 +1,106 @@
+<!-- Synced from templates/_features/events/app/pages/events/[slug].vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { Component, ComputedRef } from 'vue'
+import { safeHref } from '@lupinum/ginko'
+import type { SessionJsonLdInput } from '@lupinum/ginko/basics'
+import { ArrowLeft, Mail, Phone } from '@lucide/vue'
+
+// One event: date with weekday and time (site time zone), place (its location, else the online link, else the
+// site's name and address when app.config `events.atTheBusiness` is true; otherwise no row: content/site.md is the organiser, not the venue), price, the description, and how to take part: the
+// booking link until `bookingUntil`, else phone and email of the business (content/site.md); "fully booked" or
+// "booking has closed" replaces both. Event JSON-LD with the time zone offset. An unknown or past event is a 404.
+// A feature may show more after the description with app/components/event/Programme.vue (prop `id`: the event's
+// entry id), and give the event's sessions to its JSON-LD with `useSessionsLd` in app/composables/useSessions.ts;
+// the sessions feature brings both: the event's programme. Without those files, nothing is added.
+const EventProgramme = Object.values(import.meta.glob<Component>('~/components/event/Programme.vue', { eager: true, import: 'default' }))[0]
+type SessionsLd = (event: () => string) => ComputedRef<SessionJsonLdInput[]>
+const useSessionsLd = Object.values(import.meta.glob<SessionsLd>('~/composables/useSessions.ts', { eager: true, import: 'useSessionsLd' }))[0]
+const route = useRoute()
+const event = useGinkoEntry('events', () => route.params.slug)
+const site = useGinko('site')
+const { t } = useI18n('events')
+const { dates, times, price, ltr } = useEventText()
+const venue = useEventVenue()
+const path = useGinkoPath()
+const langOf = useGinkoLang()
+const description = await useGinkoMarkdown(() => event.value.data.description)
+const sessions = useSessionsLd?.(() => event.value.id)
+const jsonLd = useEventJsonLd(() => ({ ...event.value.data, url: event.value.url ?? route.path }), () => description.value, () => sessions?.value)
+// The meta description is plain text: the isolate marks of a right-to-left page stay out of it.
+const metaDescription = () => `${dates(event.value.data)}${times(event.value.data) ? `, ${times(event.value.data)}` : ''}`.replace(/[\u2066\u2069]/g, '')
+usePageSeo(() => ({ title: event.value.data.title, description: metaDescription(), image: event.value.data.image ?? undefined, jsonLd: [jsonLd.value] }))
+
+const contact = computed(() => site.value.data)
+const bookingOf = useEventBooking()
+const closedOf = useBookingClosed()
+const booking = computed(() => bookingOf(event.value.data))
+const closed = computed(() => closedOf(event.value.data))
+const online = computed(() => safeHref(event.value.data.online ?? undefined))
+const atBusiness = computed(() => (event.value.data.location || online.value ? undefined : venue(event.value.data)))
+const place = computed(() => event.value.data.location || (online.value ? t('online') : atBusiness.value?.name))
+const businessAddress = computed(() => {
+  const a = atBusiness.value?.address
+  return a && [a.street, [a.postalCode, a.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')
+})
+</script>
+
+<template>
+  <article>
+    <div class="mx-auto max-w-page px-gutter pt-8 md:pt-12">
+      <NuxtLink :to="path('events')" class="-ms-1 inline-flex min-h-11 items-center gap-2 px-1 text-small font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
+        <ArrowLeft class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+        {{ t('all') }}
+      </NuxtLink>
+    </div>
+    <header class="mx-auto max-w-page px-gutter pt-4 pb-8 md:pb-12">
+      <div class="flex max-w-3xl flex-col gap-5">
+        <h1 class="text-h1" :lang="langOf(event, 'title')">{{ event.data.title }}</h1>
+        <dl class="grid gap-x-8 gap-y-3 sm:grid-cols-[auto_1fr]">
+          <dt class="text-small text-muted-foreground">{{ t('date') }}</dt>
+          <dd class="font-medium tabular-nums">{{ dates(event.data) }}</dd>
+          <template v-if="times(event.data)">
+            <dt class="text-small text-muted-foreground">{{ t('time') }}</dt>
+            <dd class="font-medium tabular-nums">{{ times(event.data) }}</dd>
+          </template>
+          <template v-if="place">
+            <dt class="text-small text-muted-foreground">{{ t('place') }}</dt>
+            <dd class="font-medium">
+              <a v-if="!event.data.location && online" :href="online" rel="noopener" class="text-primary underline">{{ place }}</a>
+              <span v-else>{{ place }}</span>
+              <span v-if="businessAddress" class="block font-normal text-muted-foreground">{{ businessAddress }}</span>
+            </dd>
+          </template>
+          <template v-if="price(event.data)">
+            <dt class="text-small text-muted-foreground">{{ t('price') }}</dt>
+            <dd class="font-medium tabular-nums">{{ price(event.data) }}</dd>
+          </template>
+        </dl>
+        <p v-if="event.data.soldOut" class="text-lead font-semibold">{{ t('soldOut') }}</p>
+        <p v-else-if="closed" class="text-lead font-semibold">{{ t('bookingClosed') }}</p>
+        <div v-else-if="booking" class="flex flex-wrap gap-3">
+          <Button as-child size="lg" class="max-sm:w-full">
+            <a :href="booking" rel="noopener">{{ t('book') }}</a>
+          </Button>
+        </div>
+        <div v-else-if="contact.phone || contact.email" class="flex flex-col gap-3">
+          <p class="text-muted-foreground">{{ t('reserve') }}</p>
+          <div class="flex flex-wrap gap-3">
+            <Button v-if="contact.phone" as-child size="lg" class="max-sm:w-full">
+              <a :href="telHref(contact.phone)"><Phone aria-hidden="true" />{{ t('call', { phone: ltr(contact.phone) }) }}</a>
+            </Button>
+            <Button v-if="contact.email" as-child size="lg" :variant="contact.phone ? 'outline' : 'default'" class="max-sm:w-full">
+              <a :href="`mailto:${contact.email}`"><Mail aria-hidden="true" />{{ t('email') }}</a>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </header>
+    <div v-if="event.data.image" class="mx-auto max-w-page px-gutter pb-10">
+      <GinkoImage :image="event.data.image" eager sizes="(min-width: 1216px) 1152px, 100vw" class="aspect-video w-full rounded-block bg-muted object-cover" :lang="langOf(event, 'image.alt')" />
+    </div>
+    <div :lang="langOf(event, 'description')">
+      <ProseBody :value="event.data.description" />
+    </div>
+    <component :is="EventProgramme" v-if="EventProgramme" :id="event.id" />
+  </article>
+</template>

package/templates/company/app/pages/events/index.vue

@@ -0,0 +1,20 @@
+<!-- Synced from templates/_features/events/app/pages/events/index.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// Upcoming events (content/events/), the next first, with weekday, date, time, price and "fully booked". An event
+// leaves this list, the sitemap and search engines after its last day. The cards' titles are h3: a hidden h2 keeps the
+// heading order (h1, h2, h3) for screen readers.
+const cards = useUpcomingEvents()
+const { t } = useI18n('events')
+usePageSeo(() => ({ title: t('title'), description: t('lead') }))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader :title="t('title')" :lead="t('lead')" />
+    <div class="mx-auto max-w-page px-gutter">
+      <h2 v-if="cards.length" class="sr-only">{{ t('upcoming') }}</h2>
+      <BlockCards v-if="cards.length" :items="cards" :columns="3" />
+      <p v-else class="max-w-prose text-lead text-muted-foreground">{{ t('none') }}</p>
+    </div>
+  </div>
+</template>

package/templates/company/app/pages/index.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ArrowRight } from '@lucide/vue'
+import type { Card } from '~/components/block/Cards.vue'
+
+// The home page answers "what do you make, and can it solve my problem?" in the first screen: what the company makes
+// in one sentence (content/home.md), one main action, contact sales, and the service line for a pump that has
+// stopped. Then the products and services, the references (customer logos and one quote), the latest news, the open
+// jobs and the next trade fair, and a closing band with the way to sales and the office's phone. A section whose list
+// is empty is left out.
+const home = useGinko('home')
+const site = useGinko('site')
+const quotes = useGinko('quotes')
+const logos = useGinko('logos')
+const fairs = useGinko('events')
+const services = useServiceCards(() => 3)
+const posts = useBlogPosts()
+const jobs = useOpenJobs()
+const { when } = useEventText()
+const path = useGinkoPath()
+const { t } = useI18n()
+const { name } = useGinkoSite()
+const latest = computed(() => posts.value.slice(0, 3))
+const quote = computed(() => quotes.value.items[0])
+const contact = computed(() => site.value.data)
+
+// Open jobs and the next trade fair, as two cards: the jobs card always shows (with no open job it invites an open
+// application), the fair card only while a fair is coming up.
+const next = computed<Card[]>(() => {
+  const fair = fairs.value.items[0]
+  const count = jobs.value.length
+  return [
+    { key: 'jobs', title: t('home.jobs.title', { name }), to: path('jobs'), meta: count ? t('home.jobs.count', { count }) : t('home.jobs.none'), text: t('home.jobs.text') },
+    ...(fair ? [{ key: fair.id, title: fair.data.title, to: fair.url, meta: when(fair.data, 'short'), text: fair.data.location ?? undefined }] : []),
+  ]
+})
+// The tab and search result say what the company makes; the share card keeps the sentence of the first screen.
+usePageSeo(() => ({ home: true, title: t('home.title'), description: home.value.data.lead, image: home.value.data.image }))
+</script>
+
+<template>
+  <div>
+    <BlockHero
+      :title="home.data.title"
+      :lead="home.data.lead"
+      :image="home.data.image"
+      :primary="{ label: t('home.sales'), to: path('team') }"
+      :secondary="{ label: t('home.catalogue'), to: path('services') }"
+    >
+      <ServiceLine />
+    </BlockHero>
+
+    <BlockSection v-if="services.length" :title="t('home.products')" :side="false">
+      <BlockCards :items="services" compact />
+      <NuxtLink :to="path('services')" class="mt-6 inline-flex min-h-11 items-center gap-2 font-medium text-primary underline-offset-4 hover:underline">
+        {{ t('home.allProducts') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+      </NuxtLink>
+    </BlockSection>
+
+    <BlockSection v-if="logos.items.length || quote" :title="t('home.references')" :lead="t('home.referencesLead')">
+      <div class="flex flex-col gap-12">
+        <BlockLogos v-if="logos.items.length" :items="logos.items" />
+        <BlockQuote v-if="quote" :text="quote.data.text" :name="quote.data.name" :role="quote.data.role" />
+      </div>
+    </BlockSection>
+
+    <BlockSection v-if="latest.length" :title="t('home.news')">
+      <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>
+
+    <BlockSection v-if="next.length" :title="t('home.next')" :side="false">
+      <BlockCards :items="next" :columns="2" />
+    </BlockSection>
+
+    <BlockCta :title="t('home.cta.title')" :text="t('home.cta.text')" :action="{ label: t('home.sales'), to: path('team') }">
+      <p v-if="contact.phone || contact.email" class="flex flex-wrap gap-x-6 text-body">
+        <a v-if="contact.phone" :href="telHref(contact.phone)" dir="ltr" class="inline-flex min-h-11 items-center font-medium tabular-nums underline underline-offset-4">{{ contact.phone }}</a>
+        <a v-if="contact.email" :href="`mailto:${contact.email}`" dir="ltr" class="inline-flex min-h-11 items-center font-medium underline underline-offset-4">{{ contact.email }}</a>
+      </p>
+    </BlockCta>
+  </div>
+</template>

package/templates/company/app/pages/jobs/[slug].vue

@@ -0,0 +1,63 @@
+<!-- Synced from templates/_features/jobs/app/pages/jobs/[slug].vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { ArrowLeft, Mail } from '@lucide/vue'
+
+// One job: title, short description, place, employment, work place and the last day to apply, the text, and how to
+// apply (an email with the job title in the subject, or the job's application page; no form on this site), at the
+// top and again below the text. JobPosting JSON-LD with `validThrough`. A job after its `validUntil` day, and an
+// unknown one, is a 404.
+const route = useRoute()
+const job = useGinkoEntry('jobs', () => route.params.slug)
+const path = useGinkoPath()
+const { t } = useI18n('jobs')
+const { employment, workplace, deadline } = useJobText()
+const apply = useApplyLink(() => job.value.data)
+const body = await useGinkoMarkdown(() => job.value.data.body)
+const jsonLd = useJobJsonLd(() => ({ ...job.value.data, url: job.value.url, updatedAt: job.value.updatedAt }), () => body.value)
+usePageSeo(() => ({ title: job.value.data.title, description: job.value.data.description, jsonLd: [jsonLd.value] }))
+</script>
+
+<template>
+  <article>
+    <div class="mx-auto max-w-page px-gutter pt-8 md:pt-12">
+      <NuxtLink :to="path('jobs')" class="-ms-1 inline-flex min-h-11 items-center gap-2 px-1 text-small font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
+        <ArrowLeft class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+        {{ t('all') }}
+      </NuxtLink>
+    </div>
+    <header class="mx-auto max-w-page px-gutter pt-4 pb-8 md:pb-12">
+      <div class="flex max-w-3xl flex-col gap-5">
+        <h1 class="text-h1">{{ job.data.title }}</h1>
+        <p class="text-lead text-muted-foreground">{{ job.data.description }}</p>
+        <dl class="grid gap-x-8 gap-y-3 sm:grid-cols-[auto_1fr]">
+          <dt class="text-small text-muted-foreground">{{ t('location') }}</dt>
+          <dd class="font-medium">{{ job.data.location }}</dd>
+          <dt class="text-small text-muted-foreground">{{ t('employmentLabel') }}</dt>
+          <dd class="font-medium">{{ employment(job.data) }}</dd>
+          <dt class="text-small text-muted-foreground">{{ t('workplaceLabel') }}</dt>
+          <dd class="font-medium">{{ workplace(job.data) }}</dd>
+          <dt class="text-small text-muted-foreground">{{ t('deadline') }}</dt>
+          <dd class="font-medium tabular-nums"><time :datetime="job.data.validUntil">{{ deadline(job.data) }}</time></dd>
+        </dl>
+        <div v-if="apply" class="flex flex-wrap gap-3">
+          <Button as-child size="lg" class="max-sm:w-full">
+            <a :href="apply.href" :rel="apply.email ? undefined : 'noopener'"><Mail v-if="apply.email" aria-hidden="true" />{{ apply.email ? t('applyEmail') : t('applyOnline') }}</a>
+          </Button>
+        </div>
+      </div>
+    </header>
+    <ProseBody :value="job.data.body" />
+    <section v-if="apply" aria-labelledby="job-apply" class="mx-auto max-w-page px-gutter pt-10">
+      <div class="flex max-w-prose flex-col items-start gap-4 border-t pt-8">
+        <h2 id="job-apply" class="text-h3">{{ t('how') }}</h2>
+        <p class="text-muted-foreground">
+          <template v-if="apply.email">{{ t('howEmail', { email: apply.email, date: deadline(job.data) }) }}</template>
+          <template v-else>{{ t('howOnline', { date: deadline(job.data) }) }}</template>
+        </p>
+        <Button as-child variant="outline" size="lg" class="max-sm:w-full">
+          <a :href="apply.href" :rel="apply.email ? undefined : 'noopener'"><Mail v-if="apply.email" aria-hidden="true" />{{ apply.email ? t('applyEmail') : t('applyOnline') }}</a>
+        </Button>
+      </div>
+    </section>
+  </article>
+</template>

package/templates/company/app/pages/jobs/index.vue

@@ -0,0 +1,36 @@
+<!-- Synced from templates/_features/jobs/app/pages/jobs/index.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { Mail } from '@lucide/vue'
+
+// The open jobs (content/jobs/). A job leaves this list, its page, the sitemap and the JSON-LD after its
+// `validUntil` day by itself. With no open job the page says so and asks for an open application by email, to the
+// business's address in content/site.md. The address per language comes from `pages.jobs` in ginko.config.ts.
+const jobs = useOpenJobs()
+const open = useApplyLink(() => undefined)
+const { t } = useI18n('jobs')
+usePageSeo(() => ({ title: t('title'), description: t('lead') }))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader :title="t('title')" :lead="t('lead')" />
+    <div class="mx-auto max-w-page px-gutter">
+      <div class="max-w-4xl">
+        <template v-if="jobs.length">
+          <JobsList :items="jobs" />
+          <p v-if="open" class="mt-6 text-muted-foreground">
+            {{ t('open.more') }}
+            <a :href="open.href" class="inline-flex min-h-11 items-center font-medium text-primary underline underline-offset-4">{{ t('open.action') }}</a>
+          </p>
+        </template>
+        <div v-else class="flex max-w-prose flex-col items-start gap-4">
+          <p class="text-lead font-medium">{{ t('none') }}</p>
+          <p class="text-muted-foreground">{{ t('open.text') }}</p>
+          <Button v-if="open" as-child size="lg" class="max-sm:w-full">
+            <a :href="open.href"><Mail aria-hidden="true" />{{ t('open.action') }}</a>
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

package/templates/company/app/pages/news/index.vue

@@ -0,0 +1,54 @@
+<!-- Synced from templates/_features/blog/app/pages/news/index.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { Rss } from '@lucide/vue'
+import type { BlogPost } from '~/composables/useBlog'
+
+// The news: every post, newest first (content/posts/), grouped by year once they span more than one, with the tags
+// as links to their pages above them. The feed of this language is linked in the head and below the list. The address
+// per language comes from `pages.news` in ginko.config.ts.
+const posts = useBlogPosts()
+const tags = useBlogTags()
+const feed = useFeedPath()
+const route = useRoute()
+const { name, url } = useGinkoSite()
+const { t, language } = useI18n('blog')
+const years = computed(() => {
+  const groups: { year: string, posts: BlogPost[] }[] = []
+  for (const post of posts.value) {
+    const year = post.date.slice(0, 4)
+    if (groups.at(-1)?.year === year) groups.at(-1)!.posts.push(post)
+    else groups.push({ year, posts: [post] })
+  }
+  return groups
+})
+useHead(() => ({ link: [{ rel: 'alternate', type: 'application/rss+xml', title: t('feed'), href: feed.value }] }))
+usePageSeo(() => ({
+  title: t('title'),
+  description: t('lead'),
+  jsonLd: [{ '@context': 'https://schema.org', '@type': 'Blog', name: `${name}: ${t('title')}`, description: t('lead'), url: new URL(route.path, url).href, inLanguage: language.value }],
+}))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader :title="t('title')" :lead="t('lead')" />
+    <div class="mx-auto max-w-page px-gutter">
+      <div class="max-w-4xl">
+        <nav v-if="tags.length" :aria-label="t('tags')" class="pb-8">
+          <BlogTagList :tags="tags" />
+        </nav>
+        <template v-if="years.length > 1">
+          <section v-for="group in years" :key="group.year" :aria-labelledby="`year-${group.year}`" class="pt-6 first:pt-0">
+            <h2 :id="`year-${group.year}`" class="pb-2 text-h3 tabular-nums">{{ group.year }}</h2>
+            <BlogPostList :items="group.posts" heading-level="h3" />
+          </section>
+        </template>
+        <BlogPostList v-else-if="posts.length" :items="posts" />
+        <BlockEmpty v-else :title="t('empty')" path="content/posts/" />
+        <a :href="feed" class="mt-6 inline-flex min-h-11 items-center gap-2 text-small text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
+          <Rss class="size-4" aria-hidden="true" />{{ t('feed') }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

package/templates/company/app/pages/news/tags/[tag].vue

@@ -0,0 +1,41 @@
+<!-- Synced from templates/_features/blog/app/pages/news/tags/[tag].vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { ArrowRight } from '@lucide/vue'
+
+// One tag: the posts that carry it, newest first. Tags are free text in each language's files, so a tag has no
+// translation: the page names only its own language as alternate (a link to another language's news page would be a
+// false hreflang), so the switch shows it as not translated. A tag no visible post carries is a 404. The address is
+// the news page's, then the word for `tags` in app/routes.ts (`segments`), then the tag.
+definePageMeta({
+  i18nAlternates: (to, { locale }) => ({ [locale]: to.path }),
+})
+const route = useRoute()
+const posts = useBlogPosts()
+const tags = useBlogTags()
+const path = useGinkoPath()
+const { t } = useI18n('blog')
+const slug = computed(() => String(route.params.tag))
+// Thrown on every read while no post carries the tag, like useGinkoEntry: fatal, so client navigation shows the 404.
+const tag = toRef(() => {
+  const found = tags.value.find((item) => item.slug === slug.value)
+  if (!found) throw createError({ statusCode: 404, statusMessage: 'Not found', fatal: true })
+  return found
+})
+const tagged = computed(() => posts.value.filter((post) => post.tags.some((name) => tagSlug(name) === tag.value.slug)))
+const title = computed(() => t('tagged', { tag: tag.value.name }))
+usePageSeo(() => ({ title: title.value, description: t('count', { count: tag.value.count }) }))
+</script>
+
+<template>
+  <div>
+    <BlockPageHeader :title="title" :meta="t('count', { count: tag.count })" />
+    <div class="mx-auto max-w-page px-gutter">
+      <div class="max-w-4xl">
+        <BlogPostList :items="tagged" />
+        <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('all') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>