yarkov.tech/src/layouts/article.astro

---
import type { MarkdownHeading } from "astro";
import type { CollectionEntry } from "astro:content";
import { DEFAULT_LANGUAGE, SITE_METADATA } from "@root/constants";
import BaseHead from "@components/BaseHead.astro";
import BaseLayout from "@components/BaseLayout.astro";
import ArticleContent from "@components/ArticleContent.astro";
import ArticlePost from "@components/ArticlePost.astro";
import OpenGraph from "@components/OpenGraph.astro";
import TableOfContents from "@root/components/TableOfContents.astro";
import type { ArticleTranslation } from "@/directus-schema";
import * as utils from "@utils/article";

export interface Props {
	lang?: string | undefined;
	article: ArticleTranslation;
	availableOnLangs?: CollectionEntry<"blog">[];
	headings: MarkdownHeading[];
}

const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
const { lang = DEFAULT_LANGUAGE, article, availableOnLangs } = Astro.props as Props;
const { title, description, cover_image, content } = article;
const htmlContent = await utils.markdownToHTML(content);
---

<html lang={lang}>
	<BaseHead title={title} description={description}>
		<OpenGraph
			title={title}
			siteName={SITE_METADATA.name}
			description={description}
			type='article'
			url={canonicalUrl.href}
			image={cover_image
				? { path: cover_image.filename_disk, width: "700", height: "400", type: cover_image.type }
				: undefined}
		/>
		<script is:inline defer src='/assets/js/load-code-highlight.js'></script>
	</BaseHead>

	<BaseLayout>
		<div class='container'>
			<ArticlePost lang={lang} article={article} availableOnLangs={availableOnLangs}>
				<ArticleContent set:html={htmlContent} />
			</ArticlePost>
		</div>
	</BaseLayout>
</html>