wip, run migration command, fix api

src/lib/components/NavBar.svelte

@@ -63,13 +63,13 @@
 				type="text"
 				placeholder="Search"
 				class="input w-24 md:w-auto"
-				on:keyup={handleSearch}
+				onkeyup={handleSearch}
 			/>
 		</div>
 	</div>
 	<div class="navbar-end hidden lg:flex">
 		<div class="form-control">
-			<input type="text" placeholder="Search" class="input md:w-auto" on:keyup={handleSearch} />
+			<input type="text" placeholder="Search" class="input md:w-auto" onkeyup={handleSearch} />
 		</div>
 		<ToggleTheme />
 		<ul class="menu menu-horizontal px-1">

src/lib/components/SearchResults.svelte

@@ -3,7 +3,7 @@
 	import type { SearchResult } from '$lib/utils/search';
 	import { onMount } from 'svelte';
 
-	let results: SearchResult[] = [];
+	let results: SearchResult[] = $state([]);
 
 	searchResults.subscribe((value: SearchResult[]) => {
 		results = value ? value : [];

src/lib/components/Toast.svelte

@@ -2,13 +2,17 @@
 	import { fade } from 'svelte/transition';
 	import { createEventDispatcher } from 'svelte';
 
-	export let message: string;
-	export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
-	export let duration: number = 3000;
+	interface Props {
+		message: string;
+		type?: 'info' | 'success' | 'warning' | 'error';
+		duration?: number;
+	}
+
+	let { message, type = 'info', duration = 3000 }: Props = $props();
 
 	const dispatch = createEventDispatcher();
 
-	let visible = true;
+	let visible = $state(true);
 
 	setTimeout(() => {
 		visible = false;

src/lib/components/ToggleTheme.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// Reactive variable to store the current theme
-	let theme = 'forest'; // default theme
+	let theme = $state('forest'); // default theme
 
 	// On component mount, check for saved theme in local storage
 	import { onMount } from 'svelte';
@@ -28,7 +28,7 @@
 	<input
 		type="checkbox"
 		class="toggle toggle-primary toggle-sm"
-		on:click={toggleTheme}
+		onclick={toggleTheme}
 		checked={theme === 'forest'}
 	/>
 	🌛

src/lib/components/scenes/app/AppContainer.svelte

@@ -1,6 +1,11 @@
-<script>
+<script lang="ts">
 	import Footer from '$lib/components/Footer.svelte';
 	import NavBar from '$lib/components/NavBar.svelte';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 </script>
 
 <div
@@ -10,7 +15,7 @@
 	<NavBar></NavBar>
 
 	<div class="flex flex-1 overflow-auto">
-		<slot />
+		{@render children?.()}
 	</div>
 
 	<Footer></Footer>

src/lib/components/scenes/app/CanvasContainer.svelte

@@ -1,6 +1,13 @@
 <!-- src/lib/CanvasLayout.svelte -->
 <script lang="ts">
+	import { preventDefault } from 'svelte/legacy';
+
 	import { Canvas } from '@threlte/core';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 
 	function preventRightClick(event: MouseEvent) {
 		event.preventDefault();
@@ -9,11 +16,11 @@
 
 <div
 	class="canvas flex flex-1"
-	on:contextmenu|preventDefault={preventRightClick}
+	oncontextmenu={preventDefault(preventRightClick)}
 	role="application"
 >
 	<Canvas>
-		<slot />
+		{@render children?.()}
 	</Canvas>
 </div>
 

src/lib/components/scenes/app/DollyCam.svelte

@@ -7,7 +7,7 @@
 	let camLookatPosition: Vector3 = new Vector3();
 	let camCurrentPosition: Vector3 = new Vector3();
 	let camDamping: number = 1;
-	let camera: PerspectiveCamera;
+	let camera: PerspectiveCamera = $state();
 
 	const handleMouseMove = (event: MouseEvent) => {
 		// normalize the mouse position to [-1, 1], and smoothly interpolate the camera's lookAt position

src/lib/components/scenes/app/MenuItem.svelte

@@ -2,13 +2,24 @@
 	import { HTML } from '@threlte/extras';
 	import { Attractor } from '@threlte/rapier';
 
-	export let position: [number, number, number] = [0, 0, 0];
-	export let range: number = 100;
-	export let clickHandler: (() => void) | undefined = undefined;
-	export let active: boolean = false;
+	interface Props {
+		position?: [number, number, number];
+		range?: number;
+		clickHandler?: (() => void) | undefined;
+		active?: boolean;
+		children?: import('svelte').Snippet;
+	}
 
-	let isHovering = false;
-	let isPointerDown = false;
+	let {
+		position = [0, 0, 0],
+		range = 100,
+		clickHandler = undefined,
+		active = false,
+		children
+	}: Props = $props();
+
+	let isHovering = $state(false);
+	let isPointerDown = $state(false);
 
 	const onClick = () => {
 		if (clickHandler) {
@@ -20,22 +31,22 @@
 <HTML position.x={position[0]} position.y={position[1]} position.z={position[2]}>
 	<button
 		type="button"
-		on:pointerenter={() => (isHovering = true)}
-		on:pointerleave={() => {
+		onpointerenter={() => (isHovering = true)}
+		onpointerleave={() => {
 			isPointerDown = false;
 			isHovering = false;
 		}}
-		on:pointerdown={() => (isPointerDown = true)}
-		on:pointerup={() => (isPointerDown = false)}
-		on:pointercancel={() => {
+		onpointerdown={() => (isPointerDown = true)}
+		onpointerup={() => (isPointerDown = false)}
+		onpointercancel={() => {
 			isPointerDown = false;
 			isHovering = false;
 		}}
-		on:click={onClick}
+		onclick={onClick}
 		class="bg-base-300 border border-primary px-3 py-3 text-primary md:opacity-50 hover:opacity-90 active:opacity-100"
 		style="transform: translate(-50%, 50%); display: block; width: 170px;"
 	>
-		<slot />
+		{@render children?.()}
 	</button>
 </HTML>
 

src/lib/components/scenes/app/Overlay.svelte

@@ -1,5 +1,13 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
 <div class="overlay container prose bg-base-300/80 border border-primary" id="overlay">
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>

src/lib/components/scenes/app/Planet.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import { T } from '@threlte/core';
 	import { Attractor, Collider, RigidBody } from '@threlte/rapier';
 	import { MeshBasicMaterial, SphereGeometry } from 'three';

src/lib/components/scenes/app/SpaceSkysphere.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
 	import { T } from '@threlte/core';
-	export let size = 100;
-	export let count = 500;
-	export let color = localStorage.getItem('theme') === 'forest' ? 'white' : '#a991f7';
+	interface Props {
+		size?: number;
+		count?: number;
+		color?: any;
+	}
 
-	const positions = new Float32Array(count * 3);
+	let { size = 100, count = 500, color = localStorage.getItem('theme') === 'forest' ? 'white' : '#a991f7' }: Props = $props();
+
+	const positions = $state(new Float32Array(count * 3));
 
 	// randomly distribute points in a cube
 	for (let i = 0; i < count; i++) {

src/lib/components/scenes/app/World.svelte

@@ -6,9 +6,14 @@
 	import { Group, type Object3DEventMap } from 'three';
 	import DollyCam from './DollyCam.svelte';
 	import Planet from '$lib/components/scenes/app/Planet.svelte';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 
 	const { invalidate } = useThrelte();
-	let spaceObjects: Group<Object3DEventMap>;
+	let spaceObjects: Group<Object3DEventMap> = $state();
 
 	useTask(
 		'updateSpaceObjects',
@@ -31,6 +36,6 @@
 
 		<Planet />
 
-		<slot />
+		{@render children?.()}
 	</T.Group>
 </World>

src/lib/components/scenes/editor/Spinners.svelte

@@ -6,10 +6,10 @@
 	import spinnersJson from '$lib/components/scenes/editor/SpinnersState.json';
 	import { type IProjectConfig } from '@theatre/core';
 
-	let sequence: SequenceController;
+	let sequence: SequenceController = $state();
 
-	let ball: Mesh;
-	let spotlight: SpotLight;
+	let ball: Mesh = $state();
+	let spotlight: SpotLight = $state();
 	let lastBallPosition = new Vector3();
 	let currentBallPosition = new Vector3();
 	let config = spinnersJson as IProjectConfig;
@@ -33,16 +33,18 @@
 		<!-- create a T.SpotLight that looks at box-->
 		<T.SpotLight position={[0, 5, 3]} intensity={10} bind:ref={spotlight}></T.SpotLight>
 
-		<SheetObject key="Box" let:Transform let:Sync on:change={ballMoved}>
-			<Transform>
-				<T.Mesh position.y={0.5} bind:ref={ball}>
-					<T.SphereGeometry args={[1, 8, 4]} />
-					<T.MeshStandardMaterial color="#b00d03">
-						<Sync color roughness metalness />
-					</T.MeshStandardMaterial>
-				</T.Mesh>
-			</Transform>
-		</SheetObject>
+		<SheetObject key="Box"   on:change={ballMoved}>
+			{#snippet children({ Transform, Sync })}
+						<Transform>
+					<T.Mesh position.y={0.5} bind:ref={ball}>
+						<T.SphereGeometry args={[1, 8, 4]} />
+						<T.MeshStandardMaterial color="#b00d03">
+							<Sync color roughness metalness />
+						</T.MeshStandardMaterial>
+					</T.Mesh>
+				</Transform>
+								{/snippet}
+				</SheetObject>
 		<Sequence iterationCount={Infinity} direction="alternate" autoplay rate={1} bind:sequence />
 	</Sheet>
 </Project>

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>