feat(@dpc-sdp/nuxt-ripple): drupal supplied manifest and icons

examples/nuxt-app/test/features/site/theme.feature

@@ -54,3 +54,26 @@ Feature: Site theme
     And the page endpoint for path "/" returns fixture "/landingpage/image-banner" with status 200
     Given I visit the page "/"
     Then the last updated date should not be displayed
+
+  @mockserver
+  Scenario: Favicon and app icons are set correctly
+    Given the site endpoint returns fixture "/site/reference" with status 200
+    And the page endpoint for path "/" returns fixture "/landingpage/image-banner" with status 200
+    Given I visit the page "/"
+    And the site should include the following meta tags
+      | name        | value   |
+      | theme-color | #6B19A3 |
+    And the site should include the following link tags
+      | name             | value                    |
+      | icon             | /placeholders/logo.png   |
+      | apple-touch-icon | /placeholders/medium.png |
+    And the sites manifest should include the following details
+      | key              | value              |
+      | name             | Test site          |
+      | short_name       | Testing            |
+      | description      | About my test site |
+      | theme_color      | #6B19A3            |
+      | background_color | #ffffff            |
+    And the sites manifest should include the following icons
+      | url                      | sizes |
+      | /placeholders/medium.png | any   |

examples/nuxt-app/test/fixtures/site/reference.json

@@ -1,6 +1,22 @@
 {
   "name": "Test site",
+  "shortName": "Testing",
+  "slogan": "<p>About my test site</p>",
   "acknowledgementHeader": "Test hero acknowledgement",
+  "favicon": {
+    "src": "/placeholders/logo.png",
+    "alt": "",
+    "title": "",
+    "width": 192,
+    "height": 192
+  },
+  "appIcon": {
+    "src": "/placeholders/medium.png",
+    "alt": "",
+    "title": "",
+    "width": 512,
+    "height": 512
+  },
   "acknowledgementFooter": "Test footer acknowledgement",
   "socialImages": {
     "twitter": {},

packages/nuxt-ripple/components/TideBaseLayout.vue

@@ -173,5 +173,5 @@ await nuxtApp.callHook('tide:page', props)
 useTideSiteTheme(props.site)
 useTideHideAlerts()
 useTideSiteMeta(props, nuxtApp?.$app_origin)
-useTideFavicons()
+useTideFavicons(props.site)
 </script>

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

@@ -1,44 +1,45 @@
-export default () => {
-  const theme = useAppConfig().ripple?.theme
+import { TideSiteData } from '../types'
 
-  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' },
+export default (site: TideSiteData) => {
+  const theme = useAppConfig()?.ripple?.theme
+  const { public: config } = useRuntimeConfig()
+
+  let link = []
+  const favicon = site.favicon?.src ?? '/favicon.png'
+  const appIcon = site.appIcon?.src ?? '/app-icon.png'
+  const themeColour = theme?.['rpl-clr-primary'] ?? '#ffffff'
+
+  const manifest = {
+    id: config?.siteUrl,
+    name: site?.name,
+    short_name: site?.shortName,
+    description: site?.slogan?.replace(/<[^>]*>/g, ''),
+    start_url: config?.siteUrl,
+    icons: [
       {
-        rel: 'mask-icon',
-        href: '/safari-pinned-tab.svg',
-        color:
-          theme && theme.hasOwnProperty('rpl-clr-primary')
-            ? theme['rpl-clr-primary']
-            : '#0054c9'
+        src: appIcon,
+        sizes: 'any'
       }
     ],
-    meta: [
-      {
-        name: 'msapplication-TileColor',
-        content:
-          theme && theme.hasOwnProperty('rpl-clr-primary')
-            ? theme['rpl-clr-primary']
-            : '#0054c9'
-      },
-      { name: 'theme-color', content: '#ffffff' }
-    ]
+    theme_color: themeColour,
+    background_color: '#ffffff',
+    display: 'standalone'
+  }
+
+  link.push({
+    rel: 'apple-touch-icon',
+    href: appIcon
+  })
+
+  link.push({
+    rel: 'manifest',
+    href: `data:application/manifest+json,${encodeURIComponent(JSON.stringify(manifest))}`
   })
+
+  link.push({
+    rel: 'icon',
+    href: favicon
+  })
+
+  useHead({ link, meta: [{ name: 'theme-color', content: themeColour }] })
 }

packages/nuxt-ripple/mapping/site/index.ts

@@ -1,6 +1,7 @@
 import {
   getImageFromField,
   getBody,
+  getBodyFromField,
   getLinkFromField,
   getSiteKeyValues,
   TideSiteApi
@@ -14,9 +15,13 @@ import processSiteSocialLinks from '../utils/processSiteSocialLinks.js'
 export default {
   mapping: {
     name: 'name',
+    shortName: 'field_short_name',
     _src: (src: any) =>
       process.env.NODE_ENV === 'development' ? src : undefined,
     siteAlerts: siteAlertsMapping,
+    slogan: (src: any) => getBodyFromField(src, 'field_site_slogan'),
+    favicon: (src: any) => getImageFromField(src, 'field_site_favicon'),
+    appIcon: (src: any) => getImageFromField(src, 'field_site_app_icon'),
     siteLogo: (src: any) => {
       if (src.field_site_logo) {
         return {
@@ -114,6 +119,8 @@ export default {
   },
   includes: [
     ...siteAlertsIncludes,
+    'field_site_favicon',
+    'field_site_app_icon',
     'field_site_og_image',
     'field_site_og_image.field_media_image',
     'field_site_twitter_image',

packages/nuxt-ripple/types.d.ts

@@ -13,6 +13,8 @@ export type TideApiResponse = any
 
 export interface TideSiteData {
   name: string
+  shortName?: string
+  slogan?: string
   _src?: any
   siteAlerts: TideAlert[]
   siteLogo: {
@@ -21,6 +23,16 @@ export interface TideSiteData {
     altText: string
   }
   showQuickExit: boolean
+  favicon?: {
+    src: string
+    width: string
+    height: string
+  }
+  appIcon?: {
+    src: string
+    width: string
+    height: string
+  }
   acknowledgementHeader?: string
   acknowledgementFooter: string
   cornerGraphic?: {

packages/ripple-test-utils/step_definitions/common/site/theme.ts

@@ -1,4 +1,4 @@
-import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { DataTable, Given, Then } from '@badeball/cypress-cucumber-preprocessor'
 import { set } from 'lodash-es'
 
 Then(
@@ -58,3 +58,70 @@ Given(
     })
   }
 )
+
+Then(
+  'the site should include the following meta tags',
+  (dataTable: DataTable) => {
+    const table = dataTable.hashes()
+
+    table.forEach((row) => {
+      cy.get(`meta[name="${row.name}"]`).should(
+        'have.attr',
+        'content',
+        row.value
+      )
+    })
+  }
+)
+
+Then(
+  'the site should include the following link tags',
+  (dataTable: DataTable) => {
+    const table = dataTable.hashes()
+
+    table.forEach((row) => {
+      cy.get(`link[rel="${row.name}"]`).should('have.attr', 'href', row.value)
+    })
+  }
+)
+
+Then(
+  'the sites manifest should include the following details',
+  (dataTable: DataTable) => {
+    const table = dataTable.hashes()
+
+    cy.get('link[rel="manifest"]')
+      .invoke('attr', 'href')
+      .then((href) => {
+        const manifest = JSON.parse(decodeURIComponent(href.split(',')[1]))
+        cy.wrap(manifest).as('manifest')
+      })
+
+    table.forEach((row) => {
+      cy.get('@manifest').should('include', {
+        [row.key]: row.value
+      })
+    })
+  }
+)
+
+Then(
+  'the sites manifest should include the following icons',
+  (dataTable: DataTable) => {
+    const table = dataTable.hashes()
+
+    cy.get('link[rel="manifest"]')
+      .invoke('attr', 'href')
+      .then((href) => {
+        const manifest = JSON.parse(decodeURIComponent(href.split(',')[1]))
+        cy.wrap(manifest).as('manifest')
+      })
+
+    table.forEach((row) => {
+      cy.get('@manifest').its('icons').should('deep.include', {
+        src: row.url,
+        sizes: row.sizes
+      })
+    })
+  }
+)