feat: finish post page

src/lib/components/SEO/IndexSEO.svelte

@@ -16,7 +16,7 @@
     "url": "https://blog.nanao.moe/",
     "image": {
         "@type": "ImageObject",
-        "url": "https://blog.nanao.moe/images/default-header.jpg"
+        "url": "https://blog.nanao.moe/images/default-feature.jpg"
     },
     "mainEntityOfPage": {
         "@type": "WebPage",
@@ -34,13 +34,13 @@
 	<meta property="og:title" content="Damillora&#x27;s Virtual Memoir" />
 	<meta property="og:description" content="I talk about code, games, and music." />
 	<meta property="og:url" content="https://blog.nanao.moe/" />
-	<meta property="og:image" content="https://blog.nanao.moe/images/default-header.jpg" />
+	<meta property="og:image" content="https://blog.nanao.moe/images/default-feature.jpg" />
 	<meta property="article:publisher" content="https://nanao.moe" />
 	<meta name="twitter:card" content="summary_large_image" />
 	<meta name="twitter:title" content="Damillora&#x27;s Virtual Memoir" />
 	<meta name="twitter:description" content="I talk about code, games, and music." />
 	<meta name="twitter:url" content="https://blog.nanao.moe/" />
-	<meta name="twitter:image" content="https://blog.nanao.moe/images/default-header.jpg" />
+	<meta name="twitter:image" content="https://blog.nanao.moe/images/default-feature.jpg" />
 	<meta name="twitter:site" content="@Damillora" />
 
 	{@html schemaOrg}

src/lib/content/contentApi.ts

@@ -16,6 +16,28 @@ export const browsePost = async (page = 1) => {
 
     return posts
 }
+export const browseNextPost = async (id: string) => {
+    const posts = await api.posts.browse({ limit: 1, filter: [`id:>${id}`], order: 'id ASC' });
+
+    if (posts.length > 0) {
+        return posts[0];
+    }
+    return null;
+}
+export const browsePrevPost = async (id: string) => {
+    const posts = await api.posts.browse({ limit: 1, filter: [`id:<${id}`], order: 'id DESC' });
+
+    if (posts.length > 0) {
+        return posts[0];
+    }
+    return null;
+}
+export const browseRelatedPost = async (tag: string | undefined, id: string) => {
+    const tagCondition = tag ? [`tag:${tag}`] : []
+    const posts = await api.posts.browse({ limit: 3, filter: [...tagCondition, ...[`id:-${id}`]], order: 'published_at DESC', include: ['tags', 'authors'] });
+
+    return posts;
+}
 export const browseAllPost = async (page = 1) => {
     const posts = await api.posts.browse({ limit: 'all' });
 
@@ -34,7 +56,7 @@ export const browsePostWithAuthor = async (slug: string, page = 1) => {
 export const readPost = async (slug: string) => {
     try {
         const post = await api.posts.read({ slug }, { include: ['tags', 'authors'] });
-    
+
         return post;
     } catch (e) {
         return null;
@@ -44,7 +66,7 @@ export const readPost = async (slug: string) => {
 export const readTag = async (slug: string) => {
     try {
         const tag = await api.tags.read({ slug });
-    
+
         return tag;
     } catch (e) {
         return null;

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

@@ -1,18 +1,24 @@
 <script lang="ts" context="module">
 	export const load: Load = async ({ params }) => {
 		const postSlug = params.slug;
-			const post = await readPost(postSlug);
+		const post = await readPost(postSlug);
-			if(!post) {
+		if (!post) {
-				return {
-					status: 404,
-					error: new Error('Post not found');
-				}
-			}
 			return {
-				props: {
+				status: 404,
-					post: post
+				error: new Error('Post not found')
-				}
 			};
+		}
+		const prevPost = await browsePrevPost(post.id);
+		const nextPost = await browseNextPost(post.id);
+		const relatedPost = await browseRelatedPost(post.primary_tag?.slug, post.id);
+		return {
+			props: {
+				post: post,
+				prevPost: prevPost,
+				nextPost: nextPost,
+				relatedPost: relatedPost
+			}
+		};
 	};
 </script>
 
@@ -29,15 +35,26 @@
 	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 {
+		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';
 
 	export let post: any;
+	export let prevPost: any;
+	export let nextPost: any;
+	export let relatedPost: any[];
 
-	if (browser) {
+	onMount(() => {
-		fitvids();
+		if (browser) {
-	}
+			fitvids();
+		}
+	});
 </script>
 
 <svelte:head>
@@ -60,78 +77,21 @@
 			{@html post.html}
 			<svelte:fragment slot="comments" />
 		</PostMain>
-		<PostNavigator
+		<PostNavigator prev_post={prevPost} next_post={nextPost} />
-			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">
+	<PostRelated name={post.primary_tag.name} url={post.primary_tag.utl} accent_color={post.primary_tag.accent_color}>
-		<PostCard
+		{#each relatedPost as post}
-			authors={[
+			<PostCard
-				{
+				title={post.title}
-					profile_image: 'https://images.nanao.moe/r/GDuirR.jpg',
+				authors={post.authors}
-					url: '/examples/post-page',
+				primary_tag={post.primary_tag}
-					name: 'Sophie Neuenmuller'
+				date={dayjs(post.published_at).format('DD MMM YYYY')}
-				}
+				reading_time={`${post.reading_time} min read`}
-			]}
+				excerpt={post.excerpt}
-			date="2022 November 2020"
+				feature_image={post.feature_image ?? '/images/default-feature.jpg'}
-			excerpt="Sophie!"
+				url={post.url}
-			feature_image="https://images.nanao.moe/r/7jETH3.png"
+			/>
-			primary_tag={{
+		{/each}
-				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>

src/routes/__layout.svelte

@@ -44,7 +44,7 @@
 			<a href="/"> <strong>Damillora</strong>'s Virtual Memoir </a>
 		</svelte:fragment>
 		<svelte:fragment slot="nav">
-			<NavMenu label="Home" url="/" />
+			<NavMenu label="nanao.moe" url="https://nanao.moe" />
 			<NavDarkMode />
 			<NavSearch on:search={doSearch} />
 		</svelte:fragment>