Head.astro

---
import { SEO } from "astro-seo";
import { site } from "../site";
import Posthog from "./Posthog.astro";

type Props = {
  title?: string;
  description?: string;
  tags?: string[];
  author?: string;
};

const root = Astro.site!.toString();
const canonical = new URL(Astro.url.pathname, root);

const { title: siteTitle, description: siteDescription } = site;

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

const image = `${root}favicon.png`;
---

<script is:inline>
  const handleColors = () => {
    const prefersDark = matchMedia("(prefers-color-scheme: dark)").matches;
    const stored = localStorage.getItem("mode") || "auto";

    const useDark = (stored == "auto" && prefersDark) || stored == "dark";

    document.documentElement.classList.toggle("dark", useDark);
  };

  handleColors();

  matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (_) => {
    handleColors();
  });
</script>

<Posthog />

<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta
  name="viewport"
  content="width=device-width,initial-scale=1,shrink-to-fit=no"
/>
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="generator" content={Astro.generator} />
{tags && tags.length > 0 && <meta name="keywords" content={tags.join(",")} />}

<SEO
  charset="utf-8"
  title={title ?? siteTitle}
  description={description ?? siteDescription}
  {canonical}
  openGraph={{
    basic: {
      title: title ?? siteTitle,
      type: "website",
      url: canonical,
      image,
    },
  }}
  twitter={{
    site: root,
    title: title ?? siteTitle,
    description,
    image,
    card: "summary",
  }}
/>

<link
  rel="stylesheet"
  type="text/css"
  href="//cdn-images.mailchimp.com/embedcode/classic-071822.css"
/>