Shallie/src/routes/[tag]/[slug]/+page.svelte

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

	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 GhostStyle from '@damillora/plachta/components/Base/GhostStyle.svelte';
	import { processPostHtml } from '$lib/content/postProcessor';

	import type { Load } from '@sveltejs/kit';
	import {
		browseNextPost,
		browsePrevPost,
		browseRelatedPost,
		readPost
	} from '$lib/content/contentApi';
	import { browser } from '$app/environment';
	import PostSeo from '$lib/components/SEO/PostSEO.svelte';
	import { onMount } from 'svelte';
	import { afterNavigate } from '$app/navigation';
	import ResponsiveHero from '$lib/components/ResponsiveHero.svelte';

	export let data;
</script>

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

<PostSeo post={data.post} />

<ResponsiveHero background={data.post.feature_image} />

<Container>
	<Post>
		<PostHeader
			title={data.post.title}
			authors={data.post.authors}
			primary_tag={data.post.primary_tag}
			date={dayjs(data.post.published_at).format('DD MMM YYYY')}
			reading_time={`${data.post.reading_time} min read`}
		/>
		<PostMain>
			<GhostStyle>
				{@html data.post.html}
				
				<br/>
			</GhostStyle>
			<svelte:fragment slot="comments" />
		</PostMain>
		<PostNavigator prev_post={data.prevPost} next_post={data.nextPost} />
	</Post>

	<PostRelated
		name={data.post.primary_tag.name}
		url={data.post.primary_tag.url}
		accent_color={data.post.primary_tag.accent_color}
	>
		{#each data.relatedPost as post}
			<PostCard
				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`}
				excerpt={post.excerpt}
				feature_image={post.feature_image ?? '/images/default-feature.jpg'}
				url={post.url}
			/>
		{/each}
	</PostRelated>
</Container>