add additional embeds + routes

src/app/app.tsx

@@ -6,8 +6,8 @@ const Demo = dynamic(() => import("~/components/Demo"), {
   ssr: false,
 });
 
-export default function App() {
+export default function App(
-  return (
+  { title }: { title?: string } = { title: "Frames v2 Demo" }
-      <Demo />
+) {
-  );
+  return <Demo title={title} />;
 }

src/app/frames/hello/[name]/opengraph-image.tsx

@@ -0,0 +1,32 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+
+export const alt = "Hello Frame";
+export const size = {
+  width: 600,
+  height: 400,
+};
+
+export const contentType = "image/png";
+
+interface Props {
+  params: Promise<{
+    name: string;
+  }>;
+}
+
+export default async function Image({ params }: Props) {
+  const { name } = await params;
+
+  return new ImageResponse(
+    (
+      <div tw="h-full w-full flex flex-col justify-center items-center relative">
+        <h1 tw="text-6xl">Hello, {name}</h1>
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}

src/app/frames/hello/[name]/page.tsx

@@ -0,0 +1,47 @@
+import { Metadata } from "next";
+import App from "~/app/app";
+
+const appUrl = process.env.NEXT_PUBLIC_URL;
+
+interface Props {
+  params: Promise<{
+    name: string;
+  }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { name } = await params;
+
+  const frame = {
+    version: "next",
+    imageUrl: `${appUrl}/opengraph-image`,
+    button: {
+      title: "Launch Frame",
+      action: {
+        type: "launch_frame",
+        name: "Farcaster Frames v2 Demo",
+        url: `${appUrl}/hello/${name}/`,
+        splashImageUrl: `${appUrl}/splash.png`,
+        splashBackgroundColor: "#f7f7f7",
+      },
+    },
+  };
+
+  return {
+    title: `Hello, ${name}`,
+    description: `A personalized hello frame for ${name}`,
+    openGraph: {
+      title: `Hello, ${name}`,
+      description: `A personalized hello frame for ${name}`,
+    },
+    other: {
+      "fc:frame": JSON.stringify(frame),
+    },
+  };
+}
+
+export default async function HelloNameFrame({ params }: Props) {
+  const { name } = await params;
+
+  return <App title={`Hello, ${name}`} />;
+}

src/app/frames/hello/opengraph-image.tsx

@@ -0,0 +1,24 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+
+export const alt = "Hello Frame";
+export const size = {
+  width: 600,
+  height: 400,
+};
+
+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">Hello, world!</h1>
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}

src/app/frames/hello/page.tsx

@@ -0,0 +1,35 @@
+import { Metadata } from "next";
+import App from "~/app/app";
+
+const appUrl = process.env.NEXT_PUBLIC_URL;
+
+const frame = {
+  version: "next",
+  imageUrl: `${appUrl}/hello/opengraph-image`,
+  button: {
+    title: "Launch Frame",
+    action: {
+      type: "launch_frame",
+      name: "Farcaster Frames v2 Demo",
+      url: `${appUrl}/hello/`,
+      splashImageUrl: `${appUrl}/splash.png`,
+      splashBackgroundColor: "#f7f7f7",
+    },
+  },
+};
+
+export const metadata: Metadata = {
+  title: "Hello, world!",
+  description: "A simple hello world frame",
+  openGraph: {
+    title: "Hello, world!",
+    description: "A simple hello world frame",
+  },
+  other: {
+    "fc:frame": JSON.stringify(frame),
+  },
+};
+
+export default function HelloFrame() {
+  return <App title={"Hello, world!"} />;
+}

src/app/opengraph-image.tsx

@@ -2,8 +2,8 @@ import { ImageResponse } from "next/og";
 
 export const alt = "Farcaster Frames V2 Demo";
 export const size = {
-  width: 800,
+  width: 600,
-  height: 800,
+  height: 400,
 };
 
 export const contentType = "image/png";

src/components/Demo.tsx

@@ -14,7 +14,9 @@ import { config } from "~/components/providers/WagmiProvider";
 import { Button } from "~/components/ui/Button";
 import { truncateAddress } from "~/lib/truncateAddress";
 
-export default function Demo() {
+export default function Demo(
+  { title }: { title?: string } = { title: "Frames v2 Demo" }
+) {
   const [isSDKLoaded, setIsSDKLoaded] = useState(false);
   const [context, setContext] = useState<FrameContext>();
   const [isContextOpen, setIsContextOpen] = useState(false);
@@ -123,7 +125,7 @@ export default function Demo() {
 
   return (
     <div className="w-[300px] mx-auto py-4 px-2">
-      <h1 className="text-2xl font-bold text-center mb-4">Frames v2 Demo</h1>
+      <h1 className="text-2xl font-bold text-center mb-4">{title}</h1>
 
       <div className="mb-4">
         <h2 className="font-2xl font-bold">Context</h2>