---
import "../styles/global.css";
import {
    DEFAULT_OG_IMAGE,
    OG_TYPE,
    SITE_NAME,
    SITE_URL,
    TWITTER_CARD,
    TWITTER_SITE,
} from "../config/site";

const {
    title = "",
    description,
    keywords,
    canonicalPath,
    ogImage,
} = Astro.props;

const pageTitle =
    title && title !== SITE_NAME ? `${title} | ${SITE_NAME}` : SITE_NAME;
const canonicalUrl = new URL(
    canonicalPath ?? Astro.url.pathname,
    SITE_URL,
).toString();

const ogImagePath = ogImage ?? DEFAULT_OG_IMAGE;
const ogImageUrl = ogImagePath ? new URL(ogImagePath, SITE_URL).toString() : "";
const hasOgImage = Boolean(ogImagePath);
const twitterSite = TWITTER_SITE?.trim();
---

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{pageTitle}</title>
        <meta name="description" content={description} />
        <meta name="keywords" content={keywords} />
        <link rel="canonical" href={canonicalUrl} />
        <meta property="og:site_name" content={SITE_NAME} />
        <meta property="og:title" content={pageTitle} />
        <meta property="og:description" content={description} />
        <meta property="og:type" content={OG_TYPE} />
        <meta property="og:url" content={canonicalUrl} />
        {hasOgImage && <meta property="og:image" content={ogImageUrl} />}
        <meta name="twitter:card" content={TWITTER_CARD} />
        <meta name="twitter:title" content={pageTitle} />
        <meta name="twitter:description" content={description} />
        {hasOgImage && <meta name="twitter:image" content={ogImageUrl} />}
        {twitterSite && <meta name="twitter:site" content={twitterSite} />}
        <meta name="theme-color" content="#e2e2e2" />
        <link
            rel="apple-touch-icon"
            sizes="180x180"
            href="/apple-touch-icon.png"
        />
        <link
            rel="icon"
            type="image/png"
            sizes="96x96"
            href="/favicon-96x96.png"
        />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="manifest" href="/site.webmanifest" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link rel="preconnect" href="https://cdn.userway.org" />
        <link
            href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@600;700;800&family=Merriweather:wght@700&display=swap"
            rel="stylesheet"
        />
        <script
            async
            src="https://www.googletagmanager.com/gtag/js?id=GT-PBSRSGG9"
        ></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag("js", new Date());
            gtag("config", "GT-PBSRSGG9");
            gtag("config", "GT-PHPDF5Z2");
            gtag("config", "G-39XW217EQH");
            gtag("config", "AW-16856737735");
        </script>
        <slot name="head" />
    </head>
    <body>
        <slot />
        <script
            src="https://cdn.userway.org/widget.js"
            data-account="ZdcVJAc6ri"
            defer></script>
    </body>
</html>
