---
import banner from "@/assets/imgs/site/banner_1280x720.png";
import "../styles/global.css";
import { ORIGIN } from "astro:env/server";

const { title, description } = Astro.props;
const shownTitle = title ?? "Move to Linux";
const shownDescription =
	description ??
	"A guide on moving to Linux. Installation, Usage, and Applications.";
const site = ORIGIN ?? Astro.url.host;
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />

		<!-- Primary Meta Tags -->
		<title>{shownTitle}</title>
		<meta name="title" content={shownTitle} />
		<meta name="description" content={shownDescription} />

		<!-- Open Graph / Facebook -->
		<meta property="og:type" content="website" />
		<meta property="og:url" content={site} />
		<meta property="og:title" content={shownTitle} />
		<meta property="og:description" content={shownDescription} />
		<meta property="og:image" content={banner.src} />

		<!-- X (Twitter) -->
		<meta property="twitter:card" content="summary" />
		<meta property="twitter:url" content={site} />
		<meta property="twitter:title" content={shownTitle} />
		<meta property="twitter:description" content={shownDescription} />
		<meta property="twitter:image" content={banner.src} />
	</head>
	<body>
		<slot />
	</body>
</html>
