Feast "thrasher" component #15316

tomrf1 · 2026-02-09T09:43:45Z

Background

The Feast thrasher is displayed on fronts to advertise the Feast app.
Currently it is implemented as an interactive atom in the interactives repo: https://github.com/guardian/interactives/tree/main/thrashers/feast-ny-thrasher

It is added in the Fronts tool as a "snap link" using the CAPI url:

The flow for updating it is:

Build (html/css/js) locally and publish to S3
CAPI picks this up as an atom
On web, the html/js is inserted into the front container using dangerouslySetInnerHTML
On apps, MAPI returns the url of a page with the interactive atom and it is rendered in a web view inserted into the Front

Problems with this approach:

Bad Developer Experience compared with working on dotcom-rendering. E.g. for the web we cannot reuse dynamic/interactive components from Source/DCAR, like the Ticker.
Security concerns about inserting arbitrary js into fronts

We'd prefer to build + maintain thrasher components in dotcom-rendering, for use by web and apps.

This change

Adds a new component, FeastThrasher. Includes a storybook entry.
The component looks broadly the same, though it now aligns better with the front layout.

This is served as a stand alone page from a new DCR endpoint, /AppsComponent/thrasher/feast. This is a very minimal page for use by the apps so that they can render it in a webview, just as we currently do for the interactive atoms. It includes necessary fonts, meaning we no longer need the font-face definitions.
We'll need changes to Frontend and Router to expose this endpoint.

For now nothing will actually use this component.
Future PRs will:

change dotcom-rendering to use the FeastThrasher component directly from the FrontLayout, instead of using an interactive atom.
change MAPI to return the new url (https://api.nextgen.guardianapps.co.uk/component/thrasher/feast?dcr=apps) for use by the apps. It's likely there will be some styling fixes needed for apps compatibility, but we need to integration test to get to that point.

Later we should also consider how to improve how this is configured in the Fronts tool. But to begin with we can continue using the old snap link as an indication that the FeastThrasher should be used.

Testing

I tested how it looks in a front by temporarily adding code to the FrontLayout (see commit) -

Desktop:

Tablet:

Mobile:

github-actions · 2026-02-09T10:00:38Z

Deploy build 24661 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

tomrf1 · 2026-02-09T15:53:49Z

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

 	app.post('/AppsBlocks', handleAppsBlocks);
 	app.post('/EditionsCrossword', handleEditionsCrossword);
 	app.post('/AppsHostedContent', handleAppsHostedContent);
+	app.post('/AppsComponent/Thrasher/:name', handleAppsThrasher);


this could just be a GET endpoint, not sure how much it matters

We might want to POST a payload in future, if/when we make the copy and image configurable

JamieB-gu

Looks great! A few comments and questions.

JamieB-gu · 2026-02-11T17:27:02Z

dotcom-rendering/src/components/marketing/thrashers/FeastThrasher.stories.tsx

+import { FeastThrasher } from './FeastThrasher';
+
+const meta = {
+	title: 'Components/Marketing/Thrashers/FeastThrasher',
+	component: FeastThrasher,
+} satisfies Meta<typeof FeastThrasher>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};


Given there's only one story, if you do this it hoists the story in the sidebar¹:

Suggested change

import { FeastThrasher } from './FeastThrasher';

const meta = {

title: 'Components/Marketing/Thrashers/FeastThrasher',

component: FeastThrasher,

} satisfies Meta<typeof FeastThrasher>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};

import { FeastThrasher as FeastThrasherComponent } from './FeastThrasher';

const meta = {

title: 'Components/Marketing/Thrashers/FeastThrasher',

component: FeastThrasherComponent,

} satisfies Meta<typeof FeastThrasherComponent>;

export default meta;

type Story = StoryObj<typeof meta>;

export const FeastThrasher: Story = {};

Footnotes

https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy#single-story-hoisting ↩

JamieB-gu · 2026-02-12T14:41:11Z

dotcom-rendering/src/server/render.thrasher.apps.tsx

+
+export const renderThrasher = (name: ThrasherName): { html: string } => {
+	const { html, extractedCss } = renderToStringWithEmotion(
+		<div>{name === 'feast' && <FeastThrasher />}</div>,


What's the reason for checking that the name is "feast" if the type already guarantees this? Also, do you need to wrap this in a div? In other words, could this just be?

Suggested change

<div>{name === 'feast' && <FeastThrasher />}</div>,

<FeastThrasher />,

It is redundant - but because this handler is intended to support more thrashers in future (with the ThrasherName type) it felt right to include the check anyway. I'd be ok with simplifying for now though

JamieB-gu · 2026-02-12T14:44:23Z

dotcom-rendering/src/components/marketing/thrashers/FeastThrasher.tsx

+	SvgGuardianLogo,
+} from '@guardian/source/react-components';
+
+const styles = {


Out of curiosity, where does this pattern of creating a single object to store styles come from?

It's quite common in the marketing components, e.g. banners. I guess the alternative is adding a Styles suffix to various names

JamieB-gu · 2026-02-12T14:56:03Z

dotcom-rendering/src/components/marketing/thrashers/FeastThrasher.tsx

+const tabletImageUrl =
+	'https://media.guim.co.uk/2c4014d476310737dce1e830186e5b6fe18d3327/0_0_2000_2000/2000.jpg';
+const mobileAndDesktopImageUrl =
+	'https://media.guim.co.uk/a0cc02db1394f8710bdce008e2297759098d53b3/0_0_2000_1200/2000.png';


You may want to use the image optimiser to make these images more responsive to different screen sizes and pixel densities? Given this isn't live yet, this could be done in a follow-up change.

dotcom-rendering/dotcom-rendering/src/lib/image.ts

Lines 44 to 51 in f912e23

/**

* Generates a URL for calling the Fastly Image Optimiser.

*

* @see https://developer.fastly.com/reference/io/

* @see https://github.com/guardian/fastly-image-service/blob/main/fastly-io_guim_co_uk/src/main/resources/varnish/main.vcl

*

*/

export const generateImageURL = ({

These urls are copied over from the existing thrasher in the interactives repo. I'll take a look at the optimiser

I guess one of the benefits of moving it into dotcom-rendering is that we get to reuse features like this!

tomrf1 added 6 commits February 9, 2026 09:12

WIP - feast thrasher

c90e8d1

remove old

ee46430

storybook

7e9cb7c

tidy

381c4ec

Remove front layout change

35b8e55

prod endpoint

5e46941

tomrf1 added the feature Departmental tracking: work on a new feature label Feb 9, 2026

color-no-hex

fadd380

style comment

749bc8b

tomrf1 force-pushed the tf-feast-component branch from 8c1bab9 to 749bc8b Compare February 9, 2026 13:57

don't use ResponsiveImage

bc03b7a

tomrf1 added the run_chromatic Runs chromatic when label is applied label Feb 9, 2026

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Feb 9, 2026

unused exports

ae5f377

tomrf1 added the run_chromatic Runs chromatic when label is applied label Feb 9, 2026

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Feb 9, 2026

tomrf1 commented Feb 9, 2026

View reviewed changes

tomrf1 mentioned this pull request Feb 10, 2026

New /component endpoint guardian/frontend#28595

Draft

lowercase path

6111162

tomrf1 force-pushed the tf-feast-component branch from d10cf47 to 6111162 Compare February 10, 2026 14:00

tomrf1 added the run_chromatic Runs chromatic when label is applied label Feb 10, 2026

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Feb 10, 2026

tomrf1 added the run_chromatic Runs chromatic when label is applied label Feb 10, 2026

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Feb 10, 2026

JamieB-gu reviewed Feb 12, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feast "thrasher" component #15316

Feast "thrasher" component #15316

Uh oh!

tomrf1 commented Feb 9, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 9, 2026 •

edited

Loading

Uh oh!

tomrf1 Feb 9, 2026

Uh oh!

tomrf1 Feb 10, 2026

Uh oh!

JamieB-gu left a comment

Uh oh!

JamieB-gu Feb 11, 2026

Uh oh!

JamieB-gu Feb 12, 2026

Uh oh!

tomrf1 Feb 12, 2026

Uh oh!

JamieB-gu Feb 12, 2026

Uh oh!

tomrf1 Feb 12, 2026

Uh oh!

JamieB-gu Feb 12, 2026

Uh oh!

tomrf1 Feb 12, 2026

Uh oh!

tomrf1 Feb 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<div>{name === 'feast' && <FeastThrasher />}</div>,
	<FeastThrasher />,

	/**
	* Generates a URL for calling the Fastly Image Optimiser.
	*
	* @see https://developer.fastly.com/reference/io/
	* @see https://github.com/guardian/fastly-image-service/blob/main/fastly-io_guim_co_uk/src/main/resources/varnish/main.vcl
	*
	*/
	export const generateImageURL = ({

Feast "thrasher" component #15316

Are you sure you want to change the base?

Feast "thrasher" component #15316

Uh oh!

Conversation

tomrf1 commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Background

This change

Testing

Uh oh!

github-actions bot commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JamieB-gu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

tomrf1 commented Feb 9, 2026 •

edited

Loading

github-actions bot commented Feb 9, 2026 •

edited

Loading