OG image with netlify function

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
-  "explorer.excludeGitIgnore": false,
-  "search.useParentIgnoreFiles": false,
-  "search.useIgnoreFiles": false,
+  "explorer.excludeGitIgnore": true,
+  "search.useParentIgnoreFiles": true,
+  "search.useIgnoreFiles": true,
   "files.watcherExclude": {
     "**/routeTree.gen.ts": true
   },
@@ -23,5 +23,10 @@
   "rust-analyzer.checkOnSave": true,
   "rust-analyzer.check.allTargets": true,
   "rust-analyzer.cargo.targetDir": "target/analyzer",
-  "rust-analyzer.cargo.extraEnv": { "MACOSX_DEPLOYMENT_TARGET": "14.2" }
+  "rust-analyzer.cargo.extraEnv": { "MACOSX_DEPLOYMENT_TARGET": "14.2" },
+  "deno.enable": true,
+  "deno.lint": true,
+  "deno.enablePaths": [
+    "apps/web/netlify/edge-functions"
+  ]
 }

apps/web/netlify.toml

@@ -6,6 +6,10 @@ publish = "dist/client"
 VITE_APP_URL = "https://hyprnote.com"
 NODE_VERSION = "22"
 
+[[edge_functions]]
+function = "og"
+path = "/og"
+
 [images]
 # https://docs.netlify.com/build/image-cdn/overview/#remote-path
 remote_images = [

apps/web/netlify/edge-functions/deno.json

@@ -0,0 +1,7 @@
+{
+  "lock": false,
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "https://esm.sh/react@18.2.0"
+  }
+}

apps/web/netlify/edge-functions/og.tsx

@@ -0,0 +1,76 @@
+// deno-lint-ignore no-import-prefix
+import { ImageResponse } from "https://deno.land/x/og_edge@0.0.6/mod.ts";
+
+export default function handler(req: Request) {
+  const url = new URL(req.url);
+  const title = url.searchParams.get("title") || "Hyprnote";
+  const description = url.searchParams.get("description") || "AI Meeting Notes";
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+          padding: "80px",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "white",
+            borderRadius: "24px",
+            padding: "80px",
+            width: "100%",
+            height: "100%",
+          }}
+        >
+          <div
+            style={{
+              fontSize: 64,
+              fontWeight: 700,
+              color: "#1a202c",
+              textAlign: "center",
+              marginBottom: "24px",
+            }}
+          >
+            {title}
+          </div>
+          <div
+            style={{
+              fontSize: 32,
+              color: "#718096",
+              textAlign: "center",
+            }}
+          >
+            {description}
+          </div>
+          <div
+            style={{
+              position: "absolute",
+              bottom: "80px",
+              fontSize: 36,
+              fontWeight: 700,
+              color: "#667eea",
+            }}
+          >
+            Hyprnote
+          </div>
+        </div>
+      </div>
+    ),
+  );
+}
+
+export const config = {
+  path: "/og",
+  cache: "manual",
+};