feat: refactor page meta handling and introduce usePageTitle composable

Author: manuelodelain

app/composables/use-page-meta.ts

@@ -1,6 +1,7 @@
 import type { ReactiveHead } from '@unhead/vue'
 import type { MaybeRefOrGetter } from 'vue'
 import { truncate } from '~/utils/string/truncate'
+import { joinURL } from 'ufo'
 
 export interface PageMetaAlternateLink {
     locale: string
@@ -29,7 +30,7 @@ export function usePageMeta(options: PageMetaOptions = {}) {
     const title = computed(() => toValue(options.title) || '')
     const description = computed(() => toValue(options.description) || '')
     const truncatedDescription = computed(() => truncate(description.value, 160))
-    const image = computed(() => toValue(options.image))
+    const image = computed(() => toValue(options.image) || joinURL(runtimeConfig.app.cdnUrl || runtimeConfig.public.site.url, '/images/share.jpg'))
     const siteName = computed(() => toValue(options.siteName) || runtimeConfig.public.site.name || '')
     const noindex = computed(() => !!toValue(options.noindex))
     const canonicalUrl = computed(() => toValue(options.canonicalUrl) || undefined)

app/composables/use-page-title.ts

@@ -0,0 +1,25 @@
+// commonContent and currentPage need to be set before calling this composable
+
+interface UsePageTitleOptions {
+    title?: MaybeRefOrGetter<string | undefined>
+    siteName?: MaybeRefOrGetter<string | undefined>
+}
+
+export function usePageTitle(options: UsePageTitleOptions = {}) {
+    const runtimeConfig = useRuntimeConfig()
+    const internalSiteName = computed(() =>
+        toValue(options.siteName) || runtimeConfig?.public?.site?.name)
+
+    function getPageTitle(title: string | undefined) {
+        if (!title) {
+            return internalSiteName.value || null
+        }
+
+        return `${title} — ${internalSiteName.value}`
+    }
+
+    return {
+        getPageTitle,
+        plainTitle: computed(() => getPageTitle(toValue(options.title))),
+    }
+}

app/composables/use-roadiz-meta.ts

@@ -20,7 +20,7 @@ export async function useRoadizMeta(
     const noindex = computed(() => (item.value as RoadizNodesSources)?.noIndex || previewIsActive.value)
 
     // -------------------- Title -------------------
-    const { getPageTitle } = useRoadizPageTitle()
+    const { getPageTitle } = usePageTitle()
     const title = computed(() => {
         // The API should always return a meta title.
         // The meta title is set in the Roadiz back office for each page. The logic is:
@@ -130,8 +130,6 @@ export async function useRoadizMeta(
         return commonContentData.value?.head?.shareImage
     })
 
-    const fallbackImageUrl = joinURL(runtimeConfig.app.cdnUrl || runtimeConfig.public.site.url, '/images/share.jpg')
-
     async function resolveMetaImage(document: RoadizDocument | null | undefined): Promise<string | undefined> {
         if (!document?.processable || !document?.relativePath) return undefined
 
@@ -157,7 +155,7 @@ export async function useRoadizMeta(
     const resolvedImageUrl = ref<string | undefined>()
 
     async function resolveImage(document: RoadizDocument | null | undefined) {
-        resolvedImageUrl.value = (await resolveMetaImage(document)) || fallbackImageUrl
+        resolvedImageUrl.value = await resolveMetaImage(document)
     }
 
     // Resolve upfront so the first (SSR) render already has the URL available.

app/composables/use-roadiz-page-title.ts

@@ -0,0 +1,5 @@
+export function useRoadizSiteName() {
+    const commonContent = useCommonContent()
+
+    return computed(() => commonContent.data.value?.head?.siteName || undefined)
+}

app/composables/use-roadiz-site-name.ts

@@ -43,13 +43,18 @@ const blocks = computed(() => {
     return errorPage.value?.children || []
 })
 
-useHead({
-    title: title.value,
-})
-
 function reloadPage() {
     window.location.reload()
 }
+
+// ------------------ Update meta data ----------------
+const siteName = useRoadizSiteName()
+const { getPageTitle } = usePageTitle({ siteName })
+const pageMeta = usePageMeta({
+    title: getPageTitle(title.value),
+})
+
+useHead(pageMeta)
 </script>
 
 <template>

app/error.vue

@@ -56,6 +56,7 @@ const {
     title: pageMetaTitle,
     truncatedDescription: pageMetaDescription,
 } = usePageMeta(roadizMeta)
+
 useHead(pageMetaHead)
 
 // Schema.org structured data