Replace the contents of At a glance with a carousel placeholder on the best air fryers article

Author: emma-imber

dotcom-rendering/src/components/ProductCarousel.tsx

@@ -0,0 +1,7 @@
+const ProductCarousel = () => (
+	<aside>
+		<p>Carousel!</p>
+	</aside>
+);
+
+export { ProductCarousel };

dotcom-rendering/src/lib/renderElement.tsx

@@ -36,6 +36,7 @@ import { MultiBylines } from '../components/MultiBylines';
 import { MultiImageBlockComponent } from '../components/MultiImageBlockComponent';
 import { NumberedTitleBlockComponent } from '../components/NumberedTitleBlockComponent';
 import { PersonalityQuizAtom } from '../components/PersonalityQuizAtom.importable';
+import { ProductCarousel } from '../components/ProductCarousel';
 import { ProductElement } from '../components/ProductElement';
 import { ProductLinkButton } from '../components/ProductLinkButton';
 import { ProfileAtomWrapper } from '../components/ProfileAtomWrapper.importable';
@@ -938,6 +939,8 @@ export const renderElement = ({
 					/>
 				</Island>
 			);
+		case 'model.dotcomrendering.pageElements.ProductCarouselElement':
+			return <ProductCarousel />;
 		case 'model.dotcomrendering.pageElements.AudioBlockElement':
 		case 'model.dotcomrendering.pageElements.ContentAtomBlockElement':
 		case 'model.dotcomrendering.pageElements.GenericAtomBlockElement':

dotcom-rendering/src/model/enhance-H2s.ts

@@ -47,7 +47,11 @@ export const slugify = (text: string): string => {
 /**
  * This function attempts to create a slugified string to use as the id. It fails over to elementId.
  */
-const generateId = (elementId: string, html: string, existingIds: string[]) => {
+export const generateId = (
+	elementId: string,
+	html: string,
+	existingIds: string[],
+): string => {
 	const text = extractText(html);
 	if (!text) return elementId;
 	const slug = slugify(text);

dotcom-rendering/src/model/enhance-product-carousel.ts

@@ -0,0 +1,78 @@
+import type { FEElement, ProductCarouselElement } from '../types/content';
+import { generateId } from './enhance-H2s';
+
+// We only want to insert the carousel in this one specific spot
+const isAtAGlance = (element: FEElement) =>
+	element._type ===
+		'model.dotcomrendering.pageElements.SubheadingBlockElement' &&
+	generateId(element.elementId, element.html, []) === 'at-a-glance';
+
+const isSubheadingOrDivider = (element: FEElement) =>
+	// if an element is one of these then we're likely leaving the 'At a glance' section
+	element._type ===
+		'model.dotcomrendering.pageElements.SubheadingBlockElement' ||
+	element._type === 'model.dotcomrendering.pageElements.DividerBlockElement';
+
+const allowedPageIds = ['thefilter/2025/mar/02/best-air-fryers'];
+
+const isEligibleForCarousel = (pageId: string) =>
+	allowedPageIds.includes(pageId);
+
+const placeholderCarousel: ProductCarouselElement = {
+	_type: 'model.dotcomrendering.pageElements.ProductCarouselElement',
+};
+
+type ReducerAccumulator = {
+	elements: FEElement[];
+	inAtAGlanceSection: boolean;
+};
+
+const insertCarouselPlaceholder = (elements: FEElement[]): FEElement[] => {
+	const elementsWithReducerContext = elements.reduce(
+		(
+			prev: ReducerAccumulator,
+			currentElement: FEElement,
+		): ReducerAccumulator => {
+			let inAtAGlance = prev.inAtAGlanceSection;
+			const elementsToReturn = prev.elements;
+
+			if (!inAtAGlance) {
+				if (isAtAGlance(currentElement)) {
+					inAtAGlance = true;
+				}
+				elementsToReturn.push(currentElement);
+			} else {
+				if (isSubheadingOrDivider(currentElement)) {
+					inAtAGlance = false;
+					elementsToReturn.push(placeholderCarousel, currentElement);
+				}
+
+				// TODO - here we could maybe build a list of the products mentioned in the at a glance section
+				// by appending the current element to a different list which then gets passed into the carousel
+			}
+
+			return {
+				elements: elementsToReturn,
+				inAtAGlanceSection: inAtAGlance,
+			};
+		},
+		// Initial value for reducer function
+		{
+			elements: [],
+			inAtAGlanceSection: false,
+		},
+	);
+
+	return elementsWithReducerContext.elements;
+};
+
+export const enhanceProductCarousel =
+	(pageId: string) =>
+	(elements: FEElement[]): FEElement[] => {
+		// do nothing if article is not on allow list
+		if (isEligibleForCarousel(pageId)) {
+			return insertCarouselPlaceholder(elements);
+		}
+
+		return elements;
+	};

dotcom-rendering/src/model/enhanceBlocks.ts

@@ -19,6 +19,7 @@ import { enhanceH2s } from './enhance-H2s';
 import { enhanceElementsImages, enhanceImages } from './enhance-images';
 import { enhanceInteractiveContentsElements } from './enhance-interactive-contents-elements';
 import { enhanceNumberedLists } from './enhance-numbered-lists';
+import { enhanceProductCarousel } from './enhance-product-carousel';
 import { enhanceTweets } from './enhance-tweets';
 import { enhanceGuVideos } from './enhance-videos';
 import { enhanceLists } from './enhanceLists';
@@ -34,6 +35,7 @@ type Options = {
 	audioArticleImage?: ImageBlockElement;
 	tags?: TagType[];
 	shouldHideAds: boolean;
+	pageId: string;
 };
 
 const enhanceNewsletterSignup =
@@ -94,6 +96,7 @@ export const enhanceElements =
 				options.shouldHideAds,
 			),
 			enhanceDisclaimer(options.hasAffiliateLinksDisclaimer, isNested),
+			enhanceProductCarousel(options.pageId),
 		].reduce(
 			(enhancedBlocks, enhancer) => enhancer(enhancedBlocks),
 			elements,

dotcom-rendering/src/model/enhanceProductElement.test.ts

@@ -82,6 +82,7 @@ const elementsEnhancer = enhanceElements(
 		imagesForLightbox: [],
 		hasAffiliateLinksDisclaimer: false,
 		shouldHideAds: false,
+		pageId: '',
 	},
 	true,
 );

dotcom-rendering/src/model/pinnedPost.ts

@@ -7,6 +7,7 @@ export const enhancePinnedPost = (
 	format: ArticleFormat,
 	renderingTarget: RenderingTarget,
 	pinnedPost: Block | undefined,
+	pageId: string,
 ): Block | undefined => {
 	if (pinnedPost === undefined) {
 		return undefined;
@@ -18,5 +19,6 @@ export const enhancePinnedPost = (
 		promotedNewsletter: undefined,
 		hasAffiliateLinksDisclaimer: false,
 		shouldHideAds: false,
+		pageId,
 	})[0];
 };

dotcom-rendering/src/server/handler.article.apps.ts

@@ -60,6 +60,7 @@ export const handleAppsBlocks: RequestHandler = ({ body }, res) => {
 		imagesForLightbox: [],
 		hasAffiliateLinksDisclaimer: false,
 		shouldHideAds,
+		pageId,
 	});
 	const html = renderAppsBlocks({
 		blocks: enhancedBlocks,

dotcom-rendering/src/server/handler.article.web.ts

@@ -63,6 +63,7 @@ export const handleBlocks: RequestHandler = ({ body }, res) => {
 		imagesForLightbox: [],
 		hasAffiliateLinksDisclaimer: false,
 		shouldHideAds,
+		pageId,
 	});
 	const html = renderBlocks({
 		blocks: enhancedBlocks,

dotcom-rendering/src/types/article.ts

@@ -103,6 +103,7 @@ export const enhanceArticleType = (
 		audioArticleImage: data.audioArticleImage,
 		tags: data.tags,
 		shouldHideAds: data.shouldHideAds,
+		pageId: data.pageId,
 	});
 
 	const crosswordBlock = buildCrosswordBlock(data);
@@ -176,6 +177,7 @@ export const enhanceArticleType = (
 				format,
 				renderingTarget,
 				data.pinnedPost,
+				data.pageId,
 			),
 			standfirst: enhanceStandfirst(data.standfirst),
 			commercialProperties: enhanceCommercialProperties(