Release/2.6.2

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## v2.6.2
+
+[compare changes](https://github.com/dpc-sdp/ripple-framework/compare/v2.6.1...v2.6.2)
+
+
+### 🩹 Fixes
+
+  - **@dpc-sdp/nuxt-ripple:** Fixed unpredictable meta tags by moving from hooks to composibles ([0b34ee454](https://github.com/dpc-sdp/ripple-framework/commit/0b34ee454))
+  - **@dpc-sdp/nuxt-ripple:** Changed section id header name ([f41f43dde](https://github.com/dpc-sdp/ripple-framework/commit/f41f43dde))
+
+### ❤️  Contributors
+
+- Jeffrey Dowdle <[email protected]>
+
 ## v2.6.0...release/v2.6.1
 
 [compare changes](https://github.com/dpc-sdp/ripple-framework/compare/v2.6.0...release/v2.6.1)

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.6.1",
+  "version": "2.6.2",
   "npmClient": "pnpm",
   "exact": true,
   "command": {

packages/eslint-config-ripple/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/eslint-config-ripple",
   "description": "ESLint config for Ripple projects",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "index.js",

packages/nuxt-ripple-analytics/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/nuxt-ripple-analytics",
   "description": "Nuxt module for handling event tracking.",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

packages/nuxt-ripple-cli/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/nuxt-ripple-cli",
   "description": "A CLI for simplifying common setup and scaffolding tasks",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "./dist/index.js",

packages/nuxt-ripple-preview/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/nuxt-ripple-preview",
   "description": "Adds support for drupal preview links in Ripple frontend sites",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

packages/nuxt-ripple/components/TideBaseLayout.vue

@@ -93,13 +93,7 @@
 
 <script setup lang="ts">
 // @ts-ignore
-import {
-  useAppConfig,
-  useRoute,
-  useNuxtApp,
-  useTideLanguage,
-  useLogger
-} 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'
@@ -148,6 +142,7 @@ onMounted(() => {
   document.body.setAttribute('data-nuxt-hydrated', 'true')
 })
 
+const nuxtApp = useNuxtApp()
 const route = useRoute()
 const showBreadcrumbs = computed(() => route.path !== '/')
 const showDraftAlert = computed(() => props.page?.status === 'draft')
@@ -169,15 +164,13 @@ const footerNav = computed(() => {
   return menuMain
 })
 
-const nuxtApp = useNuxtApp()
-const logger = useLogger()
-
-logger.info('Calling tide:page hook...', {
-  label: 'TideBaseLayout'
-})
-
 /*
  * This hook can be called from plugins to extend Tide managed pages behaviour - see /plugins folder for examples
  */
 await nuxtApp.callHook('tide:page', props)
+
+useTideSiteTheme(props.site)
+useTideHideAlerts()
+useTideSiteMeta(props, nuxtApp?.$app_origin)
+useTideFavicons()
 </script>

packages/nuxt-ripple/composables/use-section-id.ts

@@ -1,7 +1,7 @@
 import { useRequestHeaders } from '#imports'
 
 export const useSectionId = (): string => {
-  const sectionIdHeaderName = 'section-io-id'
+  const sectionIdHeaderName = 'x-request-id'
   const requestHeaders = useRequestHeaders([sectionIdHeaderName])
   return requestHeaders[sectionIdHeaderName] || 'no section id'
 }

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

@@ -0,0 +1,44 @@
+export default () => {
+  const theme = useAppConfig().ripple?.theme
+
+  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:
+          theme && theme.hasOwnProperty('rpl-clr-primary')
+            ? theme['rpl-clr-primary']
+            : '#0054c9'
+      }
+    ],
+    meta: [
+      {
+        name: 'msapplication-TileColor',
+        content:
+          theme && theme.hasOwnProperty('rpl-clr-primary')
+            ? theme['rpl-clr-primary']
+            : '#0054c9'
+      },
+      { name: 'theme-color', content: '#ffffff' }
+    ]
+  })
+}

packages/nuxt-ripple/plugins/hide-alerts.ts → packages/nuxt-ripple/composables/use-tide-hide-alerts.ts

@@ -1,5 +1,3 @@
-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
@@ -46,16 +44,14 @@ try {
   console.error(e)
 }`
 
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.hook('tide:page', () => {
-    if (process.server) {
-      useHead({
-        script: [
-          {
-            innerHTML: hideAlertsOnLoadScript
-          }
-        ]
-      })
-    }
-  })
-})
+export default () => {
+  if (process.server) {
+    useHead({
+      script: [
+        {
+          innerHTML: hideAlertsOnLoadScript
+        }
+      ]
+    })
+  }
+}

packages/nuxt-ripple/composables/use-tide-site-meta.ts

@@ -0,0 +1,138 @@
+const metaProperty = (str: string) => {
+  const p = str.split(':')
+  if (p.length === 1) return str
+  return p[0] + p[1].charAt(0).toUpperCase() + p[1].slice(1)
+}
+
+export default (props, $app_origin) => {
+  const page = props.page
+  const site = props.site
+
+  const pageTitle = computed(() => {
+    const titleOfPage = `${props.pageTitle || props.page?.title || ''}`
+    const titleOfSite = `${props.site?.name}`
+    if (titleOfPage && titleOfSite) {
+      return `${titleOfPage} | ${titleOfSite}`
+    }
+    return titleOfSite
+  })
+
+  if (!page) {
+    useHead({
+      title: pageTitle
+    })
+  } else {
+    // Additional <link>s in head
+    const links = []
+    const additionalMeta = page?.meta?.additional || []
+
+    additionalMeta
+      .filter(
+        (attr: any) =>
+          attr.tag === 'link' && attr.attributes.rel !== 'canonical'
+      )
+      .map((attr: any) => {
+        if (attr.attributes.rel) links.push(attr.attributes)
+      })
+
+    // Define basic attributes
+    useHead({
+      link: links
+    })
+
+    // 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
+          }
+      })
+
+    // Determine unified description
+    let description = page.meta?.description
+
+    if (metaDescriptions.ogDescription !== '') {
+      description = metaDescriptions.ogDescription
+    } else if (metaDescriptions.description !== '') {
+      description = metaDescriptions.description
+    }
+
+    // Determine images
+    let featuredImage = '',
+      featuredImageAlt = ''
+    if (metaOverrides.ogImage) {
+      featuredImage = metaOverrides.ogImage
+      featuredImageAlt = metaOverrides.ogImageAlt
+    } else 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
+    }
+
+    let twitterImage = '',
+      twitterImageAlt = ''
+    if (metaOverrides.ogImage) {
+      twitterImage = metaOverrides.ogImage
+      twitterImageAlt = metaOverrides.ogImageAlt
+    } else 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
+    }
+
+    const { $app_origin } = useNuxtApp()
+
+    // 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,
+
+      // Custom props
+      sitesection: props.siteSection ? props.siteSection.name : null,
+      'content-type': page.type && page.type.replace('node--', ''),
+
+      // Metatag escape hatch
+      ...metaOverrides
+    })
+  }
+}

packages/nuxt-ripple/composables/use-tide-site-theme.ts

@@ -0,0 +1,25 @@
+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 (site) => {
+  const siteTheme = defuMerge(site?.theme, useAppConfig()?.ripple?.theme || {})
+  const style = formatThemeStyle(siteTheme)
+  if (style) {
+    useHead({
+      style: [
+        {
+          children: `:root, body { ${style} }`
+        }
+      ]
+    })
+  }
+}

packages/nuxt-ripple/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/nuxt-ripple",
   "description": "Nuxt module for integrating Ripple and Tide",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",