projects route with layouts and logic

src/routes/projects/+layout.server.ts

@@ -0,0 +1,8 @@
+import { listProjects } from '$content/projects';
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = () => {
+	return {
+		projects: listProjects()
+	};
+};

src/routes/projects/+layout.svelte

@@ -0,0 +1 @@
+<slot />

src/routes/projects/+page.svelte

@@ -1 +1,12 @@
-<p>There is nothing to see yet</p>
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<div class="projects-layout">
+	{data.projects}
+</div>
+
+<style lang="postcss">
+</style>

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import ProjectsContentLayout from '$lib/components/projects/projects-content-layout.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<ProjectsContentLayout projects={data.projects} {...data.post}>
+	<svelte:component this={data.Component} />
+</ProjectsContentLayout>

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

@@ -0,0 +1,8 @@
+import { getProject, listProjects } from '$content/projects';
+import type { PageLoad } from './$types';
+
+export const entries = () => listProjects().map((post) => ({ slug: post.slug }));
+
+export const load: PageLoad = async ({ params }) => {
+	return await getProject(params.slug);
+};