WIP blog rendering

src/routes/[slug]/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let data;
+</script>
+
+<article>
+	<h1>{data.title}</h1>
+	<p>Published: {data.date}</p>
+	<svelte:component this={data.content} />
+</article>

src/routes/[slug]/+page.ts

@@ -0,0 +1,11 @@
+export async function load({ params }) {
+	const post = await import(`../posts/${params.slug}.md`);
+	const { title, date } = post.metadata;
+	const content = post.default;
+
+	return {
+		content,
+		title,
+		date
+	};
+}

src/routes/posts/+page.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let data;
+</script>
+
+<ul>
+	{#each data.posts as post}
+		<li>
+			<h2>
+				<a href={post.path}>
+					{post.meta.title}
+				</a>
+			</h2>
+			Published {post.meta.date}
+		</li>
+	{/each}
+</ul>

src/routes/posts/+page.ts

@@ -0,0 +1,18 @@
+export async function load() {
+	const allPostFiles = import.meta.glob<SvelteAllProps>('/src/routes/posts/*.md');
+	const iterablePostFiles = Object.entries(allPostFiles);
+
+	const posts = await Promise.all(
+		iterablePostFiles.map(async ([path, resolver]) => {
+			const { metadata } = await resolver();
+			const postPath = path.slice(11, -3);
+
+			return {
+				meta: metadata,
+				path: postPath
+			};
+		})
+	);
+
+	return { posts };
+}

src/routes/posts/test.md

@@ -0,0 +1,4 @@
+---
+title: foo
+date: 2023
+---