hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hamed
2026-06-19 00:35:11 +03:30
parent 4dca516598
commit e9136ea42b
10 changed files with 77 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/blog/[slug]/page.js
+27 -19
View File
@@ -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 }),
images: blog.images?.[0]
? [blog.images[0]]
: ["https://www.nobat724.com/assets/images/logo.png"],
...(blog.created_at && {
publishedTime: new Date(blog.created_at * 1000).toISOString(),
}),
images: [image],
},
twitter: {
card: "summary_large_image",
title,
description,
images: blog.images?.[0]
? [blog.images[0]]
: ["https://www.nobat724.com/assets/images/logo.png"],
images: [image],
},
};
} 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 tagId = blog.tag[0].id;
const relatedResponse = await fetchReq(
`${API_URL}/api/v1/blogs?page=1&limit=12&tag=${tagId}`
);
relatedBlogs = relatedResponse?.blogs || [];
}
const relatedResponse = await fetchReq(
`${API_URL}/api/v1/blogs?page=1&limit=6`
);
relatedBlogs = (relatedResponse?.data || [])
.filter((b) => b.uuid !== blog?.uuid)
.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.created && { datePublished: blog.created }),
...(blog.images?.[0]?.url && { image: imageUrl(blog.images[0].url) }),
...(blog.created && {
datePublished: new Date(blog.created * 1000).toISOString(),
}),
...(blog.author && { author: { "@type": "Person", name: blog.author } }),
}
: null;
components/blog/detail/Caption.js
+4 -3
View File
@@ -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
+6 -6
View File
@@ -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
+2 -2
View File
@@ -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
+7 -35
View File
@@ -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([]);
const [isLoading, setIsLoading] = useState(true);
return null;
}
useEffect(() => {
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 (
<>{/*
/* eslint-disable */
/*
<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
+3 -2
View File
@@ -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 || []);
setTotalPages(response.page?.totalPages || 1);
setBlogs((response?.data || []).map(normalizeBlog));
setTotalPages(response?.meta?.totalPages || 1);
} catch (error) {
console.error("Error fetching blogs:", error);
setBlogs([]);
components/blogs/latestArticles/Article.js
+4 -2
View File
@@ -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
+1 -1
View File
@@ -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
+22
View File
@@ -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
+1 -1
View File
@@ -117,7 +117,7 @@ export const request = {
},
}),
getBlogTags: (params) =>
api.get("api/v1/categorys/tag", {
api.get("api/v1/tags", {
params,
headers: {
Authorization: "",