Redesign the event page template - #4978
Conversation
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Makes the main event page <h1> title render in bold on calendar-based event pages by explicitly applying a Tailwind font weight class in the Events preview template.
Changes:
- Add
font-boldto the event title<h1>inevents-preview.tsxto ensure a consistent bold (700) heading weight.
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Coverage report
Test suite run success27 tests passing in 3 suites. Report generated by 🧪jest coverage report action from b473cce |
- New hero card (dotted texture + warm tint) matching the design system: status/type/entry label row, bold title, date/time/location meta, "Register now" CTA, and speaker avatar with SSW-red ring. - Move breadcrumb below the hero card, restyled to uppercase "/" crumbs. - Cap event page content at max-w-8xl to limit page width. - Add optional TinaCMS fields: Entry (entryCost) and Venue (venue). - Drop the now-duplicated date/time/location and breadcrumb from the About section sidebar (moved into the hero). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the overlapping avatar stack + "N Speakers" count with a row of individual ringed avatars, each showing the presenter name and a per-event role label (defaults to "Speaker"). Add an optional per-presenter "role" field (Lead / Co-lead / etc.) to the eventsCalendar presenterList. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Hero: - CTA label + optional price now come from fields (ctaLabel, price), defaulting to "Register now". - Past events show a muted "Past event" status and, when a recording is available (youTubeId/trailerUrl), a "Watch the recording" CTA. About the Event: - Restyle to a red eyebrow, large lead paragraph, and spaced body prose; drop the thumbnail sidebar and constrain the text column for readability. - Add an optional "lead" (intro) field. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Rebuild About the Speakers as a 2-up card grid: avatar, underlined name, position + SSW-city line, bio, and a design-system ArrowCircle button. - Whole card links to the speaker profile; on hover the avatar gains an SSW-red ring and the ArrowCircle rotates 45deg + scales (design system). - Fix the hero card border to the 0.75px hairline (border was 3px). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Remove the ring offset so the hover red ring sits flush against the circular avatar (no white gap). - Drop the derived SSW-city office line; show only the presenter's position under the name. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Convert new schema field descriptions to double-quoted strings with single-quoted inner examples (quotes rule). - Replace arbitrary Tailwind values (leading-[1.1] -> leading-tight, max-w-[16rem] -> max-w-64) and use the md:p-14 shorthand. - Apply prettier formatting from lint --fix. - Remove the ring offset on hero speaker avatars so the SSW-red ring sits flush against the photo (no white gap). Verified: `pnpm lint --max-warnings 0` passes and tsc has no errors in the changed files (against locally generated Tina types). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Remove underline from speaker names. - Give the card a hairline border that turns SSW-red on hover. - Give the avatar a static gray border that does not change on hover. - Background no longer changes on hover (stays gray-50); only the card border and the design-system arrow respond to hover. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Match the About-the-Speakers card image border — red on every hero avatar was too much. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Adds entryCost, venue, ctaLabel, price, lead, and the presenter role to the compiled eventsCalendar schema so TinaCloud can index the branch. Fixes the build-site ERR_CLOUD_CHECK_FAILED (local vs remote GraphQL schema mismatch). Only the eventsCalendar collection changed; Tina version 2.4.7 unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- New sticky sidebar beside the About content: banner (bannerImage, or the thumbnail logo on a tinted panel), Event details + entry, a red date chip with the date/time, venue link (CITY_MAP url) + city/state, Register CTA, Add to calendar (.ics download) and Share (Web Share / copy) actions, an optional availability note, and "Hosted by SSW". - Add optional TinaCMS fields: bannerImage (image) and availability (select). - Add formatEventDateChip helper + dateChip to useFormatDates for the chip. - Keep the hero date/time/location (duplication is intentional). - Regenerate tina-lock.json (eventsCalendar only; Tina 2.4.7 unchanged). Verified locally: pnpm lint --max-warnings 0 passes; tsc adds no new errors. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…bourne
- Wrap the About/sidebar row in a plain <section> (not <Section>, which sets
overflow-hidden and disabled position: sticky) so the sidebar now scrolls
with the reader on long pages.
- Shrink the sidebar banner to a fixed height on mobile; aspect-video on lg.
- Populate the Angular Hack Day - Melbourne event with lead, entryCost
("Free entry") and venue ("SSW Chapel").
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…tion - Remove the now-unused headerLayout field and its constants file (the new hero always uses avatars, so nothing reads it). - Group Availability next to Entry/Venue in the editor. - Fix the hero location that showed the venue twice once Venue was set (now "Venue, City"). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
b7e106e to
2e87ae7
Compare
|
📌 Note: the Agenda section is not included here. It will be added in a separate, dedicated PR to keep this one focused and simplify implementation. |
|
/deploy |
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4978.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
There was a problem hiding this comment.
Notes, not blockers
-
13 content files still have
headerLayout. The schema drops the field butcontent/events-calendar/still carries it in 13 JSON files. The build passes, so nothing is on fire. But Tina will quietly strip the field the next time anyone edits one of those events in the CMS, and that lands as a random unrelated diff in someone else's PR. Cleaner to sweep them here. -
dateChiphas the same SSR problem asisPast. It is set inside the sameuseEffectinuseFormatDates, so the red date chip in the sidebar paints as an empty red square before it fills in. Same root cause as theisPastcomment, so probably worth doing together. -
The .ics has no line folding. RFC 5545 wants lines folded past 75 characters, and a long title plus a long venue will go over. Only some calendar clients care, so low priority.
-
An event that finished this morning still reads as "Today".
formatRelativeEventDatereturnsTODAYfor same-day events, soisPaststays false and the recording link does not show up until tomorrow. Might be exactly what you want, just flagging it. -
Not yours, but you will trip over it: the event page has an infinite render loop. I ran this branch locally and the console fills with
Maximum update depth exceeded, traced to theuseEffectinuseFormatDates. The caller buildsnew Date(...)on every render and those objects are the effect's dependencies, so the effect re-runs forever.
|
/deploy |
Merging main back in restored the upstream lock file, so it no longer matched this branch's eventsCalendar schema and the build failed the TinaCloud check. Regenerated: only eventsCalendar differs, Tina 2.4.7. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
/deploy |
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4978.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
… border - RippleButton opts out of the global `a:not(.unstyled)` rule, so link-style buttons are no longer underlined and keep their white text on hover. This also fixes the card carousel's buttons, which pass href too. - A single speaker now takes the full column instead of a half-width card. - Shorten the sidebar banner (h-24, h-32 from lg) instead of 16:9. - Make the hero card border visible (gray-200, still a 0.75px hairline). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
/deploy |
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4978.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
🚀 Lighthouse Report
|
- Link the venue to the chapel page when the venue is that chapel
("SSW Chapel" matches "SSW Chapel Melbourne"), which the previous check
wrongly excluded — that broke the documented, common case.
- Fold .ics lines by UTF-8 octets on code point boundaries, so accented
names and emoji can't exceed 75 or be cut in half.
- Guard useFormatDates with Number.isFinite: callers build `new Date(value)`,
so bad input arrives as Invalid Date (NaN), not undefined. Clear state too.
- Give additionalReplacements a module-level default, so the breadcrumb memo
isn't invalidated every render (NO_SEGMENTS alone achieved nothing).
- Keep both years when a multi-day event crosses New Year, and don't append
the end year twice in that case.
- Correct two comments that claimed more than the code does: SSR only fixes
the CTA (upcoming status still waits for hydration), and " daily" infers
the hours from day one rather than knowing them.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- A blank price now hides the suffix instead of asserting "Free", matching what the Tina field description promises the author. An unpriced paid event can no longer advertise itself as free. - Handle all three CTA states: upcoming links to registration, past with a recording links to the video, and past without one shows no button rather than pointing at a closed registration page. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Thanks @0xharkirat — second round all actioned, replied inline on each. Fixed as flagged (7)
Your call, now decided (2)
All 11 threads resolved. |
|
/deploy |
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4978.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
🚀 Lighthouse Report
|
The squares already carry the month and day, so the text beside them said
the same thing again ("SEP 16" next to "Wed 16 Sep"). The squares now own
the numbers and the text owns only what they can't express:
- Single day: the full weekday ("Wednesday").
- Multi-day: the abbreviated weekday range ("Mon - Tue").
Both derived from the event dates, so they follow any change. Time ranges,
square markup and sizing are untouched. Replaces the schedule's dateShort,
which nothing else read, and tightens the gap around the multi-day arrow so
the two squares read as one unit.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
/deploy |
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4978.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
🚀 Lighthouse Report
|


Closes #4864
Redesigns the calendar event page (
events-preview.tsx) to the new SSW design.Changes
max-w-8xl.New TinaCMS fields (eventsCalendar)
entryCost,venue,ctaLabel,price,lead,availability,bannerImage, and a per-presenterrole. Removed the now-unusedheaderLayoutfield.The sample event (Angular Hack Day – Melbourne) is populated to demo the layout.