From 8c425f89c86c0c17ffb4b46d8072d7778fd887c2 Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Sun, 28 Apr 2024 01:23:33 +0200
Subject: [PATCH] Individual blogPosts - Server + page + Layout

---
 src/lib/components/blog/Post.svelte       |   3 +
 src/lib/components/blog/PostLayout.svelte | 100 ++++++++++++----------
 src/routes/blog/[slug]/+page.svelte       |  16 ++--
 src/routes/blog/[slug]/+page.ts           |  27 +++---
 4 files changed, 77 insertions(+), 69 deletions(-)
 create mode 100644 src/lib/components/blog/Post.svelte

diff --git a/src/lib/components/blog/Post.svelte b/src/lib/components/blog/Post.svelte
new file mode 100644
index 0000000..5af2d4b
--- /dev/null
+++ b/src/lib/components/blog/Post.svelte
@@ -0,0 +1,3 @@
+<article class="text-token prose prose-slate mx-auto dark:prose-invert lg:prose-lg">
+	<slot />
+</article>
diff --git a/src/lib/components/blog/PostLayout.svelte b/src/lib/components/blog/PostLayout.svelte
index 4391a0c..223cab5 100644
--- a/src/lib/components/blog/PostLayout.svelte
+++ b/src/lib/components/blog/PostLayout.svelte
@@ -1,63 +1,69 @@
 <script lang="ts">
-	import { formatDate } from '$content/utils';
+	import SEO from '$lib/components/SEO/index.svelte';
 	import '$lib/assets/prism-nord.css';
+	import type { Post } from '$lib/types/post';
+	import Tags from '$lib/components/blog/Tags.svelte';
 
-	export let imagesDirectoryName: string;
-	export let excerpt: string = '';
-	export let date: string = '';
-	export let slug: string = '';
-	export let title: string;
-	export let image: string;
-	export let tags: string[] = [];
-	export let type: 'blog' | 'projects';
+	export let post: Post;
+
+	const {
+		postTitle,
+		datePublished,
+		featuredImage,
+		featuredImageAlt,
+		lastUpdated,
+		seoMetaDescription: metadescription,
+		slug,
+		timeToRead,
+		ogImage,
+		ogSquareImage,
+		twitterImage
+	} = post || {};
+
+	const breadcrumbs = [
+		{ name: 'Home', slug: '' },
+		{ name: 'type', slug: post.type },
+		{ name: postTitle, slug }
+	];
 </script>
 
-<svelte:head>
-	<title>{title}</title>
-	<meta name="description" content={excerpt} />
-	<meta property="og:title" content={title} />
-	<meta property="og:type" content="article" />
-	<meta property="og:description" content={excerpt} />
-	<meta property="og:url" content="https://mattmor.in/{slug}" />
-	<meta property="og:image" content={image} />
-	<meta property="og:type" content="article:published_time" />
-	<meta property="article:published_time" content={date} />
-	{#each tags as tag (tag)}
-		<meta property="article:tag" content={tag} />
-	{/each}
-</svelte:head>
+<SEO
+	article
+	{breadcrumbs}
+	{slug}
+	{postTitle}
+	{datePublished}
+	{lastUpdated}
+	{metadescription}
+	{timeToRead}
+	{featuredImage}
+	{ogImage}
+	{ogSquareImage}
+	{twitterImage}
+/>
 
-<article class="flex justify-center mt-4 mb-8">
-	<div class=" w-full md:w-[50rem] leading-[177.7%]">
+<section class="flex justify-center mt-4 mb-8">
+	<div
+		class=" w-full md:w-[50rem] leading-[177.7%] bg-white/50 dark:bg-black/50 m-2 rounded-t-lg mx-auto"
+	>
 		<header>
 			<img
-				src="/images/{imagesDirectoryName}/{slug}/{image}"
-				alt={`${title}`}
-				class=" bg-black/50 w-full aspect-[21/9] max-h-[540px] rounded-t-lg"
+				src={featuredImage}
+				alt={featuredImageAlt}
+				class=" w-full aspect-[21/9] max-h-[540px] rounded-t-lg"
 			/>
 		</header>
-		<div class="flex-auto flex justify-between items-center py-4 px-2 bg-surface-900">
-			{#if tags && tags.length > 0}
-				<div class="flex mb-2 items-center gap-2">
-					tags: {#each tags as tag}
-						<a
-							data-sveltekit-preload-data="hover"
-							href="/blog?{new URLSearchParams({ tag }).toString()}"
-						>
-							<span class="chip variant-ghost-surface">{tag}</span>
-						</a>
-					{/each}
-				</div>
-			{/if}
-			<small>On {formatDate(date)}</small>
-		</div>
-		<div class="space-y-4">
-			<h2 class="h2" data-toc-ignore>{title}</h2>
-			<div class="max-w-none text-token">
+		<Tags {post} />
+		<div class="space-y-4 m-8">
+			<h2 class="h2" data-toc-ignore>{post.title}</h2>
+			<div class="max-w-none md:w-[720px]">
 				<slot />
 			</div>
 		</div>
 		<hr class="opacity-50" />
 		<footer class="p-4 flex justify-start items-center space-x-4" />
 	</div>
-</article>
+</section>
+
+<style lang="postcss">
+</style>
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 9eb2451..bc43b99 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -1,16 +1,10 @@
 <script lang="ts">
-	import BlogContentLayout from '$lib/components/blog/BlogContentLayout.svelte';
-	import type { PageData } from './$types';
+	import PostLayout from '$lib/components/blog/PostLayout.svelte';
+	import type { PageData } from '../$types';
 
 	export let data: PageData;
 </script>
 
-<!-- <svelte:head>
-	<title>{data.post.title}</title>
-	<meta property="og:type" content="article" />
-	<meta property="og:title" content={data.post.title} />
-</svelte:head> -->
-
-<BlogContentLayout post={data.post}>
-	<svelte:component this={data.Component} />
-</BlogContentLayout>
+<PostLayout post={data.meta}>
+	<svelte:component this={data.content} />
+</PostLayout>
diff --git a/src/routes/blog/[slug]/+page.ts b/src/routes/blog/[slug]/+page.ts
index 1472be1..9aa1bd2 100644
--- a/src/routes/blog/[slug]/+page.ts
+++ b/src/routes/blog/[slug]/+page.ts
@@ -1,14 +1,19 @@
-import { getPost, listPosts } from '$content/blog';
-import type { PageLoad } from './$types';
+import type { PageServerLoad } from './$types';
 
-export const entries = async () => {
-	const posts = await listPosts();
-	return posts
-		.filter((post) => post.slug !== undefined)
-		.map((post) => ({ slug: post.slug as string }));
-};
+import { error } from '@sveltejs/kit';
 
-export const load: PageLoad = async ({ params, parent }) => {
-	await parent();
-	return await getPost(params.slug);
+export const load: PageServerLoad = async ({ params }) => {
+	try {
+		const post = await import(`../../../content/blog/${params.slug}.md`);
+
+		return {
+			content: post.default,
+			meta: post.metadata
+		};
+	} catch (err) {
+		if (err.status === 404) {
+			error(404, `Could not find ${params.slug}`);
+		}
+		throw err;
+	}
 };