From 6b989720326189e8d15ef89a8e3e2116f9254b66 Mon Sep 17 00:00:00 2001
From: Thrywyn <magnus.stromseng@gmail.com>
Date: Wed, 4 Oct 2023 02:01:27 +0200
Subject: [PATCH] fix route, add codeblock component

---
 src/lib/components/CodeTags.svelte      | 15 +++++++++++++++
 src/lib/components/ProjectCard.svelte   |  3 ++-
 src/lib/components/ProjectHeader.svelte |  3 ++-
 src/routes/+layout.svelte               |  9 +++------
 src/routes/projects/+page.js            | 19 +++++++++++++++++++
 src/routes/projects/+page.svelte        |  9 ++++++++-
 6 files changed, 49 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/components/CodeTags.svelte
 create mode 100644 src/routes/projects/+page.js

diff --git a/src/lib/components/CodeTags.svelte b/src/lib/components/CodeTags.svelte
new file mode 100644
index 0000000..2bace6b
--- /dev/null
+++ b/src/lib/components/CodeTags.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let tags: string[];
+
+	let finalString: string = '';
+
+	for (let i = 0; i < tags.length; i++) {
+		if (i < tags.length - 1) {
+			finalString += tags[i] + ', ';
+		} else {
+			finalString += tags[i];
+		}
+	}
+</script>
+
+<code class="code whitespace-normal"> {finalString}</code>
diff --git a/src/lib/components/ProjectCard.svelte b/src/lib/components/ProjectCard.svelte
index 56ccf97..3d4f9d6 100644
--- a/src/lib/components/ProjectCard.svelte
+++ b/src/lib/components/ProjectCard.svelte
@@ -7,6 +7,7 @@
 	import imageUrlBuilder from '@sanity/image-url';
 
 	import type { Image, Project } from '$lib/types/sanity';
+	import CodeTags from './CodeTags.svelte';
 
 	// Get a pre-configured url-builder from your sanity client
 	const builder = imageUrlBuilder(client);
@@ -35,7 +36,7 @@
 		<div class="p-4">
 			<div class="mb-2">
 				<h3 class="h3" data-toc-ignore>{project.title}</h3>
-				<code class="code whitespace-normal">{project.tags}</code>
+				<CodeTags tags={project.tags} />
 			</div>
 			<article>
 				<p>
diff --git a/src/lib/components/ProjectHeader.svelte b/src/lib/components/ProjectHeader.svelte
index e115a28..c924506 100644
--- a/src/lib/components/ProjectHeader.svelte
+++ b/src/lib/components/ProjectHeader.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Project } from '$lib/types/sanity';
+	import CodeTags from './CodeTags.svelte';
 
 	export let project: Project;
 </script>
@@ -7,7 +8,7 @@
 <div class="">
 	<h1 class="h1">{project.title}</h1>
 
-	<div class="mb-1"><code class="code">{project.tags} </code></div>
+	<div class="mb-1"><CodeTags tags={project.tags} /></div>
 	{#if project.githubLink}
 		<a href={project.githubLink}>
 			<div class="chip variant-soft-primary p-1">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5c8a75e..9fd1bc6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-
 	// The ordering of these imports is critical to your app working properly
 	import '@skeletonlabs/skeleton/themes/theme-rocket.css';
 	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
@@ -26,8 +25,6 @@
 	import NavBar from '$lib/components/navbar/NavBar.svelte';
 	import NavBarItem from '$lib/components/navbar/NavBarItem.svelte';
 
-
-
 	// Drawer Handler
 	function drawerOpen(): void {
 		const s: DrawerSettings = {
@@ -140,16 +137,16 @@
 	</svelte:fragment>
 	<!-- Page Route Content -->
 	<slot />
-
+	<!-- (footer) -->
 	<svelte:fragment slot="pageFooter">
 		<AppBar gridColumns="grid-cols-1" slotDefault="place-self-center" class="w-full mt-10">
 			<div>
-				This website was built using <a class="anchor" href="https://svelte.dev">Svelte</a>,
+				This website was built using <a class="anchor" href="https://www.sanity.io/">Svelte</a>,
+				<a class="anchor" href="https://svelte.dev">Sanity</a>,
 				<a class="anchor" href="https://vitejs.dev">Vite</a>,
 				<a class="anchor" href="https://www.skeleton.dev">Skeleton-UI</a>
 				and <a class="anchor" href="https://fontawesome.com">Fontawesome</a>
 			</div>
 		</AppBar>
 	</svelte:fragment>
-	<!-- (footer) -->
 </AppShell>
diff --git a/src/routes/projects/+page.js b/src/routes/projects/+page.js
new file mode 100644
index 0000000..8e14261
--- /dev/null
+++ b/src/routes/projects/+page.js
@@ -0,0 +1,19 @@
+/** @type {import('./$types').PageLoad} */
+
+import client from '$lib/sanityClient';
+
+export async function load({ params }) {
+	const data = await client.fetch(`*[_type == "project"]`);
+	if (data) {
+		console.log('Projects found');
+		console.log(data);
+		return {
+			projects: data
+		};
+	}
+	console.log('No projects found');
+	return {
+		status: 500,
+		body: new Error('Internal Server Error in Sanity load function. No projects found')
+	};
+}
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 4809555..c092724 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -4,10 +4,17 @@
 	import { Avatar } from '@skeletonlabs/skeleton';
 	import ProjectCard from '$lib/components/ProjectCard.svelte';
 	import ProjectCardsGrid from '$lib/components/ProjectCardsGrid.svelte';
+	import type { Project } from '$lib/types/sanity';
 	let ProfilePic = '/images/profile-pic.jpg';
+
+	interface sanityData {
+		projects: Project[];
+	}
+
+	export let data: sanityData;
 </script>
 
 <BodyDiv>
 	<h1 class="h1">Projects</h1>
-	<ProjectCardsGrid />
+	<ProjectCardsGrid projects={data.projects} />
 </BodyDiv>