Merge pull request #15006 from guardian/ih/hosted-content-web-handler

Set up web handler for hosted content

Author: i-hardy

dotcom-rendering/src/server/dev-index.html

@@ -97,6 +97,24 @@ <h2>Pages</h2>
 					>🏏 Cricket Match Page</a
 				>
 			</li>
+			<li>
+				<a
+					href="/HostedContent/https://www.theguardian.com/advertiser-content/bloomberg-philanthropies/vision-for-a-healthy-future"
+					>💷 Hosted Article</a
+				>
+			</li>
+			<li>
+				<a
+					href="/HostedContent/https://www.theguardian.com/advertiser-content/gsk-oncology/unlocking-the-future-of-cancer-care"
+					>💰 Hosted Video</a
+				>
+			</li>
+			<li>
+				<a
+					href="/HostedContent/https://www.theguardian.com/advertiser-content/canary-islands-rugby/the-spanish-rugby-sevens-team"
+					>💸 Hosted Gallery</a
+				>
+			</li>
 		</ul>
 		<form name="url-form">
 			<input

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

@@ -0,0 +1,18 @@
+import type { RequestHandler } from 'express';
+import { validateAsFEHostedContent } from '../model/validate';
+import { enhanceHostedContentType } from '../types/hostedContent';
+import { makePrefetchHeader } from './lib/header';
+import { recordTypeAndPlatform } from './lib/logging-store';
+import { renderHtml } from './render.hostedContent.web';
+
+export const handleHostedContent: RequestHandler = ({ body }, res) => {
+	recordTypeAndPlatform('article', 'web');
+
+	const frontendData = validateAsFEHostedContent(body);
+	const hostedContent = enhanceHostedContentType(frontendData);
+	const { html, prefetchScripts } = renderHtml({
+		hostedContent,
+	});
+
+	res.status(200).set('Link', makePrefetchHeader(prefetchScripts)).send(html);
+};

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

@@ -0,0 +1,56 @@
+import { isString } from '@guardian/libs';
+import { HostedArticleLayout } from '../layouts/HostedArticleLayout';
+import { HostedGalleryLayout } from '../layouts/HostedGalleryLayout';
+import { getModulesBuild, getPathFromManifest } from '../lib/assets';
+import { renderToStringWithEmotion } from '../lib/emotion';
+import { polyfillIO } from '../lib/polyfill.io';
+import type { HostedContent } from '../types/hostedContent';
+import { htmlPageTemplate } from './htmlPageTemplate';
+
+type Props = {
+	hostedContent: HostedContent;
+};
+
+export const renderHtml = ({ hostedContent }: Props) => {
+	const { type, frontendData } = hostedContent;
+
+	const title = `Advertiser content hosted by the Guardian: ${frontendData.title} | The Guardian`;
+
+	const HostedLayout =
+		type === 'gallery' ? HostedGalleryLayout : HostedArticleLayout;
+	const renderingTarget = 'Web';
+
+	const { html, extractedCss } = renderToStringWithEmotion(
+		<HostedLayout renderingTarget={renderingTarget} />,
+	);
+
+	// We don't send A/B tests or switches from frontend yet- do we need to?
+	const build = getModulesBuild({
+		tests: {},
+		switches: {},
+	});
+
+	const prefetchScripts = [
+		polyfillIO,
+		getPathFromManifest(build, 'frameworks.js'),
+		getPathFromManifest(build, 'index.js'),
+	].filter(isString);
+
+	// We currently don't send any of the data required for page config or window.guardian setup from frontend
+	const pageHtml = htmlPageTemplate({
+		scriptTags: [],
+		css: extractedCss,
+		html,
+		title,
+		description: frontendData.standfirst,
+		// @ts-expect-error no config data
+		guardian: {},
+		canonicalUrl: '',
+		renderingTarget: 'Web',
+		// @ts-expect-error no config data
+		config: {},
+		weAreHiring: false,
+	});
+
+	return { html: pageHtml, prefetchScripts };
+};

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

@@ -15,6 +15,7 @@ import {
 import { handleAppsAssets } from './handler.assets.apps';
 import { handleEditionsCrossword } from './handler.editionsCrossword';
 import { handleFront, handleTagPage } from './handler.front.web';
+import { handleHostedContent } from './handler.hostedContent.web';
 import {
 	handleCricketMatchPage,
 	handleFootballMatchListPage,
@@ -106,6 +107,8 @@ renderer.get('/FootballMatchListPage/*url', handleFootballMatchListPage);
 renderer.get('/FootballTablesPage/*url', handleFootballTablesPage);
 renderer.get('/CricketMatchPage/*url', handleCricketMatchPage);
 renderer.get('/FootballMatchSummaryPage/*url', handleFootballMatchPage);
+renderer.get('/HostedContent/*url', handleHostedContent);
+
 // POST routes for running frontend locally
 renderer.post('/Article', handleArticle);
 renderer.post('/Interactive', handleInteractive);
@@ -121,6 +124,7 @@ renderer.post('/FootballMatchListPage', handleFootballMatchListPage);
 renderer.post('/FootballTablesPage', handleFootballTablesPage);
 renderer.post('/CricketMatchPage', handleCricketMatchPage);
 renderer.post('/FootballMatchSummaryPage', handleFootballMatchPage);
+renderer.post('/HostedContent', handleHostedContent);
 
 renderer.get('/assets/rendered-items-assets', handleAppsAssets);
 

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

@@ -17,6 +17,7 @@ import {
 import { handleAppsAssets } from './handler.assets.apps';
 import { handleEditionsCrossword } from './handler.editionsCrossword';
 import { handleFront, handleTagPage } from './handler.front.web';
+import { handleHostedContent } from './handler.hostedContent.web';
 import {
 	handleCricketMatchPage,
 	handleFootballMatchListPage,
@@ -75,6 +76,7 @@ export const prodServer = (): void => {
 		logRenderTime,
 		handleFootballMatchPage,
 	);
+	app.post('/HostedContent', logRenderTime, handleHostedContent);
 
 	app.post(
 		'/EmailNewsletters',