Merge branch 'main' into add-image-for-galleries-main-image-caption

Author: ioannakok

dotcom-rendering/.storybook/decorators/splitThemeDecorator.tsx

@@ -21,6 +21,11 @@ interface Orientation {
 	orientation?: 'horizontal' | 'vertical';
 }
 
+type SplitThemeOptions = Orientation & {
+	/** Allows the format heading to be omitted on the split theme decorator */
+	hideFormatHeading?: boolean;
+};
+
 /**
  * The `splitTheme` decorator displays a story simultaneously in both light and
  * dark mode.
@@ -226,6 +231,11 @@ type ThemeProps = {
 	Story: Parameters<Decorator>[0];
 	context: Context;
 	colourScheme: ColourScheme;
+	/**
+	 * For stories without article theming where we fallback to the default theme,
+	 * we can choose to omit the format heading as it's not relevant
+	 */
+	hideFormatHeading?: boolean;
 };
 
 /**
@@ -242,7 +252,13 @@ type ThemeProps = {
  * `colourSchemeBackground` and `colourSchemeTextColour` parameters from the
  * story, or provides defaults when these are not supplied.
  */
-const Theme = ({ formats, Story, context, colourScheme }: ThemeProps) => (
+const Theme = ({
+	formats,
+	Story,
+	context,
+	colourScheme,
+	hideFormatHeading = false,
+}: ThemeProps) => (
 	<div
 		css={{
 			color:
@@ -258,7 +274,12 @@ const Theme = ({ formats, Story, context, colourScheme }: ThemeProps) => (
 		<ThemeHeading colourScheme={colourScheme} />
 		{formats.map((format) => (
 			<>
-				<FormatHeading format={format} colourScheme={colourScheme} />
+				{!hideFormatHeading && (
+					<FormatHeading
+						format={format}
+						colourScheme={colourScheme}
+					/>
+				)}
 				<Palette
 					colourScheme={colourScheme}
 					context={context}
@@ -302,7 +323,10 @@ const Theme = ({ formats, Story, context, colourScheme }: ThemeProps) => (
 export const splitTheme =
 	(
 		formats: ArticleFormat[] = [...defaultFormats],
-		{ orientation = 'horizontal' }: Orientation = {},
+		{
+			orientation = 'horizontal',
+			hideFormatHeading = false,
+		}: SplitThemeOptions = {},
 	): Decorator =>
 	(Story, context) => (
 		<div
@@ -318,12 +342,14 @@ export const splitTheme =
 				formats={formats}
 				Story={Story}
 				context={context}
+				hideFormatHeading={hideFormatHeading}
 			/>
 			<Theme
 				colourScheme="dark"
 				formats={formats}
 				Story={Story}
 				context={context}
+				hideFormatHeading={hideFormatHeading}
 			/>
 		</div>
 	);

dotcom-rendering/docs/architecture/030-amp-removal.md

@@ -0,0 +1,39 @@
+# AMP Removal
+
+## Context
+
+Google AMP is an open-source, website-publishing technology that enables you to create a website that loads almost instantly on mobile devices. AMP stands for “accelerated mobile pages.” Google created AMP so that publishers and businesses could avoid slow-loading web pages that frustrate users.
+
+The pages loaded more quickly for users on constrained devices, and Google’s search algorithm had a requirement that stories that appeared in the top stories carousel would have to be amp pages.
+
+In June 2021 an update to Google's Top Stories algorithm meant AMP was no longer needed to appear in top stories. In November 2021 Twitter phased out support for AMP.
+
+### Negatives
+
+-   Issues with maintaining and updating AMP as a separate platform from a technical perspective
+
+-   User experience impact of sign in & cookies for AMP
+
+-   Design opportunities are limited on AMP
+
+-   The website accessibility and performance improvements we make only affect web/apps
+
+-   Better user experience editorially to land on a Guardian page than an AMP page when coming via Google
+
+-   For contributions AMP is the worst performing platform between Apple News, Web and AMP
+
+More details in [Guardian and AMP](https://docs.google.com/document/d/1LLv_KFP5WVPis7KtWhJQNwZwWyJ_JuH2bDNxkAUymIU/edit?tab=t.0)
+
+## Decision
+
+We switched off AMP for a trial period between 12th August 2024 to 9th September 2024
+
+Following analysis of the trial period we switched off AMP completely on 7th January 2025.
+
+AMP code can now be deleted.
+
+More details in the [chat channel](https://mail.google.com/chat/u/0/#chat/space/AAAA5AQB80w)
+
+## Status
+
+Approved

…p/000-structure-for-initial-milestone.md …0-structure-for-initial-milestone-amp.mddotcom-rendering/docs/architecture/amp/000-structure-for-initial-milestone.md renamed to dotcom-rendering/docs/architecture/historic-adrs/000-structure-for-initial-milestone-amp.md dotcom-rendering/docs/architecture/amp/000-structure-for-initial-milestone.md renamed to dotcom-rendering/docs/architecture/historic-adrs/000-structure-for-initial-milestone-amp.md

@@ -22,15 +22,15 @@ In DCR, we use file suffixes to help provide some context & information around f
 
 **Rendering Target**
 
-DCR supports rendering for different targets - web, apps & amp.
+DCR supports rendering for different targets - web & apps.
 To mark code which is only to be used for specific rendering target, this should be added to the suffix of the file, e.g `MyComponent.apps.tsx`, `MyLib.amp.ts` or `MyLayout.web.tsx`.
 
 These files all still live in the directories, and the suffixes are used to determine which target that code is for.
 In the case that there's no suffix, it can generally be assumed this code can be shared across targets.
 
 > Note: When this was set up, most web code stayed without suffixes, which means there's a chance it's not compatible with other targets, so be vigilant when using shared code on a new target for the first time.
 
-> Note: Some un-suffixed code might be shared across apps & web, but not AMP, or some other combination, so keep an eye out to see if there's a platform specific version of the file you're working on!
+> Note: Some un-suffixed code might be shared across apps & web or some other combination, so keep an eye out to see if there's a platform specific version of the file you're working on!
 
 **Islands / Client side (P)react**
 

dotcom-rendering/docs/contributing/where-should-my-code-live.md

@@ -16,7 +16,3 @@ This is represented in frontend by [DisclaimerBlockElement](https://github.com/g
 ## CAPI HTML Output
 
 This is inserted raw into the document.
-
-## AMP Cleaned HTML
-
-This is run through the BodyCleaner and the AMP cleaners.

dotcom-rendering/docs/elements/Disclaimer.md

@@ -27,14 +27,4 @@ Appears raw.
 
 If an embed uses `<figure>` tag, then the `ShowAllArticleEmbedsSwitch` can be used with `InBodyElementCleaner` to render a reduced subset of embeds.
 
-## AMP Cleaned HTML
-
-The html included in a potential embed may not be permitted by the AMP specification. For each embed that is renedered in an article we can:
-
--   Transform the embed into something which is valid amp.
--   Remove the embed.
--   Fail to render the article in AMP.
-
-The field `isMandatory` should control whether an embed is removed or if the page is. Dotcom does not currently support this API, so currently a workaround is used by central production to force the page to fail amp validation.
-
 ## Salient Points

dotcom-rendering/docs/elements/Embed.md

@@ -208,10 +208,6 @@ This is run through the [PictureCleaner](https://github.com/guardian/frontend/bl
     -   Uses [WidthsByBreakpoint](https://github.com/guardian/frontend/blob/91e117429d865936692de60aa2bea6740bde4f75/common/app/layout/WidthsByBreakpoint.scala#L1) to generate a list of _image_ breakpoints to combine with the media into urls.
     -   Combines the **master** ImageAsset and [breakpoints](https://github.com/guardian/frontend/blob/a101940926699230b8a95a9082aa56327ca98988/common/app/views/support/Profile.scala#L17) to generate [srcset](https://github.com/guardian/frontend/blob/a101940926699230b8a95a9082aa56327ca98988/common/app/views/support/Profile.scala#L240)s.
 
-## AMP Cleaned HTML
-
-This is run through the same cleaners and templates up to `image.scala.html` where it is then rendered using [ampImage](https://github.com/guardian/frontend/blob/f16a4ac50492dc65d7274576840c6993165a2485/common/app/views/fragments/amp/ampImage.scala.html) which uses [getAmpImageUrl](https://github.com/guardian/frontend/blob/a101940926699230b8a95a9082aa56327ca98988/common/app/views/support/Profile.scala#L298) to get a 620px wide crop.
-
 ## Salient points
 
 -   Image URLS need to be rewritten from `media.guim` to `i.guim` on the server.

dotcom-rendering/docs/elements/Image.md

@@ -13,14 +13,3 @@ This is represented in frontend by [InstagramBlockElement](https://github.com/gu
 ## CAPI HTML Output
 
 Absolute tonnes of it wow.
-
-## AMP Cleaned HTML
-
-An amp tag [`<amp-instagram>`](https://www.ampproject.org/docs/reference/components/amp-instagram) exists to represent this content.
-
-It requires the following data:
-
-`data-shortcode` | the URL slug for the embed
-`data-captioned` | whether a caption is displayed
-`width` | the width of the image (not the whole embed)
-`height` | the height of the image (not the whole embed)

dotcom-rendering/docs/elements/Instagram.md

@@ -42,9 +42,3 @@ The [BlockNumberCleaner](https://github.com/guardian/frontend/blob/bb83dabb21aea
     -   Something else about quotes.
 -   AffiliateLinksCleaner
     -   Rewrites URLs on applicable links and adds a disclaimer.
--   AttributeCleaner("style")
-    -   Removes inline style on amp articles. Inline style could be in a text block, but it's unlikely.
-
-## AMP Cleaned HTML
-
-This is run through the BodyCleaner and the AMP cleaners.

dotcom-rendering/docs/elements/Text.md

@@ -20,8 +20,6 @@ These are dynamically enhanced on the client side by loading the twitter javascr
 
 ## Article Cleaned HTML
 
-## AMP Cleaned HTML
-
 ## Salient Points
 
 We store enough in CAPI to handle deleted tweets and displaying their images without the twitter js enhancement.