<script>
	import { config } from '$lib/site.config.js';
	import dayjs from 'dayjs';
	export let data;
	const ogImageUri = `/og/image/${dayjs(data.fm.date).unix()}/${data.title}.webp`;
</script>

<!-- svelte-ignore a11y-missing-content -->
<svelte:head>
	<title>{config.title} > {data.title}</title>
	<meta name="description" content={data.fm.description || `A(n) ${config.title} article.`} />
	<meta property="og:title" content={data.title} />
	<meta property="og:type" content="article" />
	<meta property="og:url" content={`${config.url}/${data.slug}`} />
	<meta property="og:image" content={ogImageUri} />
	<prerender>
		<a href={ogImageUri} />
	</prerender>
</svelte:head>

<div>
	{@html data.body.dom}
</div>

<style lang="postcss">
	:global(h1) {
		@apply mb-0;
	}
	:global(img) {
		@apply h-fit object-contain;
	}
</style>
