feat: add event end time to individual event page and OG images (graphql#1538)

Author: YassinEldeeb

src/templates/EventOgImageTemplate.tsx

@@ -14,7 +14,7 @@ const EventOgImageTemplate = ({
     company: speaker.company,
     position: speaker.position,
   }))
-  const { event_type, event_start: eventDate } = pageContext.event
+  const { event_type, event_start, event_end } = pageContext.event
 
   const eventType = event_type.endsWith("s")
     ? event_type.slice(0, -1)
@@ -111,7 +111,7 @@ const EventOgImageTemplate = ({
                 />
               </svg>
 
-              {format(parseISO(eventDate), "EEEE, MMM d")}
+              {format(parseISO(event_start), "EEEE, MMM d")}
             </span>
             <span style={{ display: "flex", alignItems: "center" }}>
               <svg
@@ -128,7 +128,10 @@ const EventOgImageTemplate = ({
                 />
               </svg>
 
-              {format(parseISO(eventDate), "hh:mmaaaa 'PDT'")}
+              {format(parseISO(event_start), "hh:mmaaaa") +
+                " - " +
+                format(parseISO(event_end), "hh:mmaaaa") +
+                " PDT"}
             </span>
           </div>
 

src/templates/event.tsx

@@ -90,7 +90,10 @@ export const EventComponent: FC<{
                   />
                 </svg>
 
-                {format(parseISO(event.event_start), "hh:mmaaaa 'PDT'")}
+                {format(parseISO(event.event_start), "hh:mmaaaa") +
+                  " - " +
+                  format(parseISO(event.event_end), "hh:mmaaaa") +
+                  " PDT"}
               </span>
             </div>
             <div className="space-y-5">