From 834295254c89cb85c56b9c472102dfa426139a7a Mon Sep 17 00:00:00 2001 From: Charlotte Date: Wed, 30 Aug 2023 17:57:26 +0100 Subject: [PATCH] trial using context for renderingTarget --- .../decorators/RenderingTargetDecorator.js | 11 +++++++ .../src/components/ArticleBody.tsx | 4 --- .../components/ArticleHeadline.stories.tsx | 26 --------------- .../src/components/ArticleHeadline.tsx | 7 ---- .../src/components/ArticleMeta.stories.tsx | 13 -------- .../src/components/ArticleMeta.test.tsx | 2 -- .../src/components/ArticleMeta.tsx | 4 --- .../src/components/ArticlePage.tsx | 1 + .../src/components/BylineLink.test.tsx | 3 -- .../src/components/BylineLink.tsx | 16 ++++------ .../src/components/Contributor.test.tsx | 2 -- .../src/components/Contributor.tsx | 16 ++-------- .../src/components/GetMatchNav.importable.tsx | 4 --- .../src/components/HeadlineByline.stories.tsx | 12 ------- .../src/components/HeadlineByline.tsx | 13 +------- .../src/components/RenderingTarget.tsx | 4 +++ .../src/layouts/CommentLayout.tsx | 12 +------ dotcom-rendering/src/layouts/DecideLayout.tsx | 32 ++++++++----------- .../src/layouts/ImmersiveLayout.tsx | 14 +------- .../src/layouts/InteractiveLayout.tsx | 12 +------ dotcom-rendering/src/layouts/LiveLayout.tsx | 14 ++------ .../src/layouts/NewsletterSignupLayout.tsx | 10 +----- .../src/layouts/ShowcaseLayout.tsx | 14 ++------ .../src/layouts/StandardLayout.tsx | 6 +--- dotcom-rendering/src/lib/ArticleRenderer.tsx | 9 +++--- .../src/server/render.article.apps.tsx | 13 +++++--- .../src/server/render.article.web.tsx | 15 +++++---- 27 files changed, 71 insertions(+), 218 deletions(-) create mode 100644 dotcom-rendering/.storybook/decorators/RenderingTargetDecorator.js create mode 100644 dotcom-rendering/src/components/RenderingTarget.tsx diff --git a/dotcom-rendering/.storybook/decorators/RenderingTargetDecorator.js b/dotcom-rendering/.storybook/decorators/RenderingTargetDecorator.js new file mode 100644 index 00000000000..f38d17a97f6 --- /dev/null +++ b/dotcom-rendering/.storybook/decorators/RenderingTargetDecorator.js @@ -0,0 +1,11 @@ +import { RenderingTargetContext } from '../../src/components/RenderingTarget'; + +export const RenderingTargetDecorator = (Story, { args }) => { + return ( + + + + ); +}; + +export default RenderingTargetDecorator; diff --git a/dotcom-rendering/src/components/ArticleBody.tsx b/dotcom-rendering/src/components/ArticleBody.tsx index c04988b07fc..36ee2760922 100644 --- a/dotcom-rendering/src/components/ArticleBody.tsx +++ b/dotcom-rendering/src/components/ArticleBody.tsx @@ -10,7 +10,6 @@ import { revealStyles } from '../lib/revealStyles'; import type { ServerSideTests, Switches } from '../types/config'; import type { TableOfContentsItem } from '../types/frontend'; import type { Palette } from '../types/palette'; -import type { RenderingTarget } from '../types/renderingTarget'; import type { TagType } from '../types/tag'; import { Island } from './Island'; import { RecipeMultiplier } from './RecipeMultiplier.importable'; @@ -47,7 +46,6 @@ type Props = { tableOfContents?: TableOfContentsItem[]; lang?: string; isRightToLeftLang?: boolean; - renderingTarget: RenderingTarget; }; const globalH2Styles = (display: ArticleDisplay) => css` @@ -139,7 +137,6 @@ export const ArticleBody = ({ tableOfContents, lang, isRightToLeftLang = false, - renderingTarget, }: Props) => { const isInteractive = format.design === ArticleDesign.Interactive; const palette = decidePalette(format); @@ -240,7 +237,6 @@ export const ArticleBody = ({ isAdFreeUser={isAdFreeUser} isSensitive={isSensitive} abTests={abTests} - renderingTarget={renderingTarget} /> diff --git a/dotcom-rendering/src/components/ArticleHeadline.stories.tsx b/dotcom-rendering/src/components/ArticleHeadline.stories.tsx index 0bace46f79b..c1f50204551 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.stories.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.stories.tsx @@ -38,7 +38,6 @@ export const ArticleStory = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -65,7 +64,6 @@ export const Feature = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -98,7 +96,6 @@ export const ShowcaseInterview = () => { tags={[]} webPublicationDateDeprecated="" byline="Byline text" - renderingTarget="Web" /> { tags={[]} webPublicationDateDeprecated="" byline="" - renderingTarget="Web" /> { tags={[]} webPublicationDateDeprecated="" byline="Byline text" - renderingTarget="Web" /> { tags={[]} webPublicationDateDeprecated="" byline="Byline text" - renderingTarget="Web" /> { tags={[]} webPublicationDateDeprecated="" byline="" - renderingTarget="Web" /> { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -350,7 +342,6 @@ export const Analysis = () => { format={format(theme)} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -381,7 +372,6 @@ export const Gallery = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -408,7 +398,6 @@ export const Review = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -435,7 +424,6 @@ export const PhotoEssay = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -462,7 +450,6 @@ export const Explainer = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -489,7 +476,6 @@ export const Quiz = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -516,7 +502,6 @@ export const Recipe = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -543,7 +528,6 @@ export const Immersive = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -570,7 +554,6 @@ export const ImmersiveNoMainMedia = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -602,7 +585,6 @@ export const ImmersiveComment = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -629,7 +611,6 @@ export const Editorial = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -656,7 +637,6 @@ export const MatchReport = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -683,7 +663,6 @@ export const SpecialReport = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -710,7 +689,6 @@ export const SpecialReportAlt = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -737,7 +715,6 @@ export const LiveBlog = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -777,7 +754,6 @@ export const DeadBlog = () => { format={format} tags={[]} webPublicationDateDeprecated="" - renderingTarget="Web" /> @@ -805,7 +781,6 @@ export const ReviewWithoutStars = () => { tags={[]} webPublicationDateDeprecated="" byline="Byline text" - renderingTarget="Web" /> { }, ]} webPublicationDateDeprecated="2020-03-28T07:27:19.000Z" - renderingTarget="Web" /> diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index b619be13847..ddf3e82c2c1 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.tsx @@ -13,7 +13,6 @@ import { getAgeWarning } from '../lib/age-warning'; import { decidePalette } from '../lib/decidePalette'; import { getZIndex } from '../lib/getZIndex'; import type { Palette } from '../types/palette'; -import type { RenderingTarget } from '../types/renderingTarget'; import type { TagType } from '../types/tag'; import { AgeWarning } from './AgeWarning'; import { DesignTag } from './DesignTag'; @@ -28,7 +27,6 @@ type Props = { hasStarRating?: boolean; hasAvatar?: boolean; isMatch?: boolean; - renderingTarget: RenderingTarget; }; const topPadding = css` @@ -342,7 +340,6 @@ export const ArticleHeadline = ({ hasStarRating, hasAvatar, isMatch, - renderingTarget, }: Props) => { const palette = decidePalette(format); switch (format.display) { @@ -418,7 +415,6 @@ export const ArticleHeadline = ({ format={format} byline={byline} tags={tags} - renderingTarget={renderingTarget} /> )} @@ -574,7 +570,6 @@ export const ArticleHeadline = ({ format={format} byline={byline} tags={tags} - renderingTarget={renderingTarget} /> )} @@ -665,7 +660,6 @@ export const ArticleHeadline = ({ format={format} byline={byline} tags={tags} - renderingTarget={renderingTarget} /> )} @@ -706,7 +700,6 @@ export const ArticleHeadline = ({ format={format} byline={byline} tags={tags} - renderingTarget={renderingTarget} /> )} diff --git a/dotcom-rendering/src/components/ArticleMeta.stories.tsx b/dotcom-rendering/src/components/ArticleMeta.stories.tsx index 56dd6f14f36..a41e7207f39 100644 --- a/dotcom-rendering/src/components/ArticleMeta.stories.tsx +++ b/dotcom-rendering/src/components/ArticleMeta.stories.tsx @@ -85,7 +85,6 @@ export const ArticleStory = () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" /> ); @@ -128,7 +127,6 @@ export const BrandingStory = () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" /> ); @@ -156,7 +154,6 @@ export const FeatureStory = () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" /> ); @@ -183,7 +180,6 @@ export const FeatureWithMismatchedContributor = () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" /> ); @@ -211,7 +207,6 @@ export const FeatureStoryWithSmallBylineImage = () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" /> ); @@ -238,7 +233,6 @@ export const SpecialReportStory = () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" /> ); @@ -265,7 +259,6 @@ export const SpecialReportAlt = () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" /> ); @@ -292,7 +285,6 @@ export const CommentStory = () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" /> ); @@ -319,7 +311,6 @@ export const InterviewStory = () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" /> ); @@ -346,7 +337,6 @@ export const ImmersiveStory = () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" /> ); @@ -373,7 +363,6 @@ export const TwoContributorsStory = () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" /> ); @@ -402,7 +391,6 @@ export const DeadBlogStory = () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" /> ))} @@ -431,7 +419,6 @@ export const Dateline = () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" /> ); diff --git a/dotcom-rendering/src/components/ArticleMeta.test.tsx b/dotcom-rendering/src/components/ArticleMeta.test.tsx index efff27f0944..ddefa7c6874 100644 --- a/dotcom-rendering/src/components/ArticleMeta.test.tsx +++ b/dotcom-rendering/src/components/ArticleMeta.test.tsx @@ -33,7 +33,6 @@ describe('ArticleMeta', () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" />, ); @@ -74,7 +73,6 @@ describe('ArticleMeta', () => { shortUrlId="" ajaxUrl="" showShareCount={true} - renderingTarget="Web" />, ); diff --git a/dotcom-rendering/src/components/ArticleMeta.tsx b/dotcom-rendering/src/components/ArticleMeta.tsx index c44da76f2ff..6ce405a31d6 100644 --- a/dotcom-rendering/src/components/ArticleMeta.tsx +++ b/dotcom-rendering/src/components/ArticleMeta.tsx @@ -14,7 +14,6 @@ import { getSoleContributor } from '../lib/byline'; import { decidePalette } from '../lib/decidePalette'; import type { Branding as BrandingType } from '../types/branding'; import type { Palette } from '../types/palette'; -import type { RenderingTarget } from '../types/renderingTarget'; import type { TagType } from '../types/tag'; import { Avatar } from './Avatar'; import { Branding } from './Branding.importable'; @@ -42,7 +41,6 @@ type Props = { ajaxUrl: string; showShareCount: boolean; messageUs?: MessageUs; - renderingTarget: RenderingTarget; }; const meta = (format: ArticleFormat) => { @@ -315,7 +313,6 @@ export const ArticleMeta = ({ ajaxUrl, showShareCount, messageUs, - renderingTarget, }: Props) => { const soleContributor = getSoleContributor(tags, byline); const authorName = soleContributor?.title ?? 'Author Image'; @@ -380,7 +377,6 @@ export const ArticleMeta = ({ byline={byline} tags={tags} format={format} - renderingTarget={renderingTarget} /> )} {messageUs && diff --git a/dotcom-rendering/src/components/ArticlePage.tsx b/dotcom-rendering/src/components/ArticlePage.tsx index 44835312a09..8bf60c58e4d 100644 --- a/dotcom-rendering/src/components/ArticlePage.tsx +++ b/dotcom-rendering/src/components/ArticlePage.tsx @@ -129,6 +129,7 @@ export const ArticlePage = (props: WebProps | AppProps) => { )} + {renderingTarget === 'Apps' ? ( { design: ArticleDesign.Standard, theme: Pillar.News, }} - renderingTarget="Web" />, ); @@ -145,7 +144,6 @@ describe('BylineLink', () => { design: ArticleDesign.Standard, theme: Pillar.News, }} - renderingTarget="Web" />, ); @@ -181,7 +179,6 @@ describe('BylineLink', () => { design: ArticleDesign.Standard, theme: Pillar.News, }} - renderingTarget="Web" />, ); diff --git a/dotcom-rendering/src/components/BylineLink.tsx b/dotcom-rendering/src/components/BylineLink.tsx index fd489cba84a..55f502657a4 100644 --- a/dotcom-rendering/src/components/BylineLink.tsx +++ b/dotcom-rendering/src/components/BylineLink.tsx @@ -1,19 +1,19 @@ import { ArticleDesign } from '@guardian/libs'; +import { useContext } from 'react'; import { getBylineComponentsFromTokens, getSoleContributor, isContributor, } from '../lib/byline'; -import type { RenderingTarget } from '../types/renderingTarget'; import type { TagType } from '../types/tag'; import { FollowWrapper } from './FollowWrapper.importable'; import { Island } from './Island'; +import { RenderingTargetContext } from './RenderingTarget'; type Props = { byline: string; tags: TagType[]; format: ArticleFormat; - renderingTarget: RenderingTarget; }; const applyCleverOrderingForMatching = (titles: string[]): string[] => { @@ -107,12 +107,7 @@ function removeComma(bylinePart: string) { : bylinePart; } -export const BylineLink = ({ - byline, - tags, - format, - renderingTarget, -}: Props) => { +export const BylineLink = ({ byline, tags, format }: Props) => { const tokens = bylineAsTokens(byline, tags); const soleContributor = getSoleContributor(tags, byline); const hasSoleContributor = !!soleContributor; @@ -137,10 +132,13 @@ export const BylineLink = ({ ); }); + const renderingTargetContext = useContext(RenderingTargetContext); + return ( <> {renderedTokens} - {renderingTarget === 'Apps' && soleContributor !== undefined ? ( + {renderingTargetContext === 'Apps' && + soleContributor !== undefined ? ( { title: 'Observer Design', }, ]} - renderingTarget="Web" />, ); @@ -51,7 +50,6 @@ describe('Contributor', () => { title: 'Observer Design', }, ]} - renderingTarget="Web" />, ); diff --git a/dotcom-rendering/src/components/Contributor.tsx b/dotcom-rendering/src/components/Contributor.tsx index 117bb4358f4..861c5958f77 100644 --- a/dotcom-rendering/src/components/Contributor.tsx +++ b/dotcom-rendering/src/components/Contributor.tsx @@ -6,7 +6,6 @@ import { getSoleContributor } from '../lib/byline'; import { decidePalette } from '../lib/decidePalette'; import TwitterIcon from '../static/icons/twitter.svg'; import type { Palette } from '../types/palette'; -import type { RenderingTarget } from '../types/renderingTarget'; import type { TagType } from '../types/tag'; import { BylineLink } from './BylineLink'; @@ -96,15 +95,9 @@ type Props = { byline: string; tags: TagType[]; format: ArticleFormat; - renderingTarget: RenderingTarget; }; -export const Contributor = ({ - byline, - tags, - format, - renderingTarget, -}: Props) => { +export const Contributor = ({ byline, tags, format }: Props) => { const palette = decidePalette(format); const { twitterHandle } = getSoleContributor(tags, byline) ?? {}; @@ -127,12 +120,7 @@ export const Contributor = ({ bylineColorStyles(palette, format), ]} > - + )} {!!twitterHandle && ( diff --git a/dotcom-rendering/src/components/GetMatchNav.importable.tsx b/dotcom-rendering/src/components/GetMatchNav.importable.tsx index 934e3bff527..095ff645a5f 100644 --- a/dotcom-rendering/src/components/GetMatchNav.importable.tsx +++ b/dotcom-rendering/src/components/GetMatchNav.importable.tsx @@ -3,7 +3,6 @@ import { ArticleDesign } from '@guardian/libs'; import { from } from '@guardian/source-foundations'; import type { SWRConfiguration } from 'swr'; import { useApi } from '../lib/useApi'; -import type { RenderingTarget } from '../types/renderingTarget'; import type { TagType } from '../types/tag'; import { ArticleHeadline } from './ArticleHeadline'; import { cleanTeamData } from './GetMatchStats.importable'; @@ -16,7 +15,6 @@ type Props = { format: ArticleFormat; tags: TagType[]; webPublicationDateDeprecated: string; - renderingTarget: RenderingTarget; }; const Loading = () => ; @@ -39,7 +37,6 @@ export const GetMatchNav = ({ format, tags, webPublicationDateDeprecated, - renderingTarget, }: Props) => { const options: SWRConfiguration = { errorRetryCount: 1 }; // If this blog is live then poll for new stats @@ -82,7 +79,6 @@ export const GetMatchNav = ({ webPublicationDateDeprecated } isMatch={true} - renderingTarget={renderingTarget} /> ); diff --git a/dotcom-rendering/src/components/HeadlineByline.stories.tsx b/dotcom-rendering/src/components/HeadlineByline.stories.tsx index 776e406f385..7edef52b17e 100644 --- a/dotcom-rendering/src/components/HeadlineByline.stories.tsx +++ b/dotcom-rendering/src/components/HeadlineByline.stories.tsx @@ -22,7 +22,6 @@ export const interviewStory = () => { }} byline="Jane Smith" tags={[]} - renderingTarget="Web" /> ); }; @@ -38,7 +37,6 @@ export const commentStory = () => { }} byline="Jane Smith" tags={[]} - renderingTarget="Web" /> ); }; @@ -54,7 +52,6 @@ export const specialStory = () => { }} byline="Jane Smith" tags={[]} - renderingTarget="Web" /> ); }; @@ -80,7 +77,6 @@ export const commentWithBylineImageStory = () => { 'https://i.guim.co.uk/img/uploads/2018/01/10/Marina_Hyde,_L.png?width=300&quality=85&auto=format&fit=max&s=6476202195914952e48ef41aadb116ff', }, ]} - renderingTarget="Web" /> ); }; @@ -102,7 +98,6 @@ export const immersiveStory = () => { title: 'Jane Smith', }, ]} - renderingTarget="Web" /> ); }; @@ -130,7 +125,6 @@ export const ImmersiveComment = () => { title: 'Jane Smith', }, ]} - renderingTarget="Web" /> ); @@ -163,7 +157,6 @@ export const MultipleStory = () => { title: 'Nae Bevan', }, ]} - renderingTarget="Web" /> ); }; @@ -190,7 +183,6 @@ export const MultipleDuplicateStory = () => { title: 'Duncan Campbell', }, ]} - renderingTarget="Web" /> ); }; @@ -207,7 +199,6 @@ export const noBylineStory = () => { }} byline="" tags={[]} - renderingTarget="Web" /> ); }; @@ -229,7 +220,6 @@ export const LabsImmersive = () => { title: 'Jane Smith', }, ]} - renderingTarget="Web" /> ); }; @@ -251,7 +241,6 @@ export const LabsComment = () => { title: 'Jane Smith', }, ]} - renderingTarget="Web" /> ); }; @@ -273,7 +262,6 @@ export const LabsInterview = () => { title: 'Jane Smith', }, ]} - renderingTarget="Web" /> ); }; diff --git a/dotcom-rendering/src/components/HeadlineByline.tsx b/dotcom-rendering/src/components/HeadlineByline.tsx index 0b85d5baf7b..d393eb56a91 100644 --- a/dotcom-rendering/src/components/HeadlineByline.tsx +++ b/dotcom-rendering/src/components/HeadlineByline.tsx @@ -12,7 +12,6 @@ import { import { getSoleContributor } from '../lib/byline'; import { decidePalette } from '../lib/decidePalette'; import type { Palette } from '../types/palette'; -import type { RenderingTarget } from '../types/renderingTarget'; import type { TagType } from '../types/tag'; import { BylineLink } from './BylineLink'; @@ -145,15 +144,9 @@ type Props = { format: ArticleFormat; byline: string; tags: TagType[]; - renderingTarget: RenderingTarget; }; -export const HeadlineByline = ({ - format, - byline, - tags, - renderingTarget, -}: Props) => { +export const HeadlineByline = ({ format, byline, tags }: Props) => { if (byline === '') { return null; } @@ -172,7 +165,6 @@ export const HeadlineByline = ({ byline={byline} tags={tags} format={format} - renderingTarget={renderingTarget} /> @@ -190,7 +182,6 @@ export const HeadlineByline = ({ byline={byline} tags={tags} format={format} - renderingTarget={renderingTarget} /> @@ -210,7 +201,6 @@ export const HeadlineByline = ({ byline={byline} tags={tags} format={format} - renderingTarget={renderingTarget} /> @@ -228,7 +218,6 @@ export const HeadlineByline = ({ byline={byline} tags={tags} format={format} - renderingTarget={renderingTarget} /> diff --git a/dotcom-rendering/src/components/RenderingTarget.tsx b/dotcom-rendering/src/components/RenderingTarget.tsx new file mode 100644 index 00000000000..eb7e693c9bc --- /dev/null +++ b/dotcom-rendering/src/components/RenderingTarget.tsx @@ -0,0 +1,4 @@ +import { createContext } from 'react'; +import type { RenderingTarget } from '../types/renderingTarget'; + +export const RenderingTargetContext = createContext('Web'); diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx index 4d178410fd2..d4672c6a8d2 100644 --- a/dotcom-rendering/src/layouts/CommentLayout.tsx +++ b/dotcom-rendering/src/layouts/CommentLayout.tsx @@ -47,7 +47,6 @@ import { decideTrail } from '../lib/decideTrail'; import { parse } from '../lib/slot-machine-flags'; import type { NavType } from '../model/extract-nav'; import type { FEArticleType } from '../types/frontend'; -import type { RenderingTarget } from '../types/renderingTarget'; import { BannerWrapper, SendToBack, Stuck } from './lib/stickiness'; const StandardGrid = ({ @@ -262,15 +261,9 @@ interface Props { article: FEArticleType; NAV: NavType; format: ArticleFormat; - renderingTarget: RenderingTarget; } -export const CommentLayout = ({ - article, - NAV, - format, - renderingTarget, -}: Props) => { +export const CommentLayout = ({ article, NAV, format }: Props) => { const { config: { isPaidContent, host }, } = article; @@ -490,7 +483,6 @@ export const CommentLayout = ({ 'number' } hasAvatar={!!avatarUrl} - renderingTarget={renderingTarget} /> {/* BOTTOM */}
@@ -559,7 +551,6 @@ export const CommentLayout = ({ !!article.config.switches .serverShareCounts } - renderingTarget={renderingTarget} />
@@ -600,7 +591,6 @@ export const CommentLayout = ({ isRightToLeftLang={ article.isRightToLeftLang } - renderingTarget={renderingTarget} /> {showBodyEndSlot && ( diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx index 45bd1f64ead..5279dfcdf07 100644 --- a/dotcom-rendering/src/layouts/DecideLayout.tsx +++ b/dotcom-rendering/src/layouts/DecideLayout.tsx @@ -23,17 +23,11 @@ interface AppProps extends BaseProps { } interface WebProps extends BaseProps { - renderingTarget: 'Web'; NAV: NavType; + renderingTarget: 'Web'; } -const DecideLayoutApps = ({ - article, - format, -}: { - article: FEArticleType; - format: ArticleFormat; -}) => { +const DecideLayoutApps = ({ article, format, renderingTarget }: AppProps) => { const notSupported = 
Not supported
; switch (format.display) { case ArticleDisplay.Standard: { @@ -43,7 +37,7 @@ const DecideLayoutApps = ({ ); case ArticleDesign.LiveBlog: @@ -52,7 +46,7 @@ const DecideLayoutApps = ({ ); default: @@ -92,7 +86,6 @@ const DecideLayoutWeb = ({ article={article} NAV={NAV} format={format} - renderingTarget={renderingTarget} /> ); } @@ -119,7 +112,6 @@ const DecideLayoutWeb = ({ article={article} NAV={NAV} format={format} - renderingTarget={renderingTarget} /> ); default: @@ -128,7 +120,6 @@ const DecideLayoutWeb = ({ article={article} NAV={NAV} format={format} - renderingTarget={renderingTarget} /> ); } @@ -142,7 +133,6 @@ const DecideLayoutWeb = ({ article={article} NAV={NAV} format={format} - renderingTarget={renderingTarget} /> ); case ArticleDesign.FullPageInteractive: { @@ -161,7 +151,7 @@ const DecideLayoutWeb = ({ article={article} NAV={NAV} format={format} - renderingTarget="Web" + renderingTarget={renderingTarget} /> ); case ArticleDesign.Comment: @@ -172,7 +162,6 @@ const DecideLayoutWeb = ({ article={article} NAV={NAV} format={format} - renderingTarget={renderingTarget} /> ); case ArticleDesign.NewsletterSignup: @@ -181,7 +170,6 @@ const DecideLayoutWeb = ({ article={article} NAV={NAV} format={format} - renderingTarget={renderingTarget} /> ); default: @@ -198,12 +186,18 @@ const DecideLayoutWeb = ({ } }; -export const DecideLayout = (props: AppProps | WebProps) => { +export const DecideLayout = (props: WebProps | AppProps) => { const { article, format, renderingTarget } = props; switch (renderingTarget) { case 'Apps': - return ; + return ( + + ); case 'Web': return ( ( @@ -184,7 +183,6 @@ interface Props { article: FEArticleType; NAV: NavType; format: ArticleFormat; - renderingTarget: RenderingTarget; } const decideCaption = (mainMedia: FEElement | undefined): string => { @@ -243,12 +241,7 @@ const Box = ({ ); -export const ImmersiveLayout = ({ - article, - NAV, - format, - renderingTarget, -}: Props) => { +export const ImmersiveLayout = ({ article, NAV, format }: Props) => { const { config: { isPaidContent, host }, } = article; @@ -460,7 +453,6 @@ export const ImmersiveLayout = ({ hasStarRating={ article.starRating !== undefined } - renderingTarget={renderingTarget} /> @@ -539,7 +531,6 @@ export const ImmersiveLayout = ({ typeof article.starRating === 'number' } - renderingTarget={renderingTarget} /> )} @@ -557,7 +548,6 @@ export const ImmersiveLayout = ({ format={format} tags={article.tags} byline={article.byline} - renderingTarget={renderingTarget} /> )} @@ -609,7 +599,6 @@ export const ImmersiveLayout = ({ !!article.config.switches .serverShareCounts } - renderingTarget={renderingTarget} /> @@ -647,7 +636,6 @@ export const ImmersiveLayout = ({ isRightToLeftLang={ article.isRightToLeftLang } - renderingTarget={renderingTarget} /> {showBodyEndSlot && ( diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx index 187659b6a22..29f4e95d920 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx @@ -48,7 +48,6 @@ import { decidePalette } from '../lib/decidePalette'; import { decideTrail } from '../lib/decideTrail'; import type { NavType } from '../model/extract-nav'; import type { FEArticleType } from '../types/frontend'; -import type { RenderingTarget } from '../types/renderingTarget'; import { interactiveGlobalStyles, interactiveLegacyClasses, @@ -204,15 +203,9 @@ interface Props { article: FEArticleType; NAV: NavType; format: ArticleFormat; - renderingTarget: RenderingTarget; } -export const InteractiveLayout = ({ - article, - NAV, - format, - renderingTarget, -}: Props) => { +export const InteractiveLayout = ({ article, NAV, format }: Props) => { const { config: { isPaidContent, host }, } = article; @@ -439,7 +432,6 @@ export const InteractiveLayout = ({ typeof article.starRating === 'number' } - renderingTarget={renderingTarget} /> {article.starRating !== undefined ? ( @@ -492,7 +484,6 @@ export const InteractiveLayout = ({ !!article.config.switches .serverShareCounts } - renderingTarget={renderingTarget} /> @@ -531,7 +522,6 @@ export const InteractiveLayout = ({ isRightToLeftLang={ article.isRightToLeftLang } - renderingTarget={renderingTarget} /> diff --git a/dotcom-rendering/src/layouts/LiveLayout.tsx b/dotcom-rendering/src/layouts/LiveLayout.tsx index 6fda765a71a..7147c54c8ed 100644 --- a/dotcom-rendering/src/layouts/LiveLayout.tsx +++ b/dotcom-rendering/src/layouts/LiveLayout.tsx @@ -61,6 +61,7 @@ import { decideTrail } from '../lib/decideTrail'; import { getZIndex } from '../lib/getZIndex'; import type { NavType } from '../model/extract-nav'; import type { FEArticleType } from '../types/frontend'; +import type { RenderingTarget } from '../types/renderingTarget'; import { BannerWrapper, SendToBack, Stuck } from './lib/stickiness'; const HeadlineGrid = ({ children }: { children: React.ReactNode }) => ( @@ -244,6 +245,7 @@ const paddingBody = css` interface BaseProps { article: FEArticleType; format: ArticleFormat; + renderingTarget: RenderingTarget; } interface AppsProps extends BaseProps { @@ -251,8 +253,8 @@ interface AppsProps extends BaseProps { } interface WebProps extends BaseProps { - renderingTarget: 'Web'; NAV: NavType; + renderingTarget: 'Web'; } export const LiveLayout = (props: WebProps | AppsProps) => { @@ -461,7 +463,6 @@ export const LiveLayout = (props: WebProps | AppsProps) => { webPublicationDateDeprecated={ article.webPublicationDateDeprecated } - renderingTarget={renderingTarget} /> @@ -498,7 +499,6 @@ export const LiveLayout = (props: WebProps | AppsProps) => { typeof article.starRating === 'number' } - renderingTarget={renderingTarget} /> )} @@ -585,7 +585,6 @@ export const LiveLayout = (props: WebProps | AppsProps) => { .serverShareCounts } messageUs={article.messageUs} - renderingTarget={renderingTarget} /> @@ -750,7 +749,6 @@ export const LiveLayout = (props: WebProps | AppsProps) => { .serverShareCounts } messageUs={article.messageUs} - renderingTarget={renderingTarget} /> @@ -904,9 +902,6 @@ export const LiveLayout = (props: WebProps | AppsProps) => { .serverSideLiveblogInlineAdsVariant === 'variant' } - renderingTarget={ - renderingTarget - } /> {pagination.totalPages > 1 && ( { isRightToLeftLang={ article.isRightToLeftLang } - renderingTarget={ - renderingTarget - } /> {pagination.totalPages > 1 && ( : undefined, ); -export const NewsletterSignupLayout = ({ - article, - NAV, - format, - renderingTarget, -}: Props) => { +export const NewsletterSignupLayout = ({ article, NAV, format }: Props) => { const { promotedNewsletter, config: { host }, @@ -403,7 +396,6 @@ export const NewsletterSignupLayout = ({ webPublicationDateDeprecated={ article.webPublicationDateDeprecated } - renderingTarget={renderingTarget} /> { +export const ShowcaseLayout = ({ article, NAV, format }: Props) => { const { config: { isPaidContent, host }, } = article; @@ -578,7 +571,6 @@ export const ShowcaseLayout = ({ hasStarRating={ article.starRating !== undefined } - renderingTarget={renderingTarget} /> @@ -623,7 +615,6 @@ export const ShowcaseLayout = ({ !!article.config.switches .serverShareCounts } - renderingTarget={renderingTarget} /> @@ -661,7 +652,6 @@ export const ShowcaseLayout = ({ isRightToLeftLang={ article.isRightToLeftLang } - renderingTarget={renderingTarget} /> {showBodyEndSlot && ( diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx index d5c81352b41..d5b22b41ceb 100644 --- a/dotcom-rendering/src/layouts/StandardLayout.tsx +++ b/dotcom-rendering/src/layouts/StandardLayout.tsx @@ -340,7 +340,7 @@ export const StandardLayout = (props: WebProps | AppProps) => { return ( <> - {renderingTarget === 'Web' && ( + {isWeb && (
{renderAds && ( @@ -502,7 +502,6 @@ export const StandardLayout = (props: WebProps | AppProps) => { webPublicationDateDeprecated={ article.webPublicationDateDeprecated } - renderingTarget={renderingTarget} /> )} @@ -569,7 +568,6 @@ export const StandardLayout = (props: WebProps | AppProps) => { hasStarRating={ typeof article.starRating === 'number' } - renderingTarget={renderingTarget} />
@@ -628,7 +626,6 @@ export const StandardLayout = (props: WebProps | AppProps) => { !!article.config.switches .serverShareCounts } - renderingTarget={renderingTarget} /> @@ -667,7 +664,6 @@ export const StandardLayout = (props: WebProps | AppProps) => { isRightToLeftLang={ article.isRightToLeftLang } - renderingTarget={renderingTarget} /> {format.design === ArticleDesign.MatchReport && !!footballMatchUrl && ( diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index 6ccda77ab93..cadd52333b5 100644 --- a/dotcom-rendering/src/lib/ArticleRenderer.tsx +++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx @@ -1,11 +1,12 @@ import { css } from '@emotion/react'; import type { ArticleFormat } from '@guardian/libs'; import { ArticleDesign } from '@guardian/libs'; +import { useContext } from 'react'; import { adContainerStyles } from '../components/AdSlot'; +import { RenderingTargetContext } from '../components/RenderingTarget'; import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling'; import type { ServerSideTests, Switches } from '../types/config'; import type { FEElement } from '../types/content'; -import type { RenderingTarget } from '../types/renderingTarget'; import type { TagType } from '../types/tag'; import { RenderArticleElement } from './renderElement'; import { withSignInGateSlot } from './withSignInGateSlot'; @@ -42,7 +43,6 @@ type Props = { isAdFreeUser: boolean; isSensitive: boolean; abTests?: ServerSideTests; - renderingTarget: RenderingTarget; }; export const ArticleRenderer = ({ @@ -63,7 +63,6 @@ export const ArticleRenderer = ({ isSensitive, isDev, abTests, - renderingTarget, }: Props) => { const renderedElements = elements.map((element, index) => { return ( @@ -86,6 +85,8 @@ export const ArticleRenderer = ({ ); }); + const renderingTargetContext = useContext(RenderingTargetContext); + // const cleanedElements = elements.map(element => // 'html' in element ? { ...element, html: clean(element.html) } : element, // ); @@ -105,7 +106,7 @@ export const ArticleRenderer = ({ ].join(' ')} css={[adStylesDynamic, commercialPosition]} > - {renderingTarget === 'Apps' + {renderingTargetContext === 'Apps' ? renderedElements : /* Insert the placeholder for the sign in gate on the 2nd article element */ withSignInGateSlot({ diff --git a/dotcom-rendering/src/server/render.article.apps.tsx b/dotcom-rendering/src/server/render.article.apps.tsx index 30f8faa4698..7b8dc84431b 100644 --- a/dotcom-rendering/src/server/render.article.apps.tsx +++ b/dotcom-rendering/src/server/render.article.apps.tsx @@ -1,5 +1,6 @@ import { isString } from '@guardian/libs'; import { ArticlePage } from '../components/ArticlePage'; +import { RenderingTargetContext } from '../components/RenderingTarget'; import { generateScriptTags, getPathFromManifest } from '../lib/assets'; import { decideFormat } from '../lib/decideFormat'; import { renderToStringWithEmotion } from '../lib/emotion'; @@ -16,11 +17,13 @@ export const renderArticle = ( const format: ArticleFormat = decideFormat(article.format); const { html, extractedCss } = renderToStringWithEmotion( - , + + + , ); const clientScripts = [getPathFromManifest('apps', 'index.js')]; diff --git a/dotcom-rendering/src/server/render.article.web.tsx b/dotcom-rendering/src/server/render.article.web.tsx index 4ab84f7d7f2..39050289e28 100644 --- a/dotcom-rendering/src/server/render.article.web.tsx +++ b/dotcom-rendering/src/server/render.article.web.tsx @@ -2,6 +2,7 @@ import { ArticleDesign, isString, Pillar } from '@guardian/libs'; import { ArticlePage } from '../components/ArticlePage'; import { isAmpSupported } from '../components/Elements.amp'; import { KeyEventsContainer } from '../components/KeyEventsContainer'; +import { RenderingTargetContext } from '../components/RenderingTarget'; import { ASSET_ORIGIN, generateScriptTags, @@ -48,12 +49,14 @@ export const renderHtml = ({ const format: ArticleFormat = decideFormat(article.format); const { html, extractedCss } = renderToStringWithEmotion( - , + + + , ); // We want to only insert script tags for the elements or main media elements on this page view