Add Observer footer

Author: simonbyford

dotcom-rendering/src/components/ArticleBody.tsx

@@ -22,6 +22,7 @@ import type { TagType } from '../types/tag';
 import { Island } from './Island';
 import { LiveBlogRenderer } from './LiveBlogRenderer';
 import { TableOfContents } from './TableOfContents.importable';
+import { textBlockStyles } from './TextBlockComponent';
 
 type Props = {
 	format: ArticleFormat;
@@ -140,6 +141,24 @@ export const ArticleBody = ({
 		format.design === ArticleDesign.Crossword;
 	const language = decideLanguage(lang);
 	const languageDirection = decideLanguageDirection(isRightToLeftLang);
+	const hasObserverPublicationTag = tags.find(
+		(tag) => tag.type === 'Publication' && tag.title === 'The Observer',
+	);
+	const { removeObserver = false } = switches;
+
+	const ObserverFooter = () => {
+		return (
+			<ul css={textBlockStyles(format)}>
+				<li>
+					<p>
+						This is the archive of The Observer up until 21/04/2025.
+						The Observer is now owned and operated by Tortoise
+						Media.
+					</p>
+				</li>
+			</ul>
+		);
+	};
 
 	if (
 		format.design === ArticleDesign.LiveBlog ||
@@ -233,6 +252,7 @@ export const ArticleBody = ({
 					contributionsServiceUrl={contributionsServiceUrl}
 				/>
 			</div>
+			{hasObserverPublicationTag && removeObserver && <ObserverFooter />}
 		</>
 	);
 };

dotcom-rendering/src/components/TextBlockComponent.tsx

@@ -162,7 +162,7 @@ const sanitiserOptions: IOptions = {
 	},
 };
 
-const styles = (format: ArticleFormat) => css`
+export const textBlockStyles = (format: ArticleFormat) => css`
 	margin-bottom: ${remSpace[3]};
 	word-break: break-word;
 	${format.theme === ArticleSpecial.Labs ? textSans17 : article17};
@@ -257,7 +257,7 @@ const buildElementTree =
 
 		switch (node.nodeName) {
 			case 'P': {
-				return jsx('p', { css: styles(format), children });
+				return jsx('p', { css: textBlockStyles(format), children });
 			}
 			case 'BLOCKQUOTE':
 				return jsx('blockquote', {
@@ -312,7 +312,7 @@ const buildElementTree =
 
 					return node.textContent;
 				}
-				return jsx('p', { css: styles(format), children });
+				return jsx('p', { css: textBlockStyles(format), children });
 			}
 			case 'SPAN':
 				if (
@@ -325,14 +325,14 @@ const buildElementTree =
 						children,
 					});
 				}
-				return jsx('p', { css: styles(format), children });
+				return jsx('p', { css: textBlockStyles(format), children });
 			case 'BR':
 				return jsx('br', {
 					key,
 				});
 			case 'STRIKE':
 				return jsx('s', {
-					css: styles(format),
+					css: textBlockStyles(format),
 					key,
 					children,
 				});
@@ -359,7 +359,7 @@ const buildElementTree =
 			case 'U':
 			case 'DEL':
 				return jsx(node.nodeName.toLowerCase(), {
-					css: styles(format),
+					css: textBlockStyles(format),
 					key,
 					children,
 				});