updates to the frontend

Frontend/src/app/(pages)/player/[[...slug]]/page.tsx

@@ -1,3 +1,5 @@
+import Embed from "@/components/embed";
+import PlayerResult from "@/components/player/player-result";
 import PlayerSearch from "@/components/player/player-search";
 import { minecrafter } from "@/font/fonts";
 import { cn } from "@/lib/utils";
@@ -5,7 +7,6 @@ import { PageProps } from "@/types/page";
 import { Metadata } from "next";
 import Image from "next/image";
 import { CachedPlayer, getPlayer, type RestfulMCAPIError } from "restfulmc-lib";
-import PlayerResult from "../../../components/player/player-result";
 
 /**
  * The page to lookup a player.
@@ -15,16 +16,11 @@ import PlayerResult from "../../../components/player/player-result";
 const PlayerPage = async ({ params }: PageProps): Promise<JSX.Element> => {
 	let error: string | undefined = undefined; // The error to display
 	let result: CachedPlayer | undefined = undefined; // The player to display
-	let query: string | undefined = params.slug?.[0]; // The query to search for
-
-	// Limit the query to 36 chars
-	if (query && query.length > 36) {
-		query = query.substr(0, 36);
-	}
+	const query: string | undefined = trimQuery(params.slug?.[0]); // The query to search for
 
 	// Try and get the player to display
 	try {
-		result = params.slug ? await getPlayer(query) : undefined;
+		result = query ? await getPlayer(query) : undefined;
 	} catch (err) {
 		error = (err as RestfulMCAPIError).message; // Set the error message
 	}
@@ -73,11 +69,50 @@ const PlayerPage = async ({ params }: PageProps): Promise<JSX.Element> => {
  * @param searchParams the search params
  * @returns the generated metadata
  */
-const generateMetadata = async ({ params }: PageProps): Promise<Metadata> => {
-	console.log("params", params);
-	return {
-		title: "bob ross",
-	};
+export const generateMetadata = async ({
+	params,
+}: PageProps): Promise<Metadata> => {
+	const query: string | undefined = trimQuery(params.slug?.[0]); // The query to embed for
+
+	// Try and get the player to display
+	if (query) {
+		try {
+			const player: CachedPlayer = await getPlayer(query); // Get the player to embed
+			return Embed({
+				title: `${player.username}'s Player`,
+				description: "Click to view data about this player.",
+				thumbnail: player.skin.parts.HEAD,
+			});
+		} catch (err) {
+			const code: number = (err as RestfulMCAPIError).code; // Get the error status code
+			if (code === 400) {
+				return Embed({
+					title: "Invalid Player",
+					description: "The player you searched for is invalid.",
+				});
+			} else if (code === 404) {
+				return Embed({
+					title: "Player Not Found",
+					description: "The player you searched for was not found.",
+				});
+			}
+		}
+	}
+	return {};
+};
+
+/**
+ * Trim the given query.
+ *
+ * @param query the query to trim
+ * @returns the trimmed query
+ */
+const trimQuery = (query: string | undefined): string | undefined => {
+	// Limit the query to 36 chars
+	if (query && query.length > 36) {
+		query = query.substr(0, 36);
+	}
+	return query;
 };
 
 export default PlayerPage;

Frontend/src/app/components/embed.tsx

@@ -0,0 +1,47 @@
+import { Metadata } from "next";
+
+type EmbedProps = {
+	/**
+	 * The title of the embed.
+	 */
+	title: string;
+
+	/**
+	 * The description of the embed.
+	 */
+	description: string;
+
+	/**
+	 * The optional thumbnail image of the embed.
+	 */
+	thumbnail?: string;
+};
+
+/**
+ * An embed for a page.
+ *
+ * @param props the embed props
+ * @returns the embed jsx
+ */
+const Embed = ({
+	title,
+	description,
+	thumbnail = "",
+}: EmbedProps): Metadata => {
+	return {
+		title: title,
+		openGraph: {
+			title: `${title}`,
+			description: description,
+			images: [
+				{
+					url: thumbnail,
+				},
+			],
+		},
+		twitter: {
+			card: "summary",
+		},
+	};
+};
+export default Embed;

Frontend/src/app/components/player/player-result.tsx

@@ -14,6 +14,7 @@ const PlayerResult = ({
 		uniqueId,
 		username,
 		skin: { parts },
+		legacy,
 	},
 }: {
 	player: CachedPlayer;
@@ -23,16 +24,19 @@ const PlayerResult = ({
 		<div className="flex gap-5 items-center">
 			{/* Player Head */}
 			<Image
-				src={parts[SkinPart.HEAD]}
+				src={parts.HEAD}
 				alt={`${username}'s Head`}
 				width={128}
 				height={128}
 			/>
 
-			{/* Name & Unique ID */}
+			{/* Name, Unique ID, and Badges */}
 			<div className="flex flex-col gap-1.5">
 				<h1 className="text-xl font-bold text-minecraft-green-3">{username}</h1>
 				<code className="text-zinc-300">{uniqueId}</code>
+
+				{/* Legacy Badge */}
+				{legacy && <p className="text-sm font-semibold uppercase">Legacy</p>}
 			</div>
 		</div>