get routing working, add index for poetry, list first 6 poems on index, let each take you to their page with the poem's content

src/routes/(app)/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import App from '$lib/components/scenes/app/App.svelte';
+</script>
+
+<App>
+	<slot />
+</App>

src/routes/(app)/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import MenuItem from '$lib/components/scenes/app/MenuItem.svelte';
+</script>
+
+<MenuItem position={[-2.5, 7.5, 0]} htmlContent="Poetry" href="/poetry" />
+
+<MenuItem
+	position={[2.5, 2.5, -2.5]}
+	htmlContent="Projects"
+	clickHandler={() => console.log('clicked!')}
+/>
+
+<MenuItem
+	position={[-2.5, -2.5, -2.5]}
+	htmlContent="Thoughts"
+	clickHandler={() => console.log('clicked!')}
+/>
+
+<MenuItem
+	position={[2.5, -7.5, 2.5]}
+	htmlContent="About"
+	clickHandler={() => console.log('clicked!')}
+/>

src/routes/(app)/poetry/+page.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import MenuItem from '$lib/components/scenes/app/MenuItem.svelte';
+	import type { PageData } from './$types';
+	export let data: PageData;
+
+	const xMin = -2.5,
+		xMax = 2.5;
+	const yMin = -7.5,
+		yMax = 7.5;
+	const zMin = -2.5,
+		zMax = 2.5;
+
+	// Calculate positions
+	const calculatePositions = (numPosts: number): Array<[number, number, number]> => {
+		const positions: Array<[number, number, number]> = [];
+		const numRows = Math.ceil(Math.sqrt(numPosts));
+		const numCols = Math.ceil(numPosts / numRows);
+
+		for (let i = 0; i < numPosts; i++) {
+			const row = Math.floor(i / numCols);
+			const col = i % numCols;
+
+			const x = xMin + (xMax - xMin) * (col / (numCols - 1));
+			const y = yMin + (yMax - yMin) * (row / (numRows - 1));
+			const z = zMin;
+
+			positions.push([x, y, z]);
+		}
+
+		return positions;
+	};
+
+	// Generate positions based on the number of posts
+	const positions = calculatePositions(data.posts.length);
+</script>
+
+{#each data.posts as post, i}
+	<MenuItem position={positions[i]} htmlContent={post.meta.title} href={post.path} />
+{/each}

src/routes/(app)/poetry/+page.ts

@@ -0,0 +1,8 @@
+export const load = async ({ fetch }) => {
+	const response = await fetch(`/api/poetry?limit=5&offset=0`);
+	const posts = await response.json();
+
+	return {
+		posts
+	};
+};

src/routes/(app)/poetry/[slug]/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import MenuItem from '$lib/components/scenes/app/MenuItem.svelte';
+	import type { PageData } from './$types';
+	import DomPortal from '$lib/utils/DomPortal.svelte';
+	export let data: PageData;
+
+	const { title, date: _date, Content, categories: _ } = data;
+</script>
+
+<MenuItem position={[-2.5, 10, 0]} htmlContent="Back" href="/poetry" />
+
+<DomPortal target="#overlay">
+	<div class="py-4">
+		<h1 class="text-xl font-medium text-black pb-2">{title}</h1>
+		<div>
+			<Content />
+		</div>
+	</div>
+</DomPortal>

src/routes/(app)/poetry/[slug]/+page.ts

@@ -0,0 +1,18 @@
+import type { Metadata } from '$lib/utils/index.js';
+
+export async function load({ params }) {
+	const post = await import(`../../../../posts/poetry/${params.slug}.md`);
+	const { title, date, categories } = post.metadata as Metadata;
+	const Content = post.default;
+	const parsedDate = new Date(date.slice(0, date.length - 6));
+	const validDate = `${
+		parsedDate.getMonth() + 1
+	}/${parsedDate.getDate()}/${parsedDate.getFullYear()}`;
+
+	return {
+		Content,
+		title,
+		date: validDate,
+		categories
+	};
+}

src/routes/+layout.svelte

@@ -1,5 +1,38 @@
-<script>
-  import "../app.css";
+<script lang="ts">
+	import CanvasContainer from '$lib/components/scenes/app/CanvasContainer.svelte';
+	import '../app.css';
 </script>
 
-<slot />
+<CanvasContainer>
+	<slot />
+</CanvasContainer>
+
+<div class="overlay container" id="overlay"></div>
+
+<style>
+	:global(body) {
+		margin: 0;
+	}
+
+	.canvas {
+		width: 100%;
+		height: 100%;
+		background: rgb(0, 36, 6);
+		background: linear-gradient(180deg, rgba(0, 36, 6, 1) 0%, rgba(0, 0, 0, 1) 100%);
+		position: absolute;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.overlay {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		background: rgba(16, 56, 30, 0.9);
+	}
+</style>

src/routes/+page.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import Home from '$lib/components/scenes/home/Home.svelte';
-	import type { PageData } from './$types';
-	export let data: PageData;
-</script>
-
-<div>
-	{#each data.models as model}
-		<span>{model.title}</span>
-	{/each}
-  <Home />
-</div>
-
-<style>
-  :global(body) {
-    margin: 0;
-  }
-
-  div {
-    width: 100vw;
-    height: 100vh;
-    background: rgb(0, 36, 6);
-		background: linear-gradient(180deg, rgba(0, 36, 6, 1) 0%, rgba(0, 0, 0, 1) 100%);
-		display: absolute;
-		justify-content: center;
-		align-items: center;
-  }
-</style>

src/routes/+page.ts

@@ -1,15 +0,0 @@
-const models: Model[] = [
-	{ title: 'Model 1' },
-	{ title: 'Model 2' },
-	{ title: 'Model 3' }
-];
-
-export type Model = { title: string}
-
-export function load(): { models: Model[] } {
-	return {
-		models: models.map((model) => ({
-			title: model.title
-		}))
-	};
-}

src/routes/api/poetry/+server.ts

@@ -0,0 +1,14 @@
+import { fetchMarkdownPosts } from '$lib/utils';
+import { json } from '@sveltejs/kit';
+
+export const GET = async ({ url }) => {
+	const limit = Number(url.searchParams.get('limit')) || 6;
+	const offset = Number(url.searchParams.get('offset')) || 0;
+	const allPosts = await fetchMarkdownPosts('poetry', limit, offset);
+
+	const sortedPosts = allPosts.sort((a, b) => {
+		return new Date(b.meta.date).getTime() - new Date(a.meta.date).getTime();
+	});
+
+	return json(sortedPosts);
+};