fix strapi urls and shit

src/app.d.ts

@@ -1,12 +1,13 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
+
+import type { Strapi } from "$lib/server/strapi";
+
 // for information about these interfaces
 declare global {
 	namespace App {
 		// interface Error {}
 		interface Locals {
-			Strapi: {
-				url: string;
-			};
+			strapi: Strapi;
 		}
 		// interface PageData {}
 		// interface PageState {}

src/hooks.server.ts

@@ -1,20 +1,31 @@
-import { env } from '$env/dynamic/private';
-import type { Handle, HandleServerError } from '@sveltejs/kit';
-import { randomUUID } from 'crypto';
+import { env } from "$env/dynamic/private";
+import { Strapi } from "$lib/server/strapi";
+import type { Handle, HandleServerError } from "@sveltejs/kit";
+import { randomUUID } from "crypto";
 
-export const handleError: HandleServerError = async ({ error, event, message, status }) => {
+export const handleError: HandleServerError = async ({
+	error,
+	event,
+	message,
+	status,
+}) => {
 	const errorId = randomUUID();
 
 	console.error(error, { errorId, event, message, status });
 
 	return {
-		message: 'An Internal Error Occurred',
-		errorId
+		message: "An Internal Error Occurred",
+		errorId,
 	};
 };
 
 export const handle: Handle = async ({ event, resolve }) => {
-	event.locals.Strapi.url = `http://${env.STRAPI_HOST}:${env.STRAPI_PORT}`;
+	event.locals = {
+		strapi: new Strapi(
+			`http://${env.STRAPI_HOST}:${env.STRAPI_PORT}`,
+			env.STRAPI_TOKEN,
+		),
+	};
 
 	const response = await resolve(event);
 	return response;

src/lib/server/strapi/index.ts

@@ -0,0 +1,31 @@
+import { strapi, type StrapiClient } from "@strapi/client";
+
+export class Strapi {
+	private readonly client: StrapiClient;
+
+	constructor(
+		public readonly url: string,
+		auth: string,
+	) {
+		this.client = strapi({
+			baseURL: `${url}/api`,
+			auth: auth,
+		});
+	}
+
+	async Blogs() {
+		const blogs = this.client.collection("blogs");
+
+		return await blogs.find({
+			populate: ["Header", "Topics"],
+		});
+	}
+
+	async Blog(id: string) {
+		const blogs = this.client.collection("blogs");
+
+		return await blogs.findOne(id, {
+			populate: ["Header", "Topics"],
+		});
+	}
+}

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

@@ -1,39 +1,31 @@
-import { env } from '$env/dynamic/private';
-import { strapi } from '@strapi/client';
-import type { PageServerLoad } from './$types';
+import { error } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ locals }) => {
-	const { Strapi } = locals;
+	const { strapi } = locals;
 
-	const client = strapi({
-		baseURL: Strapi.url,
-		auth: env.STRAPI_TOKEN
-	});
+	try {
+		const { data, meta } = await strapi.Blogs();
 
-	const blogs = client.collection('blogs');
-
-	const { data, meta } = await blogs.find({
-		populate: ['Header', 'Topics']
-	});
-
-	return {
-		strapi: {
-			url: Strapi.url
-		},
-		posts: data.map((post) => ({
-			id: post.documentId,
-			image: {
-				url: `${Strapi.url}${post.Header.formats.medium.url}`,
-				alt: post.Header.alternativeText
-			},
-			title: post.Title,
-			body: post.Body,
-			topics: post.Topics.map((topic: { id: string; Topic: string }) => ({
-				id: topic.id,
-				name: topic.Topic
+		return {
+			posts: data.map((post) => ({
+				id: post.documentId,
+				image: {
+					url: post.Header.formats.medium.url,
+					alt: post.Header.alternativeText,
+				},
+				title: post.Title,
+				body: post.Body,
+				topics: post.Topics.map((topic: { id: string; Topic: string }) => ({
+					id: topic.id,
+					name: topic.Topic,
+				})),
+				published: post.publishedAt,
 			})),
-			published: post.publishedAt
-		})),
-		meta
-	};
+			meta,
+		};
+	} catch (err) {
+		console.log("Uh-oh!");
+		error(500, err.message);
+	}
 };

src/routes/blog/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { env } from '$env/dynamic/public';
 	import BlogCard from '$lib/components/BlogCard.svelte';
 	import type { PageProps } from './$types';
 
@@ -15,7 +16,7 @@
 	{#each posts as post (post.id)}
 		<BlogCard
 			id={post.id}
-			img={post.image.url}
+			img={`${env.PUBLIC_STRAPI_HOST}${post.image.url}`}
 			img-alt={post.image.alt}
 			title={post.title}
 			published={post.published}

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

@@ -1,37 +1,27 @@
-import { env } from '$env/dynamic/private';
-import { strapi } from '@strapi/client';
-import type { PageServerLoad } from './$types';
+import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ locals, params }) => {
 	const { slug } = params;
-	const { Strapi } = locals;
+	const { strapi } = locals;
 
-	const client = strapi({
-		baseURL: Strapi.url,
-		auth: env.STRAPI_TOKEN
-	});
-
-	const blogs = client.collection('blogs');
-
-	const { data: post, meta } = await blogs.findOne(slug, {
-		populate: ['Header', 'Topics']
-	});
+	const { data: post, meta } = await strapi.Blog(slug);
 
 	return {
 		post: {
 			id: post.documentId,
 			image: {
-				url: `${Strapi.url}${post.Header.url}`,
-				alt: post.Header.alternativeText
+				url: post.Header.url,
+				alt: post.Header.alternativeText,
+				caption: post.Header.caption,
 			},
 			title: post.Title,
 			body: post.Body,
 			topics: post.Topics.map((topic: { id: string; Topic: string }) => ({
 				id: topic.id,
-				name: topic.Topic
+				name: topic.Topic,
 			})),
-			published: post.publishedAt
+			published: post.publishedAt,
 		},
-		meta
+		meta,
 	};
 };

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import dayjs from 'dayjs';
-	import type { PageProps } from './$types';
-	import { compile } from 'mdsvex';
 	import { env } from '$env/dynamic/public';
+	import dayjs from 'dayjs';
+	import { compile } from 'mdsvex';
+	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();