Merge branch 'develop' into feat/sdp-core

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

@@ -1,6 +1,7 @@
 import {
   getImageFromField,
   getBody,
+  getMediaPath,
   getLinkFromField,
   getSiteKeyValues,
   TideSiteApi
@@ -21,9 +22,9 @@ export default {
       if (src.field_site_logo) {
         return {
           href: '/',
-          src: src.field_site_logo.url,
+          src: getMediaPath(src, 'field_site_logo'),
           altText: src.field_site_logo.meta?.alt,
-          printSrc: getImageFromField(src, 'field_print_friendly_logo')?.src
+          printSrc: getMediaPath(src, 'field_print_friendly_logo')
         }
       }
 

packages/ripple-tide-api/src/index.ts

@@ -5,6 +5,7 @@ export { default as TideSiteApi } from './services/tide-site.js'
 export { default as logger } from './logger/logger.js'
 export * from './utils/createHandler.js'
 export { stripSiteId } from './utils/stripSiteId.js'
+export { stripMediaBaseUrl } from './utils/stripMediaBaseUrl.js'
 
 export {
   addAnchorLinksToHTML,

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

@@ -1 +1,2 @@
 export { getDpcPkgs } from './utils/index.js'
+export { stripMediaBaseUrl } from './utils/stripMediaBaseUrl.js'

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

@@ -1,6 +1,5 @@
 import { expect, describe } from '@jest/globals'
 import {
-  removeDomainFromPath,
   getImageFromField,
   getCardImageFromField,
   getLinkFromField,
@@ -129,7 +128,7 @@ const field = {
       y: 50
     },
     height: 700,
-    src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg',
+    src: '/sites/default/files/tide_demo_content/Melbourne-tram.jpg',
     title: 'Demo: Melbourne tram',
     width: 900
   },
@@ -140,18 +139,12 @@ const field = {
       y: 300
     },
     height: 785,
-    src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg',
+    src: '/sites/default/files/tide_demo_content/Melbourne-tram.jpg',
     title: 'Demo: Melbourne tram',
     width: 1413
   }
 
 describe('ripple-tide-api/mapping utils', () => {
-  it(`removes domain from a given path`, () => {
-    expect(
-      removeDomainFromPath('https://domain.com/sites/default/files')
-    ).toEqual('/sites/default/files')
-  })
-
   it(`processes api field data for images`, () => {
     expect(getImageFromField(field, 'field_media_image')).toEqual(processedImg)
   })

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

@@ -1,7 +1,8 @@
 import { get } from 'lodash-es'
-import { TideImageField, TideUrlField } from '../../types'
+import { TideImageField, TideUrlField, TideDocumentField } from '../../types'
 import markupTranspiler from './markup-transpiler/index.js'
-import normaliseImageUrl from './normaliseImageUrl.js'
+import { stripMediaBaseUrl } from './stripMediaBaseUrl.js'
+import mime from 'mime-types'
 
 export type drupalField = Record<string, any>
 
@@ -46,13 +47,21 @@ type tidePageSitePartial = {
   ]
 }
 
-/**
- * @deprecated Need to make a decision on whether we proxy images or use direct url
- */
-export const removeDomainFromPath = (path: string) =>
-  typeof path === 'string' && path.length > 0
-    ? path.replace(/^.*(?=(\/sites\/default\/files))/, '')
-    : path
+export const getMediaPath = (field: any, path?: string | string[]): string => {
+  let uri = ''
+
+  if (path) {
+    field = get(field, path)
+  }
+
+  if (!field?.uri) {
+    uri = field?.url
+  } else {
+    uri = field?.uri?.url || field?.uri
+  }
+
+  return stripMediaBaseUrl(uri, process.env.NUXT_PUBLIC_TIDE_BASE_URL as string)
+}
 
 export const getImageFromField = (
   field: object,
@@ -84,10 +93,7 @@ export const getMediaImage = (
   }
 
   return {
-    src: normaliseImageUrl(
-      process.env.NUXT_PUBLIC_TIDE_BASE_URL as string,
-      fieldMediaImage.url
-    ),
+    src: getMediaPath(fieldMediaImage),
     ...fieldMediaImage.meta,
     focalPoint
   }
@@ -104,10 +110,7 @@ export const getCardImage = (fieldMediaImage: RawCardImage): TideImageField => {
     : null
 
   return {
-    src: normaliseImageUrl(
-      process.env.NUXT_PUBLIC_TIDE_BASE_URL as string,
-      fieldMediaImage.url
-    ),
+    src: getMediaPath(fieldMediaImage),
     focalPoint,
     alt: data?.alt,
     width: data?.width ? parseInt(data.width) : undefined,
@@ -116,6 +119,21 @@ export const getCardImage = (fieldMediaImage: RawCardImage): TideImageField => {
   }
 }
 
+export const getDocumentFromField = (
+  field: drupalField,
+  path = 'field_media_file'
+): TideDocumentField => {
+  const medaFile = get(field, path)
+
+  return {
+    id: field.id,
+    name: field.name,
+    url: getMediaPath(medaFile),
+    extension: mime.extension(medaFile.filemime) || '',
+    size: humanizeFilesize(medaFile.filesize)
+  }
+}
+
 export const getLinkFromField = (
   field: drupalField,
   path?: string | string[]
@@ -229,6 +247,8 @@ export default {
   getBodyFromField,
   humanizeFilesize,
   getField,
+  getMediaPath,
+  getDocumentFromField,
   getSiteKeyValues,
   getSiteSection
 }

packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts

@@ -11,9 +11,9 @@ const markup = {
   callout: `<div class="callout-wrapper"><p>Hey it's a callout</p></div><div class="callout-wrapper"><p>And another callout</p></div>
 <div class="wysiwyg-callout">This one is wysiwyg</div>`,
   quotation: `<blockquote class="quotation"><p>It was the best of times, it was the blurst of times.</p><footer><span>Chimp 273</span></footer></blockquote>`,
-  document: `<div class="embedded-entity--media--file" data-last-updated="1704932250"><a class="file file--mime-application-zip" href="https://example.com/file.zip">File</a></div>`,
+  document: `<div class="embedded-entity--media--file" data-last-updated="1704932250"><a class="file file--mime-application-zip" href="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/file.zip">File</a></div>`,
   video: `<figure class="embedded-entity--media--embedded-video"><iframe src="https://www.youtube.com/embed/1234" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe><figcaption>Caption goes here</figcaption</figure>`,
-  image: `<div class="embedded-entity--media--image"><img src="https://example.com/image.jpg" alt="Image" title="Image" width="100" height="100"></div>`,
+  image: `<div class="embedded-entity--media--image"><img src="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/image.jpg" alt="Image" title="Image" width="100" height="100"></div>`,
   button: `<a class="button" href="https://example.com">Button</a>`,
   link: `<a href="https://example.com" target="_blank">Link</a>`,
   list: `<ul type="disc"><li>List item</li></ul><ul type="circle"><li>List item</li></ul><ul type="square"><li>List item</li></ul><ol type="i"><li>List item</li></ol><ol type="I"><li>List item</li></ol><ol type="a"><li>List item</li></ol><ol type="A"><li>List item</li></ol>`,
@@ -37,7 +37,7 @@ const fixed = {
 `,
   document: `
 <figure class="rpl-document">
-  <a class="rpl-document__link rpl-u-focusable-within" aria-label="undefined" href="https://example.com/file.zip" target="_blank">
+  <a class="rpl-document__link rpl-u-focusable-within" aria-label="undefined" href="/sites/default/files/file.zip" target="_blank">
     <span class="rpl-document__icon rpl-icon rpl-icon--size-l rpl-icon--colour-default rpl-icon--icon-document-lined">
       <svg role="presentation"><use xlink:href="#icon-document-lined"></use></svg>
     </span>
@@ -66,7 +66,7 @@ const fixed = {
 
 </div>
 `,
-  image: `<figure><img src="https://example.com/image.jpg" class="rpl-img" width="100" alt="Image" srcset="https://example.com/image.jpg?width=720, https://example.com/image.jpg?width=1440 2x"></figure>`,
+  image: `<figure><img src="/sites/default/files/image.jpg" class="rpl-img" width="100" alt="Image" srcset="/sites/default/files/image.jpg?width=720, /sites/default/files/image.jpg?width=1440 2x"></figure>`,
   button: `<a class="rpl-button rpl-button--default rpl-u-focusable-block rpl-button--filled" href="https://example.com"><span class="rpl-button__label rpl-type-label rpl-type-weight-bold">Button</span></a>`,
   link: `<a href="https://example.com" target="_blank" class="rpl-text-link rpl-u-focusable-inline">Link<span class="rpl-u-visually-hidden">(opens in a new window)</span></a>`,
   list: `<ul class="rpl-type-list-ul--disc"><li>List item</li></ul><ul class="rpl-type-list-ul--disc"><li>List item</li></ul><ul class="rpl-type-list-ul--square"><li>List item</li></ul><ol class="rpl-type-list-ol--lower-roman"><li>List item</li></ol><ol class="rpl-type-list-ol--upper-roman"><li>List item</li></ol><ol class="rpl-type-list-ol--lower-latin"><li>List item</li></ol><ol class="rpl-type-list-ol--upper-latin"><li>List item</li></ol>`,

packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts

@@ -1,4 +1,5 @@
 import { epochToDate } from '../epochToDate.js'
+import { stripMediaBaseUrl } from '../stripMediaBaseUrl.js'
 
 const pluginTables = function (this: any) {
   // Wrap tables with a div.
@@ -86,7 +87,10 @@ const pluginDocuments = function (this: any) {
       mediaType === 'document' ? '.file--title' : '.field--name-name'
 
     const label = $element.find('a[aria-label]').attr('aria-label'),
-      link = $element.find('a').attr('href'),
+      link = stripMediaBaseUrl(
+        $element.find('a').attr('href'),
+        process.env.NUXT_PUBLIC_TIDE_BASE_URL as string
+      ),
       title = $element.find(titleSelector).text(),
       fileSize = $element.find('.file--size').text(),
       updated = $element.attr('data-last-updated')
@@ -189,7 +193,10 @@ const pluginImages = function (this: any) {
   this.find('.embedded-entity--media--image').map((i: any, el: any) => {
     const $img = this.find(el).find('img')
     const width = $img.attr('width')
-    const src = $img.attr('src')
+    const src = stripMediaBaseUrl(
+      $img.attr('src'),
+      process.env.NUXT_PUBLIC_TIDE_BASE_URL as string
+    )
     const alt = $img.attr('alt')
     const $caption = this.find(el)
       .find('div.field--name-field-media-caption')

packages/ripple-tide-api/src/utils/stripMediaBaseUrl.test.ts

@@ -0,0 +1,57 @@
+import { expect, describe, it } from '@jest/globals'
+
+import stripMediaBaseUrl from './stripMediaBaseUrl.js'
+
+describe('stripMediaBaseUrl(url, baseUrl)', () => {
+  it('strips the supplied baseUrl from the main url', () => {
+    expect(
+      stripMediaBaseUrl(
+        'https://example.com/sites/default/files/wow/cool.jpg?some=param',
+        'https://example.com'
+      )
+    ).toEqual('/sites/default/files/wow/cool.jpg?some=param')
+
+    expect(
+      stripMediaBaseUrl(
+        'https://example.com/sites/default/files/wow/cool.jpg?some=param',
+        'https://example.com/'
+      )
+    ).toEqual('/sites/default/files/wow/cool.jpg?some=param')
+  })
+
+  it('does not change a url if it points to an external domain', () => {
+    expect(
+      stripMediaBaseUrl(
+        'https://example.com/sites/default/files/wow/cool.jpg?some=param',
+        'https://google.com'
+      )
+    ).toEqual('https://example.com/sites/default/files/wow/cool.jpg?some=param')
+  })
+
+  it('leaves relative URLs unchanged if the domains differ', () => {
+    expect(
+      stripMediaBaseUrl(
+        'https://example.com/sites/default/files/wow/cool.jpg?some=param',
+        'https://google.com'
+      )
+    ).toEqual('https://example.com/sites/default/files/wow/cool.jpg?some=param')
+  })
+
+  it('leaves relative URLs unchanged if no baseUrl is passed', () => {
+    expect(
+      stripMediaBaseUrl(
+        'https://example.com/sites/default/files/wow/cool.jpg?some=param',
+        ''
+      )
+    ).toEqual('https://example.com/sites/default/files/wow/cool.jpg?some=param')
+  })
+
+  it('only strips the base URL for media files matching sites/default/files', () => {
+    expect(
+      stripMediaBaseUrl(
+        'https://example.com/sites/tmp/files/wow/cool.jpg',
+        'https://example.com'
+      )
+    ).toEqual('https://example.com/sites/tmp/files/wow/cool.jpg')
+  })
+})

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

@@ -0,0 +1,13 @@
+export function stripMediaBaseUrl(url: string, baseUrl: string): string {
+  if (!url || typeof url !== 'string' || typeof baseUrl !== 'string') {
+    return url
+  }
+
+  if (!url.includes('/sites/default/files/')) {
+    return url
+  }
+
+  return url.replace(baseUrl.replace(/\/$/, ''), '')
+}
+
+export default stripMediaBaseUrl

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

@@ -84,6 +84,14 @@ export interface TideImageField {
   }
 }
 
+export type TideDocumentField = {
+  name: string
+  url: string
+  extension: string
+  size: string
+  id: string
+}
+
 export interface TidePageBase {
   title: string
   created: string

packages/ripple-tide-grant/mapping/index.ts

@@ -1,10 +1,9 @@
-import mime from 'mime-types'
 import {
   getBodyFromField,
   getField,
   getImageFromField,
   getLinkFromField,
-  humanizeFilesize
+  getDocumentFromField
 } from '@dpc-sdp/ripple-tide-api'
 import {
   tidePageBaseMapping,
@@ -89,13 +88,9 @@ const tideGrantModule: IRplTideModuleMapping = {
         }))
     },
     documents: (src: string) =>
-      getField(src, 'field_node_documents').map((doc: any) => ({
-        name: doc.name,
-        url: doc.field_media_file.url || doc.field_media_file.uri,
-        extension: mime.extension(doc.field_media_file.filemime),
-        size: humanizeFilesize(doc.field_media_file.filesize),
-        id: doc.id
-      })),
+      getField(src, 'field_node_documents').map((doc: any) =>
+        getDocumentFromField(doc)
+      ),
     sidebarComponents: ['RplSocialShare']
   },
   includes: [

packages/ripple-tide-landing-page/components/global/TideLandingPage/ContentCollection.vue

@@ -55,6 +55,7 @@ import {
   IContentCollectionSort
 } from '../../../mapping/components/content-collection/content-collection-mapping'
 import type { IRplFeatureFlags } from '@dpc-sdp/ripple-tide-api/types'
+import { stripMediaBaseUrl } from '@dpc-sdp/ripple-tide-api/utils'
 
 const { public: config } = useRuntimeConfig()
 
@@ -88,7 +89,7 @@ const cardClasses = computed(() =>
 )
 
 const searchResultsMappingFn = (item): any => {
-  const { $app_origin } = useNuxtApp()
+  const { $app_origin, $config } = useNuxtApp()
   const rawUpdated = item.changed?.raw?.[0]
   const rawImage = item.field_media_image_absolute_path?.raw?.[0]
 
@@ -100,7 +101,7 @@ const searchResultsMappingFn = (item): any => {
       url: stripSiteId(item.url?.raw?.[0], $app_origin || ''),
       image:
         props.display.style === 'thumbnail' && rawImage
-          ? { src: rawImage }
+          ? { src: stripMediaBaseUrl(rawImage, $config.public?.tide?.baseUrl) }
           : null,
       updated: rawUpdated ? formatDate(rawUpdated) : '',
       type: item.type?.raw?.[0]