hamed
cea8982e6d
- Introduced a new script `make-blog-cover.mjs` to create a default cover image for blog posts. - The image is generated in PNG format with dimensions 1200x630, suitable for Open Graph. - Utilizes the site's branding colors and logo from `public/nobat724.svg`. - Includes custom font styling using the Vazirmatn font. - The generated image is saved to `public/assets/images/blog-default-cover.png`.
103 lines
4.2 KiB
JavaScript
103 lines
4.2 KiB
JavaScript
import Link from "next/link";
|
|
import { convertTimestampToJalali } from "@/helper";
|
|
|
|
function Head({ data, cityName }) {
|
|
const firstTag = data?.tag?.[0];
|
|
const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";
|
|
// normalizeBlog تگها را به [{name}] تبدیل میکند؛ نامِ خالی حذف میشود.
|
|
const tags = (Array.isArray(data?.tag) ? data.tag : [])
|
|
.map((t) => (typeof t === "string" ? t : t?.name))
|
|
.filter(Boolean);
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-start gap-1">
|
|
<Link
|
|
href="/blogs"
|
|
className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal hover:text-[#525252]"
|
|
>
|
|
بلاگ
|
|
</Link>
|
|
<span className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
|
|
{">"}
|
|
</span>
|
|
{firstTag && (
|
|
<>
|
|
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
|
|
{firstTag.name} {">"}
|
|
</p>
|
|
</>
|
|
)}
|
|
<p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
|
|
{data?.title}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
|
|
{data?.title}
|
|
</h1>
|
|
</div>
|
|
<div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
|
|
{/* شهر پست در HTML قابلمشاهده — نه فقط در متادیتا. برچسب با همان
|
|
تایپوگرافی «نویسنده/تاریخ» تا با بقیهٔ سربرگ همخانواده بماند. */}
|
|
{cityName && (
|
|
<div className="flex items-center justify-start gap-1">
|
|
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
|
|
مخصوص شهر:
|
|
</p>
|
|
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
|
|
{cityName}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{data?.author && (
|
|
<div className="flex items-center justify-start gap-1">
|
|
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
|
|
نویسنده:
|
|
</p>
|
|
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
|
|
{data.author}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{createdDate && (
|
|
<div className="flex items-center justify-start gap-1">
|
|
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
|
|
تاریخ انتشار:
|
|
</p>
|
|
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
|
|
{createdDate}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{data?.reading_time > 0 && (
|
|
<div className="flex items-center justify-start gap-1">
|
|
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
|
|
زمان مطالعه:
|
|
</p>
|
|
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
|
|
{data.reading_time} دقیقه
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{/* فهرست کامل تگها — تا این تغییر فقط تگ اول در بردکرامب دیده میشد.
|
|
صفحهٔ فیلتر تگ وجود ندارد، پس چیپها بدون لینک رندر میشوند. */}
|
|
{tags.length > 0 && (
|
|
<ul className="flex flex-wrap items-center justify-start gap-2 mt-[12px] md:mt-[16px]">
|
|
{tags.map((tag, idx) => (
|
|
<li
|
|
key={`${tag}-${idx}`}
|
|
className="bg-[#F5F5F5] text-[#525252] rounded-full px-[12px] py-[4px] text-[11px] md:text-[13px] font-medium"
|
|
>
|
|
{tag}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Head;
|