60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
// * REACT/INERTIA
|
|
import { Head as InertiaHead, usePage } from "@inertiajs/react";
|
|
|
|
import logoImg from "&/images/global/logo.svg";
|
|
|
|
interface BreadcrumbItem {
|
|
title: string;
|
|
url: string;
|
|
}
|
|
|
|
interface HeadProps {
|
|
title?: string;
|
|
description?: string;
|
|
}
|
|
interface Ziggy {
|
|
location: string;
|
|
}
|
|
|
|
export default function Head({ title, description }: HeadProps) {
|
|
const appEnv = usePage().props.appEnv as AppEnv;
|
|
const { breadcrumbs } = usePage().props as {
|
|
breadcrumbs?: BreadcrumbItem[];
|
|
};
|
|
const { location } = usePage().props.ziggy as Ziggy;
|
|
|
|
const canonical = location.replace("index.php/", "").replace("index.php", "");
|
|
|
|
return (
|
|
<InertiaHead>
|
|
<title>{title}</title>
|
|
{description && (
|
|
<>
|
|
<meta name="description" content={description} />
|
|
<meta property="og:description" content={description} />
|
|
</>
|
|
)}
|
|
{title && <meta property="og:title" content={title} />}
|
|
<link rel="canonical" href={canonical} />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content={appEnv.url} />
|
|
<meta property="og:site_name" content={appEnv.name} />
|
|
<meta property="og:image" content={appEnv.url + logoImg} />
|
|
{description && <meta property="og:description" content={description} />}
|
|
{breadcrumbs && breadcrumbs.length > 0 && (
|
|
<script type="application/ld+json">
|
|
{JSON.stringify({
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
itemListElement: breadcrumbs.map((crumb, index) => ({
|
|
"@type": "ListItem",
|
|
position: index + 1,
|
|
name: crumb.title,
|
|
item: crumb.url,
|
|
})),
|
|
})}
|
|
</script>
|
|
)}
|
|
</InertiaHead>
|
|
);
|
|
}
|