Add banner-led event social previews and refresh Open Graph branding

apps/web/src/app/e/[slug]/opengraph-image.tsx

@@ -0,0 +1,13 @@
+import { createServerCaller } from "@/trpc/server";
+import { renderSocialImage } from "@/server/social-image";
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+export const alt = "Shared event album on Manyangles";
+export const size = { width: 1200, height: 630 };
+export const contentType = "image/png";
+export default async function EventImage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const caller = await createServerCaller();
+  const event = await caller.event.bySlug(slug).catch(() => null);
+  return renderSocialImage(event ?? undefined);
+}

apps/web/src/app/e/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import { notFound } from "next/navigation";
+import type { Metadata } from "next";
 import { MapPinIcon } from "lucide-react";
 import { EventMap } from "@/components/event-map";
 import { createServerCaller } from "@/trpc/server";
@@ -8,6 +9,19 @@ import { galleryIsPublic } from "@/lib/publishing";
 import { GuestGallery } from "./guest-gallery";
 import { GuestUpload } from "./guest-upload";
 
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params;
+  const caller = await createServerCaller();
+  const event = await caller.event.bySlug(slug).catch(() => null);
+  if (!event) return { title: "Shared album", robots: { index: false, follow: false } };
+  const description = "Share your photos and memories on Manyangles.";
+  return {
+    title: event.title, description,
+    openGraph: { title: event.title, description, type: "website" },
+    twitter: { card: "summary_large_image", title: event.title, description },
+  };
+}
+
 export default async function EventPage({
   params,
 }: {

apps/web/src/app/opengraph-image.tsx

@@ -1,60 +1,6 @@
-import { ImageResponse } from "next/og";
-import { BRAND_NAME, BRAND_TAGLINE } from "@/lib/brand";
-
+import { renderSocialImage } from "@/server/social-image";
+export const runtime = "nodejs";
+export const alt = "Manyangles — Every angle. One shared album.";
 export const size = { width: 1200, height: 630 };
 export const contentType = "image/png";
-
-export default function OpenGraphImage() {
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          background: "#f4f1ea",
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          padding: 88,
-        }}
-      >
-        <svg
-          width="112"
-          height="112"
-          viewBox="0 0 32 32"
-          fill="none"
-        >
-          <path d="M14 4H8a4 4 0 0 0-4 4v6M18 4h6a4 4 0 0 1 4 4v6M28 18v6a4 4 0 0 1-4 4h-6M14 28H8a4 4 0 0 1-4-4v-6" fill="none" stroke="#3156c8" strokeWidth="2.5" strokeLinecap="round" />
-          <circle cx="21" cy="11" r="2" fill="#3156c8" />
-          <path d="m8.5 22 5-6.2a1.7 1.7 0 0 1 2.6-.1l2.6 2.9 1.7-1.8a1.7 1.7 0 0 1 2.5 0l1.6 1.8" fill="none" stroke="#3156c8" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-        <div
-          style={{
-            marginTop: 36,
-            fontSize: 92,
-            lineHeight: 1,
-            color: "#18181b",
-            fontFamily: "Georgia, serif",
-            fontWeight: 600,
-            letterSpacing: -5,
-          }}
-        >
-          {BRAND_NAME}
-        </div>
-        <div
-          style={{
-            marginTop: 18,
-            fontSize: 28,
-            maxWidth: 760,
-            color: "#71717a",
-            lineHeight: 1.25,
-            letterSpacing: -1,
-          }}
-        >
-          {BRAND_TAGLINE}
-        </div>
-      </div>
-    ),
-    size,
-  );
-}
+export default function OpenGraphImage() { return renderSocialImage(); }