add opengraph image + embed

src/app/app.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Demo = dynamic(() => import("~/components/Demo"), {
+  ssr: false,
+});
+
+export default function App() {
+  return (
+      <Demo />
+  );
+}

src/app/opengraph-image.tsx

@@ -0,0 +1,22 @@
+import { ImageResponse } from "next/og";
+
+export const alt = "Farcaster Frames V2 Demo";
+export const size = {
+  width: 800,
+  height: 800,
+};
+
+export const contentType = "image/png";
+
+export default async function Image() {
+  return new ImageResponse(
+    (
+      <div tw="h-full w-full flex flex-col justify-center items-center relative">
+        <h1 tw="text-6xl">Frames v2 Demo</h1>
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}

src/app/page.tsx

@@ -1,15 +1,38 @@
-"use client";
+import { Metadata } from "next";
+import App from "./app";
 
-import dynamic from "next/dynamic";
+const appUrl = process.env.NEXT_PUBLIC_URL;
 
-const Demo = dynamic(() => import("~/components/Demo"), {
+const frame = {
-  ssr: false,
+  version: "next",
-});
+  imageUrl: `${appUrl}/opengraph-image`,
+  button: {
+    title: "Launch Frame",
+    action: {
+      type: "launch_frame",
+      name: "Farcaster Frames v2 Demo",
+      url: appUrl,
+      splashImageUrl: `${appUrl}/splash.png`,
+      splashBackgroundColor: "#f7f7f7",
+    },
+  },
+};
+
+export const revalidate = 300;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: "Farcaster Frames v2 Demo",
+    openGraph: {
+      title: "Farcaster Frames v2 Demo",
+      description: "A Farcaster Frames v2 demo app.",
+    },
+    other: {
+      "fc:frame": JSON.stringify(frame),
+    },
+  };
+}
 
 export default function Home() {
-  return (
+  return (<App />);
-    <main className="min-h-screen flex flex-col p-4">
-      <Demo />
-    </main>
-  );
 }