fix: Update website to read directly from yaml file

Author: kiritowu

src/lib/components/Experience.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Experience } from '@prisma/client';
+	import type { Experience } from '$lib/types';
 	import SimpleIcon from '$lib/components/SimpleIcon.svelte';
 
 	// Change visble section

src/lib/components/Projects.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import type { Project } from '@prisma/client';
+	import type { Project } from '$lib/types';
+
 	// Import project images
 	import acbiggan from '$lib/images/projects/acbigan.png?enhanced';
 	import aisdc from '$lib/images/projects/aisdc.jpg?enhanced';

src/lib/components/Skills.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
-	import type { Skill } from '@prisma/client';
 	import { browser } from '$app/environment';
 	import { theme } from '$lib/stores';
+	import { type Skill } from '$lib/types';
 
 	// Import skill icons
 	import * as icons from 'simple-icons';

src/lib/profile.yaml

@@ -0,0 +1,58 @@
+export enum ProfileVisibility {
+	PUBLIC = 'PUBLIC',
+	PRIVATE = 'PRIVATE'
+}
+
+export interface Profile {
+	id: string;
+	firstName: string;
+	lastName: string;
+	nickName?: string;
+	ign?: string;
+	descriptions: string[];
+	email: string;
+	mobile?: string;
+	website?: string;
+	github?: string;
+	linkedin?: string;
+	twitter?: string;
+	myanimelist?: string;
+	visibility: ProfileVisibility;
+}
+
+export interface Skill {
+	category: string;
+	name: string;
+}
+
+export interface Experience {
+	title: string;
+	org: string;
+	isJob: boolean;
+	startDate: Date;
+	endDate?: Date;
+	descriptions: string[];
+	shortDescription?: string;
+	githubLink?: string;
+	externalLinks: string[];
+}
+
+export interface Project {
+	category: string;
+	title: string;
+	year: string;
+	shortDescription: string;
+	longDescriptions: string[];
+	img: string;
+	link?: string;
+	tags: string[];
+}
+
+export interface Education {
+	id: string;
+	qualification: string;
+	school: string;
+	startDate: Date;
+	endDate: Date;
+	descriptions: string[];
+}

src/lib/types.ts

@@ -0,0 +1,4 @@
+// Static site generation (SSG)
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

src/routes/+layout.server.ts

@@ -1,6 +1,6 @@
 <script lang="ts">
-	// Import layout data
-	import type { LayoutData } from './$types';
+	// User profile from file
+	import data from '$lib/profile.yaml';
 
 	// Import Components
 	import Hero from '$lib/components/Hero.svelte';
@@ -9,8 +9,35 @@
 	import Skills from '$lib/components/Skills.svelte';
 	import Projects from '$lib/components/Projects.svelte';
 
-	export let data: LayoutData;
-	$: ({ profile, skills, experiences, projects } = data);
+	const { profile, skills, experience, projects } = data;
+
+	const experienceArr = (experience as any[]).map((exp) => {
+		return {
+			...exp,
+			startDate: exp.startDate ? new Date(exp.startDate) : undefined,
+			endDate: exp.endDate ? new Date(exp.endDate) : null
+		};
+	});
+
+	const skillsArr = Object.entries(skills).flatMap(([category, skills]) => {
+		return (skills as string[]).map((skill) => ({
+			category,
+			name: skill as string
+		}));
+	});
+
+	const projectsArr = Object.entries(projects).flatMap(([category, projects]) => {
+		return (projects as any[]).map((project) => ({
+			category,
+			title: project.title,
+			year: project.year,
+			shortDescription: project.shortDescription,
+			longDescriptions: project.longDescriptions || [],
+			img: project.img,
+			link: project.link,
+			tags: project.tags || []
+		}));
+	});
 </script>
 
 <svelte:head>
@@ -33,8 +60,8 @@
 
 <Profile descriptions={profile.descriptions} />
 
-<Skills {skills} />
+<Skills skills={skillsArr} />
 
-<Experience {experiences} />
+<Experience experiences={experienceArr} />
 
-<Projects {projects} />
+<Projects projects={projectsArr} />