feat: finish post page
This commit is contained in:
parent
f1ed9a1609
commit
6d8981ff57
@ -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'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'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}
|
||||
|
||||
@ -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' });
|
||||
|
||||
|
||||
@ -1,18 +1,24 @@
|
||||
<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 post = await readPost(postSlug);
|
||||
if (!post) {
|
||||
return {
|
||||
props: {
|
||||
post: post
|
||||
}
|
||||
status: 404,
|
||||
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) {
|
||||
fitvids();
|
||||
}
|
||||
onMount(() => {
|
||||
if (browser) {
|
||||
fitvids();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -60,78 +77,21 @@
|
||||
{@html post.html}
|
||||
<svelte:fragment slot="comments" />
|
||||
</PostMain>
|
||||
<PostNavigator
|
||||
prev_post={{
|
||||
url: '/examples/post-page',
|
||||
title: 'Sophie!'
|
||||
}}
|
||||
next_post={{
|
||||
url: '/examples/post-page',
|
||||
title: 'Sophie!'
|
||||
}}
|
||||
/>
|
||||
<PostNavigator prev_post={prevPost} next_post={nextPost} />
|
||||
</Post>
|
||||
|
||||
<PostRelated name="Sophie" url="https://google.com" accent_color="#3b34dc">
|
||||
<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"
|
||||
/>
|
||||
<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 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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user