---
import Layout from "./Layout.astro";
import TableOfContent from "../components/blocks/TableOfContent.astro";
import VerticalNav from "../components/blocks/verticalNav.astro";
import "../assets/styles/remark-callout-directives.css";

const { frontmatter, headings } = Astro.props;
---

<Layout title={frontmatter.title} description={frontmatter.description}>
	<div class="mx-auto px-6 max-w-7xl">
		<div class="flex flex-col lg:grid lg:grid-cols-10">
			<!-- vertical navbar -->
			<div class="lg:col-span-2" transition:name="vertical-navbar">
				<aside
					class="hidden lg:translate-x-0 overflow-y-auto z-30 lg:block lg:sticky py-8 lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
				>
					<VerticalNav />
				</aside>
			</div>
			<div class="lg:col-span-8">
				<div class="flex flex-col lg:grid lg:grid-cols-10">
					<div class="col-span-8 pr-10 pb-10 pt-8">
						<slot />
					</div>
					<div
						class="hidden col-span-2 pt-8 lg:block lg:sticky lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
					>
						<!-- TOC -->
						<TableOfContent headings={headings} />
					</div>
				</div>
			</div>
		</div>
	</div>
	<style is:global>
		blockquote {
			@apply my-4 border-l-4 border-gray-500 pl-4;
		}

		a {
			@apply inline-block text-blue-400 hover:underline;
		}

		h1 {
			@apply mb-2 text-4xl font-bold;
		}

		h2 {
			@apply mb-2 mt-5 scroll-mt-[calc(20px+var(--header-height))] text-3xl font-bold;
		}

		h3 {
			@apply mb-2 mt-5 scroll-mt-[calc(17px+var(--header-height))] text-2xl font-bold;
		}

		h4 {
			@apply mb-2 mt-5 scroll-mt-[calc(14px+var(--header-height))] text-xl font-bold;
		}

		p {
			@apply mb-2 mt-2 font-[system-ui] leading-6;
		}

		hr {
			@apply my-10 border-gray-500;
		}

		ul {
			@apply list-outside list-disc leading-7;
		}

		code {
			@apply rounded-md bg-[#323232] px-1 py-1 font-[monospace,courier-new] text-sm;
		}

		ul,
		ol {
			@apply list-outside  leading-7;
		}

		ul {
			@apply list-disc;
		}

		ul ul,
		ol ul {
			@apply mb-2 ml-5 list-[circle];
		}

		ul li,
		ol li {
			@apply mb-1 ml-5;
		}

		ol {
			@apply ml-5 list-outside list-decimal leading-7;
		}
	</style>
	<script is:inline>
		// make all <a> attributes have target="_blank" except for Table of Contents
		document.querySelectorAll("a:not(.no-target-blank)").forEach((el) => {
			el.setAttribute("target", "_blank");
		});
	</script>
</Layout>