feat: add related events section on event page (#207)

[yoannfleurydev]

From #286

Changes

Created a new RelatedEvents component that displays events in the same city
Updated the event detail page to include the new component
Implemented build-time filtering to pre-select related events
Only passes necessary event data to each page, not the entire collection

Close: #207

Summary by CodeRabbit

• New Features
  • Introduced a "More Events in [City]" section on individual event pages. Users can now discover related events in the same city, displayed in a responsive grid format with up to 3 event recommendations sorted by date.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
forkit-community	Ready	Preview	Comment	Nov 21, 2025 10:24am

[coderabbitai]

Walkthrough

A new RelatedEvents component is introduced to display up to 3 related events from the same city on event detail pages. The event page template is updated to compute related events during static path generation and render them in a responsive grid above the community section.

Changes

Cohort / File(s)	Summary
New Related Events Component src/components/RelatedEvents/index.astro	New component that renders a "More Events in {City}" section displaying related events in a responsive 3-column grid using TiltedCard and EventCard wrappers. Accepts currentEvent and relatedEvents as props.
Event Detail Page Updates src/pages/events/[id]/index.astro	Imports RelatedEvents component; getStaticPaths now filters and sorts related events by date to compute top 3 matches; Astro.props destructuring expanded to include relatedEvents; component rendered before JoinTheCommunity section.

Sequence Diagram

sequenceDiagram
    participant Build as Build Process
    participant GetStatic as getStaticPaths()
    participant Filter as Event Filter
    participant Page as Event Page Template
    participant RelatedEvents as RelatedEvents Component

    Build->>GetStatic: Generate static paths for all events
    GetStatic->>Filter: For each event, filter by same city
    Filter->>Filter: Sort by date, take top 3
    GetStatic->>Page: Pass event + relatedEvents in props
    Page->>RelatedEvents: Render with currentEvent and relatedEvents
    RelatedEvents->>RelatedEvents: Map to EventCard grid (3 columns)
    RelatedEvents->>Page: Display "More Events in {City}" section

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• The new RelatedEvents component is straightforward template rendering with no complex logic
• The getStaticPaths modification follows a standard filtering and sorting pattern
• Verify the related events filtering logic correctly matches events by city and handles edge cases (e.g., when no related events exist)
• Confirm the component placement integrates well with existing page layout

Poem

🐰 Related events hop into view,
Same city ties, a grid anew,
More to explore, events align,
Together they shine, by design! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main change: adding a related events section to the event page, which matches the changeset perfectly.
Linked Issues check	✅ Passed	The pull request implements the core requirement from issue #207 by adding a RelatedEvents component that displays events from the same city on the event detail page.
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issue #207; the new component and page modifications focus solely on displaying related events from the same city.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/events-from-same-city-arkee

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/pages/events/[id]/index.astro (1)

51-61: Simplify redundant date filter and fix sort order to prioritize future events.

Two issues in the related events logic:

1. Redundant date condition: The OR condition (dayjs(e.data.date).isAfter(dayjs()) || dayjs(e.data.date).isAfter(dayjs().subtract(30, "day"))) is redundant since any date after now is also after 30 days ago. This simplifies to just the second condition.

2. Sort order prioritizes past events: The ascending date sort means past events appear before future events. For a user viewing an event page, upcoming events in the same city are more relevant than recent past events.

Apply this diff to simplify the filter and prioritize future events:

       const relatedEvents = allEvents
         .filter(
           (e) =>
             e.id !== event.id &&
             event.data._computed.city?.id !== undefined &&
             e.data._computed.city?.id === event.data._computed.city?.id &&
-            (dayjs(e.data.date).isAfter(dayjs()) ||
-              dayjs(e.data.date).isAfter(dayjs().subtract(30, "day"))),
+            dayjs(e.data.date).isAfter(dayjs().subtract(30, "day")),
         )
-        .sort((a, b) => dayjs(a.data.date).diff(dayjs(b.data.date)))
+        .sort((a, b) => {
+          const now = dayjs();
+          const aIsFuture = dayjs(a.data.date).isAfter(now);
+          const bIsFuture = dayjs(b.data.date).isAfter(now);
+          // Prioritize future events over past events
+          if (aIsFuture && !bIsFuture) return -1;
+          if (!aIsFuture && bIsFuture) return 1;
+          // Within same category, sort by date (ascending for future, descending for past)
+          return dayjs(a.data.date).diff(dayjs(b.data.date));
+        })
         .slice(0, 3);

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3ac6a7e and 8ae2714.

📒 Files selected for processing (2)

• src/components/RelatedEvents/index.astro (1 hunks)
• src/pages/events/[id]/index.astro (2 hunks)

🔇 Additional comments (4)

src/components/RelatedEvents/index.astro (1)

1-29: LGTM! Clean implementation of the RelatedEvents component.

The component correctly handles conditional rendering, checking both for the presence of related events and the city name before displaying. The use of client:visible on TiltedCard ensures progressive rendering, and the responsive grid layout adapts well across screen sizes.

src/pages/events/[id]/index.astro (3)

44-44: LGTM!

---

74-74: LGTM!

Props destructuring correctly updated to include relatedEvents.

---

696-697: LGTM! Well-positioned component.

The RelatedEvents component is appropriately placed before the JoinTheCommunity section, and the props are correctly passed.