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

Author: antoinekm

src/components/RelatedEvents/index.astro

@@ -0,0 +1,29 @@
+---
+import EventCard from "@/components/EventCard/index.astro";
+import TiltedCard from "@/components/TiltedCard";
+import type { CollectionEntry } from "astro:content";
+
+interface Props {
+  currentEvent: CollectionEntry<"events">;
+  relatedEvents: CollectionEntry<"events">[];
+}
+
+const { currentEvent, relatedEvents } = Astro.props;
+---
+
+{
+  relatedEvents.length > 0 && (
+    <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.city}
+      </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

@@ -37,29 +37,45 @@ import { FAQ } from "@/components/Faq";
 import { EventMessage } from "@/components/EventMessage";
 import dayjs from "dayjs";
 import TiltedCard from "@/components/TiltedCard";
+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,
-        subPages: await getEventSubPagesCollection(event),
-        speakers: await getEntries(event.data.speakers ?? []),
-        coOrganizers: await getEntries(event.data.coOrganizers ?? []),
-        sponsors: await getEntries(
-          (event.data.sponsors ?? []).map((s) => s.slug),
-        ),
-        partners: await getEntries(event.data.partners ?? []),
-      },
-    })),
+    allEvents.map(async (event) => {
+      const relatedEvents = allEvents
+        .filter(
+          (e) =>
+            e.id !== event.id &&
+            e.data.city === event.data.city &&
+            (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,
+          subPages: await getEventSubPagesCollection(event),
+          speakers: await getEntries(event.data.speakers ?? []),
+          coOrganizers: await getEntries(event.data.coOrganizers ?? []),
+          sponsors: await getEntries(
+            (event.data.sponsors ?? []).map((s) => s.slug),
+          ),
+          partners: await getEntries(event.data.partners ?? []),
+        },
+      };
+    }),
   );
 }
 
 const {
   event,
+  relatedEvents,
   speakers,
   coOrganizers: _coOrganizers,
   sponsors,
@@ -632,6 +648,8 @@ const ctaEventMetadata = {
     </a>
   </div>
 
+  <RelatedEvents currentEvent={event} relatedEvents={relatedEvents} />
+
   <div class="py-8 md:py-12">
     <JoinTheCommunity />
   </div>