@financial-times/dotcom-ui-shell 7.3.1 → 7.3.2

package/src/components/LinkedData.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+export type TLinkedDataProps = {
+  jsonLd?: { [key: string]: any }
+}
+
+const LinkedData = ({ jsonLd }: TLinkedDataProps) => (
+  <React.Fragment>
+    {Array.isArray(jsonLd) &&
+      jsonLd.map((data, i) => (
+        <script
+          key={`jsonld-${i}`}
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(data)
+          }}
+        />
+      ))}
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify({
+          '@context': 'http://schema.org',
+          '@type': 'WebSite',
+          name: 'Financial Times',
+          alternateName: 'FT.com',
+          url: 'http://www.ft.com'
+        })
+      }}
+    />
+  </React.Fragment>
+)
+
+LinkedData.defaultProps = {
+  jsonLd: []
+}
+
+export default LinkedData

package/src/components/OpenGraph.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import flattenOpenGraphData, { TOpenGraphData } from '../lib/flattenOpenGraphData'
+
+export type TOpenGraphProps = {
+  openGraph?: TOpenGraphData
+}
+
+const OpenGraph = ({ openGraph }: TOpenGraphProps) => (
+  <React.Fragment>
+    {flattenOpenGraphData(openGraph).map(([property, content], i) => (
+      <meta key={`og-${i}`} property={property} content={content} />
+    ))}
+  </React.Fragment>
+)
+
+OpenGraph.defaultProps = {
+  openGraph: {}
+}
+
+export default OpenGraph

package/src/components/ResourceHints.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import mimeTypes from 'mime-types'
+import getResourceType from '../lib/getResourceType'
+
+export type TResourceHintsProps = {
+  resourceHints?: string[]
+}
+
+const ResourceHints = (props: TResourceHintsProps) => {
+  return (
+    <React.Fragment>
+      {/*
+        Spoor is the API which receives the tracking events sent by the o-tracking library
+        <https://github.com/Financial-Times/o-tracking>
+      */}
+      <link rel="preconnect" href="https://spoor-api.ft.com" />
+      {/*
+        The session API is used to validate users and retrieve information about them
+        <https://github.com/Financial-Times/next-session>
+      */}
+      <link rel="preconnect" href="https://session-next.ft.com" crossOrigin="use-credentials" />
+      {/*
+        The ads API is used to fetch ad targeting information for the current page
+        <https://github.com/Financial-Times/next-ads-api>
+      */}
+      <link rel="preconnect" href="https://ads-api.ft.com" />
+      {/*
+        The Google Publisher Tag library (GPT) is hosted here which is used to deliver ads
+        <https://github.com/Financial-Times/o-ads/blob/HEAD/src/js/ad-servers/gpt.js>
+      */}
+      <link rel="preconnect" href="https://securepubads.g.doubleclick.net" />
+
+      {props.resourceHints.map((resource, i) => {
+        const contentType = getResourceType(resource)
+        const mimeType =
+          mimeTypes.lookup(resource) ||
+          mimeTypes.lookup(resource.match(/(?<=font_format=)([a-z0-9]+)/)?.[0]) ||
+          null
+
+        const attributes: React.LinkHTMLAttributes<HTMLLinkElement> = {
+          as: contentType,
+          href: resource,
+          type: mimeType
+        }
+
+        // Fonts are expected to be fetched anonymously by the browser, and the preload request is
+        // only made anonymous by using the crossorigin attribute.
+        // <https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content>
+        if (contentType === 'font') {
+          attributes.crossOrigin = 'anonymous'
+        }
+
+        return <link key={`hint-${i}`} rel="preload" {...attributes} />
+      })}
+    </React.Fragment>
+  )
+}
+
+ResourceHints.defaultProps = {
+  resourceHints: []
+}
+
+export default ResourceHints

package/src/components/Shell.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import Content, { TContentProps } from './Content'
+import DocumentHead, { TDocumentHeadProps } from './DocumentHead'
+import StyleSheets, { TStylesheetProps } from './StyleSheets'
+import ResourceHints, { TResourceHintsProps } from './ResourceHints'
+import { AppContextEmbed, TAppContextProps } from '@financial-times/dotcom-ui-app-context'
+import {
+  fontFaceURLs,
+  documentStyles,
+  LoadFontsEmbed,
+  loadCustomFontsClassNames
+} from '@financial-times/dotcom-ui-base-styles'
+import { FlagsEmbed, TFlagsEmbedProps } from '@financial-times/dotcom-ui-flags'
+import { Bootstrap, TBootstrapProps } from '@financial-times/dotcom-ui-bootstrap'
+import * as polyfillService from '@financial-times/dotcom-ui-polyfill-service'
+import formatAttributeNames, { TAttributeData } from '../lib/formatAttributeNames'
+import GTMHead from './GTMHead'
+import GTMBody from './GTMBody'
+
+type TShellProps = TDocumentHeadProps &
+  TAppContextProps &
+  TStylesheetProps &
+  TResourceHintsProps &
+  TContentProps &
+  TFlagsEmbedProps & {
+    scripts?: string[]
+    children?: any
+    initialProps?: any
+    bodyAttributes?: TAttributeData
+    htmlAttributes?: TAttributeData
+  }
+
+function Shell(props: TShellProps) {
+  const bootstrapProps: TBootstrapProps = {
+    coreScripts: [polyfillService.core()],
+    enhancedScripts: [polyfillService.enhanced(), ...props.scripts]
+  }
+
+  const resourceHints = [
+    polyfillService.enhanced(),
+    // There is no need to include stylesheets here as any <link rel="stylesheet" /> tags
+    // should be found by the browser's speculative parser.
+    ...props.scripts,
+    ...props.resourceHints,
+    ...fontFaceURLs
+  ]
+
+  return (
+    <html
+      {...formatAttributeNames(props.htmlAttributes)}
+      lang="en-GB"
+      className={`no-js core ${loadCustomFontsClassNames}`}
+      data-o-component="o-typography"
+      style={documentStyles}
+    >
+      <head>
+        <DocumentHead {...props} />
+        <ResourceHints resourceHints={resourceHints} />
+        {/* TODO: refactor initial props, flags data, and context data to the bottom of body */}
+        <script
+          id="initial-props"
+          type="application/json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(props.initialProps) }}
+        />
+        <StyleSheets
+          criticalStyles={props.criticalStyles}
+          stylesheets={props.stylesheets}
+          asyncStylesheets={props.asyncStylesheets}
+        />
+        <Bootstrap {...bootstrapProps} />
+        <GTMHead flags={props.flags} />
+        <LoadFontsEmbed />
+      </head>
+      <body {...formatAttributeNames(props.bodyAttributes)}>
+        <GTMBody flags={props.flags} />
+        <Content contents={props.contents || props.children} />
+        <AppContextEmbed appContext={props.appContext} />
+        <FlagsEmbed flags={props.flags} />
+      </body>
+    </html>
+  )
+}
+
+Shell.defaultProps = {
+  scripts: [],
+  stylesheets: [],
+  asyncStylesheets: [],
+  resourceHints: [],
+  htmlAttributes: {},
+  bodyAttributes: {}
+}
+
+export { Shell }
+export type { TShellProps }
+
+// Export sub-components to more-easily enable custom integrations
+export { DocumentHead, ResourceHints, Content }

package/src/components/StyleSheets.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import loadAsyncStylesheetsString from '../lib/loadAsyncStylesheets'
+
+export type TStylesheetProps = {
+  criticalStyles?: string
+  stylesheets?: string[]
+  asyncStylesheets?: string[]
+}
+
+const Stylesheets = ({ criticalStyles, stylesheets, asyncStylesheets }: TStylesheetProps) => (
+  <React.Fragment>
+    {criticalStyles && <style dangerouslySetInnerHTML={{ __html: criticalStyles }} />}
+    {Array.isArray(stylesheets) &&
+      stylesheets.map((stylesheet, i) => <link rel="stylesheet" key={`stylesheet-${i}`} href={stylesheet} />)}
+    {Array.isArray(asyncStylesheets) && !!asyncStylesheets.length && (
+      <React.Fragment>
+        <noscript>
+          {asyncStylesheets.map((stylesheet, i) => (
+            <link rel="stylesheet" href={stylesheet} key={`async-stylesheet-${i}`} />
+          ))}
+        </noscript>
+        <script
+          data-stylesheets={asyncStylesheets.join()}
+          dangerouslySetInnerHTML={{ __html: loadAsyncStylesheetsString }}></script>
+      </React.Fragment>
+    )}
+  </React.Fragment>
+)
+
+Stylesheets.defaultProps = {
+  stylesheets: [],
+  asyncStylesheets: []
+}
+
+export default Stylesheets

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components/Shell'

package/src/lib/flattenOpenGraphData.ts

@@ -0,0 +1,24 @@
+// Flattens a nested object into an array of key/value pairs
+// { foo: { bar: { baz: 123 } } } => [['foo:bar:baz', 123]]
+
+export type TOpenGraphData = {
+  [key: string]: any | any[] | TOpenGraphData
+}
+
+export default function flattenData(data: TOpenGraphData, prefix?: string): Array<string[]> {
+  const output = []
+
+  for (const [key, value] of Object.entries(data)) {
+    const property = prefix ? `${prefix}:${key}` : key
+
+    if (value && value.constructor === Object) {
+      output.push(...flattenData(value, property))
+    } else if (Array.isArray(value)) {
+      output.push(...value.map((value) => [property, value]))
+    } else {
+      output.push([property, value])
+    }
+  }
+
+  return output
+}

package/src/lib/formatAttributeNames.ts

@@ -0,0 +1,36 @@
+export type TAttributeData = {
+  [key: string]: string | number | boolean
+}
+
+export default function formatAttributeNames(data: TAttributeData = {}) {
+  const output = {}
+
+  for (const [key, value] of Object.entries(data)) {
+    const hyphenatedKey = hyphenateString(key)
+
+    // Let's render boolean data attributes properly
+    // as per https://github.com/Financial-Times/dotcom-page-kit/issues/370
+    if (hyphenatedKey.startsWith('data-') && typeof value === 'boolean') {
+      // Where react is concerned, a `true` boolean data attribute
+      // is one where the attribute value is an empty string (because
+      // it is not possible to render an attribute without a value),
+      // and a `false` boolean data attribute is one where the attribute
+      // has not been specified altogether
+      if (value) {
+        output[hyphenatedKey] = ''
+      }
+    } else {
+      output[hyphenatedKey] = value
+    }
+  }
+
+  return output
+}
+
+function hyphenateChar(char) {
+  return '-' + char.toLowerCase()
+}
+
+function hyphenateString(prop) {
+  return prop.replace(/([A-Z])/g, hyphenateChar)
+}

package/src/lib/getResourceType.ts

@@ -0,0 +1,34 @@
+import path from 'path'
+import url from 'url'
+
+const StyleFiles = new Set(['.css'])
+
+const ScriptFiles = new Set(['.js', '.mjs'])
+
+const ImageFiles = new Set(['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'])
+
+export default (file: string): string => {
+  // Always parse the file so that we can ignore any domain names, query strings etc.
+  // Node's old URL API is able to parse anything inc. filenames, paths, and URLs.
+  const { pathname } = url.parse(file)
+
+  const extension = path.extname(pathname)
+
+  if (StyleFiles.has(extension)) {
+    return 'style'
+  }
+
+  if (ScriptFiles.has(extension)) {
+    return 'script'
+  }
+
+  if (ImageFiles.has(extension)) {
+    return 'image'
+  }
+
+  if (file.includes('font_format=woff')) {
+    return 'font'
+  }
+
+  throw Error(`Unknown filename extension "${extension}`)
+}

package/src/lib/imageServiceIconURL.ts

@@ -0,0 +1,24 @@
+import querystring from 'querystring'
+
+function imageServiceIconURL(image: string, size: number, format = 'png'): string {
+  const serviceURL = 'https://www.ft.com/__origami/service/image/v2/images/raw/'
+
+  const serviceParameters = {
+    source: 'update-logos',
+    format: format,
+    width: size,
+    height: size
+  }
+
+  // Do not add width and height if format is svg because svg files scale automatically
+  if (format === 'svg') {
+    delete serviceParameters.width
+    delete serviceParameters.height
+  }
+
+  const queryString = querystring.stringify(serviceParameters)
+
+  return `${serviceURL}${encodeURIComponent(image)}?${queryString}`
+}
+
+export default imageServiceIconURL

package/src/lib/loadAsyncStylesheets.ts

@@ -0,0 +1,27 @@
+/*
+  Load stylesheets asyncronously. See: 
+   • https://www.filamentgroup.com/lab/load-css-simpler/
+   • https://w3c.github.io/preload/#example-5
+  
+  @NOTE: This is in ES5 syntax, because it's not compiled, because it's server-side code. 
+  (You don't need to compile server-side code because you get to set whichever version of node you want.)
+  Its stringified and given to the client via "dangerouslySetInnerHTML" in a <script> tag.
+  Because it runs in the client, it needs to be ES5 so it's compatible with older browsers.
+*/
+function loadAsyncStylesheets() {
+  var currentScript = document.scripts[document.scripts.length - 1]
+  var stylesheets = currentScript.getAttribute('data-stylesheets').split(',')
+
+  for (var i = 0, len = stylesheets.length; i < len; i++) {
+    var link = document.createElement('link')
+    link.href = stylesheets[i]
+    link.rel = 'stylesheet'
+    link.media = 'print' // <-- 'print' is intentional; on load, it changes to 'all'.
+    link.onload = function (event) {
+      var target = event.target as HTMLLinkElement
+      target.media = 'all'
+    }
+    currentScript.parentNode.insertBefore(link, currentScript)
+  }
+}
+export default '(' + loadAsyncStylesheets.toString() + ')()'