105 lines
3.0 KiB
Svelte
105 lines
3.0 KiB
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>
|