Merge branch 'main' of github.com:guardian/dotcom-rendering into jm/new-sign-in-gate

Author: Juarez Mota

.github/workflows/compress.yml

@@ -26,6 +26,11 @@ jobs:
       - name: Set up Node environment
         uses: ./.github/actions/setup-node-env
 
+      - name: Turn off mandb updates
+        run: |
+          sudo mv /usr/bin/mandb /usr/bin/mandb-OFF
+          sudo cp -p /bin/true /usr/bin/mandb
+
       - name: Install Playwright Browsers
         run: pnpm playwright install --with-deps chromium
         working-directory: ./dotcom-rendering

.github/workflows/playwright.yml

@@ -63,8 +63,8 @@
 		"@storybook/react-webpack5": "8.6.14",
 		"@storybook/theming": "8.6.14",
 		"@types/clean-css": "4.2.11",
-		"@types/compression": "1.7.5",
-		"@types/express": "4.17.21",
+		"@types/compression": "1.8.1",
+		"@types/express": "5.0.1",
 		"@types/html-webpack-plugin": "3.2.9",
 		"@types/jest": "29.5.14",
 		"@types/jsdom": "16.2.15",
@@ -79,13 +79,13 @@
 		"buffer": "6.0.3",
 		"clean-css": "5.3.3",
 		"compare-versions": "6.1.0",
-		"compression": "1.7.4",
+		"compression": "1.8.0",
 		"constructs": "10.4.2",
 		"core-js": "3.33.3",
 		"eslint": "8.56.0",
 		"eslint-plugin-jsx-a11y": "6.7.1",
 		"eslint-plugin-react": "7.33.2",
-		"express": "4.21.2",
+		"express": "5.1.0",
 		"html-webpack-plugin": "5.6.3",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",

apps-rendering/package.json

@@ -396,7 +396,7 @@ app.use('/assets', express.static(path.resolve(__dirname, '../assets')));
 app.use('/assets', express.static(path.resolve(__dirname, '../dist/assets')));
 app.use(compression());
 
-app.all('*', (request, response, next) => {
+app.all('/{*splat}', (request, response, next) => {
 	const start = Date.now();
 
 	response.once('finish', () => {
@@ -409,22 +409,29 @@ app.all('*', (request, response, next) => {
 	next();
 });
 
-app.get('/healthcheck', (_req, res) => res.send('Ok'));
+app.get('/healthcheck', (_req, res) => {
+	res.status(200).send('Ok');
+});
 
-app.get('/favicon.ico', (_, res) => res.status(404).end());
-app.get('/fontSize.css', (_, res) => res.status(404).end());
+app.get('/favicon.ico', (_, res) => {
+	res.sendStatus(404);
+});
+
+app.get('/fontSize.css', (_, res) => {
+	res.sendStatus(404);
+});
 
 /**
 To enable testing in the mobile device emulators,
 this route handler adds compatability with DCR's route for apps articles.
 The DCR route follows the pattern:
-/AppsArticle/https://www.theguardian.com/cities/2019/sep/13/reclaimed-lakes-and-giant-airports-how-mexico-city-might-have-looked
+AppsArticle/https://www.theguardian.com/food/2020/mar/15/easter-taste-test-dan-lepard-hot-cross-bun-milk-dark-chocolate-mini-eggs-bunny-sloth
 */
 app.get(
-	'/AppsArticle/*',
+	'/AppsArticle/*url',
 	express.raw(),
 	(req, res, next) => {
-		const contentWebUrl = req.params[0];
+		const contentWebUrl = req.originalUrl.split('/').slice(2).join('/');
 		const articleId = new URL(contentWebUrl).pathname;
 		req.params = {
 			0: articleId,
@@ -436,16 +443,13 @@ app.get(
 );
 
 app.get(
-	'/:edition(uk|us|au|europe|international)?/rendered-items/*',
-	express.raw(),
-	serveArticleGet,
-);
-app.get(
-	'/:edition(uk|us|au|europe|international)?/*',
+	['/:edition/rendered-items/*path', '/rendered-items/*path'],
 	express.raw(),
 	serveArticleGet,
 );
 
+app.get(['/:edition/*path', '/*path'], express.raw(), serveArticleGet);
+
 app.post('/article', express.raw(), serveArticlePost);
 
 app.post('/editions-article', express.raw(), serveEditionsArticlePost);

apps-rendering/src/server/server.ts

@@ -96,6 +96,12 @@ export const getInteractivesClient: BridgetApi<
 	getNativePlatform: async () => 0,
 });
 
+export const getListenToArticleClient: BridgetApi<
+	'getListenToArticleClient'
+> = () => ({
+	isAvailable: async () => true,
+	isPlaying: async () => false,
+});
 export const ensure_all_exports_are_present = {
 	getUserClient,
 	getAcquisitionsClient,
@@ -112,6 +118,7 @@ export const ensure_all_exports_are_present = {
 	getTagClient,
 	getInteractionClient,
 	getInteractivesClient,
+	getListenToArticleClient,
 } satisfies {
 	[Method in keyof BridgeModule]: BridgetApi<Method>;
 };

dotcom-rendering/.storybook/mocks/bridgetApi.ts

@@ -65,4 +65,8 @@ export const allModes = {
 		globalColourScheme: 'light',
 		viewport: breakpoints.desktop,
 	},
+	'light leftCol': {
+		globalColourScheme: 'light',
+		viewport: breakpoints.leftCol,
+	},
 };

dotcom-rendering/.storybook/modes.ts

@@ -99,12 +99,7 @@ export const trails: [
 			height: 288,
 			origin: 'The Guardian',
 			expired: false,
-			images: [
-				{
-					url: 'https://i.guim.co.uk/img/media/e060e9b7c92433b3dfeccc98b9206778cda8b8e8/0_180_6680_4009/master/6680.jpg?width=600&quality=45&dpr=2&s=none',
-					width: 600,
-				},
-			],
+			image: 'https://i.guim.co.uk/img/media/e060e9b7c92433b3dfeccc98b9206778cda8b8e8/0_180_6680_4009/master/6680.jpg?width=600&quality=45&dpr=2&s=none',
 		},
 		isExternalLink: false,
 		showLivePlayable: false,
@@ -465,24 +460,7 @@ export const trails: [
 			width: 500,
 			height: 300,
 			origin: 'The Guardian',
-			images: [
-				{
-					url: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/1000.jpg',
-					width: 1000,
-				},
-				{
-					url: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/500.jpg',
-					width: 500,
-				},
-				{
-					url: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/140.jpg',
-					width: 140,
-				},
-				{
-					url: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/1920.jpg',
-					width: 1920,
-				},
-			],
+			image: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/1920.jpg',
 			expired: false,
 		},
 		isExternalLink: false,
@@ -608,12 +586,7 @@ export const trails: [
 			height: 288,
 			origin: 'The Guardian',
 			expired: false,
-			images: [
-				{
-					url: 'https://i.guim.co.uk/img/media/e060e9b7c92433b3dfeccc98b9206778cda8b8e8/0_180_6680_4009/master/6680.jpg?width=600&quality=45&dpr=2&s=none',
-					width: 600,
-				},
-			],
+			image: 'https://i.guim.co.uk/img/media/e060e9b7c92433b3dfeccc98b9206778cda8b8e8/0_180_6680_4009/master/6680.jpg?width=600&quality=45&dpr=2&s=none',
 		},
 		isExternalLink: false,
 		showLivePlayable: false,
@@ -794,28 +767,7 @@ export const videoTrails: [DCRFrontCard, DCRFrontCard] = [
 			height: 300,
 			origin: 'SNTV',
 			expired: false,
-			images: [
-				{
-					url: 'https://media.guim.co.uk/0cab2d745b3423b0fac318c9ee09b79678f568f8/0_56_3000_1688/2000.jpg',
-					width: 2000,
-				},
-				{
-					url: 'https://media.guim.co.uk/0cab2d745b3423b0fac318c9ee09b79678f568f8/0_56_3000_1688/1000.jpg',
-					width: 1000,
-				},
-				{
-					url: 'https://media.guim.co.uk/0cab2d745b3423b0fac318c9ee09b79678f568f8/0_56_3000_1688/500.jpg',
-					width: 500,
-				},
-				{
-					url: 'https://media.guim.co.uk/0cab2d745b3423b0fac318c9ee09b79678f568f8/0_56_3000_1688/140.jpg',
-					width: 140,
-				},
-				{
-					url: 'https://media.guim.co.uk/0cab2d745b3423b0fac318c9ee09b79678f568f8/0_56_3000_1688/3000.jpg',
-					width: 3000,
-				},
-			],
+			image: 'https://media.guim.co.uk/0cab2d745b3423b0fac318c9ee09b79678f568f8/0_56_3000_1688/3000.jpg',
 		},
 		showVideo: true,
 		image: {
@@ -849,28 +801,7 @@ export const videoTrails: [DCRFrontCard, DCRFrontCard] = [
 			height: 300,
 			origin: 'Reuters',
 			expired: false,
-			images: [
-				{
-					url: 'https://media.guim.co.uk/908aa315f66a09bc6ea607b6049cd72decd2dfa6/0_0_5358_3014/2000.jpg',
-					width: 2000,
-				},
-				{
-					url: 'https://media.guim.co.uk/908aa315f66a09bc6ea607b6049cd72decd2dfa6/0_0_5358_3014/1000.jpg',
-					width: 1000,
-				},
-				{
-					url: 'https://media.guim.co.uk/908aa315f66a09bc6ea607b6049cd72decd2dfa6/0_0_5358_3014/500.jpg',
-					width: 500,
-				},
-				{
-					url: 'https://media.guim.co.uk/908aa315f66a09bc6ea607b6049cd72decd2dfa6/0_0_5358_3014/140.jpg',
-					width: 140,
-				},
-				{
-					url: 'https://media.guim.co.uk/908aa315f66a09bc6ea607b6049cd72decd2dfa6/0_0_5358_3014/5358.jpg',
-					width: 5358,
-				},
-			],
+			image: 'https://media.guim.co.uk/908aa315f66a09bc6ea607b6049cd72decd2dfa6/0_0_5358_3014/5358.jpg',
 		},
 		showVideo: true,
 		image: {

dotcom-rendering/fixtures/manual/trails.ts

@@ -28,7 +28,7 @@
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/braze-components": "22.2.0",
-		"@guardian/bridget": "8.4.0",
+		"@guardian/bridget": "8.5.1",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "61.4.0",
 		"@guardian/commercial": "26.1.2",
@@ -38,12 +38,12 @@
 		"@guardian/identity-auth": "6.0.1",
 		"@guardian/identity-auth-frontend": "8.1.0",
 		"@guardian/libs": "23.0.0",
-		"@guardian/ophan-tracker-js": "2.2.10",
+		"@guardian/ophan-tracker-js": "2.3.0",
 		"@guardian/react-crossword": "6.3.0",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "9.0.0",
 		"@guardian/source-development-kitchen": "18.1.1",
-		"@guardian/support-dotcom-components": "7.4.0",
+		"@guardian/support-dotcom-components": "7.5.0",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.52.0",
 		"@sentry/browser": "7.75.1",
@@ -73,7 +73,7 @@
 		"@types/compression": "1.7.5",
 		"@types/connect": "3.4.38",
 		"@types/dompurify": "3.0.2",
-		"@types/express": "4.17.21",
+		"@types/express": "5.0.1",
 		"@types/he": "1.2.0",
 		"@types/html-minifier-terser": "7.0.2",
 		"@types/jest": "29.5.14",
@@ -130,7 +130,7 @@
 		"eslint-plugin-unicorn": "48.0.1",
 		"eslint-stats": "1.0.1",
 		"execa": "5.1.1",
-		"express": "4.21.2",
+		"express": "5.1.0",
 		"find": "0.3.0",
 		"he": "1.2.0",
 		"html-minifier-terser": "7.2.0",

dotcom-rendering/package.json

@@ -32,6 +32,14 @@ export const getOphan = async (
 					);
 				}
 			},
+			trackClickComponentEvent: (e) => {
+				if (e instanceof Error) {
+					window.guardian.modules.sentry.reportError(
+						e,
+						"We are in DCAR but Ophan trackClickComponentEvent method got called. This shouldn't have happened. Please investigate why",
+					);
+				}
+			},
 			viewId: 'Apps',
 			pageViewId: 'Apps',
 		};
@@ -73,6 +81,14 @@ export const submitComponentEvent = async (
 	ophan.record({ componentEvent });
 };
 
+export const submitClickComponentEvent = async (
+	element: Element,
+	renderingTarget: RenderingTarget,
+): Promise<void> => {
+	const ophan = await getOphan(renderingTarget);
+	ophan.trackClickComponentEvent(element);
+};
+
 interface SdcTestMeta {
 	abTestName: NonNullable<ComponentEvent['abTest']>['name'];
 	abTestVariant: NonNullable<ComponentEvent['abTest']>['name'];

dotcom-rendering/src/client/ophan/ophan.ts

@@ -261,7 +261,7 @@ const frontsBannerAdStyles = css`
 
 const articleEndAdStyles = css`
 	position: relative;
-	min-height: ${getMinHeight(adSizes.outstreamDesktop.height)}px;
+	min-height: 450px;
 
 	&.ad-slot--fluid {
 		min-height: 450px;