---
import { getImage } from 'astro:assets';
import { readSingleton } from '@directus/sdk';

import directus from '@lib/directus';
import brandSrc from '@images/brand_logo.png';
import faviconSvgSrc from '@images/favicon_icon.svg';
import faviconSrc from '@images/favicon_icon.png';
import { SEO } from '@/config';

interface Props {
  title: string;
  description: string;
  ogImage?: any;
  ogTitle?: string;
  ogDescription?: string;
  structuredData?: object;
}

const canonicalURL = Astro.url.href;
let {
  title,
  description,
  ogImage,
  ogTitle = title,
  ogDescription = description,
  structuredData = SEO.structuredData,
} = Astro.props;

let card = 'summary_large_image';
if (!ogImage) {
  ogImage = brandSrc;
  card = 'summary';
}

const global = await directus.request(readSingleton('site_global'));

const faviconSvg = await getImage({ src: faviconSvgSrc, format: 'svg' });
const appleTouchIcon = await getImage({ src: faviconSrc, width: 180, height: 180, format: 'png' });
const socialImageRes = await getImage({ src: ogImage, width: 1200, height: 600 });

let socialImage = socialImageRes.src;
if (!socialImage.startsWith('http')) {
  socialImage = Astro.url.origin + socialImageRes.src;
}
---

<!-- Inject structured data https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data -->{
  structuredData && <script type="application/ld+json" set:html={JSON.stringify(structuredData)} />
}

<!-- Global Metadata -->
<meta name="title" content={title} />
<meta name="description" content={description} />
<meta charset="utf-8" />
<meta name="web_author" content={global.name} />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0"
/>
<meta name="generator" content={Astro.generator} />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#facc15" />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content={Astro.url} />
<meta property="og:type" content="website" />
<meta property="og:title" content={ogTitle} />
<meta property="og:site_name" content={global.name} />
<meta property="og:description" content={ogDescription} />
<meta property="og:image" content={socialImage} />
<meta content="1200" property="og:image:width" />
<meta content="600" property="og:image:height" />
<meta content="image/png" property="og:image:type" />

<!-- Twitter -->
<meta property="twitter:card" content={card} />
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:domain" content={Astro.url} />
<meta property="twitter:title" content={ogTitle} />
<meta property="twitter:description" content={ogDescription} />
<meta property="twitter:image" content={socialImage} />

<!-- Links -->
<link href={canonicalURL} rel="canonical" />
<link rel="sitemap" href="/sitemap-index.xml" />
<!--<link href="/manifest.json" rel="manifest" />-->
<link href="/favicon.ico" rel="icon" sizes="any" type="image/x-icon" />
<link href={faviconSvg.src} rel="icon" type="image/svg+xml" sizes="any" />
<link href={appleTouchIcon.src} rel="apple-touch-icon" />
<link href={appleTouchIcon.src} rel="shortcut icon" />
<link rel="preconnect" href="https://461ZQ3AX3S-dsn.algolia.net" crossorigin />
