From 0aa97c1baeac7b1b552a46de649fda0ae98cb9f3 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Fri, 30 Jan 2026 15:03:39 +0000 Subject: [PATCH 1/5] Add event nav where it'll be needed --- dotcom-rendering/src/components/DirectoryPageNav.tsx | 2 +- dotcom-rendering/src/layouts/FrontLayout.tsx | 2 ++ dotcom-rendering/src/layouts/InteractiveLayout.tsx | 2 ++ 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/DirectoryPageNav.tsx b/dotcom-rendering/src/components/DirectoryPageNav.tsx index 1a942be6995..b0a94c6f515 100644 --- a/dotcom-rendering/src/components/DirectoryPageNav.tsx +++ b/dotcom-rendering/src/components/DirectoryPageNav.tsx @@ -66,7 +66,7 @@ const configs = [ textColor: palette.neutral[7], backgroundColor: '#CCCCCC', title: { - label: 'Milano Cortina Winter Olympics 2026', + label: 'Winter Olympics 2026', link: '/tbd', }, links: [ diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx index 071963a52c7..027e26ba5f3 100644 --- a/dotcom-rendering/src/layouts/FrontLayout.tsx +++ b/dotcom-rendering/src/layouts/FrontLayout.tsx @@ -8,6 +8,7 @@ import { Fragment } from 'react'; import { AdSlot } from '../components/AdSlot.web'; import { CPScottHeader } from '../components/CPScottHeader'; import { DecideContainer } from '../components/DecideContainer'; +import { DirectoryPageNav } from '../components/DirectoryPageNav'; import { EditionSwitcherBanner } from '../components/EditionSwitcherBanner.importable'; import { Footer } from '../components/Footer'; import { FrontMostViewed } from '../components/FrontMostViewed'; @@ -249,6 +250,7 @@ export const FrontLayout = ({ front, NAV }: Props) => { id="maincontent" css={hasPageSkin && pageSkinContainer} > + {isNetworkFrontPageId(pageId) && ( { )}
+
Date: Tue, 3 Feb 2026 15:23:41 +0000 Subject: [PATCH 2/5] Background images --- .../src/components/DirectoryPageNav.tsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/dotcom-rendering/src/components/DirectoryPageNav.tsx b/dotcom-rendering/src/components/DirectoryPageNav.tsx index b0a94c6f515..bcff5538c6e 100644 --- a/dotcom-rendering/src/components/DirectoryPageNav.tsx +++ b/dotcom-rendering/src/components/DirectoryPageNav.tsx @@ -22,6 +22,13 @@ interface DirectoryPageNavConfig { backgroundColor: string; title: { label: string; link: string }; links: { label: string; href: string; selectedSlug: string | undefined }[]; + backgroundImages?: { + mobile: string; + mobileLandscape: string; + phablet: string; + tablet: string; + desktop: string; + }; } const configs = [ @@ -91,6 +98,16 @@ const configs = [ selectedSlug: undefined, }, ], + backgroundImages: { + mobile: 'https://uploads.guim.co.uk/2026/02/03/winter-olympics-414px.jpg', + mobileLandscape: + 'https://uploads.guim.co.uk/2026/02/03/winter-olympics-480px.jpg', + phablet: + 'https://uploads.guim.co.uk/2026/02/03/winter-olympics-740_px.jpg', + tablet: 'https://uploads.guim.co.uk/2026/02/03/winter-olympics-740px-thin.jpg', + desktop: + 'https://uploads.guim.co.uk/2026/02/03/winter-olympics-980px.jpg', + }, }, ] satisfies DirectoryPageNavConfig[]; @@ -98,6 +115,31 @@ type Configs = typeof configs; type SelectedSlug = Configs[number]['links'][number]['selectedSlug']; type Selected = Exclude; +const backgroundImageStyles = ( + images?: DirectoryPageNavConfig['backgroundImages'], +) => { + if (!images) return {}; + + return { + backgroundImage: `url(${images.mobile})`, + backgroundSize: 'cover', + backgroundPosition: 'top center', + + [from.mobileLandscape]: { + backgroundImage: `url(${images.mobileLandscape})`, + }, + [from.phablet]: { + backgroundImage: `url(${images.phablet})`, + }, + [from.tablet]: { + backgroundImage: `url(${images.tablet})`, + }, + [from.desktop]: { + backgroundImage: `url(${images.desktop})`, + }, + }; +}; + export const DirectoryPageNav = ({ selected, pageId }: Props) => { const config = configs.find((cfg) => pageId.includes(cfg.sectionSlug)); @@ -118,6 +160,7 @@ export const DirectoryPageNav = ({ selected, pageId }: Props) => { [from.desktop]: { height: 150, }, + ...backgroundImageStyles(config.backgroundImages), }); const largeLinkStyles = css({ From 90afbe7eb2b6b8cd626ffbc8421207e9f785de1d Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 3 Feb 2026 16:26:46 +0000 Subject: [PATCH 3/5] Refactor for hard coded list of page IDs Co-Authored-By: Jamie B <53781962+JamieB-gu@users.noreply.github.com> --- dotcom-rendering/src/components/DirectoryPageNav.tsx | 8 ++++---- dotcom-rendering/src/layouts/TagPageLayout.tsx | 2 ++ 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/dotcom-rendering/src/components/DirectoryPageNav.tsx b/dotcom-rendering/src/components/DirectoryPageNav.tsx index bcff5538c6e..97c99696796 100644 --- a/dotcom-rendering/src/components/DirectoryPageNav.tsx +++ b/dotcom-rendering/src/components/DirectoryPageNav.tsx @@ -17,7 +17,7 @@ type Props = { }; interface DirectoryPageNavConfig { - sectionSlug: string; + pageIds: string[]; textColor: string; backgroundColor: string; title: { label: string; link: string }; @@ -33,7 +33,7 @@ interface DirectoryPageNavConfig { const configs = [ { - sectionSlug: 'women-s-euro-2025', + pageIds: ['football/women-s-euro-2025'], textColor: palette.neutral[100], backgroundColor: palette.news[400], title: { @@ -69,7 +69,7 @@ const configs = [ ], }, { - sectionSlug: 'winter-olympics-2026', + pageIds: ['pageId1', 'pageId2'], textColor: palette.neutral[7], backgroundColor: '#CCCCCC', title: { @@ -141,7 +141,7 @@ const backgroundImageStyles = ( }; export const DirectoryPageNav = ({ selected, pageId }: Props) => { - const config = configs.find((cfg) => pageId.includes(cfg.sectionSlug)); + const config = configs.find((cfg) => cfg.pageIds.includes(pageId)); if (!config) { return null; diff --git a/dotcom-rendering/src/layouts/TagPageLayout.tsx b/dotcom-rendering/src/layouts/TagPageLayout.tsx index f9f721154a6..1e5505ecaaf 100644 --- a/dotcom-rendering/src/layouts/TagPageLayout.tsx +++ b/dotcom-rendering/src/layouts/TagPageLayout.tsx @@ -3,6 +3,7 @@ import { palette } from '@guardian/source/foundations'; import { Fragment } from 'react'; import { Accessibility } from '../components/Accessibility.importable'; import { DecideContainerByTrails } from '../components/DecideContainerByTrails'; +import { DirectoryPageNav } from '../components/DirectoryPageNav'; import { Footer } from '../components/Footer'; import { FrontsBannerAdSlot, @@ -99,6 +100,7 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
+ {isAccessibilityPage && ( From c4c28255825363b98f81e4169aa373fb3c055c0c Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 3 Feb 2026 17:35:29 +0000 Subject: [PATCH 4/5] Delete Womens Euros config, reposition element in FrontLayout I'm not sure any of the data pages for the Euros exist any more --- .../src/components/DirectoryPageNav.tsx | 36 ------------------- dotcom-rendering/src/layouts/FrontLayout.tsx | 2 +- 2 files changed, 1 insertion(+), 37 deletions(-) diff --git a/dotcom-rendering/src/components/DirectoryPageNav.tsx b/dotcom-rendering/src/components/DirectoryPageNav.tsx index 97c99696796..388c9fb1716 100644 --- a/dotcom-rendering/src/components/DirectoryPageNav.tsx +++ b/dotcom-rendering/src/components/DirectoryPageNav.tsx @@ -32,42 +32,6 @@ interface DirectoryPageNavConfig { } const configs = [ - { - pageIds: ['football/women-s-euro-2025'], - textColor: palette.neutral[100], - backgroundColor: palette.news[400], - title: { - label: "Women's Euro 2025", - link: '/football/women-s-euro-2025', - }, - links: [ - { - label: 'Fixtures', - href: '/football/women-s-euro-2025/fixtures', - selectedSlug: 'fixtures', - }, - { - label: 'Tables', - href: '/football/women-s-euro-2025/overview', - selectedSlug: 'tables', - }, - { - label: 'Top scorers', - href: '/p/x2e3za', - selectedSlug: undefined, - }, - { - label: 'Players guide', - href: '/p/x27nz8', - selectedSlug: undefined, - }, - { - label: 'Full coverage', - href: '/football/women-s-euro-2025', - selectedSlug: undefined, - }, - ], - }, { pageIds: ['pageId1', 'pageId2'], textColor: palette.neutral[7], diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx index 027e26ba5f3..b4019087807 100644 --- a/dotcom-rendering/src/layouts/FrontLayout.tsx +++ b/dotcom-rendering/src/layouts/FrontLayout.tsx @@ -250,7 +250,6 @@ export const FrontLayout = ({ front, NAV }: Props) => { id="maincontent" css={hasPageSkin && pageSkinContainer} > - {isNetworkFrontPageId(pageId) && ( { /> )} + {filteredCollections.map((collection, index) => { // Backfills should be added to the end of any curated content From f43cfc88500c0c247da16ebea0ff019ccce3040a Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 4 Feb 2026 17:14:40 +0000 Subject: [PATCH 5/5] Swap in live page IDs --- .../src/components/DirectoryPageNav.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/components/DirectoryPageNav.tsx b/dotcom-rendering/src/components/DirectoryPageNav.tsx index 388c9fb1716..e2b0b0f5eaf 100644 --- a/dotcom-rendering/src/components/DirectoryPageNav.tsx +++ b/dotcom-rendering/src/components/DirectoryPageNav.tsx @@ -33,32 +33,37 @@ interface DirectoryPageNavConfig { const configs = [ { - pageIds: ['pageId1', 'pageId2'], + pageIds: [ + 'sport/winter-olympics-2026', + 'sport/ng-interactive/2026/feb/04/winter-olympics-full-schedule-milano-cortina-2026', + 'sport/ng-interactive/2026/feb/04/winter-olympics-results-milano-cortina-2026', + 'sport/ng-interactive/2026/feb/04/winter-olympics-2026-latest-medal-table-milano-cortina', + ], textColor: palette.neutral[7], backgroundColor: '#CCCCCC', title: { label: 'Winter Olympics 2026', - link: '/tbd', + link: 'https://www.theguardian.com/sport/winter-olympics-2026', }, links: [ { label: 'Schedule', - href: '/p/x4x38e', + href: 'https://www.theguardian.com/sport/ng-interactive/2026/feb/04/winter-olympics-full-schedule-milano-cortina-2026', selectedSlug: 'schedule', }, { label: 'Results', - href: '/p/x4x3k4', + href: 'https://www.theguardian.com/sport/ng-interactive/2026/feb/04/winter-olympics-results-milano-cortina-2026', selectedSlug: 'results', }, { label: 'Medal table', - href: '/p/x4x3k6', + href: 'https://www.theguardian.com/sport/ng-interactive/2026/feb/04/winter-olympics-2026-latest-medal-table-milano-cortina', selectedSlug: undefined, }, { label: 'Full coverage', - href: '/tbd', + href: 'https://www.theguardian.com/sport/winter-olympics-2026', selectedSlug: undefined, }, ],