diff --git a/helpers/listing-page.js b/helpers/listing-page.js index 4f0db23..dc3a2b0 100644 --- a/helpers/listing-page.js +++ b/helpers/listing-page.js @@ -19,9 +19,33 @@ function makeTitle ( listing ) { function makeDescription ( listing ) { return `Latest reported support status of ${ listing.name } on Apple Silicon and Apple M1 Pro and M1 Max Processors.` } + +export function getVideoImages ( video ) { + const webpSource = { + ...video.thumbnail, + srcset: video.thumbnail.srcset.replaceAll('ytimg.com/vi/', 'ytimg.com/vi_webp/').replace(/.png|.jpg|.jpeg/g, '.webp') + } + + return { + src: video.thumbnail.src, + srcset: { + webp: webpSource, + jpeg: video.thumbnail + } + } +} + +export function makeApiPathFromEndpoint ( endpoint ) { + const [ + kind, + listingSlug + ] = getPartPartsFromUrl( endpoint ) + + return `/api/${ kind }/${ listingSlug }.json` +} export class ListingDetails { constructor ( listing ) { - this.listing = listing + this.api = listing this.type = getAppType( listing ) } @@ -30,30 +54,34 @@ export class ListingDetails { get mainHeading () { if ( this.type === 'formula' ) { - return `Does ${ this.listing.name } work on Apple Silicon when installed via Homebrew?` + return `Does ${ this.api.name } work on Apple Silicon when installed via Homebrew?` } - return `Does ${ this.listing.name } work on Apple Silicon?` + return `Does ${ this.api.name } work on Apple Silicon?` } get subtitle () { - return this.listing.text + return this.api.text } get pageTitle () { - return makeTitle( this.listing ) + return makeTitle( this.api ) } get pageDescription () { - return makeDescription( this.listing ) + return makeDescription( this.api ) } get endpointParts () { - return getPartPartsFromUrl( this.listing.endpoint ) + return getPartPartsFromUrl( this.api.endpoint ) + } + + get apiEndpointPath () { + return makeApiPathFromEndpoint( this.api.endpoint ) } get hasRelatedVideos () { - return Array.isArray( this.listing.relatedVideos ) && this.listing.relatedVideos.length > 0 + return Array.isArray( this.api.relatedVideos ) && this.api.relatedVideos.length > 0 } get hasRelatedApps () { @@ -72,19 +100,25 @@ export class ListingDetails { get initialVideo () { if ( this.type === 'video' ) { - return this.listing.video + return this.api.video } if ( this.hasRelatedVideos ) { - return this.listing.relatedVideos[0] + return this.api.relatedVideos[0] } return null } + get videoPosterSources () { + if ( this.initialVideo === null ) return null + + return getVideoPosterSources( this.initialVideo ) + } + get structuredData () { if ( this.type === 'video' ) { - return buildVideoStructuredData( this.listing, this.listing.featuredApps, { siteUrl: import.meta.site } ) + return buildVideoStructuredData( this.api, this.api.featuredApps, { siteUrl: import.meta.site } ) } return null @@ -95,11 +129,11 @@ export class ListingDetails { title: this.pageTitle, description: this.pageDescription, // meta, - // link, + link: [], structuredData: this.structuredData, // domain, - pathname: this.listing.endpoint, + pathname: this.api.endpoint, } } }