feat: source blog entrys at compile time to improve loading time

src/routes/+page.server.ts

@@ -0,0 +1,32 @@
+import type { SvelteComponent } from 'svelte';
+import type { MDsveXComponent } from '$lib/types';
+
+export interface BlogEntry {
+    name: string;
+    src: string;
+    img: string;
+    date: string;
+    desc: string;
+}
+
+
+export function load() {
+    const blog_entries: BlogEntry[] =
+        Object.entries(import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true }))
+            .map(([key, value]) => [
+                key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
+                value as MDsveXComponent
+            ])
+            .map(([link, val]) =>
+                typeof val.metadata?.src !== 'undefined' ? [val.metadata?.src, val] : [link, val]
+            )
+            .map(([link, val]) => {
+                val.metadata.date = Date.parse(val.metadata.date);
+                return [link, val];
+            })
+            .sort(([link1, a], [link2, b]) => b.metadata?.date - a.metadata?.date)
+            .map(([link, val]) => { return { src: link, title: val.metadata.title, img: val.metadata.img, date: new Date(val.metadata.date).toDateString(), desc: val.metadata.desc } })
+    return {
+        blogs: blog_entries
+    };
+}

src/routes/+page.svelte

@@ -1,24 +1,9 @@
 <script lang="ts">
-	import type { MDsveXComponent } from '$lib/types';
-	import type { SvelteComponent } from 'svelte';
 	import './style-entries.css';
+	import type { BlogEntry } from './+page.server.ts';
 
-	let blog_entries: [string, SvelteComponent][] = $state(
+	let { data } = $props();
-		Object.entries(import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true }))
+	let blogs = data.blogs as BlogEntry[];
-			.map(([key, value]) => [
-				key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
-				value as MDsveXComponent
-			])
-			.map(([link, val]) =>
-				typeof val.metadata?.src !== 'undefined' ? [val.metadata?.src, val] : [link, val]
-			)
-			.map(([link, val]) => {
-				if (val.metadata) val.metadata.date = Date.parse(val.metadata?.date);
-				return [link, val];
-			})
-			.sort(([link1, a], [link2, b]) => b.metadata?.date - a.metadata?.date)
-	);
-	console.log(blog_entries);
 </script>
 
 <main>
@@ -28,12 +13,12 @@
 			This is a collection of things I've set up and created that I think might interest others.
 		</p>
 	</div>
-	{#each blog_entries as [href, page]}
+	{#each blogs as blog}
-		<a {href} class="blog-entry">
+		<a href={blog.src} class="blog-entry">
 			<div>
-				<h4>{page.metadata?.title}</h4>
+				<h4>{blog.title}</h4>
-				<p>{page.metadata?.desc}</p>
+				<p>{blog.desc}</p>
-				<p class="date">{new Date(page.metadata?.date).toDateString()}</p>
+				<p class="date">{blog.date}</p>
 			</div>
 			<img src="blog-1.png" class="blog-image" />
 		</a>