Merge branch 'main' into add-gallery-affiliate-link-disclaimer

Author: marjisound

dotcom-rendering/README.md

@@ -30,9 +30,17 @@ $ cd dotcom-rendering
 
 ### Install Node.js
 
-To install and manage Node versions, we highly recommend installing a Node version manager such as [fnm](https://github.com/Schniz/fnm) (preferred), [nvm](https://github.com/nvm-sh/nvm) or [asdf](https://asdf-vm.com/guide/getting-started.html).
+We highly recommend installing a Node version manager such as [fnm](https://github.com/Schniz/fnm) (preferred), [nvm](https://github.com/nvm-sh/nvm) or [asdf](https://asdf-vm.com/guide/getting-started.html).
 
-Ensure you're at the root directory of this project, then follow the instructions for your version manager to install Node.
+Install the Node version manager of your choice.
+
+Ensure you're at the root directory of the project:
+
+```
+cd ~/code/dotcom-rendering
+```
+
+Run the command for your version manager to use the Node version as specified in [.nvmrc](../.nvmrc).
 
 For `fnm` this will be:
 
@@ -94,22 +102,20 @@ $ make install
 
 If you get an Node version error then check the setup for your version manager.
 
-### Running locally
+### Run
 
 ```sh
 $ make dev
 ```
 
-The development server will start on [http://localhost:3030](http://localhost:3030).
+The development server will start on [http://localhost:3030](http://localhost:3030)
 
-A list of content types with example URLs are available on the [root path](http://localhost:3030).
+The development server home page lists examples of the various page and content types.
 
 You can render a specific article by appending the production URL to the `Article` endpoint, for example:
-
 http://localhost:3030/Article/https://www.theguardian.com/sport/2019/jul/28/tour-de-france-key-moments-egan-bernal-yellow-jersey
 
-You can view the JSON representation of an article as sent to DCR by [Frontend](https://github.com/guardian/frontend), by appending `.json?dcr=true` to the production URL, for example:
-
+You can view the JSON data model of a page as sent by [Frontend](https://github.com/guardian/frontend) to DCR by appending `.json?dcr=true` to the production URL, for example:
 https://www.theguardian.com/sport/2019/jul/28/tour-de-france-key-moments-egan-bernal-yellow-jersey.json?dcr=true
 
 ### Detailed setup

dotcom-rendering/src/components/AdSlot.web.tsx

@@ -115,7 +115,7 @@ const topAboveNavContainerStyles = css`
 	display: block;
 `;
 
-const topAboveNavContainerVaraintStyles = css`
+const topAboveNavContainerVariantStyles = css`
 	padding-bottom: ${space[5]}px;
 	position: relative;
 	margin: 0 auto;
@@ -128,6 +128,20 @@ const topAboveNavContainerVaraintStyles = css`
 	&[top-above-nav-ad-rendered='true'] {
 		min-height: auto;
 	}
+
+	/* Ad placeholder grey box rendered while loading the ad */
+	&:not([top-above-nav-ad-rendered='true']) {
+		::before {
+			content: '';
+			position: absolute;
+			height: 250px;
+			width: 970px;
+			top: ${labelHeight}px;
+			left: 50%;
+			transform: translateX(-50%);
+			background-color: ${palette.neutral[93]};
+		}
+	}
 `;
 
 /**
@@ -600,7 +614,7 @@ export const AdSlot = ({
 				<AdSlotWrapper
 					css={
 						isIn250ReservationVariant
-							? topAboveNavContainerVaraintStyles
+							? topAboveNavContainerVariantStyles
 							: topAboveNavContainerStyles
 					}
 				>

dotcom-rendering/src/components/Card/Card.tsx

@@ -708,7 +708,9 @@ export const Card = ({
 						(imagePositionOnMobile === 'bottom' ||
 							isMediaCard(format)))
 				}
-				fillBackgroundOnDesktop={isBetaContainer && isMediaCard(format)}
+				fillBackgroundOnDesktop={
+					isBetaContainer && isMediaCardOrNewsletter
+				}
 			/>
 		);
 

dotcom-rendering/src/components/DecideContainer.tsx

@@ -48,6 +48,7 @@ type Props = {
 	frontId?: string;
 	collectionId: number;
 	containerLevel?: DCRContainerLevel;
+	isInNoBoostsAbTestVariant?: boolean;
 };
 
 export const DecideContainer = ({
@@ -63,6 +64,7 @@ export const DecideContainer = ({
 	frontId,
 	collectionId,
 	containerLevel,
+	isInNoBoostsAbTestVariant,
 }: Props) => {
 	switch (containerType) {
 		case 'dynamic/fast':
@@ -268,6 +270,7 @@ export const DecideContainer = ({
 					aspectRatio={aspectRatio}
 					containerLevel={containerLevel}
 					collectionId={collectionId}
+					isInNoBoostsAbTestVariant={isInNoBoostsAbTestVariant}
 				/>
 			);
 		case 'scrollable/small':

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -21,6 +21,7 @@ import type { ResponsiveFontSize } from './CardHeadline';
 import type { Loading } from './CardPicture';
 import { FeatureCard } from './FeatureCard';
 import { FrontCard } from './FrontCard';
+import { Hide } from './Hide';
 import type { Alignment } from './SupportingContent';
 
 type Props = {
@@ -32,6 +33,7 @@ type Props = {
 	aspectRatio: AspectRatio;
 	containerLevel?: DCRContainerLevel;
 	collectionId: number;
+	isInNoBoostsAbTestVariant?: boolean;
 };
 
 type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -580,17 +582,20 @@ export const FlexibleGeneral = ({
 	aspectRatio,
 	containerLevel = 'Primary',
 	collectionId,
+	isInNoBoostsAbTestVariant,
 }: Props) => {
 	const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
 		...snap,
 		uniqueId: `collection-${collectionId}-splash-0`,
 	}));
+
 	const cards = [...groupedTrails.standard]
 		.slice(0, 19)
 		.map((standard, i) => ({
 			...standard,
 			uniqueId: `collection-${collectionId}-standard-${i}`,
 		}));
+
 	const groupedCards = decideCardPositions(cards);
 
 	return (
@@ -608,11 +613,51 @@ export const FlexibleGeneral = ({
 					collectionId={collectionId}
 				/>
 			)}
-
 			{groupedCards.map((row, i) => {
 				switch (row.layout) {
 					case 'oneCardFullWidth':
-						return (
+						return isInNoBoostsAbTestVariant ? (
+							<>
+								<Hide when="above" breakpoint="tablet">
+									<HalfWidthCardLayout
+										key={row.cards[0]?.uniqueId}
+										cards={row.cards}
+										containerPalette={containerPalette}
+										showAge={showAge}
+										absoluteServerTimes={
+											absoluteServerTimes
+										}
+										imageLoading={imageLoading}
+										isFirstRow={!splash.length && i === 0}
+										isFirstStandardRow={i === 0}
+										aspectRatio={aspectRatio}
+										isLastRow={
+											i === groupedCards.length - 1
+										}
+										containerLevel={containerLevel}
+									/>
+								</Hide>
+								<Hide when="below" breakpoint="tablet">
+									<FullWidthCardLayout
+										key={row.cards[0]?.uniqueId}
+										cards={row.cards}
+										containerPalette={containerPalette}
+										showAge={showAge}
+										absoluteServerTimes={
+											absoluteServerTimes
+										}
+										imageLoading={imageLoading}
+										aspectRatio={aspectRatio}
+										isFirstRow={!splash.length && i === 0}
+										isLastRow={
+											i === groupedCards.length - 1
+										}
+										containerLevel={containerLevel}
+										collectionId={collectionId}
+									/>
+								</Hide>
+							</>
+						) : (
 							<FullWidthCardLayout
 								key={row.cards[0]?.uniqueId}
 								cards={row.cards}

dotcom-rendering/src/components/SignInGate/displayRules.ts

@@ -14,6 +14,8 @@ export const isNPageOrHigherPageView = (n = 2): boolean => {
 
 	const { count = 0 } = dailyCount;
 
+	console.log(`counter inside isNPageOrHigherPageView: ${count}`);
+
 	return count >= n;
 };
 

dotcom-rendering/src/components/SignInGate/gates/main-control.ts

@@ -15,8 +15,41 @@ const canShow = ({
 	tags,
 	isPaidContent,
 	isPreview,
-}: CanShowGateProps): Promise<boolean> =>
-	Promise.resolve(
+}: CanShowGateProps): Promise<boolean> => {
+	// 31st July 2025
+	// author: Pascal
+	// Investigating broken behavior of this function
+
+	console.log('[60f7e8f7] investigation');
+	console.log(`isSignedIn: ${isSignedIn}`);
+	console.log(`!isSignedIn: ${!isSignedIn}`);
+	console.log(`currentTest.variant: ${currentTest.variant}`);
+	console.log(`currentTest.name: ${currentTest.name}`);
+	console.log(
+		`hasUserDismissedGate: ${hasUserDismissedGate(
+			currentTest.variant,
+			currentTest.name,
+		)}`,
+	);
+	console.log(
+		`!hasUserDismissedGate: ${!hasUserDismissedGate(
+			currentTest.variant,
+			currentTest.name,
+		)}`,
+	);
+	console.log(`isNPageOrHigherPageView: ${isNPageOrHigherPageView(3)}`);
+	console.log(`contentType: ${contentType}`);
+	console.log(`isValidContentType: ${isValidContentType(contentType)}`);
+	console.log(`sectionId: ${sectionId}`);
+	console.log(`isValidSection: ${isValidSection(sectionId)}`);
+	console.log(`tags: ${JSON.stringify(tags)}`);
+	console.log(`isValidTag: ${isValidTag(tags)}`);
+	console.log(`isPaidContent: ${isPaidContent}`);
+	console.log(`!isPaidContent: ${!isPaidContent}`);
+	console.log(`isPreview: ${isPreview}`);
+	console.log(`!isPreview: ${!isPreview}`);
+
+	return Promise.resolve(
 		!isSignedIn &&
 			!hasUserDismissedGate(currentTest.variant, currentTest.name) &&
 			isNPageOrHigherPageView(3) &&
@@ -28,6 +61,7 @@ const canShow = ({
 			// hide the sign in gate on internal tools preview
 			!isPreview,
 	);
+};
 
 export const signInGateComponent: SignInGateComponent = {
 	canShow,

dotcom-rendering/src/components/SignInGateSelector.importable.tsx

@@ -372,6 +372,15 @@ const decideShowDefaultGate = (): ShowGateValues => {
 	return undefined;
 };
 
+const decideShouldEnforceLocalLogic = (): boolean => {
+	// July 31st
+	// SignIn gate behavior investigation
+
+	const params = new URLSearchParams(window.location.search);
+	const value: string | null = params.get('localgatelogic');
+	return value === 'true';
+};
+
 const buildAuxiaGateDisplayData = async (
 	contributionsServiceUrl: string,
 	pageId: string,
@@ -388,9 +397,14 @@ const buildAuxiaGateDisplayData = async (
 	const readerPersonalData = await decideAuxiaProxyReaderPersonalData();
 	const tagIds = tags.map((tag) => tag.id);
 
+	let mvtId = readerPersonalData.mvtId;
+	if (decideShouldEnforceLocalLogic()) {
+		mvtId = 350001; // to be outside the Auxia share of the Audience
+	}
+
 	let should_show_legacy_gate_tmp;
 
-	if (isAuxiaAudience) {
+	if (!decideShouldEnforceLocalLogic() && isAuxiaAudience) {
 		should_show_legacy_gate_tmp = false;
 		// The actual value is irrelevant in this case, but we have the convention to set it to false here
 	} else {
@@ -425,7 +439,7 @@ const buildAuxiaGateDisplayData = async (
 		tagIds,
 		gateDismissCount,
 		readerPersonalData.countryCode,
-		readerPersonalData.mvtId,
+		mvtId,
 		should_show_legacy_gate_tmp,
 		readerPersonalData.hasConsented,
 		shouldServeDismissible,

dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx

@@ -23,7 +23,7 @@ import type {
 	Image,
 } from '@guardian/support-dotcom-components/dist/shared/types';
 import type { ChoiceCard } from '@guardian/support-dotcom-components/dist/shared/types/props/choiceCards';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
 	removeMediaRulePrefix,
 	useMatchMedia,
@@ -137,6 +137,14 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 		);
 	}, []);
 
+	const bannerRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (bannerRef.current) {
+			bannerRef.current.focus();
+		}
+	}, []);
+
 	useEffect(() => {
 		if (iosAppBannerPresent) {
 			// send ophan event
@@ -275,6 +283,9 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 
 	return (
 		<div
+			ref={bannerRef}
+			role="alert"
+			tabIndex={-1}
 			css={styles.outerContainer(
 				templateSettings.containerSettings.backgroundColour,
 				iosAppBannerPresent,

dotcom-rendering/src/devServer/docs/article.tsx

@@ -142,10 +142,10 @@ const Format = () => (
 			<dt>Theme</dt>
 			<dd>
 				Primarily influences the fonts and colours of an article. It can
-				can be thought of as a superset of "pillar", i.e. all the
-				pillars are considered themes, but there are some additional
-				themes that are not pillars. The values are:{' '}
-				{formatValues(Pillar)}, {formatValues(ArticleSpecial)}.
+				be thought of as a superset of "pillar", i.e. all the pillars
+				are considered themes, but there are some additional themes that
+				are not pillars. The values are: {formatValues(Pillar)},{' '}
+				{formatValues(ArticleSpecial)}.
 			</dd>
 		</dl>
 		<p>