---

import '@fontsource/nunito'
import '@fontsource/libre-baskerville'
import '../styles/globals.css'

import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
import AttentionBar from '../components/AttentionBar.astro'

const { title, description, ogImage } = Astro.props

const ogImageUrl = ogImage ? "https://eleboog.com" + ogImage : "https://eleboog.com/blog/blogbanner.png"

---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link href="/moffsoft_light_64.png" rel="icon" type="image/png" media="(prefers-color-scheme: light)"/>
        <link href="/moffsoft_dark_64.png" rel="icon" type="image/png" media="(prefers-color-scheme: dark)"/>
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{title ? title + ' - eleboog.com' : 'eleboog.com'}</title>

		{/* open graph babeeeee */}
		<meta property="og:title" content={title ? title + ' - eleboog.com' : 'eleboog.com'} />
		<meta property="og:site_name" content="eleboog.com" />
		<meta property="og:description" content={description ?? "My personal website, containing blog posts, a mini journal, and other projects. The dark side of the sauce."} />
		<meta property="og:type" content="website" />
		<meta property="og:image" content={ ogImageUrl } />
		<meta property="og:image:secure_url" content={ ogImageUrl } />
		<meta property="og:image:width" content="1280" />
		<meta property="og:image:height" content="720" />
		<meta property="twitter:title" content={title ? title + ' - eleboog.com' : 'eleboog.com'} />
		<meta property="twitter:card" content="summary_large_image" />
		<meta property="twitter:image" content={ ogImageUrl } />
	</head>
	<body>
		<AttentionBar/>
		<div class="main-spacing">
			<Header current={title}/>
			<main>
				<slot/>
			</main>
			<Footer/>
		</div>
	</body>
</html>