Create Football data page layout #13373

andrewHEguardian · 2025-02-13T12:51:26Z

What does this change?

Creates a dev route, page component and layout for football data pages (ie fixtures, results, live scores (for now)).

How to test

Go to http://localhost:3030/FootballDataPage/https://www.theguardian.com/football/live

We are passing through unvalidated JSON from frontend for the page furniture but the actual football data is hardcoded for now.

Screenshots

Mobile

Wide

github-actions · 2025-02-13T12:51:39Z

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

github-actions · 2025-02-13T12:53:16Z

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

All deployment options

From guardian/actions-riff-raff.

github-actions · 2025-02-13T12:56:13Z

Size Change: +109 B (+0.01%)

Total Size: 899 kB

Filename	Size	Change
`dotcom-rendering/dist/FootballMatchesPage-importable.client.web.********************.js`	0 B	-3.88 kB (removed)	🏆
`dotcom-rendering/dist/FootballMatchesPageWrapper-importable.client.web.********************.js`	3.98 kB	+3.98 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size	Change
`dotcom-rendering/dist/1076.client.web.********************.js`	3.41 kB	0 B
`dotcom-rendering/dist/1101.client.web.********************.js`	5.08 kB	0 B
`dotcom-rendering/dist/1262.client.web.********************.js`	4.49 kB	0 B
`dotcom-rendering/dist/1345.client.web.********************.js`	2.81 kB	0 B
`dotcom-rendering/dist/1401.client.web.********************.js`	441 B	0 B
`dotcom-rendering/dist/1427.client.web.********************.js`	4.94 kB	0 B
`dotcom-rendering/dist/1477.client.web.********************.js`	3.4 kB	0 B
`dotcom-rendering/dist/1714.client.web.********************.js`	2.87 kB	0 B
`dotcom-rendering/dist/1845.client.web.********************.js`	2.67 kB	0 B
`dotcom-rendering/dist/2444.client.web.********************.js`	2.67 kB	0 B
`dotcom-rendering/dist/2482.client.web.********************.js`	44.8 kB	0 B
`dotcom-rendering/dist/280.client.web.********************.js`	531 B	0 B
`dotcom-rendering/dist/2833.client.web.********************.js`	3.64 kB	0 B
`dotcom-rendering/dist/2981.client.web.********************.js`	3.75 kB	0 B
`dotcom-rendering/dist/3188.client.web.********************.js`	3.09 kB	0 B
`dotcom-rendering/dist/342.client.web.********************.js`	4.18 kB	0 B
`dotcom-rendering/dist/3524.client.web.********************.js`	3.52 kB	0 B
`dotcom-rendering/dist/3769.client.web.********************.js`	22.7 kB	0 B
`dotcom-rendering/dist/3789.client.web.********************.js`	3.58 kB	0 B
`dotcom-rendering/dist/39.client.web.********************.js`	3.07 kB	0 B
`dotcom-rendering/dist/3922.client.web.********************.js`	7.4 kB	0 B
`dotcom-rendering/dist/3937.client.web.********************.js`	3.88 kB	0 B
`dotcom-rendering/dist/4024.client.web.********************.js`	2.84 kB	0 B
`dotcom-rendering/dist/4170.client.web.********************.js`	16.3 kB	0 B
`dotcom-rendering/dist/4177.client.web.********************.js`	3.92 kB	0 B
`dotcom-rendering/dist/4337.client.web.********************.js`	14.7 kB	0 B
`dotcom-rendering/dist/4501.client.web.********************.js`	4.29 kB	0 B
`dotcom-rendering/dist/4684.client.web.********************.js`	3.17 kB	0 B
`dotcom-rendering/dist/4793.client.web.********************.js`	5.33 kB	0 B
`dotcom-rendering/dist/4878.client.web.********************.js`	8.08 kB	0 B
`dotcom-rendering/dist/4943.client.web.********************.js`	3.69 kB	0 B
`dotcom-rendering/dist/5223.client.web.********************.js`	3.27 kB	0 B
`dotcom-rendering/dist/5598.client.web.********************.js`	4.49 kB	0 B
`dotcom-rendering/dist/6021.client.web.********************.js`	11.3 kB	0 B
`dotcom-rendering/dist/6061.client.web.********************.js`	3.63 kB	0 B
`dotcom-rendering/dist/6073.client.web.********************.js`	3.53 kB	0 B
`dotcom-rendering/dist/6110.client.web.********************.js`	3.54 kB	0 B
`dotcom-rendering/dist/6163.client.web.********************.js`	3.83 kB	0 B
`dotcom-rendering/dist/6577.client.web.********************.js`	5.41 kB	0 B
`dotcom-rendering/dist/658.client.web.********************.js`	2.71 kB	0 B
`dotcom-rendering/dist/6627.client.web.********************.js`	10.3 kB	0 B
`dotcom-rendering/dist/6876.client.web.********************.js`	2.67 kB	0 B
`dotcom-rendering/dist/6931.client.web.********************.js`	2.65 kB	0 B
`dotcom-rendering/dist/6940.client.web.********************.js`	526 B	0 B
`dotcom-rendering/dist/704.client.web.********************.js`	2.84 kB	0 B
`dotcom-rendering/dist/7116.client.web.********************.js`	23 kB	0 B
`dotcom-rendering/dist/7350.client.web.********************.js`	3.32 kB	0 B
`dotcom-rendering/dist/7540.client.web.********************.js`	2.75 kB	0 B
`dotcom-rendering/dist/7544.client.web.********************.js`	4.77 kB	0 B
`dotcom-rendering/dist/7546.client.web.********************.js`	7.59 kB	0 B
`dotcom-rendering/dist/7765.client.web.********************.js`	17.6 kB	0 B
`dotcom-rendering/dist/7861.client.web.********************.js`	619 B	0 B
`dotcom-rendering/dist/8030.client.web.********************.js`	4.45 kB	0 B
`dotcom-rendering/dist/8067.client.web.********************.js`	3.39 kB	0 B
`dotcom-rendering/dist/8123.client.web.********************.js`	20.4 kB	0 B
`dotcom-rendering/dist/8209.client.web.********************.js`	3.64 kB	0 B
`dotcom-rendering/dist/8324.client.web.********************.js`	14 kB	0 B
`dotcom-rendering/dist/839.client.web.********************.js`	3.42 kB	0 B
`dotcom-rendering/dist/8592.client.web.********************.js`	157 B	0 B
`dotcom-rendering/dist/9242.client.web.********************.js`	3.76 kB	0 B
`dotcom-rendering/dist/9288.client.web.********************.js`	2.51 kB	0 B
`dotcom-rendering/dist/9558.client.web.********************.js`	3.53 kB	0 B
`dotcom-rendering/dist/9665.client.web.********************.js`	4.33 kB	0 B
`dotcom-rendering/dist/9735.client.web.********************.js`	4.46 kB	0 B
`dotcom-rendering/dist/9766.client.web.********************.js`	3.4 kB	0 B
`dotcom-rendering/dist/9870.client.web.********************.js`	2.86 kB	0 B
`dotcom-rendering/dist/Accessibility-importable.client.web.********************.js`	7 kB	0 B
`dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js`	3.02 kB	0 B
`dotcom-rendering/dist/AdPortals-importable.client.web.********************.js`	4.85 kB	0 B
`dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js`	424 B	0 B
`dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js`	3.63 kB	0 B
`dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js`	2.7 kB	0 B
`dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js`	2.66 kB	0 B
`dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js`	2.58 kB	0 B
`dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js`	2.76 kB	0 B
`dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js`	6.5 kB	0 B
`dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js`	2 kB	0 B
`dotcom-rendering/dist/Branding-importable.client.web.********************.js`	2.88 kB	0 B
`dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js`	37.2 kB	0 B
`dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js`	1.97 kB	0 B
`dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js`	6.74 kB	0 B
`dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js`	5.77 kB	0 B
`dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js`	2.66 kB	0 B
`dotcom-rendering/dist/Carousel-importable.client.web.********************.js`	6.67 kB	0 B
`dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js`	5.17 kB	0 B
`dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js`	538 B	0 B
`dotcom-rendering/dist/CommentCount-importable.client.web.********************.js`	2.29 kB	0 B
`dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js`	1.05 kB	0 B
`dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js`	1.07 kB	0 B
`dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js`	2.44 kB	0 B
`dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js`	3.49 kB	0 B
`dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js`	2.82 kB	0 B
`dotcom-rendering/dist/Dropdown-importable.client.web.********************.js`	1.72 kB	0 B
`dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js`	4.44 kB	0 B
`dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js`	3.94 kB	0 B
`dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js`	2.02 kB	0 B
`dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js`	1.94 kB	0 B
`dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js`	3.8 kB	0 B
`dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js`	617 B	0 B
`dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js`	2.52 kB	0 B
`dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js`	343 B	0 B
`dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js`	3.46 kB	0 B
`dotcom-rendering/dist/frameworks.client.web.********************.js`	20.9 kB	0 B
`dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js`	7.43 kB	0 B
`dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js`	6.28 kB	0 B
`dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js`	11.5 kB	0 B
`dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js`	7.99 kB	0 B
`dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js`	2.58 kB	0 B
`dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js`	15.8 kB	0 B
`dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js`	10.2 kB	0 B
`dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js`	783 B	0 B
`dotcom-rendering/dist/index.client.web.********************.js`	45 kB	+4 B (+0.01%)
`dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js`	2.9 kB	0 B
`dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js`	853 B	0 B
`dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js`	8.55 kB	0 B
`dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js`	3.77 kB	0 B
`dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js`	5.71 kB	0 B
`dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js`	3.55 kB	0 B
`dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js`	6.4 kB	0 B
`dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js`	436 B	0 B
`dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js`	6.55 kB	0 B
`dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js`	3.62 kB	0 B
`dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js`	4.82 kB	0 B
`dotcom-rendering/dist/Liveness-importable.client.web.********************.js`	4.72 kB	0 B
`dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js`	7.64 kB	0 B
`dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js`	5.96 kB	0 B
`dotcom-rendering/dist/Metrics-importable.client.web.********************.js`	2.69 kB	0 B
`dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js`	3.85 kB	0 B
`dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js`	5.95 kB	0 B
`dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js`	5.12 kB	0 B
`dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js`	5.34 kB	0 B
`dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js`	3.72 kB	0 B
`dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js`	543 B	0 B
`dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js`	802 B	0 B
`dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js`	749 B	0 B
`dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js`	543 B	0 B
`dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js`	468 B	0 B
`dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js`	1.69 kB	0 B
`dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js`	2.56 kB	0 B
`dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js`	6.11 kB	0 B
`dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js`	5.35 kB	0 B
`dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js`	5.89 kB	0 B
`dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js`	2.13 kB	0 B
`dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js`	2.1 kB	0 B
`dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js`	4.1 kB	0 B
`dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js`	2.22 kB	0 B
`dotcom-rendering/dist/sentry.client.web.********************.js`	794 B	0 B
`dotcom-rendering/dist/SetABTests-importable.client.web.********************.js`	3.92 kB	0 B
`dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js`	485 B	0 B
`dotcom-rendering/dist/ShareButton-importable.client.web.********************.js`	919 B	0 B
`dotcom-rendering/dist/shimport.client.web.********************.js`	2.8 kB	0 B
`dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js`	920 B	0 B
`dotcom-rendering/dist/ShowMore-importable.client.web.********************.js`	2.1 kB	0 B
`dotcom-rendering/dist/SignInGateMain.client.web.********************.js`	4.38 kB	0 B
`dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js`	5.48 kB	0 B
`dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js`	6.51 kB	0 B
`dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js`	4.62 kB	0 B
`dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js`	4.84 kB	0 B
`dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js`	5.78 kB	0 B
`dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js`	4.03 kB	0 B
`dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js`	4.92 kB	0 B
`dotcom-rendering/dist/SubNav-importable.client.web.********************.js`	2.44 kB	0 B
`dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js`	3.51 kB	0 B
`dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js`	1.23 kB	0 B
`dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js`	13.6 kB	0 B
`dotcom-rendering/dist/TopBar-importable.client.web.********************.js`	9.31 kB	0 B
`dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js`	2.55 kB	0 B
`dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js`	1.13 kB	0 B
`dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js`	2.91 kB	0 B
`dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js`	5.97 kB	0 B
`dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js`	2.78 kB	0 B
`dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js`	1.37 kB	0 B

_{compressed-size-action}

JamieB-gu

Looks good so far. Some questions and suggestions, happy to discuss.

dotcom-rendering/src/server/render.footballData.web.tsx

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

dotcom-rendering/src/server/server.dev.ts

dotcom-rendering/src/server/render.footballData.web.tsx

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

dotcom-rendering/src/layouts/FootballDataLayout.tsx

github-actions · 2025-02-13T15:25:34Z

Deploy build 40925 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

JamieB-gu

Looks good, nice work on the wrapping importable file!

Just a couple of final comments.

dotcom-rendering/src/layouts/FootballDataPageLayout.tsx

review suggestions

prout-bot · 2025-02-19T14:46:16Z

Seen on PROD (created by @andrewHEguardian and merged by @marjisound 8 minutes and 56 seconds ago) Please check your changes!

andrewHEguardian requested a review from a team as a code owner February 13, 2025 12:51

github-actions bot added the dotcom-rendering label Feb 13, 2025

JamieB-gu reviewed Feb 13, 2025

View reviewed changes

dotcom-rendering/src/layouts/FootballDataPageLayout.tsx Outdated Show resolved Hide resolved

dotcom-rendering/src/layouts/FootballDataPageLayout.tsx Outdated Show resolved Hide resolved

marjisound force-pushed the football-data-layout branch from 0e3d3fb to 8f0edc7 Compare February 14, 2025 09:54

andrewHEguardian requested a review from JamieB-gu February 17, 2025 11:01

marjisound force-pushed the football-data-layout branch from 8f0edc7 to 80529ef Compare February 18, 2025 08:29

marjisound mentioned this pull request Feb 19, 2025

Football Live Scores Page #13299

Closed

marjisound linked an issue Feb 19, 2025 that may be closed by this pull request

Football Live Scores Page #13299

Closed

andrewHEguardian and others added 16 commits February 19, 2025 11:53

Create SportData endpoint and basic layout

6383f8a

remove title prop

b3ebb0a

add football data page as a wrapper for football page layout

eb70c4b

add masthead and footer

9b53cd4

comment out lint errors

b5d605f

pass unvalidated data from FE to layout

168be8b

tidy up and put main content inside section

897f38c

move select onChange into island component

bc5b370

move into football data specific handler and render files

7e8e698

rename to FootballDataPage consistently

719f53d

review suggestions

wrap matches page component in importable

3b5c31e

tidy: use storybook hardcoded data

95b8cb4

get football test data from a fixture file

04bb39c

remove right adslot - todo later

bd8225d

rebase on main to get the latest config model for football-live

045027b

remove Section component - had wrong padding

7406891

marjisound force-pushed the football-data-layout branch from abde77f to 7406891 Compare February 19, 2025 11:54

marjisound mentioned this pull request Feb 19, 2025

Add description for football data pages #13424

Open

JamieB-gu approved these changes Feb 19, 2025

View reviewed changes

marjisound added the run_chromatic Runs chromatic when label is applied label Feb 19, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Feb 19, 2025

marjisound merged commit f425a8b into main Feb 19, 2025
31 checks passed

marjisound deleted the football-data-layout branch February 19, 2025 14:37

prout-bot added Pending-on-PROD Seen-on-PROD and removed Pending-on-PROD labels Feb 19, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create Football data page layout #13373

Create Football data page layout #13373

andrewHEguardian commented Feb 13, 2025 •

edited by marjisound

Loading

github-actions bot commented Feb 13, 2025

github-actions bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

JamieB-gu left a comment

github-actions bot commented Feb 13, 2025 •

edited

Loading

JamieB-gu left a comment

prout-bot commented Feb 19, 2025

Create Football data page layout #13373

Create Football data page layout #13373

Conversation

andrewHEguardian commented Feb 13, 2025 • edited by marjisound Loading

What does this change?

How to test

Screenshots

Mobile

Wide

github-actions bot commented Feb 13, 2025

github-actions bot commented Feb 13, 2025 • edited Loading

Deploy build 16734 of dotcom:rendering-all to CODE

github-actions bot commented Feb 13, 2025 • edited Loading

JamieB-gu left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 13, 2025 • edited Loading

Deploy build 40925 of Mobile::mobile-apps-rendering to CODE

JamieB-gu left a comment

Choose a reason for hiding this comment

prout-bot commented Feb 19, 2025

andrewHEguardian commented Feb 13, 2025 •

edited by marjisound

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

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

github-actions bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

Deploy build 40925 of `Mobile::mobile-apps-rendering` to CODE