From 17db13f5d5aa14708dfdf6c8e66e6276db37a306 Mon Sep 17 00:00:00 2001
From: thorwebdev <thor@supabase.io>
Date: Tue, 29 Nov 2022 22:31:33 +0800
Subject: [PATCH] feat: add og-image example docs page.

---
 apps/docs/components/FunctionsExamples.tsx    |  7 +--
 .../NavigationMenu.constants.ts               |  9 ++-
 .../{examples.mdx => examples/index.mdx}      |  0
 .../guides/functions/examples/og-image.mdx    | 60 +++++++++++++++++++
 4 files changed, 71 insertions(+), 5 deletions(-)
 rename apps/docs/pages/guides/functions/{examples.mdx => examples/index.mdx} (100%)
 create mode 100644 apps/docs/pages/guides/functions/examples/og-image.mdx

diff --git a/apps/docs/components/FunctionsExamples.tsx b/apps/docs/components/FunctionsExamples.tsx
index f2f603b4b98..a741c0c1751 100644
--- a/apps/docs/components/FunctionsExamples.tsx
+++ b/apps/docs/components/FunctionsExamples.tsx
@@ -33,10 +33,9 @@ const examples = [
     href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/read-storage/index.ts',
   },
   {
-    name: 'OpenGraph Image Generation',
-    description:
-      'Generate Open Graph images with Deno and Supabase Edge Functions, no framework needed.',
-    href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/opengraph',
+    name: 'Open Graph Image Generation',
+    description: 'Generate Open Graph images with Deno and Supabase Edge Functions.',
+    href: '/guides/functions/examples/og-image',
   },
   {
     name: 'OG Image Generation & Storage CDN Caching',
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 15ed4da6f54..004ce383c5d 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -316,8 +316,15 @@ export const functions = {
   items: [
     { name: 'Overview', url: '/guides/functions', items: [] },
     { name: 'Auth', url: '/guides/functions/auth', items: [] },
-    { name: 'Examples', url: '/guides/functions/examples', items: [] },
     { name: 'CI/CD Workflow', url: '/guides/functions/cicd-workflow', items: [] },
+    {
+      name: 'Examples',
+      url: '/guides/functions/examples',
+      items: [
+        { name: 'Overview', url: '/guides/functions/examples', items: [] },
+        { name: 'OG Image', url: '/guides/functions/examples/og-image', items: [] },
+      ],
+    },
   ],
 }
 
diff --git a/apps/docs/pages/guides/functions/examples.mdx b/apps/docs/pages/guides/functions/examples/index.mdx
similarity index 100%
rename from apps/docs/pages/guides/functions/examples.mdx
rename to apps/docs/pages/guides/functions/examples/index.mdx
diff --git a/apps/docs/pages/guides/functions/examples/og-image.mdx b/apps/docs/pages/guides/functions/examples/og-image.mdx
new file mode 100644
index 00000000000..8f8c8a8ada5
--- /dev/null
+++ b/apps/docs/pages/guides/functions/examples/og-image.mdx
@@ -0,0 +1,60 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+  id: 'examples-og-image',
+  title: 'Generating OG Images',
+  description: 'Generate Open Graph images with Deno and Supabase Edge Functions.',
+}
+
+<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).
+
+<CH.Code>
+
+```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>
+    )
+  )
+}
+```
+
+```ts index.ts
+import { serve } from 'https://deno.land/std@0.131.0/http/server.ts'
+import handler from './handler.tsx'
+
+console.log('Hello from og-image Function!')
+
+serve(handler)
+```
+
+</CH.Code>
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page