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;
+}