---
import icon from "../images/logo.png";
import {getImage} from "astro:assets";
import {astroI18n} from "astro-i18n";
import {SEO} from "astro-seo";
import {ViewTransitions} from "astro:transitions";
const {title, description} = Astro.props.frontmatter || Astro.props;

import "../../public/fonts/roboto/roboto.css";

const iconImage = await getImage({src: icon, height: 32, width: 32, format: "png", quality: 100});
---

<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="imgage/png" href={iconImage.src}/>

        <SEO
            title={title}
            description={description}
            twitter={{
                creator: "@chaoscaot",
            }}
            languageAlternates={astroI18n.locales.map((locale) => ({
                hrefLang: locale,
                href: `/${locale}/`,
            }))}
        />
        
        <script is:inline>
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"/>

        <ViewTransitions />
    </head>
    <body class="dark:bg-zinc-800">
        <slot/>
    </body>
</html>

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