mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 10:25:06 +03:00
Vaibhav
549c1fb6ca
## TL;DR aligns the remaining Phase 2 Edge Functions docs snippets with `@supabase/server` ## Whats Fixed? updated outdated imports and version references, and refreshed JSON examples to use Response.json() where it makes sense. left non-JSON responses as is where the integration or format actually needs them ## Ref: - towards COM-269 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Updated numerous Edge Function guides and examples to use modern `npm:`/`jsr:` import specifiers instead of legacy Deno URL imports. * Standardized success and error responses to return JSON consistently (using `Response.json()` and equivalent helpers) and added/clarified appropriate HTTP status codes. * Improved example error payload shapes in several guides for clearer, structured failures. * **Chores** * Refreshed version ranges in documentation and examples across SDKs and client libraries. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
58 lines
1.5 KiB
Plaintext
58 lines
1.5 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 { ImageResponse } from 'npm:@vercel/og@^0'
|
|
import React from 'npm:react@^19'
|
|
|
|
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 { withSupabase } from 'npm:@supabase/server@^1'
|
|
|
|
import handler from './handler.tsx'
|
|
|
|
console.log('Hello from og-image Function!')
|
|
|
|
// Public image endpoint, so deploy with --no-verify-jwt.
|
|
export default { fetch: withSupabase({ auth: 'none' }, handler) }
|
|
```
|