fix route, add codeblock component

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>

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>

src/lib/components/ProjectHeader.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import type { Project } from '$lib/types/sanity';
+	import CodeTags from './CodeTags.svelte';
 
 	export let project: Project;
 </script>
 
 <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">

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>

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')
+	};
+}

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>