Add Storylines content to tag pages #15008

Georges-GNM · 2025-12-15T10:57:07Z

What does this change?

Part of the AI tag pages work. This adds the content to the tag pages model, enabling it to be passed through from the work in this frontend PR, implements the figma designs (available here although there’s also been some subsequent decisions not updated in the figma), and includes new storybook stories for testing.

Worth flagging at the outset that this is all behind a 0% experiment in frontend - if not in the test, frontend doesn't retrieve the needed content (just returning None). In January, we plan to start a 50% test on a limited number of pages; after which we'll determine if we want to keep the feature and deploy it on a wider number of tags.

It looks like a big PR, but it's meant to comprehensively deliver the feature (with the associated model, data transformation and rendering changes, which has also meant splitting this up is arguably not ideal). A significant portion of the diff comes from code which is either very similar to an existing component, or from schema changes/fixtures/storybook setup.

Chromatic tests only flagged one false positive for an existing component (change of the classname), so I'm fairly confident this doesn't affect existing styling.
  

What does this actually change?

We add the content type to the tag page model, based on the structure provided by the tool and correspondingly sent by frontend.

As a quick overview, we have:
-> content
---> array of storylines
----> in each storyline, an array of categories (e.g. key stories, opinions, deep reads)
-----> in each category, an array of articles, with the minimum data required to render them by DCR (headline, url, publication date, maybe byline, image data and if relevant, main media data).

The content gets rendered in the tag page layout just below the first container (thereby always showing the most recent articles on a given tag at the top of the page). The designs are inspired by the front page redesign, and notably the flexible general container, so the implementation has taken this into account and tried to reuse existing logic where possible.

We add two new components, StorylineSection and StorylinesSection.importable. The former provides the general structure of the section (it's very similar to the FrontSection component, particularly in terms of the style and grid setup, but slightly adapted and removing unnecessary logic).

The latter calls an enhanceAITagPageContent function to transform the data sent by frontend, turning the very basic article information we receive (headline, url, image/multimedia data) into the DCRGroupedTrails and DCRFrontCard shape. Based on the categories these articles are a part of, we can be deterministic in terms of how values need to be defined for a DCRFrontCard (e.g. for the format). Most of these front cards end up being part of the standard group in a trail, but the key stories category is a bit different: the image for that gets taken from the first (latest) article in the category, and each of the headlines get used as the "supporting content" on the left of the image.

Once we've got the data in shape, each of the categories in a storyline gets rendered as a flexible general container. These are individual containers mainly so we can add the title of the category before them.

For the most part this just uses the pre-existing logic, but some variations needed to be tweaked (e.g. the rendering of the key stories category in particular), and so we pass a boolean storylinesStyle through FlexibleGeneral and Card to enable this (and add a SupportingKeyStoriesContent component, similar to the supporting content component, but with enough notable differences). CardAge and feature card components (FeatureCard and FeatureCardAge`) also get touched slightly, to ensure we display the age correctly (as the cards are displayed on an “archive” page, it feels important to indicate when the article was published).

The only piece of AI generated text, the titles of the storylines, get rendered at the top of the section. These are tabs that can be clicked on to switch stories, so we need this to be an island to enable the necessary javascript.

Few more points to note:

The storyline section has some text at the top left (under the "Storylines" container title), with a link that should point to further information - we've not settled on exactly where this is going yet, but I'd prefer to keep this text as is (and update the link in a subsequent PR) to keep a view of it as part of the design. In order to provide a valid link, I've pointed to the AI guidelines for now.
The bottom left of the storyline section (the standard "treats" position) makes use of the like/dislike feedback footer usually found in atoms. This is so we can try to get a bit more qualitative feedback from readers in the test. I've added the relevant component type to the thrift model and bumped the version of tracker.js to enable this (following this PR in Ophan)

Screenshots

Category	Desktop	Mobile
fullPage		![fullPage-mobile][]
keyStories		![keyStories-mobile][]
opinionsAndExplainers		![opinionsAndExplainers-mobile][]
deepReads		![deepReads-mobile][]
multimedia		![multimedia-mobile][]
profilesAndInterviews		![profilesAndInterviews-mobile][]

[keyStories-mobile]:

[opinionsAndExplainers-mobile]:

[deepReads-mobile]:

[multimedia-mobile]:

[profilesAndInterviews-mobile]:

Desktop	Mobile

github-actions · 2025-12-15T11:11:33Z

Deploy build 324 of `dotcom:ab-testing` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2025-12-15T11:14:35Z

Deploy build 23441 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

fredex42

This looks great to me. I've noticed a few places where we could zap commented code and a couple of bits marked with eyes that might need another quick look but from a non-DCR expert point of view looking great 👍

fredex42 · 2025-12-15T17:18:36Z

dotcom-rendering/src/components/StorylineSection.tsx

+// const sectionHeadlineFromLeftCol = (borderColour: string) => css`
+// 	${from.leftCol} {
+// 		position: relative;
+// 		::after {
+// 			content: '';
+// 			display: block;
+// 			width: 1px;
+// 			top: 0;
+// 			height: 1.875rem;
+// 			right: -10px;
+// 			position: absolute;
+// 			background-color: ${borderColour};
+// 		}
+// 	}
+// `;


fredex42 · 2025-12-15T17:21:02Z

dotcom-rendering/src/components/StorylineSection.tsx

+	dislikeHandler,
+	likeHandler,
+}: Props) => {
+	const id = sectionId || 'unknown-id'; //todo: figure out what this should be


fredex42 · 2025-12-15T17:23:04Z

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

+// ${textSans17};
+// 	font-weight: 700;


fredex42 · 2025-12-15T17:23:48Z

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

+	// console.log('StorylinesContent', StorylinesContent);
+	// const [storylines, SetStorylines] = useState<StorylinesContent>();


fredex42 · 2025-12-15T17:23:59Z

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

+	// useEffect(() => {
+	// 	fetch(
+	// 		`http://localhost:9000/api/tag-page-rendering/${tagPage.pageId}`,
+	// 		{
+	// 			headers: {
+	// 				'Content-Type': 'application/json',
+	// 			},
+	// 			credentials: 'include',
+	// 		},
+	// 	)
+	// 		.then((response) => {
+	// 			console.log('response', response);
+	// 			return response.json();
+	// 		})
+	// 		.then((data) => SetStorylines(data))
+	// 		.catch((error) => {
+	// 			console.error('Error fetching storylines data:', error);
+	// 		});
+	// }, []);


fredex42 · 2025-12-15T17:32:08Z

dotcom-rendering/src/layouts/TagPageLayout.tsx

 					image={tagPage.header.image}
 				/>
 				{tagPage.groupedTrails.map((groupedTrails, index) => {
+					// console.log("groupedTrails in TagPageLayout:", groupedTrails);


fredex42 · 2025-12-15T17:34:02Z

dotcom-rendering/src/layouts/TagPageLayout.tsx


+					const insertSCSection =
+						tagPage.storylinesContent &&
+						// isSCTagPage &&


fredex42 · 2025-12-15T17:58:04Z

dotcom-rendering/src/model/enhanceAITagPageContent.ts

+			article.image?.isAvatar
+				? article.image?.src
+				: undefined, // will need to be set for opinion pieces
+		// mainMedia: undefined, // ought to be set for multimedia pieces, but missing the extra info like count?


Is this a TBD?

fredex42 · 2025-12-15T17:58:17Z

dotcom-rendering/src/model/enhanceAITagPageContent.ts

+		// const articleAge =
+		// 	article.publicationTime &&
+		// 	timeAgo(new Date(article.publicationTime).getTime()).toString();


fredex42 · 2025-12-15T17:59:16Z

dotcom-rendering/src/types/storylinesContent.ts

+	categories: ParsedCategory[];
+};
+
+// probably want to add a generic category type mapping to those in supercharger (e.g. opinions) and map this to a container type and title (e.g. "Contrasting Opinions" + "flexible/general")


Georges-GNM · 2025-12-16T10:24:18Z

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

+		<>
+			<StorylineSection
+				title="Storylines"
+				containerPalette="LongRunningAltPalette"


Feels a bit hacky to hard code this, but this provides some styling (notably the greyed background) without having to add more palette variations and still sticking to the “container overrides” pattern in a section.

Georges-GNM added run_chromatic Runs chromatic when label is applied feature Departmental tracking: work on a new feature and removed run_chromatic Runs chromatic when label is applied labels Dec 15, 2025

Georges-GNM added 20 commits December 15, 2025 11:08

wip

7081754

wip2

28a08f6

small tweaks

593e7ad

remove unused import

619613a

fetch local data

6669694

some tweaks from feedback and set up data pipeline

8885f44

tweak opinion/media articles and add date

a0a28ca

Wip including using content provided by frontend

c4552bb

lint and gen schema

db1804b

more lint fix

1a87a4f

reorganise some of the code and delete some of the unnecessary parts

56442fd

Add story

15a6dbd

Add dates to multimedia and feature cards, and tweak storyline title

735ec97

tweak articles published since date

bc6d9ad

re-gen schemas

b45588d

lint

ceaed1d

gen schema again after rebase

9e6b575

tweak insertion check and add age to SC supporting content

24b7aed

comment twweak and restore linkto

643e629

bump ophan tracker js and make use of new component type

4d86f78

Georges-GNM force-pushed the gl/sc-tag-page-mockup branch from 27791e1 to dd106f8 Compare December 15, 2025 11:10

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Dec 15, 2025

Georges-GNM mentioned this pull request Dec 15, 2025

Add tag page experiment and pull storylines content guardian/frontend#28463

Draft

7 tasks

rename fields

d5fb9f0

Georges-GNM force-pushed the gl/sc-tag-page-mockup branch from dd106f8 to d5fb9f0 Compare December 15, 2025 11:21

Georges-GNM added the run_chromatic Runs chromatic when label is applied label Dec 15, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Dec 15, 2025

tidy

e2f5c91

Georges-GNM added the run_chromatic Runs chromatic when label is applied label Dec 15, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Dec 15, 2025

fredex42 reviewed Dec 15, 2025

View reviewed changes

Georges-GNM commented Dec 16, 2025

View reviewed changes

Georges-GNM and others added 2 commits December 17, 2025 16:40

tidy

56497b1

Merge branch 'main' into gl/sc-tag-page-mockup

3c40535

Georges-GNM force-pushed the gl/sc-tag-page-mockup branch from 155c448 to 3c40535 Compare December 23, 2025 15:06

Georges-GNM added 3 commits December 24, 2025 11:03

wip tweaking supporting content

09dad00

tweak supporting content in key stories

87bfddf

lint

2ce0343

Georges-GNM changed the title ~~tag page wip~~ Add Storylines content to tag pages Dec 29, 2025

Georges-GNM added the run_chromatic Runs chromatic when label is applied label Dec 29, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Dec 29, 2025

tweak mobile

fbf8008

		// console.log('StorylinesContent', StorylinesContent);
		// const [storylines, SetStorylines] = useState<StorylinesContent>();

Add Storylines content to tag pages #15008

Are you sure you want to change the base?

Add Storylines content to tag pages #15008

Uh oh!

Conversation

Georges-GNM commented Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this change?

What does this actually change?

Screenshots

Uh oh!

github-actions bot commented Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fredex42 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Georges-GNM commented Dec 15, 2025 •

edited

Loading

github-actions bot commented Dec 15, 2025 •

edited

Loading

github-actions bot commented Dec 15, 2025 •

edited

Loading