From d7e47b4f757b41ff61be0aeea2dc1fe44bdd02a2 Mon Sep 17 00:00:00 2001 From: Natalie Date: Fri, 16 Feb 2024 14:54:24 -0700 Subject: [PATCH 1/6] Connect past events to contentful API --- components/PastEventImage.jsx | 26 ++++++++++---- components/PastEventsCarousel.jsx | 56 +++++++++++++++++++------------ pages/events/index.js | 8 +++-- 3 files changed, 60 insertions(+), 30 deletions(-) diff --git a/components/PastEventImage.jsx b/components/PastEventImage.jsx index e041e2c..7b8a89c 100644 --- a/components/PastEventImage.jsx +++ b/components/PastEventImage.jsx @@ -1,14 +1,28 @@ import Image from 'next/image'; -const PAST_EVENTS_IMAGE = 'w-65 h-65 p-2 md:w-60 md:h-60 lg:w-92 lg:h-92 mx-1 lg:mx-3 rounded-3xl drop-shadow-md relative'; +const PAST_EVENTS_IMAGE = + 'w-65 h-65 p-2 md:w-60 md:h-60 lg:w-92 lg:h-92 mx-1 lg:mx-3 rounded-3xl drop-shadow-md relative'; -const PastEventImage = ({img, name}) => { +// const PastEventImage = ({img, name}) => { +// return ( +//
+// {name} +//
+// ); +// }; +const PastEventImage = ({ image, eventName }) => { return (
- {name}
); diff --git a/components/PastEventsCarousel.jsx b/components/PastEventsCarousel.jsx index ff07eb0..4247035 100644 --- a/components/PastEventsCarousel.jsx +++ b/components/PastEventsCarousel.jsx @@ -16,7 +16,8 @@ const ARROW_INIT = { left: 'swiper-button-prev', right: 'swiper-button-next' }; const LEFT_NAVIGATION_ARROW = styles.swiperButtonPrev; const RIGHT_NAVIGATION_ARROW = styles.swiperButtonNext; -const TILE_CONTAINER = 'flex flex-col xl:h-[650px] lg:h-[820px] md:flex-column md:h-[820px] h-[930px] rounded-[30px] p-[1.875rem]'; +const TILE_CONTAINER = + 'flex flex-col xl:h-[650px] lg:h-[820px] md:flex-column md:h-[820px] h-[930px] rounded-[30px] p-[1.875rem]'; const TILE_IMAGE_CONTAINER = 'flex flex-row justify-center md:flex-row md:justify-around lg:justify-center relative'; const TILE_TEXT_CONTAINER = 'basis-3/5 md:basis-3/5 lg:basis-3/5 text-center md:py-10 '; const TILE_TEXT_SPACING = 'lg:space-y-10 py-5'; @@ -27,59 +28,72 @@ const PAST_EVENTS_HEADER = 'flex flex-row'; const LONG_SQUIGGLY_LINE_SVG = '/svgs/events/long_events_squiggly_line.svg'; -const PastEventsTile = ({ event }) => ( +const PastEventsTile = ({ pastEvent }) => ( -
-

{event.name}

+
+

{pastEvent.eventName}

- + {/* */} +
-
- +
+
-
- +
+
-

{event.name}

+

+ {pastEvent.eventName} +

-

{event.blurb}

+

+ {pastEvent.description.content[0].content[0].value} +

); -const PastEventsCarousel = () => { +const PastEventsCarousel = ({ pastEvent }) => { return (
- Past Events + + Past Events +
- Here is an archive of some of the cool events we have held in the past! Whether you are interested in joining our team or attending one of our events,{' '} - please feel free to reach out to us! + + Here is an archive of some of the cool events we have held in the past! Whether you are interested in joining + our team or attending one of our events,{' '} + + please feel free to reach out to us! +
- {PAST_EVENTS.map((event) => ( - - + {/* {PAST_EVENTS.map((event) => ( */} + {pastEvent.map((pastEvent) => ( + // + // + + ))}
-
- +
+
); }; - export default PastEventsCarousel; diff --git a/pages/events/index.js b/pages/events/index.js index 9728f3f..d08d47f 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -6,10 +6,12 @@ import { fetchContent } from '../../api/apiRoot'; export async function getStaticProps() { const event = await fetchContent('upcomingEvents'); - return { props: { event } }; + const pastEvent = await fetchContent('pastEvents'); + console.log(pastEvent); + return { props: { event, pastEvent } }; } -const Events = ({ event }) => { +const Events = ({ event, pastEvent }) => { // const placeholder = 'Events page'; return ( //
@@ -27,7 +29,7 @@ const Events = ({ event }) => { - +
); }; From fef303d4b64e992384d0055dbbb7c4912196fe55 Mon Sep 17 00:00:00 2001 From: Natalie Date: Fri, 16 Feb 2024 16:45:20 -0700 Subject: [PATCH 2/6] Connect images from contentful based on event --- components/PastEventImage.jsx | 36 +++++++++++++++++++++++-------- components/PastEventsCarousel.jsx | 11 +++++----- 2 files changed, 33 insertions(+), 14 deletions(-) diff --git a/components/PastEventImage.jsx b/components/PastEventImage.jsx index 7b8a89c..0c68748 100644 --- a/components/PastEventImage.jsx +++ b/components/PastEventImage.jsx @@ -14,16 +14,34 @@ const PAST_EVENTS_IMAGE = //
// ); // }; -const PastEventImage = ({ image, eventName }) => { +// const PastEventImage = ({ images }) => { +// console.log(images); +// return ( +//
+// {images.fields.title} +//
+// ); +// }; +const PastEventImage = ({ images }) => { return ( -
- {eventName} +
+ {images.map((image, index) => ( +
+ {image.fields.title} +
+ ))}
); }; diff --git a/components/PastEventsCarousel.jsx b/components/PastEventsCarousel.jsx index 4247035..ad76f52 100644 --- a/components/PastEventsCarousel.jsx +++ b/components/PastEventsCarousel.jsx @@ -36,14 +36,14 @@ const PastEventsTile = ({ pastEvent }) => (
{/* */} - +
-
- + {/*
+
- -
+ +
*/}

@@ -59,6 +59,7 @@ const PastEventsTile = ({ pastEvent }) => ( ); const PastEventsCarousel = ({ pastEvent }) => { + console.log(pastEvent); return (
From 73eae339509578a21db5b0788c62b44ee0be52bc Mon Sep 17 00:00:00 2001 From: Natalie Date: Fri, 16 Feb 2024 19:42:21 -0700 Subject: [PATCH 3/6] Add responsiveness to images --- components/PastEventImage.jsx | 60 +++++++++++++++++++++++-------- components/PastEventsCarousel.jsx | 11 ------ pages/events/index.js | 1 - 3 files changed, 46 insertions(+), 26 deletions(-) diff --git a/components/PastEventImage.jsx b/components/PastEventImage.jsx index 0c68748..4acf37d 100644 --- a/components/PastEventImage.jsx +++ b/components/PastEventImage.jsx @@ -1,5 +1,7 @@ import Image from 'next/image'; +// const PAST_EVENTS_IMAGE = +// 'w-65 h-65 p-2 md:w-60 md:h-60 lg:w-92 lg:h-92 mx-1 lg:mx-3 rounded-3xl drop-shadow-md relative'; const PAST_EVENTS_IMAGE = 'w-65 h-65 p-2 md:w-60 md:h-60 lg:w-92 lg:h-92 mx-1 lg:mx-3 rounded-3xl drop-shadow-md relative'; @@ -14,34 +16,64 @@ const PAST_EVENTS_IMAGE = //
// ); // }; + // const PastEventImage = ({ images }) => { -// console.log(images); // return ( -//
-// {images.fields.title} +//
+// {images.map((image, index) => ( +//
+// {image.fields.title} +//
+// ))} //
// ); // }; + const PastEventImage = ({ images }) => { return ( -
- {images.map((image, index) => ( -
+
+ {/* Display only the first image on small screens */} +
+ {images[0].fields.title} +
+ {/* Display only the first two images on medium screens */} +
+ {images.slice(0, 2).map((image, index) => ( + {image.fields.title} + ))} +
+ {/* Display all images on large screens */} +
+ {images.map((image, index) => ( {image.fields.title} -
- ))} + ))} +
); }; diff --git a/components/PastEventsCarousel.jsx b/components/PastEventsCarousel.jsx index ad76f52..45e8e25 100644 --- a/components/PastEventsCarousel.jsx +++ b/components/PastEventsCarousel.jsx @@ -35,15 +35,8 @@ const PastEventsTile = ({ pastEvent }) => (
- {/* */}
- {/*
- -
-
- -
*/}

@@ -59,7 +52,6 @@ const PastEventsTile = ({ pastEvent }) => ( ); const PastEventsCarousel = ({ pastEvent }) => { - console.log(pastEvent); return (
@@ -78,10 +70,7 @@ const PastEventsCarousel = ({ pastEvent }) => {
- {/* {PAST_EVENTS.map((event) => ( */} {pastEvent.map((pastEvent) => ( - // - // diff --git a/pages/events/index.js b/pages/events/index.js index d08d47f..eb557b6 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -7,7 +7,6 @@ import { fetchContent } from '../../api/apiRoot'; export async function getStaticProps() { const event = await fetchContent('upcomingEvents'); const pastEvent = await fetchContent('pastEvents'); - console.log(pastEvent); return { props: { event, pastEvent } }; } From 41de0b7df15457636547257ac5a721145460cfb4 Mon Sep 17 00:00:00 2001 From: Natalie Date: Sat, 17 Feb 2024 10:17:56 -0700 Subject: [PATCH 4/6] Fix responsiveness to images --- components/PastEventImage.jsx | 38 +++---------------------------- components/PastEventsCarousel.jsx | 1 - pages/events/index.js | 6 +---- 3 files changed, 4 insertions(+), 41 deletions(-) diff --git a/components/PastEventImage.jsx b/components/PastEventImage.jsx index 4acf37d..117cf31 100644 --- a/components/PastEventImage.jsx +++ b/components/PastEventImage.jsx @@ -1,39 +1,7 @@ import Image from 'next/image'; -// const PAST_EVENTS_IMAGE = -// 'w-65 h-65 p-2 md:w-60 md:h-60 lg:w-92 lg:h-92 mx-1 lg:mx-3 rounded-3xl drop-shadow-md relative'; const PAST_EVENTS_IMAGE = - 'w-65 h-65 p-2 md:w-60 md:h-60 lg:w-92 lg:h-92 mx-1 lg:mx-3 rounded-3xl drop-shadow-md relative'; - -// const PastEventImage = ({img, name}) => { -// return ( -//
-// {name} -//
-// ); -// }; - -// const PastEventImage = ({ images }) => { -// return ( -//
-// {images.map((image, index) => ( -//
-// {image.fields.title} -//
-// ))} -//
-// ); -// }; + 'w-65 h-65 p-2 md:w-60 md:h-60 md:mx-4 lg:w-92 lg:h-92 lg:w-1/3 lg:mx-1 rounded-3xl drop-shadow-md relative'; const PastEventImage = ({ images }) => { return ( @@ -53,7 +21,7 @@ const PastEventImage = ({ images }) => { {images.slice(0, 2).map((image, index) => ( {image.fields.title} { {images.map((image, index) => ( {image.fields.title} { - // const placeholder = 'Events page'; return ( - //
{/* For each section here, try to do it as a component then just import here so it's easier to work on. Below are just sample names, if you think it should use a better name, feel free to change it - - - +

We`re currently building the Events Page so stay tuned! 👀 From 4ed7c33540507ef38a37c28ce033141c926e8a94 Mon Sep 17 00:00:00 2001 From: Natalie Date: Sat, 17 Feb 2024 10:20:07 -0700 Subject: [PATCH 5/6] Clean up code --- pages/events/index.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/pages/events/index.js b/pages/events/index.js index ac4e1d6..1696a95 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -13,14 +13,6 @@ export async function getStaticProps() { const Events = ({ event, pastEvent }) => { return (
- {/* For each section here, try to do it as a component then just import here so it's easier to work on. - Below are just sample names, if you think it should use a better name, feel free to change it - - - -

- We`re currently building the Events Page so stay tuned! 👀 -

*/} From cb8e197f5abf43bb3c95c717763020c10c14462f Mon Sep 17 00:00:00 2001 From: justin-phxm <113923596+justin-phxm@users.noreply.github.com> Date: Sun, 18 Feb 2024 10:51:25 -0700 Subject: [PATCH 6/6] suggested changes for PR --- components/PastEventImage.jsx | 48 ++++++++++++++--------------------- utils/blurImage.js | 3 ++- 2 files changed, 21 insertions(+), 30 deletions(-) diff --git a/components/PastEventImage.jsx b/components/PastEventImage.jsx index 117cf31..61d06ff 100644 --- a/components/PastEventImage.jsx +++ b/components/PastEventImage.jsx @@ -1,46 +1,36 @@ import Image from 'next/image'; - +import { rgbDataURL } from '../utils/blurImage'; const PAST_EVENTS_IMAGE = - 'w-65 h-65 p-2 md:w-60 md:h-60 md:mx-4 lg:w-92 lg:h-92 lg:w-1/3 lg:mx-1 rounded-3xl drop-shadow-md relative'; + 'w-65 h-65 md:w-60 md:h-60 md:mx-4 lg:w-92 lg:h-92 lg:w-1/3 lg:mx-1 object-cover rounded-3xl drop-shadow-md relative'; +const PastEventImageComponent = ({ eventImages }) => { + return eventImages.map((image, index) => ( + {image.fields.title} + )); +}; const PastEventImage = ({ images }) => { return (
{/* Display only the first image on small screens */}
- {images[0].fields.title} +
{/* Display only the first two images on medium screens */}
- {images.slice(0, 2).map((image, index) => ( - {image.fields.title} - ))} +
{/* Display all images on large screens */}
- {images.map((image, index) => ( - {image.fields.title} - ))} +
); diff --git a/utils/blurImage.js b/utils/blurImage.js index bf34e47..a4272c2 100644 --- a/utils/blurImage.js +++ b/utils/blurImage.js @@ -6,7 +6,8 @@ const triplet = (e1, e2, e3) => keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) + keyStr.charAt(e3 & 63); -export const rgbDataURL = (r, g, b) => +// Color defaults to grey +export const rgbDataURL = (r = 192, g = 192, b = 192) => `data:image/gif;base64,R0lGODlhAQABAPAA${ triplet(0, r, g) + triplet(b, 255, 255) }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`;