mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 04:15:04 +03:00
Ivan VasilovandJoshen Lim
9fa96977be
This PR fixes some prettier issues: - Bump and unify all prettier versions to 3.7.3 across teh whole repo - Bump the SQL prettier plugin - When running `test:prettier`, check `mdx` files also - Run the new prettier format on all files --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
55 lines
1.4 KiB
Plaintext
55 lines
1.4 KiB
Plaintext
---
|
|
id: 'examples-og-image'
|
|
title: 'Generating OG Images'
|
|
description: 'Generate Open Graph images with Deno and Supabase Edge Functions.'
|
|
video: 'https://www.youtube.com/v/jZgyOJGWayQ'
|
|
---
|
|
|
|
<div class="video-container">
|
|
<iframe
|
|
src="https://www.youtube-nocookie.com/embed/jZgyOJGWayQ"
|
|
frameBorder="1"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
></iframe>
|
|
</div>
|
|
|
|
Generate Open Graph images with Deno and Supabase Edge Functions. [View on GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/opengraph).
|
|
|
|
## Code
|
|
|
|
Create a `handler.tsx` file to construct the OG image in React:
|
|
|
|
```tsx handler.tsx
|
|
import React from 'https://esm.sh/react@18.2.0'
|
|
import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts'
|
|
|
|
export default function handler(req: Request) {
|
|
return new ImageResponse(
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: 128,
|
|
background: 'lavender',
|
|
}}
|
|
>
|
|
Hello OG Image!
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
Create an `index.ts` file to execute the handler on incoming requests:
|
|
|
|
```ts index.ts
|
|
import handler from './handler.tsx'
|
|
|
|
console.log('Hello from og-image Function!')
|
|
|
|
Deno.serve(handler)
|
|
```
|