feat: add preview posts

src/lib/components/SEO/PostSEO.svelte

@@ -62,8 +62,8 @@
 		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:published_time" content="{post.date_published}" />
-	<meta property="article:modified_time" content="2022-07-22T12:47:19.000Z" />
+	<meta property="article:modified_time" content="{post.date_updated}" />
 	<meta property="article:tag" content={post.category.name} />
 
 	<meta property="article:publisher" content="https://www.facebook.com/Damillora" />

src/lib/content/contentApi.ts

@@ -1,5 +1,5 @@
 
-import { createDirectus, readItems, rest } from '@directus/sdk';
+import { createDirectus, readItem, readItems, rest } from '@directus/sdk';
 import { DIRECTUS_URL, mapAuthor, mapCategory, mapIndexPosts, mapPost, mapSitemapPosts } from './directusUtils';
 
 const POSTS_PER_PAGE = 10;
@@ -10,6 +10,7 @@ const indexPageFields = [
     "title",
     "feature_image.*",
     "date_published",
+    "date_updated",
     "excerpt",
     "slug",
     "author.*",
@@ -17,9 +18,9 @@ const indexPageFields = [
     "author.profile_image.*",
 ];
 const allPageFields = [
-    ...indexPageFields, "date_updated"
+    ...indexPageFields
 ];
-const postPageFields = [...indexPageFields, "content"];
+const postPageFields = [...indexPageFields, "status", "content"];
 const authorPageFields = [
     "id",
     "name",
@@ -221,9 +222,14 @@ export const browsePostWithAuthor = async (slug: string, page = 1) => {
 
 export const readPost = async (slug: string) => {
     const filterPost = {
-        "slug": {
+        "_and": [
-            "_eq": slug,
+            {
-        }
+                "slug": {
+                    "_eq": slug,
+                }
+            },
+            filterPublished
+        ]
     };
     try {
         const post = await directus.request(readItems("posts", {
@@ -237,6 +243,18 @@ export const readPost = async (slug: string) => {
         return null;
     }
 }
+
+export const readPreviewPost = async (id: string) => {
+    try {
+        const post = await directus.request(readItem("posts", id,  {
+            fields: postPageFields,
+        }))
+
+        return mapPost(post);
+    } catch (e) {
+        return null;
+    }
+}
 export const readTag = async (slug: string) => {
     const filterTag = {
         "slug": {

src/lib/content/directusUtils.ts

@@ -108,12 +108,14 @@ export const mapPost = (post: any) => {
     return {
         id: post.id,
         title: post.title,
+        status: post.status,
         feature_image: generateAssetUrl(post.feature_image),
         authors: [author],
         primary_author: author,
         category: category,
         excerpt: post.excerpt,
         date_published: post.date_published,
+        date_updated: post.date_updated,
         reading_time: null,
         url: generatePostUrl(category?.slug, post.slug),
         content: post.content,

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

@@ -8,7 +8,8 @@
 		Container,
 		PostRelated,
 		PostCard,
-		GhostStyle
+		GhostStyle,
+		Notice
 	} from '@damillora/plachta';
 	import PostSeo from '$lib/components/SEO/PostSEO.svelte';
 	
@@ -23,12 +24,17 @@
 
 <Container>
 	<Post>
+		{#if data.post.status !== "published"}
+		<Notice>
+			This is a <strong>preview</strong> of a draft post. 
+		</Notice>
+		{/if}
 		<PostHeader
 			background={data.post.feature_image}
 			title={data.post.title}
 			authors={data.post.authors}
 			primary_tag={data.post.category} 
-			date={dayjs(data.post.date_published).format('DD MMM YYYY')}
+			date={data.post.date_published ? dayjs(data.post.date_published).format('DD MMM YYYY') : null}
 		/>
 		<PostMain>
 			<GhostStyle>
@@ -38,6 +44,7 @@
 		<PostNavigator prev_post={data.prevPost} next_post={data.nextPost} />
 	</Post>
 
+	{#if data.relatedPost.length > 0}
 	<PostRelated
 		name={data.post.category.name}
 		url={data.post.category?.url}
@@ -55,5 +62,5 @@
 			/>
 		{/each}
 	</PostRelated>
+	{/if}
 </Container>
-categorycategorycategorycategorycategorydate_published

src/routes/[tag]/[slug]/+page.ts

@@ -1,11 +1,17 @@
-import { browseNextPost, browsePrevPost, browseRelatedPost, readPost } from '$lib/content/contentApi';
+import { browseNextPost, browsePrevPost, browseRelatedPost, readPost, readPreviewPost } from '$lib/content/contentApi';
 import { processPostHtml } from '$lib/content/postProcessor';
 import { error } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params }) => {
 	const postSlug = params.slug;
-	const post = await readPost(postSlug);
+	const tag = params.tag;
+	let post = null;
+	if (tag === "p") {
+		post = await readPreviewPost(postSlug);
+	} else {
+		post = await readPost(postSlug);
+	}
 	if (!post) {
 		error(404, 'Post not found');
 	}