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

app/blog/[slug]/page.js

@@ -2,6 +2,9 @@ import BlogPage from "@/components/blog";
 import Layout from "@/components/layout/StLayout";
 import { fetchReq } from "@/lib/req";
 import { getStateInfo } from "@/lib/getStateInfo";
+import { normalizeBlog, imageUrl } from "@/helper";
+
+const FALLBACK_IMG = "https://www.nobat724.com/assets/images/logo.png";
 
 export async function generateMetadata({ params }) {
   const { slug } = await params;
@@ -10,12 +13,16 @@ export async function generateMetadata({ params }) {
   const siteName = matchedCity?.site_name || "نوبت 724";
 
   try {
-    const blog = await fetchReq(`${API_URL}/api/v1/blog/${slug}`);
+    const res = await fetchReq(`${API_URL}/api/v1/blog/${slug}`);
+    const blog = res?.data?.data;
     if (!blog) return {};
 
     const title = `${blog.title} | ${siteName}`;
-    const rawText = blog.body ? blog.body.replace(/<[^>]*>/g, "").trim() : "";
+    const rawText = (blog.summary || blog.body || "")
+      .replace(/<[^>]*>/g, "")
+      .trim();
     const description = rawText.slice(0, 160) || blog.title;
+    const image = blog.image_url ? imageUrl(blog.image_url) : FALLBACK_IMG;
 
     return {
       title,
@@ -24,18 +31,16 @@ export async function generateMetadata({ params }) {
         title,
         description,
         type: "article",
-        ...(blog.created && { publishedTime: blog.created }),
+        ...(blog.created_at && {
-        images: blog.images?.[0]
+          publishedTime: new Date(blog.created_at * 1000).toISOString(),
-          ? [blog.images[0]]
+        }),
-          : ["https://www.nobat724.com/assets/images/logo.png"],
+        images: [image],
       },
       twitter: {
         card: "summary_large_image",
         title,
         description,
-        images: blog.images?.[0]
+        images: [image],
-          ? [blog.images[0]]
-          : ["https://www.nobat724.com/assets/images/logo.png"],
       },
     };
   } catch {
@@ -47,24 +52,27 @@ async function Blog({ params }) {
   const { slug } = await params;
   const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
-  const blog = await fetchReq(`${API_URL}/api/v1/blog/${slug}`);
+  const res = await fetchReq(`${API_URL}/api/v1/blog/${slug}`);
+  const blog = normalizeBlog(res?.data?.data);
 
   let relatedBlogs = [];
-  if (blog?.tag?.[0]?.id) {
+  const relatedResponse = await fetchReq(
-    const tagId = blog.tag[0].id;
+    `${API_URL}/api/v1/blogs?page=1&limit=6`
-    const relatedResponse = await fetchReq(
+  );
-      `${API_URL}/api/v1/blogs?page=1&limit=12&tag=${tagId}`
+  relatedBlogs = (relatedResponse?.data || [])
-    );
+    .filter((b) => b.uuid !== blog?.uuid)
-    relatedBlogs = relatedResponse?.blogs || [];
+    .slice(0, 4)
-  }
+    .map(normalizeBlog);
 
   const jsonLd = blog
     ? {
         "@context": "https://schema.org",
         "@type": "Article",
         headline: blog.title,
-        ...(blog.images?.[0] && { image: blog.images[0] }),
+        ...(blog.images?.[0]?.url && { image: imageUrl(blog.images[0].url) }),
-        ...(blog.created && { datePublished: blog.created }),
+        ...(blog.created && {
+          datePublished: new Date(blog.created * 1000).toISOString(),
+        }),
         ...(blog.author && { author: { "@type": "Person", name: blog.author } }),
       }
     : null;

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] 
+                        w-[64px] sm:w-[73px] md:w-[85px] lg:w-[97px]
-                        h-[56px] sm:h-[64px] md:h-[75px] lg:h-[88px] 
+                        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>

components/blogs/Head.js

@@ -1,39 +1,13 @@
 "use client";
-import { useState, useEffect } from "react";
-import CustomLoading from "@/app/component/loading/Custom";
-import TextLoading from "@/app/component/loading/Text";
-import Link from "next/link";
-import { request } from "@/services/response";
 
+// نمایش «بلاگ‌های برتر» فعلاً غیرفعال است (endpoint /api/v1/blogs/top در بک‌اند وجود ندارد).
+// markup زیر برای فعال‌سازی بعدی نگه داشته شده؛ تا آن زمان کامپوننت چیزی رندر نمی‌کند.
 function Head() {
-  const [topBlogs, setTopBlogs] = useState([]);
+  return null;
-  const [isLoading, setIsLoading] = useState(true);
+}
 
-  useEffect(() => {
+/* eslint-disable */
-    const fetchTopBlogs = async () => {
+/*
-      try {
-        setIsLoading(true);
-        const response = await request.getTopBlogs();
-        setTopBlogs(response || []);
-      } catch (error) {
-        console.error("Error fetching top blogs:", error);
-        setTopBlogs([]);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchTopBlogs();
-  }, []);
-
-  if (isLoading || topBlogs.length === 0) {
-    return null;
-  }
-
-  const [firstBlog, secondBlog, thirdBlog, fourthBlog] = topBlogs;
-
-  return (
-    <>{/*
     <div className="flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
       {firstBlog && (
         <Link href={`/blog/${firstBlog.uuid}`} className="w-full lg:w-1/2 cover-head-blogs">
@@ -104,8 +78,6 @@ function Head() {
         )}
       </div>
     </div>
-    */}</>
+*/
-  );
-}
 
 export default Head;

components/blogs/index.js

@@ -5,6 +5,7 @@ import Head from "./Head";
 import Title from "./title";
 import LatestArticles from "./latestArticles";
 import { request } from "@/services/response";
+import { normalizeBlog } from "@/helper";
 
 function BlogsPage() {
   const [blogs, setBlogs] = useState([]);
@@ -25,8 +26,8 @@ function BlogsPage() {
           params.tag = selectedTag;
         }
         const response = await request.getBlogs(params);
-        setBlogs(response.blogs || []);
+        setBlogs((response?.data || []).map(normalizeBlog));
-        setTotalPages(response.page?.totalPages || 1);
+        setTotalPages(response?.meta?.totalPages || 1);
       } catch (error) {
         console.error("Error fetching blogs:", error);
         setBlogs([]);

components/blogs/latestArticles/Article.js

@@ -2,10 +2,12 @@ import CustomLoading from "@/app/component/loading/Custom";
 import TextLoading from "@/app/component/loading/Text";
 import Image from "next/image";
 import Link from "next/link";
-import { convertTimestampToJalali } from "@/helper";
+import { convertTimestampToJalali, imageUrl } from "@/helper";
 
 function Article({ data }) {
-  const imageSrc = data.images?.[0]?.url || "/assets/images/default-blog.jpg";
+  const imageSrc = data.images?.[0]?.url
+    ? imageUrl(data.images[0].url, "/assets/images/cover-blog-1.png")
+    : "/assets/images/cover-blog-1.png";
   const createdDate = data.created ? convertTimestampToJalali(data.created) : "";
 
   return (

components/blogs/title/index.js

@@ -15,7 +15,7 @@ function Title({ onTagChange }) {
           limit: 100,
         };
         const response = await request.getBlogTags(params);
-        setTags(response.data || []);
+        setTags(response?.data?.data || []);
       } catch (error) {
         console.error("Error fetching tags:", error);
         setTags([]);

helper/index.js

@@ -12,6 +12,28 @@ export const numberToArStyle = (num) => num?.toLocaleString("ar-AE") || "";
 
 export const isActiveURL = (link, name) => link === name;
 
+// نگاشت پاسخ API بلاگ (image_url/tags/created_at/body/author-object) به شکلی که
+// کامپوننت‌های بلاگ انتظار دارند (images[{url}]/tag[{name}]/created/body.value/author-string).
+export const normalizeBlog = (blog) => {
+  if (!blog) return null;
+  return {
+    ...blog,
+    images: blog.image_url ? [{ url: blog.image_url }] : [],
+    tag: Array.isArray(blog.tags)
+      ? blog.tags.map((t) => (typeof t === "string" ? { name: t } : t))
+      : [],
+    created: blog.created_at ?? blog.created ?? null,
+    body:
+      blog.body && typeof blog.body === "object"
+        ? blog.body
+        : { value: blog.body ?? "" },
+    author:
+      blog.author && typeof blog.author === "object"
+        ? blog.author.name
+        : blog.author ?? null,
+  };
+};
+
 // تبدیل مسیر نسبی تصویر (/uploads/...) به URL کامل backend.
 // مسیرهای absolute (http...) و asset های محلی (/assets، /default) دست‌نخورده می‌مانند.
 export const imageUrl = (url, fallback = "/assets/images/user.png") => {

services/response.js

@@ -117,7 +117,7 @@ export const request = {
       },
     }),
   getBlogTags: (params) =>
-    api.get("api/v1/categorys/tag", {
+    api.get("api/v1/tags", {
       params,
       headers: {
         Authorization: "",