init commit,
This commit is contained in:
louiscklaw
@@ -0,0 +1,21 @@
|
||||
# Open Graph (OG) Image Generation with Supabase Storage CDN Caching
|
||||
|
||||
Generate Open Graph images with Deno and Supabase Edge Functions and cache the generated image with Supabase Storage CDN.
|
||||
|
||||
- Docs: https://deno.land/x/og_edge@0.0.2
|
||||
- Examples: https://vercel.com/docs/concepts/functions/edge-functions/og-image-examples
|
||||
- Demo: https://obuldanrptloktxcffvn.supabase.co/functions/v1/launchweek-ticket-og?ticketNumber=1234&username=thorwebdev&name=Thor%20%E9%9B%B7%E7%A5%9E%20Schaeff
|
||||
|
||||
## Run locally
|
||||
|
||||
```bash
|
||||
supabase functions serve --no-verify-jwt
|
||||
```
|
||||
|
||||
Navigate to http://localhost:54321/functions/v1/og-image-with-storage-cdn?ticketNumber=3524&username=thorwebdev&name=Thor%20%E9%9B%B7%E7%A5%9E%20Schaeff
|
||||
|
||||
## Deploy
|
||||
|
||||
```bash
|
||||
supabase functions deploy og-image-with-storage-cdn --no-verify-jwt
|
||||
```
|
||||
@@ -0,0 +1,224 @@
|
||||
import React from 'https://esm.sh/react@18.2.0?deno-std=0.177.0'
|
||||
import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts'
|
||||
import { createClient } from 'jsr:@supabase/supabase-js@2'
|
||||
import { corsHeaders } from '../_shared/cors.ts'
|
||||
|
||||
const STORAGE_URL = 'https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lw6'
|
||||
const BACKGROUND_IMAGE_STD = `${STORAGE_URL}/lw6_ticket_regular.png`
|
||||
const BACKGROUND_IMAGE_GOLDEN = `${STORAGE_URL}/lw6_ticket_gold.png`
|
||||
const SUPA_CHECKMARK = `${STORAGE_URL}/supaverified.png`
|
||||
const SUPA_CHECKMARK_GOLD = `${STORAGE_URL}/supaverified_gold.png?v=3`
|
||||
|
||||
// Load custom font
|
||||
const FONT_URL = `${STORAGE_URL}/CircularStd-Book.otf`
|
||||
const font = fetch(new URL(FONT_URL, import.meta.url)).then((res) => res.arrayBuffer())
|
||||
|
||||
export async function handler(req: Request) {
|
||||
const url = new URL(req.url)
|
||||
const ticketNumber = url.searchParams.get('ticketNumber')
|
||||
const username = url.searchParams.get('username') ?? url.searchParams.get('amp;username')
|
||||
const name = url.searchParams.get('name') ?? url.searchParams.get('amp;name')
|
||||
const golden = url.searchParams.get('golden') ?? url.searchParams.get('amp;golden')
|
||||
|
||||
if (!username || !ticketNumber || !name) {
|
||||
return new Response(JSON.stringify({ error: 'missing params' }), {
|
||||
headers: { ...corsHeaders, 'Content-Type': 'application/json' },
|
||||
status: 400,
|
||||
})
|
||||
}
|
||||
|
||||
try {
|
||||
// Try to get image from Supabase Storage CDN.
|
||||
const storageResponse = await fetch(`${STORAGE_URL}/tickets/${username}.png?v=3`)
|
||||
if (storageResponse.ok) return storageResponse
|
||||
|
||||
// Else, generate image ad upload to storage.
|
||||
const fontData = await font
|
||||
const numDigits = `${Number(ticketNumber)}`.length
|
||||
const prefix = `00000000`.slice(numDigits)
|
||||
|
||||
const generatedImage = new ImageResponse(
|
||||
(
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
width: '1200px',
|
||||
height: '630px',
|
||||
backgroundColor: '#000',
|
||||
color: '#fff',
|
||||
fontFamily: '"Circular"',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{/* Background image */}
|
||||
<img
|
||||
width="1200"
|
||||
height="630"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0',
|
||||
zIndex: '-9000',
|
||||
}}
|
||||
src={golden ? BACKGROUND_IMAGE_GOLDEN : BACKGROUND_IMAGE_STD}
|
||||
/>
|
||||
{/* GitHub Avatar image */}
|
||||
<img
|
||||
width="200"
|
||||
height="200"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '215',
|
||||
left: '155',
|
||||
borderRadius: 100,
|
||||
}}
|
||||
src={`https://github.com/${username}.png`}
|
||||
/>
|
||||
{/* Name & username */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
position: 'absolute',
|
||||
top: '215',
|
||||
left: '400',
|
||||
width: '550',
|
||||
height: '200',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'clip',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
color: 'transparent',
|
||||
backgroundImage:
|
||||
'linear-gradient(90deg, #F8F9FA 1.73%, rgba(248, 249, 250, 0.5) 100%)',
|
||||
backgroundClip: 'text',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontSize: '60px',
|
||||
lineHeight: '60px',
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</p>
|
||||
</div>
|
||||
{/* Username and supaverified checkmark */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
fontSize: '25',
|
||||
color: golden ? '#fff' : '#A0A0A0',
|
||||
}}
|
||||
>
|
||||
<span>{`@${username}`}</span>
|
||||
<span
|
||||
style={{
|
||||
marginTop: '2',
|
||||
marginLeft: '10',
|
||||
}}
|
||||
>
|
||||
<img width="32" height="32" src={golden ? SUPA_CHECKMARK_GOLD : SUPA_CHECKMARK} />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Date */}
|
||||
<p
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '520',
|
||||
left: '400',
|
||||
fontSize: '22',
|
||||
color: golden ? '#fff' : '#A0A0A0',
|
||||
}}
|
||||
>
|
||||
December 12th 2022
|
||||
</p>
|
||||
{/* URL */}
|
||||
<p
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '520',
|
||||
left: '680',
|
||||
fontSize: '22',
|
||||
color: golden ? '#fff' : '#A0A0A0',
|
||||
}}
|
||||
>
|
||||
supabase.com/launch-week
|
||||
</p>
|
||||
</div>
|
||||
{/* Ticket No */}
|
||||
<div
|
||||
style={{
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'absolute',
|
||||
bottom: '225',
|
||||
right: '-165',
|
||||
width: '575',
|
||||
height: '175',
|
||||
transform: 'rotate(90deg)',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontSize: '70',
|
||||
}}
|
||||
>
|
||||
{`No ${prefix}${ticketNumber}`}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
{
|
||||
width: 1200,
|
||||
height: 630,
|
||||
fonts: [
|
||||
{
|
||||
name: 'Circular',
|
||||
data: fontData,
|
||||
style: 'normal',
|
||||
},
|
||||
],
|
||||
headers: {
|
||||
'content-type': 'image/png',
|
||||
'cache-control': 'public, max-age=31536000, s-maxage=31536000, no-transform, immutable',
|
||||
'cdn-cache-control': 'max-age=31536000',
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
const supabaseAdminClient = createClient(
|
||||
// Supabase API URL - env var exported by default when deployed.
|
||||
Deno.env.get('SUPABASE_URL') ?? '',
|
||||
// Supabase API SERVICE ROLE KEY - env var exported by default when deployed.
|
||||
Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
|
||||
)
|
||||
|
||||
// Upload image to storage.
|
||||
const { error } = await supabaseAdminClient.storage
|
||||
.from('images')
|
||||
.upload(`lw6/tickets/${username}.png`, generatedImage.body!, {
|
||||
contentType: 'image/png',
|
||||
cacheControl: '31536000',
|
||||
upsert: false,
|
||||
})
|
||||
if (error) throw error
|
||||
|
||||
return await fetch(`${STORAGE_URL}/tickets/${username}.png?v=3`)
|
||||
} catch (error) {
|
||||
return new Response(JSON.stringify({ error: error.message }), {
|
||||
headers: { ...corsHeaders, 'Content-Type': 'application/json' },
|
||||
status: 400,
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
// Follow this setup guide to integrate the Deno language server with your editor:
|
||||
// https://deno.land/manual/getting_started/setup_your_environment
|
||||
// This enables autocomplete, go to definition, etc.
|
||||
|
||||
import { handler } from './handler.tsx'
|
||||
|
||||
console.log(`Function "og-image-with-storage-cdn" up and running!`)
|
||||
|
||||
Deno.serve(handler)
|
||||
Reference in New Issue
Block a user