add event photos hackathon, better random grid

allthingsweb-dev · Oct 6, 2024 · cd4ce64 · cd4ce64
1 parent 47243c9
commit cd4ce64
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/website/app/routes/2024-10-05-hackathon-at-sentry.tsx b/website/app/routes/2024-10-05-hackathon-at-sentry.tsx
@@ -1,8 +1,9 @@
 import { SentryLogoIcon } from '~/modules/components/ui/icons';
-import { EventDetailsPage } from '~/modules/event-details/components';
+import { EventDetailsPage, PhotosSection } from '~/modules/event-details/components';
 import { Section } from '~/modules/components/ui/section';
 import { meta } from '~/modules/event-details/meta';
 import { eventDetailsLoader } from '~/modules/event-details/loader.sever';
+import { useLoaderData } from '@remix-run/react';
 
 export { meta };
 
@@ -11,15 +12,17 @@ export function loader() {
 }
 
 export default function Component() {
+  const { event } = useLoaderData<typeof loader>();
   return (
     <EventDetailsPage>
-      <Section variant="big">
+      {!!event.photos && <PhotosSection background="default" photos={event.photos} />}
+      <Section variant="big" background="muted">
         <Schedule />
       </Section>
-      <Section variant="big" background="muted">
+      <Section variant="big">
         <MoreInformation />
       </Section>
-      <Section variant="big">
+      <Section variant="big" background="muted">
         <Sponsor />
       </Section>
     </EventDetailsPage>

diff --git a/website/app/routes/_index.tsx b/website/app/routes/_index.tsx
@@ -34,15 +34,28 @@ export async function loader() {
   const [events, pastEvents] = await Promise.all([getUpcomingEvents(), getPastEvents()]);
   const highlightEvent = events.find((event) => event.highlightOnLandingPage);
   const remainingEvents = events.filter((event) => event.id !== highlightEvent?.id);
-  const photos = pastEvents
-    .flatMap((event) => event.photos)
-    .sort(() => 0.5 - Math.random())
-    .slice(0, 30);
+
+  let eventPhotos: string[] = [];
+  let loopCounter = 0;
+  // Get even number of photos from each event
+  while(eventPhotos.length < 30) {
+    const shuffledPastEvents = pastEvents.toSorted(() => Math.random() - 0.5);
+    for (const event of shuffledPastEvents) {
+      if (event.photos[loopCounter]) {
+        eventPhotos.push(event.photos[loopCounter]);
+      }
+      if (eventPhotos.length >= 30) {
+        break;
+      }
+    }
+    loopCounter++;
+  }
+
   return {
     highlightEvent,
     remainingEvents,
     pastEvents,
-    postEventImages: photos,
+    postEventImages: eventPhotos,
   };
 }
 
@@ -124,7 +137,7 @@ export default function Component() {
 function LandingHero({ images }: { images: string[] }) {
   return (
     <section className="w-full h-[80vh] overflow-hidden grid [&>*]:col-[1] [&>*]:row-[1]">
-      <div className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-1">
+      <div className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-1">
         {images.map((imageSrc) => (
           <img
             key={imageSrc}
@@ -133,7 +146,7 @@ function LandingHero({ images }: { images: string[] }) {
             aria-hidden="true"
             width={400}
             height={400}
-            className="object-cover"
+            className="w-full object-cover"
           />
         ))}
       </div>