Skip to content

Commit 6fecdc2

Browse files
JamieB-guJamieB-gu
authored
Add football docs to dev server (#14096)
Adds documentation for the football pages, which can be rendered on dotcom only.
1 parent 92538df commit 6fecdc2

File tree

7 files changed

+253
-0
lines changed

7 files changed

+253
-0
lines changed

‎dotcom-rendering/src/devServer/docs/footballFixtures.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Available } from './available';
2+
3+
const SeeAlso = () => (
4+
<>
5+
<h2>See also</h2>
6+
<ul>
7+
<li>
8+
<a href="../football-live">Football Live</a>
9+
</li>
10+
<li>
11+
<a href="../football-results">Football Results</a>
12+
</li>
13+
<li>
14+
<a href="../football-tables">Football Tables</a>
15+
</li>
16+
<li>
17+
<a href="../football-match-summary">Football Match Summary</a>
18+
</li>
19+
</ul>
20+
</>
21+
);
22+
23+
export const FootballFixtures = () => (
24+
<>
25+
<Available targets={['dotcom']} />
26+
<p>
27+
The{' '}
28+
<a href="https://www.theguardian.com/football/fixtures">
29+
football fixtures page
30+
</a>{' '}
31+
is a list of football matches happening in the future. There are
32+
also versions of this page for specific competitions, such as the{' '}
33+
<a href="https://www.theguardian.com/football/premierleague/fixtures">
34+
Premier League
35+
</a>
36+
, accessible from the dropdown. It's powered by data from the Press
37+
Association (PA).
38+
</p>
39+
<SeeAlso />
40+
</>
41+
);

‎dotcom-rendering/src/devServer/docs/footballLive.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Available } from './available';
2+
3+
const SeeAlso = () => (
4+
<>
5+
<h2>See also</h2>
6+
<ul>
7+
<li>
8+
<a href="../football-fixtures">Football Fixtures</a>
9+
</li>
10+
<li>
11+
<a href="../football-results">Football Results</a>
12+
</li>
13+
<li>
14+
<a href="../football-tables">Football Tables</a>
15+
</li>
16+
<li>
17+
<a href="../football-match-summary">Football Match Summary</a>
18+
</li>
19+
</ul>
20+
</>
21+
);
22+
23+
export const FootballLive = () => (
24+
<>
25+
<Available targets={['dotcom']} />
26+
<p>
27+
The{' '}
28+
<a href="https://www.theguardian.com/football/live">
29+
football live page
30+
</a>{' '}
31+
is a list of football matches happening today. It shows the fixture
32+
time before they start, live scores for each match that's currently
33+
being played, and results when they've finished. There are also
34+
versions of this page for specific competitions, such as the{' '}
35+
<a href="https://www.theguardian.com/football/premierleague/live">
36+
Premier League
37+
</a>
38+
, accessible from the dropdown. It's powered by data from the Press
39+
Association (PA).
40+
</p>
41+
<SeeAlso />
42+
</>
43+
);

‎dotcom-rendering/src/devServer/docs/footballMatchSummary.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Available } from './available';
2+
3+
const SeeAlso = () => (
4+
<>
5+
<h2>See also</h2>
6+
<ul>
7+
<li>
8+
<a href="../football-live">Football Live</a>
9+
</li>
10+
<li>
11+
<a href="../football-fixtures">Football Fixtures</a>
12+
</li>
13+
<li>
14+
<a href="../football-results">Football Results</a>
15+
</li>
16+
<li>
17+
<a href="../football-tables">Football Tables</a>
18+
</li>
19+
</ul>
20+
</>
21+
);
22+
23+
export const FootballMatchSummary = () => (
24+
<>
25+
<Available targets={['dotcom']} />
26+
<p>
27+
These pages are summaries of football matches, and there are two
28+
variants. Before a match has begun it's a simple placeholder showing
29+
the names and crests of the two teams. After a match has started, it
30+
will be populated with various statistics about the match, including
31+
scores, possession and line-ups. For example,{' '}
32+
<a href="https://www.theguardian.com/football/match/2025/apr/08/arsenal-v-realmadrid">
33+
the summary page
34+
</a>{' '}
35+
for a completed match between Arsenal and Real Madrid. These pages
36+
are powered by data from the Press Association (PA).
37+
</p>
38+
<p>
39+
Often matches that are completed have match reports, which are a
40+
kind of <a href="../article">article</a>, written about them.
41+
Whenever one of these is available, the various pages that list
42+
matches, such as the <a href="../football-results">results page</a>,
43+
will link to the match report. For example,{' '}
44+
<a href="https://www.theguardian.com/football/2025/apr/08/arsenal-real-madrid-champions-league-quarter-final-first-leg-match-report">
45+
the match report
46+
</a>{' '}
47+
for the aforementioned Arsenal vs Real Madrid match. When one of
48+
these is not available for a given match, however, the links will
49+
instead point to the match summary page.
50+
</p>
51+
<SeeAlso />
52+
</>
53+
);

‎dotcom-rendering/src/devServer/docs/footballResults.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Available } from './available';
2+
3+
const SeeAlso = () => (
4+
<>
5+
<h2>See also</h2>
6+
<ul>
7+
<li>
8+
<a href="../football-live">Football Live</a>
9+
</li>
10+
<li>
11+
<a href="../football-fixtures">Football Fixtures</a>
12+
</li>
13+
<li>
14+
<a href="../football-tables">Football Tables</a>
15+
</li>
16+
<li>
17+
<a href="../football-match-summary">Football Match Summary</a>
18+
</li>
19+
</ul>
20+
</>
21+
);
22+
23+
export const FootballResults = () => (
24+
<>
25+
<Available targets={['dotcom']} />
26+
<p>
27+
The{' '}
28+
<a href="https://www.theguardian.com/football/results">
29+
football results page
30+
</a>{' '}
31+
is a list of results from football matches that have happened in the
32+
past. There are also versions of this page for specific
33+
competitions, such as the{' '}
34+
<a href="https://www.theguardian.com/football/premierleague/results">
35+
Premier League
36+
</a>
37+
, accessible from the dropdown. It's powered by data from the Press
38+
Association (PA).
39+
</p>
40+
<SeeAlso />
41+
</>
42+
);

‎dotcom-rendering/src/devServer/docs/footballTables.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Available } from './available';
2+
3+
const SeeAlso = () => (
4+
<>
5+
<h2>See also</h2>
6+
<ul>
7+
<li>
8+
<a href="../football-live">Football Live</a>
9+
</li>
10+
<li>
11+
<a href="../football-fixtures">Football Fixtures</a>
12+
</li>
13+
<li>
14+
<a href="../football-results">Football Results</a>
15+
</li>
16+
<li>
17+
<a href="../football-match-summary">Football Match Summary</a>
18+
</li>
19+
</ul>
20+
</>
21+
);
22+
23+
export const FootballTables = () => (
24+
<>
25+
<Available targets={['dotcom']} />
26+
<p>
27+
The{' '}
28+
<a href="https://www.theguardian.com/football/tables">
29+
football tables page
30+
</a>{' '}
31+
is a list of tables from different football competitions. There are
32+
also versions of this page for specific competitions, such as the{' '}
33+
<a href="https://www.theguardian.com/football/premierleague/table">
34+
Premier League
35+
</a>
36+
, accessible either from the dropdown or by following the links at
37+
the bottom of each table. It's powered by data from the Press
38+
Association (PA).
39+
</p>
40+
<SeeAlso />
41+
</>
42+
);

‎dotcom-rendering/src/devServer/routers/dotcom.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import { Router } from 'express';
22
import { Article } from '../docs/article';
33
import { Dotcom } from '../docs/dotcom';
4+
import { FootballFixtures } from '../docs/footballFixtures';
5+
import { FootballLive } from '../docs/footballLive';
6+
import { FootballMatchSummary } from '../docs/footballMatchSummary';
7+
import { FootballResults } from '../docs/footballResults';
8+
import { FootballTables } from '../docs/footballTables';
49
import { Front } from '../docs/front';
510
import { Interactive } from '../docs/interactive';
611
import { Newsletters } from '../docs/newsletters';
@@ -15,5 +20,16 @@ dotcom.get('/front', sendReact('Front', Front));
1520
dotcom.get('/tag-page', sendReact('Tag Page', TagPage));
1621
dotcom.get('/interactive', sendReact('Interactive', Interactive));
1722
dotcom.get('/newsletters', sendReact('All Newsletters', Newsletters));
23+
dotcom.get('/football-live', sendReact('Football Live', FootballLive));
24+
dotcom.get(
25+
'/football-fixtures',
26+
sendReact('Football Fixtures', FootballFixtures),
27+
);
28+
dotcom.get('/football-results', sendReact('Football Results', FootballResults));
29+
dotcom.get('/football-tables', sendReact('Football Tables', FootballTables));
30+
dotcom.get(
31+
'/football-match-summary',
32+
sendReact('Football Match Summary', FootballMatchSummary),
33+
);
1834

1935
export { dotcom };

‎dotcom-rendering/src/devServer/routers/pages.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { Router } from 'express';
22
import { Article } from '../docs/article';
3+
import { FootballFixtures } from '../docs/footballFixtures';
4+
import { FootballLive } from '../docs/footballLive';
5+
import { FootballMatchSummary } from '../docs/footballMatchSummary';
6+
import { FootballResults } from '../docs/footballResults';
7+
import { FootballTables } from '../docs/footballTables';
38
import { Front } from '../docs/front';
49
import { Interactive } from '../docs/interactive';
510
import { Newsletters } from '../docs/newsletters';
@@ -15,5 +20,16 @@ pages.get('/front', sendReact('Front', Front));
1520
pages.get('/tag-page', sendReact('Tag Page', TagPage));
1621
pages.get('/interactive', sendReact('Interactive', Interactive));
1722
pages.get('/newsletters', sendReact('All Newsletters', Newsletters));
23+
pages.get('/football-live', sendReact('Football Live', FootballLive));
24+
pages.get(
25+
'/football-fixtures',
26+
sendReact('Football Fixtures', FootballFixtures),
27+
);
28+
pages.get('/football-results', sendReact('Football Results', FootballResults));
29+
pages.get('/football-tables', sendReact('Football Tables', FootballTables));
30+
pages.get(
31+
'/football-match-summary',
32+
sendReact('Football Match Summary', FootballMatchSummary),
33+
);
1834

1935
export { pages };

0 commit comments

Comments
 (0)