Merge Changes from 12/10/2023

.github/workflows/update.yml

@@ -10,7 +10,7 @@ on:
 
 jobs:
   update:
-    if: github.event.pull_request.merged == true
+    if: github.event.pull_request.merged == true || github.event_name == 'workflow_dispatch'
     runs-on: ubuntu-latest
     steps:
       - name: Send HTTP request

app/AboutUs/page.js

@@ -42,7 +42,7 @@ export default function AboutUs() {
 			<Header size='sm' imageClass={styles.headerOne} gradient={true}>
 				<div className='container restrictHeader' style={{color : '#fff'}}>
 					<h1 style={{fontWeight : 900, marginBottom : 20}}>
-						About Us
+						ABOUT US
 					</h1>
 				</div>
 			</Header>

app/Contact/page.js

@@ -7,6 +7,8 @@ import Header from '@components/Header/Header'
 import SubheaderShape from '@components/SubheaderShape/SubheaderShape'
 import Footer from '@components/Footer/Footer'
 
+import SponsorBlock from '@components/SponsorBlock/SponsorBlock'
+
 import {useRef, useState} from 'react';
 import Link from 'next/link'
 
@@ -246,21 +248,20 @@ export default function Contact() {
 	return (
 		<div>
 			<Navbar/>
-			<Header size='sm' imageClass={styles.headerOne} gradient={true}>
+			<Header size='md' imageClass={styles.headerOne} gradient={true} masked={true} divider={true}>
 				<div className='container restrictHeader' style={{color : '#fff'}}>
 					<h1 style={{fontWeight : 900, marginBottom : 20}}>
-						Contact Us
+						CONTACT US
 					</h1>
 				</div>
 			</Header>
-			<SubheaderShape size='sm'/>
 			<div className='container' style={{display: 'flex', flexDirection : 'column', gap : 20, paddingTop : 40, paddingBottom : 40, textAlign : 'justify', backgroundColor : '#fdfdfd'}}>
 				<div
 					className={styles.contactBlock}
 					style={{
 						minHeight : 500,
 						outline : '1px solid #000',
-						marginTop : 80,
+						marginTop : 0,
 						marginBottom : 80
 					}}
 				>
@@ -361,6 +362,7 @@ export default function Contact() {
 					</div>
 				</div>
 			</div>
+			<SponsorBlock style={{marginBottom : -80, paddingBottom : 180, backgroundColor : '#000'}}/>
 			<Footer/>
 		</div>
 	)

app/Events/page.js

@@ -126,7 +126,7 @@ export default function Events() {
 
 				</div>
 			</div>
-			<div className='container'>
+			{/* <div className='container'>
 				<Divider
 					color={'#000'}
 					style={{
@@ -141,7 +141,7 @@ export default function Events() {
 						marginBottom : 20
 					}}
 				/>
-			</div>
+			</div> */}
 			<div className='container' style={{display: 'flex', flexDirection : 'column', gap : 20, paddingTop : 40, paddingBottom : 120, textAlign : 'justify'}}>
 				<PlaylistPlayer/>
 			</div>
@@ -176,7 +176,7 @@ export default function Events() {
 					</iframe>
 				</div>
 				<h3 style={{textAlign : 'left'}}>
-					About XRP
+					ABOUT XRP
 				</h3>
 				<p>
 					The XRP (Experiential Robotics Platform) [beta], started by WPI and DEKA Research & Development Corp., aims to level the STEM playing field globally and create a future generation of STEM innovators and technology leaders.

app/Robots/[robot]/MediaContainer.js

@@ -0,0 +1,77 @@
+import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
+import { Carousel } from 'react-responsive-carousel';
+
+
+function getYoutubeVideoIDFromURL(url){
+    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+    var match = url.match(regExp);
+    return (match&&match[7].length==11)? match[7] : false;
+}
+
+
+const MediaContainer = ({robotItem}) => {
+    return (
+        <div
+            style={{
+                width : '100%',
+                height : 600,
+                display : 'flex',
+                flexDirection : 'column',
+                gap : 10
+            }}
+        >
+            <div
+                style={{
+                    position: 'relative',
+                    backgroundColor : '#ddd',
+                    height : '100%',
+                    width : '100%',
+                    display : 'flex',
+                    flex : 1,
+                    flexGrow : 1
+                }}
+            >
+                {
+                    (robotItem.media) && <Carousel
+                    dynamicHeight={false}
+                        style={{
+                            position: 'relative',
+                            display: 'flex',
+                            flex : 1,
+                            width : '100%',
+                            height : '100%'
+                        }}
+                    >
+                        {
+                            Object.entries(robotItem.media).map(([mediaID, mediaURL]) => {
+
+                                // TODO
+                                // Currently we handle Youtube Videos
+                                // In the future, the carousel needs to handle images and 3D Models
+
+                                const embedVideoID = getYoutubeVideoIDFromURL(mediaURL)
+
+                                return <iframe key={mediaID} width="100%" height="100%" style={{maxWidth: '100%', overflowX : 'hidden', border : 'none'}}
+                                    src={`https://www.youtube.com/embed/${embedVideoID}?autoplay=0&mute=1&loop=0`}
+                                />
+                            })
+                        }
+                    </Carousel>
+                }
+
+
+            </div>
+            <div
+                style={{
+                    backgroundColor : '#ddd',
+                    width : '100%',
+                    height : 140
+                }}
+            >
+
+            </div>
+        </div>
+    )
+}
+
+export default MediaContainer;

app/Robots/[robot]/page.js

@@ -1,21 +1,31 @@
+"use client"
 import styles from './page.module.css'
+import { useState, useEffect } from 'react'
 
 import Navbar from '@components/Navbar/Navbar'
 import Footer from '@components/Footer/Footer'
 import Header from '@components/Header/Header'
 import SubheaderShape from '@components/SubheaderShape/SubheaderShape'
+import MediaContainer from './MediaContainer'
 import { getRobotData } from '../page'
 import Link from 'next/link'
+import { ButtonLink } from '@components/Button/Button'
 
 import SponsorBlock from '@components/SponsorBlock/SponsorBlock'
 
-export async function generateStaticParams() {
-	const robotData = await getRobotData();
+// export async function generateStaticParams() {
+// 	const robotData = await getRobotData();
 
-	return robotData.map((robotItem) => ({
-	  	id: robotItem.name.replace(/ /g, ""),
-	}))
-}
+// 	return robotData.map((robotItem) => ({
+// 	  	id: robotItem.name.replace(/ /g, ""),
+// 	}))
+// }
+
+// TODO
+// Add {<- previous robot} {next robot ->} buttons to bottom right of page
+
+// TODO
+// Squeeze BACK button in at top of page to return to grid view
 
 const EventItem = ({eventData}) => {
 	return (
@@ -34,56 +44,71 @@ const EventItem = ({eventData}) => {
 	)
 }
 
-export default async function Robot({params}) {
+
+export default function Robot({params}) {
 
 	/* 
 		At the moment, there is no way to pass the robots data fetched from the /Robots route down to this dynamic child prop- just the ID for the slug.
 		Until then, we have to do this dirty dirty re-fetching
 		I am under the impression that NextJS and react de-dupe and cache this duplicated requests, so hopefully we're only really only sending out one request
 	*/
 
-	const robotData = await getRobotData();
+	const [robotData, setRobotData] = useState(null);
+
+	useEffect(() => {
+
+		async function getRobotDataWrapper() {
+			const robotData = await getRobotData();
+			setRobotData(robotData)
+		}
+
+		getRobotDataWrapper();
+
+	}, [])
+
+	if (robotData == null){
+		return <span>
+			Loading
+		</span>
+	}
 
 	const robotItem = robotData.find((robotItem) => {
 		return robotItem.name.replace(/ /g, "") == params.robot
 	})
 
+	console.log("robot", robotItem, robotItem.media)
 
 	return (
 		<div>
 			<Navbar/>
-			<div className='container' style={{display: 'flex', flexDirection : 'column', gap : 20, paddingTop : 40, paddingBottom : 120, textAlign : 'justify'}}>
-				<h3>{robotItem.name}</h3>
-				<h5>{robotItem.type} {robotItem.season}</h5>
+			<div className='container' style={{display: 'flex', flexDirection : 'column', gap : 20, paddingTop : 40, paddingBottom : 40, textAlign : 'justify'}}>
 				<div
 					style={{
-						width : '100%',
-						height : 500,
-						display : 'flex',
-						flexDirection : 'column',
-						gap : 10
+						display : 'flex'
 					}}
 				>
-					<div
+					<ButtonLink
+						className={styles.button}
+						href={'/robots/x'}
 						style={{
-							backgroundColor : '#ddd',
-							width : '100%',
-							flex : 1,
-							flexGrow : 1
+							backgroundColor : '#000'
 						}}
 					>
-
-					</div>
-					<div
-						style={{
-							backgroundColor : '#ddd',
-							width : '100%',
-							height : 160
-						}}
-					>
-
-					</div>
+						<span
+							style={{
+								paddingLeft : 20,
+								paddingRight : 20,
+								whiteSpace: 'nowrap'
+							}}
+						>
+							Back to Robots
+						</span>
+					</ButtonLink>
 				</div>
+
+				<h3>{robotItem.name}</h3>
+				<h5>{robotItem.type} {robotItem.season}</h5>
+				<MediaContainer robotItem={robotItem}/>
 				<div
 					style={{
 						display: 'flex',
@@ -160,6 +185,50 @@ export default async function Robot({params}) {
 						</div>
 					</div>
 				</div>
+				<div
+					style={{
+						display : 'flex',
+						marginTop : 80,
+						flexDirection : 'row',
+						justifyContent: 'flex-end',
+						gap : 20
+					}}
+				>
+					<ButtonLink
+						className={styles.button}
+						href={'/robots/x'}
+						style={{
+							backgroundColor : '#000'
+						}}
+					>
+						<span
+							style={{
+								paddingLeft : 20,
+								paddingRight : 20,
+								whiteSpace: 'nowrap'
+							}}
+						>
+							{'<--'} Previous Robot Name
+						</span>
+					</ButtonLink>
+					<ButtonLink
+						className={styles.button}
+						href={'/robots/x'}
+						style={{
+							backgroundColor : '#000'
+						}}
+					>
+						<span
+							style={{
+								paddingLeft : 20,
+								paddingRight : 20,
+								whiteSpace: 'nowrap'
+							}}
+						>
+							Next Robot Name {'-->'}
+						</span>
+					</ButtonLink>
+				</div>
 			</div>
 			<SponsorBlock style={{marginBottom : -80, paddingBottom : 180, backgroundColor : '#000'}}/>
 			<Footer/>

app/Robots/[robot]/page.module.css

@@ -11,4 +11,18 @@
 
 .eventButton:hover {
     background-color: #222;
+}
+
+
+.button {
+    color : #fff;
+    text-transform: uppercase;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    height : 50px;
+    font-size: 1rem;
+    font-weight: 400;
+    transition: background-color 0.2s;
 }