remove strapi and use mdsvex for blog

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

@@ -1,34 +1,17 @@
 import { logger } from '$lib/server/logger';
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
+import { getPosts } from '$lib/posts';
 
-export const load: PageServerLoad = async ({ locals }) => {
-	const { strapi } = locals;
+export const load: PageServerLoad = async () => {
+  try {
+    const posts = await getPosts();
 
-	try {
-		const { data, meta } = await strapi.Blogs();
-
-		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
-			})),
-			meta
-		};
-	} catch (err) {
-		logger.error('Uh-oh!', err);
-		if (err instanceof Error) {
-			error(500, err);
-		}
-	}
+    return {
+      posts
+    };
+  } catch (err) {
+    logger.error('Uh-oh!', err);
+    error(500);
+  }
 };

src/routes/blog/+page.svelte

@@ -11,14 +11,14 @@
 	<h3 class="text-center text-lg font-semibold">Looks like I haven't posted anything yet!</h3>
 {:else}
 	<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)}
+		{#each posts as post (post.slug)}
 			<BlogCard
-				id={post.id}
+				id={post.slug}
 				img={post.image.url}
 				img-alt={post.image.alt}
 				title={post.title}
-				published={post.published}
-				topics={post.topics}
+				published={post.date}
+				topics={post.categories}
 			/>
 		{/each}
 	</div>

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

@@ -1,27 +0,0 @@
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ locals, params }) => {
-	const { slug } = params;
-	const { strapi } = locals;
-
-	const { data: post, meta } = await strapi.Blog(slug);
-
-	return {
-		post: {
-			id: post.documentId,
-			image: {
-				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
-			})),
-			published: post.publishedAt
-		},
-		meta
-	};
-};

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

@@ -1,41 +1,26 @@
 <script lang="ts">
-	import BlockQuote from '$lib/markdown/renderers/BlockQuote.svelte';
-	import Code from '$lib/markdown/renderers/Code.svelte';
-	import Heading from '$lib/markdown/renderers/Heading.svelte';
-	import Link from '$lib/markdown/renderers/Link.svelte';
-	import List from '$lib/markdown/renderers/List.svelte';
-	import OrderedListItem from '$lib/markdown/renderers/OrderedListItem.svelte';
-	import Paragraph from '$lib/markdown/renderers/Paragraph.svelte';
-	import UnorderedListItem from '$lib/markdown/renderers/UnorderedListItem.svelte';
-	import SvelteMarkdown from '@humanspeak/svelte-markdown';
+	import Image from '$lib/components/Image.svelte';
 	import dayjs from 'dayjs';
 	import type { PageProps } from './$types';
-	import Image from '$lib/components/Image.svelte';
 
 	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.published).format('DD MMMM YYYY')}</p>
-		<h1 class="text-4xl font-light">{post.title}</h1>
+		<p class="text-gray-500">{dayjs(data.meta.date).format('DD MMMM YYYY')}</p>
+		<h1 class="text-4xl font-light">{data.meta.title}</h1>
 	</div>
-	<Image src={post.image.url} alt={post.image.alt} caption={post.image.caption} />
+	<Image src={data.meta.image.url} alt={data.meta.image.alt} />
 	<div class="w-full max-w-5xl px-4">
-		<SvelteMarkdown
-			source={data.post.body}
-			renderers={{
-				link: Link,
-				list: List,
-				orderedlistitem: OrderedListItem,
-				unorderedlistitem: UnorderedListItem,
-				code: Code,
-				blockquote: BlockQuote,
-				heading: Heading,
-				paragraph: Paragraph
-			}}
-		/>
+		<data.content class="content" />
 	</div>
 </div>
+
+<style>
+	.content {
+		* code {
+			@apply bg-base-200 border-base-300 text-base-content rounded-lg border-l-4 p-4 text-gray-700;
+		}
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+
+  try {
+    const post = await import(`../../../lib/posts/${params.slug}.md`)
+
+    return {
+      content: post.default,
+      meta: post.metadata
+    }
+  } catch (e) {
+    error(404, `Could not find ${params.slug}`)
+  }
+};

src/routes/uploads/[slug]/+server.ts

@@ -1,8 +0,0 @@
-import type { RequestHandler } from './$types';
-
-export const GET: RequestHandler = async ({ locals, params }) => {
-	const { slug } = params;
-
-	const response = await fetch(`${locals.strapi.uploads}/${slug}`);
-	return response;
-};