Develop

plugins/gatsby-transformer-monday/gatsby-node.js

@@ -2,7 +2,7 @@ const assemblePositionData = require('./assemble-positions')
 const assembleColumnData = require('./assemble-columns')
 const assembleDatesData = require('./assemble-dates')
 
-const DEBUG = true
+const DEBUG = false
 
 async function onCreateNode({
   actions,

src/components/carousel.js

@@ -6,7 +6,7 @@ import 'swiper/css/pagination';
 import 'swiper/css/navigation';
 import { Keyboard, Navigation, Pagination } from 'swiper/modules';
 
-import { StudentSlide, MobileSlide } from './student-slide'
+import { StudentSlide } from './student-slide'
 
 export const Carousel = ({students}) => {
 
@@ -16,17 +16,20 @@ export const Carousel = ({students}) => {
         keyboard={{
           enabled: true,
         }}
-        // navigation={{
-        //   enabled: true,
-        // }}
+        navigation={{
+          enabled: true,
+        }}
         pagination={{
           clickable: true,
         }}
         grabCursor={true}
-        slidesPerView={2}
         centeredSlides={true}
-        spaceBetween={60}
+        spaceBetween={80}
         loop={true}
+        breakpoints={{
+          800: {slidesPerView: 2},
+          0: {slidesPerView: 1}
+        }}
       >
         {
           students.map((student) => (
@@ -38,31 +41,3 @@ export const Carousel = ({students}) => {
       </Swiper>
   );
 }
-
-export const MobileCarousel = ({students}) => {
-
-  return (
-    <Swiper
-      modules={[ Keyboard, Navigation, Pagination]}
-      keyboard={{
-        enabled: true,
-      }}
-      pagination={{
-        clickable: true,
-      }}
-      grabCursor={true}
-      slidesPerView={1}
-      centeredSlides={true}
-      spaceBetween={60}
-      loop={true}
-    >
-      {
-        students.map((student) => (
-          <SwiperSlide key={`mobile-${student.student_name}`}>
-            <MobileSlide student={student}/>
-          </SwiperSlide>
-        ))
-      }
-    </Swiper>
-  )
-}

src/components/sections/important-dates.js

@@ -3,16 +3,7 @@ import { Section } from "../section"
 import { DatesTable } from '../dates-table'
 import ImportantDatesContent from '../../content/sections/important-dates.yaml'
 
-export const ImportantDates = ({ content }) => {
-  const rows = content.nodes.map(({ name, dates, audience }) => ({
-    name,
-    dates: dates.reduce((acc, d) => {
-      acc[d.year] = d.date
-      return acc
-    }, {}),
-    audience,
-  }))
-
+export const ImportantDates = ( ) => {
 
   return (
     <Section title='Important Dates' backgroundColor="#fff" height="55vh">

src/components/sections/key-contacts.js

@@ -1,23 +1,52 @@
 import React from 'react'
 import { Section } from '../section'
-import { ParagraphGrid } from '../paragraph-grid';
 import Grid from '@mui/joy/Grid';
+import { Card, CardContent, AspectRatio, Typography } from '@mui/joy';
+import { Link } from '../link'
 
 export const KeyContacts = ({ content }) => {
-  
+
   return (
     <Section  
       backgroundColor="#1A1B2F"
       title={content.title}
       textColor="#fff"
     >
-      <Grid container spacing={2}>
+      <Grid container spacing={2} mb={3}>
         {
           content.people.map((person) => (
-            <ParagraphGrid key={`contact-${person.name}`} heading={person.name} body={person.description} color="#fff"/>
+            <Grid key={`contact-${person.name}`} xs={12} sm={12} md={6} >
+              <Card orientation="horizontal" size="lg"
+                sx={{ backgroundColor: '#ECF1F2' }}
+              >
+                <AspectRatio flex ratio="1" maxHeight={182} sx={{ minWidth: 182 }}>
+                  <img loading="lazy" alt=""
+                    src={person.photoURL}                    
+                  />
+                </AspectRatio>
+                <CardContent>
+                  <Typography fontSize="xl" fontWeight="lg" >
+                    {person.name}
+                  </Typography>
+                  <Typography>
+                    {person.description}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid> 
           ))
         }
       </Grid>
+
+      <Typography level="h3" sx={{
+        textAlign: 'center', color: '#fff'
+      }}>Questions?</Typography>
+      <Typography sx={{textAlign: 'center', color: '#fff'}}>
+        Contact the team at <Link 
+          to="mailto:[email protected]">[email protected]
+        </Link>
+      </Typography>
+
     </Section>
   )
 }

src/components/sections/programs/starShipPanel.js

@@ -10,24 +10,9 @@ import {
   MainPanelButton
 } from '../../program-tabs'
 import ImportantDatesContent from '../../../content/sections/important-dates.yaml'
-import { useStaticQuery, graphql } from "gatsby"
 import { DatesTable } from '../../dates-table'
 
-const datesQuery = graphql`query {
-  dates: allImportantDate {
-    nodes {
-      id
-      name
-      dates {
-        date
-        year
-      }
-    }
-  }
-}`
-
 export const StarShipPanel = ({title, content}) => {
-  const data = useStaticQuery(datesQuery)
 
   return (
     <Container maxWidth="md" sx={{margin: '1.5rem auto'}}>

src/components/sections/star-showcase.js

@@ -1,11 +1,8 @@
 import React from 'react'
-import { Carousel, MobileCarousel } from '../carousel'
+import { Carousel } from '../carousel'
 import { Sheet, Typography } from '@mui/joy'
-import { useWindowWidth } from '../../hooks'
 
 export const StarShowcase = ({ content }) => {
-  const { isCompact } = useWindowWidth();
-
   return (
     <Sheet
       component="section"
@@ -19,10 +16,8 @@ export const StarShowcase = ({ content }) => {
         my: 2,
         color: '#fff'
       }}>{content.title}</Typography>
-
-      {
-        isCompact ? <MobileCarousel students={content.students} /> :    <Carousel students={content.students} />
-      }
+
+       <Carousel students={content.students} />
 
     </Sheet>
   )

src/components/student-slide.js

@@ -6,6 +6,7 @@ import { Button } from './button'
 export const StudentSlide = ({student}) => {
   const { 
     student_name, 
+    semester,
     title, 
     project_description,
     project_link_text, 
@@ -14,11 +15,11 @@ export const StudentSlide = ({student}) => {
   return (
     <Card 
       sx={{
-        height: '220px',
-        flexWrap: 'wrap',
-        marginTop: '1rem',
-        px: '3.5rem',
-        py: '2.5rem',
+        height: {xs: '180px', sm: '200px', md: '220px'},
+        px: {xs: '1rem', sm: '2rem', md: '2.5'},
+        pt: '1rem', pb: '3rem',
+        mt: '0.5rem',
+        mx: '1rem', 
         backgroundColor: '#ECF1F2',
       }}
     >
@@ -27,108 +28,39 @@ export const StudentSlide = ({student}) => {
         flexDirection: 'column', 
         justifyContent: 'center'
       }}>
-        <Typography 
-          level="h3"
-          align="center"
+        <Typography level="h3" align="center"
           sx={{
-            fontSize: '1.5rem',
+            fontSize: {xs: '1.2rem', sm: '1.25rem', md: '1.6rem'},
             fontWeight: 600
           }}
         >
-          {student_name}
+          {project_description}
         </Typography>
-
-        <Typography
-          align="center"
+        <Typography level="h4" align="center"
           sx={{
-            fontSize: '1.2rem'
-          }}
-        >
-          {title}
-        </Typography>
-
-        <Typography
-          align="center"
-          sx={{
-            fontSize: '1rem',
-            fontStyle: 'italic',
-          }}
-        >{project_description}</Typography>
-      </CardContent>
-      <CardActions sx={{margin: '0 auto'}}>
-        <Button
-          component={Link}
-          to={project_link}
-          noIcon
-          external
-        >{project_link_text}</Button>
-      </CardActions>
-    </Card>
-  )
-}
-
-
-export const MobileSlide = ({student}) => {
-  const { 
-    student_name, 
-    title, 
-    project_description,
-    project_link_text, 
-    project_link } = student
-
-  return (
-    <Card 
-      sx={{
-        height: {xs: '180px', sm: '200px'},
-        flexWrap: 'wrap',
-        marginTop: '1rem',
-        px: {xs: '1rem', sm: '2rem'},
-        pb: {xs: '2rem', sm: '2rem'},
-        mx: '1rem', 
-        backgroundColor: '#ECF1F2',
-      }}
-    >
-      <CardContent sx={{
-        display: 'flex', 
-        flexDirection: 'column', 
-        justifyContent: 'center'
-      }}>
-        <Typography 
-          level="h3"
-          align="center"
-          sx={{
-            fontSize: {xs: '1.2rem', sm: '1.25rem'},
-            fontWeight: 600
+            fontSize: '1.2rem',
           }}
         >
           {student_name}
         </Typography>
-
-        <Typography
-          align="center"
+        <Typography align="center"
           sx={{
             fontSize: {xs: '0.9rem', sm: '1rem'},
           }}
         >
-          {title}
+          {title}, {semester}
         </Typography>
-
-        <Typography
-          align="center"
-          sx={{
-            fontSize: {xs: '1rem', sm: '1.1rem', md: '1.5rem'},
-            fontStyle: 'italic',
-          }}
-        >{project_description}</Typography>
       </CardContent>
       <CardActions sx={{margin: '0 auto'}}>
         <Button
           component={Link}
           to={project_link}
           noIcon
           external
-          >{project_link_text}</Button>
+        >{project_link_text}</Button>
       </CardActions>
     </Card>
   )
 }
+
+

src/content/sections/key-contacts.yaml

@@ -3,9 +3,7 @@ title: Key Contacts
 people:
   - name: Bryttany Todd
     description: STAR Program Manager
+    photoURL: https://renci.org/wp-content/uploads/2019/05/RENCI_201905_Photo_Todd_Bryttany.jpg
   - name: Ashley Hukins
     description: STAR Program Coordinator
-  - name: Questions?
-    description: >
-      Contact the team at [email protected] or 
-      join our slack channel, #star-program-info.
+    photoURL: https://ca.slack-edge.com/T0450N0TQ-U044V4MNF1B-263648a9357a-512

src/content/sections/programs-overview.yaml

@@ -55,8 +55,8 @@ starVenturesContent:
     - heading: "Dates"
       contentType: "ul"
       content:
-        - title: "This year’s program will run from July 15 - August 2, 2024."
-        - title: "Registration is open from mid-April until spots are filled."
+        - title: "This program runs for 3 weeks during the summer. Check back later for Summer 2025 dates."
+        - title: "Registration will open in early 2025. Check back for registration deadlines and link."
     - heading: "Requirements"
       contentType: "ul"
       content: