Posted by UK Prime Minister on Tuesday, October 25, 2022
Posted by UK Prime Minister on Tuesday, October 25, 2022
" + } + } + } + ] + } + } + ] + } + }, + { + "type": "subheadline", + "model": { + "blocks": [ + { + "type": "text", + "model": { + "blocks": [ + { + "type": "paragraph", + "model": { + "text": "Fifth Test", + "blocks": [ + { + "type": "fragment", + "model": { + "text": "Fifth Test", + "attributes": [] + } + } + ] + } + } + ] + } + } + ] + } + }, + { + "type": "social", + "model": { + "source": "https://www.instagram.com/p/CiK2qRqtmjA/?utm_source=ig_web_copy_link", + "providerName": "Instagram", + "blocks": [ + { + "type": "renditions", + "model": { + "locator": "urn:bbc:optimo:social:74bf1d97-a4f1-43ea-8467-47c1e25826cb", + "blocks": [ + { + "type": "aresOEmbed", + "model": { + "oembed": { + "version": "1.0", + "author_name": "bbc6music", + "provider_name": "Instagram", + "provider_url": "https://www.instagram.com/", + "thumbnail_url": "https://scontent.cdninstagram.com/v/t51.2885-15/305114878_5408824352567542_9080036515091428792_n.jpg?stp=dst-jpg_e35_s640x640_sh0.08&_nc_ht=scontent.cdninstagram.com&_nc_cat=110&_nc_ohc=AcVlwsq5xK0AX85SsHD&edm=AMO9-JQAAAAA&ccb=7-5&oh=00_AT8efoKsBbbOr35Ct554efjuG5bj0HcQTs2Gob2WUtu9qA&oe=635872A4&_nc_sid=b9f2ee", + "thumbnail_width": 640, + "thumbnail_height": 640, + "html": "@cuppymusic Cupcakes, You don watch my full interview for BBC Pidgin? How you see am? 🙊💖✨#BBCPidgin #CuppyOnAMission #CuppyxBBC
♬ original sound - Cuppy
", + "width": 658 + } + } + } + ] + } + } + ] + } + } + ] + } + }, + "promo": { + "locators": { + "optimoUrn": "urn:bbc:optimo:asset:c8pd7gx243po", + "canonicalUrl": "https://www.bbc.com/pidgin/articles/c8pd7gx243po" + }, + "timestamp": 1666707859180, + "suitableForSyndication": true, + "language": "pcm", + "headlines": { + "seoHeadline": "Single Facebook Post Video Embed Test", + "promoHeadline": { + "blocks": [ + { + "type": "text", + "model": { + "blocks": [ + { + "type": "paragraph", + "model": { + "text": "Multiple Facebook Post Embed Test", + "blocks": [ + { + "type": "fragment", + "model": { + "text": "Multiple Facebook Post Embed Test", + "attributes": [] + } + } + ] + } + } + ] + } + } + ] + } + }, + "images": {}, + "summary": { + "blocks": [ + { + "type": "text", + "model": { + "blocks": [ + { + "type": "paragraph", + "model": { + "text": "", + "blocks": [ + { + "type": "fragment", + "model": { + "text": "", + "attributes": [] + } + } + ] + } + } + ] + } + } + ] + }, + "passport": { + "language": "pcm", + "home": "http://www.bbc.co.uk/ontologies/passport/home/Pidgin", + "locator": "urn:bbc:optimo:asset:c8pd7gx243po", + "availability": "AVAILABLE", + "taggings": [ + { + "predicate": "http://www.bbc.co.uk/ontologies/bbc/infoClass", + "value": "http://www.bbc.co.uk/things/0db2b959-cbf8-4661-965f-050974a69bb5#id" + } + ], + "schemaVersion": "1.4.0", + "publishedState": "PUBLISHED", + "predicates": { + "infoClass": [ + { + "value": "http://www.bbc.co.uk/things/0db2b959-cbf8-4661-965f-050974a69bb5#id", + "type": "infoClass" + } + ] + } + }, + "id": "urn:bbc:ares::article:c8pd7gx243po", + "type": "optimo" + }, + "relatedContent": { + "site": { + "subType": "site", + "name": "Pidgin", + "uri": "/pidgin", + "type": "simple" + }, + "groups": [] + } +} diff --git a/package.json b/package.json index 2abce64f2fb..8b7903d2c3f 100644 --- a/package.json +++ b/package.json @@ -14,28 +14,12 @@ "@emotion/sheet": "1.2.0", "@emotion/utils": "1.2.0", "@optimizely/js-sdk-utils": "0.4.0", - "ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz", - "ansi-regex": "5.0.1", - "browserslist": "4.20.3", - "css-what": "6.1.0", - "follow-redirects": "1.14.9", "glob-parent": "6.0.2", - "immer": "9.0.15", - "json-schema": "0.4.0", - "nanoid": "3.3.4", - "node-fetch": "2.6.7", - "node-forge": "1.3.1", - "nth-check": "2.0.1", - "postcss": "8.4.17", "prismjs": "1.28.0", "react-is": "17.0.2", - "simple-get": "4.0.1", "trim": "1.0.1", - "minimist": "1.2.7", - "async": "3.2.4", - "terser": "5.14.2", - "moment": "2.29.4", - "@testing-library/dom": "8.16.1" + "loader-utils": "2.0.3", + "winston@3.8.2": "patch:winston@npm:3.8.2#.yarn/patches/winston-npm-3.8.2-2035e9cac4.patch" }, "scripts": { "type-check": "tsc", @@ -52,13 +36,13 @@ "cypress:interactive": "cypress open", "cypress:3rdParty": "yarn cypress -- --project ./3rdPartyCypress/.", "cypress:adhoc": "yarn cypress:interactive -- --project ./AdHocCypress/.", - "setupDevEnv": "cp envConfig/local.env .env && cat envConfig/secret.env >> .env || echo 'You will not have access to topics'", + "setupDevEnv": "cp envConfig/local.env .env && rm -rf envConfig/secret.env && ./scripts/checkSecretEnvVariables.sh", "dev": "yarn setupDevEnv && rm -rf build && run-p webpack:dev:client webpack:dev:server", "lighthouse": "./scripts/lighthouseRun.sh", "postshrinkwrap": "test -z $CI && ./scripts/packagelockHttps.sh; git update-index --assume-unchanged .env", "prepare": "husky install", "preinstall": "node scripts/check-package-manager.js", - "start": "NODE_ENV=production node build/server.js", + "start": "NODE_ENV=production node --max-old-space-size=3500 build/server.js", "stop": "./scripts/killApp.sh", "storybook": "node .storybook/buildFontPreloads && start-storybook -p 9001 -s .storybook/static -c .storybook", "test": "yarn build && yarn test:local", @@ -134,7 +118,7 @@ "react-router-dom": "5.3.4", "url-parse": "1.5.10", "uuid": "8.3.2", - "winston": "3.7.2", + "winston": "patch:winston@3.8.2#./patches/winston-file-descriptor.patch", "xmldoc": "1.1.2" }, "devDependencies": { diff --git a/patches/winston-file-descriptor.patch b/patches/winston-file-descriptor.patch new file mode 100644 index 00000000000..54223137b81 --- /dev/null +++ b/patches/winston-file-descriptor.patch @@ -0,0 +1,48 @@ +diff --git a/lib/winston/transports/file.js b/lib/winston/transports/file.js +index 60af7f5806f7de9dafcdb88bbcc215e426c879b9..2802601ad73b24aabe966de652d17dae40d61b95 100644 +--- a/lib/winston/transports/file.js ++++ b/lib/winston/transports/file.js +@@ -89,6 +89,11 @@ module.exports = class File extends TransportStream { + this._opening = false; + this._ending = false; + ++ // https://github.com/winstonjs/winston/issues/2100 ++ // Array to collect write streams created in this transport ++ // for destruction later ++ this._writeStreams = []; ++ + if (this.dirname) this._createLogDirIfNotExist(this.dirname); + this.open(); + } +@@ -400,6 +405,13 @@ module.exports = class File extends TransportStream { + debug('stat done: %s { size: %s }', this.filename, size); + this._size = size; + this._dest = this._createStream(this._stream); ++ ++ // https://github.com/winstonjs/winston/issues/2100 ++ // Collect the write stream created here - at some point a new stream is created and assigned to ++ // this._dest before _this.cleanupStream is called; this ensures we collect all streams we need to ++ // cleanup to prevent a file descriptor leak. ++ this._writeStreams.push(this._dest); ++ + this._opening = false; + this.once('open', () => { + if (this._stream.eventNames().includes('rotate')) { +@@ -502,7 +514,16 @@ module.exports = class File extends TransportStream { + */ + _cleanupStream(stream) { + stream.removeListener('error', this._onError); +- ++ ++ // https://github.com/winstonjs/winston/issues/2100 ++ // In testing it was found more than one stream is created beyond the one passed to this function; ++ // this logic ensures any streams are destroyed to prevent a file descriptor leak - ++ // the cause of additional stream is still unknown ++ let streamToClose = this._writeStreams.pop(); ++ while (streamToClose) { ++ streamToClose.destroy(); ++ streamToClose = this._writeStreams.pop(); ++ } + return stream; + } + diff --git a/scripts/checkSecretEnvVariables.sh b/scripts/checkSecretEnvVariables.sh new file mode 100755 index 00000000000..cc5081bf3f1 --- /dev/null +++ b/scripts/checkSecretEnvVariables.sh @@ -0,0 +1,3 @@ +if [ -z "$BFF_PATH" ]; then + echo No BFF_PATH set as environment variable, you will not have access to topics; +fi diff --git a/src/app/components/EmbedConsentBanner/ConsentBanner.styles.tsx b/src/app/components/EmbedConsentBanner/ConsentBanner.styles.tsx index f2f5439757d..a1b3a9dd1ce 100644 --- a/src/app/components/EmbedConsentBanner/ConsentBanner.styles.tsx +++ b/src/app/components/EmbedConsentBanner/ConsentBanner.styles.tsx @@ -6,7 +6,6 @@ export default { css({ backgroundColor: palette.WHITE, padding: `${pixelsToRem(16)}rem`, - minHeight: 280, display: 'flex', flexDirection: 'column', justifyContent: 'center', diff --git a/src/app/components/EmbedConsentBanner/ConsentBanner.tsx b/src/app/components/EmbedConsentBanner/ConsentBanner.tsx index 79f2e6186f7..183fdb01817 100644 --- a/src/app/components/EmbedConsentBanner/ConsentBanner.tsx +++ b/src/app/components/EmbedConsentBanner/ConsentBanner.tsx @@ -6,17 +6,22 @@ import pathOr from 'ramda/src/pathOr'; import Text from '../Text'; import Paragraph from '../Paragraph'; import { ServiceContext } from '../../contexts/ServiceContext'; -import useViewTracker from '../../hooks/useViewTracker'; -import { SocialEmbedProviders } from '../../models/types/global'; import { Translations } from '../../models/types/translations'; +import useViewTracker from '../../hooks/useViewTracker'; import consentBannerCss from './ConsentBanner.styles'; import { ConsentBannerProviders, getEventTrackingData } from '.'; -const defaultTranslations: Translations['socialEmbed']['consentBanner'] = { - heading: 'Allow [social_media_site] content?', - body: `This article contains content provided by [social_media_site]. We ask for your permission before anything is loaded, as they may be using cookies and other technologies. You may want to read [social_media_site] [link] cookie policy [/link] and [link] privacy policy [/link] before accepting. To view this content choose 'accept and continue'.`, - button: 'Accept and continue', +type BannerUrls = { + cookiesUrl: { + [key in ConsentBannerProviders]: string; + }; + privacyUrl: { + [key in ConsentBannerProviders]: string; + }; +}; + +const BANNER_URLS: BannerUrls = { cookiesUrl: { youtube: 'https://policies.google.com/technologies/cookies', tiktok: 'https://www.tiktok.com/legal/cookie-policy', @@ -27,12 +32,15 @@ const defaultTranslations: Translations['socialEmbed']['consentBanner'] = { }, }; -const getProviderName = (provider: SocialEmbedProviders) => { +const DEFAULT_TRANSLATIONS: Translations['socialEmbed']['consentBanner'] = { + heading: 'Allow [social_media_site] content?', + body: `This article contains content provided by [social_media_site]. We ask for your permission before anything is loaded, as they may be using cookies and other technologies. You may want to read [social_media_site] [link] cookie policy [/link] and [link] privacy policy [/link] before accepting. To view this content choose 'accept and continue'.`, + button: 'Accept and continue', +}; + +const getProviderName = (provider: ConsentBannerProviders) => { return { - instagram: 'Instagram', - twitter: 'Twitter', youtube: 'Google YouTube', - facebook: 'Facebook', tiktok: 'TikTok', }[provider]; }; @@ -43,35 +51,23 @@ const getTranslations = ( externalLinkText: string, ) => { const headingTranslations = pathOr( - defaultTranslations.heading, + DEFAULT_TRANSLATIONS.heading, ['socialEmbed', 'consentBanner', 'heading'], translations, ); const bodyTranslations = pathOr( - defaultTranslations.body, + DEFAULT_TRANSLATIONS.body, ['socialEmbed', 'consentBanner', 'body'], translations, ); const buttonTranslations = pathOr( - defaultTranslations.button, + DEFAULT_TRANSLATIONS.button, ['socialEmbed', 'consentBanner', 'button'], translations, ); - const cookiesUrl = pathOr( - defaultTranslations.cookiesUrl[provider], - ['socialEmbed', 'consentBanner', 'cookiesUrl', provider], - translations, - ); - - const privacyUrl = pathOr( - defaultTranslations.privacyUrl[provider], - ['socialEmbed', 'consentBanner', 'privacyUrl', provider], - translations, - ); - const providerName = getProviderName(provider); const providerNameDelimiter = '[social_media_site]'; @@ -96,6 +92,9 @@ const getTranslations = ( }; } + const cookiesUrl = BANNER_URLS.cookiesUrl?.[provider]; + const privacyUrl = BANNER_URLS.privacyUrl?.[provider]; + const linkHtmlElements = [ linkTextElements.length > 0 && cookiesUrl && ( { }; export default { - title: 'NewComponents/Heading', + title: 'New Components/Heading', Component: HeadingStory, decorators: [withKnobs, withServicesKnob()], parameters: { diff --git a/src/app/components/InlineLink/index.stories.tsx b/src/app/components/InlineLink/index.stories.tsx index 2cbde4e4c07..08f972f65a2 100644 --- a/src/app/components/InlineLink/index.stories.tsx +++ b/src/app/components/InlineLink/index.stories.tsx @@ -76,7 +76,7 @@ export const InlineLinkInsideText = ({ }; export default { - title: 'NewComponents/InlineLink', + title: 'New Components/InlineLink', Component: InternalInlineLink, decorators: [withKnobs, withServicesKnob()], parameters: { diff --git a/src/app/components/Paragraph/index.stories.tsx b/src/app/components/Paragraph/index.stories.tsx index 0a3dceb20c0..a4e906c119e 100644 --- a/src/app/components/Paragraph/index.stories.tsx +++ b/src/app/components/Paragraph/index.stories.tsx @@ -74,7 +74,7 @@ const ParagraphStory = ({ service, variant, text }: Props) => { }; export default { - title: 'NewComponents/Paragraph', + title: 'New Components/Paragraph', Component: ParagraphStory, decorators: [withKnobs, withServicesKnob()], parameters: { diff --git a/src/app/components/Text/index.stories.tsx b/src/app/components/Text/index.stories.tsx index 6c9b5e413e2..9dbbfd834d7 100644 --- a/src/app/components/Text/index.stories.tsx +++ b/src/app/components/Text/index.stories.tsx @@ -75,7 +75,7 @@ const TextStory = ({ service, variant, text }: Props) => { }; export default { - title: 'NewComponents/Text', + title: 'New Components/Text', Component: TextStory, decorators: [withKnobs, withServicesKnob()], parameters: { diff --git a/src/app/legacy/components/Promo/media-icon.jsx b/src/app/legacy/components/Promo/media-icon.jsx index 9f0a39e0c63..75db6247eb4 100644 --- a/src/app/legacy/components/Promo/media-icon.jsx +++ b/src/app/legacy/components/Promo/media-icon.jsx @@ -39,9 +39,9 @@ const formatChildren = children => { }; const MediaIcon = ({ script, service, children, type }) => { - if (!type) return null; + if (!type || !mediaIcons[type]) return null; return ( -
+
Content is not available
`; +exports[`SocialEmbedContainer Canonical should render a Facebook Post block and unmount correctly 1`] = ` +@media (max-width: 14.9375rem) { + .emotion-0 { + padding: 0 0.5rem; + margin-left: 0%; + } +} + +@media (min-width: 15rem) and (max-width: 24.9375rem) { + .emotion-0 { + padding: 0 0.5rem; + margin-left: 0%; + } +} + +@media (min-width: 25rem) and (max-width: 37.4375rem) { + .emotion-0 { + padding: 0 1rem; + margin-left: 0%; + } +} + +@media (min-width: 37.5rem) and (max-width: 62.9375rem) { + .emotion-0 { + padding: 0 1rem; + margin-left: 0%; + } +} + +@media (min-width: 63rem) and (max-width: 79.9375rem) { + .emotion-0 { + margin-left: 20%; + } +} + +@media (min-width: 80rem) { + .emotion-0 { + margin-left: 40%; + } +} + +@supports (display: grid) { + .emotion-0 { + display: block; + width: initial; + margin: 0; + } + + @media (max-width: 14.9375rem) { + .emotion-0 { + grid-template-columns: repeat(6, 1fr); + grid-column-end: span 6; + padding: 0 0.5rem; + grid-column-start: 1; + } + } + + @media (min-width: 15rem) and (max-width: 24.9375rem) { + .emotion-0 { + grid-template-columns: repeat(6, 1fr); + grid-column-end: span 6; + padding: 0 0.5rem; + grid-column-start: 1; + } + } + + @media (min-width: 25rem) and (max-width: 37.4375rem) { + .emotion-0 { + grid-template-columns: repeat(6, 1fr); + grid-column-end: span 6; + padding: 0 1rem; + grid-column-start: 1; + } + } + + @media (min-width: 37.5rem) and (max-width: 62.9375rem) { + .emotion-0 { + grid-template-columns: repeat(5, 1fr); + grid-column-end: span 5; + padding: 0 1rem; + grid-column-start: 1; + } + } + + @media (min-width: 63rem) and (max-width: 79.9375rem) { + .emotion-0 { + grid-template-columns: repeat(5, 1fr); + grid-column-end: span 5; + grid-column-start: 2; + } + } + + @media (min-width: 80rem) { + .emotion-0 { + grid-template-columns: repeat(10, 1fr); + grid-column-end: span 10; + grid-column-start: 5; + } + } +} + +.emotion-2 { + margin-bottom: 1.5rem; + max-width: 31.25rem; + min-height: 14rem; +} + +.emotion-4 { + position: relative; +} + +.emotion-6 { + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + font-size: 0.875rem; + line-height: 1rem; + background-color: #FFFFFF; + border: 0.125rem solid #222222; + display: block; + left: 0; + line-height: 1; + padding: 0.75rem; + position: absolute; + -webkit-text-decoration: none; + text-decoration: none; + top: 0; + z-index: 10; +} + +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-6 { + line-height: 1.125rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-6 { + font-size: 0.8125rem; + } +} + +.emotion-6 span { + color: #222222; +} + +.emotion-6:hover span, +.emotion-6:focus span { + color: #B80000; + border-bottom: 2px solid #B80000; +} + +.emotion-6:not(:focus):not(:active) { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; +} + +.emotion-8 { + margin: 0; + background-color: transparent; +} + +.emotion-10 { + position: relative; + overflow: hidden; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +.emotion-10 .fb_iframe_widget { + position: unset; +} + +.emotion-10 .fb_iframe_widget>span { + position: unset; +} + +.emotion-10 iframe { + background-color: white; + left: 0; + top: 0; + height: 100%!important; + width: 100%!important; + position: absolute!important; +} + +.emotion-12 { + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + font-size: 0.875rem; + line-height: 1rem; + color: #545658; + padding: 0.5rem 0; +} + +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-12 { + line-height: 1.125rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-12 { + font-size: 0.8125rem; + } +} + +.emotion-12>span { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; +} + +.emotion-14 { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; +} + ++++ Had a fantastic time at @thescriptofficial concert in LA this week, what a gig!! Have a great US tour guys! Don’t miss... +
+ Posted by + + Rick Astley + + on + + Friday, April 1, 2022 + +
+ End of Facebook content +
++ +++ Saw another great gig in LA this week, I went to see Inhaler in the @belascola and they were fantastic! Have a great show in New York tomorrow guys! Rick x @inhalerdublin +
+ Posted by + + Rick Astley + + on Saturday, April 2, 2022 +
+ End of Facebook content +
+Had a fantastic time at @thescriptofficial concert in LA this week, what a gig!! Have a great US tour guys! Don’t miss...
Posted by Rick Astley on Friday, April 1, 2022
Saw another great gig in LA this week, I went to see Inhaler in the @belascola and they were fantastic! Have a great show in New York tomorrow guys! Rick x @inhalerdublin
Posted by Rick Astley on Saturday, April 2, 2022
{detokenise(text, dictionary)}
++ {detokenise(text, dictionary)} +
-+
Sorry but we're having trouble displaying this content
`; +exports[`AmpSocialEmbed should render correctly for Facebook 1`] = ` +.emotion-0 { + position: relative; +} + +.emotion-2 { + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + font-size: 0.875rem; + line-height: 1rem; + background-color: #FFFFFF; + border: 0.125rem solid #222222; + display: block; + left: 0; + line-height: 1; + padding: 0.75rem; + position: absolute; + -webkit-text-decoration: none; + text-decoration: none; + top: 0; + z-index: 10; +} + +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-2 { + line-height: 1.125rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-2 { + font-size: 0.8125rem; + } +} + +.emotion-2 span { + color: #222222; +} + +.emotion-2:hover span, +.emotion-2:focus span { + color: #B80000; + border-bottom: 2px solid #B80000; +} + +.emotion-2:not(:focus):not(:active) { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; +} + +.emotion-4 { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; +} + ++
Sorry but we're having trouble displaying this content
-+
Sorry but we're having trouble displaying this content
जनता कर्फ्यूला टाळ्या आणि शंखनादाची साथ
Posted by BBC News Marathi on Sunday, March 22, 2020