Merge pull request #823 from dpc-sdp/feature/fix-undefined-title

[R20-1505] fix(nuxt-ripple): 🐛 fix title undefined in search page
dpc-sdp · Sep 4, 2023 · 322c9cf · 322c9cf
2 parents b4ff204 + 1a43cab
commit 322c9cf
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 93 deletions.
diff --git a/packages/nuxt-ripple/plugins/social-meta.ts b/packages/nuxt-ripple/plugins/social-meta.ts
@@ -12,116 +12,122 @@ export default defineNuxtPlugin((nuxtApp) => {
     const site = props.site
 
     const pageTitle = computed(() => {
-      const titleOfPage = `${props.pageTitle || props.page?.title}`
+      const titleOfPage = `${props.pageTitle || props.page?.title || ''}`
       const titleOfSite = `${props.site?.name}`
       if (titleOfPage && titleOfSite) {
         return `${titleOfPage} | ${titleOfSite}`
       }
       return titleOfSite
     })
 
-    // Additional <link>s in head
-    const links = []
-    const additionalMeta = page.meta?.additional || []
-
-    additionalMeta
-      .filter((attr: any) => attr.tag === 'link')
-      .map((attr: any) => {
-        if (attr.attributes.rel) links.push(attr.attributes)
+    if (!page) {
+      useHead({
+        title: pageTitle
       })
+    } else {
+      // Additional <link>s in head
+      const links = []
+      const additionalMeta = page?.meta?.additional || []
 
-    // Define basic attributes
-    useHead({
-      link: links
-    })
+      additionalMeta
+        .filter((attr: any) => attr.tag === 'link')
+        .map((attr: any) => {
+          if (attr.attributes.rel) links.push(attr.attributes)
+        })
 
-    // Override API values with metatag
-    const metaDescriptions = {
-        ogDescription: '',
-        description: ''
-      },
-      metaOverrides = {}
-    additionalMeta
-      .filter(
-        (attr: any) => attr.tag === 'meta' && attr.attributes.name !== 'title'
-      )
-      .map((attr: any) => {
-        if (attr.attributes.name || attr.attributes.property)
-          if (
-            ['ogDescription', 'description'].includes(
-              metaProperty(attr.attributes.name || attr.attributes.property)
-            )
-          ) {
-            // Keep description fields in a separate collection
-            metaDescriptions[
-              metaProperty(attr.attributes.name || attr.attributes.property)
-            ] = attr.attributes.content
-          } else {
-            metaOverrides[
-              metaProperty(attr.attributes.name || attr.attributes.property)
-            ] = attr.attributes.content
-          }
+      // Define basic attributes
+      useHead({
+        link: links
       })
 
-    // Determine unified description
-    let description = page.meta?.description
+      // Override API values with metatag
+      const metaDescriptions = {
+          ogDescription: '',
+          description: ''
+        },
+        metaOverrides = {}
+      additionalMeta
+        .filter(
+          (attr: any) => attr.tag === 'meta' && attr.attributes.name !== 'title'
+        )
+        .map((attr: any) => {
+          if (attr.attributes.name || attr.attributes.property)
+            if (
+              ['ogDescription', 'description'].includes(
+                metaProperty(attr.attributes.name || attr.attributes.property)
+              )
+            ) {
+              // Keep description fields in a separate collection
+              metaDescriptions[
+                metaProperty(attr.attributes.name || attr.attributes.property)
+              ] = attr.attributes.content
+            } else {
+              metaOverrides[
+                metaProperty(attr.attributes.name || attr.attributes.property)
+              ] = attr.attributes.content
+            }
+        })
 
-    if (metaDescriptions.ogDescription !== '') {
-      description = metaDescriptions.ogDescription
-    } else if (metaDescriptions.description !== '') {
-      description = metaDescriptions.description
-    }
+      // Determine unified description
+      let description = page.meta?.description
 
-    // Determine images
-    let featuredImage = '',
-      featuredImageAlt = ''
-    if (page.meta?.image) {
-      featuredImage = page.meta.image.src
-      featuredImageAlt = page.meta.image.alt
-    } else if (site.socialImages.og) {
-      featuredImage = site.socialImages.og.src
-      featuredImageAlt = site.socialImages.og.alt
-    }
+      if (metaDescriptions.ogDescription !== '') {
+        description = metaDescriptions.ogDescription
+      } else if (metaDescriptions.description !== '') {
+        description = metaDescriptions.description
+      }
 
-    let twitterImage = '',
-      twitterImageAlt = ''
-    if (page.meta?.image) {
-      twitterImage = page.meta.image.src
-      twitterImageAlt = page.meta.image.alt
-    } else if (site.socialImages.twitter) {
-      twitterImage = site.socialImages.twitter.src
-      twitterImageAlt = site.socialImages.twitter.alt
-    } else if (site.socialImages.og) {
-      twitterImage = site.socialImages.og.src
-      twitterImageAlt = site.socialImages.og.alt
-    }
+      // Determine images
+      let featuredImage = '',
+        featuredImageAlt = ''
+      if (page.meta?.image) {
+        featuredImage = page.meta.image.src
+        featuredImageAlt = page.meta.image.alt
+      } else if (site.socialImages.og) {
+        featuredImage = site.socialImages.og.src
+        featuredImageAlt = site.socialImages.og.alt
+      }
 
-    const { $app_origin } = useNuxtApp()
+      let twitterImage = '',
+        twitterImageAlt = ''
+      if (page.meta?.image) {
+        twitterImage = page.meta.image.src
+        twitterImageAlt = page.meta.image.alt
+      } else if (site.socialImages.twitter) {
+        twitterImage = site.socialImages.twitter.src
+        twitterImageAlt = site.socialImages.twitter.alt
+      } else if (site.socialImages.og) {
+        twitterImage = site.socialImages.og.src
+        twitterImageAlt = site.socialImages.og.alt
+      }
 
-    // Define SEO meta
-    useSeoMeta({
-      title: () => pageTitle.value,
-      description: () => description,
-      ogTitle: props.pageTitle,
-      ogDescription: description,
-      ogType: 'website',
-      ogUrl: $app_origin + page.meta?.url,
-      ogImage: featuredImage,
-      ogImageAlt: featuredImageAlt,
-      twitterCard: 'summary',
-      twitterSite: $app_origin,
-      twitterTitle: props.pageTitle,
-      twitterDescription: description,
-      twitterImage: twitterImage,
-      twitterImageAlt: twitterImageAlt,
-      keywords: page.meta?.keywords,
+      const { $app_origin } = useNuxtApp()
 
-      // Custom props
-      sitesection: props.siteSection ? props.siteSection.name : null,
-      'content-type': page.type && page.type.replace('node--', ''),
+      // Define SEO meta
+      useSeoMeta({
+        title: () => pageTitle.value,
+        description: () => description,
+        ogTitle: props.pageTitle,
+        ogDescription: description,
+        ogType: 'website',
+        ogUrl: $app_origin + page.meta?.url,
+        ogImage: featuredImage,
+        ogImageAlt: featuredImageAlt,
+        twitterCard: 'summary',
+        twitterSite: $app_origin,
+        twitterTitle: props.pageTitle,
+        twitterDescription: description,
+        twitterImage: twitterImage,
+        twitterImageAlt: twitterImageAlt,
+        keywords: page.meta?.keywords,
 
-      // Metatag escape hatch
-      ...metaOverrides
-    })
+        // Custom props
+        sitesection: props.siteSection ? props.siteSection.name : null,
+        'content-type': page.type && page.type.replace('node--', ''),
+
+        // Metatag escape hatch
+        ...metaOverrides
+      })
+    }
   })
 })
diff --git a/packages/ripple-tide-search/components/TideSearchPage.vue b/packages/ripple-tide-search/components/TideSearchPage.vue
@@ -199,7 +199,7 @@ watch(
 </script>
 
 <template>
-  <TideBaseLayout :id="id" :site="site">
+  <TideBaseLayout :id="id" :site="site" :pageTitle="pageTitle">
     <template #aboveBody>
       <RplHeroHeader
         :title="pageTitle"