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

src/routes/+layout.svelte

@@ -14,7 +14,7 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-<nav>
+<nav class="media-margin">
 	<a href="/">Home</a>
 	<a href="/about">About</a>
 	<a href="https://bsky.app/profile/amyt3a.bsky.social" aria-label="Link to my Bluesky account"
@@ -30,8 +30,6 @@
 
 <style>
 	nav {
-		margin: var(--d3);
-
 		font-family: 'Fraunces', serif;
 		font-optical-sizing: auto;
 		font-weight: 400;
@@ -52,10 +50,4 @@
 			color: var(--rp-moon-foam);
 		}
 	}
-
-	@media only screen and (max-width: 700px) {
-		nav {
-			margin: var(--d3) var(--d1);
-		}
-	}
 </style>

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>

src/routes/blogs/a.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let href;
+
+	let target = href.includes('https://') || href.includes('http://') ? '_blank' : '';
+</script>
+
+<a {href} {target}><slot /></a>

src/routes/blogs/blog.svelte

@@ -1,9 +1,10 @@
 <script context="module">
 	import img from './img.svelte';
+	import a from './a.svelte';
 	import h1 from './h1.svelte';
 	import h2 from './h2.svelte';
 	import h3 from './h3.svelte';
-	export { img, h1, h2, h3 };
+	export { img, a, h1, h2, h3 };
 </script>
 
 <script>
@@ -11,13 +12,13 @@
 	export let date;
 	export let desc;
 
-	let ddate = new Date(Date.parse(date));
+	let ddate = new Date(Date.parse(date)).toDateString();
 </script>
 
 <main>
 	<div class="title media-margin">
 		<!-- prettier-ignore -->
-		<h1>{title}</h1><p class="date">Last updated {ddate.toDateString()}</p>
+		<h1>{title}</h1><p class="date">Last updated {ddate}</p>
 	</div>
 	<div class="blog-text media-margin">
 		<p>{desc}</p>