80 lines
1.8 KiB
Svelte
80 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import dayjs from 'dayjs';
|
|
import {
|
|
Hero,
|
|
PostHeader,
|
|
Post,
|
|
PostMain,
|
|
PostNavigator,
|
|
Container,
|
|
PostRelated,
|
|
PostCard,
|
|
GhostStyle
|
|
} from '@damillora/plachta';
|
|
|
|
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>
|