Add interactive docs to dev server (#14093)

Adds documentation for interactive pages, which can be rendered on
dotcom, the live apps, and AMP.

Author: JamieB-gu

dotcom-rendering/src/devServer/docs/interactive.tsx

@@ -0,0 +1,16 @@
+import { Available } from './available';
+
+export const Interactive = () => (
+	<>
+		<Available targets={['dotcom', 'live apps', 'amp']} />
+		<p>
+			Interactives are actually a kind of <a href="../article">article</a>
+			, but DCAR has a separate endpoint for them for performance reasons.
+			You can find some examples on the{' '}
+			<a href="https://www.theguardian.com/interactive">
+				Interactives front
+			</a>
+			.
+		</p>
+	</>
+);

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

@@ -1,11 +1,13 @@
 import express from 'express';
 import { Amp } from '../docs/amp';
 import { Article } from '../docs/article';
+import { Interactive } from '../docs/interactive';
 import { sendReact } from '../send';
 
 const amp = express.Router();
 
 amp.get('/', sendReact('AMP', Amp));
 amp.get('/article', sendReact('Article', Article));
+amp.get('/interactive', sendReact('Interactive', Interactive));
 
 export { amp };

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

@@ -2,6 +2,7 @@ import { Router } from 'express';
 import { Article } from '../docs/article';
 import { Dotcom } from '../docs/dotcom';
 import { Front } from '../docs/front';
+import { Interactive } from '../docs/interactive';
 import { TagPage } from '../docs/tagPage';
 import { sendReact } from '../send';
 
@@ -11,5 +12,6 @@ dotcom.get('/', sendReact('Dotcom', Dotcom));
 dotcom.get('/article', sendReact('Article', Article));
 dotcom.get('/front', sendReact('Front', Front));
 dotcom.get('/tag-page', sendReact('Tag Page', TagPage));
+dotcom.get('/interactive', sendReact('Interactive', Interactive));
 
 export { dotcom };

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

@@ -1,11 +1,13 @@
 import express from 'express';
 import { Article } from '../docs/article';
+import { Interactive } from '../docs/interactive';
 import { LiveApps } from '../docs/liveApps';
 import { sendReact } from '../send';
 
 const liveApps = express.Router();
 
 liveApps.get('/', sendReact('Live Apps', LiveApps));
 liveApps.get('/article', sendReact('Article', Article));
+liveApps.get('/interactive', sendReact('Interactive', Interactive));
 
 export { liveApps };

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

@@ -1,6 +1,7 @@
 import { Router } from 'express';
 import { Article } from '../docs/article';
 import { Front } from '../docs/front';
+import { Interactive } from '../docs/interactive';
 import { Pages } from '../docs/pages';
 import { TagPage } from '../docs/tagPage';
 import { sendReact } from '../send';
@@ -11,5 +12,6 @@ pages.get('/', sendReact('Pages', Pages));
 pages.get('/article', sendReact('Article', Article));
 pages.get('/front', sendReact('Front', Front));
 pages.get('/tag-page', sendReact('Tag Page', TagPage));
+pages.get('/interactive', sendReact('Interactive', Interactive));
 
 export { pages };