diff --git a/dotcom-rendering/.storybook/decorators/RenderingTargetDecorator.js b/dotcom-rendering/.storybook/decorators/RenderingTargetDecorator.js deleted file mode 100644 index f38d17a97f6..00000000000 --- a/dotcom-rendering/.storybook/decorators/RenderingTargetDecorator.js +++ /dev/null @@ -1,11 +0,0 @@ -import { RenderingTargetContext } from '../../src/components/RenderingTarget'; - -export const RenderingTargetDecorator = (Story, { args }) => { - return ( - - - - ); -}; - -export default RenderingTargetDecorator; diff --git a/dotcom-rendering/.storybook/decorators/renderingContextDecorator.js b/dotcom-rendering/.storybook/decorators/renderingContextDecorator.js new file mode 100644 index 00000000000..e95426c7cee --- /dev/null +++ b/dotcom-rendering/.storybook/decorators/renderingContextDecorator.js @@ -0,0 +1,19 @@ +import { RenderingContext } from '../../src/components/RenderingContext'; + +const defaultContext = { target: 'Web' }; + +export const RenderingContextDecorator = ( + Story, + { args: { renderingContext } }, +) => { + const context = { ...defaultContext, ...renderingContext }; + + // For easy debugging + console.log('Storybook rendering context: \n', context); + + return ( + + + + ); +}; diff --git a/dotcom-rendering/.storybook/preview.js b/dotcom-rendering/.storybook/preview.js index 309fa5fb131..163bd088dc3 100644 --- a/dotcom-rendering/.storybook/preview.js +++ b/dotcom-rendering/.storybook/preview.js @@ -12,6 +12,7 @@ import { Lazy } from '../src/components/Lazy'; import { Picture } from '../src/components/Picture'; import { mockRESTCalls } from '../src/lib/mockRESTCalls'; import { setABTests } from '../src/lib/useAB'; +import { RenderingContextDecorator } from './decorators/renderingContextDecorator'; // Prevent components being lazy rendered when we're taking Chromatic snapshots Lazy.disabled = isChromatic(); @@ -139,10 +140,17 @@ const guardianViewports = { /** @type {import('@storybook/react').Preview} */ export default { decorators: [ - (Story) => { - storage.local.clear(); - return Story(); - }, + RenderingContextDecorator, + // (Story) => { + // <> + //

HELLO!

+ // + // ; + // }, + // (Story) => { + // storage.local.clear(); + // return Story(); + // }, ], }; diff --git a/dotcom-rendering/src/components/ArticleMeta.stories.tsx b/dotcom-rendering/src/components/ArticleMeta.stories.tsx index a41e7207f39..f484e63228b 100644 --- a/dotcom-rendering/src/components/ArticleMeta.stories.tsx +++ b/dotcom-rendering/src/components/ArticleMeta.stories.tsx @@ -90,6 +90,32 @@ export const ArticleStory = () => { ); }; +export const ArticleAppsStory = () => { + return ( + + + + ); +}; +ArticleAppsStory.args = { renderingContext: { target: 'Apps' } }; + export const BrandingStory = () => { return ( diff --git a/dotcom-rendering/src/components/BylineLink.tsx b/dotcom-rendering/src/components/BylineLink.tsx index 55f502657a4..204591c5325 100644 --- a/dotcom-rendering/src/components/BylineLink.tsx +++ b/dotcom-rendering/src/components/BylineLink.tsx @@ -8,7 +8,7 @@ import { import type { TagType } from '../types/tag'; import { FollowWrapper } from './FollowWrapper.importable'; import { Island } from './Island'; -import { RenderingTargetContext } from './RenderingTarget'; +import { RenderingContext } from './RenderingContext'; type Props = { byline: string; @@ -132,13 +132,12 @@ export const BylineLink = ({ byline, tags, format }: Props) => { ); }); - const renderingTargetContext = useContext(RenderingTargetContext); + const { target } = useContext(RenderingContext); return ( <> {renderedTokens} - {renderingTargetContext === 'Apps' && - soleContributor !== undefined ? ( + {target === 'Apps' && soleContributor !== undefined ? ( (defaultContext); diff --git a/dotcom-rendering/src/components/RenderingTarget.tsx b/dotcom-rendering/src/components/RenderingTarget.tsx deleted file mode 100644 index eb7e693c9bc..00000000000 --- a/dotcom-rendering/src/components/RenderingTarget.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { createContext } from 'react'; -import type { RenderingTarget } from '../types/renderingTarget'; - -export const RenderingTargetContext = createContext('Web'); diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index cadd52333b5..95c268f88d6 100644 --- a/dotcom-rendering/src/lib/ArticleRenderer.tsx +++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx @@ -3,7 +3,7 @@ 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 { RenderingContext } from '../components/RenderingContext'; import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling'; import type { ServerSideTests, Switches } from '../types/config'; import type { FEElement } from '../types/content'; @@ -85,7 +85,7 @@ export const ArticleRenderer = ({ ); }); - const renderingTargetContext = useContext(RenderingTargetContext); + const { target } = useContext(RenderingContext); // const cleanedElements = elements.map(element => // 'html' in element ? { ...element, html: clean(element.html) } : element, @@ -106,7 +106,7 @@ export const ArticleRenderer = ({ ].join(' ')} css={[adStylesDynamic, commercialPosition]} > - {renderingTargetContext === 'Apps' + {target === '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 7b8dc84431b..44c37db7c75 100644 --- a/dotcom-rendering/src/server/render.article.apps.tsx +++ b/dotcom-rendering/src/server/render.article.apps.tsx @@ -1,11 +1,12 @@ import { isString } from '@guardian/libs'; import { ArticlePage } from '../components/ArticlePage'; -import { RenderingTargetContext } from '../components/RenderingTarget'; +import { RenderingContext } from '../components/RenderingContext'; import { generateScriptTags, getPathFromManifest } from '../lib/assets'; import { decideFormat } from '../lib/decideFormat'; import { renderToStringWithEmotion } from '../lib/emotion'; import { createGuardian } from '../model/guardian'; import type { FEArticleType } from '../types/frontend'; +import type { RenderingContextType } from '../types/renderingContext'; import { htmlPageTemplate } from './htmlPageTemplate'; export const renderArticle = ( @@ -16,14 +17,16 @@ export const renderArticle = ( } => { const format: ArticleFormat = decideFormat(article.format); + const renderingContext: RenderingContextType = { target: 'Apps' }; + 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 39050289e28..856c02c3b5f 100644 --- a/dotcom-rendering/src/server/render.article.web.tsx +++ b/dotcom-rendering/src/server/render.article.web.tsx @@ -2,7 +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 { RenderingContext } from '../components/RenderingContext'; import { ASSET_ORIGIN, generateScriptTags, @@ -21,6 +21,7 @@ import { extractNAV } from '../model/extract-nav'; import { createGuardian as createWindowGuardian } from '../model/guardian'; import type { FEElement } from '../types/content'; import type { FEArticleType, FEBlocksRequest } from '../types/frontend'; +import type { RenderingContextType } from '../types/renderingContext'; import type { TagType } from '../types/tag'; import { htmlPageTemplate } from './htmlPageTemplate'; @@ -48,15 +49,17 @@ export const renderHtml = ({ const format: ArticleFormat = decideFormat(article.format); + const renderingContext: RenderingContextType = { target: 'Web' }; + const { html, extractedCss } = renderToStringWithEmotion( - + - , + , ); // We want to only insert script tags for the elements or main media elements on this page view diff --git a/dotcom-rendering/src/types/renderingContext.ts b/dotcom-rendering/src/types/renderingContext.ts new file mode 100644 index 00000000000..18ca7501bfd --- /dev/null +++ b/dotcom-rendering/src/types/renderingContext.ts @@ -0,0 +1,10 @@ +import type { RenderingTarget } from './renderingTarget'; + +/** + * Context for global values (generic) + * + * This should not contain any properties which are likely to change between re-renders + */ +export interface RenderingContextType { + target: RenderingTarget; +}