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

<script lang="ts" context="module">
	export const load: Load = async ({ params }) => {
		const postSlug = params.slug;
		const post = await readPost(postSlug);
		if (!post) {
			return {
				status: 404,
				error: new Error('Post not found')
			};
		}
		const newHtml = await processPostHtml(post.html ?? '');
		post.html = newHtml;
		const prevPost = await browsePrevPost(post);
		const nextPost = await browseNextPost(post);
		const relatedPost = await browseRelatedPost(post.primary_tag?.slug, post.id);
		return {
			props: {
				post: post,
				prevPost: prevPost,
				nextPost: nextPost,
				relatedPost: relatedPost
			}
		};
	};
</script>

<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/env';
	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 post: any;
	export let prevPost: any;
	export let nextPost: any;
	export let relatedPost: any[];
</script>

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

<PostSeo {post} />

<ResponsiveHero background={post.feature_image} />

<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>
			<GhostStyle>
				{@html post.html}
			</GhostStyle>
			<svelte:fragment slot="comments" />
		</PostMain>
		<PostNavigator prev_post={prevPost} next_post={nextPost} />
	</Post>

	<PostRelated
		name={post.primary_tag.name}
		url={post.primary_tag.utl}
		accent_color={post.primary_tag.accent_color}
	>
		{#each 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>