Merge pull request #9886 from supabase/opengraph-example

added opengraph example

examples/edge-functions/supabase/functions/opengraph/README.md

@@ -0,0 +1,12 @@
+# Open Graph Image Generation
+
+Generate Open Graph images with Deno and Supabase Edge Functions, no framework needed. This is a fork of the awesome [@vercel/og](https://www.npmjs.com/package/@vercel/og), ported to run on Deno.
+
+- Docs: https://deno.land/x/og_edge@0.0.2
+- Demo: https://zdtdtxajzydjqzuktnqx.functions.supabase.co/opengraph
+
+## Deploy
+
+```bash
+supabase functions deploy opengraph --no-verify-jwt
+```

examples/edge-functions/supabase/functions/opengraph/handler.tsx

@@ -0,0 +1,32 @@
+import React from 'https://esm.sh/react@18.2.0?deno-std=0.140.0'
+import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.2/mod.ts'
+
+export async function handler(req: Request) {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 100,
+          color: 'black',
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          padding: '50px 200px',
+          textAlign: 'center',
+          justifyContent: 'center',
+          alignItems: 'center',
+          display: 'flex',
+        }}
+      >
+        NICE! 🔥
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+      // Supported options: 'twemoji', 'blobmoji', 'noto', 'openmoji', 'fluent', 'fluentFlat'
+      // Default to 'twemoji'
+      emoji: 'twemoji',
+    }
+  )
+}

examples/edge-functions/supabase/functions/opengraph/index.ts

@@ -0,0 +1,12 @@
+// 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 { serve } from 'https://deno.land/std@0.140.0/http/server.ts'
+
+import { handler } from './handler.tsx'
+
+// @ts-ignore
+serve(handler)
+
+// To deploy: supabase functions deploy opengraph --no-verify-jwt