diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 64f8dd5d078..d0e530af279 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 fbbd6c16c5b..ce404c87ee6 100644
--- a/dotcom-rendering/src/lib/ArticleRenderer.tsx
+++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx
@@ -2,10 +2,10 @@ import { css } from '@emotion/react';
import type { ArticleFormat } from '@guardian/libs';
import { ArticleDesign } from '@guardian/libs';
import { adContainerStyles } from '../components/AdSlot';
+import { useConfig } from '../components/ConfigContext';
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 +42,6 @@ type Props = {
isAdFreeUser: boolean;
isSensitive: boolean;
abTests?: ServerSideTests;
- renderingTarget: RenderingTarget;
};
export const ArticleRenderer = ({
@@ -63,7 +62,6 @@ export const ArticleRenderer = ({
isSensitive,
isDev,
abTests,
- renderingTarget,
}: Props) => {
const renderedElements = elements.map((element, index) => {
return (
@@ -86,6 +84,12 @@ export const ArticleRenderer = ({
);
});
+ /**
+ * Where is this coming from?
+ * Config value is set at high in the component tree within a React context in a ``
+ */
+ const { renderingTarget } = useConfig();
+
// const cleanedElements = elements.map(element =>
// 'html' in element ? { ...element, html: clean(element.html) } : element,
// );
diff --git a/dotcom-rendering/src/server/render.allEditorialNewslettersPage.web.tsx b/dotcom-rendering/src/server/render.allEditorialNewslettersPage.web.tsx
index f8f87b11f4b..f5485545767 100644
--- a/dotcom-rendering/src/server/render.allEditorialNewslettersPage.web.tsx
+++ b/dotcom-rendering/src/server/render.allEditorialNewslettersPage.web.tsx
@@ -1,4 +1,5 @@
import { AllEditorialNewslettersPage } from '../components/AllEditorialNewslettersPage';
+import { ConfigProvider } from '../components/ConfigContext';
import {
generateScriptTags,
getModulesBuild,
@@ -9,6 +10,7 @@ import { getHttp3Url } from '../lib/getHttp3Url';
import { polyfillIO } from '../lib/polyfill.io';
import { extractNAV } from '../model/extract-nav';
import { createGuardian } from '../model/guardian';
+import type { Config } from '../types/configContext';
import type { DCRNewslettersPageType } from '../types/newslettersPage';
import { htmlPageTemplate } from './htmlPageTemplate';
@@ -22,11 +24,16 @@ export const renderEditorialNewslettersPage = ({
const title = newslettersPage.webTitle;
const NAV = extractNAV(newslettersPage.nav);
+ // The newsletters page is currently only supported on Web
+ const config: Config = { renderingTarget: 'Web' };
+
const { html, extractedCss } = renderToStringWithEmotion(
- ,
+
+
+ ,
);
// Evaluating the performance of HTTP3 over HTTP2
diff --git a/dotcom-rendering/src/server/render.article.amp.tsx b/dotcom-rendering/src/server/render.article.amp.tsx
index a4139fb21cf..de3f90ef278 100644
--- a/dotcom-rendering/src/server/render.article.amp.tsx
+++ b/dotcom-rendering/src/server/render.article.amp.tsx
@@ -5,9 +5,11 @@ import { resets } from '@guardian/source-foundations';
import he from 'he';
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
+import { ConfigProvider } from '../components/ConfigContext';
import { epicChoiceCardCss } from '../components/Epic.amp';
import { stickyAdLabelCss } from '../components/StickyAd.amp';
import { getFontsCss } from '../lib/fonts-css';
+import type { Config } from '../types/configContext';
interface RenderToStringResult {
html: string;
@@ -36,9 +38,15 @@ export const renderArticle = ({
const cache = createCache({ key });
// eslint-disable-next-line @typescript-eslint/unbound-method
const { extractCritical } = createEmotionServer(cache);
+
+ // We are currently considering AMP to be a renderingTarget of Web
+ const config: Config = { renderingTarget: 'Web' };
+
const { html, css }: RenderToStringResult = extractCritical(
renderToStaticMarkup(
- {body},
+
+ {body}
+ ,
),
);
diff --git a/dotcom-rendering/src/server/render.article.apps.tsx b/dotcom-rendering/src/server/render.article.apps.tsx
index c031c6cf2d7..28bab1f545e 100644
--- a/dotcom-rendering/src/server/render.article.apps.tsx
+++ b/dotcom-rendering/src/server/render.article.apps.tsx
@@ -1,9 +1,11 @@
import { isString } from '@guardian/libs';
import { ArticlePage } from '../components/ArticlePage';
+import { ConfigProvider } from '../components/ConfigContext';
import { generateScriptTags, getPathFromManifest } from '../lib/assets';
import { decideFormat } from '../lib/decideFormat';
import { renderToStringWithEmotion } from '../lib/emotion';
import { createGuardian } from '../model/guardian';
+import type { Config } from '../types/configContext';
import type { FEArticleType } from '../types/frontend';
import { htmlPageTemplate } from './htmlPageTemplate';
@@ -15,12 +17,17 @@ export const renderArticle = (
} => {
const format: ArticleFormat = decideFormat(article.format);
+ const renderingTarget = 'Apps';
+ const config: Config = { renderingTarget };
+
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 ddf722b2f2c..b1767d5ad4e 100644
--- a/dotcom-rendering/src/server/render.article.web.tsx
+++ b/dotcom-rendering/src/server/render.article.web.tsx
@@ -1,5 +1,6 @@
import { ArticleDesign, isString, Pillar } from '@guardian/libs';
import { ArticlePage } from '../components/ArticlePage';
+import { ConfigProvider } from '../components/ConfigContext';
import { isAmpSupported } from '../components/Elements.amp';
import { KeyEventsContainer } from '../components/KeyEventsContainer';
import {
@@ -18,6 +19,7 @@ import { polyfillIO } from '../lib/polyfill.io';
import { extractGA } from '../model/extract-ga';
import { extractNAV } from '../model/extract-nav';
import { createGuardian as createWindowGuardian } from '../model/guardian';
+import type { Config } from '../types/configContext';
import type { FEElement } from '../types/content';
import type { FEArticleType, FEBlocksRequest } from '../types/frontend';
import type { TagType } from '../types/tag';
@@ -47,13 +49,18 @@ export const renderHtml = ({
const format: ArticleFormat = decideFormat(article.format);
+ const renderingTarget = 'Web';
+ const config: Config = { renderingTarget };
+
const { html, extractedCss } = renderToStringWithEmotion(
- ,
+
+
+ ,
);
// We want to only insert script tags for the elements or main media elements on this page view
@@ -248,26 +255,31 @@ export const renderBlocks = ({
}: FEBlocksRequest): string => {
const format: ArticleFormat = decideFormat(FEFormat);
+ // Only currently supported for Web
+ const config: Config = { renderingTarget: 'Web' };
+
const { html, extractedCss } = renderToStringWithEmotion(
- ,
+
+
+ ,
);
return `${extractedCss}${html}`;
@@ -284,12 +296,16 @@ export const renderKeyEvents = ({
format: FEFormat,
filterKeyEvents,
}: FEKeyEventsRequest): string => {
+ const config: Config = { renderingTarget: 'Web' };
+
const { html, extractedCss } = renderToStringWithEmotion(
- ,
+
+
+ ,
);
return `${extractedCss}${html}`;
diff --git a/dotcom-rendering/src/server/render.front.web.tsx b/dotcom-rendering/src/server/render.front.web.tsx
index 98fe5442622..157491a6d59 100644
--- a/dotcom-rendering/src/server/render.front.web.tsx
+++ b/dotcom-rendering/src/server/render.front.web.tsx
@@ -1,4 +1,5 @@
import { isString, Pillar } from '@guardian/libs';
+import { ConfigProvider } from '../components/ConfigContext';
import { FrontPage } from '../components/FrontPage';
import { TagFrontPage } from '../components/TagFrontPage';
import {
@@ -13,6 +14,7 @@ import { themeToPillar } from '../lib/themeToPillar';
import type { NavType } from '../model/extract-nav';
import { extractNAV } from '../model/extract-nav';
import { createGuardian } from '../model/guardian';
+import type { Config } from '../types/configContext';
import type { DCRFrontType } from '../types/front';
import type { DCRTagFrontType } from '../types/tagFront';
import { htmlPageTemplate } from './htmlPageTemplate';
@@ -75,8 +77,13 @@ export const renderFront = ({
const title = front.webTitle;
const NAV = extractFrontNav(front);
+ // Fronts are not supported in Apps
+ const config: Config = { renderingTarget: 'Web' };
+
const { html, extractedCss } = renderToStringWithEmotion(
- ,
+
+ ,
+ ,
);
// Evaluating the performance of HTTP3 over HTTP2
@@ -164,8 +171,13 @@ export const renderTagFront = ({
const title = tagFront.webTitle;
const NAV = extractNAV(tagFront.nav);
+ // Fronts are not supported in Apps
+ const config: Config = { renderingTarget: 'Web' };
+
const { html, extractedCss } = renderToStringWithEmotion(
- ,
+
+ ,
+ ,
);
// Evaluating the performance of HTTP3 over HTTP2
diff --git a/dotcom-rendering/src/types/configContext.ts b/dotcom-rendering/src/types/configContext.ts
new file mode 100644
index 00000000000..98579c0a438
--- /dev/null
+++ b/dotcom-rendering/src/types/configContext.ts
@@ -0,0 +1,11 @@
+import type { RenderingTarget } from './renderingTarget';
+
+/**
+ * Context for global, static, immutable values i.e. application configuration
+ *
+ * This should not contain any properties which are likely to change between re-renders
+ * @see /dotcom-rendering/docs/architecture/proposed-adrs/react-context-api.md
+ */
+export interface Config {
+ renderingTarget: RenderingTarget;
+}
diff --git a/dotcom-rendering/stories/generated/Layout.stories.tsx b/dotcom-rendering/stories/generated/Layout.stories.tsx
index 89016c39757..d2c3d22f621 100644
--- a/dotcom-rendering/stories/generated/Layout.stories.tsx
+++ b/dotcom-rendering/stories/generated/Layout.stories.tsx
@@ -28,6 +28,7 @@ export const WebStandardStandardNewsPillar = () => {
);
};
WebStandardStandardNewsPillar.storyName = 'Web: Display: Standard, Design: Standard, Theme: NewsPillar';
+WebStandardStandardNewsPillar.args = { config: { renderingTarget: 'Web' } };
export const AppsStandardStandardNewsPillar = () => {
return (
@@ -40,6 +41,7 @@ export const AppsStandardStandardNewsPillar = () => {
);
};
AppsStandardStandardNewsPillar.storyName = 'Apps: Display: Standard, Design: Standard, Theme: NewsPillar';
+AppsStandardStandardNewsPillar.args = { config: { renderingTarget: 'Apps' } };
export const WebShowcasePictureOpinionPillar = () => {
return (
@@ -52,3 +54,4 @@ export const WebShowcasePictureOpinionPillar = () => {
);
};
WebShowcasePictureOpinionPillar.storyName = 'Web: Display: Showcase, Design: Picture, Theme: OpinionPillar';
+WebShowcasePictureOpinionPillar.args = { config: { renderingTarget: 'Web' } };