feat: finish post page

feat: update not found handling
2022-07-24 05:35:23 +07:00 · 2022-07-24 05:04:56 +07:00
12 changed files with 159 additions and 146 deletions
--- a/22
+++ b/22
@ -1,23 +1,15 @@
-FROM node:16
-
+FROM node:16-alpine
 # install dependencies
 WORKDIR /app
-COPY package.json package-lock.json ./
-RUN pnpm install
-
-# Copy all local files into the image.
+RUN npm install -g pnpm
 COPY . .
-
+RUN pnpm install 
 RUN pnpm build
-
-###
-# Only copy over the Node pieces we need
-# ~> Saves 35MB
-###
-FROM node:16-slim
-
+FROM node:16-alpine
 WORKDIR /app
-COPY --from=0 /app/build .
+COPY --from=0 /app/build /app
+COPY --from=0 /app/package.json /app
+COPY --from=0 /app/node_modules /app/node_modules

 EXPOSE 3000
 CMD ["node","./index.js"]
--- a/package.json
+++ b/package.json
@ -39,7 +39,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@damillora/plachta": "^1.0.0",
+		"@damillora/plachta": "^1.2.0",
 		"@tryghost/content-api": "^1.11.0",
 		"fitvids": "^2.1.1",
 		"svelte-material-icons": "^2.0.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -1,7 +1,7 @@
 lockfileVersion: 5.3

 specifiers:
-  '@damillora/plachta': ^1.0.0
+  '@damillora/plachta': ^1.2.0
  '@sveltejs/adapter-auto': next
  '@sveltejs/adapter-node': ^1.0.0-next.83
  '@sveltejs/kit': next
@ -30,7 +30,7 @@ specifiers:
  vite: ^3.0.2

 dependencies:
-  '@damillora/plachta': 1.0.0_svelte@3.49.0
+  '@damillora/plachta': 1.2.0_svelte@3.49.0
  '@tryghost/content-api': 1.11.0
  fitvids: 2.1.1
  svelte-material-icons: 2.0.2_svelte@3.49.0
@ -66,8 +66,8 @@ packages:
    resolution: {integrity: sha512-B1/plF62pt+H2IJHvApK8fdOJAVsvojvacuac8x8s+JIyqbropMyqNqHTKLm3YD8ZFLGwYeFTudU+PQ7vGvBdA==}
    dev: true

-  /@damillora/plachta/1.0.0_svelte@3.49.0:
-    resolution: {integrity: sha512-ZOwMptEOhI0fBOe40p8PJVjV3b78yg6HoW3e/PaKND+fXtvOTbFnDZGfCPcMOD+pKRZm9G5X7AygqJ9atn0rfA==}
+  /@damillora/plachta/1.2.0_svelte@3.49.0:
+    resolution: {integrity: sha512-DDXojXmmyUS6tX4dgv8eirAU8R13fzHhcX/VoRRf8kfEpwPLqkAVto7qCdfveN0/Q3t/IqX0AKiFCdCfRI50wA==}
    dependencies:
      svelte-material-icons: 2.0.2_svelte@3.49.0
      svelte-themes: 0.0.98
--- a/src/lib/components/SEO/IndexSEO.svelte
+++ b/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}
--- a/src/lib/components/SEO/PostSEO.svelte
+++ b/src/lib/components/SEO/PostSEO.svelte
@ -1,7 +1,4 @@
 <script lang="ts">
-import Post from "../../../../../Plachta/package/components/PageTypes/Post.svelte";
-
-
 	export let post: any;

 	let schemaOrg = `
@ -24,7 +21,10 @@ import Post from "../../../../../Plachta/package/components/PageTypes/Post.svelt
        "name": "${post.primary_author.name}",
        "image": {
            "@type": "ImageObject",
-            "url": "${post.primary_author.profile_image ?? 'https://blog.nanao.moe/images/default-feature.jpg'}"
+            "url": "${
+							post.primary_author.profile_image ??
+							'https://blog.nanao.moe/images/default-feature.jpg'
+						}"
        },
        "url": "${post.primary_author.url}/"
    },
@ -53,7 +53,10 @@ import Post from "../../../../../Plachta/package/components/PageTypes/Post.svelt
 	<meta property="og:title" content={post.title} />
 	<meta property="og:description" content={post.excerpt} />
 	<meta property="og:url" content={post.url} />
-    <meta property="og:image" content={post.feature_image ?? 'https://blog.nanao.moe/images/default-feature.jpg'} />
+	<meta
+		property="og:image"
+		content={post.feature_image ?? 'https://blog.nanao.moe/images/default-feature.jpg'}
+	/>
 	<meta property="article:published_time" content="2022-07-22T12:42:23.000Z" />
 	<meta property="article:modified_time" content="2022-07-22T12:47:19.000Z" />
 	<meta property="article:tag" content={post.primary_tag.name} />
@ -63,7 +66,10 @@ import Post from "../../../../../Plachta/package/components/PageTypes/Post.svelt
 	<meta name="twitter:title" content={post.title} />
 	<meta name="twitter:description" content={post.excerpt} />
 	<meta name="twitter:url" content={post.url} />
-    <meta name="twitter:image" content={post.feature_image ?? 'https://blog.nanao.moe/images/default-feature.jpg'} />
+	<meta
+		name="twitter:image"
+		content={post.feature_image ?? 'https://blog.nanao.moe/images/default-feature.jpg'}
+	/>
 	<meta name="twitter:label1" content="Written by" />
 	<meta name="twitter:data1" content={post.primary_author.name} />
 	<meta name="twitter:label2" content="Filed under" />
--- a/src/lib/content/contentApi.ts
+++ b/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' });

@ -32,21 +54,32 @@ export const browsePostWithAuthor = async (slug: string, page = 1) => {
    return posts
 }
 export const readPost = async (slug: string) => {
+    try {
        const post = await api.posts.read({ slug }, { include: ['tags', 'authors'] });

        return post;
+    } catch (e) {
+        return null;
+    }
 }

 export const readTag = async (slug: string) => {
+    try {
        const tag = await api.tags.read({ slug });

        return tag;
+    } catch (e) {
+        return null;
+    }
 }

 export const readAuthor = async (slug: string) => {
+    try {
        const author = await api.authors.read({ slug });
-
        return author;
+    } catch (e) {
+        return null;
+    }
 }

 export const browseLatestPost = async () => {
--- a/src/routes/[tag]/[slug].svelte
+++ b/src/routes/[tag]/[slug].svelte
@ -2,10 +2,21 @@
 	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 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
+				post: post,
+				prevPost: prevPost,
+				nextPost: nextPost,
+				relatedPost: relatedPost
 			}
 		};
 	};
@ -24,22 +35,33 @@
 	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[];

+	onMount(() => {
 		if (browser) {
 			fitvids();
 		}
+	});
 </script>

 <svelte:head>
 	<title>{post.title}</title>
 </svelte:head>

-<PostSeo post={post} />
+<PostSeo {post} />
 <Hero background={post.feature_image ?? `/images/default-feature.jpg`} />

 <Container>
@ -55,78 +77,21 @@ import PostSeo from '$lib/components/SEO/PostSEO.svelte';
 			{@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">
+	<PostRelated name={post.primary_tag.name} url={post.primary_tag.utl} accent_color={post.primary_tag.accent_color}>
+		{#each relatedPost as post}
 			<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"
+				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>
--- a/src/routes/[tag]/index.svelte
+++ b/src/routes/[tag]/index.svelte
@ -2,6 +2,13 @@
 	export const load: Load = async ({ params }) => {
 		const tagSlug = params.tag;
 			const tagObj = await readTag(tagSlug);
+		if (!tagObj) {
+			return {
+				status: 404,
+				error: new Error('Tag not found')
+			};
+		}
+		
 			const posts = await browsePostWithTag(tagSlug);

 			return {
--- a/src/routes/__layout.svelte
+++ b/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>
--- a/src/routes/author/[author].svelte
+++ b/src/routes/author/[author].svelte
@ -2,6 +2,14 @@
 	export const load: Load = async ({ params }) => {
 		const authorSlug = params.author;
 		const authorObj = await readAuthor(authorSlug);
+
+		if (!authorObj) {
+			return {
+				status: 404,
+				error: new Error('Author not found')
+			};
+		}
+		
 		const posts = await browsePostWithAuthor(authorSlug);

 		return {
--- a/svelte.config.js
+++ b/svelte.config.js
@ -8,7 +8,7 @@ const config = {
 	preprocess: preprocess(),

 	kit: {
-		adapter: adapter()
+		adapter: adapter(),
 	}
 };

--- a/vite.config.js
+++ b/vite.config.js
@ -5,6 +5,8 @@ import preprocess from 'svelte-preprocess';
 const config = {
 	plugins: [sveltekit({
 		useVitePreprocess: true,
+
+		noExternal: ['dayjs']
 	})],
 };
Author	SHA1	Message	Date
Damillora	6d8981ff57	feat: finish post page	2022-07-24 05:35:23 +07:00
Damillora	f1ed9a1609	feat: update not found handling	2022-07-24 05:04:56 +07:00