blog (#4)

Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com>
Reviewed-on: #4

src/routes/blog/[slug]/+page.server.ts

@@ -0,0 +1,24 @@
+import { env } from '$env/dynamic/private';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+	const { slug } = params;
+	const response = await fetch(
+		`http://${env.STRAPI_HOST}:${env.STRAPI_PORT}/api/blogs/${slug}?populate=Header&populate=Topics`,
+		{
+			method: 'GET',
+			headers: {
+				Authorization: `bearer ${env.STRAPI_TOKEN}`
+			}
+		}
+	);
+
+	const { data, meta } = await response.json();
+
+	console.log(JSON.stringify(data, null, 2));
+
+	return {
+		post: data,
+		meta
+	};
+};

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import dayjs from 'dayjs';
+	import type { PageProps } from './$types';
+	import { compile } from 'mdsvex';
+	import { env } from '$env/dynamic/public';
+
+	let { data }: PageProps = $props();
+
+	let post = $derived(data.post);
+</script>
+
+<div class="flex flex-col items-center gap-4">
+	<div class="w-full max-w-5xl px-4">
+		<p class="text-gray-500">{dayjs(post.createdAt).format('DD MMMM YYYY')}</p>
+		<h1 class="text-4xl font-light">{post.Title}</h1>
+	</div>
+	<img
+		class="aspect-4/2 w-full object-cover"
+		src={`${env.PUBLIC_STRAPI_HOST}${post.Header.formats.medium.url}`}
+		alt={post.Header.alternativeText}
+	/>
+	<div class="w-full max-w-5xl px-4">
+		{#await compile(post.Body)}
+			<div class="skeleton h-48 w-full"></div>
+		{:then content}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html content?.code}
+		{/await}
+	</div>
+</div>