Merge pull request #816 from dpc-sdp/feature/meta-refactor

[SDPAP-8228] Refactor PageLayout to call setup functions on hook

examples/nuxt-app/test/features/site/shared-elements.feature

@@ -2,6 +2,14 @@ Feature: Shared site elements
 
   As a user I can view and interact with shared elements such as the primary nav and footer.
 
+  @mockserver
+  Scenario: Page title
+    Given the site endpoint returns fixture "/site/shared-elements" with status 200
+    And the page endpoint for path "/" returns fixture "/landingpage/home" with status 200
+    Given I visit the page "/"
+    Then the page title should be "Demo Landing Page | vic.gov.au"
+
+
   @mockserver
   Scenario: Breadcrumbs (page exists in menu)
     Given the site endpoint returns fixture "/site/shared-elements" with status 200

examples/nuxt-app/test/fixtures/landingpage/home.json

@@ -763,14 +763,14 @@
         "tag": "link",
         "attributes": {
           "rel": "canonical",
-          "href": "https://develop.content.reference.sdp.vic.gov.au/demo-landing-page"
+          "href": "https://www.vic.gov.au/demo-landing-page"
         }
       },
       {
         "tag": "meta",
         "attributes": {
           "name": "title",
-          "content": "Demo Landing Page | Single Digital Presence Content Management System"
+          "content": "Ignore this titel | Single Digital Presence Content Management System"
         }
       },
       {

packages/nuxt-ripple/app.config.ts

@@ -33,6 +33,7 @@ export default defineAppConfig({
   ripple: {
     featureFlags: {},
     theme: {},
+    pageMiddleware: [],
     languages: {
       aii: {
         name: 'Noto Sans Syriac Eastern',

packages/nuxt-ripple/components/TideBaseLayout.vue

@@ -93,17 +93,14 @@
 
 <script setup lang="ts">
 // @ts-ignore
-import { useHead, useSiteTheme, useAppConfig, useRoute } from '#imports'
+import { useAppConfig, useRoute, useNuxtApp, useTideLanguage } from '#imports'
 import { computed, onMounted, provide, ref } from 'vue'
 import { defu as defuMerge } from 'defu'
 import { TideSiteData } from '../types'
 import { TideTopicTag } from '../mapping/base/topic-tags/topic-tags-mapping'
 import { TideSiteSection } from '@dpc-sdp/ripple-tide-api/types'
-import hideAlertsOnLoadScript from '../utils/hideAlertsOnLoadScript.js'
-import useTidePageMeta from '../composables/use-tide-page-meta'
-import useTideLanguage from '../composables/use-tide-language'
 
-interface Props {
+export interface Props {
   site: TideSiteData
   background?: string
   pageTitle: string
@@ -136,6 +133,10 @@ const featureFlags = ref(
 )
 provide('featureFlags', featureFlags.value)
 
+// Sets language global values
+const { locale, direction, language } = useTideLanguage(props.page)
+provide('language', { locale, direction, language })
+
 onMounted(() => {
   // Used for knowing when page is ready for cypress testing
   document.body.setAttribute('data-nuxt-hydrated', 'true')
@@ -145,55 +146,9 @@ const route = useRoute()
 const showBreadcrumbs = computed(() => route.path !== '/')
 const showDraftAlert = computed(() => props.page?.status === 'draft')
 
-const style = useSiteTheme(
-  defuMerge(props.site?.theme || {}, useAppConfig()?.ripple?.theme || {})
-)
-
-const { direction, language } = useTideLanguage(props?.page)
-
-useHead({
-  htmlAttrs: {
-    lang: props.pageLanguage || 'en-AU'
-  },
-  title: props.pageTitle,
-  style: style && [
-    {
-      children: `:root, body { ${style} }`
-    }
-  ],
-  link: [
-    {
-      rel: 'apple-touch-icon',
-      sizes: '180x180',
-      href: '/apple-touch-icon.png'
-    },
-    {
-      rel: 'icon',
-      type: 'image/png',
-      sizes: '32x32',
-      href: '/favicon-32x32.png'
-    },
-    {
-      rel: 'icon',
-      type: 'image/png',
-      sizes: '16x16',
-      href: '/favicon-16x16.png'
-    },
-    { rel: 'manifest', href: '/site.webmanifest' },
-    { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#0054c9' }
-  ],
-  meta: [
-    { name: 'msapplication-TileColor', content: '#0054c9' },
-    { name: 'theme-color', content: '#ffffff' }
-  ],
-  script: [
-    {
-      innerHTML: hideAlertsOnLoadScript
-    }
-  ]
-})
-
-if (props.page && props.page.meta) {
-  useTidePageMeta(props)
-}
+const nuxtApp = useNuxtApp()
+/*
+ * This hook can be called from plugins to extend Tide managed pages behaviour - see /plugins folder for examples
+ */
+nuxtApp.callHook('tide:page', props)
 </script>

packages/nuxt-ripple/composables/use-tide-language.ts

@@ -1,5 +1,5 @@
 import { useAppConfig, useHead } from '#imports'
-import { computed, provide } from 'vue'
+import { computed } from 'vue'
 
 export default (page: any) => {
   const languages = useAppConfig()?.ripple?.languages
@@ -36,7 +36,11 @@ export default (page: any) => {
     })
   }
 
-  provide('language', { locale, direction, language })
+  useHead({
+    htmlAttrs: {
+      lang: language.value || 'en-AU'
+    }
+  })
 
   return { locale, direction, language }
 }

packages/nuxt-ripple/plugins/favicons.ts

@@ -0,0 +1,31 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('tide:page', () => {
+    useHead({
+      link: [
+        {
+          rel: 'apple-touch-icon',
+          sizes: '180x180',
+          href: '/apple-touch-icon.png'
+        },
+        {
+          rel: 'icon',
+          type: 'image/png',
+          sizes: '32x32',
+          href: '/favicon-32x32.png'
+        },
+        {
+          rel: 'icon',
+          type: 'image/png',
+          sizes: '16x16',
+          href: '/favicon-16x16.png'
+        },
+        { rel: 'manifest', href: '/site.webmanifest' },
+        { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#0054c9' }
+      ],
+      meta: [
+        { name: 'msapplication-TileColor', content: '#0054c9' },
+        { name: 'theme-color', content: '#ffffff' }
+      ]
+    })
+  })
+})

packages/nuxt-ripple/utils/hideAlertsOnLoadScript.ts → packages/nuxt-ripple/plugins/hide-alerts.ts

@@ -1,3 +1,5 @@
+import { useHead } from '#imports'
+
 /**
  * This script needs to be loaded as the very first asset on the page in order to avoid
  * the alerts showing that the user has already dismissed
@@ -44,4 +46,14 @@ try {
   console.error(e)
 }`
 
-export default hideAlertsOnLoadScript
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('tide:page', () => {
+    useHead({
+      script: [
+        {
+          innerHTML: hideAlertsOnLoadScript
+        }
+      ]
+    })
+  })
+})

packages/nuxt-ripple/plugins/site-theme.ts

@@ -0,0 +1,31 @@
+import { useAppConfig, useHead } from '#imports'
+import { defu as defuMerge } from 'defu'
+
+const formatThemeStyle = (themeObj) => {
+  if (themeObj) {
+    return Object.keys(themeObj)
+      .map((key) => {
+        return `--${key}: ${themeObj[key]}`
+      })
+      .join(`;\r\n`)
+  }
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('tide:page', ({ site }) => {
+    const siteTheme = defuMerge(
+      site?.theme,
+      useAppConfig()?.ripple?.theme || {}
+    )
+    const style = formatThemeStyle(siteTheme)
+    if (style) {
+      useHead({
+        style: [
+          {
+            children: `:root, body { ${style} }`
+          }
+        ]
+      })
+    }
+  })
+})