fix: display placeholder image if no blog post cover image is present

app/(root)/blog/[slug]/page.tsx

@@ -64,7 +64,9 @@ export async function generateMetadata({
       type: "website",
       images: [
         {
-          url: urlFor(data.titleImage).url(),
+          url: data.titleImage
+            ? urlFor(data.titleImage).url()
+            : "/blog-missing.png",
           width: 800,
           height: 600,
           alt: `${data.title} - SVR.JS`
@@ -76,7 +78,9 @@ export async function generateMetadata({
       site: "@SVR_JS",
       title: `${data.title} - SVR.JS`,
       description: data.smallDescription,
-      images: [urlFor(data.titleImage).url()],
+      images: [
+        data.titleImage ? urlFor(data.titleImage).url() : "/blog-missing.png"
+      ],
       creator: "@SVR_JS"
     }
   };
@@ -172,24 +176,26 @@ export default async function BlogSlugArticle({
           </Link>
         </div>
         <header className="text-start mb-8 w-full">
-          {data.titleImage && (
+          <div className="mb-2">
-            <div className="mb-2">
+            <h1 className="text-3xl md:text-5xl mb-8 py-4 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
-              <h1 className="text-3xl md:text-5xl mb-8 py-4 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+              {data.title}
-                {data.title}
+            </h1>
-              </h1>
+            <Image
-              <Image
+              src={
-                src={urlFor(data.titleImage).url()}
+                data.titleImage
-                alt={data.title}
+                  ? urlFor(data.titleImage).url()
-                width={1200}
+                  : "/blog-missing.png"
-                height={800}
+              }
-                priority
+              alt={data.title}
-                className="w-full h-auto object-cover rounded-md"
+              width={1200}
-              />
+              height={800}
-              <p className="mt-4 text-lg md:text-xl text-muted-foreground">
+              priority
-                Uploaded at {formattedDate}
+              className="w-full h-auto object-cover rounded-md"
-              </p>
+            />
-            </div>
+            <p className="mt-4 text-lg md:text-xl text-muted-foreground">
-          )}
+              Uploaded at {formattedDate}
+            </p>
+          </div>
         </header>
         <Separator className="mb-6" />
         <article className="prose max-w-full md:prose-lg dark:prose-invert">

components/cards/BlogCards.tsx

@@ -68,7 +68,11 @@ const BlogCards: React.FC<BlogCardsProps> = async ({ searchParams }) => {
               <Link href={`/blog/${post.currentSlug}`} className="block">
                 <div className="relative overflow-hidden rounded-t-lg">
                   <Image
-                    src={urlFor(post.titleImage).url()}
+                    src={
+                      post.titleImage
+                        ? urlFor(post.titleImage).url()
+                        : "/blog-missing.png"
+                    }
                     alt={post.title}
                     width={500}
                     height={300}