cleanup and docs

src/app/(pages)/page.tsx

@@ -6,9 +6,25 @@ import { Separator } from "../components/ui/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
 
 type Button = {
+  /**
+   * The title of the button.
+   */
   title: string;
+
+  /**
+   * The tooltip to display for this statistic.
+   */
   tooltip: string;
+
+  /**
+   * The URL to go to.
+   */
   url: string;
+
+  /**
+   * Whether clicking the button will
+   * open the link in a new tab.
+   */
   openInNewTab?: boolean;
 };
 

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

@@ -1,18 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
-import { Card } from "@/app/components/card";
-import { CodeDialog } from "@/app/components/code-dialog";
 import { CopyButton } from "@/app/components/copy-button";
 import { ErrorCard } from "@/app/components/error-card";
 import { LookupPlayer } from "@/app/components/player/lookup-player";
+import { PlayerView } from "@/app/components/player/player-view";
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/app/components/ui/context-menu";
-import { Separator } from "@/app/components/ui/separator";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
 import { Colors } from "@/common/colors";
 import { generateEmbed } from "@/common/embed";
-import { CachedPlayer, McUtilsAPIError, SkinPart, getPlayer } from "mcutils-library";
+import { isValidPlayer } from "@/common/player";
+import { CachedPlayer, McUtilsAPIError, getPlayer } from "mcutils-library";
 import { Metadata, Viewport } from "next";
-import Image from "next/image";
-import Link from "next/link";
 import { ReactElement } from "react";
 import config from "../../../../../config.json";
 
@@ -23,26 +19,13 @@ type Params = {
 };
 
 export async function generateViewport({ params: { id } }: Params): Promise<Viewport> {
-  try {
+  const validPlayer = await isValidPlayer(id);
-    if (!id || id.length === 0) {
   return {
-        themeColor: Colors.red,
+    themeColor: validPlayer ? Colors.green : Colors.red,
   };
-    }
-    await getPlayer(id); // Ensure the player is valid.
-    return {
-      themeColor: Colors.green,
-    };
-  } catch (err) {
-    // An error occurred
-    return {
-      themeColor: Colors.red,
-    };
-  }
 }
 
 export async function generateMetadata({ params: { id } }: Params): Promise<Metadata> {
-  try {
   // No id provided
   if (!id || id.length === 0) {
     return generateEmbed({
@@ -50,16 +33,14 @@ export async function generateMetadata({ params: { id } }: Params): Promise<Meta
       description: "Click to lookup a player.",
     });
   }
-    const player = await getPlayer(id);
 
-    const { username, uniqueId, skin } = player;
+  try {
+    const { username, uniqueId, skin } = await getPlayer(id);
     const headPartUrl = skin.parts.head;
 
-    const description = `UUID: ${uniqueId}\n\nClick to view more information about the player.`;
-
     return generateEmbed({
       title: `${username}`,
-      description: description,
+      description: `UUID: ${uniqueId}\n\nClick to view more information about the player.`,
       image: headPartUrl,
     });
   } catch (err) {
@@ -95,65 +76,7 @@ export default async function Page({ params: { id } }: Params): Promise<ReactEle
       {player != undefined && (
         <ContextMenu>
           <ContextMenuTrigger>
-            <Card className="w-max xs:w-fit">
+            <PlayerView player={player} />
-              <div className="flex gap-4 flex-col xs:flex-row relative">
-                <div className="absolute 8xl:top-0 xs:bottom-0">
-                  <CodeDialog
-                    title="Player Data"
-                    description="The player's data from the API"
-                    code={JSON.stringify(player, undefined, 2)}
-                  >
-                    <button className="bg-background rounded-lg">
-                      <p className="p-1">JSON</p>
-                    </button>
-                  </CodeDialog>
-                </div>
-
-                <div className="flex justify-center xs:justify-start">
-                  <Image
-                    className="w-[96px] h-[96px]"
-                    src={player.skin.parts.head}
-                    width={96}
-                    height={96}
-                    quality={100}
-                    alt="The player's skin"
-                  />
-                </div>
-
-                <div className="flex flex-col gap-2">
-                  <div>
-                    <h2 className="text-xl text-primary font-semibold">{player.username}</h2>
-                    <p>{player.uniqueId}</p>
-                  </div>
-
-                  <Separator />
-
-                  <div className="flex flex-col gap-2">
-                    <p className="text-lg">Skin Parts</p>
-                    <div className="flex gap-2">
-                      {Object.entries(player.skin.parts)
-                        .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
-                        .map(([part, url]) => {
-                          return (
-                            <Tooltip key={part}>
-                              <TooltipTrigger>
-                                <Link href={url} target="_blank">
-                                  <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
-                                </Link>
-                              </TooltipTrigger>
-                              <TooltipContent>
-                                <p>
-                                  Click to view {player.username}&apos;s {part}
-                                </p>
-                              </TooltipContent>
-                            </Tooltip>
-                          );
-                        })}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Card>
           </ContextMenuTrigger>
           <ContextMenuContent className="flex flex-col">
             <CopyButton content={player.username}>

src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx

@@ -1,11 +1,11 @@
-import { Card } from "@/app/components/card";
 import { CopyButton } from "@/app/components/copy-button";
 import { ErrorCard } from "@/app/components/error-card";
 import { LookupServer } from "@/app/components/server/lookup-server";
+import { ServerView } from "@/app/components/server/server-view";
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/app/components/ui/context-menu";
 import { Colors } from "@/common/colors";
 import { generateEmbed } from "@/common/embed";
-import { formatNumber } from "@/common/number-utils";
+import { isValidServer } from "@/common/server";
 import { capitalizeFirstLetter } from "@/common/string-utils";
 import {
   CachedBedrockMinecraftServer,
@@ -15,7 +15,6 @@ import {
   getServer,
 } from "mcutils-library";
 import { Metadata, Viewport } from "next";
-import Image from "next/image";
 import { ReactElement } from "react";
 import config from "../../../../../../config.json";
 
@@ -55,26 +54,13 @@ function checkPlatform(platform: ServerPlatform): boolean {
 }
 
 export async function generateViewport({ params: { platform, hostname } }: Params): Promise<Viewport> {
-  try {
+  const validPlayer = await isValidServer(platform, hostname);
-    if (!checkPlatform(platform) || !hostname || hostname.length === 0) {
   return {
-        themeColor: Colors.red,
+    themeColor: validPlayer ? Colors.green : Colors.red,
   };
-    }
-    await getServer(platform, hostname); // Ensure the server is valid.
-    return {
-      themeColor: Colors.green,
-    };
-  } catch (err) {
-    // An error occurred
-    return {
-      themeColor: Colors.red,
-    };
-  }
 }
 
 export async function generateMetadata({ params: { platform, hostname } }: Params): Promise<Metadata> {
-  try {
   if (!checkPlatform(platform)) {
     // Invalid platform
     return generateEmbed({
@@ -89,6 +75,8 @@ export async function generateMetadata({ params: { platform, hostname } }: Param
       description: `Click to lookup a ${capitalizeFirstLetter(platform)} server.`,
     });
   }
+
+  try {
     const server = await getServer(platform, hostname);
     const { hostname: serverHostname, players } = server as CachedJavaMinecraftServer | CachedBedrockMinecraftServer;
 
@@ -115,20 +103,20 @@ export async function generateMetadata({ params: { platform, hostname } }: Param
 export default async function Page({ params: { platform, hostname } }: Params): Promise<ReactElement> {
   let error: string | undefined = undefined; // The error to display
   let server: CachedJavaMinecraftServer | CachedBedrockMinecraftServer | undefined = undefined; // The server to display
-  let invalidPlatform = !checkPlatform(platform); // Whether the platform is invalid
+  let invalidPlatform: boolean = !checkPlatform(platform); // Whether the platform is invalid
+  let favicon: string | undefined; // The server's favicon
 
-  // Try and get the player to display
-  try {
   if (invalidPlatform) {
     error = "Invalid platform"; // Set the error message
   } else {
+    // Try and get the player to display
+    try {
       server = platform && hostname ? await getServer(platform, hostname) : undefined;
-    }
+      favicon = getFavicon(platform, server);
     } catch (err) {
       error = (err as McUtilsAPIError).message; // Set the error message
     }
-
+  }
-  const favicon = getFavicon(platform, server);
 
   return (
     <div className="h-full flex flex-col items-center">
@@ -143,39 +131,7 @@ export default async function Page({ params: { platform, hostname } }: Params):
       {server != null && (
         <ContextMenu>
           <ContextMenuTrigger>
-            <Card className="w-max xs:w-fit relative">
+            <ServerView server={server} favicon={favicon} />
-              <div className="flex gap-2 flex-col">
-                <div className="flex gap-4 flex-col xs:flex-row">
-                  {favicon && (
-                    <div className="flex justify-center xs:justify-start">
-                      <Image
-                        className="w-[64px] h-[64px]"
-                        src={favicon}
-                        width={64}
-                        height={64}
-                        quality={100}
-                        alt="The server's favicon"
-                      />
-                    </div>
-                  )}
-
-                  <div className="flex flex-col">
-                    <h2 className="text-xl text-primary font-semibold">{server.hostname}</h2>
-                    <div>
-                      <p>
-                        Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="bg-background rounded-lg p-2 text-sm xs:text-lg">
-                  {server.motd.html.map((line, index) => {
-                    return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>;
-                  })}
-                </div>
-              </div>
-            </Card>
           </ContextMenuTrigger>
           <ContextMenuContent className="flex flex-col">
             <CopyButton content={server.hostname}>

src/app/components/card.tsx

@@ -1,12 +1,18 @@
 import { cn } from "@/common/utils";
 import { ReactElement } from "react";
 
-export function Card({
+type CardProps = {
-  children,
+  /**
-  className,
+   * The children for this element.
-}: Readonly<{
+   */
   children: React.ReactNode;
+
+  /**
+   * The class names to append.
+   */
   className?: string;
-}>): ReactElement {
+};
+
+export function Card({ children, className }: CardProps): ReactElement {
   return <div className={cn("bg-secondary rounded-lg p-3", className)}>{children}</div>;
 }

src/app/components/code-dialog.tsx

@@ -4,9 +4,24 @@ import { atelierSeasideDark } from "react-syntax-highlighter/dist/esm/styles/hlj
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
 
 type CodeDialogProps = {
+  /**
+   * The title of the dialog.
+   */
   title: string;
+
+  /**
+   * The description of the dialog.
+   */
   description: string;
+
+  /**
+   * The code to show in the dialog.
+   */
   code: string;
+
+  /**
+   * The children for this element.
+   */
   children: React.ReactNode;
 };
 

src/app/components/container.tsx

@@ -1,11 +1,14 @@
 import { ReactElement } from "react";
 import NavBar from "./navbar";
 
-export default function Container({
+type ContainerProps = {
-  children,
+  /**
-}: Readonly<{
+   * The children for this element.
+   */
   children: React.ReactNode;
-}>): ReactElement {
+};
+
+export default function Container({ children }: ContainerProps): ReactElement {
   return (
     <div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 w-full xs:max-w-[1200px]">
       <NavBar />

src/app/components/copy-button.tsx

@@ -5,7 +5,14 @@ import copy from "clipboard-copy";
 import { ReactElement } from "react";
 
 type CopyButtonProps = {
+  /**
+   * The content to copy to the clipboard.
+   */
   content: string;
+
+  /**
+   * The children for this element.
+   */
   children: React.ReactNode;
 };
 
@@ -26,7 +33,7 @@ export function CopyButton({ content, children }: CopyButtonProps): ReactElement
           title: "Copied!",
           description: (
             <p>
-              Copied <span className="font-semibold">{content}</span> to your clipboard
+              Copied <b>{content}</b> to your clipboard.
             </p>
           ),
           duration: 5000,

src/app/components/error-card.tsx

@@ -2,6 +2,9 @@ import { ReactElement } from "react";
 import { Card } from "./card";
 
 type ErrorProps = {
+  /**
+   * The message to show.
+   */
   message: string;
 };
 

src/app/components/logo.tsx

@@ -1,7 +1,14 @@
 import Image from "next/image";
 import { ReactElement } from "react";
 
-export default function Logo({ size = 30 }: Readonly<{ size?: number }>): ReactElement {
+type LogoProps = {
+  /**
+   * The size the logo will be.
+   */
+  size?: number;
+};
+
+export default function Logo({ size = 30 }: LogoProps): ReactElement {
   return (
     <Image
       src="https://git.fascinated.cc/MinecraftUtilities/Assets/raw/branch/master/logo.png"

src/app/components/navbar.tsx

@@ -5,16 +5,28 @@ import { RedirectButton } from "./rediect-button";
 import { ToggleThemeButton } from "./theme-toggle-button";
 
 type Page = {
-  title: string;
+  /**
+   * The name of the button for the navbar.
+   */
+  name: string;
+
+  /**
+   * The URL to go to.
+   */
   url: string;
+
+  /**
+   * Whether clicking the button will
+   * open the link in a new tab.
+   */
   openInNewTab?: boolean;
 };
 
 const pages: Page[] = [
-  { title: "Player", url: "/player" },
+  { name: "Player", url: "/player" },
-  { title: "Server", url: "/server/java" },
+  { name: "Server", url: "/server/java" },
-  { title: "Mojang", url: "/mojang/status" },
+  { name: "Mojang", url: "/mojang/status" },
-  { title: "API", url: "https://api.mcutils.xyz", openInNewTab: true },
+  { name: "API", url: "https://api.mcutils.xyz", openInNewTab: true },
 ];
 
 export default function NavBar(): ReactElement {
@@ -25,15 +37,15 @@ export default function NavBar(): ReactElement {
         <p className="hidden md:block">Minecraft Utilities</p>
       </Link>
 
-      <div className="flex-grow"></div>
+      <div className="flex-grow" />
 
       <div className="flex gap-4">
         {pages.map((page, index) => {
-          return <RedirectButton key={index} title={page.title} url={page.url} openInNewTab={page.openInNewTab} />;
+          return <RedirectButton key={index} title={page.name} url={page.url} openInNewTab={page.openInNewTab} />;
         })}
       </div>
 
-      <div className="flex-grow"></div>
+      <div className="flex-grow" />
 
       <div className="mr-4 flex items-center gap-2">
         <div className="hidden md:block">

src/app/components/player/player-view.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable @next/next/no-img-element */
+import { CachedPlayer, SkinPart } from "mcutils-library";
+import Image from "next/image";
+import Link from "next/link";
+import { ReactElement } from "react";
+import { Card } from "../card";
+import { CodeDialog } from "../code-dialog";
+import { Separator } from "../ui/separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+type PlayerViewProps = {
+  /**
+   * The player to display.
+   */
+  player: CachedPlayer;
+};
+
+export function PlayerView({ player }: PlayerViewProps): ReactElement {
+  return (
+    <Card className="w-max xs:w-fit">
+      <div className="flex gap-4 flex-col xs:flex-row relative">
+        <div className="absolute 8xl:top-0 xs:bottom-0">
+          <CodeDialog
+            title="Player Data"
+            description="The player's data from the API"
+            code={JSON.stringify(player, undefined, 2)}
+          >
+            <button className="bg-background rounded-lg">
+              <p className="p-1">JSON</p>
+            </button>
+          </CodeDialog>
+        </div>
+
+        <div className="flex justify-center xs:justify-start">
+          <Image
+            className="w-[96px] h-[96px]"
+            src={player.skin.parts.head}
+            width={96}
+            height={96}
+            quality={100}
+            alt="The player's skin"
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <div>
+            <h2 className="text-xl text-primary font-semibold">{player.username}</h2>
+            <p>{player.uniqueId}</p>
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-col gap-2">
+            <p className="text-lg">Skin Parts</p>
+            <div className="flex gap-2">
+              {Object.entries(player.skin.parts)
+                .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
+                .map(([part, url]) => {
+                  return (
+                    <Tooltip key={part}>
+                      <TooltipTrigger>
+                        <Link href={url} target="_blank">
+                          <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
+                        </Link>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>
+                          Click to view {player.username}&apos;s {part}
+                        </p>
+                      </TooltipContent>
+                    </Tooltip>
+                  );
+                })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}

src/app/components/rediect-button.tsx

@@ -2,8 +2,20 @@ import Link from "next/link";
 import { ReactElement } from "react";
 
 type ButtonProps = {
+  /**
+   * The title of the button.
+   */
   title: string;
+
+  /**
+   * The URL to go to.
+   */
   url: string;
+
+  /**
+   * Whether clicking the button will
+   * open the link in a new tab.
+   */
   openInNewTab?: boolean;
 };
 

src/app/components/server/lookup-server.tsx

@@ -11,6 +11,9 @@ import { Label } from "../ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 
 type LookupServerProps = {
+  /**
+   * The current platform.
+   */
   currentPlatform: string;
 };
 

src/app/components/server/server-view.tsx

@@ -0,0 +1,55 @@
+import { formatNumber } from "@/common/number-utils";
+import { CachedBedrockMinecraftServer, CachedJavaMinecraftServer } from "mcutils-library";
+import Image from "next/image";
+import { ReactElement } from "react";
+import { Card } from "../card";
+
+type ServerViewProps = {
+  /**
+   * The server to display.
+   */
+  server: CachedJavaMinecraftServer | CachedBedrockMinecraftServer;
+
+  /**
+   * The favicon for the server.
+   */
+  favicon: string | undefined;
+};
+
+export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
+  return (
+    <Card className="w-max xs:w-fit relative">
+      <div className="flex gap-2 flex-col">
+        <div className="flex gap-4 flex-col xs:flex-row">
+          {favicon && (
+            <div className="flex justify-center xs:justify-start">
+              <Image
+                className="w-[64px] h-[64px]"
+                src={favicon}
+                width={64}
+                height={64}
+                quality={100}
+                alt="The server's favicon"
+              />
+            </div>
+          )}
+
+          <div className="flex flex-col">
+            <h2 className="text-xl text-primary font-semibold">{server.hostname}</h2>
+            <div>
+              <p>
+                Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-background rounded-lg p-2 text-sm xs:text-lg">
+          {server.motd.html.map((line, index) => {
+            return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>;
+          })}
+        </div>
+      </div>
+    </Card>
+  );
+}

src/app/components/stat.tsx

@@ -2,8 +2,19 @@ import { ReactElement } from "react";
 import CountUp from "react-countup";
 
 type StatProps = {
+  /**
+   * The title of this statistic.
+   */
   title: string;
+
+  /**
+   * The value to display for this statistic.
+   */
   value: number;
+
+  /**
+   * The icon to display.
+   */
   icon: ReactElement;
 };
 

src/app/components/stats.tsx

@@ -7,9 +7,24 @@ import useWebSocket, { ReadyState } from "react-use-websocket";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 type Stat = {
+  /**
+   * The metric ID from the websocket.
+   */
   id: string;
+
+  /**
+   * The display name for this statistic.
+   */
   displayName: string;
+
+  /**
+   * The tooltip to display for this statistic.
+   */
   tooltip: string;
+
+  /**
+   * The icon to use for this statistic.
+   */
   icon: ReactElement;
 };
 

src/common/player.ts

@@ -0,0 +1,16 @@
+import { getPlayer } from "mcutils-library";
+
+/**
+ * Checks if the player is valid.
+ *
+ * @param id the player's id
+ * @returns true if valid, false otherwise
+ */
+export async function isValidPlayer(id: string): Promise<boolean> {
+  try {
+    await getPlayer(id);
+    return true;
+  } catch {
+    return true;
+  }
+}

src/common/server.ts

@@ -0,0 +1,17 @@
+import { ServerPlatform, getServer } from "mcutils-library";
+
+/**
+ * Checks if the server is valid.
+ *
+ * @param platform the server's platform
+ * @param query the hostname for the server
+ * @returns true if valid, false otherwise
+ */
+export async function isValidServer(platform: ServerPlatform, query: string): Promise<boolean> {
+  try {
+    await getServer(platform, query);
+    return true;
+  } catch {
+    return true;
+  }
+}