diff --git a/packages/nuxt-ripple/mapping/site/index.ts b/packages/nuxt-ripple/mapping/site/index.ts index 595cd8945a..ecd7b72582 100644 --- a/packages/nuxt-ripple/mapping/site/index.ts +++ b/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') } } diff --git a/packages/ripple-tide-api/src/index.ts b/packages/ripple-tide-api/src/index.ts index 4dccd3e154..c660fb64eb 100644 --- a/packages/ripple-tide-api/src/index.ts +++ b/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, diff --git a/packages/ripple-tide-api/src/utils.ts b/packages/ripple-tide-api/src/utils.ts index 14b5091754..82ee8f5c48 100644 --- a/packages/ripple-tide-api/src/utils.ts +++ b/packages/ripple-tide-api/src/utils.ts @@ -1 +1,2 @@ export { getDpcPkgs } from './utils/index.js' +export { stripMediaBaseUrl } from './utils/stripMediaBaseUrl.js' diff --git a/packages/ripple-tide-api/src/utils/mapping-utils.test.ts b/packages/ripple-tide-api/src/utils/mapping-utils.test.ts index 2f05d547a3..cc2bb58569 100644 --- a/packages/ripple-tide-api/src/utils/mapping-utils.test.ts +++ b/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) }) diff --git a/packages/ripple-tide-api/src/utils/mapping-utils.ts b/packages/ripple-tide-api/src/utils/mapping-utils.ts index b1a482b18d..35c1180c60 100644 --- a/packages/ripple-tide-api/src/utils/mapping-utils.ts +++ b/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 @@ -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 } diff --git a/packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts b/packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts index efe429a73b..333e897ffc 100644 --- a/packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts +++ b/packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts @@ -11,9 +11,9 @@ const markup = { callout: `

Hey it's a callout

And another callout

This one is wysiwyg
`, quotation: `

It was the best of times, it was the blurst of times.

Chimp 273
`, - document: `
File
`, + document: `
File
`, video: `
Caption goes here`, - image: `
Image
`, + image: `
Image
`, button: `Button`, link: `Link`, list: `
  • List item
  • List item
  • List item
  1. List item
  1. List item
  1. List item
  1. List item
`, @@ -37,7 +37,7 @@ const fixed = { `, document: `
- + @@ -66,7 +66,7 @@ const fixed = { `, - image: `
Image
`, + image: `
Image
`, button: `
Button`, link: `Link(opens in a new window)`, list: `
  • List item
  • List item
  • List item
  1. List item
  1. List item
  1. List item
  1. List item
`, diff --git a/packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts b/packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts index c3ca1c183e..a0ea97bf97 100644 --- a/packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts +++ b/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') diff --git a/packages/ripple-tide-api/src/utils/stripMediaBaseUrl.test.ts b/packages/ripple-tide-api/src/utils/stripMediaBaseUrl.test.ts new file mode 100644 index 0000000000..559f3d130c --- /dev/null +++ b/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') + }) +}) diff --git a/packages/ripple-tide-api/src/utils/stripMediaBaseUrl.ts b/packages/ripple-tide-api/src/utils/stripMediaBaseUrl.ts new file mode 100644 index 0000000000..bc4225e59b --- /dev/null +++ b/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 diff --git a/packages/ripple-tide-api/types.d.ts b/packages/ripple-tide-api/types.d.ts index d185e7c0be..c80ca213e7 100644 --- a/packages/ripple-tide-api/types.d.ts +++ b/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 diff --git a/packages/ripple-tide-grant/mapping/index.ts b/packages/ripple-tide-grant/mapping/index.ts index 618a39b7de..c97809b310 100644 --- a/packages/ripple-tide-grant/mapping/index.ts +++ b/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: [ diff --git a/packages/ripple-tide-landing-page/components/global/TideLandingPage/ContentCollection.vue b/packages/ripple-tide-landing-page/components/global/TideLandingPage/ContentCollection.vue index 41fd1dac2e..bdfe1653ee 100644 --- a/packages/ripple-tide-landing-page/components/global/TideLandingPage/ContentCollection.vue +++ b/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] diff --git a/packages/ripple-tide-landing-page/mapping/components/basic-text/basic-text-mapping.test.ts b/packages/ripple-tide-landing-page/mapping/components/basic-text/basic-text-mapping.test.ts index e66a7884f2..58a89a0a1c 100644 --- a/packages/ripple-tide-landing-page/mapping/components/basic-text/basic-text-mapping.test.ts +++ b/packages/ripple-tide-landing-page/mapping/components/basic-text/basic-text-mapping.test.ts @@ -52,7 +52,7 @@ const result: TideDynamicPageComponent = { } ], props: { - html: '

Nulla ultricies dignissim leo & posuere vestibulum erat cursus vitae

\n

Phasellus congue aliquam vehicula

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus. Quisque nec congue ligula, vitae condimentum tellus. Nulla nec urna augue. Curabitur commodo nisi est, eu pulvinar tortor cursus vel. Morbi dictum ex est, et semper diam finibus eu. Cras rutrum, nunc a fringilla convallis, massa est vulputate velit, in blandit augue dui vitae elit. Donec hendrerit commodo augue, in maximus orci tempor congue. Mauris ultricies euismod orci, nec vehicula quam vehicula ac. Nunc dictum tortor dolor, nec eleifend orci luctus sed.

\n

Donec scelerisque cursus ex varius efficitur

\n

Lorem ipsum dolor sit amet

\n

Morbi cursus placerat mi

\n
Nullam laoreet ante placerat
\n

Integer interdum nisl ut neque dictum, et sagittis metus feugiat. Sed in mattis neque. Duis at risus non ipsum semper dapibus. Sed enim sapien, molestie sed commodo vel, lacinia vitae risus. Proin sagittis diam nisi, sed rhoncus diam varius id. Sed malesuada felis tortor, scelerisque pretium elit tempor non. Pellentesque ultrices volutpat tincidunt. Fusce quis viverra urna, quis finibus nulla.

\n\n
\n
\n

Mauris tincidunt tincidunt felis vel tempus. Vestibulum rhoncus blandit justo quis finibus. Phasellus lacus lectus, sollicitudin sed posuere non, ultricies ut quam.

\n
\n
Duis ligula lacusPhasellus est turpis, efficitur nec odio imperdiet
\n
\n\nMauris tincidunt tincidunt felis vel tempus\n
Demo: Melbourne tram
\n

Phasellus in varius leo. Suspendisse potenti. Donec scelerisque cursus ex varius efficitur. Vivamus pretium nisi sed libero accumsan mattis. Duis convallis, velit eget varius tempus, orci erat aliquam sem, eget porta mauris nisl at mauris.

\n\n
\n \n \n \n \n
\n Demo Sample Document\n
\n Word\n 7.53 KB\n
\n
\n (opens in a new window)\n
\n
\n\n' + html: '

Nulla ultricies dignissim leo & posuere vestibulum erat cursus vitae

\n

Phasellus congue aliquam vehicula

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus. Quisque nec congue ligula, vitae condimentum tellus. Nulla nec urna augue. Curabitur commodo nisi est, eu pulvinar tortor cursus vel. Morbi dictum ex est, et semper diam finibus eu. Cras rutrum, nunc a fringilla convallis, massa est vulputate velit, in blandit augue dui vitae elit. Donec hendrerit commodo augue, in maximus orci tempor congue. Mauris ultricies euismod orci, nec vehicula quam vehicula ac. Nunc dictum tortor dolor, nec eleifend orci luctus sed.

\n

Donec scelerisque cursus ex varius efficitur

\n

Lorem ipsum dolor sit amet

\n

Morbi cursus placerat mi

\n
Nullam laoreet ante placerat
\n

Integer interdum nisl ut neque dictum, et sagittis metus feugiat. Sed in mattis neque. Duis at risus non ipsum semper dapibus. Sed enim sapien, molestie sed commodo vel, lacinia vitae risus. Proin sagittis diam nisi, sed rhoncus diam varius id. Sed malesuada felis tortor, scelerisque pretium elit tempor non. Pellentesque ultrices volutpat tincidunt. Fusce quis viverra urna, quis finibus nulla.

\n\n
\n
\n

Mauris tincidunt tincidunt felis vel tempus. Vestibulum rhoncus blandit justo quis finibus. Phasellus lacus lectus, sollicitudin sed posuere non, ultricies ut quam.

\n
\n
Duis ligula lacusPhasellus est turpis, efficitur nec odio imperdiet
\n
\n\nMauris tincidunt tincidunt felis vel tempus\n
Demo: Melbourne tram
\n

Phasellus in varius leo. Suspendisse potenti. Donec scelerisque cursus ex varius efficitur. Vivamus pretium nisi sed libero accumsan mattis. Duis convallis, velit eget varius tempus, orci erat aliquam sem, eget porta mauris nisl at mauris.

\n\n
\n \n \n \n \n
\n Demo Sample Document\n
\n Word\n 7.53 KB\n
\n
\n (opens in a new window)\n
\n
\n\n' } } diff --git a/packages/ripple-tide-landing-page/mapping/components/card-carousel/card-carousel-mapping.test.ts b/packages/ripple-tide-landing-page/mapping/components/card-carousel/card-carousel-mapping.test.ts index edd9e1ee16..e3d7862ff1 100644 --- a/packages/ripple-tide-landing-page/mapping/components/card-carousel/card-carousel-mapping.test.ts +++ b/packages/ripple-tide-landing-page/mapping/components/card-carousel/card-carousel-mapping.test.ts @@ -16,7 +16,7 @@ describe('cardCarouselMapping', () => { alt: 'Demo: Aerial shot of new housing development', focalPoint: undefined, height: 571, - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg', + src: '/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg', title: 'Demo: Aerial shot of new housing development', width: 1024 }, @@ -35,7 +35,7 @@ describe('cardCarouselMapping', () => { alt: 'Demo: Melbourne tram', focalPoint: undefined, 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 }, @@ -72,7 +72,7 @@ describe('cardCarouselMapping', () => { alt: 'Demo: Engage Vic Hero', focalPoint: undefined, height: 500, - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Engage-Vic-photo-hero.jpeg', + src: '/sites/default/files/tide_demo_content/Engage-Vic-photo-hero.jpeg', title: 'Engage Vic', width: 737 }, @@ -90,7 +90,7 @@ describe('cardCarouselMapping', () => { alt: 'Demo: Melbourne tram', focalPoint: undefined, 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 }, @@ -117,7 +117,7 @@ describe('cardCarouselMapping', () => { alt: 'Demo: Melbourne tram', focalPoint: undefined, 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 }, @@ -148,7 +148,7 @@ describe('cardCarouselMapping', () => { alt: 'Demo: 2018-19 State Budget', focalPoint: undefined, height: 270, - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg', + src: '/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg', title: 'Demo: 2018-19 State Budget', width: 450 }, @@ -188,7 +188,7 @@ describe('cardCarouselMapping', () => { alt: 'Demo: 2018-19 State Budget', focalPoint: undefined, height: 270, - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg', + src: '/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg', title: 'Demo: 2018-19 State Budget', width: 450 }, @@ -206,7 +206,7 @@ describe('cardCarouselMapping', () => { alt: 'Demo: 2018-19 State Budget', focalPoint: undefined, height: 270, - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg', + src: '/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg', title: 'Demo: 2018-19 State Budget', width: 450 }, @@ -253,7 +253,7 @@ describe('cardCarouselMapping', () => { alt: 'Demo: Melbourne tram', focalPoint: undefined, 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 }, @@ -273,7 +273,7 @@ describe('cardCarouselMapping', () => { alt: 'Demo: Melbourne tram', focalPoint: undefined, 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 }, @@ -293,7 +293,7 @@ describe('cardCarouselMapping', () => { alt: 'Demo: Roulette aerial display', focalPoint: undefined, height: 496, - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/roulette-aerial-display-card.jpg', + src: '/sites/default/files/tide_demo_content/roulette-aerial-display-card.jpg', title: 'Demo: Roulette aerial display', width: 818 }, diff --git a/packages/ripple-tide-landing-page/mapping/components/compact-cards/compact-cards-mapping.test.ts b/packages/ripple-tide-landing-page/mapping/components/compact-cards/compact-cards-mapping.test.ts index f7cf411712..d9c4720f86 100644 --- a/packages/ripple-tide-landing-page/mapping/components/compact-cards/compact-cards-mapping.test.ts +++ b/packages/ripple-tide-landing-page/mapping/components/compact-cards/compact-cards-mapping.test.ts @@ -13,7 +13,7 @@ const result: TideDynamicPageComponent = { title: 'Card one', summary: 'Card one summary', image: { - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/2023-08/Image2.jpg', + src: '/sites/default/files/2023-08/Image2.jpg', alt: '', focalPoint: undefined, height: 667, diff --git a/packages/ripple-tide-landing-page/mapping/components/complex-image/complex-image-mapping.test.ts b/packages/ripple-tide-landing-page/mapping/components/complex-image/complex-image-mapping.test.ts index 13cb68f2a4..cc0d10b99a 100644 --- a/packages/ripple-tide-landing-page/mapping/components/complex-image/complex-image-mapping.test.ts +++ b/packages/ripple-tide-landing-page/mapping/components/complex-image/complex-image-mapping.test.ts @@ -11,9 +11,9 @@ const result: TideDynamicPageComponent = { sourceCaption: 'Complex Image Source', dataContent: '

Image Data

', dataLabel: 'Complex Image Additional data', - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg', + src: '/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg', downloadUrl: - 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg', + '/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg', downloadLabel: 'Complex Image Download', type: 'image', variant: 'complex', diff --git a/packages/ripple-tide-landing-page/mapping/components/complex-image/complex-image-mapping.ts b/packages/ripple-tide-landing-page/mapping/components/complex-image/complex-image-mapping.ts index 6713cc882e..5a968527ef 100644 --- a/packages/ripple-tide-landing-page/mapping/components/complex-image/complex-image-mapping.ts +++ b/packages/ripple-tide-landing-page/mapping/components/complex-image/complex-image-mapping.ts @@ -1,4 +1,4 @@ -import { getBody } from '@dpc-sdp/ripple-tide-api' +import { getBody, getMediaPath } from '@dpc-sdp/ripple-tide-api' import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types' export interface ITideComplexImage { @@ -25,11 +25,13 @@ export const complexImageMapping = ( props: { title: field.field_complex_image_title, sourceCaption: field.field_complex_image_source, - src: field.field_complex_image_media.field_media_image.url, + src: getMediaPath(field.field_complex_image_media.field_media_image), dataLabel: field.field_complex_image_data_label, dataContent: getBody(field.field_complex_image_data?.processed), fullscreenLabel: field.field_complex_image_full_label, - downloadUrl: field.field_complex_image_media.field_media_image.url, + downloadUrl: getMediaPath( + field.field_complex_image_media.field_media_image + ), downloadLabel: field.field_complex_image_dl_label, type: 'image', variant: 'complex', diff --git a/packages/ripple-tide-landing-page/mapping/components/media-gallery/media-gallery-mapping.test.ts b/packages/ripple-tide-landing-page/mapping/components/media-gallery/media-gallery-mapping.test.ts index 074679b1f1..29e02d8ca2 100644 --- a/packages/ripple-tide-landing-page/mapping/components/media-gallery/media-gallery-mapping.test.ts +++ b/packages/ripple-tide-landing-page/mapping/components/media-gallery/media-gallery-mapping.test.ts @@ -17,45 +17,44 @@ describe('mediaGalleryMapping', () => { caption: '2018-19 State Budget caption', alt: 'Demo: 2018-19 State Budget', thumbnail: - 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg', + '/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg', image: - 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg' + '/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg' }, { title: 'Demo: Aerial shot of new housing development', caption: 'An aerial shot of new housing development caption', alt: 'Demo: Aerial shot of new housing development', thumbnail: - 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg', + '/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg', image: - 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg' + '/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg' }, { title: 'Demo: Bendigo Hospital', caption: null, alt: 'Demo: Bendigo Hospital', thumbnail: - 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Bendigo-Hospital.jpg', - image: - 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Bendigo-Hospital.jpg' + '/sites/default/files/tide_demo_content/Bendigo-Hospital.jpg', + image: '/sites/default/files/tide_demo_content/Bendigo-Hospital.jpg' }, { title: 'Demo: Covid Primary Campaign', caption: null, alt: 'Demo: Covid Primary Campaign', thumbnail: - 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/covid_primarycampaign.png', + '/sites/default/files/tide_demo_content/covid_primarycampaign.png', image: - 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/covid_primarycampaign.png' + '/sites/default/files/tide_demo_content/covid_primarycampaign.png' }, { title: 'Demo: Engage Vic Hero', caption: null, alt: 'Demo: Engage Vic Hero', thumbnail: - 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Engage-Vic-photo-hero.jpeg', + '/sites/default/files/tide_demo_content/Engage-Vic-photo-hero.jpeg', image: - 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Engage-Vic-photo-hero.jpeg' + '/sites/default/files/tide_demo_content/Engage-Vic-photo-hero.jpeg' } ] } diff --git a/packages/ripple-tide-landing-page/mapping/components/media-gallery/media-gallery-mapping.ts b/packages/ripple-tide-landing-page/mapping/components/media-gallery/media-gallery-mapping.ts index 0012572d71..b3aadd76ab 100644 --- a/packages/ripple-tide-landing-page/mapping/components/media-gallery/media-gallery-mapping.ts +++ b/packages/ripple-tide-landing-page/mapping/components/media-gallery/media-gallery-mapping.ts @@ -1,4 +1,5 @@ import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types' +import { getMediaPath } from '@dpc-sdp/ripple-tide-api' export interface ITideMediaGallery { id: string @@ -25,9 +26,8 @@ export const mediaGalleryMapping = ( title: item.name, caption: item.field_media_caption, alt: item.field_media_image.meta.alt, - thumbnail: - item.field_media_image?.url || item.field_media_image.uri, - image: item.field_media_image?.url || item.field_media_image.uri + thumbnail: getMediaPath(item.field_media_image), + image: getMediaPath(item.field_media_image) } } ) diff --git a/packages/ripple-tide-landing-page/mapping/components/navigation-card/navigation-card-mapping.test.ts b/packages/ripple-tide-landing-page/mapping/components/navigation-card/navigation-card-mapping.test.ts index 4446ada096..191960c83d 100644 --- a/packages/ripple-tide-landing-page/mapping/components/navigation-card/navigation-card-mapping.test.ts +++ b/packages/ripple-tide-landing-page/mapping/components/navigation-card/navigation-card-mapping.test.ts @@ -79,7 +79,7 @@ describe('navigationCardMapping', () => { alt: 'Demo: Melbourne tram', focalPoint: undefined, 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 }, diff --git a/packages/ripple-tide-landing-page/mapping/components/promo-card/promo-card-mapping.test.ts b/packages/ripple-tide-landing-page/mapping/components/promo-card/promo-card-mapping.test.ts index 92f5544545..b498057acd 100644 --- a/packages/ripple-tide-landing-page/mapping/components/promo-card/promo-card-mapping.test.ts +++ b/packages/ripple-tide-landing-page/mapping/components/promo-card/promo-card-mapping.test.ts @@ -80,7 +80,7 @@ describe('navigationCardMapping', () => { alt: 'Demo: Melbourne tram', focalPoint: undefined, 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 }, diff --git a/packages/ripple-tide-landing-page/mapping/components/timeline/timeline-mapping.test.ts b/packages/ripple-tide-landing-page/mapping/components/timeline/timeline-mapping.test.ts index c7db001ea6..1e3fed0a60 100644 --- a/packages/ripple-tide-landing-page/mapping/components/timeline/timeline-mapping.test.ts +++ b/packages/ripple-tide-landing-page/mapping/components/timeline/timeline-mapping.test.ts @@ -375,7 +375,7 @@ describe('timelineMapping', () => { alt: 'Demo: Bendigo Hospital', focalPoint: undefined, height: 959, - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Bendigo-Hospital.jpg', + src: '/sites/default/files/tide_demo_content/Bendigo-Hospital.jpg', title: 'Demo: Bendigo Hospital.jpg', width: 1280 }, diff --git a/packages/ripple-tide-landing-page/mapping/hero-header/__test__/hero-header-mapping.test.ts b/packages/ripple-tide-landing-page/mapping/hero-header/__test__/hero-header-mapping.test.ts index fa816a03df..f63c300577 100644 --- a/packages/ripple-tide-landing-page/mapping/hero-header/__test__/hero-header-mapping.test.ts +++ b/packages/ripple-tide-landing-page/mapping/hero-header/__test__/hero-header-mapping.test.ts @@ -26,7 +26,7 @@ const result: TideHeroHeader = { }, theme: 'default', logoImage: { - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Parliament-of-Victoria.jpg', + src: '/sites/default/files/tide_demo_content/Parliament-of-Victoria.jpg', alt: 'Demo: Parliament of Victoria', title: 'Demo: Parliament of Victoria', width: 1650, @@ -35,14 +35,14 @@ const result: TideHeroHeader = { backgroundImage: null, backgroundImageCaption: '', cornerTop: { - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg', + src: '/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg', alt: 'Demo: Aerial shot of new housing development', title: 'Demo: Aerial shot of new housing development', width: 1024, height: 571 }, cornerBottom: { - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/VicFleet-Police-car-on-road.jpg', + src: '/sites/default/files/tide_demo_content/VicFleet-Police-car-on-road.jpg', alt: 'Demo: VicFleet - Police car on road', title: 'Demo: VicFleet - Police car on road', width: 1065, diff --git a/packages/ripple-tide-landing-page/mapping/primary-campaign/__test__/primary-campaign-mapping.test.ts b/packages/ripple-tide-landing-page/mapping/primary-campaign/__test__/primary-campaign-mapping.test.ts index 4a762df134..3adcc42fed 100644 --- a/packages/ripple-tide-landing-page/mapping/primary-campaign/__test__/primary-campaign-mapping.test.ts +++ b/packages/ripple-tide-landing-page/mapping/primary-campaign/__test__/primary-campaign-mapping.test.ts @@ -22,7 +22,7 @@ describe('primaryCampaignMapping', () => { url: 'https://www.vic.gov.au' }, image: { - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-skyline-at-dusk.jpg', + src: '/sites/default/files/tide_demo_content/Melbourne-skyline-at-dusk.jpg', alt: 'Demo: Melbourne skyline at dusk', title: 'Demo: Melbourne skyline at dusk', width: 2560, @@ -43,7 +43,7 @@ describe('primaryCampaignMapping', () => { url: 'https://www.vic.gov.au' }, image: { - src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-skyline-at-dusk.jpg', + src: '/sites/default/files/tide_demo_content/Melbourne-skyline-at-dusk.jpg', alt: 'Demo: Melbourne skyline at dusk', title: 'Demo: Melbourne skyline at dusk', width: 2560, diff --git a/packages/ripple-tide-landing-page/mapping/secondary-campaign/__test__/secondary-campaign-mapping.test.ts b/packages/ripple-tide-landing-page/mapping/secondary-campaign/__test__/secondary-campaign-mapping.test.ts index 4fc4868e3f..3f6550b652 100644 --- a/packages/ripple-tide-landing-page/mapping/secondary-campaign/__test__/secondary-campaign-mapping.test.ts +++ b/packages/ripple-tide-landing-page/mapping/secondary-campaign/__test__/secondary-campaign-mapping.test.ts @@ -18,7 +18,7 @@ describe('secondaryCampaignMapping', () => { url: 'https://www.vic.gov.au' }, image: { - 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', alt: 'Demo: Melbourne tram', title: 'Demo: Melbourne tram', width: 1413, diff --git a/packages/ripple-tide-landing-page/mapping/secondary-campaign/__test__/test-data.ts b/packages/ripple-tide-landing-page/mapping/secondary-campaign/__test__/test-data.ts index d69409af2f..94c90af0a7 100644 --- a/packages/ripple-tide-landing-page/mapping/secondary-campaign/__test__/test-data.ts +++ b/packages/ripple-tide-landing-page/mapping/secondary-campaign/__test__/test-data.ts @@ -370,7 +370,7 @@ export const testData = { filename: 'Melbourne-tram.jpg', uri: { value: 'public://tide_demo_content/Melbourne-tram.jpg', - url: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg' + url: '/sites/default/files/tide_demo_content/Melbourne-tram.jpg' }, filemime: 'image/jpeg', filesize: 176549, diff --git a/packages/ripple-tide-media/mapping/audio-mapping.ts b/packages/ripple-tide-media/mapping/audio-mapping.ts index b401f08909..849f4a25d4 100644 --- a/packages/ripple-tide-media/mapping/audio-mapping.ts +++ b/packages/ripple-tide-media/mapping/audio-mapping.ts @@ -1,12 +1,13 @@ import type { IRplTideModuleMapping } from '@dpc-sdp/ripple-tide-api/types' import { tideMediaBaseMapping, tideMediaBaseIncludes } from './media-mapping' +import { getMediaPath } from '@dpc-sdp/ripple-tide-api' const tideMediaAudioMapping: IRplTideModuleMapping = { mapping: { ...tideMediaBaseMapping, media: { ...tideMediaBaseMapping.media, - url: 'field_media_file.url' + url: (src: any) => getMediaPath(src.field_media_file) } }, includes: [...tideMediaBaseIncludes, 'field_media_file'] diff --git a/packages/ripple-tide-publication/mapping/publication-page.ts b/packages/ripple-tide-publication/mapping/publication-page.ts index de6ad8e94a..d8ffc1e92d 100644 --- a/packages/ripple-tide-publication/mapping/publication-page.ts +++ b/packages/ripple-tide-publication/mapping/publication-page.ts @@ -1,5 +1,4 @@ -import mime from 'mime-types' -import { getField, humanizeFilesize } from '@dpc-sdp/ripple-tide-api' +import { getField, getDocumentFromField } from '@dpc-sdp/ripple-tide-api' import { tidePageBaseMapping, tidePageBaseIncludes @@ -42,7 +41,7 @@ const tidePublicationPageModule: IRplTideModuleMapping = { text: 'publication_navigation_root.meta.title', url: 'publication_navigation_root.meta.url', id: 'publication_navigation_root.meta.id', - documents: (src) => + documents: (src: any) => ( getField( src, @@ -50,13 +49,7 @@ const tidePublicationPageModule: IRplTideModuleMapping = { ? 'field_publication.field_publication.field_node_documents' : 'field_publication.field_node_documents' ) || [] - ).map((doc: any) => ({ - name: doc.name, - url: doc.field_media_file.url || doc.field_media_file.uri, - size: humanizeFilesize(doc.field_media_file.filesize), - extension: mime.extension(doc.field_media_file.filemime), - id: doc.id - })), + ).map((doc: any) => getDocumentFromField(doc)), pagination: { prev: { label: () => 'Previous', diff --git a/packages/ripple-tide-publication/mapping/publication.ts b/packages/ripple-tide-publication/mapping/publication.ts index 733cde8a16..2fbc497702 100644 --- a/packages/ripple-tide-publication/mapping/publication.ts +++ b/packages/ripple-tide-publication/mapping/publication.ts @@ -1,5 +1,4 @@ -import mime from 'mime-types' -import { getField, humanizeFilesize } from '@dpc-sdp/ripple-tide-api' +import { getField, getDocumentFromField } from '@dpc-sdp/ripple-tide-api' import { tidePageBaseMapping, tidePageBaseIncludes @@ -59,13 +58,9 @@ const tidePublicationModule: IRplTideModuleMapping = { url: 'path.url', id: 'id', 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, - size: humanizeFilesize(doc.field_media_file.filesize), - extension: mime.extension(doc.field_media_file.filemime), - id: doc.id - })) + getField(src, 'field_node_documents').map((doc: any) => + getDocumentFromField(doc) + ) }, showLastUpdated: () => true }, diff --git a/packages/ripple-tide-search/composables/useSearchResult.ts b/packages/ripple-tide-search/composables/useSearchResult.ts index 9ae64f2418..448faf7c0f 100644 --- a/packages/ripple-tide-search/composables/useSearchResult.ts +++ b/packages/ripple-tide-search/composables/useSearchResult.ts @@ -1,12 +1,13 @@ import { computed } from 'vue' import { getSearchResultValue, truncateText } from '#imports' +import { stripMediaBaseUrl } from '@dpc-sdp/ripple-tide-api/utils' interface ResultOptions { summaryMaxLength: number | null } export default (result, options: ResultOptions = { summaryMaxLength: 150 }) => { - const { $app_origin } = useNuxtApp() + const { $app_origin, $config } = useNuxtApp() const title = computed(() => getSearchResultValue(result, 'title')) const url = computed(() => { return stripSiteId(getSearchResultValue(result, 'url'), $app_origin || '') @@ -46,7 +47,7 @@ export default (result, options: ResultOptions = { summaryMaxLength: 150 }) => { if (src) { return { - src, + src: stripMediaBaseUrl(src, $config.public?.tide?.baseUrl), alt: '' } } diff --git a/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.stories.mdx b/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.stories.mdx index ad20d469dd..bed4f81bf7 100644 --- a/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.stories.mdx +++ b/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.stories.mdx @@ -121,7 +121,7 @@ export const dataContent = ` caption: 'Optional media caption content section', sourceCaption: 'Optional media source information content section', dataContent: dataContent, - downloadUrl: '/img/image-landscape-l.jpg' + downloadUrl: 'img/image-landscape-l.jpg' }} > {SingleTemplate.bind()} diff --git a/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.vue b/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.vue index ce5d46da21..5bf8a3fd88 100644 --- a/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.vue +++ b/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.vue @@ -128,7 +128,7 @@ const fullscreenContentLabel = computed(() => { return props.fullscreenLabel || `View '${props.title}' fullscreen` }) const downloadContentLabel = computed(() => { - return props.downloadLabel || `Download' ${props.title}'` + return props.downloadLabel || `Download '${props.title}'` }) const toggleFullscreen = (event) => { @@ -292,16 +292,16 @@ const handleDownload = () => {
  • - {{ downloadContentLabel }} - +