---
import "$lib/styles/app.css";
import { astroI18n } from "astro-i18n";
import { SEO } from "astro-seo";
import { ClientRouter } from "astro:transitions";
const { title, description, clientSideRouter = true, autoDarkMode = true } = Astro.props.frontmatter || Astro.props;
import "../../public/fonts/roboto/roboto.css";
---

<html lang={astroI18n.locale} class="dark">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=5, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <meta name="icbm" content="52.370216;4.895168" />
        <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <meta name="apple-mobile-web-app-title" content="MyWebSite" />
        <link rel="manifest" href="/site.webmanifest" />

        <SEO
            title={title}
            description={description}
            twitter={{
                creator: "@chaoscaot",
            }}
            languageAlternates={astroI18n.locales.map((locale) => ({
                hrefLang: locale,
                href: `https://steamwar.de/${locale}/`,
            }))}
        />

        {autoDarkMode && (
            <script is:inline data-astro-rerun>
                if (localStorage["theme-mode"] === "light" || (!("theme-mode" in localStorage) && window.matchMedia("(prefers-color-scheme: light)").matches)) {
                    document.documentElement.classList.remove("dark");
                }
            </script>
        )}

        <slot name="head" />

        {clientSideRouter && <ClientRouter />}
    </head>
    <body class="dark:bg-zinc-800">
        <slot />
    </body>
</html>

<style>
    body {
        font-family: "Roboto", sans-serif;
        font-style: normal;
        font-weight: 400;
    }
</style>
