regular theme based og

apps/www/app/api-v2/ticket-og/route.tsx

@@ -61,7 +61,7 @@ export async function GET(req: Request, res: Response) {
     const { data: user, error } = await supabaseAdminClient
       .from(LW_MATERIALIZED_VIEW)
       .select(
-        'id, name, shared_on_twitter, shared_on_linkedin, platinum, secret, role, company, location'
+        'id, name, metadata, shared_on_twitter, shared_on_linkedin, platinum, secret, role, company, location'
       )
       .eq('launch_week', 'lw13')
       .eq('username', username)
@@ -74,10 +74,13 @@ export async function GET(req: Request, res: Response) {
       name,
       secret,
       platinum: isPlatinum,
+      metadata,
       shared_on_twitter: sharedOnTwitter,
       shared_on_linkedin: sharedOnLinkedIn,
     } = user
 
+    const isDark = metadata.theme !== 'light'
+
     const platinum = isPlatinum ?? (!!sharedOnTwitter && !!sharedOnLinkedIn) ?? false
     if (assumePlatinum && !platinum)
       return await fetch(`${STORAGE_URL}/assets/platinum_no_meme.jpg`)
@@ -85,9 +88,9 @@ export async function GET(req: Request, res: Response) {
     // Generate image and upload to storage.
     const ticketType = secret ? 'secret' : platinum ? 'platinum' : 'regular'
 
-    const STYLING_CONFIG = {
-      TICKET_FOREGROUND: themes[ticketType].TICKET_FOREGROUND,
-    }
+    const STYLING_CONFIG = (isDark?: boolean) => ({
+      TICKET_FOREGROUND: themes(isDark)[ticketType].TICKET_FOREGROUND,
+    })
 
     const fontData = await font
     const monoFontData = await mono_font
@@ -98,20 +101,20 @@ export async function GET(req: Request, res: Response) {
     const USERNAME_WIDTH = 400
     const DISPLAY_NAME = name || username
 
-    const BACKGROUND = {
+    const BACKGROUND = (isDark?: boolean) => ({
       regular: {
-        LOGO: `${STORAGE_URL}/assets/supabase/supabase-logo-icon.png`,
-        BACKGROUND_IMG: `${STORAGE_URL}/assets/ticket-og-bg.png`,
+        LOGO: `${STORAGE_URL}/assets/supabase/supabase-logo-icon.png?v1`,
+        BACKGROUND_IMG: `${STORAGE_URL}/assets/ticket-og-bg-regular-${isDark ? 'dark' : 'light'}.png?v1`,
       },
       platinum: {
-        LOGO: `${STORAGE_URL}/assets/supabase/supabase-logo-icon.png`,
-        BACKGROUND_IMG: `${STORAGE_URL}/assets/ticket-og-bg.png?ASdf`,
+        LOGO: `${STORAGE_URL}/assets/supabase/supabase-logo-icon.png?v1`,
+        BACKGROUND_IMG: `${STORAGE_URL}/assets/ticket-og-bg-platinum.png?v1`,
       },
       secret: {
-        LOGO: `${STORAGE_URL}/assets/supabase/supabase-logo-icon-white.png`,
-        BACKGROUND_IMG: `${STORAGE_URL}/assets/ticket-og-bg.png`,
+        LOGO: `${STORAGE_URL}/assets/supabase/supabase-logo-icon-white.png?v1`,
+        BACKGROUND_IMG: `${STORAGE_URL}/assets/ticket-og-bg.png?v1`,
       },
-    }
+    })
 
     const generatedTicketImage = new ImageResponse(
       (
@@ -123,7 +126,7 @@ export async function GET(req: Request, res: Response) {
               position: 'relative',
               fontFamily: '"Circular"',
               overflow: 'hidden',
-              color: STYLING_CONFIG.TICKET_FOREGROUND,
+              color: STYLING_CONFIG(isDark).TICKET_FOREGROUND,
               display: 'flex',
               flexDirection: 'column',
               padding: '60px',
@@ -143,7 +146,7 @@ export async function GET(req: Request, res: Response) {
                 zIndex: '0',
                 backgroundSize: 'cover',
               }}
-              src={BACKGROUND[ticketType].BACKGROUND_IMG}
+              src={BACKGROUND(isDark)[ticketType].BACKGROUND_IMG}
             />
 
             {/* Name & username */}

apps/www/components/LaunchWeek/12/Ticket/ticketThemes.tsx

@@ -1,6 +1,6 @@
-export const themes = {
+export const themes = (isDark?: boolean) => ({
   regular: {
-    TICKET_FOREGROUND: '#FAFAFA',
+    TICKET_FOREGROUND: isDark ? '#1F1F1F' : '#FAFAFA',
   },
   platinum: {
     TICKET_FOREGROUND: '#1F1F1F',
@@ -8,4 +8,4 @@ export const themes = {
   secret: {
     TICKET_FOREGROUND: '#EDEDED',
   },
-}
+})

apps/www/components/LaunchWeek/13/Ticket/TicketActions.tsx

@@ -1,6 +1,7 @@
 import { useBreakpoint } from 'common'
 import dayjs from 'dayjs'
 import { Check } from 'lucide-react'
+import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'
 import { Button, cn } from 'ui'
@@ -9,6 +10,7 @@ import { useParams } from '~/hooks/useParams'
 import { LW_URL, TWEET_TEXT, TWEET_TEXT_PLATINUM, TWEET_TEXT_SECRET } from '~/lib/constants'
 
 export default function TicketActions() {
+  const { resolvedTheme } = useTheme()
   const { userData, supabase } = useConfData()
   const { platinum, username, metadata, secret: hasSecretTicket } = userData
   const [_imgReady, setImgReady] = useState(false)
@@ -53,7 +55,7 @@ export default function TicketActions() {
           .from(TICKETS_TABLE)
           .update({
             shared_on_twitter: 'now',
-            metadata: { ...metadata, hasSharedSecret: hasSecretTicket },
+            metadata: { ...metadata, theme: resolvedTheme, hasSharedSecret: hasSecretTicket },
           })
           .eq('launch_week', 'lw13')
           .eq('username', username)
@@ -62,7 +64,7 @@ export default function TicketActions() {
           .from(TICKETS_TABLE)
           .update({
             shared_on_linkedin: 'now',
-            metadata: { ...metadata, hasSharedSecret: hasSecretTicket },
+            metadata: { ...metadata, theme: resolvedTheme, hasSharedSecret: hasSecretTicket },
           })
           .eq('launch_week', 'lw13')
           .eq('username', username)

apps/www/components/LaunchWeek/13/Ticket/TicketForm.tsx

@@ -7,10 +7,12 @@ import { useKey } from 'react-use'
 
 import { useCommandMenuOpen } from 'ui-patterns'
 import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
+import { useTheme } from 'next-themes'
 
 type FormState = 'default' | 'loading' | 'error'
 
 export default function TicketForm() {
+  const { resolvedTheme } = useTheme()
   const [formState, setFormState] = useState<FormState>('default')
   const [realtimeChannel, setRealtimeChannel] = useState<ReturnType<
     SupabaseClient['channel']
@@ -36,6 +38,7 @@ export default function TicketForm() {
             email,
             name,
             username,
+            metadata: { theme: resolvedTheme },
             referred_by: router.query?.referral ?? null,
           })
           .select()

apps/www/components/LaunchWeek/hooks/use-conf-data.ts

@@ -24,6 +24,7 @@ export type UserData = {
     hasSharedSecret?: boolean
     hideAvatar?: boolean
     hideMetadata?: boolean
+    theme?: string
   }
   shared_on_twitter?: string
   shared_on_linkedin?: string

apps/www/pages/launch-week/tickets/[username].tsx

@@ -90,11 +90,11 @@ export default function UsernamePage({ user, ogImageUrl }: Props) {
                     <div className="lg:h-full w-full max-w-lg gap-8 flex flex-col items-center justify-center lg:items-start lg:justify-center text-center lg:text-left">
                       <div className="flex flex-col items-center justify-center lg:justify-start lg:items-start gap-2 text-foreground text-center md:text-left max-w-sm">
                         <h1 className="text-foreground text-2xl">
-                          {DISPLAY_NAME?.split(' ')[0]}'s Ticket
+                          Join {DISPLAY_NAME?.split(' ')[0]} <br /> for Launch Week 13
                         </h1>
-                        <span className="text-foreground-light text-2xl">
-                          Join {FIRST_NAME} for Supabase Launch Week 13. Claim your ticket for a
-                          chance to win limited swag.
+                        <span className="text-foreground-lighter">
+                          Claim your own ticket for a chance to win limited swag and to follow all
+                          the announcements.
                         </span>
                       </div>
                       <div>
@@ -141,9 +141,10 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 
   // fetch the normal ticket
   // stores the og images in supabase storage
-  fetch(`${SITE_URL}/api-v2/ticket-og?username=${encodeURIComponent(username ?? '')}`)
-
-  // supabaseAdmin.functions.invoke(`lw13-ticket-og?username=${encodeURIComponent(username ?? '')}`)
+  fetch(
+    // @ts-ignore
+    `${SITE_URL}/api-v2/ticket-og?username=${encodeURIComponent(username ?? '')}`
+  )
 
   // fetch a specific user
   if (username) {