---
import Meta from './Meta.astro';
import TopBg from "@/components/ui/TopBg.astro";
import Footer from "@/components/sections/Footer.astro";
import Header from "@/components/sections/Header.astro";
import TrackGa from "@/components/widgets/TrackGa.astro";
interface Props {
	title?: string | undefined;
	description?: string | undefined;
	keywords?: string | undefined;
}

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


import "../styles/global.css";
import "aos/dist/aos.css";
import "../styles/aos-custom.css";
import '../styles/article.css';
import '../styles/article-enhancements.css';
---

<html lang="">
  <head>
    <meta charset="UTF-8" />
    <Meta
      title = {title}
      description = {description}
      keywords = {keywords}
    />
    <TrackGa />
    <!-- Used to add dark mode right away, adding here prevents any flicker -->
    <script is:inline>
      if (typeof Storage !== 'undefined') {
        if (
          localStorage.getItem('dark_mode') &&
          localStorage.getItem('dark_mode') == 'true'
        ) {
          document.documentElement.classList.add('dark')
        }
      }
    </script>

    <link rel="icon" type="image/x-icon" href="/favicon.png" />
  </head>
  <body class="antialiased bg-bg-primary dark:bg-bg-primary-dark max-w-full overflow-x-hidden">
    <TopBg />
    <Header />
    <slot />
    <Footer />
    <script src="../assets/js/main.js"></script>
  </body>
</html>