From a48039a4805ad54bcb7ead5632ca2a6be88e0427 Mon Sep 17 00:00:00 2001
From: Guus van Meerveld <mail@guusvanmeerveld.dev>
Date: Sat, 9 Mar 2024 17:43:41 +0100
Subject: [PATCH] added avatar to landing page

---
 data/{pfp.jpg => avatar.jpg} | Bin
 src/app/(landing)/Header.tsx |  60 +++++++++++++++++++----------------
 src/app/(landing)/page.tsx   |  15 +++------
 src/models/header.ts         |   1 -
 src/utils/constants.ts       |   2 ++
 src/utils/landing.ts         |  19 +++++++++--
 6 files changed, 57 insertions(+), 40 deletions(-)
 rename data/{pfp.jpg => avatar.jpg} (100%)

diff --git a/data/pfp.jpg b/data/avatar.jpg
similarity index 100%
rename from data/pfp.jpg
rename to data/avatar.jpg
diff --git a/src/app/(landing)/Header.tsx b/src/app/(landing)/Header.tsx
index 7da1795..810314a 100644
--- a/src/app/(landing)/Header.tsx
+++ b/src/app/(landing)/Header.tsx
@@ -12,7 +12,10 @@ import { FiGithub, FiMail, FiLinkedin } from "react-icons/fi";
 
 import HeaderProps from "@models/header";
 
-export const Header: Component<{ header: HeaderProps }> = ({ header }) => {
+export const Header: Component<{ header: HeaderProps; avatar: string }> = ({
+	header,
+	avatar
+}) => {
 	const socials = useMemo(
 		() => [
 			{
@@ -36,35 +39,38 @@ export const Header: Component<{ header: HeaderProps }> = ({ header }) => {
 
 	return (
 		<div className="container mx-auto flex items-center min-h-screen">
-			<div>
-				{header.avatar !== undefined && (
-					<Image
-						src={header.avatar}
-						width={300}
-						alt={`A picture of ${header.fullName}`}
-					/>
-				)}
+			<div className="flex items-center">
+				<Image
+					isBlurred
+					src={avatar}
+					width={300}
+					alt={`A picture of ${header.fullName}`}
+				/>
 
-				<h1 className="text-4xl">{header.fullName}</h1>
-				<Spacer y={4} />
+				<Spacer x={8} />
 
-				<h2 className="text-2xl">{header.description}</h2>
-				<Spacer y={4} />
+				<div>
+					<h1 className="text-4xl">{header.fullName}</h1>
+					<Spacer y={4} />
 
-				{socials.map((social) => (
-					<Link href={social.link} key={social.name.toLowerCase()}>
-						<Tooltip showArrow content={social.name}>
-							<Button
-								className="text-2xl mr-4"
-								color="primary"
-								isIconOnly
-								aria-label={social.name}
-							>
-								{social.icon}
-							</Button>
-						</Tooltip>
-					</Link>
-				))}
+					<h2 className="text-2xl">{header.description}</h2>
+					<Spacer y={4} />
+
+					{socials.map((social) => (
+						<Link href={social.link} key={social.name.toLowerCase()}>
+							<Tooltip showArrow content={social.name}>
+								<Button
+									className="text-2xl mr-4"
+									color="primary"
+									isIconOnly
+									aria-label={social.name}
+								>
+									{social.icon}
+								</Button>
+							</Tooltip>
+						</Link>
+					))}
+				</div>
 			</div>
 		</div>
 	);
diff --git a/src/app/(landing)/page.tsx b/src/app/(landing)/page.tsx
index 167ed91..e49ce37 100644
--- a/src/app/(landing)/page.tsx
+++ b/src/app/(landing)/page.tsx
@@ -1,22 +1,17 @@
 import { Footer } from "../Footer";
 import { Header } from "./Header";
 
-import Landing from "@models/landing";
-
 import { dataDirLocation } from "@utils/constants";
-import { readLandingJson } from "@utils/landing";
-
-const getLanding = async (): Promise<Landing> => {
-	// Any error will get handled by the `error.tsx` file.
-	return await readLandingJson(dataDirLocation);
-};
+import { readAvatarFile, readLandingJson } from "@utils/landing";
 
 export default async function Page() {
-	const landing = await getLanding();
+	// Any error will get handled by the `error.tsx` file.
+	const landing = await readLandingJson(dataDirLocation);
+	const avatar = await readAvatarFile(dataDirLocation);
 
 	return (
 		<>
-			<Header header={landing.header} />
+			<Header header={landing.header} avatar={avatar} />
 			<Footer />
 		</>
 	);
diff --git a/src/models/header.ts b/src/models/header.ts
index 43cc38f..4a38958 100644
--- a/src/models/header.ts
+++ b/src/models/header.ts
@@ -3,7 +3,6 @@ import z from "zod";
 export const HeaderPropsModel = z.object({
 	fullName: z.string(),
 	name: z.string(),
-	avatar: z.string().optional(),
 	description: z.string(),
 	contact: z.object({
 		email: z.string().email(),
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index b02c323..3bed2ff 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1 +1,3 @@
 export const dataDirLocation = process.env.DATA_DIR ?? "/app/data";
+
+export const avatarFileFormat = process.env.AVATAR_FILE_FORMAT ?? "jpg";
diff --git a/src/utils/landing.ts b/src/utils/landing.ts
index d561e0d..174a2e9 100644
--- a/src/utils/landing.ts
+++ b/src/utils/landing.ts
@@ -1,6 +1,8 @@
-import { readJson } from "fs-extra";
+import { readFile, readJson } from "fs-extra";
 import path from "path";
 
+import { avatarFileFormat } from "./constants";
+
 import Landing, { LandingModel } from "@models/landing";
 
 import exists from "@utils/fileExists";
@@ -28,4 +30,17 @@ export const readLandingJson = async (
 	return landingResult.data;
 };
 
-// const readPfpFile = async (location: string): Promise<> => {};
+export const readAvatarFile = async (
+	dataDirLocation: string
+): Promise<string> => {
+	const avatarFileLocation = path.join(
+		dataDirLocation,
+		`avatar.${avatarFileFormat}`
+	);
+
+	const imageData = await readFile(avatarFileLocation);
+
+	const base64Image = Buffer.from(imageData).toString("base64");
+
+	return `data:image/${avatarFileFormat};base64,${base64Image}`;
+};