<script lang="ts">
	import { format, formatISO } from 'date-fns';
	import Jpeg from '../profile.avif?format=jpeg';

	export let data;
</script>

<svelte:head>
	<title>{data.title} - Kaan Barmore-Genç</title>
	<meta property="og:title" content={`${data.title} - Kaan Barmore-Genç`} />
	<meta property="og:type" content="article" />
	<meta property="article:author" content="https://bgenc.net" />
	<meta property="og:url" content={`https://bgenc.net/${data.slug}/`} />
	<meta property="article:published_time" content={formatISO(new Date(data.date))} />
	{#if data.image}
		<meta property="og:image" content={data.image} />
	{:else}
		<meta property="og:image" content={`https://bgenc.net${Jpeg}`} />
	{/if}
	{#if data.excerpt}
		<meta name="description" content={data.excerpt} />
		<meta property="og:description" content={data.excerpt} />
	{/if}
	<meta property="og:locale" content="en_US" />
	<meta property="og:site_name" content="Kaan Barmore-Genç's Site" />
</svelte:head>

<article data-pagefind-body>
	<h1>{data.title}</h1>
	<time datetime={data.date}>
		{format(new Date(data.date), 'MMMM d, yyyy')}
	</time>
	<svelte:component this={data.content} />
</article>

<style>
	time {
		display: block;
		margin-bottom: 4rem;
	}
</style>
