fix: og image generation

app/journals/page.tsx

@@ -1,18 +1,38 @@
 export const dynamic = "force-dynamic";
 
+import type { Metadata } from "next";
 import Link from "next/link";
 import { PageHeader } from "@/components/page-header";
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { buildOgMeta } from "@/lib/og";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { getAllJournals, bookCodeToSlug } from "@/lib/journals";
 
+export function generateMetadata(): Metadata {
+  return buildOgMeta({
+    title: "Journals",
+    detail: "Personal diaries and journals of Śrīla Prabhupāda",
+    quote:
+      "From the personal journals of Śrīla Prabhupāda — a window into the daily life and mission of the Founder-Ācārya of ISKCON.",
+  });
+}
+
 export default async function JournalsPage() {
   const journals = await getAllJournals();
 
   return (
     <div className="min-h-screen bg-background">
       <PageHeader>
-        <Link href="/" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+        <Link
+          href="/"
+          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
           &larr; Home
         </Link>
         <h1 className="mt-3 text-3xl font-bold text-foreground">Journals</h1>
@@ -24,20 +44,33 @@ export default async function JournalsPage() {
       <main className="max-w-5xl mx-auto px-6 py-8">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {journals.map((journal) => (
-            <Link key={journal.book} href={`/journals/${bookCodeToSlug(journal.book)}`} className="block h-full">
+            <Link
+              key={journal.book}
+              href={`/journals/${bookCodeToSlug(journal.book)}`}
+              className="block h-full"
+            >
               <Card className="h-full transition-all hover:shadow-md hover:ring-foreground/20">
                 <CardHeader className="pb-2">
-                  <CardTitle className="text-base font-bold leading-snug">{journal.title}</CardTitle>
+                  <CardTitle className="text-base font-bold leading-snug">
+                    {journal.title}
+                  </CardTitle>
                   {journal.description && (
-                    <CardDescription className="text-xs line-clamp-2">{journal.description}</CardDescription>
+                    <CardDescription className="text-xs line-clamp-2">
+                      {journal.description}
+                    </CardDescription>
                   )}
                 </CardHeader>
                 <CardContent className="pt-0">
                   <div className="flex flex-wrap items-center gap-2 text-sm">
-                    {journal.year && <Badge variant="secondary" className="text-xs">{journal.year}</Badge>}
+                    {journal.year && (
+                      <Badge variant="secondary" className="text-xs">
+                        {journal.year}
+                      </Badge>
+                    )}
                     {journal.totalChapters > 0 && (
                       <span className="text-muted-foreground text-xs">
-                        {journal.totalChapters} {journal.totalChapters === 1 ? "chapter" : "chapters"}
+                        {journal.totalChapters}{" "}
+                        {journal.totalChapters === 1 ? "chapter" : "chapters"}
                       </span>
                     )}
                   </div>