---
import LocalFont from '../generic/LocalFont.astro';
import { ViewTransitions } from 'astro:transitions';
import { getSettings, invariant } from "@matthiesenxyz/astro-ghostcms/api";
import { getOgImagePath } from "@matthiesenxyz/astro-ghostcms/satoriOG";


const settings = await getSettings();
invariant(settings, 'Settings not found');
const Ghosttitle = settings.title;
const favicon = await settings.icon;

interface Props {
  title: string;
  description: string;
}

const ogI = new URL(getOgImagePath(Astro.url.pathname), Astro.url.origin).href;

const canonicalURL = new URL(Astro.url.pathname, Astro.site);

const { title, description } = Astro.props;
---

<head>
  <LocalFont />
  <meta charset='utf-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1' />
  <meta name='generator' content={Astro.generator} />

  <meta name='title' content={`${Ghosttitle} | ${title}`} />
  <meta name='description' content={description} />

  <meta property='og:type' content='website' />
  <meta property='og:url' content={canonicalURL} />
  <meta property='og:title' content={title} />
  <meta property='og:description' content={description} />
  <meta property='og:image' content={ogI} />

  <meta property='twitter:card' content='summary_large_image' />
  <meta property='twitter:url' content={canonicalURL} />
  <meta property='twitter:title' content={title} />
  <meta property='twitter:description' content={description} />
  <meta property='twitter:image' content={ogI} />

  <link rel='canonical' href={canonicalURL} />
  <link rel='icon' type='image/svg' href={favicon} />

  <title>{Ghosttitle} | {title}</title>

  <ViewTransitions />

  <slot />
</head>
