updates to the frontend
Some checks failed
Deploy Frontend / docker (17, 3.8.5) (push) Failing after 18s

This commit is contained in:
Braydon 2024-04-16 20:23:09 -04:00
parent 0216662767
commit 21f31c0f1d
3 changed files with 101 additions and 15 deletions

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

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

@ -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>