refactor(@dpc-sdp/nuxt-ripple): make image fallback to existing site …

…assets, use merged theme

packages/nuxt-ripple/components/TideBaseLayout.vue

@@ -170,8 +170,8 @@ const footerNav = computed(() => {
  */
 await nuxtApp.callHook('tide:page', props)
 
-useTideSiteTheme(props.site)
+const theme = useTideSiteTheme(props.site)
 useTideHideAlerts()
 useTideSiteMeta(props, nuxtApp?.$app_origin)
-useTideFavicons(props.site)
+useTideFavicons(props.site, theme)
 </script>

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

@@ -1,23 +1,21 @@
 import { TideSiteData } from '../types'
 
-export default (site: TideSiteData) => {
-  const theme = useAppConfig()?.ripple?.theme
+export default (site: TideSiteData, theme: any) => {
   const { public: config } = useRuntimeConfig()
 
   let link = []
-  const favicon = site.favicon?.src ?? '/favicon.png'
-  const appIcon = site.appIcon?.src ?? '/app-icon.png'
+  const siteUrl = config?.siteUrl || ''
   const themeColour = theme?.['rpl-clr-primary'] ?? '#ffffff'
 
   const manifest = {
-    id: config?.siteUrl,
+    id: siteUrl,
     name: site?.name,
     short_name: site?.shortName,
     description: site?.slogan?.replace(/<[^>]*>/g, ''),
-    start_url: config?.siteUrl,
+    start_url: siteUrl,
     icons: [
       {
-        src: appIcon,
+        src: site.appIcon?.src ?? siteUrl + (site.appIcon?.android || ''),
         sizes: 'any'
       }
     ],
@@ -28,7 +26,7 @@ export default (site: TideSiteData) => {
 
   link.push({
     rel: 'apple-touch-icon',
-    href: appIcon
+    href: site.appIcon?.src ?? site.appIcon?.apple
   })
 
   link.push({
@@ -38,7 +36,7 @@ export default (site: TideSiteData) => {
 
   link.push({
     rel: 'icon',
-    href: favicon
+    href: site.favicon?.src
   })
 
   useHead({ link, meta: [{ name: 'theme-color', content: themeColour }] })

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

@@ -22,4 +22,6 @@ export default (site) => {
       ]
     })
   }
+
+  return siteTheme
 }

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

@@ -20,8 +20,13 @@ export default {
       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'),
+    favicon: (src: any) =>
+      getImageFromField(src, 'field_site_favicon', { src: '/favicon.ico' }),
+    appIcon: (src: any) =>
+      getImageFromField(src, 'field_site_app_icon', {
+        apple: '/apple-touch-icon.png',
+        android: '/android-chrome-512x512.png'
+      }),
     siteLogo: (src: any) => {
       if (src.field_site_logo) {
         return {

packages/nuxt-ripple/types.d.ts

@@ -29,9 +29,9 @@ export interface TideSiteData {
     height: string
   }
   appIcon?: {
-    src: string
-    width: string
-    height: string
+    src?: string
+    apple?: string
+    android?: string
   }
   acknowledgementHeader?: string
   acknowledgementFooter: string

packages/ripple-tide-api/src/utils/mapping-utils.ts

@@ -56,10 +56,11 @@ export const removeDomainFromPath = (path: string) =>
 
 export const getImageFromField = (
   field: object,
-  path: string | string[]
+  path: string | string[],
+  fallback: any = null
 ): TideImageField | null => {
   const image = get(field, path)
-  return image ? getMediaImage(image) : null
+  return image ? getMediaImage(image) : fallback
 }
 
 export const getCardImageFromField = (

packages/ripple-tide-api/types.d.ts

@@ -312,7 +312,8 @@ export function getField(
 ): any
 export function getImageFromField(
   field: string,
-  path: string | string[]
+  path: string | string[],
+  fallback?: any
 ): string
 export function getLinkFromField(field: any, path: string | string[]): any
 export function humanizeFilesize(fileSize: number): string