---
import MetaDate from "./MetaDate.astro";
import TOC from "./TOC.astro";

const { content } = Astro.props;
const { Content, headings } = await content.render();

const toc = headings.map((heading) => {
	return heading;
});

if (content.data.code) {
	import "../styles/vendor/one-dark-pro.css";
}
---

<div class="sidebar region">
	<TOC toc={toc} />
	<article class="flow editorial">
		<h1>{content.data.title}</h1>
		<p class="h3">{content.data.subtitle}</p>
		<MetaDate item={content.data} />
		<div class="flow content">
			<Content />
		</div>
	</article>
</div>

<style>
	.sidebar {
		--gutter: var(--space-xs-m);
	}
	.sidebar > :global(:first-child) {
		--sidebar-target-width: 16rem;
	}
	.sidebar > :global(:last-child) {
		--sidebar-content-min-width: 60%;
	}
	h1 {
		font-size: var(--size-4);
	}
	.editorial :global(h2),
	.editorial :global(.h2) {
		font-size: var(--size-3);
		color: var(--color-blue);
	}

	.editorial :global(img),
	.editorial :global(picture) {
		margin: var(--space-s-m) 0;
	}
	.content :global(p + p) {
		margin-block-start: var(--space-s);
	}
</style>