Skip to content

Add Football Docs To Dev Server #14096

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 26, 2025
Merged

Add Football Docs To Dev Server #14096

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a24ea9
Add football docs to dev server
JamieB-gu Jun 16, 2025
67a29d2
Merge branch 'main' into add-football-docs-to-dev-server
JamieB-gu Jun 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions dotcom-rendering/src/devServer/docs/footballFixtures.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { Available } from './available';

const SeeAlso = () => (
<>
<h2>See also</h2>
<ul>
<li>
<a href="../football-live">Football Live</a>
</li>
<li>
<a href="../football-results">Football Results</a>
</li>
<li>
<a href="../football-tables">Football Tables</a>
</li>
<li>
<a href="../football-match-summary">Football Match Summary</a>
</li>
</ul>
</>
);

export const FootballFixtures = () => (
<>
<Available targets={['dotcom']} />
<p>
The{' '}
<a href="https://www.theguardian.com/football/fixtures">
football fixtures page
</a>{' '}
is a list of football matches happening in the future. There are
also versions of this page for specific competitions, such as the{' '}
<a href="https://www.theguardian.com/football/premierleague/fixtures">
Premier League
</a>
, accessible from the dropdown. It's powered by data from the Press
Association (PA).
</p>
<SeeAlso />
</>
);
43 changes: 43 additions & 0 deletions dotcom-rendering/src/devServer/docs/footballLive.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { Available } from './available';

const SeeAlso = () => (
<>
<h2>See also</h2>
<ul>
<li>
<a href="../football-fixtures">Football Fixtures</a>
</li>
<li>
<a href="../football-results">Football Results</a>
</li>
<li>
<a href="../football-tables">Football Tables</a>
</li>
<li>
<a href="../football-match-summary">Football Match Summary</a>
</li>
</ul>
</>
);

export const FootballLive = () => (
<>
<Available targets={['dotcom']} />
<p>
The{' '}
<a href="https://www.theguardian.com/football/live">
football live page
</a>{' '}
is a list of football matches happening today. It shows the fixture
time before they start, live scores for each match that's currently
being played, and results when they've finished. There are also
versions of this page for specific competitions, such as the{' '}
<a href="https://www.theguardian.com/football/premierleague/live">
Premier League
</a>
, accessible from the dropdown. It's powered by data from the Press
Association (PA).
</p>
<SeeAlso />
</>
);
53 changes: 53 additions & 0 deletions dotcom-rendering/src/devServer/docs/footballMatchSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { Available } from './available';

const SeeAlso = () => (
<>
<h2>See also</h2>
<ul>
<li>
<a href="../football-live">Football Live</a>
</li>
<li>
<a href="../football-fixtures">Football Fixtures</a>
</li>
<li>
<a href="../football-results">Football Results</a>
</li>
<li>
<a href="../football-tables">Football Tables</a>
</li>
</ul>
</>
);

export const FootballMatchSummary = () => (
<>
<Available targets={['dotcom']} />
<p>
These pages are summaries of football matches, and there are two
variants. Before a match has begun it's a simple placeholder showing
the names and crests of the two teams. After a match has started, it
will be populated with various statistics about the match, including
scores, possession and line-ups. For example,{' '}
<a href="https://www.theguardian.com/football/match/2025/apr/08/arsenal-v-realmadrid">
the summary page
</a>{' '}
for a completed match between Arsenal and Real Madrid. These pages
are powered by data from the Press Association (PA).
</p>
<p>
Often matches that are completed have match reports, which are a
kind of <a href="../article">article</a>, written about them.
Whenever one of these is available, the various pages that list
matches, such as the <a href="../football-results">results page</a>,
will link to the match report. For example,{' '}
<a href="https://www.theguardian.com/football/2025/apr/08/arsenal-real-madrid-champions-league-quarter-final-first-leg-match-report">
the match report
</a>{' '}
for the aforementioned Arsenal vs Real Madrid match. When one of
these is not available for a given match, however, the links will
instead point to the match summary page.
</p>
<SeeAlso />
</>
);
42 changes: 42 additions & 0 deletions dotcom-rendering/src/devServer/docs/footballResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { Available } from './available';

const SeeAlso = () => (
<>
<h2>See also</h2>
<ul>
<li>
<a href="../football-live">Football Live</a>
</li>
<li>
<a href="../football-fixtures">Football Fixtures</a>
</li>
<li>
<a href="../football-tables">Football Tables</a>
</li>
<li>
<a href="../football-match-summary">Football Match Summary</a>
</li>
</ul>
</>
);

export const FootballResults = () => (
<>
<Available targets={['dotcom']} />
<p>
The{' '}
<a href="https://www.theguardian.com/football/results">
football results page
</a>{' '}
is a list of results from football matches that have happened in the
past. There are also versions of this page for specific
competitions, such as the{' '}
<a href="https://www.theguardian.com/football/premierleague/results">
Premier League
</a>
, accessible from the dropdown. It's powered by data from the Press
Association (PA).
</p>
<SeeAlso />
</>
);
42 changes: 42 additions & 0 deletions dotcom-rendering/src/devServer/docs/footballTables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { Available } from './available';

const SeeAlso = () => (
<>
<h2>See also</h2>
<ul>
<li>
<a href="../football-live">Football Live</a>
</li>
<li>
<a href="../football-fixtures">Football Fixtures</a>
</li>
<li>
<a href="../football-results">Football Results</a>
</li>
<li>
<a href="../football-match-summary">Football Match Summary</a>
</li>
</ul>
</>
);

export const FootballTables = () => (
<>
<Available targets={['dotcom']} />
<p>
The{' '}
<a href="https://www.theguardian.com/football/tables">
football tables page
</a>{' '}
is a list of tables from different football competitions. There are
also versions of this page for specific competitions, such as the{' '}
<a href="https://www.theguardian.com/football/premierleague/table">
Premier League
</a>
, accessible either from the dropdown or by following the links at
the bottom of each table. It's powered by data from the Press
Association (PA).
</p>
<SeeAlso />
</>
);
16 changes: 16 additions & 0 deletions dotcom-rendering/src/devServer/routers/dotcom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { Router } from 'express';
import { Article } from '../docs/article';
import { Dotcom } from '../docs/dotcom';
import { FootballFixtures } from '../docs/footballFixtures';
import { FootballLive } from '../docs/footballLive';
import { FootballMatchSummary } from '../docs/footballMatchSummary';
import { FootballResults } from '../docs/footballResults';
import { FootballTables } from '../docs/footballTables';
import { Front } from '../docs/front';
import { Interactive } from '../docs/interactive';
import { Newsletters } from '../docs/newsletters';
Expand All @@ -15,5 +20,16 @@ dotcom.get('/front', sendReact('Front', Front));
dotcom.get('/tag-page', sendReact('Tag Page', TagPage));
dotcom.get('/interactive', sendReact('Interactive', Interactive));
dotcom.get('/newsletters', sendReact('All Newsletters', Newsletters));
dotcom.get('/football-live', sendReact('Football Live', FootballLive));
dotcom.get(
'/football-fixtures',
sendReact('Football Fixtures', FootballFixtures),
);
dotcom.get('/football-results', sendReact('Football Results', FootballResults));
dotcom.get('/football-tables', sendReact('Football Tables', FootballTables));
dotcom.get(
'/football-match-summary',
sendReact('Football Match Summary', FootballMatchSummary),
);

export { dotcom };
16 changes: 16 additions & 0 deletions dotcom-rendering/src/devServer/routers/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import { Router } from 'express';
import { Article } from '../docs/article';
import { FootballFixtures } from '../docs/footballFixtures';
import { FootballLive } from '../docs/footballLive';
import { FootballMatchSummary } from '../docs/footballMatchSummary';
import { FootballResults } from '../docs/footballResults';
import { FootballTables } from '../docs/footballTables';
import { Front } from '../docs/front';
import { Interactive } from '../docs/interactive';
import { Newsletters } from '../docs/newsletters';
Expand All @@ -15,5 +20,16 @@ pages.get('/front', sendReact('Front', Front));
pages.get('/tag-page', sendReact('Tag Page', TagPage));
pages.get('/interactive', sendReact('Interactive', Interactive));
pages.get('/newsletters', sendReact('All Newsletters', Newsletters));
pages.get('/football-live', sendReact('Football Live', FootballLive));
pages.get(
'/football-fixtures',
sendReact('Football Fixtures', FootballFixtures),
);
pages.get('/football-results', sendReact('Football Results', FootballResults));
pages.get('/football-tables', sendReact('Football Tables', FootballTables));
pages.get(
'/football-match-summary',
sendReact('Football Match Summary', FootballMatchSummary),
);

export { pages };