fix timezones on events (#29061)

* fix timezones on events

* fix bucharest tz

* events og image on the edge

* fix merge conflict

* fix meta_title

apps/www/_events/2024-08-21-scale-to-billions-generative-ai-humata.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Scale to Billions: Generative AI/Humata'
-meta_title: 'Scale to Billions: Generative AI/Humata | 21 Aug 2024 | Webinar'
+meta_title: 'Scale to Billions: Generative AI/Humata'
 subtitle: 'Quickly and cost effectively build Generative AI applications that you can use to chat with your company’s documents.'
 meta_description: 'Quickly and cost effectively build Generative AI applications that you can use to chat with your company’s documents.'
 type: 'webinar'

apps/www/_events/2024-08-30__launch-week-12-meetup-tenerife-spain.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Supabase Launch Week 12 Meetup: Tenerife, España'
-subtitle: 'Join the community @  Tándem & Coworking - La Orotava, Canarias'
+subtitle: 'Join the community at Tándem & Coworking - La Orotava, Canarias'
 type: 'meetup'
 onDemand: false
 disable_page_build: true

apps/www/_events/2024-09-05__launch-week-12-meetup-bucharest-romania.mdx

@@ -5,7 +5,7 @@ type: 'meetup'
 onDemand: false
 disable_page_build: true
 link: { href: https://lu.ma/x910h8kb, target: '_blank' }
-date: '2024-09-05T18:00:00.000+01:00'
+date: '2024-09-05T18:00:00.000+02:00'
 timezone: 'Europe/Belgrade'
 duration: '2 hours'
 categories:

apps/www/_events/2024-09-12-launch-week-12-hackathon.mdx

@@ -1,11 +1,11 @@
 ---
 title: 'Supabase Launch Week 12 Hackathon'
-meta_title: 'Build an Open Source Project over 10 days. 5 prize categories.'
+meta_title: 'Supabase Launch Week 12 Hackathon'
 subtitle: 'Build an Open Source Project over 10 days. 5 prize categories.'
 meta_description: 'Build an Open Source Project over 10 days. 5 prize categories.'
 type: 'hackathon'
 onDemand: false
-date: '2024-09-13T10:00:00.000-07:00'
+date: '2024-09-13T09:00:00.000-07:00'
 timezone: 'America/Los_Angeles'
 duration: '10 days'
 categories:

apps/www/components/Blog/FeaturedThumb.tsx

@@ -36,7 +36,7 @@ function FeaturedThumb(blog: PostTypes) {
         </div>
         <div className="flex flex-col space-y-2 lg:col-span-4 xl:justify-center max-w-xl">
           <div className="text-lighter flex space-x-2 text-sm">
-            <span>{blog.date}</span>
+            <span>{blog.formattedDate}</span>
             <span>•</span>
             <span>{blog.readingTime}</span>
           </div>

apps/www/components/Events/EventListItem.tsx

@@ -54,26 +54,20 @@ const EventListItem = ({ event }: Props) => {
             )}
           </div>
         )}
-        {event.date && (
-          <p className="text-foreground-lighter lg:text-right flex-grow lg:w-full text-nowrap group-hover:text-foreground-light min-w-40 inline-flex items-center lg:justify-end gap-1.5 flex-1 w-full">
-            {dayjs(event.date)
-              .tz(event.timezone ?? 'America/Los_Angeles')
-              .format('DD MMM YYYY')}
-            <span className="min-w-px h-[16px] bg-muted" />
-            <span className="">
-              {dayjs(event.date)
-                .tz(event.timezone ?? 'America/Los_Angeles')
-                .format('hA')}
-            </span>
-            <span className="min-w-px h-[16px] bg-muted" />
-            {dayjs(event.date)
-              .tz(event.timezone ?? 'America/Los_Angeles')
-              .format('z')}
-          </p>
-        )}
+        {event.date && <EventDate event={event} />}
       </div>
     </Link>
   )
 }
 
+const EventDate: React.FC<{ event: PostTypes }> = ({ event }) => (
+  <p className="text-foreground-lighter lg:text-right flex-grow lg:w-full text-nowrap group-hover:text-foreground-light min-w-40 inline-flex items-center lg:justify-end gap-1.5 flex-1 w-full">
+    {dayjs(event.date).tz(event.timezone).format('DD MMM YYYY')}
+    <span className="min-w-px h-[16px] bg-muted" />
+    <span className="">{dayjs(event.date).tz(event.timezone).format('hA')}</span>
+    <span className="min-w-px h-[16px] bg-muted" />
+    {dayjs(event.date).tz(event.timezone).format('z')}
+  </p>
+)
+
 export default EventListItem

apps/www/lib/posts.tsx

@@ -58,7 +58,7 @@ export const getSortedPosts = ({
 
       const frontmatter = {
         ...data,
-        date: formattedDate,
+        formattedDate,
         readingTime,
         url: url,
         path: contentPath,

apps/www/pages/blog/[slug].tsx

@@ -7,6 +7,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
 import { Badge } from 'ui'
+import dayjs from 'dayjs'
 
 import authors from 'lib/authors.json'
 import { generateReadingTime, isNotNullOrUndefined } from '~/lib/helpers'
@@ -152,7 +153,7 @@ function BlogPostPage(props: InferGetStaticPropsType<typeof getStaticProps>) {
               </div>
               <div>
                 <h4 className="text-foreground text-lg">{post.title}</h4>
-                <p className="small">{post.date}</p>
+                <p className="small">{post.formattedDate}</p>
               </div>
             </div>
           </div>
@@ -262,7 +263,7 @@ function BlogPostPage(props: InferGetStaticPropsType<typeof getStaticProps>) {
                   </Link>
                   <h1 className="text-2xl sm:text-4xl">{props.blog.title}</h1>
                   <div className="text-light flex space-x-3 text-sm">
-                    <p>{props.blog.date}</p>
+                    <p>{dayjs(props.blog.date).format('DD MMM YYYY')}</p>
                     <p>•</p>
                     <p>{generateReadingTime(props.blog.source)}</p>
                   </div>

apps/www/pages/events/[slug].tsx

@@ -13,6 +13,7 @@ import {
   MicrophoneIcon,
   HandIcon,
 } from '@heroicons/react/solid'
+import { capitalize } from 'lodash'
 
 import authors from 'lib/authors.json'
 import { isNotNullOrUndefined } from '~/lib/helpers'
@@ -149,10 +150,15 @@ const EventPage = ({ event }: InferGetStaticPropsType<typeof getStaticProps>) =>
 
   const IS_REGISTRATION_OPEN = event.onDemand || Date.parse(event.date) > Date.now()
 
+  const ogImageUrl = encodeURI(
+    `${process.env.NODE_ENV === 'development' ? 'http://127.0.0.1:54321' : 'https://obuldanrptloktxcffvn.supabase.co'}/functions/v1/og-images?site=events&eventType=${event.type}&title=${event.meta_title ?? event.title}&description=${event.meta_description ?? event.description}&date=${dayjs(event.date).tz(event.timezone).format(`DD MMM YYYY`)}&duration=${event.duration}`
+  )
+
   const meta = {
-    title: event.meta_title ?? event.title,
+    title: `${event.meta_title ?? event.title} | ${dayjs(event.date).tz(event.timezone).format(`DD MMM YYYY`)} | ${capitalize(event.type)}`,
     description: event.meta_description ?? event.description,
     url: `https://supabase.com/events/${event.slug}`,
+    image: ogImageUrl,
   }
 
   const eventIcons = {
@@ -190,7 +196,9 @@ const EventPage = ({ event }: InferGetStaticPropsType<typeof getStaticProps>) =>
           type: 'article',
           images: [
             {
-              url: `${origin}${router.basePath}/images/events/${event.image ? event.image : event.thumb}`,
+              url:
+                meta.image ??
+                `${origin}${router.basePath}/images/events/${event.image ? event.image : event.thumb}`,
               alt: `${event.title} thumbnail`,
               width: 1200,
               height: 627,

apps/www/public/rss.xml

@@ -1421,26 +1421,26 @@
   <description>Functions, GraphQL, and much more.</description>
   <pubDate>Thu, 14 Apr 2022 22:00:00 GMT</pubDate>
 </item>
-<item>
-  <guid>https://supabase.com/blog/hackathon-bring-the-func</guid>
-  <title>Hackathon: Bring the Func(🕺)</title>
-  <link>https://supabase.com/blog/hackathon-bring-the-func</link>
-  <description>Build open-source projects with our latest features, win limited edition swag and plant a tree!</description>
-  <pubDate>Thu, 31 Mar 2022 22:00:00 GMT</pubDate>
-</item>
 <item>
   <guid>https://supabase.com/blog/supabase-realtime-with-multiplayer-features</guid>
   <title>Supabase Realtime, with Multiplayer Features</title>
   <link>https://supabase.com/blog/supabase-realtime-with-multiplayer-features</link>
   <description>Today we&apos;re announced Realtime, with multiplayer features. Realtime enables broadcast, presence, and listening to database changes delivered over WebSockets.</description>
-  <pubDate>Thu, 31 Mar 2022 22:00:00 GMT</pubDate>
+  <pubDate>Fri, 01 Apr 2022 20:30:00 GMT</pubDate>
+</item>
+<item>
+  <guid>https://supabase.com/blog/hackathon-bring-the-func</guid>
+  <title>Hackathon: Bring the Func(🕺)</title>
+  <link>https://supabase.com/blog/hackathon-bring-the-func</link>
+  <description>Build open-source projects with our latest features, win limited edition swag and plant a tree!</description>
+  <pubDate>Fri, 01 Apr 2022 14:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabrew</guid>
   <title>Supabrew - Never Code Thirsty</title>
   <link>https://supabase.com/blog/supabrew</link>
   <description>A light and refreshing non-alcoholic beer for devs.</description>
-  <pubDate>Thu, 31 Mar 2022 22:00:00 GMT</pubDate>
+  <pubDate>Fri, 01 Apr 2022 09:00:00 GMT</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-edge-functions</guid>

apps/www/types/post.ts

@@ -3,6 +3,7 @@ type PostTypes = {
   type: 'casestudy' | 'blog'
   title: string
   date?: string
+  formattedDate?: string
   coverImage?: string
   author?: string
   excerpt?: string

supabase/functions/og-images/component/Events.tsx

@@ -0,0 +1,64 @@
+import React from 'https://esm.sh/react@18.2.0?deno-std=0.140.0'
+
+type Props = {
+  date: string
+  description: string
+  duration?: string
+  eventType: string
+  title: string
+}
+
+const STORAGE_URL = 'https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public'
+
+const CustomerStories = (props: Props) => {
+  const { title, description, duration, eventType, date } = props
+
+  const bgImageUrl = `${STORAGE_URL}/images/og-images/events/events-og-bg.png`
+  const supabaseLogoUrl = `${STORAGE_URL}/supabase-brand-assets/logos/supabase-logo-wordmark--dark.png`
+
+  return (
+    <div
+      style={{
+        height: '100%',
+        width: '100%',
+        padding: '64px',
+        display: 'flex',
+        flexDirection: 'column',
+        color: '#EDEDED', // foreground-default
+        backgroundColor: '#1C1C1C', // bg-default
+        fontFamily: 'Circular',
+      }}
+    >
+      <img
+        src={bgImageUrl}
+        width="1200px"
+        height="630px"
+        tw="w-[1200px] h-[630px] absolute object-cover"
+      />
+      <div tw="flex flex-row items-center justify-center top-0 mb-20">
+        <img src={supabaseLogoUrl} width="165px" height="31.73px" tw="mr-6" />
+      </div>
+      <div tw="flex flex-row items-center justify-center text-[24px] text-[#B4B4B4]">
+        <span tw="text-[#3ECF8E] uppercase" style={{ fontFamily: 'SourceCode' }}>
+          {eventType}
+        </span>
+        <span tw="h-[21px] w-px bg-[#292929] mx-5"></span>
+        <span tw="mb-1">{date}</span>
+        {duration && (
+          <>
+            <span tw="h-[21px] mt-2 w-px bg-[#292929] mx-5"></span>
+            <span tw="mb-1">Duration: {duration}</span>
+          </>
+        )}
+      </div>
+      <div tw="w-full top-0 flex flex-col justify-between mt-4">
+        <div tw="flex flex-col w-full">
+          <h1 tw="w-3/4 mt-0 mb-2 text-[60px] tracking-tight leading-[105%]">{title}</h1>
+          <p tw="w-3/4 my-0 mt-4 text-[32px] text-[#B4B4B4]">{description}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CustomerStories

supabase/functions/og-images/handler.tsx

@@ -2,6 +2,7 @@ import React from 'https://esm.sh/react@18.2.0?deno-std=0.140.0'
 import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts'
 import CustomerStories from './component/CustomerStories.tsx'
 import Docs from './component/Docs.tsx'
+import Events from './component/Events.tsx'
 
 const corsHeaders = {
   'Access-Control-Allow-Origin': '*',
@@ -48,6 +49,9 @@ export async function handler(req: Request) {
   const type = getParamValue(url, 'type')
   const title = getParamValue(url, 'title', { decodeURI: true })
   const description = getParamValue(url, 'description', { decodeURI: true })
+  const date = getParamValue(url, 'date', { decodeURI: true })
+  const eventType = getParamValue(url, 'eventType')
+  const duration = getParamValue(url, 'duration')
 
   if (!site || !title) {
     return new Response(JSON.stringify({ message: 'missing params' }), {
@@ -89,7 +93,6 @@ export async function handler(req: Request) {
           },
         }
       )
-      break
     case 'customers':
       return new ImageResponse(<CustomerStories title={title} customer={customer} />, {
         width: 1200,
@@ -107,12 +110,43 @@ export async function handler(req: Request) {
           'cdn-cache-control': 'max-age=31536000',
         },
       })
-      break
+    case 'events':
+      return new ImageResponse(
+        (
+          <Events
+            title={title}
+            description={description !== 'undefined' ? description : ''}
+            eventType={eventType}
+            date={date}
+            duration={duration ?? ''}
+          />
+        ),
+        {
+          width: 1200,
+          height: 630,
+          fonts: [
+            {
+              name: 'Circular',
+              data: CIRCULAR_FONT_DATA,
+              style: 'normal',
+            },
+            {
+              name: 'SourceCode',
+              data: MONO_FONT_DATA,
+              style: 'mono',
+            },
+          ],
+          headers: {
+            'content-type': 'image/png',
+            'cache-control': 'public, max-age=31536000, s-maxage=31536000, no-transform, immutable',
+            'cdn-cache-control': 'max-age=31536000',
+          },
+        }
+      )
     default:
       return new Response(JSON.stringify({ message: 'site not found' }), {
         headers: { ...corsHeaders },
         status: 404,
       })
-      break
   }
 }