blog (#4)

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

src/routes/blog/+page.server.ts

@@ -0,0 +1,89 @@
+import { env } from '$env/dynamic/private';
+import type { PageServerLoad } from './$types';
+
+type Dates = {
+	createdAt: string;
+	updateAt: string;
+	publishedAt: string;
+};
+
+interface BlogPost extends Dates {
+	id: number;
+	documentId: string;
+	Title: string;
+	Header: Image;
+	Body: string;
+	Topics: Topic[];
+}
+
+interface Topic {
+	id: number;
+	Topic: string;
+}
+
+interface ImageFormat {
+	ext: string;
+	url: string;
+	hash: string;
+	mime: string;
+	name: string;
+	path: unknown;
+	size: number;
+	width: number;
+	height: number;
+	sizeInBytes: number;
+}
+
+interface Image extends Dates {
+	id: number;
+	documentId: string;
+	name: string;
+	alternativeText: string | null;
+	caption: string | null;
+	width: string;
+	height: string;
+	formats: {
+		large: ImageFormat;
+		medium: ImageFormat;
+		small: ImageFormat;
+		thumbnail: ImageFormat;
+	};
+	hash: string;
+	ext: string;
+	mime: string;
+	size: number;
+	url: string;
+	previewUrl: string | null;
+	provider: string;
+	provider_metadata: unknown | null;
+}
+
+interface Meta {
+	pagingation: {
+		page: number;
+		pageSize: number;
+		pageCount: number;
+		total: number;
+	};
+}
+
+export const load: PageServerLoad = async () => {
+	const response = await fetch(
+		`http://${env.STRAPI_HOST}:${env.STRAPI_PORT}/api/blogs?populate=Header&populate=Topics`,
+		{
+			method: 'GET',
+			headers: {
+				Authorization: `bearer ${env.STRAPI_TOKEN}`
+			}
+		}
+	);
+
+	const { data, meta }: { data: BlogPost[]; meta: Meta } = await response.json();
+
+	console.log(JSON.stringify(data, null, 2));
+
+	return {
+		posts: data,
+		meta
+	};
+};

src/routes/blog/+page.svelte

@@ -1,5 +1,26 @@
-<script>
-	import Wip from '$lib/components/WIP.svelte';
+<script lang="ts">
+	import { env } from '$env/dynamic/public';
+	import BlogCard from '$lib/components/BlogCard.svelte';
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+
+	let posts = $derived(data.posts);
 </script>
 
-<Wip />
+{#if posts.length === 0}
+	<h3 class="text-center text-lg font-semibold">Looks like I haven't posted anything yet!</h3>
+{/if}
+
+<div class="mx-auto grid gap-8 px-3 py-3 sm:px-8 sm:py-4 lg:grid-cols-2">
+	{#each posts as post (post.id)}
+		<BlogCard
+			documentId={post.documentId}
+			img={`${env.PUBLIC_STRAPI_HOST}${post.Header.formats.medium.url}`}
+			img-alt={post.Header.alternativeText}
+			title={post.Title}
+			published={post.publishedAt}
+			topics={post.Topics}
+		/>
+	{/each}
+</div>

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>