use strapi client, use locals for strapi url

src/lib/components/BlogCard.svelte

@@ -3,24 +3,24 @@
 	import { Link } from 'lucide-svelte';
 
 	interface Props {
-		documentId: string;
+		id: string;
 		img: string;
 		'img-alt': string | null;
 		title: string;
 		published: string;
-		topics: { id: number; Topic: string }[];
+		topics: { id: number; name: string }[];
 	}
 
-	let { documentId, img, 'img-alt': alt, title, published, topics }: Props = $props();
+	let { id, img, 'img-alt': alt, title, published, topics }: Props = $props();
 
-	let blogLink = $derived(`/blog/${documentId}`);
+	let blogLink = $derived(`/blog/${id}`);
 </script>
 
 <div class="card">
 	<figure class="rounded-box group">
 		<div class="absolute top-4 left-4 z-10 flex gap-2">
 			{#each topics as topic (topic.id)}
-				<div class="badge badge-soft badge-info">{topic.Topic}</div>
+				<div class="badge badge-soft badge-info">{topic.name}</div>
 			{/each}
 		</div>
 		<div class="absolute z-10 opacity-0 transition-opacity group-hover:opacity-75">

src/lib/types/Blog.ts

@@ -0,0 +1,56 @@
+type Dates = {
+	createdAt: string;
+	updateAt: string;
+	publishedAt: string;
+};
+
+export 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;
+}