get poetry stuff workin

src/routes/projects/+layout.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import App from '$lib/components/scenes/app/App.svelte';
+	import CanvasContainer from '$lib/components/scenes/app/CanvasContainer.svelte';
+	import '../../app.css'
+</script>
+
+<CanvasContainer>
+	<App>
+		<slot />
+	</App>
+
+</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/projects/+layout.ts

@@ -0,0 +1,2 @@
+export const prerender = true
+export const ssr = false

src/routes/projects/+page.svelte

@@ -0,0 +1,37 @@
+<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;
+
+	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;
+	};
+
+	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/projects/+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
+	};
+};