From 4702e5bf89d10ed4a897cff3aa939b743d2ebca1 Mon Sep 17 00:00:00 2001
From: Amy Retzerau <amy.retzerau@gmail.com>
Date: Tue, 30 Sep 2025 17:11:44 +0200
Subject: [PATCH] feat: source blog entrys at compile time to improve loading
 time

---
 src/routes/+page.server.ts | 32 ++++++++++++++++++++++++++++++++
 src/routes/+page.svelte    | 31 ++++++++-----------------------
 2 files changed, 40 insertions(+), 23 deletions(-)
 create mode 100644 src/routes/+page.server.ts

diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
new file mode 100644
index 0000000..116bda9
--- /dev/null
+++ b/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
+    };
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e03c9d9..32b1c4b 100644
--- a/src/routes/+page.svelte
+++ b/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(
-		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]) => {
-				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);
+	let { data } = $props();
+	let blogs = data.blogs as BlogEntry[];
 </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]}
-		<a {href} class="blog-entry">
+	{#each blogs as blog}
+		<a href={blog.src} class="blog-entry">
 			<div>
-				<h4>{page.metadata?.title}</h4>
-				<p>{page.metadata?.desc}</p>
-				<p class="date">{new Date(page.metadata?.date).toDateString()}</p>
+				<h4>{blog.title}</h4>
+				<p>{blog.desc}</p>
+				<p class="date">{blog.date}</p>
 			</div>
 			<img src="blog-1.png" class="blog-image" />
 		</a>