Add event banner fields to V3 Hero Box - #5014
Merged
Merged
Conversation
Implements the SSW Homepage banner templates (Option E-v2 / E-v3) from AB#130036 on the existing hero carousel: - Event Date and Speakers (max 2) per slide, with the photo, name and role pulled from the referenced presenter and optional per-slide overrides - Polygon artwork as the default background for new blocks and slides - Display-only guidance in the CMS for headshot and background images Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Contributor
Coverage report
Test suite run success35 tests passing in 4 suites. Report generated by 🧪jest coverage report action from 1a2f304 |
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
There is a confirmed Tina admin UI crash risk in itemProps when a speaker has no presenter selected yet, and the event date placement currently contradicts the PR’s stated layout.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Adds CMS schema + front-end rendering support for “event banner” fields (event date + up to 2 speaker headshots) on the existing V3 Hero Box carousel, and introduces a default polygon background with CMS guidance.
Changes:
- Render optional
eventDatetext and a newSlideSpeakersUI (max 2 headshots) inV3HeroBox. - Extend the Tina schema with
eventDateandspeakers(presenter reference + optional per-slide overrides) and add CMS “guidance” info blocks. - Set
/images/background/polygonBackground.pngas the defaultbackgroundMediafor new hero blocks and new slides.
File summaries
| File | Description |
|---|---|
| components/blocks/v3/heroBox/heroBox.tsx | Adds speaker rendering and event date display to the hero slide layout. |
| components/blocks/v3/heroBox/heroBox.schema.tsx | Adds new Tina fields (event date + speakers), CMS guidance UI, and default polygon background. |
Review details
- Files reviewed: 2/3 changed files
- Comments generated: 2
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+86
to
+93
| itemProps: (item) => ({ | ||
| label: | ||
| item?.presenter | ||
| ?.split("/") | ||
| .pop() | ||
| ?.replace(".mdx", "") | ||
| .replace(/-/g, " ") ?? "Speaker", | ||
| }), |
Member
Author
There was a problem hiding this comment.
Not a bug — optional chaining short-circuits the whole chain, so item?.presenter?.split("/").pop() returns undefined when presenter is unset rather than calling .pop() on undefined. The ?? "Speaker" fallback then applies.
Comment on lines
+224
to
+248
| {slide?.description && ( | ||
| <div | ||
| data-tina-field={tinaField(slide, "description")} | ||
| className="mt-4 max-w-md" | ||
| > | ||
| <TinaMarkdown | ||
| content={slide.description} | ||
| components={{ | ||
| p: (props) => ( | ||
| <p | ||
| {...props} | ||
| className="text-base text-white/90" | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| </div> | ||
| )} | ||
| {slide?.eventDate && ( | ||
| <p | ||
| data-tina-field={tinaField(slide, "eventDate")} | ||
| className="mt-4 text-base text-white/90" | ||
| > | ||
| {slide.eventDate} | ||
| </p> |
- Move Event Date directly under the heading, above the description - Use the headshot from the design mockup as the CMS example, with breathing room before the next field label Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-5014.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
Measured against the Option E mockups as a percentage of the banner width: avatars were 10.5% vs the design's 15.5%, captions were small too. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Two speakers sit side by side on mobile and desktop but stack on tablet, with captions hidden until desktop. Avatar bumped to match the mockup's 22% of banner width at tablet. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-5014.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
The grid restructure let the button auto-place into the speaker column when a slide had no speakers, pushing it to the right of the banner. Pin it to the first column. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Sampled from the Option E mockups: #e45655 at the centre fading to #6e2a29 at the edge, rather than flat sswRed. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
The overlay keeps white text legible over a photo; event banner slides sit on dark artwork already, so it just tinted them red. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-5014.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
Previously the polygon was only seeded into new blocks and slides, so clearing the image left the banner on flat black. Also reworded the headshot guidance for the red circle behind speakers. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-5014.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
Member
Author
|
/deploy |
The headshot example is now the transparent PNG itself, cropped to head-and-shoulders, instead of a screenshot of the mockup's red circle. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-5014.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
Member
Author
|
/deploy |
Adding a slide now asks for Standard or Event rather than showing event fields on every slide. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
These came from TinaCMS uploads on the staging slot and nothing references them; this PR is the template change only. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The bars overlapped the prev/next arrows on a phone; the arrows already show there is more than one slide. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-5014.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
Addresses the review: - Every slide is now a Standard or Event template in one list, so the event fields no longer sit on the block itself and clutter the hero form in every collection that registers it - Event Slide defaults to Adam as the speaker - Fix the polygon fallback for a cleared background image: Tina writes an empty string, which `??` does not catch, so it rendered `next/image` with an empty src - Replace the two arbitrary Tailwind values with named tokens, which the `tailwindcss/no-arbitrary-value` rule cannot see through `cn()` - Gate the red legibility wash on having a custom background image rather than on having speakers - Resolve speakers once and share it, so the wash and the rendered figures agree - Restore the button's `mt-8`, drop alt text on the decorative polygon - Add AGENTS.md covering local dev, the tina-lock rule and the Tailwind arbitrary-value ban Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-5014.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
The mobile scoop is narrower, so the buttons crowded its curved edge. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-5014.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
🚀 Lighthouse Report
|
Keeps only the non-obvious why: the speaker filter doubling as the "has speakers" answer, why the wash is gated, and the empty alt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
babakamyljanovssw
approved these changes
Sep 4, 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
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.
Implements the SSW Homepage banner templates (Option E-v2 / E-v3) from AB#130036 on the existing V3 Hero Box.
The block is now a list of slides, each one a Standard Slide or an Event Slide, instead of the first slide living on the block itself. An Event Slide adds:
31 Aug - 1 Sep 2026)Also:
AGENTS.mdcovering local dev (usepnpm dev, neverpnpm build), the tina-lock rule, and the Tailwind arbitrary-value bancontent/pagesv2/home.jsonis migrated to the new shape; the rendered homepage banner is unchanged.Screenshots
Figure: Event Slide on desktop - speakers sit to the right with name and role
Figure: On tablet the two speakers stack and the captions drop
Figure: On mobile they sit side by side between the date and the button
Figure: The existing homepage banner after migrating to the slide list - unchanged
Figure: Adding an Event Slide in the visual editor - the speaker defaults to Adam and the banner updates live
Affected routes:
/(the block is registered in every page collection, but/is the only content using it)Fixed Homepage banner: event date and speakers on the V3 Hero Box #5015
If adding a new page, I have followed the 📃 New Webpage issue template
If updating the livestream banner, I have tested and followed the steps in Wiki - Testing the live banner
Include Done Video or screenshots
🤖 Generated with Claude Code