@financial-times/cp-content-pipeline-schema 2.3.0 → 2.4.0

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

@@ -19,6 +19,7 @@ import {
 
 import * as scrollytelling from '@financial-times/n-scrollytelling-image/server'
 import { LiteralToPrimitiveDeep } from 'type-fest'
+import { CapiResponse } from '../../model/CapiResponse'
 
 const tableResponsiveStyleMap: Record<string, Table['responsiveStyle']> = {
   stacked: 'flat',
@@ -81,10 +82,10 @@ const validScrollytellingOption = <
     : false
 }
 
-const articleTagMappings = (topperHasImage: boolean): TagMappings => ({
+const articleTagMappings = (capiData?: CapiResponse): TagMappings => ({
   'body > ft-content[type="http://www.ft.com/ontology/content/ImageSet"]:first-child':
     ($el) => ({
-      type: topperHasImage ? 'image-set' : 'main-image',
+      type: 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"]':
@@ -103,55 +104,60 @@ const liveBlogPostTagMappings: TagMappings = {
 
 const commonTagMappings: TagMappings = {
   body: ($el, traverse) => ({ type: 'body', version: 1, children: traverse() }),
-  'a:not([data-asset-type])': ($el, traverse) => ({
+  'a:not([data-asset-type])': ($el, traverse, context) => ({
     type: 'link',
     url: $el.attr('href') || '',
     title: '',
-    children: childrenOfTypes(phrasingTypes, traverse(), 'link'),
+    children: childrenOfTypes(phrasingTypes, traverse(), 'link', context),
   }),
-  strong: ($el, traverse) => ({
+  strong: ($el, traverse, context) => ({
     type: 'strong',
-    children: childrenOfTypes(phrasingTypes, traverse(), 'strong'),
+    children: childrenOfTypes(phrasingTypes, traverse(), 'strong', context),
   }),
-  em: ($el, traverse) => ({
+  em: ($el, traverse, context) => ({
     type: 'emphasis',
-    children: childrenOfTypes(phrasingTypes, traverse(), 'emphasis'),
+    children: childrenOfTypes(phrasingTypes, traverse(), 'emphasis', context),
   }),
-  blockquote: ($el, traverse) => ({
+  blockquote: ($el, traverse, context) => ({
     type: 'blockquote',
-    children: childrenOfTypes(phrasingTypes, traverse(), 'blockquote'),
+    children: childrenOfTypes(phrasingTypes, traverse(), 'blockquote', context),
   }),
   // strip any (redundant) line breaks in between two paragraphs
   'p + br': ($el) => ($el.next()[0]?.tagName === 'p' ? [] : { type: 'break' }),
   br: () => ({ type: 'break' }),
   hr: () => ({ type: 'thematic-break' }),
-  s: ($el, traverse) => ({
+  s: ($el, traverse, context) => ({
     type: 'strikethrough',
-    children: childrenOfTypes(phrasingTypes, traverse(), 'strikethrough'),
+    children: childrenOfTypes(
+      phrasingTypes,
+      traverse(),
+      'strikethrough',
+      context
+    ),
   }),
-  ul: ($el, traverse) => ({
+  ul: ($el, traverse, context) => ({
     type: 'list',
-    children: everyChildIsType('list-item', traverse(), 'list'),
+    children: everyChildIsType('list-item', traverse(), 'list', context),
     ordered: false,
   }),
-  ol: ($el, traverse) => ({
+  ol: ($el, traverse, context) => ({
     type: 'list',
-    children: everyChildIsType('list-item', traverse(), 'list'),
+    children: everyChildIsType('list-item', traverse(), 'list', context),
     ordered: true,
   }),
-  li: ($el, traverse) => ({
+  li: ($el, traverse, context) => ({
     type: 'list-item',
-    children: childrenOfTypes(phrasingTypes, traverse(), 'list-item'),
+    children: childrenOfTypes(phrasingTypes, traverse(), 'list-item', context),
   }),
   'a[data-asset-type="tweet"]': ($el) => ({
     type: 'tweet',
     id: $el.attr('href') || '',
   }),
 
-  'h4,h5,h6': ($el, traverse) => ({
+  'h4,h5,h6': ($el, traverse, context) => ({
     type: 'heading',
     level: 'label',
-    children: everyChildIsType('text', traverse(), 'heading'),
+    children: everyChildIsType('text', traverse(), 'heading', context),
   }),
   'pull-quote': ($el) => ({
     type: 'pullquote',
@@ -230,7 +236,7 @@ const commonTagMappings: TagMappings = {
       description: $description.text(),
     }
   },
-  '.n-content-layout': ($el, traverse) => {
+  '.n-content-layout': ($el, traverse, context) => {
     //TODO: this is a bit gross??
     const isValidWidth = (
       str: string
@@ -254,14 +260,16 @@ const commonTagMappings: TagMappings = {
           ...everyChildIsType<ContentTree.LayoutSlot>(
             'layout-slot',
             otherChildren,
-            'layout'
+            'layout',
+            context
           ),
         ]
       } else {
         return everyChildIsType<ContentTree.LayoutSlot>(
           'layout-slot',
           children,
-          'layout'
+          'layout',
+          context
         )
       }
     }
@@ -273,7 +281,7 @@ const commonTagMappings: TagMappings = {
       children: getChildren(traverse()),
     }
   },
-  '.n-content-layout__slot': ($el, traverse) => ({
+  '.n-content-layout__slot': ($el, traverse, context) => ({
     type: 'layout-slot',
     children: childrenOfTypes(
       ['heading', 'paragraph', 'layout-image'],
@@ -283,7 +291,8 @@ const commonTagMappings: TagMappings = {
         .flatMap((node) =>
           node.type === 'layout-slot' ? node.children : [node]
         ),
-      'layout-slot'
+      'layout-slot',
+      context
     ),
   }),
   '.n-content-layout img': ($el) => ({
@@ -294,7 +303,7 @@ const commonTagMappings: TagMappings = {
     credit: $el.attr('data-copyright') || '',
   }),
 
-  table: ($el, traverse): Table | ContentTree.Layout => {
+  table: ($el, traverse, context): Table | ContentTree.Layout => {
     const layoutSmallscreen = $el.attr('data-table-layout-smallscreen')
     const responsiveStyle: Table['responsiveStyle'] =
       layoutSmallscreen && layoutSmallscreen in tableResponsiveStyleMap
@@ -309,12 +318,14 @@ const commonTagMappings: TagMappings = {
     const caption = findChildOftype<TableCaption>(
       'table-caption',
       children,
-      'table'
+      'table',
+      context
     )
     const footer = findChildOftype<TableFooter>(
       'table-footer',
       children,
-      'table'
+      'table',
+      context
     )
 
     // HACK:KB:20230523 transform single-cell tables into infoboxes, for legacy articles
@@ -328,7 +339,8 @@ const commonTagMappings: TagMappings = {
         children: childrenOfTypes(
           ['paragraph', 'heading'],
           bodies[0].children[0].children[0].children,
-          'layout-slot'
+          'layout-slot',
+          context
         ),
       }
 
@@ -337,7 +349,12 @@ const commonTagMappings: TagMappings = {
             {
               type: 'heading',
               level: 'subheading',
-              children: everyChildIsType('text', caption.children, 'heading'),
+              children: everyChildIsType(
+                'text',
+                caption.children,
+                'heading',
+                context
+              ),
             },
             slot,
           ]
@@ -417,34 +434,44 @@ const commonTagMappings: TagMappings = {
   // HACK needs to come before tr. TODO sort by selector specificity
   'tfoot > tr': ($el, traverse) => traverse(),
   // HACK needs to come before td. TODO sort by selector specificity
-  'tfoot > tr > td': ($el, traverse) => ({
+  'tfoot > tr > td': ($el, traverse, context) => ({
     type: 'table-footer',
-    children: childrenOfTypes(phrasingTypes, traverse(), 'table-footer'),
+    children: childrenOfTypes(
+      phrasingTypes,
+      traverse(),
+      'table-footer',
+      context
+    ),
   }),
-  tr: ($el, traverse) => ({
+  tr: ($el, traverse, context) => ({
     type: 'table-row',
-    children: everyChildIsType('table-cell', traverse(), 'table-row'),
+    children: everyChildIsType('table-cell', traverse(), 'table-row', context),
   }),
-  td: ($el, traverse) => ({
+  td: ($el, traverse, context) => ({
     type: 'table-cell',
-    children: childrenOfTypes(phrasingTypes, traverse(), 'table-cell'),
+    children: childrenOfTypes(phrasingTypes, traverse(), 'table-cell', context),
   }),
-  th: ($el, traverse) => ({
+  th: ($el, traverse, context) => ({
     type: 'table-cell',
     heading: true,
-    children: childrenOfTypes(phrasingTypes, traverse(), 'table-cell'),
+    children: childrenOfTypes(phrasingTypes, traverse(), 'table-cell', context),
   }),
-  thead: ($el, traverse) => ({
+  thead: ($el, traverse, context) => ({
     type: 'table-body',
-    children: everyChildIsType('table-row', traverse(), 'table-body'),
+    children: everyChildIsType('table-row', traverse(), 'table-body', context),
   }),
-  tbody: ($el, traverse) => ({
+  tbody: ($el, traverse, context) => ({
     type: 'table-body',
-    children: everyChildIsType('table-row', traverse(), 'table-body'),
+    children: everyChildIsType('table-row', traverse(), 'table-body', context),
   }),
-  caption: ($el, traverse) => ({
+  caption: ($el, traverse, context) => ({
     type: 'table-caption',
-    children: childrenOfTypes(phrasingTypes, traverse(), 'table-caption'),
+    children: childrenOfTypes(
+      phrasingTypes,
+      traverse(),
+      'table-caption',
+      context
+    ),
   }),
 
   // HACK needs to come after LayoutImage. TODO sort by selector specificity
@@ -468,14 +495,15 @@ const commonTagMappings: TagMappings = {
     format: 'standard',
   }),
 
-  'scrollable-block': ($el, traverse) => {
+  'scrollable-block': ($el, traverse, context) => {
     return {
       type: 'scrolly-block',
       theme: $el.attr('theme') === '2' ? 'serif' : 'sans',
       children: everyChildIsType(
         'scrolly-section',
         traverse(),
-        'scrolly-block'
+        'scrolly-block',
+        context
       ),
     }
   },
@@ -486,7 +514,7 @@ const commonTagMappings: TagMappings = {
       id: $el.attr('url') ?? '',
     }),
 
-  'scrollable-section': ($el, traverse) => {
+  'scrollable-section': ($el, traverse, context) => {
     const [firstChild, ...restChildren] = traverse()
 
     const display = $el.attr('theme-display')
@@ -510,29 +538,33 @@ const commonTagMappings: TagMappings = {
         ...everyChildIsType<ContentTree.ScrollyImage>(
           'scrolly-image',
           [firstChild],
-          'scrolly-section'
+          'scrolly-section',
+          context
         ),
         ...everyChildIsType<ContentTree.ScrollyCopy>(
           'scrolly-copy',
           restChildren,
-          'scrolly-section'
+          'scrolly-section',
+          context
         ),
       ] as [ContentTree.ScrollyImage, ...ContentTree.ScrollyCopy[]],
     }
   },
 
-  'scrollable-text': ($el, traverse) => ({
+  'scrollable-text': ($el, traverse, context) => ({
     type: 'scrolly-copy',
     children: childrenOfTypes(
       ['scrolly-heading', 'paragraph'],
       traverse(),
-      'scrolly-copy'
+      'scrolly-copy',
+      context
     ),
   }),
 
   'scrollable-text > p, scrollable-text > h1, scrollable-text > h2': (
     $el,
-    traverse
+    traverse,
+    context
   ) => {
     const textStyle = $el.attr('theme-style')
 
@@ -540,31 +572,41 @@ const commonTagMappings: TagMappings = {
       return {
         type: 'scrolly-heading',
         level: scrollytellingOptionsToContentTree.textStyle[textStyle],
-        children: everyChildIsType('text', traverse(), 'scrolly-heading'),
+        children: everyChildIsType(
+          'text',
+          traverse(),
+          'scrolly-heading',
+          context
+        ),
       }
     }
 
     return {
       type: 'paragraph',
-      children: childrenOfTypes(phrasingTypes, traverse(), 'paragraph'),
+      children: childrenOfTypes(
+        phrasingTypes,
+        traverse(),
+        'paragraph',
+        context
+      ),
     }
   },
 
   // HACK:KB:20230703 needs to come after `scrollable-text > X`. todo sort by specificity
-  p: ($el, traverse) => ({
+  p: ($el, traverse, context) => ({
     type: 'paragraph',
-    children: childrenOfTypes(phrasingTypes, traverse(), 'paragraph'),
+    children: childrenOfTypes(phrasingTypes, traverse(), 'paragraph', context),
   }),
 
-  h1: ($el, traverse) => ({
+  h1: ($el, traverse, context) => ({
     type: 'heading',
     level: 'chapter',
-    children: everyChildIsType('text', traverse(), 'heading'),
+    children: everyChildIsType('text', traverse(), 'heading', context),
   }),
-  'h2,h3': ($el, traverse) => ({
+  'h2,h3': ($el, traverse, context) => ({
     type: 'heading',
     level: 'subheading',
-    children: everyChildIsType('text', traverse(), 'heading'),
+    children: everyChildIsType('text', traverse(), 'heading', context),
   }),
   'ft-content[type="http://www.ft.com/ontology/content/ClipSet"]': ($el) => ({
     type: 'clip-set',

package/src/resolvers/content.ts

@@ -73,6 +73,7 @@ const resolvers = {
 
   LiveBlogPost: {
     containedIn: (parent) => parent.containedIn(),
+    isPinned: (parent) => parent.isPinned(),
     indicators(parent) {
       return {
         isOpinion: parent.isOpinion(),