fix: og image generation

app/books/lob/[chapter]/page.tsx

@@ -1,3 +1,6 @@
+export const dynamic = "force-dynamic";
+
+import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import {
@@ -6,6 +9,8 @@ import {
   type LobChapter,
   type LobSidebarItem,
 } from "@/lib/lob";
+import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
+import { BOOK_NAMES } from "@/lib/constants";
 import { PageHeader } from "@/components/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
@@ -13,6 +18,21 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
 
+export async function generateMetadata({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ chapter: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}): Promise<Metadata> {
+  const sp = await searchParams;
+  const hlQuote = extractQuoteFromHl(sp);
+  if (hlQuote) {
+    return buildOgMeta({ title: BOOK_NAMES["lob"], quote: hlQuote });
+  }
+  return ogForChapter("lob", "");
+}
+
 // ---------------------------------------------------------------------------
 // Page
 // ---------------------------------------------------------------------------
@@ -76,7 +96,7 @@ export default async function LobChapterPage({
           <Card>
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
-                {content.paragraphs.map((paragraph, i) => (
+                {content.paragraphs.map((paragraph, i) =>
                   paragraph.startsWith("<b>") ? (
                     <div
                       key={i}
@@ -89,8 +109,8 @@ export default async function LobChapterPage({
                       className="text-base text-foreground leading-relaxed"
                       dangerouslySetInnerHTML={{ __html: paragraph }}
                     />
-                  )
-                ))}
+                  ),
+                )}
               </div>
             </CardContent>
           </Card>