@financial-times/cp-content-pipeline-schema 3.0.4 → 3.1.1

package/src/model/CapiResponse.ts

@@ -3,6 +3,7 @@ import type {
   ContentTypeSchemas,
   MainImage,
   ClipSet,
+  CustomCodeComponentReference,
 } from './schemas/capi/internal-content'
 import conceptIds from '@financial-times/n-concept-ids'
 import metadata from '@financial-times/n-display-metadata'
@@ -177,7 +178,7 @@ export class CapiResponse {
     return null
   }
 
-  embeds(): (ImageSet | ClipSet)[] {
+  embeds(): (ImageSet | ClipSet | CustomCodeComponentReference)[] {
     if ('embeds' in this.capiData && this.capiData.embeds)
       return this.capiData.embeds
     return []
@@ -189,16 +190,19 @@ export class CapiResponse {
   }
 
   async byline({ vanity }: Partial<ContentUrlArgs>) {
-    if (!this.capiData.byline) return null
-
-    const byline = new Byline(
-      this.capiData.byline,
-      Boolean(vanity),
-      this.annotations({ byPredicate: predicates.hasAuthor }),
-      this
-    )
+    if ('byline' in this.capiData) {
+      if (!this.capiData.byline) return null
+
+      const byline = new Byline(
+        this.capiData.byline,
+        Boolean(vanity),
+        this.annotations({ byPredicate: predicates.hasAuthor }),
+        this
+      )
 
-    return byline.buildBylineTree()
+      return byline.buildBylineTree()
+    }
+    return null
   }
 
   #rawAnnotations() {
@@ -225,9 +229,16 @@ export class CapiResponse {
     return relative ? this.relativeUrl(vanity) : this.absoluteUrl(vanity)
   }
 
+  webUrl() {
+    if ('webUrl' in this.capiData) {
+      return this.capiData.webUrl
+    }
+    return null
+  }
+
   async absoluteUrl(vanity?: boolean | null) {
     const url =
-      this.capiData.webUrl ??
+      this.webUrl() ??
       this.capiData.canonicalWebUrl ??
       `https://www.ft.com/content/${this.id()}`
 
@@ -297,11 +308,17 @@ export class CapiResponse {
   }
 
   accessLevel(): LiteralUnionScalarValues<typeof AccessLevel> {
-    return this.capiData.accessLevel ?? 'subscribed'
+    if ('accessLevel' in this.capiData) {
+      return this.capiData.accessLevel ?? 'subscribed'
+    }
+    return 'subscribed'
   }
 
   editorialDesk() {
-    return this.capiData.editorialDesk ?? null
+    if ('editorialDesk' in this.capiData) {
+      return this.capiData.editorialDesk ?? null
+    }
+    return null
   }
 
   canBeSyndicated(): LiteralUnionScalarValues<typeof CanBeSyndicated> {
@@ -337,6 +354,9 @@ export class CapiResponse {
   }
 
   title() {
+    if (!('title' in this.capiData)) {
+      return ''
+    }
     // CI-2038 HACK to remove "Comment:" prefix from live blog post titles
     // as this is as the sole indicator that this is an opinion post
     // while we're waiting for the annotation data to be in CAPI
@@ -379,9 +399,11 @@ export class CapiResponse {
   }
 
   modifiedTimestamp() {
-    return this.capiData.lastModified
-      ? new Date(this.capiData.lastModified).getTime()
-      : null
+    if ('lastModified' in this.capiData && this.capiData.lastModified) {
+      return new Date(this.capiData.lastModified).getTime()
+    } else {
+      return null
+    }
   }
 
   publishReference() {
@@ -389,7 +411,10 @@ export class CapiResponse {
   }
 
   alternativeTitle() {
-    return this.capiData.alternativeTitles ?? null
+    if ('alternativeTitles' in this.capiData) {
+      return this.capiData.alternativeTitles ?? null
+    }
+    return null
   }
 
   alternativeStandfirst() {
@@ -401,9 +426,12 @@ export class CapiResponse {
   }
 
   overrideTitle(title: string) {
-    const clone = cloneDeep(this.capiData)
-    clone.title = title
-    return new CapiResponse(clone, this.context, this.packageContainer)
+    if ('title' in this.capiData) {
+      const clone = cloneDeep(this.capiData)
+      clone.title = title
+      return new CapiResponse(clone, this.context, this.packageContainer)
+    }
+    return this
   }
 
   async containedIn() {
@@ -526,17 +554,27 @@ export class CapiResponse {
   }
 
   mainImage() {
-    return this.#createCAPIImage(this.capiData.mainImage)
+    if ('mainImage' in this.capiData) {
+      return this.#createCAPIImage(this.capiData.mainImage)
+    }
+    return null
   }
 
   teaserImage() {
     // Some content published via methode uses promotionalImage for teasers
-    const alternativeImage =
-      'alternativeImages' in this.capiData
-        ? this.capiData.alternativeImages?.promotionalImage
-        : undefined
-    const image = alternativeImage ?? this.capiData.mainImage
-    return this.#createCAPIImage(image)
+    if (
+      'alternativeImages' in this.capiData &&
+      this.capiData.alternativeImages?.promotionalImage
+    ) {
+      return this.#createCAPIImage(
+        this.capiData.alternativeImages.promotionalImage
+      )
+    } else {
+      if ('mainImage' in this.capiData) {
+        return this.#createCAPIImage(this.capiData.mainImage)
+      }
+    }
+    return null
   }
 
   #createCAPIImage(image: MainImage | undefined) {
@@ -604,6 +642,7 @@ export class CapiResponse {
     // while we're waiting for the annotation data to be in CAPI
     if (
       this.type() === 'LiveBlogPost' &&
+      'title' in this.capiData &&
       this.capiData.title.startsWith('Comment:')
     ) {
       return true
@@ -618,7 +657,10 @@ export class CapiResponse {
   }
 
   isCentralBanking() {
-    return this.capiData.editorialDesk === '/FT/Professional/Central Banking'
+    if ('editorialDesk' in this.capiData) {
+      return this.capiData.editorialDesk === '/FT/Professional/Central Banking'
+    }
+    return false
   }
 
   isPlaceholder() {
@@ -799,6 +841,9 @@ export class CapiResponse {
   }
 
   isPartnerContent(): boolean {
-    return this.capiData.editorialDesk === '/FT/Commercial/PartnerContent'
+    if ('editorialDesk' in this.capiData) {
+      return this.capiData.editorialDesk === '/FT/Commercial/PartnerContent'
+    }
+    return false
   }
 }

package/src/model/Concept.test.ts

@@ -73,5 +73,13 @@ describe('Concept model', () => {
         '/vanity-url'
       )
     })
+
+    it('returns the full vanity URL when vanity=true and relative=true but vanity URL host is not www.ft.com', async () => {
+      const model = new Concept(topic, context)
+      vanityMock.mockResolvedValue('https://professional-monetary-policy-radar.ft.com')
+      expect(await model.url({ vanity: true, relative: true })).toEqual(
+        'https://professional-monetary-policy-radar.ft.com'
+      )
+    })
   })
 })

package/src/model/Concept.ts

@@ -162,7 +162,13 @@ export class Concept {
     }
 
     if (args?.relative) {
-      return new URL(url).pathname
+      const urlObject = new URL(url)
+
+      if (urlObject.host === 'www.ft.com') {
+        return urlObject.pathname
+      }
+
+      return url
     }
 
     return url

package/src/model/schemas/capi/base-schema.ts

@@ -183,6 +183,9 @@ export const baseMetadataSchema = z.object({
   annotations: Annotation.array(),
   webUrl: z.string().optional(),
   canonicalWebUrl: z.string().optional(),
+  apiUrl: z.string().optional(),
+  path: z.string(),
+  versionRange: z.string(),
   type: z.string().optional(),
   types: z.string().array(),
   standout: z
@@ -267,11 +270,34 @@ export const baseContentSchema = z.object({
   transcript: z.string().optional(),
 })
 
+export const CustomCodeComponentReference = baseMetadataSchema
+  .pick({
+    id: true,
+    canonicalWebUrl: true,
+    publishedDate: true,
+    firstPublishedDate: true,
+    publishReference: true,
+    canBeSyndicated: true,
+    canBeDistributed: true,
+  })
+  .merge(baseContentSchema.pick({ bodyXML: true }))
+  .merge(
+    z.object({
+      apiUrl: z.string(),
+      type: z.literal('http://www.ft.com/ontology/content/CustomCodeComponent'),
+      path: z.string(),
+      versionRange: z.string(),
+      attributes: z.record(z.union([z.string(), z.boolean(), z.undefined()])),
+    })
+  )
+
 export const baseMediaSchema = z.object({
   mainImage: MainImage.optional(),
   leadImages: LeadImage.array().optional(),
   alternativeImages: AlternativeImage.optional(),
   leadFlourish: LeadFlourish.optional(),
-  embeds: z.array(z.union([ImageSet, ClipSet])).optional(),
+  embeds: z
+    .array(z.union([ImageSet, ClipSet, CustomCodeComponentReference]))
+    .optional(),
   dataSource: DataSource.array().optional(),
 })

package/src/model/schemas/capi/custom-code-component.ts

@@ -0,0 +1,20 @@
+import {
+  baseMetadataSchema,
+  baseMediaSchema,
+  CustomCodeComponentReference,
+} from './base-schema'
+
+const customCodeComponentMetadataSchema = baseMetadataSchema.pick({
+  annotations: true,
+  types: true,
+})
+
+const customCodeComponentMediaSchema = baseMediaSchema.pick({
+  embeds: true,
+})
+
+export const customCodeComponentSchema = CustomCodeComponentReference.omit({
+  type: true,
+})
+  .merge(customCodeComponentMetadataSchema)
+  .merge(customCodeComponentMediaSchema)

package/src/model/schemas/capi/index.ts

@@ -6,6 +6,7 @@ import { audioSchema } from './audio'
 import { videoSchema } from './video'
 import { LiteralUnionScalarValues } from '../../../resolvers/literal-union'
 import { ContentType } from '../../../resolvers/scalars'
+import { customCodeComponentSchema } from './custom-code-component'
 
 export const schemas = (
   contentType: LiteralUnionScalarValues<typeof ContentType>
@@ -24,6 +25,8 @@ export const schemas = (
     case 'Video':
     case 'MediaResource':
       return videoSchema
+    case 'CustomCodeComponent':
+      return customCodeComponentSchema
     default:
       return articleSchema
   }

package/src/model/schemas/capi/internal-content.ts

@@ -8,6 +8,7 @@ import type {
   ClipSet,
   MainImage,
   LeadImage,
+  CustomCodeComponentReference,
 } from './base-schema'
 
 import { articleSchema } from './article'
@@ -16,6 +17,7 @@ import { placeholderSchema } from './placeholder'
 import { liveBlogPackageSchema } from './live-blog-package'
 import { audioSchema } from './audio'
 import { videoSchema } from './video'
+import { customCodeComponentSchema } from './custom-code-component'
 
 import { contentPackageSchema } from './content-package'
 
@@ -25,6 +27,7 @@ type LiveBlogPackage = z.infer<typeof liveBlogPackageSchema>
 type ContentPackage = z.infer<typeof contentPackageSchema>
 type Audio = z.infer<typeof audioSchema>
 type Video = z.infer<typeof videoSchema>
+type CustomCodeComponent = z.infer<typeof customCodeComponentSchema>
 
 export type CapiPerson = z.infer<typeof CapiPerson>
 
@@ -35,6 +38,9 @@ export type ImageSet = z.infer<typeof ImageSet>
 export type MainImage = z.infer<typeof MainImage>
 export type Clip = z.infer<typeof Clip>
 export type ClipSet = z.infer<typeof ClipSet>
+export type CustomCodeComponentReference = z.infer<
+  typeof CustomCodeComponentReference
+>
 
 export type ContentTypeSchemas =
   | Article
@@ -43,3 +49,4 @@ export type ContentTypeSchemas =
   | ContentPackage
   | Audio
   | Video
+  | CustomCodeComponent

package/src/resolvers/content-tree/Workarounds.ts

@@ -75,6 +75,11 @@ export interface Video extends ContentTree.Node {
   embedded: boolean
 }
 
+export interface CccFallbackText extends ContentTree.Node {
+  type: 'ccc-fallback-text'
+  children: ContentTree.Paragraph[]
+}
+
 export interface OldClip extends ContentTree.Node {
   type: 'clip'
   url: string
@@ -218,11 +223,12 @@ export type AnyNode =
   | ContentTree.Blockquote
   | Pullquote
   | ContentTree.ImageSet
-  | ContentTree.CustomCodeComponent
   | ContentTree.Root
   | Body
   | ClipSet
   | OldClip
+  | ContentTree.CustomCodeComponent
+  | CccFallbackText
   | Recommended
   | ContentTree.Tweet
   | Flourish

package/src/resolvers/content-tree/references/CustomCodeComponent.ts

@@ -0,0 +1,78 @@
+import { uuidFromUrl } from '../../../helpers/metadata'
+import { CustomCodeComponentResolvers } from '../../../generated'
+import { ReferenceWithCAPIData } from '.'
+import { ContentTree } from '@financial-times/content-tree'
+import { RichText } from '../../../model/RichText'
+import { CapiResponse } from '../../../model/CapiResponse'
+import type { QueryContext } from '../../..'
+import isError from '../../../helpers/isError'
+import { OperationalError } from '@dotcom-reliability-kit/errors'
+
+async function getReferencesFromBody(
+  parent: ReferenceWithCAPIData<ContentTree.CustomCodeComponent>,
+  context: QueryContext
+) {
+  const customCodeComponentEmbedData = getCustomCodeComponentEmbedsData(parent)
+
+  if (!customCodeComponentEmbedData) {
+    return null
+  }
+
+  let customCodeComponentContentData: CapiResponse
+  try {
+    customCodeComponentContentData = await context.dataSources.capi.getContent(
+      uuidFromUrl(customCodeComponentEmbedData.apiUrl)
+    )
+  } catch (error) {
+    if (isError(error)) {
+      context.logger.warn({
+        event: 'RECOVERABLE_ERROR',
+        error: new OperationalError({
+          code: 'CUSTOM_CODE_COMPONENT_CONTENT_ERROR',
+          message: `Error fetching content for CustomCodeComponent`,
+          cccData: parent,
+          cause: error,
+        }),
+      })
+    }
+
+    return null
+  }
+  const bodyXML = customCodeComponentContentData?.bodyXML() ?? `<body></body>`
+  // The CAPI Data will be used by the RichText to create the references when appropriate.
+  return new RichText('bodyXML', bodyXML, customCodeComponentContentData)
+}
+
+function getCustomCodeComponentEmbedsData(
+  parent: ReferenceWithCAPIData<ContentTree.CustomCodeComponent>
+) {
+  const customCodeComponentEmbeds = parent.contentApiData
+    ?.embeds()
+    ?.filter(
+      (embedded) =>
+        embedded.type ===
+        'http://www.ft.com/ontology/content/CustomCodeComponent'
+    )
+
+  const uuid = uuidFromUrl(parent.reference.id)
+
+  if (!uuid) {
+    return
+  }
+
+  return customCodeComponentEmbeds?.find(
+    (embed) => uuidFromUrl(embed.id) === uuid
+  )
+}
+
+export const CustomCodeComponent = {
+  id: (parent) => uuidFromUrl(parent.reference.id),
+  type: (parent) => parent.reference.type,
+  layoutWidth: (parent) => parent.reference.layoutWidth ?? 'in-line',
+  path: (parent) => getCustomCodeComponentEmbedsData(parent)?.path ?? '',
+  versionRange: (parent) =>
+    getCustomCodeComponentEmbedsData(parent)?.versionRange ?? 'latest',
+  attributes: (parent) =>
+    getCustomCodeComponentEmbedsData(parent)?.attributes ?? {},
+  body: async (parent, _, context) => getReferencesFromBody(parent, context),
+} satisfies CustomCodeComponentResolvers

package/src/resolvers/content-tree/references/index.ts

@@ -6,6 +6,7 @@ import { Reference } from './Reference'
 import { Tweet } from './Tweet'
 import { ImageSet } from './ImageSet'
 import { ClipSet, Accessibility, Caption } from './ClipSet'
+import { CustomCodeComponent } from './CustomCodeComponent'
 import { Video } from './Video'
 import { Flourish, FlourishFallback } from './Flourish'
 import { Recommended } from './Recommended'
@@ -16,6 +17,7 @@ import {
   FlourishResolvers,
   ImageSetResolvers,
   ClipSetResolvers,
+  CustomCodeComponentResolvers,
   LayoutImageResolvers,
   RawImageResolvers,
   RecommendedResolvers,
@@ -41,6 +43,7 @@ export const resolvers: {
   Tweet: TweetResolvers
   ImageSet: ImageSetResolvers
   ClipSet: ClipSetResolvers
+  CustomCodeComponent: CustomCodeComponentResolvers
   VideoReference: VideoReferenceResolvers
   Flourish: FlourishResolvers
   Recommended: RecommendedResolvers
@@ -57,6 +60,7 @@ export const resolvers: {
   Tweet,
   ImageSet,
   ClipSet,
+  CustomCodeComponent,
   VideoReference: Video,
   Flourish,
   Recommended,
@@ -76,6 +80,7 @@ export const mapNodeToReference = {
   'image-set': 'ImageSet',
   'clip-set': 'ClipSet',
   clip: 'ClipSet',
+  'custom-code-component': 'CustomCodeComponent',
   video: 'VideoReference',
   recommended: 'Recommended',
   'layout-image': 'LayoutImage',

package/src/resolvers/content-tree/tagMappings.test.ts

@@ -1,5 +1,6 @@
 import { AnyNode, OldClip } from './Workarounds'
 import tagMappings, { getBooleanAttributeValue } from './tagMappings'
+import { ContentTree } from '@financial-times/content-tree'
 import { load } from 'cheerio'
 
 function expectNotArray<T>(thing: T | T[]): asserts thing is T {
@@ -59,3 +60,31 @@ describe('tagMappings test', () => {
     expect(mapping.posterCredits).toBe('Reuters')
   })
 })
+
+it('custom-code-component mapping test', () => {
+  const bodyXML = `
+        <body>
+            <ft-content 
+                type=\"http://www.ft.com/ontology/content/CustomCodeComponent\"
+                url=\"http://api.ft.com/content/1111111-1111-1111-1111-111111111111\" 
+                data-layout-width=\"in-line\"
+                embedded=\"true\"
+            >
+            </ft-content>
+        </body>
+    `
+
+  const selector =
+    'ft-content[type="http://www.ft.com/ontology/content/CustomCodeComponent"]'
+  const $el = load(bodyXML)(selector)
+  const mapping = tagMappings[selector]!($el, () => [])
+
+  expectNodeType<ContentTree.CustomCodeComponent>(
+    mapping,
+    'custom-code-component'
+  )
+  expect(mapping.id).toBe(
+    'http://api.ft.com/content/1111111-1111-1111-1111-111111111111'
+  )
+  expect(mapping.layoutWidth).toBe('in-line')
+})

package/src/resolvers/content-tree/tagMappings.ts

@@ -88,7 +88,12 @@ const validScrollytellingOption = <
 const articleTagMappings = (capiData?: CapiResponse): TagMappings => ({
   'body > ft-content[type="http://www.ft.com/ontology/content/ImageSet"]:first-child':
     ($el) => ({
-      type: capiData?.topperHasImage() ? 'image-set' : 'main-image',
+      // CustomCodeComponent uses an inner bodyXML parsed as a RichText
+      // The rule about main-image should not apply to CustomCodeComponent.
+      type:
+        capiData?.type() === 'CustomCodeComponent' || capiData?.topperHasImage()
+          ? 'image-set'
+          : 'main-image',
       id: $el.attr('url') || '',
     }),
   'body > ft-content[type="http://www.ft.com/ontology/content/ImageSet"]:not(:first-child),:not(body) > ft-content[type="http://www.ft.com/ontology/content/ImageSet"]':
@@ -174,7 +179,33 @@ const commonTagMappings: TagMappings = {
     type: 'tweet',
     id: $el.attr('href') || '',
   }),
-
+  '[data-asset-type="custom-code-component-fallback-text"]': (
+    $el,
+    traverse,
+    context
+  ) => ({
+    type: 'ccc-fallback-text',
+    children: everyChildIsType(
+      'paragraph',
+      traverse(),
+      'ccc-fallback-text',
+      context
+    ),
+  }),
+  'ft-content[type="http://www.ft.com/ontology/content/CustomCodeComponent"]': (
+    $el
+  ) => {
+    const layoutWidth = $el.attr('data-layout-width')
+    return {
+      type: 'custom-code-component',
+      id: $el.attr('url') || '',
+      layoutWidth:
+        layoutWidth &&
+        ['in-line', 'mid-grid', 'full-grid', 'full-bleed'].includes(layoutWidth)
+          ? (layoutWidth as 'in-line' | 'mid-grid' | 'full-grid' | 'full-bleed')
+          : 'in-line',
+    }
+  },
   'h4,h5,h6': ($el, traverse, context) => ({
     type: 'heading',
     level: 'label',
@@ -269,8 +300,19 @@ const commonTagMappings: TagMappings = {
     //TODO: this is a bit gross??
     const isValidWidth = (
       str: string
-    ): str is 'inset-left' | 'full-grid' | 'full-width' => {
-      return ['inset-left', 'full-grid', 'full-width'].includes(str)
+    ): str is
+      | 'inset-left'
+      | 'full-grid'
+      | 'full-width'
+      | 'in-line'
+      | 'mid-grid' => {
+      return [
+        'inset-left',
+        'full-grid',
+        'full-width',
+        'in-line',
+        'mid-grid',
+      ].includes(str)
     }
     const isValidName = (str: string): str is 'auto' | 'card' | 'timeline' => {
       return ['auto', 'card', 'timeline'].includes(str)

package/src/resolvers/content.ts

@@ -15,6 +15,7 @@ import {
   IndicatorsResolvers,
   MediaResolvers,
 } from '../generated'
+import { BaseError } from '@dotcom-reliability-kit/errors'
 
 const contentResolvers: ContentResolvers = {
   accessLevel: (parent) => parent.accessLevel(),
@@ -58,6 +59,12 @@ const resolvers = {
         return 'Video'
       }
 
+      if (type === 'CustomCodeComponent') {
+        throw new BaseError(
+          'CustomCodeComponent is not supported as a root content type'
+        )
+      }
+
       return type
     },
     ...contentResolvers,

package/src/resolvers/scalars.ts

@@ -128,7 +128,8 @@ export const ContentType = new LiteralUnionScalar<
     'LiveBlogPost',
     'ContentPackage',
     'Content',
-    'MediaResource'
+    'MediaResource',
+    'CustomCodeComponent'
   ]
 >({
   name: 'ContentType',
@@ -142,6 +143,7 @@ export const ContentType = new LiteralUnionScalar<
     'ContentPackage',
     'Content',
     'MediaResource',
+    'CustomCodeComponent',
   ],
 })