@michaelthielemann/kestrel 1.4.1 → 1.5.0

package/layers/public/app/pages/[...slug].vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { LayoutKey } from 'nuxt/app'
+import type { SiteHead } from '../utils/site-head'
 
 // The record decides its own layout, so route-meta resolution is opted out of and this page renders the
 // `<NuxtLayout>` itself. Side effect worth knowing: the layout becomes a CHILD of the page, so it can read
@@ -41,6 +42,7 @@ const { data: resolved } = await useAsyncData(`page:${locale}:${path}`, () =>
     collection: string | null
     page: (RenderedPage & Record<string, unknown>) | null
     alternates?: Array<{ locale: string; path: string }>
+    site?: SiteHead | null
   }),
 )
 const page = computed(() => resolved.value?.page ?? null)
@@ -86,6 +88,11 @@ if (!page.value && path !== '/') throw createError({ statusCode: 404, statusMess
 // og:image) require a configured siteUrl and degrade away without one.
 const publicRc = useRuntimeConfig().public as { siteUrl?: string; siteName?: string }
 const seo = page.value?.seo ?? {}
+const siteHead = resolved.value?.site ?? null
+const fallbacks = siteHeadFallbacks(seo, siteHead)
+// og:title stays the bare page title (og:site_name already carries the site); only <title> is composed.
+const pageTitle = seo.title || page.value?.title
+const documentTitle = composeTitle(pageTitle, siteHead)
 const head = buildPageHead({
   siteUrl: typeof publicRc.siteUrl === 'string' ? publicRc.siteUrl : '',
   siteName: typeof publicRc.siteName === 'string' ? publicRc.siteName : '',
@@ -93,9 +100,9 @@ const head = buildPageHead({
   locale,
   primary,
   prefixPrimary,
-  title: seo.title || page.value?.title,
-  description: seo.description || undefined,
-  image: seo.$media?.image ?? null,
+  title: pageTitle,
+  description: fallbacks.description,
+  image: fallbacks.image,
   alternates: resolved.value?.alternates ?? [],
 })
 
@@ -111,8 +118,8 @@ useHead({
   ],
 })
 useSeoMeta({
-  title: seo.title || page.value?.title,
-  description: seo.description || undefined,
+  title: documentTitle,
+  description: fallbacks.description,
   robots: seo.noindex ? 'noindex, nofollow' : undefined,
   ogTitle: head.meta.ogTitle,
   ogDescription: head.meta.ogDescription,

package/layers/public/app/utils/site-head.ts

@@ -0,0 +1,43 @@
+export interface SiteHead {
+  baseTitle?: string | null
+  titleSeparator?: string | null
+  titlePosition?: 'before' | 'after' | null
+  description?: string | null
+  $media?: { image?: { src: string, width: number | null, height: number | null } | null } | null
+}
+
+const DEFAULT_SEPARATOR = '|'
+
+const trimmed = (v: unknown): string | undefined => {
+  const s = typeof v === 'string' ? v.trim() : ''
+  return s || undefined
+}
+
+/**
+ * The `<title>` for a page. Only the document title is composed — `og:title` keeps the bare page title,
+ * because `og:site_name` already carries the site.
+ */
+export function composeTitle(pageTitle: string | undefined | null, site: SiteHead | null | undefined): string | undefined {
+  const page = trimmed(pageTitle)
+  const base = trimmed(site?.baseTitle)
+  if (!base) return page
+  if (!page) return base
+  // Migrated content often carries the site name in the page title already; appending it again reads as a
+  // bug to every visitor who looks at the tab.
+  if (page === base || page.endsWith(base)) return page
+  // The separator is stored as a bare token and padded here: a `text` field trims on write, so a stored
+  // " | " would come back as "|" and glue the two titles together.
+  const separator = trimmed(site?.titleSeparator) ?? DEFAULT_SEPARATOR
+  return site?.titlePosition === 'before' ? `${base} ${separator} ${page}` : `${page} ${separator} ${base}`
+}
+
+/** The page wins, the site stands in, and both degrade to absent so the tags disappear entirely. */
+export function siteHeadFallbacks(
+  seo: { description?: string | null, $media?: { image?: { src: string, width: number | null, height: number | null } | null } | null } | null | undefined,
+  site: SiteHead | null | undefined,
+): { description?: string, image: { src: string, width: number | null, height: number | null } | null } {
+  return {
+    description: trimmed(seo?.description) ?? trimmed(site?.description),
+    image: seo?.$media?.image ?? site?.$media?.image ?? null,
+  }
+}

package/layers/public/server/api/route.get.ts

@@ -13,6 +13,14 @@ export default defineEventHandler((event) => {
   const locale = typeof q.locale === 'string' ? q.locale : undefined
   const isStaticRender = import.meta.prerender === true || isRendererContext()
   const publishedOnly = isStaticRender || event.context.readScope !== 'all'
-  const resolved = resolvePage(useDb(), allCollections(), path, locale, publishedOnly)
-  return { collection: resolved?.collection ?? null, page: resolved?.page ?? null, alternates: resolved?.alternates ?? [] }
+  const db = useDb()
+  const resolved = resolvePage(db, allCollections(), path, locale, publishedOnly)
+  // The site-wide head tier rides along on the fetch the page already awaits, so it reaches SSR and the
+  // prerender on a path that is known to work. Looked up through the registry, not imported, so a consumer
+  // that disables the collection gets `null` instead of a query against a table the schema never created.
+  // `depth: 1` resolves the sharing image into `$media`; `getSingleton` captures the read, so an edit
+  // re-publishes every route that embedded it.
+  const siteCollection = getCollection('site')
+  const site = siteCollection ? getSingleton(db, siteCollection, locale, false, 1) : null
+  return { collection: resolved?.collection ?? null, page: resolved?.page ?? null, alternates: resolved?.alternates ?? [], site }
 })

package/layers/public/server/collections/site.ts

@@ -0,0 +1,44 @@
+import { buildCollection } from '../../../fields/server/utils/buildCollection'
+import { defineCollection } from '../../../core/server/utils/defineCollection'
+
+// `siteUrl`/`siteName` stay in `kestrel.config` on purpose: the build needs them for canonical URLs, the
+// sitemap and robots.txt, so they cannot live in the DB. What is here is editorial instead — and a write
+// re-publishes the routes that embed it, which a config value frozen at module setup can never do.
+const built = buildCollection(defineCollection({
+  name: 'site',
+  mode: 'single',
+  translatable: true,
+  builtin: true,
+  label: { singular: { en: 'Site', de: 'Website' }, plural: { en: 'Site', de: 'Website' } },
+  icon: 'globe',
+  fields: {
+    baseTitle: { type: 'text', label: { en: 'Base title', de: 'Basis-Titel' } },
+    titleSeparator: { type: 'text', label: { en: 'Title separator', de: 'Titel-Trenner' }, default: '|' },
+    titlePosition: {
+      type: 'choice',
+      label: { en: 'Base title position', de: 'Position des Basis-Titels' },
+      options: {
+        choices: [
+          { label: { en: 'After the page title', de: 'Nach dem Seitentitel' }, value: 'after' },
+          { label: { en: 'Before the page title', de: 'Vor dem Seitentitel' }, value: 'before' },
+        ],
+        display: 'buttons',
+      },
+      default: 'after',
+    },
+    description: {
+      type: 'text',
+      label: { en: 'Default meta description', de: 'Standard-Meta-Beschreibung' },
+      options: { multiline: true },
+    },
+    image: {
+      type: 'media',
+      label: { en: 'Default sharing image', de: 'Standard-Sharing-Bild' },
+      options: { accept: 'image' },
+    },
+  },
+  fieldLayout: [['baseTitle|2', 'titleSeparator|1'], 'titlePosition', 'description', 'image'],
+}))
+
+export const site = built.table
+export default built

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michaelthielemann/kestrel",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "A slim, collection-driven Nuxt 4 CMS meta-layer with a runtime schema engine. Add `extends: ['@michaelthielemann/kestrel']`, define collections, and the database migrates itself.",
   "license": "Apache-2.0",
   "author": "Michael Thielemann <283621694+MichaelThielemann@users.noreply.github.com>",