Update src

Frontend/README.md

@@ -1 +1 @@
-# Frontend
+# RESTfulMC Frontend

Frontend/components.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "default",
+	"rsc": true,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src/app/globals.css",
+		"baseColor": "zinc",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/app/components",
+		"utils": "@/app/lib/utils"
+	}
+}

Frontend/config.json

@@ -0,0 +1,52 @@
+{
+	"siteName": "RESTfulMC",
+	"siteUrl": "http://localhost:3000",
+	"analyticsDomain": "mc.rainnny.club",
+	"metadata": {
+		"title": {
+			"default": "RESTfulMC",
+			"template": "%s 🞄 RESTfulMC"
+		},
+		"description": "A simple, yet useful RESTful API for Minecraft utilizing Springboot.",
+		"keywords": [
+			"java",
+			"minecraft",
+			"json",
+			"rest-api",
+			"restful",
+			"bedrock",
+			"springboot"
+		],
+		"icons": [
+			{
+				"rel": "icon",
+				"type": "image/png",
+				"sizes": "32x32",
+				"url": "/media/logo.webp"
+			}
+		]
+	},
+	"viewport": {
+		"themeColor": "minecraft-green-1"
+	},
+	"navbarLinks": {
+		"Player": "/player",
+		"Server": "/server",
+		"Mojang": "/mojang",
+		"Docs": "/docs"
+	},
+	"featuredItems": [
+		{
+			"name": "Player Lookup",
+			"description": "Wanna find a player? You can locate them here by their username or UUID.",
+			"image": "/media/featured/server.png",
+			"href": "/player"
+		},
+		{
+			"name": "Server Lookup",
+			"description": "Fugiat culpa est consequat nostrud exercitation ut id ex in.",
+			"image": "/media/featured/server.png",
+			"href": "/player"
+		}
+	]
+}

Frontend/package.json

@@ -1,28 +1,43 @@
 {
-	"name": "restfulmc-frontend",
-	"version": "1.0.0",
-	"author": "Braydon (Rainnny) <braydonrainnny@gmail.com>",
-	"description": "A simple, yet useful RESTful API for Minecraft utilizing Springboot.",
-	"homepage": "https://mc.rainnny.club",
-	"scripts": {
-		"dev": "next dev --turbo",
-		"build": "next build",
-		"start": "next start",
-		"lint": "next lint"
-	},
-	"dependencies": {
-		"react": "^18",
-		"react-dom": "^18",
-		"next": "14.2.1"
-	},
-	"devDependencies": {
-		"typescript": "^5",
-		"@types/node": "^20",
-		"@types/react": "^18",
-		"@types/react-dom": "^18",
-		"postcss": "^8",
-		"tailwindcss": "^3.4.1",
-		"eslint": "^8",
-		"eslint-config-next": "14.2.1"
-	}
+  "name": "restfulmc-frontend",
+  "version": "1.0.0",
+  "author": "Braydon (Rainnny) <braydonrainnny@gmail.com>",
+  "description": "A simple, yet useful RESTful API for Minecraft utilizing Springboot.",
+  "homepage": "https://mc.rainnny.club",
+  "scripts": {
+    "dev": "next dev --turbo",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.1.3",
+    "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.368.0",
+    "next": "14.2.1",
+    "next-plausible": "^3.12.0",
+    "next-themes": "^0.3.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-hook-form": "^7.51.3",
+    "restfulmc-lib": "^1.0.9",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.1",
+    "postcss": "^8",
+    "sleep-promise": "^9.1.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
 }

Frontend/src/app/(pages)/docs/page.tsx

@@ -0,0 +1,41 @@
+import Creeper from "@/components/creeper";
+import { minecrafter } from "@/font/fonts";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+/**
+ * The documentation page.
+ *
+ * @returns the page jsx
+ */
+const DocsPage = (): JSX.Element => (
+	<main className="h-[64vh] flex flex-col gap-3 justify-center items-center">
+		{/* Creeper */}
+		<div className="absolute left-28 bottom-16 pointer-events-none">
+			<Creeper />
+		</div>
+
+		{/* Header */}
+		<h1
+			className={cn(
+				"text-6xl text-minecraft-green-3 pointer-events-none",
+				minecrafter.className
+			)}
+		>
+			Documentation
+		</h1>
+
+		{/* Content */}
+		<h2 className="text-xl">
+			This page is still under construction, however we do have a{" "}
+			<Link
+				className="text-minecraft-green-4"
+				href="https://git.rainnny.club/Rainnny/RESTfulMC/wiki"
+			>
+				Wiki
+			</Link>
+			!
+		</h2>
+	</main>
+);
+export default DocsPage;

Frontend/src/app/(pages)/page.tsx

@@ -1,2 +1,15 @@
-const HomePage = (): JSX.Element => <main>Hello World</main>;
-export default HomePage;
+import FeaturedContent from "@/components/landing/featured-content";
+import Hero from "@/components/landing/hero";
+
+/**
+ * The landing page.
+ *
+ * @returns the page jsx
+ */
+const LandingPage = (): JSX.Element => (
+	<main className="px-3">
+		<Hero />
+		<FeaturedContent />
+	</main>
+);
+export default LandingPage;

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

@@ -0,0 +1,79 @@
+import PlayerSearch from "@/components/player/player-search";
+import { minecrafter } from "@/font/fonts";
+import { cn } from "@/lib/utils";
+import { PageProps } from "@/types/page";
+import { Metadata } from "next";
+import Image from "next/image";
+import { CachedPlayer, getPlayer, type RestfulMCAPIError } from "restfulmc-lib";
+
+/**
+ * The page to lookup a player.
+ *
+ * @returns the page jsx
+ */
+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);
+	}
+
+	// Try and get the player to display
+	try {
+		result = params.slug ? await getPlayer(query) : undefined;
+	} catch (err) {
+		error = (err as RestfulMCAPIError).message; // Set the error message
+	}
+
+	// Render the page
+	return (
+		<main className="h-screen flex flex-col justify-center items-center">
+			<div className="flex gap-32">
+				{/* Header */}
+				<Image
+					className="pointer-events-none"
+					src="/media/players.webp"
+					alt="Minecraft Players"
+					width={632}
+					height={632}
+				/>
+
+				<div className="flex flex-col gap-7">
+					<h1
+						className={cn(
+							"mt-20 text-6xl text-minecraft-green-3 pointer-events-none",
+							minecrafter.className
+						)}
+					>
+						Player Lookup
+					</h1>
+
+					{/* Error */}
+					{error && <p className="text-red-500">{error}</p>}
+
+					{/* Search */}
+					<PlayerSearch query={query} />
+				</div>
+			</div>
+		</main>
+	);
+};
+
+/**
+ * Generate metadata for this page.
+ *
+ * @param params the route params
+ * @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 default PlayerPage;

Frontend/src/app/components/creeper.tsx

@@ -0,0 +1,16 @@
+import Image from "next/image";
+
+/**
+ * A creeper image.
+ *
+ * @returns the creeper jsx
+ */
+const Creeper = (): JSX.Element => (
+	<Image
+		src="/media/creeper.png"
+		alt="A Minecraft Creeper"
+		width={216}
+		height={216}
+	/>
+);
+export default Creeper;

Frontend/src/app/components/github-star-count.tsx

@@ -0,0 +1,28 @@
+/**
+ * The github star count component.
+ *
+ * @returns the star count jsx
+ */
+const GitHubStarCount = async (): Promise<JSX.Element> => {
+	const stars: number = await getStarCount(); // Get the repo star count
+	return (
+		<code className="px-1 rounded-md bg-minecraft-green-3/80">{stars}</code>
+	);
+};
+
+/**
+ * Get the amount of stars
+ * the repository has.
+ *
+ * @returns the star count
+ */
+const getStarCount = async (): Promise<number> => {
+	const response: Response = await fetch(
+		"https://api.github.com/repos/Rainnny7/RESTfulMC",
+		{ next: { revalidate: 300 } } // Revalidate every 5 minutes
+	);
+	const json: any = await response.json(); // Get the JSON response
+	return json.stargazers_count; // Return the stars
+};
+
+export default GitHubStarCount;

Frontend/src/app/components/landing/featured-content.tsx

@@ -0,0 +1,50 @@
+import config from "@/config";
+import { minecrafter } from "@/font/fonts";
+import { cn } from "@/lib/utils";
+import { FeaturedItemProps } from "@/types/config";
+import Link from "next/link";
+
+/**
+ * The featured content component.
+ *
+ * @returns the featured content jsx
+ */
+const FeaturedContent = (): JSX.Element => (
+	<div className="-translate-y-14 flex justify-center items-center">
+		<div className="max-w-2xl flex flex-wrap justify-center gap-5">
+			{config.featuredItems.map((item, index) => (
+				<FeaturedItem key={index} {...item} />
+			))}
+		</div>
+	</div>
+);
+
+/**
+ * A featured item component.
+ *
+ * @param props the item props
+ * @returns the item jsx
+ */
+const FeaturedItem = ({
+	name,
+	description,
+	image,
+	href,
+}: FeaturedItemProps): JSX.Element => (
+	<Link
+		className="pt-28 w-[19rem] h-80 flex flex-col gap-1 items-center bg-center bg-cover bg-no-repeat rounded-3xl text-center backdrop-blur-md hover:scale-[1.01] transition-all transform-gpu"
+		href={href}
+		style={{
+			backgroundImage: `url(${image})`,
+		}}
+	>
+		<h1
+			className={cn("text-3xl font-semibold text-white", minecrafter.className)}
+		>
+			{name}
+		</h1>
+		<h2 className="text-md max-w-[15rem]">{description}</h2>
+	</Link>
+);
+
+export default FeaturedContent;

Frontend/src/app/components/landing/hero.tsx

@@ -0,0 +1,34 @@
+import MinecraftButton from "@/components/minecraft-button";
+import config from "@/config";
+import { minecrafter } from "@/font/fonts";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+/**
+ * The hero content.
+ *
+ * @returns the hero jsx
+ */
+const Hero = (): JSX.Element => (
+	<div className="h-[70vh] flex flex-col gap-8 justify-center items-center">
+		<div className="flex flex-col gap-4 items-center text-center">
+			{/* Title */}
+			<h1
+				className={cn("text-5xl text-minecraft-green-3", minecrafter.className)}
+			>
+				{config.siteName}
+			</h1>
+
+			{/* Subtitle */}
+			<h2 className="text-xl">{config.metadata.description}</h2>
+		</div>
+
+		{/* Links */}
+		<div className="flex gap-10">
+			<MinecraftButton className="w-44 h-12">
+				<Link href="/docs">Get Started</Link>
+			</MinecraftButton>
+		</div>
+	</div>
+);
+export default Hero;

Frontend/src/app/components/minecraft-button.tsx

@@ -0,0 +1,48 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+/**
+ * Props for this button.
+ */
+type MinecraftButtonProps = {
+	/**
+	 * The class name to apply to this button.
+	 */
+	className?: string;
+
+	/**
+	 * The children of this button.
+	 */
+	children: React.ReactNode;
+};
+
+/**
+ * A Minecraft styled button.
+ *
+ * @returns the button jsx
+ */
+const MinecraftButton = ({
+	className,
+	children,
+	...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> &
+	MinecraftButtonProps): JSX.Element => (
+	<Button
+		className={cn(
+			"before:absolute before:-inset-x-5 before:rotate-90 before:w-9 before:h-1 before:bg-minecraft-green-1", // Left Green Bar
+			"after:absolute after:right-[-1.24rem] after:rotate-90 after:w-9 after:h-1 after:bg-minecraft-green-1", // Right Green Bar
+			"relative h-11 px-5 bg-minecraft-green-2 hover:opacity-85 hover:bg-minecraft-green-2 rounded-none tracking-wide font-semibold uppercase transition-all transform-gpu", // Styling
+			className
+		)}
+		variant="ghost"
+		style={{
+			// Above and below the button shadow
+			boxShadow:
+				"inset 0 -4px 0 hsl(var(--minecraft-green-1)), inset 0 4px 0 hsl(var(--minecraft-green-3))",
+		}}
+		{...props}
+	>
+		{children}
+	</Button>
+);
+export default MinecraftButton;

Frontend/src/app/components/navbar.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import GitHubStarCount from "@/components/github-star-count";
+import MinecraftButton from "@/components/minecraft-button";
+import { Skeleton } from "@/components/ui/skeleton";
+import config from "@/config";
+import { minecrafter } from "@/font/fonts";
+import { cn } from "@/lib/utils";
+import { StarIcon } from "@heroicons/react/24/outline";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Suspense } from "react";
+
+/**
+ * The navbar for the site.
+ *
+ * @returns the navbar jsx
+ */
+const Navbar = (): JSX.Element => {
+	const path: string = usePathname(); // Get the current path
+	return (
+		<nav className="fixed inset-x-0 flex h-16 px-12 justify-center sm:justify-between items-center bg-navbar-background z-50">
+			{/* Left */}
+			<div className="flex gap-7 lg:gap-12 items-center transition-all transform-gpu">
+				{/* App Branding */}
+				<Link
+					className={cn(
+						"text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu",
+						minecrafter.className
+					)}
+					href="/"
+				>
+					{/* Small Screens */}
+					<Image
+						className="hidden sm:flex lg:hidden"
+						src="/media/logo.webp"
+						alt="Site Logo"
+						width={42}
+						height={42}
+					/>
+
+					{/* Large Screens */}
+					<span className="hidden lg:flex">{config.siteName}</span>
+				</Link>
+
+				{/* Links */}
+				<div className="flex gap-7">
+					{Object.entries(config.navbarLinks).map((link, index) => {
+						const url: string = link[1]; // The href of the link
+						let active: boolean = path.startsWith(url); // Is this the active link?
+						return (
+							<Link
+								key={index}
+								className={cn(
+									"font-semibold uppercase hover:text-minecraft-green-4 transition-all transform-gpu",
+									active && "text-minecraft-green-4"
+								)}
+								href={url}
+							>
+								{link[0]}
+							</Link>
+						);
+					})}
+				</div>
+			</div>
+
+			{/* Social Buttons */}
+			<div className="hidden md:flex">
+				{/* Star on Github <3 */}
+				<MinecraftButton className="group/star">
+					<Link
+						className="flex gap-1.5 items-center"
+						href="https://github.com/Rainnny7/RESTfulMC"
+						rel="noopener noreferrer"
+						target="_blank"
+					>
+						{/* Star Count */}
+						<Suspense fallback={<Skeleton className="w-4 h-5 rounded-md" />}>
+							<GitHubStarCount />
+						</Suspense>
+
+						<StarIcon
+							className="group-hover/star:text-orange-400 delay-0 transition-all transform-gpu"
+							width={22}
+							height={22}
+						/>
+						<span>Star on GitHub</span>
+					</Link>
+				</MinecraftButton>
+			</div>
+		</nav>
+	);
+};
+export default Navbar;

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

@@ -0,0 +1,36 @@
+import MinecraftButton from "@/components/minecraft-button";
+import { Input } from "@/components/ui/input";
+
+import { redirect } from "next/navigation";
+
+/**
+ * A component for searching for a player.
+ *
+ * @param query the query to search for
+ * @returns the search component jsx
+ */
+const PlayerSearch = ({
+	query,
+}: {
+	query: string | undefined;
+}): JSX.Element => {
+	const handleRedirect = async (form: FormData) => {
+		"use server";
+		redirect(`/player/${form.get("query")}`);
+	};
+	return (
+		<form
+			className="flex flex-col gap-7 justify-center items-center"
+			action={handleRedirect}
+		>
+			<Input
+				name="query"
+				placeholder="Username / UUID"
+				defaultValue={query}
+				maxLength={36}
+			/>
+			<MinecraftButton type="submit">Search</MinecraftButton>
+		</form>
+	);
+};
+export default PlayerSearch;

Frontend/src/app/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/app/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

Frontend/src/app/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/app/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

Frontend/src/app/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/app/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

Frontend/src/app/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/app/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

Frontend/src/app/config.ts

@@ -0,0 +1,7 @@
+import { Config } from "@/types/config";
+
+/**
+ * The configuration for this app.
+ */
+const config: Config = require("@/configJson");
+export default config;

Frontend/src/app/font/fonts.ts

@@ -0,0 +1,15 @@
+import { NextFont } from "next/dist/compiled/@next/font";
+import { Noto_Sans } from "next/font/google";
+import localFont from "next/font/local";
+
+/**
+ * The default font to use for the site.
+ */
+export const notoSans: NextFont = Noto_Sans({ subsets: ["latin"] });
+
+/**
+ * The Minecraft font to use for the site.
+ */
+export const minecrafter: NextFont = localFont({
+	src: "../font/Minecrafter.ttf",
+});

Frontend/src/app/globals.css

@@ -1,3 +1,78 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 30 5% 9%;
+		--foreground: 0 0% 98%;
+
+		--card: 240 10% 3.9%;
+		--card-foreground: 0 0% 98%;
+
+		--popover: 240 10% 3.9%;
+		--popover-foreground: 0 0% 98%;
+
+		--primary: 0 0% 98%;
+		--primary-foreground: 240 5.9% 10%;
+
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
+
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
+
+		--accent: 240 3.7% 15.9%;
+		--accent-foreground: 0 0% 98%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+		--ring: 240 4.9% 83.9%;
+
+		--radius: 0.5rem;
+
+		/* Navbar */
+		--navbar-background: 0 0% 7%;
+
+		/* Minecraft Colors (Dark -> Light) */
+		--minecraft-green-1: 108 56% 25%;
+		--minecraft-green-2: 107 55% 34%;
+		--minecraft-green-3: 104 51% 43%;
+		--minecraft-green-4: 103 50% 53%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+
+		/* Scrollbar (Firefox) */
+		scrollbar-color: hsl(var(--minecraft-green-2)) hsl(var(--background));
+	}
+
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+/* Scrollbar (Chrome & Safari) */
+@layer base {
+	::-webkit-scrollbar {
+		@apply w-1.5;
+	}
+
+	::-webkit-scrollbar-track {
+		@apply bg-inherit;
+	}
+
+	::-webkit-scrollbar-thumb {
+		@apply bg-minecraft-green-2 rounded-3xl;
+	}
+
+	::-webkit-scrollbar-thumb:hover {
+		@apply bg-opacity-80;
+	}
+}

Frontend/src/app/layout.tsx

@@ -1,23 +1,51 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import Navbar from "@/components/navbar";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import config from "@/config";
+import { notoSans } from "@/font/fonts";
+import { cn } from "@/lib/utils";
+import ThemeProvider from "@/provider/theme-provider";
+import type { Metadata, Viewport } from "next";
+import PlausibleProvider from "next-plausible";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+/**
+ * Site metadata & viewport.
+ */
+export const metadata: Metadata = config.metadata;
+export const viewport: Viewport = config.viewport;
 
-export const metadata: Metadata = {
-	title: "RESTfulMC",
-	description:
-		"A simple, yet useful RESTful API for Minecraft utilizing Springboot.",
-};
-
-export default function RootLayout({
+/**
+ * The root layout for this site.
+ *
+ * @param children the children of this layout
+ * @returns the layout jsx
+ */
+const RootLayout = ({
 	children,
 }: Readonly<{
 	children: React.ReactNode;
-}>) {
+}>): JSX.Element => {
+	const analyticsDomain: string | undefined = config.analyticsDomain;
 	return (
-		<html lang="en">
-			<body className={inter.className}>{children}</body>
+		<html lang="en" className={cn("scroll-smooth", notoSans.className)}>
+			<head>
+				{analyticsDomain && (
+					<PlausibleProvider
+						domain={analyticsDomain}
+						customDomain="https://analytics.rainnny.club"
+						selfHosted
+					/>
+				)}
+			</head>
+			<body className="relative min-h-screen">
+				<ThemeProvider attribute="class" defaultTheme="dark">
+					<TooltipProvider>
+						<Navbar />
+						{children}
+					</TooltipProvider>
+				</ThemeProvider>
+			</body>
 		</html>
 	);
-}
+};
+export default RootLayout;

Frontend/src/app/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

Frontend/src/app/not-found.tsx

@@ -0,0 +1,28 @@
+import Creeper from "@/components/creeper";
+import { minecrafter } from "@/font/fonts";
+import { cn } from "@/lib/utils";
+
+/**
+ * The 404 page.
+ *
+ * @returns the page jsx
+ */
+const NotFoundPage = (): JSX.Element => (
+	<main className="h-[84vh] flex flex-col gap-3 justify-center items-center pointer-events-none">
+		{/* Creeper */}
+		<Creeper />
+
+		{/* Header */}
+		<h1
+			className={cn("text-6xl text-minecraft-green-3", minecrafter.className)}
+		>
+			We&apos;re Sssssorry
+		</h1>
+
+		{/* Error */}
+		<h2 className="text-2xl">
+			The page you were looking for could not be found.
+		</h2>
+	</main>
+);
+export default NotFoundPage;

Frontend/src/app/provider/theme-provider.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+/**
+ * The provider of themes!!
+ */
+const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => (
+	<NextThemesProvider {...props}>{children}</NextThemesProvider>
+);
+export default ThemeProvider;

Frontend/src/app/types/config.d.ts

@@ -0,0 +1,73 @@
+import { Metadata, Viewport } from "next";
+
+/**
+ * Options for configuration.
+ */
+interface Config {
+	/**
+	 * The name of this site.
+	 */
+	siteName: string;
+
+	/**
+	 * The URL of this site.
+	 */
+	siteUrl: string;
+
+	/**
+	 * The optional domain to track analytics on.
+	 */
+	analyticsDomain: string | undefined;
+
+	/**
+	 * The metadata of this site.
+	 */
+	metadata: Metadata;
+
+	/**
+	 * The viewport of this site.
+	 */
+	viewport: Viewport;
+
+	/**
+	 * Links to display on the navbar.
+	 * <p>
+	 * The key is the name of the
+	 * link, and the value is the URL.
+	 * </p>
+	 */
+	navbarLinks: {
+		[name: string]: string;
+	};
+
+	/**
+	 * Featured items for the landing page.
+	 */
+	featuredItems: FeaturedItemProps[];
+}
+
+/**
+ * Props for a featured item
+ * on the landing page.
+ */
+type FeaturedItemProps = {
+	/**
+	 * The name of this item.
+	 */
+	name: string;
+
+	/**
+	 * The description of this item.
+	 */
+	description: string;
+
+	/**
+	 * The image for this item.
+	 */
+	image: string;
+
+	/**
+	 * The href link for this item.
+	 */
+	href: string;
+};

Frontend/src/app/types/page.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Props for a page.
+ */
+export type PageProps = {
+	params: { slug: string };
+	searchParams: { [key: string]: string | string[] | undefined };
+};

Frontend/tailwind.config.ts

@@ -1,16 +1,86 @@
 import type { Config } from "tailwindcss";
+const { fontFamily, screens } = require("tailwindcss/defaultTheme");
 
-const config: Config = {
-	content: ["./src/app/**/*.{js,ts,jsx,tsx,mdx}"],
+const config = {
+	darkMode: ["class"],
+	content: ["./src/app/**/*.{ts,tsx}"],
 	theme: {
-		extend: {
-			backgroundImage: {
-				"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-				"gradient-conic":
-					"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+		container: {
+			center: true,
+			padding: "2rem",
+			screens: {
+				"2xl": "1400px",
 			},
 		},
+		extend: {
+			colors: {
+				border: "hsl(var(--border))",
+				input: "hsl(var(--input))",
+				ring: "hsl(var(--ring))",
+				background: "hsl(var(--background))",
+				foreground: "hsl(var(--foreground))",
+				primary: {
+					DEFAULT: "hsl(var(--primary))",
+					foreground: "hsl(var(--primary-foreground))",
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary))",
+					foreground: "hsl(var(--secondary-foreground))",
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive))",
+					foreground: "hsl(var(--destructive-foreground))",
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted))",
+					foreground: "hsl(var(--muted-foreground))",
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent))",
+					foreground: "hsl(var(--accent-foreground))",
+				},
+				popover: {
+					DEFAULT: "hsl(var(--popover))",
+					foreground: "hsl(var(--popover-foreground))",
+				},
+				card: {
+					DEFAULT: "hsl(var(--card))",
+					foreground: "hsl(var(--card-foreground))",
+				},
+
+				// Custom Colors
+				"navbar-background": "hsl(var(--navbar-background))",
+				"minecraft-green-1": "hsl(var(--minecraft-green-1))",
+				"minecraft-green-2": "hsl(var(--minecraft-green-2))",
+				"minecraft-green-3": "hsl(var(--minecraft-green-3))",
+				"minecraft-green-4": "hsl(var(--minecraft-green-4))",
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)",
+			},
+			keyframes: {
+				"accordion-down": {
+					from: { height: "0" },
+					to: { height: "var(--radix-accordion-content-height)" },
+				},
+				"accordion-up": {
+					from: { height: "var(--radix-accordion-content-height)" },
+					to: { height: "0" },
+				},
+			},
+			animation: {
+				"accordion-down": "accordion-down 0.2s ease-out",
+				"accordion-up": "accordion-up 0.2s ease-out",
+			},
+		},
+		screens: {
+			xs: "475px",
+			...screens,
+		},
 	},
-	plugins: [],
-};
+	plugins: [require("tailwindcss-animate")],
+} satisfies Config;
+
 export default config;

Frontend/tsconfig.json

@@ -19,7 +19,13 @@
 		],
 		"paths": {
 			"@/*": ["./src/*"],
-			"@/lib/*": ["./src/lib/*"]
+			"@/config": ["./src/app/config.ts"],
+			"@/components/*": ["./src/app/components/*"],
+			"@/provider/*": ["./src/app/provider/*"],
+			"@/font/*": ["./src/app/font/*"],
+			"@/types/*": ["./src/app/types/*"],
+			"@/lib/*": ["./src/app/lib/*"],
+			"@/configJson": ["./config.json"]
 		}
 	},
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],

JS-SDK/.npmrc

@@ -1 +0,0 @@
-//registry.npmjs.org/:_authToken=${NPM_TOKEN}

JS-SDK/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "restfulmc-lib",
-	"version": "1.0.7",
+	"version": "1.0.9",
 	"author": "Braydon (Rainnny) <braydonrainnny@gmail.com>",
 	"description": "A simple, yet useful RESTful API for Minecraft utilizing Springboot.",
 	"keywords": [

JS-SDK/src/lib/web-request.ts

@@ -30,9 +30,7 @@ export class WebRequest {
 	 */
 	execute = <T>(): Promise<T> =>
 		new Promise(async (resolve, reject) => {
-			const response: Response = await fetch(
-				`${API_ENDPOINT}/${this.endpoint}`
-			); // Send the request
+			const response: Response = await fetch(`${API_ENDPOINT}${this.endpoint}`); // Send the request
 			const contentType: string | null = response.headers.get("Content-Type"); // Get the response content type
 
 			// Parse as Json