@financial-times/cp-content-pipeline-schema 0.2.1

package/src/picture.ts

@@ -0,0 +1,98 @@
+import { gql } from 'graphql-tag'
+import { ImageSet } from './types/internal-content.js'
+import { getImageDimensions } from './image.js'
+
+import type { DataSources } from './datasources/index.js'
+
+export const ImageType = {
+  Image: 'http://www.ft.com/ontology/content/Image',
+  Graphic: 'http://www.ft.com/ontology/content/Graphic',
+} as const
+
+const pictureFields = `
+images: PictureImages
+alt: String!
+caption: String
+imageType: ImageType!
+`
+
+export const typeDef = gql`
+  enum ImageType {
+    Image
+    Graphic
+  }
+
+  type PictureImages {
+    standard: Image!
+    small: Image
+    large: Image
+  }
+
+  interface Picture {
+    ${pictureFields}
+  }
+
+  type PictureStandard implements Picture {
+    ${pictureFields}
+  }
+
+  type PictureInline implements Picture {
+    ${pictureFields}
+  }
+
+  type PictureFullBleed implements Picture {
+    ${pictureFields}
+  }
+`
+
+export const resolvers = {
+  Picture: {
+    async __resolveType(
+      parent: ImageSet,
+      context: { dataSources: DataSources }
+    ) {
+      //TODO: actually work out the types
+      if (parent.members.length === 3) return 'PictureFullBleed'
+      const standard = parent.members[0]
+      const { width, height } = await getImageDimensions(
+        standard,
+        context.dataSources
+      )
+      if (width < 350 || (width < height && width < 580)) {
+        return 'PictureInline'
+      }
+      return 'PictureStandard'
+    },
+    images(parent: ImageSet) {
+      const standard = parent.members[0]
+      const large =
+        parent.members.find((member) => member.minDisplayWidth === '980px') ||
+        standard
+      const small =
+        parent.members.find((member) => member.maxDisplayWidth === '490px') ||
+        standard
+
+      return { standard, small, large }
+    },
+    caption(parent: ImageSet) {
+      const standard = parent.members[0]
+      const elements = [standard.title, standard.copyright?.notice].filter(
+        Boolean
+      )
+      return elements.length ? elements.join(' ') : null
+    },
+
+    alt(parent: ImageSet) {
+      const standard = parent.members[0]
+      const fallback =
+        standard.type === ImageType.Graphic
+          ? 'A graphic with no description'
+          : ''
+      return (standard.description || fallback).replace(/"/g, '&quot;')
+    },
+
+    imageType(parent: ImageSet) {
+      return parent.members[0].type
+    },
+  },
+}

package/src/richText.ts

@@ -0,0 +1,62 @@
+import { unified, Plugin, PluggableList } from 'unified'
+import { gql } from 'graphql-tag'
+import rehypeParse from 'rehype-parse'
+import extractReferences from './unified-plugins/extract-references.js'
+import mapToAbstractTypes from './unified-plugins/map-to-abstract-types.js'
+
+import type { InternalContent } from './types/internal-content.js'
+
+type RichTextResolverData = {
+  source: string
+  value: string
+  contentApiData?: InternalContent
+}
+
+export const typeDef = gql`
+  type StructuredContent {
+    tree: JSON!
+    references: [Reference!]!
+  }
+
+  enum Source {
+    standfirst
+    summary
+  }
+
+  type RichText {
+    source: Source!
+    raw: String!
+    structured: StructuredContent!
+  }
+`
+
+export const resolvers = {
+  RichText: {
+    raw(parent: RichTextResolverData) {
+      return parent.value
+    },
+
+    async structured(parent: RichTextResolverData) {
+      const formatOutput: Plugin<[], Element, Element> =
+        function formatOutput() {
+          this.Compiler = (tree) => {
+            const references = this.data('references')
+            return { tree, references }
+          }
+        }
+
+      const pluggableList: PluggableList = [
+        mapToAbstractTypes,
+        extractReferences({ contentApiData: parent.contentApiData }),
+        formatOutput,
+      ]
+
+      const body = await unified()
+        .use(rehypeParse, { fragment: true })
+        .use(pluggableList)
+        .process(parent.value)
+
+      return body.result
+    },
+  },
+}

package/src/tags.ts

@@ -0,0 +1,237 @@
+import { select, matches } from 'hast-util-select'
+import { toText } from 'hast-util-to-text'
+import { gql } from 'graphql-tag'
+import { uuidFromUrl } from './helpers/metadata.js'
+import type * as hast from 'hast'
+import type { IObjectTypeResolver } from '@graphql-tools/utils'
+import type { DocumentNode } from 'graphql'
+import type {
+  InternalContent,
+  ImageSet as CAPIImageSet,
+} from './types/internal-content.js'
+
+export type Tag = object
+
+interface TagConstructor {
+  new (node: hast.Element, contentApiData?: InternalContent): Tag
+  match(node: hast.Element): boolean
+  typeDef?: DocumentNode
+  resolve?: IObjectTypeResolver<any, any, any>
+}
+
+function createTagWithoutReference(
+  name: string,
+  selector: string
+): TagConstructor {
+  const tag = class implements Tag {
+    static match(node: hast.Element) {
+      return matches(selector, node)
+    }
+  }
+
+  Object.defineProperty(tag, 'name', { value: name })
+
+  return tag
+}
+
+const Recommended: TagConstructor = class Recommended implements Tag {
+  uuid: string
+  title: string
+  teaserTitleOverride: string | null
+
+  static match(node: hast.Element) {
+    return node.tagName === 'recommended'
+  }
+
+  constructor(node: hast.Element) {
+    const ftContent = select('FTContent', node)
+    const recommendedTitle = select('RecommendedTitle', node)
+    if (
+      ftContent?.properties?.url !== undefined &&
+      typeof ftContent.properties.url === 'string'
+    ) {
+      this.uuid = uuidFromUrl(ftContent.properties.url)
+    } else {
+      this.uuid = ''
+    }
+
+    this.title = recommendedTitle ? toText(recommendedTitle) : 'Recommended'
+    this.teaserTitleOverride = ftContent ? toText(ftContent) : null
+  }
+
+  static resolve = {
+    async teaser(parent: Recommended, args, context) {
+      const content = await context.dataSources.capi.getContent(parent.uuid)
+      return {
+        ...content,
+        title: parent.teaserTitleOverride || content.title,
+      }
+    },
+  }
+
+  static typeDef = gql`
+    type Recommended {
+      teaser: Content!
+      title: String!
+    }
+  `
+}
+
+const ImageSet: TagConstructor = class ImageSet implements Tag {
+  static match(node: hast.Element) {
+    return (
+      node.tagName === 'ft-content' &&
+      node.properties?.type === 'http://www.ft.com/ontology/content/ImageSet'
+    )
+  }
+
+  url = ''
+  imageSet: CAPIImageSet | undefined
+  constructor(node: hast.Element, contentApiData?: InternalContent) {
+    if (typeof node?.properties?.url === 'string') {
+      this.url = node.properties.url ?? ''
+    }
+
+    const embed = contentApiData?.embeds?.find(
+      (embed: CAPIImageSet) => uuidFromUrl(embed.id) === uuidFromUrl(this.url)
+    )
+    this.imageSet = embed
+  }
+
+  static resolve = {
+    picture: (parent: ImageSet) => parent.imageSet,
+  }
+
+  static typeDef = gql`
+    type ImageSet {
+      picture: Picture!
+    }
+  `
+}
+
+const FTContent: TagConstructor = class FTContent implements Tag {
+  static match(node: hast.Element) {
+    return node.tagName === 'ft-content'
+  }
+
+  url: string
+  type: string
+
+  constructor(node: hast.Element) {
+    if (typeof node?.properties?.url === 'string') {
+      this.url = node.properties.url ?? ''
+    } else {
+      this.url = ''
+    }
+
+    if (typeof node?.properties?.type === 'string') {
+      this.type = node.properties.type ?? ''
+    } else {
+      this.type = ''
+    }
+  }
+
+  static typeDef = gql`
+    type FTContent {
+      type: String
+      url: String
+    }
+  `
+}
+
+const LayoutImage: TagConstructor = class LayoutImage implements Tag {
+  static match(node: hast.Element) {
+    return matches('img', node)
+  }
+
+  id: string
+  src: string
+  alt: string
+  longDesc: string
+  copyright: string
+
+  constructor(node: hast.Element) {
+    this.src = node.properties?.src as string
+    this.id = uuidFromUrl(this.src) || ''
+    this.alt = node.properties?.alt as string
+    this.longDesc = node.properties?.longDesc as string
+    this.copyright = node.properties?.dataCopyright as string
+  }
+
+  static resolve = {
+    picture(parent: LayoutImage): CAPIImageSet {
+      return {
+        id: 'layout-imageset',
+        description: parent.alt,
+        type: 'http://www.ft.com/ontology/content/ImageSet',
+        members: [
+          {
+            id: parent.id,
+            description: parent.alt,
+            title: parent.longDesc,
+            binaryUrl: parent.src,
+            copyright: {
+              notice: parent.copyright,
+            },
+            type: 'http://www.ft.com/ontology/content/Image',
+          },
+        ],
+      }
+    },
+  }
+
+  static typeDef = gql`
+    type LayoutImage {
+      picture: Picture!
+    }
+  `
+}
+
+const Link: TagConstructor = class Link implements Tag {
+  href: string
+
+  static match(node: hast.Element) {
+    return node.tagName === 'a'
+  }
+
+  constructor(node: hast.Element) {
+    if (typeof node?.properties?.href === 'string') {
+      this.href = node.properties.href ?? ''
+    } else {
+      this.href = ''
+    }
+  }
+
+  static typeDef = gql`
+    type Link {
+      href: String
+    }
+  `
+}
+
+const mapping: Record<string, TagConstructor> = {
+  Link,
+  Experimental: createTagWithoutReference('Experimental', 'experimental'),
+  ImageSet,
+  FTContent,
+  Recommended,
+  RecommendedTitle: createTagWithoutReference(
+    'RecommendedTitle',
+    'recommended-title'
+  ),
+  Paragraph: createTagWithoutReference('Paragraph', 'p'),
+  UnorderedList: createTagWithoutReference('UnorderedList', 'ul'),
+  ListItem: createTagWithoutReference('ListItem', 'li'),
+  Layout: createTagWithoutReference('Layout', '.n-content-layout, .layout'),
+  LayoutContainer: createTagWithoutReference(
+    'LayoutContainer',
+    '.n-content-layout__container, .layout-container'
+  ),
+  LayoutSlot: createTagWithoutReference(
+    'LayoutSlot',
+    '.n-content-layout__slot, .layout-slot'
+  ),
+  LayoutImage,
+}
+
+export default mapping

package/src/topper.ts

@@ -0,0 +1,228 @@
+import { gql } from 'graphql-tag'
+import { IResolvers } from '@graphql-tools/utils'
+import type { DataSources } from './datasources/index.js'
+import {
+  isOpinion,
+  getAuthor,
+  getDisplayConcept,
+  getBrandConcept,
+} from './helpers/metadata.js'
+import imageServiceUrl from './helpers/imageService.js'
+import type {
+  InternalContent,
+  Image,
+  ImageSet,
+} from './types/internal-content.js'
+
+const BasicTopperFields = `
+  headline: String!
+  intro: RichText
+  backgroundColour: TopperBackgroundColour
+  displayConcept: Concept
+`
+
+const TopperWithImagesFields = `
+  images: TopperImages
+`
+
+const TopperWithThemeFields = `
+  isLargeHeadline: Boolean
+  layout: String
+`
+
+const TopperWithHeadshotFields = `
+  headshot(width: Int, dpr: Int): String
+`
+
+/*
+ * List of acceptable topper background colours as supported in Origami https://github.com/Financial-Times/origami/tree/main/components/o-topper#colors
+ *
+ */
+export const typeDef = gql`
+  enum TopperBackgroundColour {
+    paper
+    wheat
+    white
+    black
+    claret
+    oxford
+    slate
+    crimson
+    sky
+  }
+
+  type TopperImages {
+    standard: Image
+    square: Image
+    wide: Image
+    fallback: Image
+  }
+
+  interface Topper {
+    ${BasicTopperFields}
+  }
+
+  interface TopperWithImages {
+    ${TopperWithImagesFields}
+  }
+
+  interface TopperWithTheme {
+    ${TopperWithThemeFields}
+  }
+
+  interface TopperWithHeadshot {
+    ${TopperWithHeadshotFields}
+  }
+
+  type BasicTopper implements Topper {
+    ${BasicTopperFields}
+  }
+
+  type SplitTextTopper implements Topper & TopperWithImages & TopperWithTheme {
+    ${BasicTopperFields}
+    ${TopperWithImagesFields}
+    ${TopperWithThemeFields}
+  }
+
+  type FullBleedTopper implements Topper & TopperWithImages & TopperWithTheme {
+    ${BasicTopperFields}
+    ${TopperWithImagesFields}
+    ${TopperWithThemeFields}
+  }
+
+  type OpinionTopper implements Topper & TopperWithTheme & TopperWithHeadshot {
+    ${BasicTopperFields}
+    ${TopperWithThemeFields}
+    ${TopperWithHeadshotFields}
+    columnist: Concept
+  }
+
+  type BrandedTopper implements Topper & TopperWithTheme {
+    ${BasicTopperFields}
+    ${TopperWithThemeFields}
+    brandConcept: Concept
+  }
+`
+
+export const resolvers: IResolvers<
+  unknown,
+  { systemCode: string; dataSources: DataSources },
+  never
+> = {
+  Topper: {
+    __resolveType(content: InternalContent): string {
+      if (content.topper?.layout?.startsWith('split')) {
+        return 'SplitTextTopper'
+      } else if (content.topper?.layout?.startsWith('full-bleed')) {
+        return 'FullBleedTopper'
+      } else if (isOpinion(content)) {
+        return 'OpinionTopper'
+      } else if (getBrandConcept(content)) {
+        return 'BrandedTopper'
+      } else {
+        return 'BasicTopper'
+      }
+    },
+    headline(content: InternalContent): string {
+      return content.topper?.headline || content.title
+    },
+
+    intro(content: InternalContent) {
+      return content.summary
+        ? {
+            value: content.summary.bodyXML,
+            source: 'summary',
+          }
+        : {
+            value: content.standfirst,
+            source: 'standfirst',
+          }
+    },
+    backgroundColour(content: InternalContent): string {
+      if (
+        content.topper?.backgroundColour &&
+        content.topper?.backgroundColour !== 'auto'
+      ) {
+        return content.topper.backgroundColour
+      } else {
+        return 'paper'
+      }
+    },
+    displayConcept(content: InternalContent) {
+      return getDisplayConcept(content)
+    },
+  },
+
+  TopperWithImages: {
+    images(content: InternalContent) {
+      const groupedImages: { [type: string]: Image } = {}
+
+      content.leadImages.forEach((leadImage) => {
+        groupedImages[leadImage.type] = leadImage.image
+      })
+      if (
+        content.mainImage?.type ===
+        'http://www.ft.com/ontology/content/ImageSet'
+      ) {
+        groupedImages.fallback = (content.mainImage as ImageSet).members[0]
+      } else if (
+        content.mainImage?.type === 'http://www.ft.com/ontology/content/Image'
+      ) {
+        groupedImages.fallback = content.mainImage
+      }
+
+      return groupedImages
+    },
+  },
+
+  TopperWithTheme: {
+    isLargeHeadline: () => false,
+    layout(content: InternalContent): string {
+      return content.topper?.layout || 'branded'
+    },
+  },
+
+  SplitTextTopper: {
+    isLargeHeadline: () => true,
+  },
+
+  FullBleedTopper: {
+    isLargeHeadline: () => true,
+  },
+
+  OpinionTopper: {
+    backgroundColour: () => 'sky',
+    async headshot(
+      content: InternalContent,
+      args,
+      context
+    ): Promise<string | undefined> {
+      const author = getAuthor(content)
+      if (!author) return
+      const authorId = author.id.replace(
+        /^https?:\/\/(?:www|api)\.ft\.com\/things?\//,
+        ''
+      )
+      const peopleData = await context.dataSources.capi.getPerson(authorId)
+
+      if (!peopleData || !peopleData._imageUrl) return
+
+      return imageServiceUrl({
+        url: peopleData._imageUrl,
+        systemCode: context.systemCode,
+        width: args.width || 150,
+        dpr: args.dpr,
+      })
+    },
+    columnist(content: InternalContent) {
+      return getAuthor(content)
+    },
+  },
+
+  BrandedTopper: {
+    backgroundColour: () => 'wheat',
+    brandConcept(content: InternalContent) {
+      return getBrandConcept(content)
+    },
+  },
+}

package/src/types/internal-content.d.ts

@@ -0,0 +1,78 @@
+export type Topper = {
+  headline: string
+  standfirst: string
+  backgroundColour: string
+  layout: string
+}
+
+export type ImageSet = {
+  id: string
+  type: 'http://www.ft.com/ontology/content/ImageSet'
+  description: string
+  members: Image[]
+}
+
+export type LeadImage = {
+  type: 'standard' | 'square' | 'wide'
+  id: string
+  image: Image
+}
+
+export type Annotation = {
+  id: string
+  apiUrl: string
+  directType: string
+  predicate: string
+  prefLabel: string
+  type: string
+  types: string[]
+}
+
+export type Image = {
+  id: string
+  type:
+    | 'http://www.ft.com/ontology/content/Image'
+    | 'http://www.ft.com/ontology/content/Graphic'
+  title: string
+  description: string
+  binaryUrl: string
+  copyright?: {
+    notice: string
+  }
+  minDisplayWidth?: string
+  maxDisplayWidth?: string
+  pixelWidth?: number
+  pixelHeight?: number
+}
+export type AccessLevel = 'premium' | 'subscribed' | 'registered' | 'free'
+export type AltTitle = { promotionalTitle?: string }
+export type AltStandfirst = { promotionalStandfirst?: string }
+
+export type InternalContent = {
+  id: string
+  type: string
+  types: string[]
+  webUrl: string
+  title: string
+  standfirst: string
+  byline: string
+  topper?: Topper
+  bodyXML: string
+  annotations: Annotation[]
+  summary?: {
+    bodyXML: string
+  }
+  mainImage: ImageSet | Image
+  leadImages: LeadImage[]
+  accessLevel: AccessLevel
+  embeds: ImageSet[]
+  alternativeTitles?: AltTitle
+  alternativeStandfirsts?: AltStandfirst
+  standout?: {
+    editorsChoice: boolean
+    exclusive: boolean
+    scoop: boolean
+  }
+  publishedDate: string
+  firstPublishedDate: string
+}

package/src/types/n-concept-ids.d.ts

@@ -0,0 +1,16 @@
+type ConceptIdMapping = Record<string, string>
+
+type ConceptTypeNames =
+  | 'genre'
+  | 'brand'
+  | 'topic'
+  | 'person'
+  | 'location'
+  | 'organisation'
+
+type ConceptTypeMappings = Record<ConceptTypeNames, ConceptIDMapping>
+
+declare module '@financial-times/n-concept-ids' {
+  const map: ConceptTypeMappings
+  export default map
+}

package/src/types/n-display-metadata.d.ts

@@ -0,0 +1 @@
+declare module '@financial-times/n-display-metadata'