diff --git a/apps/www/app/api-v2/ticket-og/route.tsx b/apps/www/app/api-v2/ticket-og/route.tsx index a02849cbe49..0820cfa34e9 100644 --- a/apps/www/app/api-v2/ticket-og/route.tsx +++ b/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 */} diff --git a/apps/www/components/LaunchWeek/12/Ticket/ticketThemes.tsx b/apps/www/components/LaunchWeek/12/Ticket/ticketThemes.tsx index c7ebbf7634f..0b5e0c640cf 100644 --- a/apps/www/components/LaunchWeek/12/Ticket/ticketThemes.tsx +++ b/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', }, -} +}) diff --git a/apps/www/components/LaunchWeek/13/Ticket/TicketActions.tsx b/apps/www/components/LaunchWeek/13/Ticket/TicketActions.tsx index 8ccef6b3118..1573281bd97 100644 --- a/apps/www/components/LaunchWeek/13/Ticket/TicketActions.tsx +++ b/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) diff --git a/apps/www/components/LaunchWeek/13/Ticket/TicketForm.tsx b/apps/www/components/LaunchWeek/13/Ticket/TicketForm.tsx index d68b05434ff..a89487ff44f 100644 --- a/apps/www/components/LaunchWeek/13/Ticket/TicketForm.tsx +++ b/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('default') const [realtimeChannel, setRealtimeChannel] = useState

- {DISPLAY_NAME?.split(' ')[0]}'s Ticket + Join {DISPLAY_NAME?.split(' ')[0]}
for Launch Week 13

- - Join {FIRST_NAME} for Supabase Launch Week 13. Claim your ticket for a - chance to win limited swag. + + Claim your own ticket for a chance to win limited swag and to follow all + the announcements.
@@ -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) {