diff --git a/dotcom-rendering/.storybook/decorators/configContextDecorator.tsx b/dotcom-rendering/.storybook/decorators/configContextDecorator.tsx index c1d936419c3..f6f17c07ffa 100644 --- a/dotcom-rendering/.storybook/decorators/configContextDecorator.tsx +++ b/dotcom-rendering/.storybook/decorators/configContextDecorator.tsx @@ -6,6 +6,7 @@ import { Config } from '../../src/types/configContext'; const defaultConfig = { renderingTarget: 'Web', darkModeAvailable: false, + assetOrigin: '/', } satisfies Config; export const ConfigContextDecorator: Decorator<{ diff --git a/dotcom-rendering/.storybook/main.ts b/dotcom-rendering/.storybook/main.ts index 4bf053526a6..fe67a545e8f 100644 --- a/dotcom-rendering/.storybook/main.ts +++ b/dotcom-rendering/.storybook/main.ts @@ -18,7 +18,10 @@ const config: StorybookConfig = { '../stories/**/*.stories.@(tsx)', '../stories/**/*.stories.@(jsx)', ], - staticDirs: ['../src/static'], + staticDirs: [ + '../src/static', + { from: '../src/static', to: '/static/frontend/' }, + ], addons: [ '@storybook/addon-essentials', '@storybook/addon-interactions', @@ -60,7 +63,6 @@ const config: StorybookConfig = { // Required as otherwise 'process' will not be defined when included on its own (without .env) // e.g process?.env?.SOME_VAR config.plugins?.push( - // @ts-expect-error -- we’ve got plugin mismatch new webpack.DefinePlugin({ process: '{}', }), diff --git a/dotcom-rendering/src/components/AdBlockAsk.importable.tsx b/dotcom-rendering/src/components/AdBlockAsk.importable.tsx index fa561181444..a9c28e54430 100644 --- a/dotcom-rendering/src/components/AdBlockAsk.importable.tsx +++ b/dotcom-rendering/src/components/AdBlockAsk.importable.tsx @@ -5,8 +5,7 @@ import { palette } from '@guardian/source-foundations/cjs/source-foundations/src import { assertUnreachable } from '../lib/assert-unreachable'; import { useAdblockAsk } from '../lib/useAdBlockAsk'; import ArrowRightIcon from '../static/icons/arrow-right.svg'; -import HandsLogoSmall from '../static/logos/hands-small.svg'; -import HandsLogo from '../static/logos/hands.svg'; +import { useConfig } from './ConfigContext'; type AdBlockAskSize = 'leaderboard' | 'mpu'; @@ -60,6 +59,12 @@ const adBlockAskTextStyles: Record = { `, }; +const HandsLogo = ({ styles }: { styles: SerializedStyles }) => { + const { assetOrigin } = useConfig(); + const src = `${assetOrigin}static/frontend/logos/hands.png`; + return Guardian logo held up by hands; +}; + const SupportButton = ({ href }: { href: string }) => ( Support us @@ -97,8 +102,8 @@ export const AdBlockAskLeaderboard = ({ margin: 0 auto; `} > - -
- +
+
); diff --git a/dotcom-rendering/src/components/ArticleMeta.test.tsx b/dotcom-rendering/src/components/ArticleMeta.test.tsx index 671a36d2c51..942aad230ac 100644 --- a/dotcom-rendering/src/components/ArticleMeta.test.tsx +++ b/dotcom-rendering/src/components/ArticleMeta.test.tsx @@ -16,7 +16,11 @@ describe('ArticleMeta', () => { const { container } = render( { const { container } = render( { const { container } = render( { ]; const { container } = render( { const { container } = render( { describe('with ConfigProvider', () => { it.each([ - { renderingTarget: 'Web', darkModeAvailable: false }, - { renderingTarget: 'Apps', darkModeAvailable: true }, - { renderingTarget: 'Apps', darkModeAvailable: false }, + { + renderingTarget: 'Web', + darkModeAvailable: false, + assetOrigin: '/', + }, + { + renderingTarget: 'Apps', + darkModeAvailable: true, + assetOrigin: '/', + }, + { + renderingTarget: 'Apps', + darkModeAvailable: false, + assetOrigin: '/', + }, ] as const satisfies ReadonlyArray)( 'useConfig hook provides correct config: "%o"', (config) => { diff --git a/dotcom-rendering/src/components/Contributor.test.tsx b/dotcom-rendering/src/components/Contributor.test.tsx index b1ae7dc1c09..2fc3d812d78 100644 --- a/dotcom-rendering/src/components/Contributor.test.tsx +++ b/dotcom-rendering/src/components/Contributor.test.tsx @@ -16,7 +16,11 @@ describe('Contributor', () => { const { container } = render( { const { container } = render( { it('should not render the comment form if user is logged out', async () => { render( { it('should display the given label', () => { const { getByText } = render( { it('should display link titles', () => { const { getByText } = render( { it('should render the correct number of link items', () => { const { container } = render( { it('should expand the menu when clicked upon', () => { const { container, getByRole } = render( { it('should close the expanded menu when they click away', () => { const { container, getByRole } = render( { it('should close the expanded menu when blurred', () => { const { container, getByRole } = render( { it('should render', () => { const { getByText, queryByText } = render( , @@ -29,7 +33,11 @@ describe('GuideAtom', () => { it('Show feedback on like', () => { const { getByText, queryByText, queryByTestId } = render( , @@ -51,7 +59,11 @@ describe('GuideAtom', () => { it('Show feedback on dislike', () => { const { getByText, queryByText, queryByTestId } = render( , diff --git a/dotcom-rendering/src/components/Island.test.tsx b/dotcom-rendering/src/components/Island.test.tsx index d1777b04274..ddf6bb042be 100644 --- a/dotcom-rendering/src/components/Island.test.tsx +++ b/dotcom-rendering/src/components/Island.test.tsx @@ -93,7 +93,11 @@ describe('Island: server-side rendering', () => { expect(() => renderToString( , @@ -119,7 +123,11 @@ describe('Island: server-side rendering', () => { expect(() => renderToString( { expect(() => renderToString( { expect(() => renderToString( , @@ -185,7 +201,11 @@ describe('Island: server-side rendering', () => { expect(() => renderToString( { expect(() => renderToString( , @@ -322,7 +346,11 @@ describe('Island: server-side rendering', () => { expect(() => renderToString( { expect(() => renderToString( { expect(() => renderToString( { expect(() => renderToString( { expect(() => renderToString( { expect(() => renderToString( { expect(() => renderToString( { const { getByText, getAllByText, getByTestId } = render( { const { getByTestId, getByText } = render( { const { getByText } = render( { const { queryByText } = render( { const { asFragment } = render( { const { asFragment, getAllByText } = render( , @@ -65,7 +69,11 @@ describe('MostViewedList', () => { const { getAllByText } = render( , @@ -89,7 +97,11 @@ describe('MostViewedList', () => { const { getByText } = render( , diff --git a/dotcom-rendering/src/components/ProfileAtom.test.tsx b/dotcom-rendering/src/components/ProfileAtom.test.tsx index 33b4b070126..41960f89d34 100644 --- a/dotcom-rendering/src/components/ProfileAtom.test.tsx +++ b/dotcom-rendering/src/components/ProfileAtom.test.tsx @@ -6,7 +6,11 @@ describe('ProfileAtom', () => { it('should render', () => { const { getByText, queryByText } = render( { it('Show feedback on like', () => { const { getByText, queryByText, queryByTestId } = render( { it('Show feedback on dislike', () => { const { getByText, queryByText, queryByTestId } = render( { it('should render & expand works', () => { const { getByText, queryByText } = render( , @@ -29,7 +33,11 @@ describe('QandaAtom', () => { it('Show feedback on like', () => { const { getByText, queryByText, queryByTestId } = render( , @@ -51,7 +59,11 @@ describe('QandaAtom', () => { it('Show feedback on dislike', () => { const { getByText, queryByText, queryByTestId } = render( , diff --git a/dotcom-rendering/src/components/ReaderRevenueLinks.test.tsx b/dotcom-rendering/src/components/ReaderRevenueLinks.test.tsx index c78359efb90..f219bae2310 100644 --- a/dotcom-rendering/src/components/ReaderRevenueLinks.test.tsx +++ b/dotcom-rendering/src/components/ReaderRevenueLinks.test.tsx @@ -43,7 +43,11 @@ describe('ReaderRevenueLinks', () => { const { getByText } = render( { const { getByText } = render( { expect(() => renderToString( { ) => { return ( { it('should render', () => { const { getByText, queryByText } = render( , @@ -29,7 +33,11 @@ describe('TimelineAtom', () => { it('Show feedback on like', () => { const { getByText, queryByText, queryByTestId } = render( , @@ -51,7 +59,11 @@ describe('TimelineAtom', () => { it('Show feedback on dislike', () => { const { getByText, queryByText, queryByTestId } = render( , diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx index 96b1d265052..25aebf09080 100644 --- a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx +++ b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx @@ -25,7 +25,11 @@ describe('YoutubeAtom', () => { it('Player initialises when no overlay and has consent state', () => { const atom = ( { it('Player initialises when overlay clicked and has consent state', () => { const atom = ( { const atom = ( { const title = 'My Youtube video!'; const atom = ( { it('shows a placeholder if overlay is missing', () => { const atom = ( { it('shows an overlay if present', () => { const atom = ( { it('hides an overlay once it is clicked', () => { const atom = ( { const atom = ( <> { +export const decideAssetOrigin = (stage: string | undefined): AssetOrigin => { switch (stage?.toUpperCase()) { case 'PROD': return 'https://assets.guim.co.uk/'; diff --git a/dotcom-rendering/src/server/render.allEditorialNewslettersPage.web.tsx b/dotcom-rendering/src/server/render.allEditorialNewslettersPage.web.tsx index 38effcb31d8..d19203b1faa 100644 --- a/dotcom-rendering/src/server/render.allEditorialNewslettersPage.web.tsx +++ b/dotcom-rendering/src/server/render.allEditorialNewslettersPage.web.tsx @@ -1,6 +1,7 @@ import { AllEditorialNewslettersPage } from '../components/AllEditorialNewslettersPage'; import { ConfigProvider } from '../components/ConfigContext'; import { + ASSET_ORIGIN, generateScriptTags, getModulesBuild, getPathFromManifest, @@ -24,7 +25,11 @@ export const renderEditorialNewslettersPage = ({ const NAV = extractNAV(newslettersPage.nav); // The newsletters page is currently only supported on Web - const config: Config = { renderingTarget: 'Web', darkModeAvailable: false }; + const config: Config = { + renderingTarget: 'Web', + darkModeAvailable: false, + assetOrigin: ASSET_ORIGIN, + }; const { html, extractedCss } = renderToStringWithEmotion( diff --git a/dotcom-rendering/src/server/render.article.amp.tsx b/dotcom-rendering/src/server/render.article.amp.tsx index a2ac5121020..994327b3766 100644 --- a/dotcom-rendering/src/server/render.article.amp.tsx +++ b/dotcom-rendering/src/server/render.article.amp.tsx @@ -8,6 +8,7 @@ import { renderToStaticMarkup } from 'react-dom/server'; import { ConfigProvider } from '../components/ConfigContext'; import { epicChoiceCardCss } from '../components/Epic.amp'; import { stickyAdLabelCss } from '../components/StickyAd.amp'; +import { ASSET_ORIGIN } from '../lib/assets'; import { fontsCss } from '../lib/fonts-css'; import type { Config } from '../types/configContext'; @@ -40,7 +41,11 @@ export const renderArticle = ({ const { extractCritical } = createEmotionServer(cache); // We are currently considering AMP to be a renderingTarget of Web - const config: Config = { renderingTarget: 'Web', darkModeAvailable: false }; + const config: Config = { + renderingTarget: 'Web', + darkModeAvailable: false, + assetOrigin: ASSET_ORIGIN, + }; const { html, css }: RenderToStringResult = extractCritical( renderToStaticMarkup( diff --git a/dotcom-rendering/src/server/render.article.apps.tsx b/dotcom-rendering/src/server/render.article.apps.tsx index 69ff80662f0..b53e53a1e98 100644 --- a/dotcom-rendering/src/server/render.article.apps.tsx +++ b/dotcom-rendering/src/server/render.article.apps.tsx @@ -26,6 +26,7 @@ export const renderArticle = ( const config: Config = { renderingTarget, darkModeAvailable: !!article.config.switches.darkModeInApps, + assetOrigin: ASSET_ORIGIN, }; const { html, extractedCss } = renderToStringWithEmotion( diff --git a/dotcom-rendering/src/server/render.article.web.tsx b/dotcom-rendering/src/server/render.article.web.tsx index 2175090f781..10357e73c33 100644 --- a/dotcom-rendering/src/server/render.article.web.tsx +++ b/dotcom-rendering/src/server/render.article.web.tsx @@ -49,7 +49,11 @@ export const renderHtml = ({ const format: ArticleFormat = decideFormat(article.format); const renderingTarget = 'Web'; - const config: Config = { renderingTarget, darkModeAvailable: false }; + const config: Config = { + renderingTarget, + darkModeAvailable: false, + assetOrigin: ASSET_ORIGIN, + }; const { html, extractedCss } = renderToStringWithEmotion( @@ -256,7 +260,11 @@ export const renderBlocks = ({ const format: ArticleFormat = decideFormat(FEFormat); // Only currently supported for Web - const config: Config = { renderingTarget: 'Web', darkModeAvailable: false }; + const config: Config = { + renderingTarget: 'Web', + darkModeAvailable: false, + assetOrigin: ASSET_ORIGIN, + }; const editionId = isEditionId(edition) ? edition : 'UK'; diff --git a/dotcom-rendering/src/server/render.front.web.tsx b/dotcom-rendering/src/server/render.front.web.tsx index 33d98380b6f..b7d0595ecc3 100644 --- a/dotcom-rendering/src/server/render.front.web.tsx +++ b/dotcom-rendering/src/server/render.front.web.tsx @@ -3,6 +3,7 @@ import { ConfigProvider } from '../components/ConfigContext'; import { FrontPage } from '../components/FrontPage'; import { TagPage } from '../components/TagPage'; import { + ASSET_ORIGIN, generateScriptTags, getModulesBuild, getPathFromManifest, @@ -80,7 +81,11 @@ export const renderFront = ({ const enhancedNAV = enhanceNav(NAV); // Fronts are not supported in Apps - const config: Config = { renderingTarget: 'Web', darkModeAvailable: false }; + const config: Config = { + renderingTarget: 'Web', + darkModeAvailable: false, + assetOrigin: ASSET_ORIGIN, + }; const { html, extractedCss } = renderToStringWithEmotion( @@ -168,7 +173,11 @@ export const renderTagPage = ({ const enhancedNAV = enhanceNav(NAV); // Fronts are not supported in Apps - const config: Config = { renderingTarget: 'Web', darkModeAvailable: false }; + const config: Config = { + renderingTarget: 'Web', + darkModeAvailable: false, + assetOrigin: ASSET_ORIGIN, + }; const { html, extractedCss } = renderToStringWithEmotion( diff --git a/dotcom-rendering/src/static/logos/hands-small.svg b/dotcom-rendering/src/static/logos/hands-small.svg deleted file mode 100644 index 88779c78ea5..00000000000 --- a/dotcom-rendering/src/static/logos/hands-small.svg +++ /dev/null @@ -1,203 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/dotcom-rendering/src/static/logos/hands.png b/dotcom-rendering/src/static/logos/hands.png new file mode 100644 index 00000000000..67cd9c450b9 Binary files /dev/null and b/dotcom-rendering/src/static/logos/hands.png differ diff --git a/dotcom-rendering/src/static/logos/hands.svg b/dotcom-rendering/src/static/logos/hands.svg deleted file mode 100644 index b6ce7696e51..00000000000 --- a/dotcom-rendering/src/static/logos/hands.svg +++ /dev/null @@ -1,187 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/dotcom-rendering/src/types/configContext.ts b/dotcom-rendering/src/types/configContext.ts index 557f5ceeebb..e5a33463901 100644 --- a/dotcom-rendering/src/types/configContext.ts +++ b/dotcom-rendering/src/types/configContext.ts @@ -1,3 +1,4 @@ +import type { AssetOrigin } from '../lib/assets'; import type { RenderingTarget } from './renderingTarget'; /** @@ -10,8 +11,10 @@ export type Config = | { renderingTarget: Extract; darkModeAvailable: false; + assetOrigin: AssetOrigin; } | { renderingTarget: Extract; darkModeAvailable: boolean; + assetOrigin: AssetOrigin; };