Apps newsletter signup placement logic

[dblatcher]

What does this change?

(No public-facing changes). Adds the module to insert a NewsletterSignup component into an article on Apps rendering. The exported insertNewsletterIntoItem function will:

• do nothing if the Article is not "Standard" (IE does nothing with blogs, interactive pages etc)
• For standard Articles:
  • Sum the total number of child HTML nodes in each Text BodyElement and find which Text contains the middle of the article (going only by the number of top level children, not the amount of text in each)
  • If the function cannot identify the right place to insert the NewsletterSignup BodyElement it will return the unmodified Item.Body
  • Divide this Text into two and put the NewsletterSignup BodyElement between them
  • Replace the original Text with the three new bodyElements in the Item.Body

How to Test

In ./apps-rendering/src/server/page.tsx, import the insertNewsletterIntoItem function and add the following before call to renderBody on line 174:

insertNewsletterIntoItem(item,{
	id: 'patriarchy',
	description:
		'Reviewing the most important stories on feminism and sexism and those fighting for equality',
	displayName: 'The Week in Patriarchy',
	frequency: 'Weekly',
	theme: 1,
	group: 'opinion',
})

Run the project locally with npm run watch and open any article - the NewsletterSignup component should be placed in the middle of the article (Note the at the components are not currently functional - only the visual design is implemented).

Why?

The new sign-up blocks are implemented on DCR and the equivalent feature is being rolled out on App-rendering. When the NewsletterSignup is functional and has dark mode implemented and MAPI has been updated to provide the newsletter data (when the article is tagged to include a newsletter promotion), the placement logic can be used to add the NewsletterSignUp BodyElement to the Item.

The logic is significantly different to the equivalent for DCR because:

• it does not need to take account of floating elements in the left column
• The article data for DCR is processed by frontend to break each child node of a CAPI Text element into it's own DCR element, so the structure of a DCR article and an App-rendering Item are different.