Merge pull request #109 from strudel-science/bugfix/timezones

Add ability for timezone to be static for events

Author: codytodonnell

content/engage/events/10-06-2025-learning-to-talk-with-your-users.mdx

@@ -1,7 +1,12 @@
 ---
 title: 'Workshop: Learning to Talk with Your Users - User Experience Research for RSEs'
 slug: '10-06-2025-learning-to-talk-with-your-users'
-date: 'Oct 6, 2025 10:30 AM EST'
+date: 'Oct 6, 2025 10:30 AM EDT'
+# Include timezone if you want the date to always display in that timezone
+# Otherwise the date will always display in the user's local timezone
+# The value should be a valid IANA timezone string
+# e.g. 'America/New_York', 'Europe/London', 'Asia/Tokyo'
+timezone: 'America/New_York'
 speakers: ['Johanna Cohoon, Rajshree Deshmukh, and Mary Goldman']
 upcoming: true
 newsUrl: ' '

content/engage/events/10-23-2025-building-scientific-uis-with-strudel-and-ai-assistants.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Workshop: Building Scientific UIs with STRUDEL and AI Assistants'
 slug: '10-23-2025-building-scientific-uis-with-strudel-and-ai-assistants'
-date: 'Oct 23, 2025 9:00 AM PST'
+date: 'Oct 23, 2025 9:00 AM PDT'
 speakers: ['STRUDEL team']
 upcoming: true
 newsUrl: ' '

gatsby-node.ts

@@ -119,6 +119,7 @@ export const createPages: GatsbyNode["createPages"] = async ({
               title
               slug
               date
+              timezone
               upcoming
               speakers
               format

src/components/layouts/EventLayout.tsx

@@ -54,7 +54,7 @@ const EventLayout: React.FC<PageProps<any, any>> = ({ pageContext, children }) =
               alignItems: 'center',
             }}
           >
-            <span>{dayjs(pageContext.frontmatter.date).format('MMMM D, YYYY h:mm A z')}</span>
+            <span>{dayjs(pageContext.frontmatter.date).tz(pageContext.frontmatter.timezone || undefined).format('MMMM D, YYYY h:mm A z')}</span>
             <CircleIcon sx={{ fontSize: '0.75rem' }} />
             <span>{pageContext.frontmatter.format}</span>
           </Stack>
@@ -120,7 +120,7 @@ const EventLayout: React.FC<PageProps<any, any>> = ({ pageContext, children }) =
               When:
             </Typography>
             <Typography>
-              {dayjs(pageContext.frontmatter.date).format('MMMM D, YYYY H:mm A z')}
+              {dayjs(pageContext.frontmatter.date).tz(pageContext.frontmatter.timezone || undefined).format('MMMM D, YYYY H:mm A z')}
             </Typography>
           </Stack>
           <Stack direction="row" spacing={1}>

src/pages/engage/events/index.tsx

@@ -121,7 +121,7 @@ const EventsPage: React.FC<PageProps<DataProps>> = ({ data }) => {
                     </Box>
                     <Stack direction="row" spacing={1}>
                       <EventIcon /> 
-                      <Typography>{dayjs(event.frontmatter.date).format('MMMM D, YYYY h:mm A z')}</Typography>
+                      <Typography>{dayjs(event.frontmatter.date).tz(event.frontmatter.timezone || undefined).format('MMMM D, YYYY h:mm A z')}</Typography>
                     </Stack>
                     <Typography
                       sx={{
@@ -234,6 +234,7 @@ export const query = graphql`
           title
           slug
           date
+          timezone
           upcoming
           newsUrl
           speakers

src/types/strudel-config.d.ts

@@ -52,6 +52,7 @@ export interface EventFrontmatter {
   title: string;
   slug: string;
   date: string;
+  timezone?: string;
   upcoming?: boolean;
   newsUrl?: string;
   speakers: string[];