Add microsoft for opening night party and sponsor images to schedule (#125)

* Add microsoft information to opening night party

* Add ability to have logo images for sponsored events

Author: deweydell

content/2019/schedule.json

@@ -236,7 +236,9 @@
       },
       {
         "time": "7:00 PM - 10:00 PM",
-        "title": "Opening Night Party"
+        "title": "Opening Night Party",
+        "desc": "The opening night party will take place at Microsoft SF and is RSVP only. Check your email / slack for information on how to RSVP!",
+        "eventSponsors": ["Microsoft"]
       }
     ]
   },

src/components/event/event.module.css

@@ -43,3 +43,7 @@
     margin-top: 0;
   }
 }
+
+.sponsorLogo {
+  max-width: 150px;
+}

src/components/event/index.js

@@ -20,13 +20,29 @@ function renderEventInfo(title, desc) {
 }
 
 // When the talk information is in the schedule.json
-const ConfEvent = ({ title, desc, type, additionalNames, speakers }) => {
+const ConfEvent = ({
+  title,
+  desc,
+  type,
+  additionalNames,
+  speakers,
+  sponsors,
+  eventSponsors,
+}) => {
   const allSpeakers = []
   if (additionalNames) {
     additionalNames.map(name =>
       allSpeakers.push(speakers.find(s => s.name === name))
     )
   }
+
+  const allSponsors = []
+  if (eventSponsors) {
+    eventSponsors.map(sponsorName =>
+      allSponsors.push(sponsors.find(s => s.name === sponsorName))
+    )
+  }
+
   return (
     <>
       {type && <TalkType type={type} secondary />}
@@ -41,6 +57,21 @@ const ConfEvent = ({ title, desc, type, additionalNames, speakers }) => {
                 key={`speaker-${speaker.name}-${index}`}
               />
             ))}
+          {eventSponsors &&
+            allSponsors.map(company => (
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href={company.url}
+                key={company.id}
+              >
+                <img
+                  src={company.logo}
+                  alt={`${company.name} logo`}
+                  className={styles.sponsorLogo}
+                />
+              </a>
+            ))}
         </div>
       </div>
     </>
@@ -77,6 +108,8 @@ const Event = ({
   name,
   time,
   speakers,
+  sponsors,
+  eventSponsors,
   title,
   desc,
   type,
@@ -93,6 +126,8 @@ const Event = ({
             type={type}
             additionalNames={additionalNames}
             speakers={speakers}
+            sponsors={sponsors}
+            eventSponsors={eventSponsors}
           />
         ) : (
           <TalkEvent

src/pages/2019/schedule.js

@@ -43,6 +43,7 @@ const Tracks = ({ tracks, speakers, day }) => {
 
 const Schedule = ({ data }) => {
   const speakers = data.allSpeakersJson.nodes
+  const sponsors = data.allSponsorsJson.nodes
 
   return (
     <ConfLayout subpage={true}>
@@ -78,6 +79,7 @@ const Schedule = ({ data }) => {
                     <Event
                       {...event}
                       speakers={speakers}
+                      sponsors={sponsors}
                       day={day}
                       key={`event-${parameterize(day.date)}-${parameterize(
                         event.time
@@ -119,5 +121,13 @@ export const scheduleQuery = graphql`
         }
       }
     }
+    allSponsorsJson {
+      nodes {
+        id
+        name
+        url
+        logo
+      }
+    }
   }
 `