---
import BaseHead from '../components/BaseHead.astro';
import BlogHeader from '../components/BlogHeader.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';

interface Props {
	title: string;
	description: string;
}
const { title, description } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
	<head>
        <BaseHead title={SITE_TITLE +  " | " + title} description={description} />
	</head>
	<body>
        <section class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-2xl xl:px-0">
            <div class="flex flex-col h-screen scrollbar-gutter-stable">
                <BlogHeader title={SITE_TITLE} />
                <slot class="flex-1"/>
            </div>
        </section>
    </body>
</html>
