added avatar to landing page

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,15 +39,17 @@ export const Header: Component<{ header: HeaderProps }> = ({ header }) => {
 
 	return (
 		<div className="container mx-auto flex items-center min-h-screen">
-			<div>
+			<div className="flex items-center">
-				{header.avatar !== undefined && (
 				<Image
-						src={header.avatar}
+					isBlurred
+					src={avatar}
 					width={300}
 					alt={`A picture of ${header.fullName}`}
 				/>
-				)}
 
+				<Spacer x={8} />
+
+				<div>
 					<h1 className="text-4xl">{header.fullName}</h1>
 					<Spacer y={4} />
 
@@ -67,5 +72,6 @@ export const Header: Component<{ header: HeaderProps }> = ({ header }) => {
 					))}
 				</div>
 			</div>
+		</div>
 	);
 };

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";
+import { readAvatarFile, readLandingJson } from "@utils/landing";
-
-const getLanding = async (): Promise<Landing> => {
-	// Any error will get handled by the `error.tsx` file.
-	return await readLandingJson(dataDirLocation);
-};
 
 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 />
 		</>
 	);

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(),

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";

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}`;
+};