import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Badge } from '@/components/ui/badge'; import { Separator } from '@/components/ui/separator'; import LandingLayout from '@/layouts/landing-layout'; import { SharedData } from '@/types/global'; import { Head, usePage } from '@inertiajs/react'; import { Renderer } from 'richtor'; import 'richtor/styles'; import BlogComments from './partials/blog-comments'; import BlogLikeDislike from './partials/blog-like-dislike'; export interface BlogShowProps extends SharedData { blog: Blog; likesCount: number; dislikesCount: number; commentsCount: number; userReaction?: 'like' | 'dislike' | null; } const ShowBlog = ({ blog }: BlogShowProps) => { const { url, props } = usePage(); const { translate } = props; const { frontend } = translate; const createdAt = new Date(blog.created_at).toLocaleDateString(); const authorInitials = blog.user?.name ? blog.user.name .split(' ') .map((n) => n.charAt(0)) .join('') .toUpperCase() : frontend.author_initials_fallback; const bannerSrc = blog.banner || '/assets/images/blank-image.jpg'; const thumbnailSrc = blog.thumbnail || '/assets/images/blank-image.jpg'; const keywords = (blog.keywords || '') .split(',') .map((k) => k.trim()) .filter(Boolean); // Meta information const siteName = (typeof window !== 'undefined' && (window as any)?.App?.name) || frontend.default_site_name; const siteUrl = url; const siteOrigin = typeof window !== 'undefined' ? window.location.origin : url.split('/').slice(0, 3).join('/'); const pageTitle = `${blog.title} | ${siteName}`; const plainText = blog.description ?.replace(/<[^>]*>/g, ' ') .replace(/\s+/g, ' ') .trim() || ''; const pageDescription = plainText.length > 160 ? `${plainText.slice(0, 157)}...` : plainText; const ogImage = bannerSrc || thumbnailSrc; return ( {pageTitle} {pageDescription && } {keywords.length > 0 && } {/* Open Graph Tags */} {pageDescription && } {ogImage && } {ogImage && } {ogImage && } {/* Twitter Card Tags */} {pageDescription && } {ogImage && } {/* Schema.org structured data */}
{/* Banner */}
{frontend.blog_banner_alt}
{/* Title and meta */}
{blog.category?.name && {blog.category.name}} {keywords.slice(0, 3).map((k) => ( {k} ))}

{blog.title}

{authorInitials} {blog.user?.name}
• {createdAt}
{/* Content */}
{frontend.blog_thumbnail_alt}
{/* Keywords */} {keywords.length > 0 && (
{keywords.map((k) => ( #{k} ))}
)} {/* Like/Dislike Section */}
{/* Comments Section */}
); }; export default ShowBlog;