use hosted content which is an adaptation of article type rather than defining from scratch or using article directly

Author: cemms1

dotcom-rendering/src/components/HostedContentPage.tsx

@@ -4,7 +4,7 @@ import { HostedArticleLayout } from '../layouts/HostedArticleLayout';
 import { ArticleDesign } from '../lib/articleFormat';
 import { rootStyles } from '../lib/rootStyles';
 import { filterABTestSwitches } from '../model/enhance-switches';
-import type { Article } from '../types/article';
+import type { HostedContent } from '../types/hostedContent';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { useConfig } from './ConfigContext';
 import { DarkModeMessage } from './DarkModeMessage';
@@ -16,7 +16,7 @@ import { SetABTests } from './SetABTests.importable';
 import { SkipTo } from './SkipTo';
 
 interface BaseProps {
-	hostedContent: Article;
+	hostedContent: HostedContent;
 	renderingTarget: RenderingTarget;
 }
 

dotcom-rendering/src/frontend/feHostedContent.ts

@@ -1,28 +1,19 @@
-/** @todo Remove this? */
-export interface FEHostedContent {
-	// general / shared
-	id: string;
-	url: string;
-	encodedUrl: string;
-	campaign?: HostedCampaign;
-	title: string;
-	mainImageUrl: string;
-	thumbnailUrl: string;
-	standfirst: string;
-	cta: HostedCallToAction;
-	name: string;
-	owner: string;
-	logo: HostedLogo;
-	fontColour: Colour;
-	// article
-	body?: string;
-	mainPicture?: string;
-	mainPictureCaption?: string;
-	// video
-	video?: HostedVideo;
-	// gallery
-	images: HostedGalleryImage[];
-}
+import type { FEArticle } from './feArticle';
+
+/**
+ * This type is what we receive from `frontend`,
+ * hence the FE prefix.
+ *
+ * WARNING: run `gen-schema` task if changing this to update the associated JSON
+ * schema definition.
+ */
+export type FEHostedContent = Omit<
+	FEArticle,
+	'beaconURL' | 'blocks' | 'crossword'
+>;
+
+/**
+// Not sure if the following types are needed:
 
 type HostedCampaign = {
 	id: string;
@@ -76,3 +67,5 @@ type Encoding = {
 	url: string;
 	rawFormat: string;
 };
+
+ */

dotcom-rendering/src/layouts/HostedArticleLayout.tsx

@@ -3,13 +3,13 @@ import { palette as sourcePalette } from '@guardian/source/foundations';
 import { HostedContentHeader } from '../components/HostedContentHeader';
 import { Section } from '../components/Section';
 import { grid } from '../grid';
-import type { DCRHostedContent } from '../types/hostedContent';
+import type { HostedContent } from '../types/hostedContent';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { Stuck } from './lib/stickiness';
 
 interface Props {
 	renderingTarget: RenderingTarget;
-	content: DCRHostedContent;
+	content: HostedContent;
 }
 
 interface WebProps extends Props {

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

@@ -1,12 +1,12 @@
 import type { RequestHandler } from 'express';
 import { validateAsFEHostedContent } from '../model/validate';
-import { enhanceHostedContentType } from '../types/hostedContent';
+import { enhanceHostedContent } from '../types/hostedContent';
 import { makePrefetchHeader } from './lib/header';
 import { renderHtml } from './render.hostedContent.web';
 
 export const handleAppsHostedContent: RequestHandler = ({ body }, res) => {
 	const frontendData = validateAsFEHostedContent(body);
-	const hostedContent = enhanceHostedContentType(frontendData);
+	const hostedContent = enhanceHostedContent(frontendData);
 	const { html, prefetchScripts } = renderHtml({
 		hostedContent,
 	});

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

@@ -1,12 +1,12 @@
 import type { RequestHandler } from 'express';
 import { validateAsFEHostedContent } from '../model/validate';
-import { enhanceHostedContentType } from '../types/hostedContent';
+import { enhanceHostedContent } from '../types/hostedContent';
 import { makePrefetchHeader } from './lib/header';
 import { renderHtml } from './render.hostedContent.web';
 
 export const handleHostedContent: RequestHandler = ({ body }, res) => {
 	const frontendData = validateAsFEHostedContent(body);
-	const hostedContent = enhanceHostedContentType(frontendData);
+	const hostedContent = enhanceHostedContent(frontendData);
 	const { html, prefetchScripts } = renderHtml({
 		hostedContent,
 	});

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

@@ -10,12 +10,12 @@ import {
 import { renderToStringWithEmotion } from '../lib/emotion';
 import { polyfillIO } from '../lib/polyfill.io';
 import { createGuardian } from '../model/guardian';
-import type { Article } from '../types/article';
 import type { Config } from '../types/configContext';
+import type { HostedContent } from '../types/hostedContent';
 import { htmlPageTemplate } from './htmlPageTemplate';
 
 type Props = {
-	hostedContent: Article;
+	hostedContent: HostedContent;
 };
 
 export const renderHtml = ({ hostedContent }: Props) => {

dotcom-rendering/src/types/hostedContent.ts

@@ -1,3 +1,69 @@
+import type { FEHostedContent } from '../frontend/feHostedContent';
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticleSpecial,
+} from '../lib/articleFormat';
+import { enhanceMainMedia } from '../model/enhanceBlocks';
+import { enhanceCommercialProperties } from '../model/enhanceCommercialProperties';
+import { enhanceStandfirst } from '../model/enhanceStandfirst';
 import type { Article } from './article';
 
-export type DCRHostedContent = Article;
+export type HostedContent = Article;
+
+export const enhanceHostedContent = (data: FEHostedContent): HostedContent => {
+	// Temporarily hard coded
+	const format = {
+		display: ArticleDisplay.Standard,
+		design: ArticleDesign.HostedArticle,
+		theme: ArticleSpecial.Labs,
+	};
+
+	const serverTime = Date.now();
+
+	/** @todo implement blocks */
+	// const enhancedBlocks = enhanceBlocks(data.blocks, format, {
+	// 	renderingTarget,
+	// 	promotedNewsletter: data.promotedNewsletter,
+	// 	imagesForLightbox: [],
+	// 	hasAffiliateLinksDisclaimer: !!data.affiliateLinksDisclaimer,
+	// 	audioArticleImage: data.audioArticleImage,
+	// 	tags: data.tags,
+	// 	shouldHideAds: data.shouldHideAds,
+	// 	pageId: data.pageId,
+	// });
+
+	const mainMediaElements = enhanceMainMedia(
+		format,
+		[], //imagesForLightbox
+		true,
+		data.main,
+	)(data.mainMediaElements);
+
+	/** @ts-expect-error -- @todo fix this! */
+	return {
+		design: format.design,
+		display: format.display,
+		theme: format.theme,
+		serverTime,
+		storyPackage: undefined,
+		frontendData: {
+			...data,
+			beaconURL: '',
+			mainMediaElements,
+			blocks: [],
+			standfirst: enhanceStandfirst(data.standfirst),
+			commercialProperties: enhanceCommercialProperties(
+				data.commercialProperties,
+			),
+			/**
+			 * This function needs to run at a higher level to most other enhancers
+			 * because it needs both mainMediaElements and blocks in scope
+			 * @todo implement for Hosted Content pages
+			 */
+			imagesForLightbox: [],
+			/** @todo implement for Hosted Content pages */
+			imagesForAppsLightbox: [],
+		},
+	};
+};