Damillora
/
Shallie
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: finish post page

This commit is contained in:
Damillora 2022-07-24 05:35:23 +07:00
parent f1ed9a1609
commit 6d8981ff57
4 changed files with 73 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/SEO/IndexSEO.svelte
View File

@ -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}

26
src/lib/content/contentApi.ts
View File

@ -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;

130
src/routes/[tag]/[slug].svelte
View File

@ -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>

2
src/routes/__layout.svelte
View File

@ -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>