fix: og image generation

app/essays/[slug]/page.tsx

@@ -1,7 +1,9 @@
 export const dynamic = "force-dynamic";
 
+import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
+import { ogForEssay, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { PageHeader } from "@/components/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
@@ -90,6 +92,30 @@ async function getEssaySidebar(): Promise<SidebarItem[]> {
 // Page
 // ---------------------------------------------------------------------------
 
+export async function generateMetadata({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const sp = await searchParams;
+  const essay = await getEssay(slug);
+  if (!essay) return {};
+
+  const hlQuote = extractQuoteFromHl(sp);
+  if (hlQuote) {
+    return buildOgMeta({
+      title: essay.title,
+      detail: "Essay by Śrīla Prabhupāda",
+      quote: hlQuote,
+    });
+  }
+
+  return ogForEssay(essay.title);
+}
+
 export default async function EssayPage({
   params,
 }: {