import BlogCard1 from '@/components/cards/blog-card-1'; import TableFooter from '@/components/table/table-footer'; import { getQueryParams } from '@/lib/route'; import { cn } from '@/lib/utils'; import { SharedData } from '@/types/global'; import { Head, usePage } from '@inertiajs/react'; import { ReactNode } from 'react'; import Layout from './partials/layout'; export interface BlogsIndexProps extends SharedData { blogs: Pagination; category?: BlogCategory; categories: BlogCategory[]; } const Index = (props: BlogsIndexProps) => { const { url } = usePage(); const { blogs, category, system, translate } = props; const { frontend } = translate; const urlParams = getQueryParams(url); // Generate meta information based on category const siteUrl = url; const siteName = system?.fields?.name || frontend.default_site_name; const siteAuthor = system?.fields?.author || frontend.default_author; const totalBlogs = props.blogs?.total || 0; const siteOrigin = typeof window !== 'undefined' ? window.location.origin : url.split('/').slice(0, 3).join('/'); const pageTitle = frontend.all_blogs; const pageDescription = frontend.blog_page_description.replace(':total', totalBlogs.toString()); const pageKeywords = frontend.blog_page_keywords; const ogTitle = frontend.latest_blog_posts; const fullTitle = `${pageTitle} | ${siteName}`; const firstBlogImage = props.blogs?.data?.[0]?.thumbnail || props.blogs?.data?.[0]?.banner || ''; const ogImage = firstBlogImage || '/assets/images/blank-image.jpg'; return ( <> {fullTitle} {/* Open Graph Tags */} {/* Open Graph Image */} {/* Twitter Card Tags */} {/* Listing-specific meta */} {/* Schema.org structured data */}
{blogs.data.map((blog: Blog) => ( ))}
); }; Index.layout = (page: ReactNode) => ; export default Index;