Skip to content

Commit bf33a63

Browse files
JamieB-guJamieB-gu
authored
Add article docs to dev server (#14084)
Adds documentation for article pages, which can be rendered on dotcom, the live apps, and AMP.
1 parent 656ec4a commit bf33a63

File tree

5 files changed

+162
-0
lines changed

5 files changed

+162
-0
lines changed

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

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import { Available } from './available';
2+
3+
const OtherExamples = () => (
4+
<>
5+
<h3>Other Examples</h3>
6+
<dl>
7+
<dt>
8+
<a href="https://www.theguardian.com/tone/minutebyminute">
9+
Minute-by-minute tag page
10+
</a>
11+
</dt>
12+
<dd>
13+
Liveblogs are tagged with the minute-by-minute tone tag, so this
14+
tag page contains a list of all liveblogs and deadblogs
15+
(liveblogs that are no longer live).
16+
</dd>
17+
<dt>
18+
<a href="https://www.theguardian.com/tone/comment">
19+
Comment tag page
20+
</a>
21+
</dt>
22+
<dd>
23+
Pieces tagged with the comment tone tag. These are largely
24+
Comment articles, but can also contain other kinds of article
25+
such as Picture. Note that Comment articles do not always have
26+
the Opinion pillar, and this page is likely to contain examples
27+
that have other pillars such as Lifestyle or Culture.
28+
</dd>
29+
<dt>
30+
<a href="https://www.theguardian.com/tone/matchreports">
31+
Match report tag page
32+
</a>
33+
</dt>
34+
<dd>
35+
Pieces tagged with the match report tone tag. These are largely
36+
football match reports, but also include other sports like
37+
cricket and tennis.
38+
</dd>
39+
<dt>
40+
<a href="https://www.theguardian.com/interactive">
41+
Interactives front
42+
</a>
43+
</dt>
44+
<dd>A curated list of interactive articles.</dd>
45+
<dt>
46+
<a href="https://www.theguardian.com/news/series/the-long-read">
47+
The Long Read tag page
48+
</a>
49+
</dt>
50+
<dd>
51+
The long read series contains both text-based articles, which
52+
tend to be immersive, and audio articles.
53+
</dd>
54+
<dt>
55+
<a href="https://www.theguardian.com/inpictures">
56+
In Pictures front
57+
</a>
58+
</dt>
59+
<dd>A curated list of recent gallery articles.</dd>
60+
<dt>
61+
<a href="https://www.theguardian.com/video">Video front</a>
62+
</dt>
63+
<dd>A curated list of recent video articles.</dd>
64+
<dt>
65+
<a href="https://www.theguardian.com/audio">Audio tag page</a>
66+
</dt>
67+
<dd>A reverse chronological list of audio articles.</dd>
68+
<dt>
69+
<a href="https://www.theguardian.com/pictures">
70+
Pictures tag page
71+
</a>
72+
</dt>
73+
<dd>A reverse chronological list of picture articles.</dd>
74+
<dt>
75+
<a href="https://www.theguardian.com/guardian-labs">
76+
Labs front
77+
</a>
78+
</dt>
79+
<dd>A curated list of labs articles.</dd>
80+
</dl>
81+
</>
82+
);
83+
84+
const Examples = () => (
85+
<>
86+
<h2>Examples</h2>
87+
<OtherExamples />
88+
</>
89+
);
90+
91+
const Format = () => (
92+
<>
93+
<h2>Format</h2>
94+
<p>
95+
The <code>ArticleFormat</code>, sometimes known as just "Format",
96+
determines the kind of article being rendered. It influences what
97+
content and features the article will contain, and what the design
98+
will look like. It's broken down into three dimensions:
99+
</p>
100+
<dl>
101+
<dt>Design</dt>
102+
<dd>
103+
Primarily influences the content, structure and features of an
104+
article. It's the most important of the three, and is often used
105+
as a shorthand to describe the "kind" of article. Examples
106+
include <code>Liveblog</code>, <code>Feature</code> and{' '}
107+
<code>Gallery</code>.
108+
</dd>
109+
<dt>Display</dt>
110+
<dd>
111+
Primarily influences the layout of an article. Examples include{' '}
112+
<code>Immersive</code>, <code>Showcase</code> and{' '}
113+
<code>NumberedList</code>.
114+
</dd>
115+
<dt>Theme</dt>
116+
<dd>
117+
Primarily influences the fonts and colours of an article. It can
118+
can be thought of as a superset of "pillar", i.e. all the
119+
pillars are considered themes, but there are some additional
120+
themes that are not pillars. Examples include <code>News</code>,{' '}
121+
<code>Sport</code> and <code>Labs</code>.
122+
</dd>
123+
</dl>
124+
<p>
125+
In theory all possible combinations of Format can exist and be
126+
rendered by DCAR. In practice there are some combinations that are
127+
not currently allowed by the tools, such as immersive liveblogs,
128+
which therefore cannot be found in CAPI.
129+
</p>
130+
</>
131+
);
132+
133+
export const Article = () => (
134+
<>
135+
<Available targets={['dotcom', 'live apps', 'amp']} />
136+
<p>
137+
Articles are the primary form of content on our platforms. They are
138+
written in Composer and stored in CAPI. There are many different
139+
kinds of article, and on DCAR this variety is captured by the{' '}
140+
<code>ArticleFormat</code> type (sometimes known as just "Format").
141+
In addition, aside from its ability to render article pages in full,
142+
DCAR can also render partial pages of{' '}
143+
<a href="live-updates">live updates</a> for liveblogs.
144+
</p>
145+
<Format />
146+
<Examples />
147+
<h2>See also</h2>
148+
<ul>
149+
<li>
150+
<a href="live-updates">Live Updates</a>
151+
</li>
152+
</ul>
153+
</>
154+
);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import express from 'express';
22
import { Amp } from '../docs/amp';
3+
import { Article } from '../docs/article';
34
import { sendReact } from '../send';
45

56
const amp = express.Router();
67

78
amp.get('/', sendReact('AMP', Amp));
9+
amp.get('/article', sendReact('Article', Article));
810

911
export { amp };

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { Router } from 'express';
2+
import { Article } from '../docs/article';
23
import { Dotcom } from '../docs/dotcom';
34
import { sendReact } from '../send';
45

56
const dotcom = Router();
67

78
dotcom.get('/', sendReact('Dotcom', Dotcom));
9+
dotcom.get('/article', sendReact('Article', Article));
810

911
export { dotcom };

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import express from 'express';
2+
import { Article } from '../docs/article';
23
import { LiveApps } from '../docs/liveApps';
34
import { sendReact } from '../send';
45

56
const liveApps = express.Router();
67

78
liveApps.get('/', sendReact('Live Apps', LiveApps));
9+
liveApps.get('/article', sendReact('Article', Article));
810

911
export { liveApps };

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { Router } from 'express';
2+
import { Article } from '../docs/article';
23
import { Pages } from '../docs/pages';
34
import { sendReact } from '../send';
45

56
const pages = Router();
67

78
pages.get('/', sendReact('Pages', Pages));
9+
pages.get('/article', sendReact('Article', Article));
810

911
export { pages };

0 commit comments

Comments
 (0)