feat(ATL-62): add per-user OG image metadata

src/app/[user]/opengraph-image.tsx

@@ -0,0 +1,124 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+export const alt = "TwelveCash user profile";
+export const size = {
+  width: 1200,
+  height: 630,
+};
+export const contentType = "image/png";
+
+const DEFAULT_DOMAIN = "twelve.cash";
+
+function parseUserParam(userParam: string) {
+  const decoded = decodeURIComponent(userParam);
+  const [user, domain = DEFAULT_DOMAIN] = decoded.split("@");
+  return { user, domain };
+}
+
+export default async function Image({
+  params,
+}: {
+  params: Promise<{ user: string }>;
+}) {
+  const { user: userParam } = await params;
+  const { user, domain } = parseUserParam(userParam);
+  const displayName = `${user}@${domain}`;
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: "100%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          background:
+            "linear-gradient(135deg, #120428 0%, #4c1d95 55%, #8cf506 140%)",
+          color: "white",
+          padding: "56px 64px",
+          fontFamily: "system-ui, sans-serif",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            fontSize: 34,
+            opacity: 0.95,
+          }}
+        >
+          <div>TwelveCash</div>
+          <div style={{ color: "#8cf506" }}>Simple Bitcoin Usernames</div>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+          <div
+            style={{
+              display: "flex",
+              fontSize: 28,
+              letterSpacing: 4,
+              textTransform: "uppercase",
+              color: "#d8b4fe",
+            }}
+          >
+            Pay me in bitcoin
+          </div>
+          <div
+            style={{
+              display: "flex",
+              flexWrap: "wrap",
+              fontSize: 88,
+              fontWeight: 700,
+              lineHeight: 1.05,
+              maxWidth: "100%",
+            }}
+          >
+            {displayName}
+          </div>
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-end",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 8,
+              fontSize: 30,
+            }}
+          >
+            <div style={{ color: "#e9d5ff" }}>BOLT 12 offers • Silent payments • more</div>
+            <div style={{ opacity: 0.8, fontSize: 24 }}>twelve.cash</div>
+          </div>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 112,
+              height: 112,
+              borderRadius: 9999,
+              backgroundColor: "#8cf506",
+              color: "#120428",
+              fontSize: 60,
+              fontWeight: 700,
+            }}
+          >
+            ₿
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+    },
+  );
+}

src/app/[user]/page.tsx

@@ -1,15 +1,52 @@
-import Bip353Box from "../components/Bip353Box";
-import CopyUserLinkButton from "../features/CopyUserLinkButton";
-import CopyBip353Button from "../features/CopyBip353Button";
-import PaymentDetail from "../components/PaymentDetail";
+import type { Metadata } from "next";
 import Button from "../components/Button";
 import { ArrowLeftIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import UserDetails from "../features/UserDetails";
 
+const DEFAULT_DOMAIN = "twelve.cash";
+
+function parseUserParam(userParam: string) {
+  const decoded = decodeURIComponent(userParam);
+  const [user, domain = DEFAULT_DOMAIN] = decoded.split("@");
+  return { user, domain };
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ user: string }>;
+}): Promise<Metadata> {
+  const { user: userParam } = await params;
+  const { user, domain } = parseUserParam(userParam);
+  const displayName = `${user}@${domain}`;
+  const description = `Send bitcoin to ${displayName} with TwelveCash.`;
+
+  return {
+    title: `${displayName} | TwelveCash`,
+    description,
+    openGraph: {
+      title: `${displayName} | TwelveCash`,
+      description,
+      images: [{ url: `/${encodeURIComponent(displayName)}/opengraph-image` }],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: `${displayName} | TwelveCash`,
+      description,
+      images: [`/${encodeURIComponent(displayName)}/opengraph-image`],
+    },
+    alternates: {
+      canonical: `/${encodeURIComponent(displayName)}`,
+    },
+    other: {
+      "og:image:alt": `${displayName} on TwelveCash`,
+    },
+  };
+}
+
 export default async function User({ params }: { params: Promise<{ user: string }> }) {
   const { user: userParam } = await params;
-  const decoded = decodeURIComponent(userParam);
-  const [user, domain] = decoded.split("@");
+  const { user, domain } = parseUserParam(userParam);
   return (
     <main className="mx-auto max-w-4xl flex flex-col gap-9 w-full text-center p-2 md:p-6">
       <UserDetails user={user} domain={domain} />

src/app/layout.tsx

@@ -9,26 +9,29 @@ import Header from "./components/Header";
 
 const urbanist = Urbanist({ subsets: ["latin"] });
 
-const title = "TwelveCash | Simple Bitcoin Usernames"
-const description = "Get your own TwelveCash address. Supports BOLT 12 offers, Silent payments, and more!"
-const poster = "https://twelve.cash/twelve-cash-poster.png"
+const title = "TwelveCash | Simple Bitcoin Usernames";
+const description =
+  "Get your own TwelveCash address. Supports BOLT 12 offers, Silent payments, and more!";
+const poster = "/twelve-cash-poster.png";
 
 export const metadata: Metadata = {
-  title: title,
-  description: description,
-  icons: [{ url: '/favicon.ico', rel: 'icon' }],
+  metadataBase: new URL(process.env.NEXT_PUBLIC_URL || "https://twelve.cash"),
+  title,
+  description,
+  icons: [{ url: "/favicon.ico", rel: "icon" }],
   openGraph: {
-      title: title,
-      description: description,
-      images: [{ url: poster }],
+    title,
+    description,
+    images: [{ url: poster }],
   },
   twitter: {
-      site: "TwelveCash",
-      description: description,
-      title: title,
-      images: poster
-  }
-}
+    card: "summary_large_image",
+    site: "@twelvecash",
+    title,
+    description,
+    images: [poster],
+  },
+};
 
 export default function RootLayout({
   children,