From ccdf86811302c100702396b7640fd4dc8ca4c67c Mon Sep 17 00:00:00 2001
From: Lakshan Perera <lakshan@laktek.com>
Date: Thu, 27 Oct 2022 16:53:53 +1100
Subject: [PATCH 1/3] added opengraph example

---
 .../supabase/functions/opengraph/handler.tsx  | 31 +++++++++++++++++++
 .../supabase/functions/opengraph/index.ts     |  6 ++++
 2 files changed, 37 insertions(+)
 create mode 100644 examples/edge-functions/supabase/functions/opengraph/handler.tsx
 create mode 100644 examples/edge-functions/supabase/functions/opengraph/index.ts

diff --git a/examples/edge-functions/supabase/functions/opengraph/handler.tsx b/examples/edge-functions/supabase/functions/opengraph/handler.tsx
new file mode 100644
index 00000000000..6a206a09ade
--- /dev/null
+++ b/examples/edge-functions/supabase/functions/opengraph/handler.tsx
@@ -0,0 +1,31 @@
+import React from "https://esm.sh/react@18.2.0";
+import { ImageResponse } from "https://deno.land/x/og_edge/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",
+      }}
+    >
+      👋, It works!
+    </div>,
+    {
+      width: 1200,
+      height: 630,
+      // Supported options: 'twemoji', 'blobmoji', 'noto', 'openmoji', 'fluent', 'fluentFlat'
+      // Default to 'twemoji'
+      emoji: "twemoji",
+    },
+  );
+}
+
diff --git a/examples/edge-functions/supabase/functions/opengraph/index.ts b/examples/edge-functions/supabase/functions/opengraph/index.ts
new file mode 100644
index 00000000000..5a7c5c38685
--- /dev/null
+++ b/examples/edge-functions/supabase/functions/opengraph/index.ts
@@ -0,0 +1,6 @@
+import { serve } from "https://deno.land/std@0.140.0/http/server.ts";
+
+import {handler} from './handler.tsx'
+
+// @ts-ignore
+serve(handler);

From d536a899a0071325b7d9c1ace5a0e870b7575b2b Mon Sep 17 00:00:00 2001
From: thorwebdev <thor@supabase.io>
Date: Thu, 27 Oct 2022 15:14:43 +0800
Subject: [PATCH 2/3] chore: cleanup

---
 .../supabase/functions/opengraph/handler.tsx  | 47 ++++++++++---------
 .../supabase/functions/opengraph/index.ts     | 12 +++--
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/examples/edge-functions/supabase/functions/opengraph/handler.tsx b/examples/edge-functions/supabase/functions/opengraph/handler.tsx
index 6a206a09ade..c5448aa74db 100644
--- a/examples/edge-functions/supabase/functions/opengraph/handler.tsx
+++ b/examples/edge-functions/supabase/functions/opengraph/handler.tsx
@@ -1,31 +1,32 @@
-import React from "https://esm.sh/react@18.2.0";
-import { ImageResponse } from "https://deno.land/x/og_edge/mod.ts";
+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",
-      }}
-    >
-      👋, It works!
-    </div>,
+  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",
-    },
-  );
+      emoji: 'twemoji',
+    }
+  )
 }
-
diff --git a/examples/edge-functions/supabase/functions/opengraph/index.ts b/examples/edge-functions/supabase/functions/opengraph/index.ts
index 5a7c5c38685..e16e8b4d5c6 100644
--- a/examples/edge-functions/supabase/functions/opengraph/index.ts
+++ b/examples/edge-functions/supabase/functions/opengraph/index.ts
@@ -1,6 +1,12 @@
-import { serve } from "https://deno.land/std@0.140.0/http/server.ts";
+// 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'
+import { serve } from 'https://deno.land/std@0.140.0/http/server.ts'
+
+import { handler } from './handler.tsx'
 
 // @ts-ignore
-serve(handler);
+serve(handler)
+
+// To deploy: supabase functions deploy opengraph --no-verify-jwt

From fc41f3f66de1e3654b7c08d640f230aa165cfd28 Mon Sep 17 00:00:00 2001
From: thorwebdev <thor@supabase.io>
Date: Thu, 27 Oct 2022 15:19:05 +0800
Subject: [PATCH 3/3] chore: add readme.

---
 .../supabase/functions/opengraph/README.md           | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 examples/edge-functions/supabase/functions/opengraph/README.md

diff --git a/examples/edge-functions/supabase/functions/opengraph/README.md b/examples/edge-functions/supabase/functions/opengraph/README.md
new file mode 100644
index 00000000000..a8a337e0065
--- /dev/null
+++ b/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
+```