feat: add related events section on event page

src/components/RelatedEvents/index.astro

@@ -0,0 +1,29 @@
+---
+import EventCard from "@/components/EventCard/index.astro";
+import TiltedCard from "@/components/TiltedCard";
+import type { EventComputed } from "@/lib/events";
+
+interface Props {
+  currentEvent: EventComputed;
+  relatedEvents: EventComputed[];
+}
+
+const { currentEvent, relatedEvents } = Astro.props;
+---
+
+{
+  relatedEvents.length > 0 && currentEvent.data._computed.city?.data.name && (
+    <div class="relative mx-auto flex w-full max-w-screen-lg flex-col gap-8 px-4 py-12 md:py-24">
+      <h2 class="scroll-mt-32 font-heading text-2xl font-medium uppercase tracking-widest">
+        More Events in {currentEvent.data._computed.city.data.name}
+      </h2>
+      <div class="grid gap-4 md:grid-cols-3">
+        {relatedEvents.map((event) => (
+          <TiltedCard client:visible>
+            <EventCard event={event} />
+          </TiltedCard>
+        ))}
+      </div>
+    </div>
+  )
+}

src/pages/events/[id]/index.astro

@@ -40,21 +40,37 @@ import dayjs from "dayjs";
 import TiltedCard from "@/components/TiltedCard";
 import { lunalink } from "@bearstudio/lunalink";
 import { ROUTES } from "@/routes.gen";
+import RelatedEvents from "@/components/RelatedEvents/index.astro";
 
 export async function getStaticPaths() {
-  const events = await getEventsCollection();
+  const allEvents = await getEventsCollection();
 
   return Promise.all(
-    events.map(async (event) => ({
-      params: { id: event.id },
-      props: {
-        event,
-      },
-    })),
+    allEvents.map(async (event) => {
+      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"))),
+        )
+        .sort((a, b) => dayjs(a.data.date).diff(dayjs(b.data.date)))
+        .slice(0, 3);
+
+      return {
+        params: { id: event.id },
+        props: {
+          event,
+          relatedEvents,
+        },
+      };
+    }),
   );
 }
 
-const { event } = Astro.props;
+const { event, relatedEvents } = Astro.props;
 
 const partners = await getEntries(event.data.partners ?? []);
 const speakers = await getEntries(event.data._computed.speakers ?? []);
@@ -64,7 +80,6 @@ const coOrganizers = (await getEntries(event.data.coOrganizers ?? [])).filter(
 const sponsors = await getEntries(
   (event.data.sponsors ?? []).map((s) => s.slug),
 );
-
 const navItems = await getEventNavItems(event.id);
 
 const { Content } = await render(event);
@@ -646,6 +661,8 @@ const ctaEventMetadata = {
     </a>
   </div>
 
+  <RelatedEvents currentEvent={event} relatedEvents={relatedEvents} />
+
   <div class="py-8 md:py-12">
     <JoinTheCommunity />
   </div>