Add date, time, and location to event schema and display

src/components/Event.astro

@@ -2,6 +2,7 @@
 import { toHTML } from '@/utils/markdown'
 import Sponsor from '@/components/Sponsor.astro'
 import TalkCard from '@/components/TalkCard.astro'
+import EventDetails from '@/components/EventDetails.astro'
 import { inflateEvent } from '@/utils/data'
 import type { SJSEvent } from '@/data/types'
 
@@ -10,6 +11,7 @@ const event = inflateEvent(baseEvent)
 ---
 
 <h3>{event.title}</h3>
+<EventDetails event={event} />
 {event.description && <p set:html={toHTML(event.description)} />}
 {event.sponsors.length > 0 && <h4>Thanks to our Sponsors ❤️</h4>}
 {event.sponsors.map(sponsor => <Sponsor sponsor={sponsor} />)}

src/components/EventDetails.astro

@@ -0,0 +1,49 @@
+---
+import type { SJSEvent } from '@/data/types'
+import { formatEventTime } from '@/utils/event'
+
+interface Props {
+  event: Pick<SJSEvent, 'date' | 'startTime' | 'endTime' | 'location' | 'link'>
+  showRsvp?: boolean
+}
+
+const { event, showRsvp = false } = Astro.props
+const { location, link } = event
+const time = formatEventTime(event)
+---
+
+<ul class="event-details">
+  <li>
+    📆{' '}
+    {
+      new Date(event.date).toLocaleDateString(undefined, {
+        weekday: 'long',
+        month: 'long',
+        day: 'numeric',
+      })
+    }
+  </li>
+  {time && <li>⏰ {time}</li>}
+  {
+    location && (
+      <li>
+        📍{' '}
+        {location.mapUrl ? (
+          <a target="_blank" href={location.mapUrl}>
+            {location.name}
+          </a>
+        ) : (
+          location.name
+        )}
+        {location.address && `(${location.address})`}
+      </li>
+    )
+  }
+  {
+    showRsvp && (
+      <li>
+        🎟 <a href={link}>RSVP</a>
+      </li>
+    )
+  }
+</ul>

src/data/events.json

@@ -195,6 +195,13 @@
     "link": "https://ti.to/event-loop/seattlejs-january-2024",
     "title": "SeattleJS January 2024",
     "date": "2024-01-10",
+    "startTime": "17:30",
+    "endTime": "20:00",
+    "location": {
+      "name": "The Collective Seattle",
+      "address": "400 Dexter Ave N Ste 100, Seattle, WA 98109",
+      "mapUrl": "https://maps.app.goo.gl/iFCSeqBsv7gFKEQ78"
+    },
     "sponsors": [],
     "talks": [],
     "description": "Join your fellow web devs for an evening of networking and fun!\n\n📅 Wednesday, January 10\n\n🕠 5:30pm - 8pm\n\n📍 [The Collective Seattle, 400 Dexter Ave N, Seattle, WA 98109](https://maps.app.goo.gl/iFCSeqBsv7gFKEQ78)"
@@ -204,6 +211,11 @@
     "link": "https://ti.to/event-loop/seattlejs-february-2024",
     "title": "SeattleJS February 2024",
     "date": "2024-02-14",
+    "location": {
+      "name": "The Collective Seattle",
+      "address": "400 Dexter Ave N Ste 100, Seattle, WA 98109",
+      "mapUrl": "https://maps.app.goo.gl/iFCSeqBsv7gFKEQ78"
+    },
     "sponsors": ["datastax"],
     "talks": ["dm-liao-february-2024", "fx-wood-february-2024"],
     "description": "Join your fellow web devs for an evening of talks, networking and fun! Tickets are only $5 but go up to $10 the day of, so don't delay!\n\n📍 [The Collective Seattle, 400 Dexter Ave N, Seattle, WA 98109](https://maps.app.goo.gl/iFCSeqBsv7gFKEQ78)"
@@ -213,6 +225,11 @@
     "link": "https://ti.to/event-loop/seattlejs-march-2024",
     "title": "SeattleJS March 2024",
     "date": "2024-03-13",
+    "location": {
+      "name": "The Collective Seattle",
+      "address": "400 Dexter Ave N Ste 100, Seattle, WA 98109",
+      "mapUrl": "https://maps.app.goo.gl/iFCSeqBsv7gFKEQ78"
+    },
     "sponsors": ["fireproof"],
     "talks": ["shruti-kapoor-march-2024", "eric-jensen-march-2024"],
     "description": "Join your fellow web devs for an evening of talks, networking and fun! Tickets are only $5 but go up to $10 the day of, so don't delay!\n\n📍 [The Collective Seattle, 400 Dexter Ave N, Seattle, WA 98109](https://maps.app.goo.gl/iFCSeqBsv7gFKEQ78)"
@@ -222,6 +239,11 @@
     "link": "https://ti.to/event-loop/seattlejs-april-2024",
     "title": "SeattleJS April 2024",
     "date": "2024-04-10",
+    "location": {
+      "name": "The Collective Seattle",
+      "address": "400 Dexter Ave N Ste 100, Seattle, WA 98109",
+      "mapUrl": "https://maps.app.goo.gl/iFCSeqBsv7gFKEQ78"
+    },
     "sponsors": [],
     "talks": ["herrington-darkholme-april-2024", "john-pham-april-2024"],
     "description": "Join your fellow web devs for an evening of talks, networking and fun! Register ahead of time at the link below. Drink tickets are only $5 but go up to $10 the day of, so don't delay!\n\n📍 [The Collective Seattle, 400 Dexter Ave N, Seattle, WA 98109](https://maps.app.goo.gl/iFCSeqBsv7gFKEQ78)"
@@ -231,6 +253,11 @@
     "link": "https://ti.to/event-loop/seattlejs-may-2024",
     "title": "SeattleJS May 2024",
     "date": "2024-05-08",
+    "location": {
+      "name": "The Collective Seattle",
+      "address": "400 Dexter Ave N Ste 100, Seattle, WA 98109",
+      "mapUrl": "https://maps.app.goo.gl/iFCSeqBsv7gFKEQ78"
+    },
     "sponsors": ["sentry"],
     "talks": ["allan-deutsch-may-2024", "sarah-guthals-phd-may-2024"],
     "description": "Join your fellow web devs for an evening of talks, networking and fun! Register ahead of time at the link below. Drink tickets are only $5 but go up to $10 the day of, so don't delay!\n\n📍 [The Collective Seattle, 400 Dexter Ave N, Seattle, WA 98109](https://maps.app.goo.gl/iFCSeqBsv7gFKEQ78)"
@@ -240,6 +267,11 @@
     "link": "https://lu.ma/0ouxs9r2",
     "title": "SeattleJS July 2024",
     "date": "2024-07-10",
+    "location": {
+      "name": "Silicon Valley Bank",
+      "address": "920 5th Ave Suite 300, Seattle, WA 98104",
+      "mapUrl": "https://maps.app.goo.gl/r9LsbFzCxuMpRzbXA"
+    },
     "sponsors": [],
     "talks": ["chris-griffing-july-2024"],
     "description": "Join your fellow web devs for an evening of talks, networking and fun! Register ahead of time at the link below.\n\nNOTE: We are at <a target='_blank' href='https://maps.app.goo.gl/r9LsbFzCxuMpRzbXA'>Silicon Valley Bank</a> this time, NOT our previous location!\n\n"
@@ -249,6 +281,11 @@
     "link": "https://lu.ma/510fwjo4",
     "title": "SeattleJS August 2024",
     "date": "2024-08-14",
+    "location": {
+      "name": "Silicon Valley Bank",
+      "address": "920 5th Ave Suite 300, Seattle, WA 98104",
+      "mapUrl": "https://maps.app.goo.gl/r9LsbFzCxuMpRzbXA"
+    },
     "sponsors": [],
     "talks": ["ben-van-citters-august-2024", "allan-deutsch-august-2024"],
     "description": "Join your fellow web devs for an evening of talks, networking and fun! Register ahead of time at the link below.\n\nNOTE: We are at <a target='_blank' href='https://maps.app.goo.gl/r9LsbFzCxuMpRzbXA'>Silicon Valley Bank</a> this month!\n\n"
@@ -257,6 +294,10 @@
     "id": "september-2024",
     "title": "SeattleJS September 2024",
     "date": "2024-09-11",
+    "location": {
+      "name": "Startup Hall on UW campus",
+      "mapUrl": "https://maps.app.goo.gl/fbEUjw2mGvvTDsVR6"
+    },
     "sponsors": [],
     "talks": ["nicholas-patti-september-2024"],
     "description": "Join your fellow web devs for an evening of talks, networking and fun! Register ahead of time at the link below.\n\nNOTE: We are at <a target='_blank' href='https://maps.app.goo.gl/fbEUjw2mGvvTDsVR6'>Startup Hall on UW campus</a> this month!\n\n"
@@ -265,6 +306,11 @@
     "id": "october-2024",
     "title": "SeattleJS October 2024",
     "date": "2024-10-09",
+    "location": {
+      "name": "Silicon Valley Bank",
+      "address": "920 5th Ave Suite 300, Seattle, WA 98104",
+      "mapUrl": "https://maps.app.goo.gl/r9LsbFzCxuMpRzbXA"
+    },
     "sponsors": [],
     "talks": ["erik-marks-october-2024"],
     "description": "Join your fellow web devs for an evening of talks, networking and fun! Register ahead of time at the link below.\n\nNOTE: We are at <a target='_blank' href='https://maps.app.goo.gl/r9LsbFzCxuMpRzbXA'>Silicon Valley Bank</a> this month!\n\n"
@@ -273,6 +319,10 @@
     "id": "november-2024",
     "title": "SeattleJS November 2024",
     "date": "2024-11-13",
+    "location": {
+      "name": "Startup Hall on UW campus",
+      "mapUrl": "https://maps.app.goo.gl/fbEUjw2mGvvTDsVR6"
+    },
     "sponsors": [],
     "talks": ["cat-johnson-november-2024", "stacy-davis1-november-2024"],
     "description": "Join your fellow web devs for an evening of talks, networking and fun! Register ahead of time at the link below.\n\nNOTE: We are at <a target='_blank' href='https://maps.app.goo.gl/fbEUjw2mGvvTDsVR6'>Startup Hall on UW campus</a> this month!\n\n"

src/data/types.d.ts

@@ -1,10 +1,21 @@
+export interface EventLocation {
+  name: string
+  address?: string
+  mapUrl?: string
+}
+
 export interface SJSEvent {
   id: string
   title: string
+  /** Local Seattle date, "YYYY-MM-DD" */
   date: string
+  /** Local Seattle time, 24h "HH:mm" */
+  startTime?: string
+  /** Local Seattle time, 24h "HH:mm" */
+  endTime?: string
   link?: string
   description?: string
-  location?: string
+  location?: EventLocation
   sponsors: string[]
   talks: string[]
 }

src/pages/events/[id].astro

@@ -7,6 +7,7 @@ import { inflateEvent } from '@/utils/data'
 import events from '@/data/events.json'
 import BaseLayout from '@/layouts/BaseLayout.astro'
 import PageContainer from '@/components/PageContainer.astro'
+import EventDetails from '@/components/EventDetails.astro'
 import { findImage } from '@/utils/image'
 
 export const getStaticPaths = (async () => {
@@ -17,7 +18,7 @@ type Props = InferGetStaticPropsType<typeof getStaticPaths>
 
 const { event: baseEvent } = Astro.props as Props
 const event = inflateEvent(baseEvent)
-const { sponsors, talks, description, date, link } = event
+const { sponsors, talks, description, date } = event
 let location = event.location ?? null
 const pageTitle = event.title
 
@@ -82,23 +83,7 @@ const findSponsorPhoto = (photo: string) => {
             </div>
           ))
       }
-      <ul>
-        <li>
-          🗓{' '}
-          {
-            new Date(date).toLocaleDateString(undefined, {
-              weekday: 'long',
-              month: 'long',
-              day: 'numeric',
-            })
-          }
-        </li>
-        <li>⏰ 5:30pm - 8:30pm</li>
-        {location && <li>📍 {location}</li>}
-        <li>
-          🎟 <a href={link}>RSVP</a>
-        </li>
-      </ul>
+      <EventDetails event={event} showRsvp />
       {
         hasTalks &&
           talks.map(t => (
@@ -138,7 +123,7 @@ const findSponsorPhoto = (photo: string) => {
 
   <PageContainer pageTitle={pageTitle}>
     {description && <p set:html={toHTML(description)} />}
-    {location && <p>{location}</p>}
+    {location && <p>{location.name}</p>}
     {
       hasSponsors &&
         sponsors.map(s => (
@@ -159,23 +144,7 @@ const findSponsorPhoto = (photo: string) => {
           </div>
         ))
     }
-    <ul>
-      <li>
-        📆{' '}
-        {
-          new Date(date).toLocaleDateString(undefined, {
-            weekday: 'long',
-            month: 'long',
-            day: 'numeric',
-          })
-        }
-      </li>
-      <li>⏰ 5:30pm - 8:30pm</li>
-      {location && <li>📍 {location}</li>}
-      <li>
-        🎟 <a href={link}>RSVP</a>
-      </li>
-    </ul>
+    <EventDetails event={event} showRsvp />
     {
       hasTalks &&
         talks.map(t => (

src/utils/event.ts

@@ -0,0 +1,23 @@
+import type { SJSEvent } from '@/data/types'
+
+// "17:30" -> "5:30pm", "20:00" -> "8pm"
+export function formatTime(time: string): string {
+  const [hours, minutes] = time.split(':').map(Number)
+  const suffix = hours >= 12 ? 'pm' : 'am'
+  const hour12 = hours % 12 || 12
+  return minutes
+    ? `${hour12}:${String(minutes).padStart(2, '0')}${suffix}`
+    : `${hour12}${suffix}`
+}
+
+// "5:30pm - 8:30pm", "5:30pm", or undefined when the event has no times
+export function formatEventTime(
+  event: Pick<SJSEvent, 'startTime' | 'endTime'>,
+): string | undefined {
+  const { startTime, endTime } = event
+  if (startTime && endTime) {
+    return `${formatTime(startTime)} - ${formatTime(endTime)}`
+  }
+  if (startTime) return formatTime(startTime)
+  return undefined
+}