@newskit-render/core 1.54.0 → 1.66.0

package/config/index.ts

@@ -0,0 +1,85 @@
+const {
+  OKTA_CLIENT_ID,
+  OKTA_CLIENT_SECRET,
+  OKTA_DOMAIN,
+  NEWSKIT_API_ENV_URL,
+  NEWSKIT_API_X_API_KEY,
+  SITE_HOST,
+  OPTIMIZELY_SDK_KEY,
+  SITEMAP_FIRST_PUBLICATION_DATE,
+  SITEMAP_PUBLICATION_NAME,
+  NEW_RELIC_ENABLED,
+  EXPERIMENTATION_WEB,
+  SOURCEPOINT_ACCOUNT_ID,
+  SOURCEPOINT_PROPERTY_HREF,
+  TEALIUM_ACCOUNT_ID,
+  TEALIUM_PROFILE_ID,
+  TEALIUM_ENV,
+  TWITTER_USERNAME,
+  GSC_ID,
+  PUBLISHER,
+} = process?.env
+
+const requiredConfigFields: string[] = [
+  'SITE_HOST',
+  'NEWSKIT_API_ENV_URL',
+  'NEWSKIT_API_X_API_KEY',
+  'OKTA_CLIENT_ID',
+  'OKTA_CLIENT_SECRET',
+  'OKTA_DOMAIN',
+  'PUBLISHER',
+]
+const getSanitizedConfig = () => {
+  for (const key of requiredConfigFields) {
+    const value = process.env[key]
+    if (
+      typeof window == 'undefined' &&
+      (value === undefined || value.length <= 0)
+    ) {
+      throw new Error(`Missing key ${key} in env`)
+    }
+  }
+  return {
+    oktaClientId: OKTA_CLIENT_ID,
+    oktaClientSecret: OKTA_CLIENT_SECRET,
+    oktaDomain: OKTA_DOMAIN,
+    newskitApiEnvUrl: NEWSKIT_API_ENV_URL,
+    newskitApiXApiKey: NEWSKIT_API_X_API_KEY,
+    optimizelysdkKey: OPTIMIZELY_SDK_KEY,
+    siteHost: SITE_HOST,
+    sitemapFirstPublicationDate: SITEMAP_FIRST_PUBLICATION_DATE,
+    sitemapPublicationName: SITEMAP_PUBLICATION_NAME,
+    newRelicEnabled: NEW_RELIC_ENABLED,
+    experimentationWeb: EXPERIMENTATION_WEB,
+    sourcepointAccountId: SOURCEPOINT_ACCOUNT_ID,
+    sourcepointPropertyHref: SOURCEPOINT_PROPERTY_HREF,
+    tealiumAccountId: TEALIUM_ACCOUNT_ID,
+    tealiumProfileId: TEALIUM_PROFILE_ID,
+    tealiumEnv: TEALIUM_ENV,
+    twitterUsername: TWITTER_USERNAME,
+    gscId: GSC_ID,
+    publisher: PUBLISHER,
+  }
+}
+const config = getSanitizedConfig()
+export const {
+  oktaClientId,
+  oktaClientSecret,
+  oktaDomain,
+  newskitApiEnvUrl,
+  newskitApiXApiKey,
+  optimizelysdkKey,
+  siteHost,
+  sitemapFirstPublicationDate,
+  sitemapPublicationName,
+  newRelicEnabled,
+  experimentationWeb,
+  sourcepointAccountId,
+  sourcepointPropertyHref,
+  tealiumAccountId,
+  tealiumProfileId,
+  tealiumEnv,
+  twitterUsername,
+  gscId,
+  publisher,
+} = config

package/constants/index.ts

@@ -1 +1,3 @@
-export const ACCOUNT_QUERY_URL = `${process.env.SITE_HOST}/api/account/query`
+import { siteHost } from '../config'
+
+export const ACCOUNT_QUERY_URL = `${siteHost}/api/account/query`

package/cypress/e2e/account/accessibility.spec.js

@@ -22,39 +22,36 @@ const pages = [
   {
     url: '/account',
     name: 'Personal Details',
-    skip: { skipFailures: true }, // error being caused by newskit update - https://nidigitalsolutions.jira.com/browse/PPDSC-1864 - removed once fixed
   },
-  { url: '/account/edit/name', name: 'Name form', skip: null },
-  { url: '/account/edit/displayName', name: 'Display Name form', skip: null },
-  { url: '/account/edit/email', name: 'Email form', skip: null },
-  { url: '/account/edit/password', name: 'Password form', skip: null },
-  // error being caused by not handling new accounts without a phone - https://nidigitalsolutions.jira.com/browse/PPDSR-537 - remove once fixed
-  // { url: '/account/edit/mobile', name: 'Mobile phone form', skip: false },
-  // { url: '/account/edit/landline', name: 'Landline phone form', skip: false },
+  { url: '/account/edit/name', name: 'Name form' },
+  { url: '/account/edit/displayName', name: 'Display Name form' },
+  { url: '/account/edit/email', name: 'Email form' },
+  { url: '/account/edit/password', name: 'Password form' },
+  { url: '/account/edit/mobile', name: 'Mobile phone form' },
+  { url: '/account/edit/landline', name: 'Landline phone form' },
   {
     url: '/account/edit/address',
     name: 'Address form',
-    skip: { skipFailures: true }, // error being caused by Loqate, ignore at this time
+    skip: { skipFailures: true },
+    // error being caused by Loqate, ignore at this time
   },
   {
     url: '/account/subscription-and-billing',
     name: 'Subscription and Billing',
-    skip: { skipFailures: true }, // error being caused by newskit update - https://nidigitalsolutions.jira.com/browse/PPDSC-1864 - removed once fixed
-  },
-  {
-    url: '/account/payment',
-    name: 'Payment form',
-    skip: { skipFailures: true }, // error being caused by Stripe, ignore at this time
   },
+  // TODO: Urgerntly find the reason why this state is failing! Uncomment immediately after that
+  // {
+  //   url: '/account/payment',
+  //   name: 'Payment form',
+  //   skip: { skipFailures: true }, // error being caused by Stripe, ignore at this time
+  // },
   {
     url: '/account/newsletters-and-alerts',
     name: 'Newsletters and Alerts',
-    skip: { skipFailures: true }, // error being caused by newskit update - https://nidigitalsolutions.jira.com/browse/PPDSC-1864 - removed once fixed
   },
   {
     url: '/account/edit/commenting-notifications',
     name: 'Commenting Notifications form',
-    skip: null,
   },
 ]
 

package/helpers/logger.ts

@@ -1,5 +1,7 @@
+import { newRelicEnabled } from '../config'
+
 export const logger = () => {
-  if (process.env.NEW_RELIC_ENABLED === 'true') {
+  if (newRelicEnabled === 'true') {
     // Format Output logs to be properly logged for NewRelic
     const { log, error, warn, info } = console
 

package/helpers/mocks/articleMock.ts

@@ -45,7 +45,7 @@ export const relatedArticles = [
     href: imagePlaceholderHref('70x50'),
   },
   {
-    title: 'Royal Family',
+    title: 'Royal',
     tag: 'CORONAVIRUS',
     text:
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',

package/helpers/mocks/getUniversalArticleMock.ts

@@ -71,6 +71,19 @@ export default [
           },
           media: {
             crops: null,
+
+            accountId: 'brightcove-acc-id-mock',
+            videoId: 'video-id-mock',
+            posterImage: {
+              crops: [
+                {
+                  url:
+                    'https://localhost:3000/video-thumbnail-artwork-mock.jpg',
+                  alt: null,
+                  aspectRatio: null,
+                },
+              ],
+            },
           },
         },
       },

package/infrastructure/helm/values-dev.yaml

@@ -29,7 +29,7 @@ resources:
 environment: dev
 
 alb:
-  certificate: arn:aws:acm:eu-west-1:720262317718:certificate/a623e847-db59-4245-abd9-7a7f68bcd59d
+  certificate: arn:aws:acm:eu-west-1:720262317718:certificate/eb7cf157-d5c3-4d6a-9c2c-70714526a653
   # needs to work with external-dns in EKS cluster
   hostname: <% PROJECT_NAME >.ceng-dev.newsuk.tech
 

package/infrastructure/helm/values-pr.yaml

@@ -29,7 +29,7 @@ resources:
 environment: pr
 
 alb:
-  certificate: arn:aws:acm:eu-west-1:720262317718:certificate/a623e847-db59-4245-abd9-7a7f68bcd59d
+  certificate: arn:aws:acm:eu-west-1:720262317718:certificate/eb7cf157-d5c3-4d6a-9c2c-70714526a653
   # needs to work with external-dns in EKS cluster
   hostname: <% PROJECT_NAME >.ceng-dev.newsuk.tech
   prSuffix: ''

package/infrastructure/helm/values-prod.yaml

@@ -29,7 +29,7 @@ resources:
 environment: prod
 
 alb:
-  certificate: arn:aws:acm:eu-west-1:474887192380:certificate/3d1137c3-2c58-4aeb-8d01-4927c43271ee
+  certificate: arn:aws:acm:eu-west-1:474887192380:certificate/ec49c52e-1347-4150-a577-276b397f2c53
   # needs to work with external-dns in EKS cluster
   hostname: <% PROJECT_NAME >.prod.ceng.newsuk.tech
 

package/jest.config.js

@@ -31,6 +31,7 @@ const customJestConfig = {
     '<rootDir>/cypress/',
     '<rootDir>/node_modules/',
     '<rootDir>/.next/',
+    '<rootDir>/config/'
   ],
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.54.0",
+  "version": "1.66.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -33,19 +33,19 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.16",
-    "@newskit-render/api": "^0.23.0",
-    "@newskit-render/auth": "^0.34.0",
-    "@newskit-render/checkout": "^0.29.0",
-    "@newskit-render/feature-flags": "^0.15.0",
-    "@newskit-render/feed": "^0.10.0",
-    "@newskit-render/my-account": "^0.158.0",
-    "@newskit-render/shared-components": "^0.51.0",
-    "@newskit-render/standalone-components": "^0.6.1",
-    "@newskit-render/validation": "^0.41.0",
+    "@newskit-render/api": "^0.32.0",
+    "@newskit-render/auth": "^0.41.0",
+    "@newskit-render/checkout": "^0.41.0",
+    "@newskit-render/feature-flags": "^0.22.0",
+    "@newskit-render/feed": "^0.20.0",
+    "@newskit-render/my-account": "^0.171.0",
+    "@newskit-render/shared-components": "^0.58.0",
+    "@newskit-render/standalone-components": "^0.18.0",
+    "@newskit-render/validation": "^0.48.0",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",
     "newrelic": "7.1.0",
-    "newskit": "5.1.1",
+    "newskit": "5.4.5",
     "next": "12.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

package/pages/[section]/[articleId]/[articleSlug].tsx

@@ -16,6 +16,11 @@ import ArticlePage, { UniversalArticle } from '../../../components/article'
 import { fetchUser } from '../../../helpers/getUser'
 import { ACCOUNT_QUERY_URL } from '../../../constants'
 import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
+import {
+  siteHost as configSiteHost,
+  twitterUsername as configTwitterUsername,
+  gscId as configGscId,
+} from '../../../config'
 
 export type ArticleSlug = {
   universalArticle: UniversalArticle
@@ -79,10 +84,10 @@ export async function getServerSideProps(context) {
   return {
     props: {
       universalArticle: data.universalArticle,
-      articleURL: `${process.env.SITE_HOST}/${section}/${articleId}/${articleSlug}`,
-      twitterUsername: process.env.TWITTER_USERNAME || '',
-      siteHost: process.env.SITE_HOST || '',
-      gscId: process.env.GSC_ID || '',
+      articleURL: `${configSiteHost}/${section}/${articleId}/${articleSlug}`,
+      twitterUsername: configTwitterUsername || '',
+      siteHost: configSiteHost || '',
+      gscId: configGscId || '',
       showAds: true,
       recommendations,
       user,

package/pages/[section]/[articleId]/relatedArticles.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import newrelic from 'newrelic'
+import { getAcsCookie, ClientTypes, Publisher } from '@newskit-render/api'
+import {
+  recommendationsProvider,
+  Article,
+} from '@newskit-render/standalone-components'
+import { Block, Cell, TitleBar } from 'newskit'
+import { UserData } from '@newskit-render/my-account'
+import { fetchUser } from '../../../helpers/getUser'
+import { ACCOUNT_QUERY_URL } from '../../../constants'
+import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
+import Layout from '../../../components/layout'
+import { BasicRow } from '../../../components/section/layouts'
+
+export type RelatedArticles = {
+  user?: UserData
+  recommendations: Article[]
+}
+
+const RelatedArticlesPage: React.FC<RelatedArticles> = ({
+  user,
+  recommendations,
+}) => (
+  <Layout dataTestId="SectionGrid" user={user}>
+    <Cell xs={12} md={10} mdOffset={1} data-testid="SectionCell">
+      <Block spaceStack="space080" />
+      <Block spaceStack="space080">
+        <TitleBar
+          overrides={{
+            spaceInset: {
+              xs: 'spaceInsetSquish000',
+            },
+            heading: {
+              typographyPreset: {
+                xs: 'editorialHeadline050',
+                md: 'editorialHeadline060',
+                xl: 'editorialHeadline070',
+              },
+              stylePreset: 'inkContrast',
+            },
+          }}
+        >
+          Related Articles
+        </TitleBar>
+      </Block>
+      <BasicRow
+        colums={{ xs: '1fr', md: '1fr 1fr', lg: '1fr 1fr 1fr' }}
+        articles={recommendations}
+      />
+    </Cell>
+  </Layout>
+)
+
+export async function getServerSideProps(context) {
+  newrelic.setTransactionName('RelatedArticlesPage')
+  console.warn('context:')
+  console.warn(context.req && context.req.headers)
+
+  const {
+    params: { articleId },
+  } = context
+
+  const acsCookie = context.req.headers.cookie
+    ? getAcsCookie(ClientTypes.main, context.req.headers.cookie)
+    : ''
+
+  const [recommendations, user] = await Promise.all([
+    await recommendationsProvider({ articleId, publisher: Publisher.SUN_UK }),
+    await fetchUser(acsCookie, ACCOUNT_QUERY_URL),
+  ])
+
+  addCacheHeaders(context.res)
+
+  const recommendationsToShow = recommendations.slice(0, 18)
+  return {
+    props: {
+      recommendations: recommendationsToShow,
+      showAds: true,
+      user,
+    },
+  }
+}
+
+export default RelatedArticlesPage

package/pages/_app.tsx

@@ -12,15 +12,17 @@ import {
 import { AppContextProvider, AppContext } from '../app-context/AppContext'
 import { logger } from '../helpers/logger'
 
+import { optimizelysdkKey } from '../config'
+
 if (!process.browser) {
   // eslint-disable-next-line global-require
   require('newrelic')
   logger()
 }
 
-if (process.env.OPTIMIZELY_SDK_KEY) {
+if (optimizelysdkKey) {
   createFeatureFlagsInstance({
-    optimizelyConfig: { sdkKey: process.env.OPTIMIZELY_SDK_KEY },
+    optimizelyConfig: { sdkKey: optimizelysdkKey },
   })
 }
 
@@ -295,7 +297,7 @@ MyApp.getInitialProps = async ({ Component, ctx }) => {
     pageProps = await Component.getInitialProps(ctx)
   }
 
-  if (process.env.OPTIMIZELY_SDK_KEY) {
+  if (optimizelysdkKey) {
     const featureFlags = await getFeatureFlags()
     return { featureFlags, pageProps }
   }

package/pages/_document.tsx

@@ -11,15 +11,14 @@ import { ExperimentationWeb, Consent, Tealium } from 'newskit'
 import Helmet from 'react-helmet'
 import newrelic from 'newrelic'
 import { getSubStringBetween } from '../components/utils'
-
-const {
-  EXPERIMENTATION_WEB,
-  SOURCEPOINT_ACCOUNT_ID,
-  SOURCEPOINT_PROPERTY_HREF,
-  TEALIUM_ACCOUNT_ID,
-  TEALIUM_PROFILE_ID,
-  TEALIUM_ENV,
-} = process.env
+import {
+  experimentationWeb,
+  sourcepointAccountId,
+  sourcepointPropertyHref,
+  tealiumAccountId,
+  tealiumProfileId,
+  tealiumEnv,
+} from '../config'
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
@@ -53,20 +52,20 @@ export default class MyDocument extends Document {
               ),
             }}
           />
-          {EXPERIMENTATION_WEB &&
+          {experimentationWeb &&
             featureFlags &&
             featureFlags.experimentation_web_flag && (
               <ExperimentationWeb
-                optimizelyWebConfig={{ scriptCdn: EXPERIMENTATION_WEB }}
+                optimizelyWebConfig={{ scriptCdn: experimentationWeb }}
                 reactHelmet={Helmet}
               />
             )}
           {helmet.script.toComponent()}
-          {SOURCEPOINT_ACCOUNT_ID && (
+          {sourcepointAccountId && (
             <Consent
               sourcePointConfigTCFV2={{
-                accountId: Number(SOURCEPOINT_ACCOUNT_ID),
-                propertyHref: SOURCEPOINT_PROPERTY_HREF,
+                accountId: Number(sourcepointAccountId),
+                propertyHref: sourcepointPropertyHref,
               }}
             />
           )}
@@ -85,11 +84,11 @@ export default class MyDocument extends Document {
           )}
         </Head>
         <body>
-          {TEALIUM_ACCOUNT_ID && (
+          {tealiumAccountId && (
             <Tealium
-              accountId={TEALIUM_ACCOUNT_ID}
-              profileId={TEALIUM_PROFILE_ID as string}
-              env={TEALIUM_ENV as string}
+              accountId={tealiumAccountId}
+              profileId={tealiumProfileId as string}
+              env={tealiumEnv as string}
             />
           )}
           <Main />

package/pages/api/auth/[...nextauth].ts

@@ -1,7 +1,6 @@
 import createAuthRoute from '@newskit-render/auth/providers'
 import { NextApiRequest, NextApiResponse } from 'next'
-
-const { OKTA_CLIENT_ID, OKTA_CLIENT_SECRET, OKTA_DOMAIN } = process.env
+import { oktaClientId, oktaClientSecret, oktaDomain } from '../../../config'
 
 export default (req: NextApiRequest, res: NextApiResponse) =>
-  createAuthRoute(req, res, { OKTA_CLIENT_ID, OKTA_CLIENT_SECRET, OKTA_DOMAIN })
+  createAuthRoute(req, res, { oktaClientId, oktaClientSecret, oktaDomain })

package/pages/api/feed.ts

@@ -1,20 +1,18 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 import { rssFeed, UpdatePeriod } from '@newskit-render/feed'
 import { Publisher } from '@newskit-render/api'
+import { publisher, siteHost } from '../../config'
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) =>
   rssFeed({
     res,
     publisher:
-      process.env.PUBLISHER === 'DEMO'
-        ? Publisher.VIRGIN
-        : (process.env.PUBLISHER as Publisher),
-    domain: process.env.SITE_HOST,
+      publisher === 'DEMO' ? Publisher.VIRGIN : (publisher as Publisher),
+    domain: siteHost,
     titeAttributes: {
       title: 'Demo Site',
       link: '/feed',
       description: 'Newskit Render Demo site',
-      lastBuildDate: new Date().toUTCString(),
       language: 'en-US',
       updatePeriod: 'hourly' as UpdatePeriod,
       updateFrequency: 1,

package/pages/api/news-sitemap.ts

@@ -1,7 +1,7 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 import { newsSitemap } from '@newskit-render/feed'
 import { Publisher } from '@newskit-render/api'
-
+import { publisher, siteHost, sitemapPublicationName } from '../../config'
 /* We do not have sitemap date for Demo so using Virgin,
  * This can be removed and replace with just - publisher: process.env.PUBLISHER as PublisherGroup, in created projects
  */
@@ -10,11 +10,9 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) =>
   newsSitemap({
     res,
     publisher:
-      process.env.PUBLISHER === 'DEMO'
-        ? Publisher.VIRGIN
-        : (process.env.PUBLISHER as Publisher),
-    domain: new URL(process.env.SITE_HOST as string).host,
-    publicationName: process.env.SITEMAP_PUBLICATION_NAME as string,
+      publisher === 'DEMO' ? Publisher.VIRGIN : (publisher as Publisher),
+    domain: new URL(siteHost as string).host,
+    publicationName: sitemapPublicationName as string,
   })
 
 export default handler

package/pages/api/sitemap.ts

@@ -1,7 +1,12 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 import { genericSitemap, CustomStaticPage } from '@newskit-render/feed'
 import { Publisher } from '@newskit-render/api'
-
+import {
+  publisher,
+  siteHost,
+  sitemapFirstPublicationDate,
+  sitemapPublicationName,
+} from '../../config'
 /* We do not have sitemap date for Demo so using Virgin,
  * This can be removed and replace with just - publisher: process.env.PUBLISHER as PublisherGroup, in created projects
  */
@@ -16,12 +21,10 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) =>
     res,
     query: req.query,
     publisher:
-      process.env.PUBLISHER === 'DEMO'
-        ? Publisher.VIRGIN
-        : (process.env.PUBLISHER as Publisher),
-    domain: new URL(process.env.SITE_HOST as string).host,
-    firstArticleDate: process.env.SITEMAP_FIRST_PUBLICATION_DATE as string,
-    publicationName: process.env.SITEMAP_PUBLICATION_NAME as string,
+      publisher === 'DEMO' ? Publisher.VIRGIN : (publisher as Publisher),
+    domain: new URL(siteHost as string).host,
+    firstArticleDate: sitemapFirstPublicationDate as string,
+    publicationName: sitemapPublicationName as string,
     customStaticPageCollection: defaultCustomStaticPagesCollection,
   })
 

package/pages/index.tsx

@@ -12,6 +12,7 @@ import { addCacheHeaders } from '../helpers/addCacheHeaders'
 
 export async function getServerSideProps(context) {
   newrelic.setTransactionName('Homepage')
+  console.warn('config:')
   console.warn('context:')
   console.warn(context.req && context.req.headers)
 

package/pages/player/brightcove.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { VideoPlayer } from 'newskit'
+import { useRouter } from 'next/router'
+
+const BrightcovePlayer: React.FC<{}> = () => {
+  const router = useRouter()
+
+  const videoConfig = {
+    'data-account': router.query.account_id as string,
+    'data-player': router.query.player_id as string,
+    'data-video-id': router.query.video_id as string,
+    'data-embed': 'default',
+    controls: true,
+  }
+
+  return <VideoPlayer config={videoConfig} />
+}
+
+export default BrightcovePlayer

package/pages/preview/[articleId]/version/[versionId]/index.tsx

@@ -22,6 +22,11 @@ import {
   relatedArticles,
 } from '../../../../../helpers/mocks/articleMock'
 import { addCacheHeaders } from '../../../../../helpers/addCacheHeaders'
+import {
+  siteHost as configSiteHost,
+  twitterUsername as configTwitterUsername,
+  gscId as configGscId,
+} from '../../../../../config'
 
 const PreviewArticle = ({
   universalArticle,
@@ -104,10 +109,10 @@ export async function getServerSideProps(context) {
     props: {
       universalArticle: data.universalArticle,
       session,
-      articleURL: `${process.env.SITE_HOST}/preview/${articleId}/version/${versionId}`,
-      twitterUsername: process.env.TWITTER_USERNAME || '',
-      siteHost: process.env.SITE_HOST || '',
-      gscId: process.env.GSC_ID || '',
+      articleURL: `${configSiteHost}/preview/${articleId}/version/${versionId}`,
+      twitterUsername: configTwitterUsername || '',
+      siteHost: configSiteHost || '',
+      gscId: configGscId || '',
     },
   }
 }

package/queries/getRadioPosts.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client'
 
 export const GET_RADIO_POSTS = gql`
-  query GetRadioPosts($pageCursors: String!) {
+  query getRadioPosts($pageCursors: String!) {
     radioPosts(cursor: $pageCursors) {
       data {
         dateCreated

package/queries/getUniversalArticle.ts

@@ -49,6 +49,19 @@ export const GET_UNIVERSAL_ARTICLE = gql`
             aspectRatio
           }
         }
+        ... on Video {
+          accountId
+          videoId
+          posterImage {
+            ... on Image {
+              crops {
+                url
+                alt
+                aspectRatio
+              }
+            }
+          }
+        }
       }
     }
   }