create-ginko 0.4.0 → 0.5.0

package/templates/blog/app/components/ui/button/index.ts

@@ -0,0 +1,44 @@
+// Synced from templates/_features/ui/app/components/ui/button/index.ts by `pnpm templates sync`. Edit the source, not this copy.
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+// shadcn-vue's variant and size names, so shadcn examples and blocks work as written; the look comes from the tokens
+// (tokens.css). Focus is the global :focus-visible ring. Sizes are at least 44px high on touch screens, the touch
+// target of the design rules; `sm` and `icon-sm` are smaller only with a mouse (`pointer-coarse`).
+export const buttonVariants = cva(
+  'inline-flex shrink-0 items-center justify-center gap-2 rounded-md font-medium whitespace-nowrap transition-[color,background-color,border-color] duration-150 ease-out select-none disabled:pointer-events-none disabled:opacity-60 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-5',
+  {
+    variants: {
+      variant: {
+        /** The main action. One per view. On paper an outline, as printers leave out backgrounds. */
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 print:border print:bg-transparent print:text-foreground',
+        /** A second action next to the main one. */
+        outline: 'border border-input text-foreground hover:bg-accent',
+        /** A quiet filled action, for example in a toolbar. */
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        /** An action that deletes or cannot be undone. `text-background` keeps the contrast in both schemes. */
+        destructive: 'bg-destructive text-background hover:bg-destructive/90',
+        /** Icon buttons and quiet actions, for example in the header. */
+        ghost: 'text-foreground hover:bg-accent',
+        /** An action that reads as a link. */
+        link: 'text-primary underline underline-offset-4 hover:decoration-2',
+      },
+      size: {
+        default: 'h-11 px-5 text-small',
+        sm: 'h-9 px-3 text-small pointer-coarse:h-11',
+        lg: 'h-12 px-6 text-body',
+        icon: 'size-11',
+        'icon-sm': 'size-9 pointer-coarse:size-11',
+        'icon-lg': 'size-12',
+      },
+    },
+    compoundVariants: [{ variant: 'link', class: 'h-auto px-0' }],
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/templates/blog/app/components/ui/sheet/Sheet.vue

@@ -0,0 +1,16 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/Sheet.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>

package/templates/blog/app/components/ui/sheet/SheetClose.vue

@@ -0,0 +1,13 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetClose.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose data-slot="sheet-close" v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

package/templates/blog/app/components/ui/sheet/SheetContent.vue

@@ -0,0 +1,54 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetContent.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { X } from '@lucide/vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import SheetOverlay from './SheetOverlay.vue'
+
+// Trimmed from shadcn-vue: a panel from the inline start or end, so it opens from the right in right-to-left
+// languages. Focus trap, Escape and focus return come from reka-ui. The close button's label is a prop, because
+// this component has no texts of its own.
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class']
+  side?: 'start' | 'end'
+  closeLabel?: string
+}
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: 'start',
+  closeLabel: 'Close',
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'side', 'closeLabel')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <SheetOverlay />
+    <DialogContent
+      data-slot="sheet-content"
+      :class="cn(
+        'fixed inset-y-0 z-50 flex h-full w-11/12 max-w-sm flex-col gap-6 bg-background shadow-overlay data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=open]:duration-300 data-[state=open]:ease-out',
+        side === 'start' && 'start-0 border-e data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start',
+        side === 'end' && 'end-0 border-s data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end',
+        props.class)"
+      v-bind="{ ...$attrs, ...forwarded }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute end-3 top-3 inline-flex size-11 items-center justify-center rounded-md text-foreground transition-[color,background-color,border-color] duration-150 hover:bg-accent"
+      >
+        <X class="size-5" aria-hidden="true" />
+        <span class="sr-only">{{ closeLabel }}</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

package/templates/blog/app/components/ui/sheet/SheetDescription.vue

@@ -0,0 +1,23 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetDescription.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogDescription, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="sheet-description"
+    v-bind="forwardedProps"
+    :class="cn('text-small text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>

package/templates/blog/app/components/ui/sheet/SheetOverlay.vue

@@ -0,0 +1,22 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetOverlay.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogOverlayProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogOverlay } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="sheet-overlay"
+    v-bind="delegatedProps"
+    :class="cn('fixed inset-0 z-50 bg-scrim data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>

package/templates/blog/app/components/ui/sheet/SheetTitle.vue

@@ -0,0 +1,23 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetTitle.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogTitle, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="sheet-title"
+    v-bind="forwardedProps"
+    :class="cn('font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>

package/templates/blog/app/components/ui/sheet/SheetTrigger.vue

@@ -0,0 +1,13 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetTrigger.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger data-slot="sheet-trigger" v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

package/templates/blog/app/components/ui/sheet/index.ts

@@ -0,0 +1,7 @@
+// Synced from templates/_features/ui/app/components/ui/sheet/index.ts by `pnpm templates sync`. Edit the source, not this copy.
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'

package/templates/blog/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/blog/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/blog/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/blog/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/blog/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/blog/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/blog/app/pages/about/[slug].vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { personJsonLd } from '@lupinum/ginko/basics'
+import { ArrowRight } from '@lucide/vue'
+
+// One author: initials, name, role, short bio, and their posts, newest first, with Person JSON-LD. The address comes
+// from the `people` route in ginko.config.ts (/about/<slug>); an unknown author is a 404.
+const route = useRoute()
+const person = useGinkoEntry('people', () => route.params.slug)
+const posts = useBlogPosts()
+const path = useGinkoPath()
+const { url, name } = useGinkoSite()
+const { t } = useI18n()
+const written = computed(() => posts.value.filter((post) => post.authors.some((author) => author.id === person.value.id)))
+usePageSeo(() => ({
+  title: person.value.data.name,
+  description: person.value.data.bio ?? person.value.data.role,
+  jsonLd: [personJsonLd({
+    name: person.value.data.name,
+    role: person.value.data.role,
+    bio: person.value.data.bio,
+    url: new URL(person.value.url, url).href,
+    worksFor: { name, url },
+  })],
+}))
+</script>
+
+<template>
+  <article>
+    <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">
+        <InitialsAvatar :name="person.data.name" size="lg" />
+        <h1 class="text-h1">{{ person.data.name }}</h1>
+        <p v-if="person.data.role" class="text-lead text-muted-foreground">{{ person.data.role }}</p>
+        <p v-if="person.data.bio" class="max-w-prose">{{ person.data.bio }}</p>
+      </div>
+    </header>
+    <section aria-labelledby="author-posts" class="mx-auto max-w-page px-gutter">
+      <div class="max-w-4xl">
+        <h2 id="author-posts" class="pb-2 text-h3">{{ t('author.posts', { name: person.data.name }) }}</h2>
+        <BlogPostList v-if="written.length" :items="written" heading-level="h3" />
+        <p v-else class="border-t py-8 text-muted-foreground">{{ t('author.none') }}</p>
+        <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.all') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+        </NuxtLink>
+      </div>
+    </section>
+  </article>
+</template>

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ArrowRight } from '@lucide/vue'
+
+// The home page answers "what is new?" in the first screen: one line on what the blog is (content/home.md), then the
+// newest post with its photo, date, reading time and authors. Below: the next posts, the topics and the two writers.
+// The feed is in the footer of every page. A section whose list is empty is left out.
+const home = useGinko('home')
+const posts = useBlogPosts()
+const tags = useBlogTags()
+const people = useGinko('people')
+const path = useGinkoPath()
+const locale = useGinkoLocale()
+const { t } = useI18n()
+const newest = computed(() => posts.value[0])
+const more = computed(() => posts.value.slice(1, 5))
+usePageSeo(() => ({ home: true, description: home.value.data.lead }))
+</script>
+
+<template>
+  <div>
+    <BlockHero :title="home.data.title" :lead="home.data.lead" />
+
+    <div class="mx-auto max-w-page px-gutter pt-12 md:pt-16">
+      <HomeLatestPost v-if="newest" :post="newest" />
+      <BlockEmpty v-else :title="t('blog.empty')" path="content/posts/" />
+    </div>
+
+    <BlockSection v-if="more.length" :title="t('home.more')">
+      <BlogPostList :items="more" 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.all') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
+      </NuxtLink>
+    </BlockSection>
+
+    <BlockSection v-if="tags.length" :title="t('blog.tags')">
+      <BlogTagList :tags="tags" />
+    </BlockSection>
+
+    <BlockSection v-if="people.items.length" :title="t('home.authors')">
+      <ul class="grid gap-x-10 gap-y-8 sm:grid-cols-2">
+        <li v-for="person in people.items" :key="person.id" class="flex items-start gap-4">
+          <InitialsAvatar :name="person.data.name" />
+          <div class="flex flex-col gap-1">
+            <h3 class="font-medium">
+              <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>
+            </h3>
+            <p v-if="person.data.role" class="text-small text-muted-foreground">{{ person.data.role }}</p>
+          </div>
+        </li>
+      </ul>
+    </BlockSection>
+  </div>
+</template>