feat: add og-image example docs page.

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',

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: [] },
+      ],
+    },
   ],
 }
 

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