Skip to content

feat: add related articles to News layout#17479

Open
anandaroop wants to merge 2 commits into
mainfrom
anandaroop/hack16-news-related-articles
Open

feat: add related articles to News layout#17479
anandaroop wants to merge 2 commits into
mainfrom
anandaroop/hack16-news-related-articles

Conversation

@anandaroop

@anandaroop anandaroop commented Jul 14, 2026

Copy link
Copy Markdown
Member

The type of this PR is: Feat

This PR solves https://app.notion.com/p/artsy/Redesign-Artsy-news-layout-pages-399cab0764a08052a15aececb3adc176

Assisted-by: Claude:Opus-4.8
Assisted-by: Claude:Sonnet-5

Description

Currently over 90% of news items have "related articles" manually assigned to them by our editors in Positron.

We display those articles in a rail in the mobile app, but not on web.

This PR brings desktop and mobile web to parity by adding the same content, following the existing style for article rails on web/mweb.

App mWeb (new) Web (new)
app mweb desk

Refactor

The first commit brought the total of RelatedArticles rails to 3, all nearly identical apart from data-fetching…

  • ArticleChannelRelatedArticles.tsx
  • ArticleNewsRelatedArticles.tsx
  • ArticleVerticalRelatedArticles.tsx

…so I rule-of-three'd this into an extraction in the second commit. Now all of those are simplified and make use of a presentation-only component called ArticleRelatedArticlesShelf.tsx

📸 Here are some screenshots to manually verify that there are no visual regressions after that refactor for other article types besides News
Article type Before-and-after
Standard standard2
Feature feature
Classic classic

anandaroop and others added 2 commits July 14, 2026 15:24
News articles were the only layout with no related-articles surface,
despite most having curated related_article_ids set by editors. Add a
lazy-loaded shelf (modeled on ArticleVerticalRelatedArticles, minus the
inVertical filter since news doesn't have a strong per-vertical identity)
to the NEWS case in ArticleApp.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
ArticleNewsRelatedArticles, ArticleVerticalRelatedArticles, and
ArticleChannelRelatedArticles were near-identical: a lazy-loaded
Shelf of CellArticle with a matching Skeleton placeholder, differing
only by GraphQL field, heading, and placeholder heading. Extract the
shared JSX into ArticleRelatedArticlesShelf and have each wrapper
delegate to it, keeping their fragments/queries/headings separate
since their data sources genuinely differ. Also add missing test
coverage for the Vertical and Channel wrappers.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@anandaroop anandaroop self-assigned this Jul 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant