diff --git a/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx index 57e7a00..0c9beff 100644 --- a/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx +++ b/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 => { 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 => { * @param searchParams the search params * @returns the generated metadata */ -const generateMetadata = async ({ params }: PageProps): Promise => { - console.log("params", params); - return { - title: "bob ross", - }; +export const generateMetadata = async ({ + params, +}: PageProps): Promise => { + 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; diff --git a/Frontend/src/app/components/embed.tsx b/Frontend/src/app/components/embed.tsx new file mode 100644 index 0000000..e738adc --- /dev/null +++ b/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; diff --git a/Frontend/src/app/components/player/player-result.tsx b/Frontend/src/app/components/player/player-result.tsx index 7fa3102..c156a6b 100644 --- a/Frontend/src/app/components/player/player-result.tsx +++ b/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 = ({
{/* Player Head */} {`${username}'s - {/* Name & Unique ID */} + {/* Name, Unique ID, and Badges */}

{username}

{uniqueId} + + {/* Legacy Badge */} + {legacy &&

Legacy

}