feat: add framer motion for audio player, handle og images for transcripts

app/transcriptions/[slug]/page.tsx

@@ -7,7 +7,7 @@ import {
   getTranscription,
   getAdjacentTranscriptions,
 } from "@/lib/transcriptions";
-import { buildOgMeta } from "@/lib/og";
+import { buildOgMeta, ogForTranscription, extractQuoteFromHl } from "@/lib/og";
 import { PageHeader } from "@/components/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -18,25 +18,49 @@ import { PlayAudioButton } from "./play-audio-button";
 
 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 t = await getTranscription(slug);
   if (!t) return {};
 
   const detail = [t.date, t.place].filter(Boolean).join(" · ");
-  return buildOgMeta({
-    title: t.name,
-    detail: detail || undefined,
-    quote:
-      t.content.length > 0
-        ? t.content
-            .find((b) => b.speaker === "Prabhupāda" && b.text.length > 50)
-            ?.text?.replace(/<[^>]+>/g, "")
-            .slice(0, 200)
-        : undefined,
+
+  // Build paragraphs from content blocks for hl matching
+  const paragraphs = t.content.map((b) => {
+    const speakerPrefix = b.speaker ? `${b.speaker}: ` : "";
+    return speakerPrefix + b.text.replace(/<[^>]+>/g, "");
   });
+
+  const hlQuote = extractQuoteFromHl(sp, paragraphs);
+
+  if (hlQuote) {
+    return buildOgMeta({
+      title: t.name,
+      detail: detail || undefined,
+      quote: hlQuote,
+    });
+  }
+
+  // Fallback: find a good Prabhupāda quote from the content
+  const spQuote = t.content
+    .find((b) => b.speaker === "Prabhupāda" && b.text.length > 50)
+    ?.text?.replace(/<[^>]+>/g, "")
+    .slice(0, 200);
+
+  if (spQuote) {
+    return buildOgMeta({
+      title: t.name,
+      detail: detail || undefined,
+      quote: spQuote,
+    });
+  }
+
+  return ogForTranscription(t.name, detail || undefined);
 }
 
 export default async function TranscriptionPage({