---
import { ClientRouter } from "astro:transitions";
import "../styles/global.css";

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

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

<head>
  <meta charset="utf-8" />
  <meta name="apple-mobile-web-app-title" content="THohlt" />
  <meta name="viewport" content="width=device-width" initial-scale="1.0" />
  <meta name="generator" content={Astro.generator} />
  <meta name="color-scheme" content="light dark" />
  <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" />
  <link rel="manifest" href="/site.webmanifest" />
  <link rel="sitemap" href="/sitemap-index.xml" />
  <link
    rel="alternate"
    type="application/rss+xml"
    title="Thilo Hohlt's Blog"
    href={new URL("rss.xml", Astro.url.origin)}
  />
  <title>
    {
      `${title} - ${Astro.originPathname === "/" ? "Software developer" : "Thilo Hohlt"}`
    }
  </title>
  <meta name="description" content={description} />
  <ClientRouter />
  <script is:inline>
    const setTheme = () => {
      let theme = "light";

      if (localStorage.getItem("theme")) {
        theme = localStorage.getItem("theme");
      } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        theme = "dark";
      }

      if (theme === "light") {
        document.documentElement.classList.remove("dark");
      } else {
        document.documentElement.classList.add("dark");
      }

      window.localStorage.setItem("theme", theme);
    };

    setTheme();

    document.addEventListener("astro:after-swap", setTheme);
  </script>
</head>
