wip, run migration command, fix api

src/lib/utils/DomPortal.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	import { tick } from 'svelte';
 
 	/**
@@ -51,13 +51,17 @@
 </script>
 
 <script>
+	
 	/**
-	 * DOM Element or CSS Selector
-	 * @type { HTMLElement|string}
+	 * @typedef {Object} Props
+	 * @property { HTMLElement|string} [target] - DOM Element or CSS Selector
+	 * @property {import('svelte').Snippet} [children]
 	 */
-	export let target = 'body';
+
+	/** @type {Props} */
+	let { target = 'body', children } = $props();
 </script>
 
 <div use:portal={target} hidden style="display: contents;">
-	<slot />
+	{@render children?.()}
 </div>

src/lib/utils/PoetryLayout.svelte

@@ -1,18 +1,13 @@
-<script context="module">
+<script module>
 	import Headline from './poetry/h1.svelte';
 	import p from './poetry/p.svelte';
 	export { Headline as h1, p };
 </script>
 
 <script lang="ts">
-	export let title;
-	export let date;
-	export let categories;
-	export let tags;
-	export let year;
-	export let layout;
+	let { title, date, categories, tags, year, layout, children } = $props();
 </script>
 
 <main>
-	<slot />
+	{@render children?.()}
 </main>

src/lib/utils/ThoughtsLayout.svelte

@@ -1,18 +1,21 @@
-<script context="module">
+<script module>
 	import Headline from './thoughts/h1.svelte';
 	import p from './thoughts/p.svelte';
 	export { Headline as h1, p };
 </script>
 
 <script lang="ts">
-	export let title;
-	export let date;
-	export let categories;
-	export let tags;
-	export let year;
-	export let layout;
+	let {
+		title,
+		date,
+		categories,
+		tags,
+		year,
+		layout,
+		children
+	} = $props();
 </script>
 
 <main>
-	<slot />
+	{@render children?.()}
 </main>

src/lib/utils/index.ts

@@ -1,3 +1,5 @@
+import { render } from 'svelte/server';
+
 export interface Metadata {
 	title: string;
 	date: string;
@@ -21,11 +23,10 @@ export interface Post {
 	id: string;
 }
 
+// Update the Data interface to match the new structure
 interface Data {
 	metadata: Metadata;
-	default: {
-		render: () => { html: string };
-	};
+	default: any; // The component itself
 }
 
 function isData(obj: unknown): obj is Data {
@@ -74,8 +75,8 @@ export const fetchMarkdownPosts = async (
 						return undefined;
 					}
 					const { metadata } = data;
-					const { html } = data.default.render();
-					// remove html tags
+					// Use the new render function from svelte/server
+					const { html } = render(data.default, {});
 					const content = html.replace(/<[^>]*>/g, '');
 					const section = path.split('/')[3];
 					const filename = path.split('/').pop()?.slice(0, -3);

src/lib/utils/poetry/h1.svelte

@@ -1,3 +1,11 @@
+<script lang="ts">
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
 <h1 class="poetry-headline">
-  <slot></slot>
+  {@render children?.()}
 </h1>

src/lib/utils/poetry/p.svelte

@@ -1,3 +1,11 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
 <p class="whitespace-pre-wrap">
-	<slot></slot>
+	{@render children?.()}
 </p>

src/lib/utils/thoughts/h1.svelte

@@ -1,3 +1,11 @@
+<script lang="ts">
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
 <h1 class="poetry-headline">
-  <slot></slot>
+  {@render children?.()}
 </h1>

src/lib/utils/thoughts/p.svelte

@@ -1,3 +1,11 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
 <p class="whitespace-pre-wrap">
-	<slot></slot>
+	{@render children?.()}
 </p>