Feast Contextual Nudges#15752
Open
andresilva-guardian wants to merge 55 commits into
Open
Conversation
…lockElement in recipe articles
…n ArticleRenderer
…eRenderer for recipe articles
…lity, and A/B testing details
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
…e deep linking functionality
- Introduced RecipeCardInline component to display recipe details inline with dismiss functionality. - Added RecipeCardLeftCol component for sticky left-column recipe display. - Created stories for both components to showcase various states and dark mode. - Updated ArticleRenderer to integrate new RecipeCard components, replacing previous FeastRecipeNudge components.
… use RecipeCardInline directly
…recipe information
… visual consistency
…ds for improved clarity and performance refactor: simplify RecipeCardInline and RecipeCardLeftCol components by removing unused props and styles fix: adjust ArticleRenderer to handle new RecipeJson structure for better data management
…ponents for cleaner structure
…ntextualNudge to use config context for dark mode handling
… props, and enhance accessibility attributes
… prop to recipeArticleTitle and adjust styles for consistency
…ate button behavior for Feast app
…eBannersSystemPlacementIdIndex prop for cleaner code
…peArticleTitle for consistency
… development logging
andresilva-guardian
added
the
feature
github-actions
Bot
removed
the
run_chromatic
Contributor
j-ruda-guardian
left a comment
j-ruda-guardian
left a comment
There was a problem hiding this comment.
Looks good! Left a couple of comments that I hope are helpful!
…ment and FeastContextualNudge
…ports in ArticleRenderer
j-ruda-guardian
approved these changes
Jun 1, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this change?
We add a new in-article component to Guardian recipe pages,
FeastContextualNudge, an inline card injected after each recipe subheading when aRecipeBlockElementis present in the article body.FeastContextualNudgeis a Feast-branded card with a fixed heading ("Feast app: Your most useful kitchen utensil"), a short description, and a single "Open in the Feast app" CTA. The CTA deep-links to the specific recipe in the Feast app using environment-aware Adjust tracking tokens (PROD vs CODE). Dark mode is supported via CSS custom properties.In
ArticleRenderer, we group the article's body elements into per-recipe sections separated bySubheadingBlockElements. After each subheading, if aRecipeBlockElementis present in that section, we inject aFeastContextualNudgefor it. TheRecipeBlockElementis consumed by the nudge and not rendered as a standalone body element.We also add the
RecipeBlockElementtype to the content model (src/types/content.ts) and its corresponding JSON schema definition (src/frontend/schemas/feArticle.json), and we update the Recipe fixture with a sampleRecipeBlockElementso the nudge is visible in local dev and Storybook.Files added/changed:
src/components/FeastContextualNudge.tsx+.stories.tsxsrc/lib/ArticleRenderer.tsx(groups recipe elements by section, injects the nudge)src/types/content.ts(RecipeBlockElementandRecipeFeaturedImageinterfaces, added toFEElementunion)src/frontend/schemas/feArticle.json(RecipeBlockElementandRecipeFeaturedImageJSON schema definitions)fixtures/generated/fe-articles/Recipe.ts(sampleRecipeBlockElementadded to the fixture)Why?
Recipe articles are the highest-intent touchpoint for Feast app promotion. A reader actively cooking from a Guardian recipe on the web is already the ideal Feast user, and Cook Mode, unit conversion, and saved collections are all directly relevant to what they are doing at that moment.
This is contextual targeting rather than demographic targeting: we offer a relevant upgrade at the moment of highest intent rather than interrupting general browsing.
Screenshots