Cache contributors data & load main contribs locally

src/routes/about/+page.svelte

@@ -3,6 +3,9 @@
 	import * as About from "$lib/sections/about";
 	import { InfoIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
+	import avatarNullptr from "$lib/assets/avatars/nullptr.jpg";
+	import avatarRealmy from "$lib/assets/avatars/realmy.jpg";
+	import avatarJovannMC from "$lib/assets/avatars/jovannmc.jpg";
 
 	interface Donator {
 		name: string;
@@ -24,27 +27,34 @@
 			name: "nullptr",
 			github: "https://github.com/not-nullptr",
 			role: "Lead developer; conversion backend, UI implementation",
-			avatar: "https://avatars.githubusercontent.com/u/62841684?v=4",
+			avatar: avatarNullptr,
 		},
 		{
 			name: "Realmy",
 			github: "https://github.com/RealmyTheMan",
 			role: "Lead designer; logo and branding, user interface design",
-			avatar: "https://avatars.githubusercontent.com/u/163438634?v=4",
+			avatar: avatarRealmy,
 		},
 		{
 			name: "JovannMC",
 			github: "https://github.com/JovannMC",
 			role: "Developer; UI implementation",
-			avatar: "https://avatars.githubusercontent.com/u/45893380?v=4",
+			avatar: avatarJovannMC,
 		},
 	];
 
 	let ghContribs: Contributor[] = [];
 
 	onMount(async () => {
+		// Check if the data is already in sessionStorage
+		const cachedContribs = sessionStorage.getItem("ghContribs");
+		if (cachedContribs) {
+			ghContribs = JSON.parse(cachedContribs);
+			console.log("Loaded GitHub contributors from cache");
+			return;
+		}
+	
 		// Fetch GitHub contributors
-		// TODO: cache it, so we don't have to fetch it every time the page is loaded
 		try {
 			const response = await fetch(
 				"https://api.github.com/repos/not-nullptr/VERT/contributors",
@@ -58,22 +68,33 @@
 			const mainContribNames = mainContribs.map((contrib) =>
 				contrib.github.split("/").pop(),
 			);
-			ghContribs = allContribs
+			const filteredContribs = allContribs.filter(
-				.filter(
+				(contrib: { login: string }) =>
-					(contrib: { login: string }) =>
+					!mainContribNames.includes(contrib.login),
-						!mainContribNames.includes(contrib.login),
+			);
-				)
+	
-				.map(
+			// Fetch and cache avatar images as Base64
-					(contrib: {
+			const fetchAvatar = async (url: string) => {
-						login: string;
+				const res = await fetch(url);
-						avatar_url: string;
+				const blob = await res.blob();
-						html_url: string;
+				return new Promise<string>((resolve, reject) => {
-					}) => ({
+					const reader = new FileReader();
-						name: contrib.login,
+					reader.onloadend = () => resolve(reader.result as string);
-						avatar: contrib.avatar_url,
+					reader.onerror = reject;
-						github: contrib.html_url,
+					reader.readAsDataURL(blob);
-					}),
+				});
-				);
+			};
+	
+			ghContribs = await Promise.all(
+				filteredContribs.map(async (contrib: { login: string; avatar_url: string; html_url: string }) => ({
+					name: contrib.login,
+					avatar: await fetchAvatar(contrib.avatar_url),
+					github: contrib.html_url,
+				})),
+			);
+	
+			// Cache the data in sessionStorage
+			sessionStorage.setItem("ghContribs", JSON.stringify(ghContribs));
 		} catch (e) {
 			error(["general"], `Error fetching GitHub contributors: ${e}`);
 		}