feat: #3622688 Lay out the article and episode pages the way the design does

Rajab Natshahrequested to merge
issue/rightup-3622688:3622688-the-article-and into 1.0.x

Issue: https://www.drupal.org/project/rightup/issues/3622688

The problem

Both node pages ship as a single stacked column. The design (VBN stylesheet: Article frame and Podcast Node frame) lays them out in two.

  • The article page rendered a full-width H1, the date, a full-bleed image and the body with a vertical share rail. The standfirst (field_description), the byline and the editor's picks rail were absent.
  • The episode page rendered H1, date, a 16:9 image, a vertical share rail, the body, and the player last.

The change

Both templates are recomposed from the theme's own components, binding the same entity fields as before.

Article - canvas.content_template.node.news.full comes from varbase_news_base, so RightUp sets it with a simpleConfigUpdate config action (the now-redundant repointComponentTreeToTheme on this one template is dropped, since the new tree already references the RightUp components):

  • a 50-50 lede section: breadcrumb in the header slot; H1, standfirst from field_description, date, rule, byline bound to the node author, and a horizontal share row on the left; the featured image on the right
  • a 67-33 section: the story beside an "Editor's Picks" divider and the News Featured view block
  • the subscribe band with the Newsletter Subscribe webform
  • an "On Display" section with the News Latest view block

Episode - canvas.content_template.node.podcast.full is shipped by RightUp, so the config file itself is rewritten (dependencies recomputed: 11 config, webform added):

  • a black banner (bg-primary, text-white, edge to edge): breadcrumb, H1 and the remote audio player on the left, square cover art on the right
  • a 67-33 section: date, duration, share row, rule, a "Details" heading with field_description, an "Audio Transcript" heading with field_content
  • the same subscribe band

Colours come from the Bootstrap 5.3 theme variables (bg-primary, bg-accent-subtle, text-white); no hex values.

Verification

Fresh ddev drush si -y ../recipes/rightup on Drupal CMS 2.1.4 (core 11.4.6):

Check Result
install exit 0, 0 watchdog entries at severity <= 3
/, /architecture, /podcasts, the article, the episode HTTP 200
article page standfirst, byline ("Chiara Romano"), Editor's Picks rail, subscribe form and On Display row all render
episode page black banner, Details and Audio Transcript render

Still open (tracked on the issue, not fixed here)

  • A podcast view, so the episode page can carry the design's "More Episodes" rail and the show page can list episodes from data rather than static cards.
  • The Editor's Picks rail lists the article being read; the view needs a current-node exclusion.
  • The article breadcrumb reads Home > News where the design reads the article's category.
  • Episodes ship no field_audio_url, so the player has nothing to play.
  • The episode banner breadcrumb needs a contrast check on black.

Checkpoints

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • Developer Documentation support
  • User Guide Documentation support
  • UX/UI designer responsibilities
  • Accessibility and Readability
  • Reviewed by a human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Update Release Notes
  • Release

AI-Generated: Yes

Edited by Rajab Natshah

Merge request reports