---
import "../styles/theme.css";

interface Props {
  title: string;
  description: string;
  /** Path for canonical/og, e.g. "/install" or "/". */
  path: string;
}

const { title, description, path } = Astro.props;
const site = Astro.site?.href ?? "https://termscp.rs/";
const canonical = new URL(path, site).href;
const ogImage = new URL("/assets/images/og_preview.jpg", site).href;
---

<!doctype html>
<html lang="en" data-theme="frappe">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <meta name="description" content={description} />
    <link rel="canonical" href={canonical} />

    <!-- Open Graph -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="termscp" />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={canonical} />
    <meta property="og:image" content={ogImage} />
    <meta
      property="og:image:alt"
      content="termscp — terminal file transfer and explorer"
    />
    <meta property="og:image:width" content="1280" />
    <meta property="og:image:height" content="640" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={ogImage} />

    <!-- Favicons -->
    <link
      rel="icon"
      type="image/png"
      sizes="96x96"
      href="/assets/images/favicon-96x96.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/assets/images/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/assets/images/favicon-16x16.png"
    />

    <!-- Font preload -->
    <link
      rel="preload"
      href="/fonts/jetbrains-mono-400.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />

    <!-- No-flash theme bootstrap. Contract: localStorage 'theme' is "frappe" | "latte"; ThemeToggle writes the same. -->
    <script is:inline>
      (() => {
        const t =
          localStorage.getItem("theme") ||
          (matchMedia("(prefers-color-scheme: light)").matches
            ? "latte"
            : "frappe");
        document.documentElement.setAttribute("data-theme", t);
      })();
    </script>

    <!-- Umami analytics -->
    <script
      defer
      src="https://cloud.umami.is/script.js"
      data-website-id="ad2d5621-a893-488c-baa6-d39c306374cf"></script>
  </head>
  <body class="bg-base text-text font-mono min-h-screen flex flex-col">
    <slot />
  </body>
</html>
