<script lang="ts" context="module">
	export const load: Load = async ({ params }) => {
		const postSlug = params.slug;
		const post = await readPost(postSlug);

		return {
			props: {
				post: post
			}
		};
	};
</script>

<script lang="ts">
	import dayjs from 'dayjs';
	import fitvids from 'fitvids';

	import Hero from '@damillora/plachta/components/Hero/Hero.svelte';
	import PostHeader from '@damillora/plachta/components/Post/PostHeader.svelte';
	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
	import PostNavigator from '@damillora/plachta/components/Post/PostNavigator.svelte';
	import Container from '@damillora/plachta/components/Container/Container.svelte';
	import PostRelated from '@damillora/plachta/components/Post/PostRelated.svelte';
	import PostCard from '@damillora/plachta/components/PostCard/PostCard.svelte';
	import type { Load } from '@sveltejs/kit';
	import { readPost } from '$lib/content/contentApi';
	import { browser } from '$app/env';
import PostSeo from '$lib/components/SEO/PostSEO.svelte';

	export let post: any;

	if (browser) {
		fitvids();
	}
</script>

<svelte:head>
	<title>{post.title}</title>
</svelte:head>

<PostSeo post={post} />
<Hero background={post.feature_image ?? `/images/default-feature.jpg`} />

<Container>
	<Post>
		<PostHeader
			title={post.title}
			authors={post.authors}
			primary_tag={post.primary_tag}
			date={dayjs(post.published_at).format('DD MMM YYYY')}
			reading_time={`${post.reading_time} min read`}
		/>
		<PostMain>
			{@html post.html}
			<svelte:fragment slot="comments" />
		</PostMain>
		<PostNavigator
			prev_post={{
				url: '/examples/post-page',
				title: 'Sophie!'
			}}
			next_post={{
				url: '/examples/post-page',
				title: 'Sophie!'
			}}
		/>
	</Post>

	<PostRelated name="Sophie" url="https://google.com" accent_color="#3b34dc">
		<PostCard
			authors={[
				{
					profile_image: 'https://images.nanao.moe/r/GDuirR.jpg',
					url: '/examples/post-page',
					name: 'Sophie Neuenmuller'
				}
			]}
			date="2022 November 2020"
			excerpt="Sophie!"
			feature_image="https://images.nanao.moe/r/7jETH3.png"
			primary_tag={{
				accent_color: '#3b7b9c',
				name: 'Sound Voltex',
				url: '/examples/post-page'
			}}
			reading_time="3 min"
			title="Sophie!"
			url="/examples/post-page"
		/>
		<PostCard
			authors={[
				{
					profile_image: 'https://images.nanao.moe/r/GDuirR.jpg',
					url: '/examples/post-page',
					name: 'Sophie Neuenmuller'
				}
			]}
			date="2022 November 2020"
			excerpt="Sophie!"
			feature_image="https://images.nanao.moe/r/7jETH3.png"
			primary_tag={{
				accent_color: '#3b7b9c',
				name: 'Sound Voltex',
				url: '/examples/post-page'
			}}
			reading_time="3 min"
			title="Sophie!"
			url="/examples/post-page"
		/>
		<PostCard
			authors={[
				{
					profile_image: 'https://images.nanao.moe/r/GDuirR.jpg',
					url: '/examples/post-page',
					name: 'Sophie Neuenmuller'
				}
			]}
			date="2022 November 2020"
			excerpt="Sophie!"
			feature_image="https://images.nanao.moe/r/7jETH3.png"
			primary_tag={{
				accent_color: '#3b7b9c',
				name: 'Sound Voltex',
				url: '/examples/post-page'
			}}
			reading_time="3 min"
			title="Sophie!"
			url="/examples/post-page"
		/>
	</PostRelated>
</Container>
