feat(blog): enhance blog data handling with normalization and improved image management

components/blog/detail/Caption.js

@@ -1,16 +1,17 @@
 import React from "react";
 import Image from "next/image";
 import { sanitizeHtml } from "@/lib/sanitize";
+import { imageUrl } from "@/helper";
 
 function Caption({ data }) {
-  const imageUrl = data?.images?.[0]?.url;
+  const cover = data?.images?.[0]?.url ? imageUrl(data.images[0].url) : "";
 
   return (
     <>
-      {imageUrl && imageUrl.trim() !== "" && (
+      {cover && cover.trim() !== "" && (
         <div className="relative w-full aspect-video rounded-[8px] overflow-hidden">
           <Image
-            src={imageUrl}
+            src={cover}
             alt={data?.title || "blog cover"}
             fill
             className="object-cover"

components/blog/relatedContent/Item.js

@@ -2,24 +2,24 @@ import CircularLoading from "@/app/component/loading/Circular";
 import CustomLoading from "@/app/component/loading/Custom";
 import TextLoading from "@/app/component/loading/Text";
 import Link from "next/link";
-import { convertTimestampToJalali } from "@/helper";
+import { convertTimestampToJalali, imageUrl } from "@/helper";
 
 function Item({ data, idx, loading }) {
-  const imageUrl = data?.images?.[0]?.url;
+  const cover = data?.images?.[0]?.url ? imageUrl(data.images[0].url) : "";
   const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";
 
   return (
     <li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
       <CustomLoading width={80} height={72} loading={loading}>
         <Link href={`/blog/${data.uuid}`}>
-          {imageUrl && imageUrl.trim() !== "" ? (
+          {cover && cover.trim() !== "" ? (
             <img
               className="
-                        w-[64px] sm:w-[73px] md:w-[85px] lg:w-[97px] 
-                        h-[56px] sm:h-[64px] md:h-[75px] lg:h-[88px] 
+                        w-[64px] sm:w-[73px] md:w-[85px] lg:w-[97px]
+                        h-[56px] sm:h-[64px] md:h-[75px] lg:h-[88px]
                         rounded-[8px] overflow-hidden object-cover
                     "
-              src={imageUrl}
+              src={cover}
               alt={data.title || "article"}
             />
           ) : (

components/blog/relatedContent/index.js

@@ -11,9 +11,9 @@ function RelatedContent({ data, loading }) {
       </AnimationTextHead>
       <ul className="flex w-full lg:w-fit flex-col justify-start items-start">
         {data &&
-          data.length &&
+          data.length > 0 &&
           data?.map((item, idx) => (
-            <Item idx={idx} data={item} key={item.id} loading={loading} />
+            <Item idx={idx} data={item} key={item.uuid} loading={loading} />
           ))}
       </ul>
     </div>