Merge pull request #141 from BUGS-NYU/updated

Events & Event Pages: updated data

src/components/EventsList.tsx

@@ -25,15 +25,19 @@ const EventsList = ({ events, count }: EventsListProps) => {
   return (
     <>
       <div className='grid gap-12 grid-cols-1 sm:grid-cols-2'>
-        {events.map((event) => (
-          <Card shadow='none' link={!event.imgsList ? undefined : `/event?index=${event.eventIndex}`} key={event.title}>
+        {events.map((event) => {
+          /* If imgsList or shortDescription is defined, this event will have its own page */
+          const hasOwnPage = event.imgsList || event.shortDescription;
+
+          return <Card shadow='none' 
+              link={hasOwnPage ? `/event?index=${event.eventIndex}` : undefined} 
+              key={event.title}>
             <div className='-m-8 mb-0'>
               <img className='w-full h-48 rounded-t-lg object-cover' src={event.cover} alt='' />
             </div>
             <div className='flex justify-between items-center p-2 pt-3'> 
               <h3 className='text-xl font-bold'>{event.title}</h3> 
-              {!event.imgsList ? null :
-              <div className='group-hover:bg-neutral-600 border-2 px-3 py-2 text-lg rounded-md transition-colors'> View </div>}
+              {hasOwnPage ? <div className='group-hover:bg-neutral-600 border-2 px-3 py-2 text-lg rounded-md transition-colors'> View </div> : null}
             </div>
             <ul className='text-zinc-600 dark:text-zinc-400'>
               <li className='my-2 flex gap-x-2'>
@@ -47,7 +51,7 @@ const EventsList = ({ events, count }: EventsListProps) => {
             </ul>
             <p className='mt-4'>{event.description}</p>
           </Card>
-        ))}
+        })}
       </div>
     </>
   );

src/components/Slider.tsx

@@ -3,9 +3,10 @@ import { NavArrowLeft, NavArrowRight } from 'iconoir-react';
 
 type SliderProps = {
     children: React.ReactNode[];
+    elementStyle: Object;
 }
 
-function Slider({ children }: SliderProps) {
+function Slider({ children, elementStyle }: SliderProps) {
     const [sliderIndex, setSliderIndex] = useState(0);
 
     return (<div className="overflow-hidden relative rounded-xl">
@@ -15,7 +16,7 @@ function Slider({ children }: SliderProps) {
                 transform: `translateX(-${sliderIndex * 100}%)`,
             }}>
             {children.map((element, elementIndex) => 
-                <div className="flex-none w-full bg-orange-900" key={elementIndex}>
+                <div className={`flex-none w-full bg-orange-900 ${elementStyle}`} key={elementIndex}>
                     {element}
                 </div>
             )}

src/data/events.ts

@@ -1,19 +1,34 @@
+export interface Link {
+  name: string;
+  url: string;
+}
+
 export interface Event {
   title: string;
   description: string;
+  shortDescription?: string;
+  links?: Link[];
   date: Date;
   startTime: string;
   endTime: string;
   location: string;
   cover: string;
   imgsList?: string[];
+  imgsText?: string[];
   eventIndex?: number;
 }
 
 export const EVENTS: Event[] = [
   {
     title: 'BUGS x Girls Who Code SQL Workshop',
     description: 'learn about the basics of SQL query and create an employee check-in system! free food, drinks, and database knowledge',
+    shortDescription: "BUGS collaborated with Girls Who Code to host a workshop on SQL (Structure Query Language). Girls Who Code led the workshop as everyone created their own mini queries with CRUD operations. SQL is a language used for relational database management. It helps with data manipulation, data definition, and data control. Everyone enjoyed buns from Mei Lai Wah.",
+    links: [
+      {
+        name: "Slides",
+        url: "https://docs.google.com/presentation/d/1QWiyGfHQuIhohpCukL8Fi_YWNK4MhjS-5OCRb_1eQxo/edit?usp=sharing"
+      }
+    ],
     date: new Date('April 19, 2024'),
     startTime: '5 PM',
     endTime: '6:30 PM',
@@ -23,6 +38,13 @@ export const EVENTS: Event[] = [
   {
     title: 'BUGS x Google',
     description: 'learn about open source security and AI from a Google staff engineer!',
+    shortDescription: "Johnathon Metzam, a security engineer at Google shared his insights on open-source security and applying AI to security. He also shared some of his contributions to FuzzBench, a service that evaluates fuzz testing tools on an application-wide scale.",
+    links: [
+      {
+        name: "Github",
+        url: "https://github.com/jonathanmetzman"
+      }
+    ],
     date: new Date('March 19, 2024'),
     startTime: '4 PM',
     endTime: '6 PM',
@@ -35,19 +57,68 @@ export const EVENTS: Event[] = [
     '/images/events-pictures/google/5.jpg',
     '/images/events-pictures/google/6.jpg'
     ],
+    imgsText: ["Johnathon Metzam standing to the slide of projector with words 'Grad School on a Curve'. ",
+      "Johnathon Metzam reaching out to slide that says 'Format Aware (blackbox)'. ",
+      "Candid photo of Johnathon Metzam with hands together. ",
+      "Candid photo of crowd sitting, listening to Johnathon Metzam. ",
+      "Candid photo of crowd with Johnathon Metzam. ",
+      "Candid photo of crowd sitting, listening to Johnathon Metzam. ",
+      ],
   },
   {
     title: 'BUGS Kickoff Event',
     description: 'Get to know your new eBoard through their favorite open source tools!',
+    shortDescription: `This Spring, a new eboard was elected for bugs. Each new member presented their favorite open-source project. 
+      Abigail Zhou is the new president of BUGS and studies computer science at CAS. Her favorite open-source project is docker, which helps containerize your applications. 
+      Leading BUGS events, Alex Ying is BUGS's new head event coordinator. He studies computer science at Tandon. his favorite open-source project is Dolphin, which is a Wii + Gamecube emulator. it has high compatibility, original hardware supported, and 97.1% of games playable to completion. 
+      Alex Jia embraces two roles as the developer and event coordinator for BUGS. He studies computer science and mathematics at CAS. His favorite open source project is ps.ja which is a javascript library for creating coding, with a focus on making coding accessible and inclusive for artists and designers. 
+      Riley Dou, BUGS communication and photographer, studies computer science at Tandon. redis is her favorite open-source project, which is an in-memory key-value database, cache, and messenger. 
+      Sewon Kim studies computer science at CAS and helped upgrade the BUGS website. He is the BUGS website designer. he enjoys the open-source project react, which is a front-end component-based javascript framework. it has a modern learning curve and was his first web framework. 
+      Helping organize BUGS events, Phil Chen is the event coordinator for BUGS. He studies computer science at CAS. Fawkes is his favorite open-source project which is used as a privacy tool, for facial “cloaking”. It helps protect your image online and it is easy to use. 
+      Elaine Zou is BUGS's treasurer, and she studies computer science at CAS. Her favorite open-source project is GIT, which has helped to maintain the BUGS website. GIT helps with tracking changes in code and collaboration in creating code. 
+      Lawrence Gu helps keep the CS wiki updated as BUGS's CS wiki writer. He is a math and computer science major at CAS. COQ, which is a formal proof management system is his favorite open-source project. 
+      Faith Winford is the new website maintainer for BUGS. She studies computer science and philosophy at CAS. TensorFlow, which is an open-source machine learning framework developed by Google Brain for building and training neural networks, is her favorite open-source project. 
+      Isha Gopal is the graphic designer for BUGS. She is studying computer science at CAS. Unfortunately, she could not attend the kickoff event.
+      Afterwards, everyone enjoyed buns from Mei Lai Wah and boba from Wanpo.`,
     date: new Date('February 9, 2024'),
     startTime: '5 PM',
     endTime: '6 PM',
     location: 'WWH Room 101',
     cover: '/images/events/bugs.jpg',
+    imgsList :['/images/events-pictures/kickoff/1.jpg',
+      '/images/events-pictures/kickoff/2.jpg',
+      '/images/events-pictures/kickoff/3.jpg',
+      '/images/events-pictures/kickoff/4.jpg',
+      '/images/events-pictures/kickoff/5.jpg',
+      '/images/events-pictures/kickoff/6.jpg',
+      '/images/events-pictures/kickoff/7.jpg',
+      '/images/events-pictures/kickoff/8.jpg',
+      '/images/events-pictures/kickoff/9.jpg',
+      '/images/events-pictures/kickoff/10.jpg',
+      '/images/events-pictures/kickoff/11.jpg',
+      ],
+    imgsText :["Abigal Zhou standing in front of 'meet the eboard' slide",
+    "Alex Ying standing in front of 'meet the eboard' slide",
+    "Alex Ying standing infront of slide about open source project 'Dolphin'",
+    "Lawrence Gu standing in front of slide about open source project 'COQ'",
+    "Elaine Zou standing in front of slide about open source project 'GIT'",
+    "Phil Chen holds a peace sign in front of slide about open source project 'Fawkes'",
+    "Faith Winford standing in front of description slide about her name, major and position",
+    "Candid photo of audience looking at 'meet the eboard' presentation",
+    "Alex Ying helping serve food out to memebers of BUGS",
+    "Mei Lai Wah buns",
+    "Multicolor lids of boba cups from Wanpo",
+      ], 
   },
   {
     title: 'BUGS x Anubis',
-    description: 'meet with the founder of Anubis, John Cuniff, to learn more about the role of OpenSource!',
+    description: 'Meet with the founder of Anubis, John Cuniff, to learn more about the role of Open Source and container-oriented technology!',
+    links: [
+      {
+        name: "AnubisLMS",
+        url: "https://github.com/AnubisLMS"
+      }
+    ],
     date: new Date('February 23, 2024'),
     startTime: '5 PM',
     endTime: '6:30 PM',
@@ -60,7 +131,15 @@ export const EVENTS: Event[] = [
     '/images/events-pictures/anubis/5.jpg',
     '/images/events-pictures/anubis/6.jpg',
     '/images/events-pictures/anubis/7.jpg'
-    ]
+    ],
+    imgsText: ['John Cuniff presenting about Anubis',
+    'John Cuniff giving a presentation up front',
+    'The audience for the presentation',
+    'The audience for the presentation',
+    'The dumplings from Vanessa\'s Dumplings',
+    'Group of people interacting after the presentation',
+    'Aneesh.'
+    ],
   },
   {
     title: 'Tech Fest',
@@ -70,6 +149,14 @@ export const EVENTS: Event[] = [
     endTime: '7 PM',
     location: 'Kimmel Center, Eisner & Lubin Auditorium',
     cover: '/images/events/techfest1.jpg',
+    imgsList: ['/images/events-pictures/techfest/1.jpg',
+      '/images/events-pictures/techfest/2.jpg',
+      '/images/events-pictures/techfest/3.jpg',
+    ],
+    imgsText: ["BUGS Eboard members standing in front of the BUGS table. From left to right: Alex Ying, Abigal Zhou, Elaine Zou, Alex Jia, Sewon Kim.",
+      "BUGS Eboard members standing in front of the BUGS table. From left to right: Alex Ying, Abigal Zhou, Elaine Zou, Alex Jia, Sewon Kim.",
+      "Candid Photo of eboard members talking to people in front of BUGS table.",
+    ],
   },
   {
     title: 'Meet and Greet',

src/data/team.ts

@@ -7,7 +7,7 @@ export interface TeamMember {
 
 export const TEAM: TeamMember[] = [
   {
-    name: 'Abigal Zhou',
+    name: 'Abigail Zhou',
     description:
       'Abigail is a junior majoring in CS at CAS with an interest in operating systems and machine learning. She’s currently exploring the fintech space and enjoys trying new restaurants and running in her free time!',
     profileImg: '/images/team/abigal.jpg',

src/pages/event.tsx

@@ -17,7 +17,9 @@ const EventsPage: React.FC<PageProps> = ({ location }) => {
     // get event data
     const event = EVENTS[index];
 
-    if (!event.imgsList) {
+    /* If imgsList or shortDescription is defined, this event will have its own page */
+    const hasOwnPage = event.imgsList || event.shortDescription;
+    if (!hasOwnPage) {
         return <Layout> <h1> Error: Invalid event - images not found </h1> </Layout>;
     }
 
@@ -37,16 +39,30 @@ const EventsPage: React.FC<PageProps> = ({ location }) => {
                     </li>
                 </ul>
 
-                <p className="mb-5"> {event.description} </p>
+                {/* Description */}
+                <p className="mb-5"> {event.shortDescription ?? event.description} </p>
 
-                <Slider>
+                {/* Links */}
+                {event.links && event.links.length > 0 ?
+                <ul className="mb-4">
+                    {event.links.map((link, linkIndex) => 
+                    <li key={linkIndex}>
+                        - <a href={link.url} className='text-lg text-blue-500 hover:underline'> {link.name} </a>
+                    </li>)}
+                </ul> : null}
+
+                {/* Images */}
+                {event.imgsList && event.imgsList.length > 0 ? 
+                <Slider elementStyle={"flex items-center overflow-hidden h-44 sm:h-96 md:h-30rem"}>
                     {event.imgsList.map((imgSrc, imgIndex) => 
                     <img
                         src={imgSrc}
+                        alt={event.imgsText ? event.imgsText[imgIndex] ?? "" : ""}
+                        title={event.imgsText ? event.imgsText[imgIndex] ?? "" : ""}
                         width="100%" height="auto"
                         key={imgIndex}
                     />)}
-                </Slider>
+                </Slider> : null}
             </div>
         </Layout>
     );

tailwind.config.js

@@ -7,6 +7,9 @@ module.exports = {
       transitionProperty: {
         height: 'height',
       },
+      height: {
+        "30rem": "30rem"
+      }
     },
   },
   plugins: [],