Update dependency tailwindcss to v3.4.14

Reviewed-on: #68

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.fleet/settings.json

@@ -1,4 +0,0 @@
-{
-  "toolchains": [],
-  "nodejs.editor.formatOnSave.prettier.mode": "Enabled"
-}

.gitignore

@@ -37,3 +37,19 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Sentry Config File
+.sentryclirc
+
+# Sentry Config File
+.sentryclirc
+
+# Environment variables
+.env
+
+# Sitemap & Robots
+/public/sitemap*
+/public/robots.txt
+
+# Sentry Config File
+.env.sentry-build-plugin

Dockerfile

@@ -22,11 +22,18 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-# Next.js collects completely anonymous telemetry data about general usage.
-# Learn more here: https://nextjs.org/telemetry
-# Uncomment the following line in case you want to disable telemetry during the build.
-# ENV NEXT_TELEMETRY_DISABLED 1
+# Get the git commit hash
+ARG GIT_REV
+ENV GIT_REV ${GIT_REV}
 
+# Sentry Auth Token
+ARG SENTRY_AUTH_TOKEN
+ENV SENTRY_AUTH_TOKEN ${SENTRY_AUTH_TOKEN}
+
+# Disable telemetry during build
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Build the frontend
 RUN \
   if [ -f yarn.lock ]; then yarn run build; \
   elif [ -f package-lock.json ]; then npm run build; \
@@ -39,12 +46,17 @@ FROM base AS runner
 WORKDIR /app
 
 ENV NODE_ENV production
-# Uncomment the following line in case you want to disable telemetry during runtime.
-# ENV NEXT_TELEMETRY_DISABLED 1
+
+# Disable telemetry during runtime
+ENV NEXT_TELEMETRY_DISABLED 1
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
+# Copy the public folder
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/documentation ./documentation
+
 # Set the correct permission for prerender cache
 RUN mkdir .next
 RUN chown nextjs:nodejs .next

README.md

@@ -1,36 +1,3 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Minecraft Utilities - Frontend
 
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+See [The Website](https://mcutils.xyz) or [Minecraft Utilities Documentation](https://mcutils.xyz/docs) for more information.

config.json

@@ -1,6 +1,6 @@
 {
-  "siteName": "Minecraft Utilities",
-  "siteDescription": "Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.",
-  "siteUrl": "https://mcutils.xyz/",
-  "apiUrl": "https://api.mcutils.xyz"
+  "name": "Minecraft Utilities",
+  "description": "Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.",
+  "publicUrl": "https://mcutils.xyz/",
+  "apiEndpoint": "https://api.mcutils.xyz"
 }

documentation/home.md

@@ -0,0 +1,34 @@
+---
+title: Home
+summary: Welcome to the Minecraft Utilities documentation!
+---
+
+# Getting Started
+
+Welcome to the Minecraft Utilities documentation! You can find information on how to use the various features of the API.
+
+## Features
+
+See below for a list of features that are currently available in the API.
+
+| Feature                                                  | Description                            |
+|----------------------------------------------------------|----------------------------------------|
+| [Player Lookup](/docs/player/player-lookup)              | Get a player's information             |
+| [Player Username To Uuid](/docs/player/username-to-uuid) | Get a player's skin parts              |
+| [Player Skin Parts](/docs/player/skin-parts)             | Get a player's skin parts              |
+| [Server Lookup](/docs/server/server-lookup)              | Get a server's information             |
+| [Server Icon](/docs/server/favicon)                      | Get a server's icon                    |
+| [Server Preview](/docs/server/preview)                   | View the server as if you were in-game |
+| [Mojang Status](/docs/mojang/endpoint-status)            | Get the status of Mojang's services    |
+
+
+## Libraries
+
+We offer a few different libraries for different languages to help you get started with the Minecraft Utilities plugin.
+
+- [Java](/docs/libraries/java)
+- [JavaScript](/docs/libraries/javascript)
+
+## API
+
+You can view our Postman collection [here](https://www.postman.com/imfascinated/workspace/minecraft-utilities) to see all the available endpoints and how to use them.

documentation/libraries/java.md

@@ -0,0 +1,42 @@
+---
+title: Java Library
+summary: The Java library for Minecraft Utilities is a simple way to interact with the API using Java!
+---
+
+# Java Library
+
+This is the Java library for Minecraft Utilities.
+
+## Installation
+
+To use the Java library, you can add the following to your `pom.xml` file:
+
+```xml
+<repositories>
+    <repository>
+        <id>fascinated-repo-public</id>
+        <name>Fascinated's Repository</name>
+        <url>https://repo.fascinated.cc/public</url>
+    </repository>
+</repositories>
+
+<dependencies>
+    <dependency>
+        <groupId>xyz.mcutils</groupId>
+        <artifactId>mcutils-java-library</artifactId>
+        <version>1.1.1</version>
+    </dependency>
+</dependencies>
+```
+
+## Usage
+
+This is a simple example of how to use the Java library to get a player's information.
+
+```java
+public class Main {
+    public static void main(String[] args) {
+        System.out.println(McUtilsAPI.getPlayer("Notch"));
+    }
+}
+```

documentation/libraries/javascript.md

@@ -0,0 +1,28 @@
+---
+title: Javascript Library
+summary: The Javascript library for Minecraft Utilities is a simple way to interact with the API using Javascript!
+---
+
+# Javascript Library
+
+This is the Javascript library for Minecraft Utilities.
+
+## Installation
+
+To use the Javascript library, you can run the following command:
+
+```bash
+npm install mcutils-library
+```
+
+## Usage
+
+This is a simple example of how to use the Javascript library to get a player's information.
+
+```javascript
+import { getPlayer, CachedPlayer } from "mcutils-library";
+
+const cachedPlayer: CachedPlayer = await getPlayer(playerId);
+
+console.log(player);
+```

documentation/mojang/endpoint-status.md

@@ -0,0 +1,63 @@
+---
+title: Mojang Endpoint Status
+summary: Get the status of the Mojang APIs.
+---
+
+# Overview
+
+The Mojang endpoint status endpoint allows you to get the status of the Mojang APIs.
+
+## Endpoint
+
+```
+GET /mojang/status
+```
+
+## Example
+
+```bash
+curl -X GET "https://api.mcutils.xyz/mojang/status" -H "accept: application/json"
+```
+
+## Response
+
+```json
+{
+  "cache": {
+    "cached": false,
+    "cachedTime": -1
+  },
+  "endpoints": [
+    {
+      "name": "Minecraft Textures",
+      "hostname": "textures.minecraft.net",
+      "status": "ONLINE"
+    },
+    {
+      "name": "Minecraft Libraries",
+      "hostname": "libraries.minecraft.net",
+      "status": "ONLINE"
+    },
+    {
+      "name": "Minecraft Services",
+      "hostname": "api.minecraftservices.com",
+      "status": "ONLINE"
+    },
+    {
+      "name": "Mojang Assets",
+      "hostname": "assets.mojang.com",
+      "status": "ONLINE"
+    },
+    {
+      "name": "Mojang API",
+      "hostname": "api.mojang.com",
+      "status": "ONLINE"
+    },
+    {
+      "name": "Mojang Session Server",
+      "hostname": "sessionserver.mojang.com",
+      "status": "ONLINE"
+    }
+  ]
+}
+```

documentation/player/player-lookup.md

@@ -0,0 +1,68 @@
+---
+title: Player Lookup
+summary: Get information about a player.
+---
+
+# Overview
+
+The player lookup endpoint allows you to get information about a player. This includes their UUID, username, and any other information that is available.
+
+## Endpoint
+
+```
+GET /player/:query
+```
+
+## Parameters
+
+| Parameter | Description                                             | Required |
+|-----------|---------------------------------------------------------|----------|
+| query     | The username or uuid of the player you want to look up. | Yes      |
+
+## Example
+
+```bash
+curl -X GET "https://api.mcutils.xyz/player/imfascinated" -H "accept: application/json"
+```
+
+## Response
+
+```json
+{
+  "cache": {
+    "cached": false,
+    "cachedTime": -1
+  },
+  "uniqueId": "eeab5f8a-18dd-4d58-af78-2b3c4543da48",
+  "trimmedUniqueId": "eeab5f8a18dd4d58af782b3c4543da48",
+  "username": "ImFascinated",
+  "skin": {
+    "url": "http://textures.minecraft.net/texture/ba1e0c9e21983c06e45614642316cd7029a297bc246bc6d236a41388c3ff9a09",
+    "model": "SLIM",
+    "legacy": false,
+    "parts": {
+      "head": "https://api.mcutils.xyz/player/head/eeab5f8a-18dd-4d58-af78-2b3c4543da48",
+      "face": "https://api.mcutils.xyz/player/face/eeab5f8a-18dd-4d58-af78-2b3c4543da48",
+      "body": "https://api.mcutils.xyz/player/body/eeab5f8a-18dd-4d58-af78-2b3c4543da48"
+    }
+  },
+  "cape": {
+    "url": "http://textures.minecraft.net/texture/2340c0e03dd24a11b15a8b33c2a7e9e32abb2051b2481d0ba7defd635ca7a933"
+  },
+  "rawProperties": [
+    {
+      "name": "textures",
+      "value": "ewogICJ0aW1lc3RhbXAiIDogMTcxMzY3MDc4MTM0NSwKICAicHJvZmlsZUlkIiA6ICJlZWFiNWY4YTE4ZGQ0ZDU4YWY3ODJiM2M0NTQzZGE0OCIsCiAgInByb2ZpbGVOYW1lIiA6ICJJbUZhc2NpbmF0ZWQiLAogICJ0ZXh0dXJlcyIgOiB7CiAgICAiU0tJTiIgOiB7CiAgICAgICJ1cmwiIDogImh0dHA6Ly90ZXh0dXJlcy5taW5lY3JhZnQubmV0L3RleHR1cmUvYmExZTBjOWUyMTk4M2MwNmU0NTYxNDY0MjMxNmNkNzAyOWEyOTdiYzI0NmJjNmQyMzZhNDEzODhjM2ZmOWEwOSIsCiAgICAgICJtZXRhZGF0YSIgOiB7CiAgICAgICAgIm1vZGVsIiA6ICJzbGltIgogICAgICB9CiAgICB9LAogICAgIkNBUEUiIDogewogICAgICAidXJsIiA6ICJodHRwOi8vdGV4dHVyZXMubWluZWNyYWZ0Lm5ldC90ZXh0dXJlLzIzNDBjMGUwM2RkMjRhMTFiMTVhOGIzM2MyYTdlOWUzMmFiYjIwNTFiMjQ4MWQwYmE3ZGVmZDYzNWNhN2E5MzMiCiAgICB9CiAgfQp9",
+      "signed": false
+    }
+  ]
+}
+```
+
+## Errors
+
+| Status Code | Description                                   |
+|-------------|-----------------------------------------------|
+| 400         | The username is invalid.                      |
+| 404         | The player was not found.                     |
+| 429         | The Mojang API rate limit has been exhausted. |

documentation/player/skin-parts.md

@@ -0,0 +1,47 @@
+---
+title: Player Skin Parts
+summary: Get a specific part of a player's skin.
+---
+
+# Overview
+
+The player skin parts endpoint allows you to get a specific part of a player's skin.
+
+## Endpoint
+
+```
+GET /player/:part/:query
+```
+
+## Parts
+
+| Part | Description                     |
+|------|---------------------------------|
+| head | Get the player's isometric head |
+| face | Get the player's face           |
+| body | Get the player's body           |
+
+## Parameters
+
+| Parameter | Description                                             | Required |
+|-----------|---------------------------------------------------------|----------|
+| part      | The part of the skin you want to get.                   | Yes      |
+| query     | The username or uuid of the player you want to look up. | Yes      |
+
+## Example
+
+```bash
+curl -X GET "https://api.mcutils.xyz/player/head/imfascinated" -H "accept: image/png"
+```
+
+## Response
+
+![Skin Part](https://api.mcutils.xyz/player/head/eeab5f8a-18dd-4d58-af78-2b3c4543da48 "Player's Head")
+
+## Errors
+
+| Status Code | Description                                   |
+|-------------|-----------------------------------------------|
+| 400         | The username is invalid.                      |
+| 404         | The player was not found.                     |
+| 429         | The Mojang API rate limit has been exhausted. |

documentation/player/username-to-uuid.md

@@ -0,0 +1,46 @@
+---
+title: Player Username to UUID
+summary: Get a player's UUID from their username.
+---
+
+# Overview
+
+The player username to UUID endpoint allows you to get a player's UUID from their username.
+
+## Endpoint
+
+```
+GET /player/uuid/:query
+```
+
+## Parameters
+
+| Parameter | Description                                             | Required |
+|-----------|---------------------------------------------------------|----------|
+| query     | The username of the player you want to look up.         | Yes      |
+
+## Example
+
+```bash
+curl -X GET "https://api.mcutils.xyz/player/uuid/imfascinated" -H "accept: application/json"
+```
+
+## Response
+
+```json
+{
+  "cache": {
+    "cached": false,
+    "cachedTime": -1
+  },
+  "uniqueId": "eeab5f8a-18dd-4d58-af78-2b3c4543da48",
+  "username": "ImFascinated"
+}
+```
+
+## Errors
+
+| Status Code | Description                                   |
+|-------------|-----------------------------------------------|
+| 400         | The username is invalid.                      |
+| 429         | The Mojang API rate limit has been exhausted. |

documentation/server/blocked.md

@@ -0,0 +1,45 @@
+---
+title: Server Blocked Status
+summary: Get the Mojang blocked status of a Minecraft server.
+---
+
+# Overview
+
+The server blocked status endpoint allows you to get the Mojang blocked status of a Minecraft server.
+
+## Endpoint
+
+```
+GET /server/blocked/:query
+```
+
+## Platforms
+
+This endpoint is only available for Java servers.
+
+## Parameters
+
+| Parameter | Description                                                   | Required |
+|-----------|---------------------------------------------------------------|----------|
+| query     | The IP address or hostname of the server you want to look up. | Yes      |
+
+## Example
+
+```bash
+curl -X GET "https://api.mcutils.xyz/server/blocked/play.hypixel.net"
+```
+
+## Response
+
+```json
+{
+  "blocked": false
+}
+```
+
+## Errors
+
+| Status Code | Description                                   |
+|-------------|-----------------------------------------------|
+| 400         | The server was not found.                     |
+| 429         | The Mojang API rate limit has been exhausted. |

documentation/server/favicon.md

@@ -0,0 +1,41 @@
+---
+title: Server Favicon
+summary: Get the favicon of a Minecraft server.
+---
+
+# Overview
+
+The server favicon endpoint allows you to get the favicon of a Minecraft server.
+
+## Endpoint
+
+```
+GET /server/icon/:query
+```
+
+## Platforms
+
+This endpoint is only available for Java servers.
+
+## Parameters
+
+| Parameter | Description                                                               | Required |
+|-----------|---------------------------------------------------------------------------|----------|
+| query     | The IP address or hostname of the server you want to get the favicon for. | Yes      |
+
+## Example
+
+```bash
+curl -X GET "https://api.mcutils.xyz/server/icon/hypixel.net" -H "accept: image/png"
+```
+
+## Response
+
+![Server Icon](https://api.mcutils.xyz/server/icon/play.hypixel.net)
+
+## Errors
+
+| Status Code | Description                                   |
+|-------------|-----------------------------------------------|
+| 400         | The server was not found.                     |
+| 429         | The Mojang API rate limit has been exhausted. |

documentation/server/preview.md

@@ -0,0 +1,45 @@
+---
+title: Server Preview
+summary: Get the server list preview of a Minecraft server.
+---
+
+# Overview
+
+The server preview endpoint allows you to get the server list preview of a Minecraft server.
+
+## Endpoint
+
+```
+GET /server/:platform/preview/:query
+```
+
+## Platforms
+
+| Platform | Description     |
+|----------|-----------------|
+| bedrock  | Bedrock Edition |
+| java     | Java Edition    |
+
+## Parameters
+
+| Parameter | Description                                                               | Required |
+|-----------|---------------------------------------------------------------------------|----------|
+| platform  | The platform of the server you want to get the preview for.               | Yes      |
+| query     | The IP address or hostname of the server you want to get the preview for. | Yes      |
+
+## Example
+
+```bash
+curl -X GET "https://api.mcutils.xyz/server/java/preview/hypixel.net" -H "accept: image/png"
+```
+
+## Response
+
+![Server Icon](https://api.mcutils.xyz/server/java/preview/play.hypixel.net)
+
+## Errors
+
+| Status Code | Description                                   |
+|-------------|-----------------------------------------------|
+| 400         | The server was not found.                     |
+| 429         | The Mojang API rate limit has been exhausted. |

next-sitemap.config.js

@@ -0,0 +1,5 @@
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: process.env.SITE_URL || "https://mcutils.xyz",
+  generateRobotsTxt: true,
+};

next.config.mjs

@@ -1,3 +1,17 @@
+import {withSentryConfig} from "@sentry/nextjs";
+import nextBuildId from "next-build-id";
+import path from "path";
+import { fileURLToPath } from "url";
+
+/**
+ * The current git commit hash.
+ *
+ * @type {string|string} The current git commit hash.
+ */
+const buildId = (
+  process.env.GIT_REV || nextBuildId.sync({ dir: path.dirname(fileURLToPath(import.meta.url)) })
+).substring(0, 7);
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "standalone",
@@ -15,6 +29,46 @@ const nextConfig = {
       },
     ],
   },
+  env: {
+    NEXT_PUBLIC_BUILD_ID: buildId,
+  },
+  experimental: {
+    mdxRs: true,
+  },
 };
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+// For all available options, see:
+// https://github.com/getsentry/sentry-webpack-plugin#options
+
+org: "minecraft-utilities",
+project: "frontend",
+sentryUrl: "https://glitchtip.fascinated.cc/",
+
+// Only print logs for uploading source maps in CI
+silent: !process.env.CI,
+
+// For all available options, see:
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+// Upload a larger set of source maps for prettier stack traces (increases build time)
+widenClientFileUpload: true,
+
+// Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+// This can increase your server load as well as your hosting bill.
+// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+// side errors will fail.
+// tunnelRoute: "/monitoring",
+
+// Hides source maps from generated client bundles
+hideSourceMaps: true,
+
+// Automatically tree-shake Sentry logger statements to reduce bundle size
+disableLogger: true,
+
+// Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+// See the following for more information:
+// https://docs.sentry.io/product/crons/
+// https://vercel.com/docs/cron-jobs
+automaticVercelMonitors: true,
+});

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev --turbo",
     "build": "next build",
+    "postbuild": "next-sitemap",
     "start": "next start",
     "lint": "next lint"
   },
@@ -12,37 +13,58 @@
     "@eslint/eslintrc": "^3.0.2",
     "@heroicons/react": "^2.1.3",
     "@hookform/resolvers": "^3.3.4",
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "@next/mdx": "^14.2.2",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@sentry/nextjs": "^8.20.0",
+    "@types/mdx": "^2.0.13",
     "class-variance-authority": "^0.7.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.0",
-    "lucide-react": "^0.372.0",
-    "mcutils-library": "^1.2.2",
+    "cmdk": "^1.0.0",
+    "fuse.js": "^7.0.0",
+    "lucide-react": "^0.451.0",
+    "mcutils-library": "^1.3.1",
     "moment": "^2.30.1",
-    "next": "14.2.2",
+    "next": "14.2.5",
+    "next-build-id": "^3.0.0",
+    "next-sitemap": "^4.2.3",
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-countup": "^6.5.3",
     "react-dom": "^18",
-    "react-spinners": "^0.13.8",
+    "react-spinners": "^0.14.0",
     "react-syntax-highlighter": "^15.5.0",
-    "react-use-websocket": "4.8.1",
+    "react-use-websocket": "4.9.0",
+    "read-file": "^0.2.0",
+    "remark-gfm": "^4.0.0",
+    "remote-mdx": "^0.0.8",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7"
   },
+  "pnpm": {
+    "overrides": {
+      "remark-mdx": "3.0.1",
+      "unified": "11.0.5",
+      "remark-parse": "11.0.0",
+      "mdast-util-frontmatter": "2.0.1"
+    }
+  },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/react-syntax-highlighter": "^15.5.11",
-    "eslint-config-next": "14.2.2",
+    "eslint-config-next": "14.2.5",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"

sentry.client.config.ts

@@ -0,0 +1,30 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://25aaa031240f4d659649d28e0a3fb0cb@glitchtip.fascinated.cc/1",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  replaysOnErrorSampleRate: 1.0,
+
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+  integrations: [
+    Sentry.replayIntegration({
+      // Additional Replay configuration goes in here, for example:
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
+});

sentry.edge.config.ts

@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://25aaa031240f4d659649d28e0a3fb0cb@glitchtip.fascinated.cc/1",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

sentry.server.config.ts

@@ -0,0 +1,19 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://25aaa031240f4d659649d28e0a3fb0cb@glitchtip.fascinated.cc/1",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  // Uncomment the line below to enable Spotlight (https://spotlightjs.com)
+  // spotlight: process.env.NODE_ENV === 'development',
+  
+});

src/app/(pages)/api/docs/search/route.ts

@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from "next/server";
+import { searchDocs } from "@/app/common/documentation";
+
+export async function GET(request: NextRequest) {
+  // The query to search for
+  const query: string | null = request.nextUrl.searchParams.get("query");
+
+  // No query provided
+  if (!query) {
+    return new NextResponse(JSON.stringify({ error: "No query provided" }), { status: 400 });
+  }
+
+  // Don't allow queries less than 3 characters
+  if (query.length < 3) {
+    return new NextResponse(JSON.stringify({ error: "Query must be at least 3 characters" }), { status: 400 });
+  }
+
+  // Return the search results
+  return new NextResponse(JSON.stringify(searchDocs(query)));
+}

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

@@ -0,0 +1,75 @@
+import { CustomMDX } from "@/app/components/mdx-components";
+import { Metadata } from "next";
+import { generateEmbed } from "@/app/common/embed";
+import { Title } from "@/app/components/title";
+import { DocsContentMetadata, getDocContent, getDocsContent } from "@/app/common/documentation";
+import { notFound } from "next/navigation";
+import { GithubLink } from "@/app/components/docs/github-link";
+import { DocsBreadcrumb } from "@/app/components/docs/breadcrumb";
+
+type DocumentationPageParams = {
+  params: {
+    /**
+     * The slug for the documentation page.
+     */
+    slug?: string[];
+  };
+};
+
+export async function generateStaticParams() {
+  let documentationPages: DocsContentMetadata[] = getDocsContent();
+
+  return documentationPages.map(page => ({
+    slug: [page.slug],
+  }));
+}
+
+export async function generateMetadata({ params: { slug } }: DocumentationPageParams): Promise<Metadata> {
+  const page: DocsContentMetadata | undefined = getDocContent(slug);
+
+  // Fallback to page not found
+  if (!page) {
+    return generateEmbed({
+      title: "Page not found",
+      description: "The documentation page was not found",
+    });
+  }
+
+  return generateEmbed({
+    title: `${page.title} - Documentation`,
+    description: `${page.summary}\n\nClick to view this page`,
+  });
+}
+
+export default function Page({ params: { slug } }: DocumentationPageParams) {
+  const page: DocsContentMetadata | undefined = getDocContent(slug);
+
+  // Page was not found, show an error page
+  if (!page) {
+    return notFound();
+  }
+
+  return (
+    <div className="w-full h-full px-4 flex flex-col gap-2">
+      <div className="flex justify-between items-center">
+        {/* The breadcrumb for the documentation page */}
+        <DocsBreadcrumb page={page} />
+
+        {/* The Git link for the documentation page */}
+        <div className="flex flex-row gap-2 items-center">
+          <GithubLink page={page} />
+        </div>
+      </div>
+
+      {/* The documentation page title and description */}
+      <div className="text-center mb-4">
+        <Title title={page.title} subtitle={page.summary} />
+      </div>
+
+      {/* The content of the documentation page */}
+      <div className="text-left w-full pb-[2rem]">
+        <CustomMDX source={page.content} />
+      </div>
+    </div>
+  );
+}

src/app/(pages)/mojang/status/page.tsx

@@ -1,18 +1,18 @@
+import { Colors } from "@/app/common/colors";
+import { generateEmbed } from "@/app/common/embed";
+import { capitalizeFirstLetter } from "@/app/common/string-utils";
+import { cn } from "@/app/common/utils";
 import { Card } from "@/app/components/card";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/app/components/ui/table";
-import { generateEmbed } from "@/common/embed";
-import { capitalizeFirstLetter } from "@/common/string-utils";
-import { formatTime } from "@/common/time-utils";
-import { cn } from "@/common/utils";
-import { getMojangEndpointStatus } from "mcutils-library";
-import { Metadata } from "next";
+import { Title } from "@/app/components/title";
+import { CachedEndpointStatus, getMojangEndpointStatus, Status } from "mcutils-library";
+import { Metadata, Viewport } from "next";
 import Link from "next/link";
 import { ReactElement } from "react";
 
 /**
  * Force the page to be dynamic, so it will be regenerated on every request
  */
-export const dynamic = "force-dynamic";
+export const revalidate = 0;
 
 /**
  * Gets the color of the status
@@ -43,15 +43,31 @@ function formatStatus(status: any): string {
   return capitalizeFirstLetter(status.toLowerCase());
 }
 
+export async function generateViewport(): Promise<Viewport> {
+  const { endpoints } = await getMojangEndpointStatus();
+
+  let warning = false;
+  for (const endpoint of endpoints) {
+    if (endpoint.status != Status.ONLINE) {
+      warning = true;
+      break;
+    }
+  }
+
+  return {
+    themeColor: warning ? Colors.yellow : Colors.green,
+  };
+}
+
 export async function generateMetadata(): Promise<Metadata> {
   const { endpoints } = await getMojangEndpointStatus();
 
-  let description = Object.entries(endpoints)
-    .map(([url, status]) => {
-      return `${url}: ${formatStatus(status)}`;
-    })
-    .join("\n");
-  description += `\n\nEmbed Cache: ${formatTime(new Date())}`;
+  let description = "Current Mojang API Status:\n";
+  for (const endpoint of endpoints) {
+    const { name, hostname, status } = endpoint;
+
+    description += `${name}: ${capitalizeFirstLetter(status.toLowerCase())}\n`;
+  }
 
   return generateEmbed({
     title: "Mojang Status",
@@ -61,44 +77,39 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default async function Page(): Promise<ReactElement> {
   const { endpoints } = await getMojangEndpointStatus();
-  const endpointsSize = Object.entries(endpoints).length;
 
   return (
     <div>
       <div className="text-center mb-4">
-        <h1 className="text-xl">Mojang Status</h1>
-        <p>The current status of Mojang Services</p>
+        <Title title="Mojang Status" subtitle="The current status of Mojang Services" />
       </div>
-      <Card className="w-full xs:w-fit text-left">
-        <div>
-          {endpointsSize === 0 && <p>Unable to fetch endpoint statuses</p>}
-          {endpointsSize > 0 && (
-            <Table className="md:w-[500px] text-start">
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="pl-1 h-8">Service</TableHead>
-                  <TableHead className="pl-1 h-8">Status</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {Object.entries(endpoints).map(([url, status]) => {
-                  return (
-                    <TableRow key={url}>
-                      <TableCell className="p-[0.3rem]">
-                        <Link className="hover:text-primary transition-all" href={url} target="_blank">
-                          {url}
-                        </Link>
-                      </TableCell>
-                      <TableCell className={cn(getColor(status), "p-[0.3rem] text-left")}>
-                        {formatStatus(status)}
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          )}
-        </div>
+      <Card
+        classNameCard="py-0 pb-2 w-screen xs:w-[28rem] md:w-[35rem]"
+        classNameContent="text-left flex flex-col divide-y gap-2"
+      >
+        {endpoints.length == 0 && <p>Unable to fetch endpoint statuses</p>}
+        {endpoints.length > 0 &&
+          endpoints.map((server: CachedEndpointStatus) => {
+            const { name, endpoint, status } = server;
+
+            return (
+              <div key={name} className="flex flex-row justify-between pt-2">
+                <div className="flex flex-col leading-[1.5rem]">
+                  <p className="font-semibold">{name}</p>
+                  <Link
+                    href={endpoint}
+                    className="text-sm text-primary hover:opacity-75 transition-all transform-gpu"
+                    target="_blank"
+                  >
+                    <p>{endpoint}</p>
+                  </Link>
+                </div>
+                <div className={cn("flex items-center font-semibold", getColor(status))}>
+                  <p>{formatStatus(status)}</p>
+                </div>
+              </div>
+            );
+          })}
       </Card>
     </div>
   );

src/app/(pages)/page.tsx

@@ -4,70 +4,41 @@ import { ReactElement } from "react";
 import { Button } from "../components/ui/button";
 import { Separator } from "../components/ui/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
+import { Title } from "@/app/components/title";
+import { LandingButton } from "@/app/types/landing/landing-button";
 
-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;
-};
-
-const buttons: Button[] = [
+const buttons: LandingButton[] = [
   {
     title: "Get Started",
-    tooltip: "Click to view get started!",
-    url: "/player",
-  },
-  {
-    title: "Postman Collection",
-    tooltip: "Click to view the Postman Collection",
-    url: "https://www.postman.com/imfascinated/workspace/minecraft-utilities",
-    openInNewTab: true,
-  },
-  {
-    title: "Documentation",
-    tooltip: "Click to open the documentation",
-    url: "https://api.mcutils.xyz/swagger-ui.html",
-    openInNewTab: true,
+    tooltip: "Click to get started with the API",
+    url: "/docs",
+    className:
+      "bg-gradient-to-r from-indigo-600 to-emerald-600 px-7 hover:opacity-75 transition-all transform-gpu text-white",
   },
 ];
 
 export default function Home(): ReactElement {
   return (
     <div className="text-center flex flex-col gap-4">
-      <div className="p-4">
-        <div>
-          <h1 className="text-4xl mb-2">Minecraft Utilities</h1>
-          <div className="text-lg">
-            <p>
-              Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.
-            </p>
-            <p>We offer you a simple and easy to use API.</p>
-          </div>
-        </div>
+      <div className="p-2">
+        <Title
+          title="Minecraft Utilities"
+          subtitle={
+            <>
+              <p>
+                Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.
+              </p>
+              <p>We offer you a simple and easy to use API.</p>
+            </>
+          }
+        />
 
-        <div className="flex flex-row gap-2 justify-center mt-4">
+        <div className="flex flex-row gap-2 justify-center mt-4 flex-wrap">
           {buttons.map((button, index) => {
             return (
               <Tooltip key={index}>
                 <TooltipTrigger asChild>
-                  <Button key={index}>
+                  <Button key={index} className={button.className ? button.className : ""}>
                     <Link href={button.url} target={button.openInNewTab ? "_blank" : ""}>
                       <p>{button.title}</p>
                     </Link>
@@ -84,7 +55,7 @@ export default function Home(): ReactElement {
 
       <Separator />
 
-      <div className="flex flex-col gap-4 items-center pt-4">
+      <div className="flex flex-col gap-4 items-center p-2">
         <div className="text-center">
           <p className="font-semibold text-xl">API Statistics</p>
           <p>View the statistics for the API in real-time!</p>

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

@@ -4,28 +4,27 @@ 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 { Colors } from "@/common/colors";
-import { generateEmbed } from "@/common/embed";
-import { isValidPlayer } from "@/common/player";
+import { Colors } from "@/app/common/colors";
+import { generateEmbed } from "@/app/common/embed";
+import { isValidPlayer } from "@/app/common/player";
 import config from "@root/config.json";
 import { CachedPlayer, getPlayer, McUtilsAPIError } from "mcutils-library";
 import { Metadata, Viewport } from "next";
 import { ReactElement } from "react";
+import { Title } from "@/app/components/title";
+import { PlayerPageParams } from "@/app/types/player/page-params";
+import { TryAPlayer } from "@/app/components/player/try-a-player";
 
-type Params = {
-  params: {
-    id: string;
-  };
-};
+export const revalidate = 60;
 
-export async function generateViewport({ params: { id } }: Params): Promise<Viewport> {
+export async function generateViewport({ params: { id } }: PlayerPageParams): Promise<Viewport> {
   const validPlayer = await isValidPlayer(id);
   return {
     themeColor: validPlayer ? Colors.green : Colors.red,
   };
 }
 
-export async function generateMetadata({ params: { id } }: Params): Promise<Metadata> {
+export async function generateMetadata({ params: { id } }: PlayerPageParams): Promise<Metadata> {
   // No id provided
   if (!id || id.length === 0) {
     return generateEmbed({
@@ -39,7 +38,7 @@ export async function generateMetadata({ params: { id } }: Params): Promise<Meta
     const headPartUrl = skin.parts.head;
 
     return generateEmbed({
-      title: `${username}`,
+      title: `${username}'s Profile`,
       description: `UUID: ${uniqueId}\n\nClick to view more information about the player.`,
       image: headPartUrl,
     });
@@ -52,7 +51,7 @@ export async function generateMetadata({ params: { id } }: Params): Promise<Meta
   }
 }
 
-export default async function Page({ params: { id } }: Params): Promise<ReactElement> {
+export default async function Page({ params: { id } }: PlayerPageParams): Promise<ReactElement> {
   let error: string | undefined = undefined; // The error to display
   let player: CachedPlayer | undefined = undefined; // The player to display
 
@@ -66,8 +65,10 @@ export default async function Page({ params: { id } }: Params): Promise<ReactEle
   return (
     <div className="h-full flex flex-col items-center">
       <div className="mb-4 text-center">
-        <h1 className="text-xl">Lookup a Player</h1>
-        <p>You can enter a players uuid or username to get information about the player.</p>
+        <Title
+          title="Player Lookup"
+          subtitle="You can enter a players uuid or username to get information about the player."
+        />
 
         <LookupPlayer currentPlayer={id && id[0]} />
       </div>
@@ -87,12 +88,15 @@ export default async function Page({ params: { id } }: Params): Promise<ReactEle
               <ContextMenuItem>Copy Player UUID</ContextMenuItem>
             </CopyButton>
 
-            <CopyButton content={`${config.siteUrl}/player/${id}`}>
+            <CopyButton content={`${config.publicUrl}/player/${id}`}>
               <ContextMenuItem>Copy Share URL</ContextMenuItem>
             </CopyButton>
           </ContextMenuContent>
         </ContextMenu>
       )}
+
+      {/* Try a Player */}
+      {player == null && !error && <TryAPlayer />}
     </div>
   );
 }

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

@@ -3,11 +3,10 @@ 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 { Colors } from "@/app/common/colors";
+import { generateEmbed } from "@/app/common/embed";
+import { isValidServer } from "@/app/common/server";
+import { capitalizeFirstLetter } from "@/app/common/string-utils";
 import config from "@root/config.json";
 import {
   CachedBedrockMinecraftServer,
@@ -18,13 +17,11 @@ import {
 } from "mcutils-library";
 import { Metadata, Viewport } from "next";
 import { ReactElement } from "react";
+import { Title } from "@/app/components/title";
+import { ServerPageParams } from "@/app/types/server/page-params";
+import { TryAServer } from "@/app/components/server/try-a-server";
 
-type Params = {
-  params: {
-    platform: ServerPlatform;
-    hostname: string;
-  };
-};
+export const revalidate = 60;
 
 /**
  * Gets the favicon for a server
@@ -38,7 +35,7 @@ function getFavicon(
   server: CachedJavaMinecraftServer | CachedBedrockMinecraftServer | undefined,
 ): string | undefined {
   if (server == null || platform === ServerPlatform.Bedrock) {
-    return config.apiUrl + "/server/icon/fallback";
+    return config.apiEndpoint + "/server/icon/fallback";
   }
   server = server as CachedJavaMinecraftServer;
   return server.favicon && server.favicon.url;
@@ -54,14 +51,14 @@ function checkPlatform(platform: ServerPlatform): boolean {
   return platform === ServerPlatform.Java || platform === ServerPlatform.Bedrock;
 }
 
-export async function generateViewport({ params: { platform, hostname } }: Params): Promise<Viewport> {
+export async function generateViewport({ params: { platform, hostname } }: ServerPageParams): Promise<Viewport> {
   const validPlayer = await isValidServer(platform, hostname);
   return {
     themeColor: validPlayer || !platform ? Colors.green : Colors.red,
   };
 }
 
-export async function generateMetadata({ params: { platform, hostname } }: Params): Promise<Metadata> {
+export async function generateMetadata({ params: { platform, hostname } }: ServerPageParams): Promise<Metadata> {
   if (!checkPlatform(platform)) {
     // Invalid platform
     return generateEmbed({
@@ -79,17 +76,14 @@ export async function generateMetadata({ params: { platform, hostname } }: Param
 
   try {
     const server = await getServer(platform, hostname);
-    const { hostname: serverHostname, players } = server;
-
-    const favicon = getFavicon(platform, server);
-
-    let description = `There is ${formatNumber(players.online)}/${formatNumber(players.max)} players connected!\n\n`;
-    description += "Click to view more information about the server.";
+    const { hostname: serverHostname } = server;
 
     return generateEmbed({
-      title: `${capitalizeFirstLetter(platform)} Server: ${serverHostname}`,
-      description: description,
-      image: favicon,
+      title: `${serverHostname} ${capitalizeFirstLetter(platform)} Server`,
+      embedTitle: `${capitalizeFirstLetter(platform)} Server: ${serverHostname}`,
+      description: "Click to view more information about the server.",
+      image: `${config.apiEndpoint}/server/${platform}/preview/${serverHostname}`,
+      cardType: "summary_large_image",
     });
   } catch (err) {
     // An error occurred
@@ -100,7 +94,7 @@ export async function generateMetadata({ params: { platform, hostname } }: Param
   }
 }
 
-export default async function Page({ params: { platform, hostname } }: Params): Promise<ReactElement> {
+export default async function Page({ params: { platform, hostname } }: ServerPageParams): Promise<ReactElement> {
   let error: string | undefined = undefined; // The error to display
   let server: CachedJavaMinecraftServer | CachedBedrockMinecraftServer | undefined = undefined; // The server to display
   let invalidPlatform: boolean = !checkPlatform(platform); // Whether the platform is invalid
@@ -121,16 +115,21 @@ export default async function Page({ params: { platform, hostname } }: Params):
   return (
     <div className="h-full flex flex-col items-center">
       <div className="mb-4 text-center">
-        <h1 className="text-xl">Lookup a {invalidPlatform ? "" : capitalizeFirstLetter(platform)} Server</h1>
-        <p>You can enter a server hostname to get information about the server.</p>
+        <Title
+          title={`Lookup a ${invalidPlatform ? "" : capitalizeFirstLetter(platform)} Server`}
+          subtitle="You can enter a server hostname to get information about the server."
+        />
 
         <LookupServer currentPlatform={platform.toLowerCase()} currentServer={hostname && hostname[0]} />
       </div>
 
+      {/* An errored occurred when looking up the server */}
       {error && <ErrorCard message={error} />}
+
+      {/* The server */}
       {server != null && (
         <ContextMenu>
-          <ContextMenuTrigger>
+          <ContextMenuTrigger asChild>
             <ServerView server={server} favicon={favicon} />
           </ContextMenuTrigger>
           <ContextMenuContent className="flex flex-col">
@@ -145,6 +144,9 @@ export default async function Page({ params: { platform, hostname } }: Params):
           </ContextMenuContent>
         </ContextMenu>
       )}
+
+      {/* Try a Server */}
+      {server == null && !error && <TryAServer />}
     </div>
   );
 }

src/app/common/colors.ts

@@ -4,4 +4,5 @@
 export const Colors = {
   green: "#0FFF50",
   red: "#8B0000",
+  yellow: "#FFD700",
 };

src/app/common/documentation.ts

@@ -0,0 +1,194 @@
+import * as fs from "node:fs";
+import path from "node:path";
+import Fuse from "fuse.js";
+
+/**
+ * Metadata for documentation content.
+ */
+export type DocsContentMetadata = MDXMetadata & {
+  /**
+   * The title of this content.
+   */
+  title: string;
+
+  /**
+   * The summary of this content.
+   */
+  summary: string;
+};
+
+/**
+ * Metadata for an MDX file.
+ */
+type MDXMetadata = {
+  /**
+   * The slug of the file, defined once read.
+   */
+  slug: string;
+
+  /**
+   * The metadata of the file.
+   */
+  metadata: {
+    [key: string]: string;
+  };
+
+  /**
+   * The content of the file.
+   */
+  content: string;
+};
+
+/**
+ * The regex to match for metadata.
+ */
+const METADATA_REGEX: RegExp = /---\s*([\s\S]*?)\s*---/;
+
+/**
+ * The directory of the documentation.
+ */
+const docsDir = path.join(process.cwd(), "documentation");
+
+/**
+ * The cached documentation content.
+ */
+const cachedDocs: DocsContentMetadata[] = getDocsContent();
+
+/**
+ * The fuse index for searching
+ */
+const fuseIndex: Fuse<DocsContentMetadata> = new Fuse(cachedDocs, {
+  keys: ["title", "summary"],
+  includeScore: true,
+  threshold: 0.4,
+});
+
+/**
+ * Get the directories in the
+ * given directory.
+ */
+function getDocsDirectories(dir: string): string[] {
+  const directories: string[] = [dir];
+  const paths: string[] = fs.readdirSync(dir);
+
+  for (const sub of paths) {
+    const subPath: string = path.join(dir, sub);
+    const stat: fs.Stats = fs.statSync(subPath);
+
+    if (stat.isDirectory()) {
+      directories.push(...getDocsDirectories(subPath));
+    }
+  }
+  return directories;
+}
+
+/**
+ * Get the content to
+ * display in the docs.
+ */
+export function getDocsContent(): DocsContentMetadata[] {
+  const directories: string[] = getDocsDirectories(docsDir);
+  const page: DocsContentMetadata[] = [];
+
+  for (let directory of directories) {
+    page.push(...getMetadata<DocsContentMetadata>(directory));
+  }
+
+  return page;
+}
+
+/**
+ * Get the content of the
+ * documentation page.
+ *
+ * @param path the path to the content
+ */
+export function getDocContent(path?: string[]): DocsContentMetadata | undefined {
+  const slug: string = path ? path.join("/") : "home";
+
+  return process.env.NODE_ENV === "development"
+    ? getDocsContent().find((doc: DocsContentMetadata) => doc.slug === slug)
+    : cachedDocs.find((doc: DocsContentMetadata) => doc.slug === slug);
+}
+
+/**
+ * Search the documentation
+ * for the given query.
+ *
+ * @param query the query to search
+ * @param limit the maximum number of results
+ */
+export function searchDocs(
+  query?: string,
+  limit?: number,
+): {
+  title: string;
+  summary: string;
+  slug: string;
+}[] {
+  if (!limit) {
+    limit = 5; // Default to 5 results
+  }
+  return fuseIndex.search(query || "", { limit }).map(result => {
+    return {
+      title: result.item.title,
+      summary: result.item.summary,
+      slug: result.item.slug,
+    };
+  });
+}
+
+/**
+ * Get the metadata of mdx
+ * files in the given directory.
+ *
+ * @param directory the directory to search
+ */
+export function getMetadata<T extends MDXMetadata>(directory: string): T[] {
+  const files: string[] = fs.readdirSync(directory).filter((file: string): boolean => {
+    const extension: string = path.extname(file); // The file extension
+    return extension === ".md" || extension === ".mdx";
+  }); // Read the MDX files
+  return files.map((file: string): T => {
+    const filePath: string = path.join(directory, file); // The path of the file
+    return {
+      ...parseMetadata<T>(fs.readFileSync(filePath, "utf-8")),
+      slug: filePath
+        .replace(docsDir, "")
+        .replace(/\.mdx?$/, "")
+        .replace(/\\/g, "/")
+        .substring(1),
+    }; // Map each file to its metadata
+  });
+}
+
+/**
+ * Parse the metadata from
+ * the given content.
+ *
+ * @param content the content to parse
+ * @returns the metadata and content
+ * @template T the type of metadata
+ */
+function parseMetadata<T extends MDXMetadata>(content: string): T {
+  const metadataBlock: string = METADATA_REGEX.exec(content)![1]; // Get the block of metadata
+  content = content.replace(METADATA_REGEX, "").trim(); // Remove the metadata block from the content
+  let metadata: Partial<{
+    [key: string]: string;
+  }> = {}; // The metadata to return
+
+  // Parse the metadata block as a key-value pair
+  metadataBlock
+    .trim() // Trim any leading or trailing whitespace
+    .split("\n") // Get each line
+    .forEach((line: string): void => {
+      const split: string[] = line.split(": "); // Split the metadata by the colon
+      let value: string = split[1].trim(); // The value of the metadata
+      value = value.replace(/^['"](.*)['"]$/, "$1"); // Remove quotes
+      metadata[split[0].trim()] = value; // Add the metadata to the object
+    });
+
+  // Return the metadata and content. The initial
+  // slug is empty, and is defined later on.
+  return { ...metadata, content } as T;
+}

src/app/common/embed.ts

@@ -6,6 +6,11 @@ type Embed = {
    */
   title: string;
 
+  /**
+   * The title of the embed.
+   */
+  embedTitle?: string;
+
   /**
    * The description of the embed.
    */
@@ -15,16 +20,32 @@ type Embed = {
    * The image to show as the thumbmail.
    */
   image?: string;
+
+  /**
+   * The type of the card.
+   */
+  cardType?: "summary" | "summary_large_image";
 };
 
 /**
  * Generates metadata for a embed.
  *
  * @param title the title of the embed
+ * @param embedTitle the title of the embed
  * @param description the description of the embed
+ * @param image the image to show as the thumbmail
+ * @param cardType the type of the card
  * @returns the metadata for the embed
  */
-export function generateEmbed({ title, description, image }: Embed): Metadata {
+export function generateEmbed({ title, embedTitle, description, image, cardType }: Embed): Metadata {
+  // Fall back to the title
+  if (!embedTitle) {
+    embedTitle = title;
+  }
+  if (!cardType) {
+    cardType = "summary";
+  }
+
   const metadata: Metadata = {
     title: `${title}`,
     openGraph: {
@@ -32,7 +53,7 @@ export function generateEmbed({ title, description, image }: Embed): Metadata {
       description: description,
     },
     twitter: {
-      card: "summary",
+      card: cardType,
     },
   };
 

src/app/common/hastebin.ts

@@ -0,0 +1,17 @@
+const PASTE_URL: string = "https://paste.fascinated.cc";
+
+/**
+ * Creates a new haste with the given content.
+ *
+ * @param content the content to create the haste with
+ * @returns the URL of the created haste
+ */
+export async function createHaste(content: string): Promise<string> {
+  const response = await fetch(`${PASTE_URL}/api/upload`, {
+    method: "POST",
+    body: content,
+  });
+
+  const { id } = await response.json();
+  return `${PASTE_URL}/${id}`;
+}

src/app/components/cache-information.tsx

@@ -0,0 +1,24 @@
+import { Cache } from "mcutils-library";
+import React, { ReactElement, ReactNode } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/app/components/ui/popover";
+import moment from "moment";
+
+type CacheInformationProps = {
+  cache: Cache;
+  children?: ReactNode;
+};
+
+export function CacheInformation({ cache, children }: CacheInformationProps): ReactElement {
+  const isCached = cache.cached;
+  const cacheTime = cache.cachedTime;
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent>
+        <p className={isCached ? "text-green-400" : "text-red-400"}>{isCached ? "Cached" : "Not Cached"}</p>
+        {cacheTime !== -1 && <p>{moment(cacheTime).calendar()}</p>}
+      </PopoverContent>
+    </Popover>
+  );
+}

src/app/components/card.tsx

@@ -1,6 +1,7 @@
 import { Card as ShadcnCard, CardContent } from "@/app/components/ui/card";
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/utils";
 import { ReactElement } from "react";
+import { type ClassValue } from "clsx";
 
 type CardProps = {
   /**
@@ -9,15 +10,20 @@ type CardProps = {
   children: React.ReactNode;
 
   /**
-   * The class names to append.
+   * The class names for the card.
    */
-  className?: string;
+  classNameCard?: ClassValue;
+
+  /**
+   * The class names for the content.
+   */
+  classNameContent?: ClassValue;
 };
 
-export function Card({ children, className }: CardProps): ReactElement {
+export function Card({ children, classNameCard, classNameContent }: CardProps): ReactElement {
   return (
-    <ShadcnCard className={cn(className, "pt-4")}>
-      <CardContent>{children}</CardContent>
+    <ShadcnCard className={cn("p-1.5", classNameCard)}>
+      <CardContent className={cn("p-1.5", classNameContent)}>{children}</CardContent>
     </ShadcnCard>
   );
 }

src/app/components/code-dialog.tsx

@@ -1,6 +1,15 @@
 import { ReactElement } from "react";
 import { CodeHighlighter } from "./code-highlighter";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+import { CreateHasteButton } from "@/app/components/create-haste-button";
 
 type CodeDialogProps = {
   /**
@@ -28,12 +37,15 @@ export function CodeDialog({ title, description, code, children }: CodeDialogPro
   return (
     <Dialog>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="max-h-[700px] text-sm">
+      <DialogContent className="text-sm">
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription>{description}</DialogDescription>
         </DialogHeader>
         <CodeHighlighter code={code} />
+        <DialogFooter>
+          <CreateHasteButton content={code} />
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );

src/app/components/code-highlighter.tsx

@@ -2,6 +2,8 @@ import { ReactElement } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import createElement from "react-syntax-highlighter/dist/esm/create-element";
 import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { cn } from "@/app/common/utils";
+import { capitalizeFirstLetter } from "@/app/common/string-utils";
 
 type CodeHighlighterProps = {
   /**
@@ -9,6 +11,11 @@ type CodeHighlighterProps = {
    */
   code: string;
 
+  /**
+   * The language of the code.
+   */
+  language?: string;
+
   /**
    * Should the element be rounded?
    */
@@ -62,21 +69,24 @@ function rowRenderer({
   });
 }
 
-export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps): ReactElement {
+export function CodeHighlighter({ code, language = "json", rounded = true }: CodeHighlighterProps): ReactElement {
   return (
-    <SyntaxHighlighter
-      language="json"
-      style={atomOneDark}
-      wrapLongLines
-      renderer={rowRenderer}
-      customStyle={{
-        maxHeight: "600px",
-        backgroundColor: "hsl(var(--popover))",
-        wordBreak: "break-all",
-        borderRadius: rounded ? "0.75rem" : undefined,
-      }}
-    >
-      {code}
-    </SyntaxHighlighter>
+    <div className="text-xs md:text-md relative">
+      {/* Language */}
+      <div className="absolute top-0 right-0 p-1 bg-muted rounded-bl-md rounded-tr-md">
+        <span className="text-xs text-muted-foreground">{capitalizeFirstLetter(language)}</span>
+      </div>
+
+      {/* Code */}
+      <SyntaxHighlighter
+        className={cn("max-h-[600px] !bg-secondary break-all rounded-md", rounded && "rounded-md")}
+        language={language}
+        style={atomOneDark}
+        wrapLongLines
+        renderer={rowRenderer}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
   );
 }

src/app/components/command-menu.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import React, { ReactElement, useState } from "react";
+import { DocsContentMetadata } from "@/app/common/documentation";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/app/components/ui/command";
+import { Button, ButtonProps } from "@/app/components/ui/button";
+import { useRouter } from "next/navigation";
+import { cn } from "@/app/common/utils";
+
+export function CommandMenu({ ...props }: ButtonProps): ReactElement {
+  const router = useRouter();
+
+  /**
+   * Whether to show the search
+   */
+  const [open, setOpen] = useState<boolean>(false);
+
+  /**
+   * The pages that were found
+   */
+  const [pages, setPages] = useState<DocsContentMetadata[] | undefined>(undefined);
+
+  // Handle keyboard shortcuts
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return;
+        }
+
+        e.preventDefault();
+        setOpen(open => !open);
+      }
+    };
+
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  /**
+   * Search the documentation
+   * for the given query.
+   *
+   * @param query the query to search for
+   */
+  async function searchDocs(query: string): Promise<void> {
+    // Don't bother searching if the query is less than 3 characters
+    if (query.length < 3) {
+      setPages(undefined);
+      return;
+    }
+
+    // Attempt to search for the query
+    const response = await fetch(`/api/docs/search?query=${query}`);
+    const pages: DocsContentMetadata[] = await response.json();
+    setPages(pages);
+  }
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        className={cn(
+          "relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64",
+          props.className,
+        )}
+        onClick={() => setOpen(true)}
+      >
+        Search
+      </Button>
+
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput
+          placeholder="Query..."
+          onValueChange={async search => {
+            await searchDocs(search);
+          }}
+        />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          {pages && pages.length > 1 && (
+            <CommandGroup heading="Suggestions">
+              {pages.map(page => {
+                return (
+                  <CommandItem
+                    key={page.slug}
+                    onSelect={() => {
+                      router.push(`/docs/${page.slug}`); // Go to the page
+                      setOpen(false); // Close the dialog
+                      setPages(undefined); // Clear the pages
+                    }}
+                    className="flex flex-col items-start gap-1"
+                  >
+                    <p className="font-semibold text-primary">{page.title}</p>
+                    <p>{page.summary}</p>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          )}
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}

src/app/components/container.tsx

@@ -10,9 +10,9 @@ type ContainerProps = {
 
 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]">
+    <div className="z-[9999] m-auto flex h-screen flex-col items-center opacity-90 w-full xs:max-w-[1200px]">
       <NavBar />
-      <div className="w-full flex mt-4 justify-center">{children}</div>
+      <div className="w-full flex mt-4 justify-center h-full">{children}</div>
     </div>
   );
 }

src/app/components/copy-button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useToast } from "@/common/use-toast";
+import { useToast } from "@/app/common/use-toast";
 import copy from "clipboard-copy";
 import { ReactElement } from "react";
 
@@ -10,6 +10,11 @@ type CopyButtonProps = {
    */
   content: string;
 
+  /**
+   * The message to display when the content is copied.
+   */
+  message?: string | boolean;
+
   /**
    * The children for this element.
    */
@@ -22,7 +27,7 @@ type CopyButtonProps = {
  * @param props the properties for the button
  * @returns the copy button
  */
-export function CopyButton({ content, children }: CopyButtonProps): ReactElement {
+export function CopyButton({ content, message, children }: CopyButtonProps): ReactElement {
   const { toast } = useToast();
 
   return (
@@ -33,7 +38,7 @@ export function CopyButton({ content, children }: CopyButtonProps): ReactElement
           title: "Copied!",
           description: (
             <p>
-              Copied <b>{content}</b> to your clipboard.
+              Copied <b>{!message ? content : message}</b> to your clipboard.
             </p>
           ),
           duration: 5000,

src/app/components/create-haste-button.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { ReactElement } from "react";
+import { Button } from "@/app/components/ui/button";
+import { CreateHasteButtonProps } from "@/app/types/create-haste-button";
+import { createHaste } from "@/app/common/hastebin";
+
+export function CreateHasteButton({ content }: CreateHasteButtonProps): ReactElement {
+  /**
+   * Uploads the content to Haste and opens the URL in a new tab.
+   */
+  async function upload(): Promise<void> {
+    const url = await createHaste(content);
+    console.log(url);
+
+    // Open the URL in a new tab.
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+
+  return <Button onClick={() => upload()}>Create Haste</Button>;
+}

src/app/components/docs/breadcrumb.tsx

@@ -0,0 +1,48 @@
+import { ReactElement } from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/app/components/ui/breadcrumb";
+import { capitalizeFirstLetter } from "@/app/common/string-utils";
+import { DocsContentMetadata } from "@/app/common/documentation";
+
+type DocsBreadcrumbProps = {
+  /**
+   * The page to render the breadcrumb for.
+   */
+  page: DocsContentMetadata;
+};
+
+export function DocsBreadcrumb({ page }: DocsBreadcrumbProps): ReactElement {
+  const slugParts: string[] = page.slug.split("/");
+  const isHome: boolean = slugParts.length == 1;
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href={`/docs`}>Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        {!isHome &&
+          slugParts.map((slug, index, array) => {
+            const path: string = array.slice(0, index + 1).join("/");
+            const name: string = slug.includes("-")
+              ? slug.split("-").map(capitalizeFirstLetter).join(" ")
+              : capitalizeFirstLetter(slug);
+
+            return (
+              <div key={slug} className="flex items-center ">
+                <BreadcrumbSeparator className="pr-1.5" />
+                <BreadcrumbItem>
+                  <BreadcrumbLink href={`/docs/${path}`}>{capitalizeFirstLetter(name)}</BreadcrumbLink>
+                </BreadcrumbItem>
+              </div>
+            );
+          })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

src/app/components/docs/github-link.tsx

@@ -0,0 +1,22 @@
+import { DocsContentMetadata } from "@/app/common/documentation";
+import { ReactElement } from "react";
+import Image from "next/image";
+import Link from "next/link";
+
+type GithubLink = {
+  /**
+   * The page to link to.
+   */
+  page: DocsContentMetadata;
+};
+
+export function GithubLink({ page }: GithubLink): ReactElement {
+  return (
+    <Link
+      href={`https://git.fascinated.cc/MinecraftUtilities/Frontend/src/branch/master/documentation/${page.slug}.md`}
+      target="_blank"
+    >
+      <Image src="/media/github.png" alt="The GitHub logo" width={32} height={32} className="filter dark:invert" />
+    </Link>
+  );
+}

src/app/components/github-star.tsx

@@ -3,12 +3,20 @@
 import { ReactElement, useEffect, useState } from "react";
 import { Star } from "lucide-react";
 import Link from "next/link";
+import { cn } from "@/app/common/utils";
 
-export function GithubStar(): ReactElement {
+type GithubStarProps = {
+  /**
+   * The class name for this component.
+   */
+  className?: string;
+};
+
+export function GithubStar({ className }: GithubStarProps): ReactElement {
   const [starCount, setStarCount] = useState(0);
 
   const getStarCount = async () => {
-    const res = await fetch("https://api.github.com/repos/RealFascinated/minecraft-helper");
+    const res = await fetch("https://api.github.com/repos/RealFascinated/MinecraftUtilities");
     const data = await res.json();
     return data.stargazers_count;
   };
@@ -19,13 +27,16 @@ export function GithubStar(): ReactElement {
 
   return (
     <Link
-      className="bg-github-green px-2 py-1 rounded-lg items-center gap-1 hover:opacity-85 transform-gpu transition-all hidden md:flex"
-      href="https://github.com/RealFascinated/minecraft-helper"
+      className={cn(
+        "bg-github-green px-2 py-1 rounded-lg items-center gap-1 hover:opacity-85 transform-gpu transition-all hidden md:flex",
+        className,
+      )}
+      href="https://github.com/RealFascinated/MinecraftUtilities"
       target="_blank"
     >
-      <p className="text-white text-sm bg-secondary py-[3px] px-[4px] rounded-lg leading-none">{starCount}</p>
-      <Star size={16} />
-      <p className="text-white text-sm">Star us!</p>
+      <p className="text-white text-sm bg-github-green-accent py-[3px] px-[4px] rounded-lg leading-none">{starCount}</p>
+      <Star size={18} />
+      <p className="text-white text-sm leading-none">Star us!</p>
     </Link>
   );
 }

src/app/components/href-button.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/utils";
 import Link from "next/link";
 import { ReactElement } from "react";
 

src/app/components/logo.tsx

@@ -11,7 +11,7 @@ type LogoProps = {
 export default function Logo({ size = 30 }: LogoProps): ReactElement {
   return (
     <Image
-      src="https://git.fascinated.cc/MinecraftUtilities/Assets/raw/branch/master/logo.png"
+      src={`/media/logo.png`}
       alt={"The Logo"}
       width={size}
       height={size}

src/app/components/mdx-components.tsx

@@ -0,0 +1,44 @@
+import { MDXRemote } from "remote-mdx/rsc";
+import { ReactElement } from "react";
+import {
+  formatCode,
+  formatHeading,
+  formatLink,
+  formatList,
+  formatTable,
+  formatTableData,
+  formatTableHeader,
+} from "@/app/components/mdx-renderer";
+import remarkGfm from "remark-gfm";
+
+/**
+ * The components to use in the MDX renderer.
+ */
+const components = {
+  h1: (props: any) => formatHeading(1, props),
+  h2: (props: any) => formatHeading(2, props),
+  h3: (props: any) => formatHeading(3, props),
+  h4: (props: any) => formatHeading(4, props),
+  h5: (props: any) => formatHeading(5, props),
+  h6: (props: any) => formatHeading(6, props),
+  code: (props: any) => formatCode(props),
+  ul: (props: any) => formatList(props),
+  a: (props: any) => formatLink(props),
+  table: (props: any) => formatTable(props),
+  th: (props: any) => formatTableHeader(props),
+  td: (props: any) => formatTableData(props),
+};
+
+export function CustomMDX(props: any): ReactElement {
+  return (
+    <MDXRemote
+      {...props}
+      components={{ ...components, ...(props.components || {}) }}
+      options={{
+        mdxOptions: {
+          remarkPlugins: [remarkGfm],
+        },
+      }}
+    />
+  );
+}

src/app/components/mdx-renderer.tsx

@@ -0,0 +1,90 @@
+import { CodeHighlighter } from "@/app/components/code-highlighter";
+import { Separator } from "@/app/components/ui/separator";
+import Link from "next/link";
+import { ReactElement } from "react";
+
+/**
+ * Create a heading component.
+ *
+ * @param level The level of the heading.
+ * @param props The props to pass to the heading.
+ */
+export function formatHeading(level: number, props: any): ReactElement {
+  const Tag = `h${level}`;
+  const paddingBottom = level > 1 ? "pt-6" : "";
+  const textSize = 4 - level;
+
+  return (
+    <div className={`pb-4 ${paddingBottom}`}>
+      <Tag className={`text-${textSize}xl font-semibold pb-2`} {...props} />
+      <Separator />
+    </div>
+  );
+}
+
+/**
+ * Format a code block.
+ *
+ * @param props The props to pass to the code block.
+ */
+export function formatCode(props: any): ReactElement {
+  if (!props.className) {
+    return <code className="text-xs bg-secondary p-1 rounded-md leading-none" {...props} />;
+  }
+
+  const language = props.className.replace("language-", "");
+  return (
+    <div className="pt-4">
+      <CodeHighlighter language={props.className ? language : undefined} code={props.children} />
+    </div>
+  );
+}
+
+/**
+ * Format a list.
+ *
+ * @param props The props to pass to the list.
+ */
+export function formatList(props: any): ReactElement {
+  return <ul className="list-disc pl-4 ml-2 pt-2">{props.children}</ul>;
+}
+
+/**
+ * Format a link.
+ *
+ * @param props The props to pass to the link.
+ */
+export function formatLink(props: any): ReactElement {
+  return (
+    <Link href={props.href} className="text-primary hover:opacity-85 transition-all transform-gpu">
+      {props.children}
+    </Link>
+  );
+}
+
+/**
+ * Format a table.
+ *
+ * @param props The props to pass to the table.
+ */
+export function formatTable(props: any): ReactElement {
+  return <table className="table-auto divide-y divide-gray-200 mt-4">{props.children}</table>;
+}
+
+/**
+ * Format table header.
+ *
+ * @param props The props to pass to the table header.
+ */
+export function formatTableHeader(props: any): ReactElement {
+  return <th className="border-border border p-1.5">{props.children}</th>;
+}
+
+/**
+ * Format table data.
+ *
+ * @param props The props to pass to the table data.
+ */
+export function formatTableData(props: any): ReactElement {
+  return <td className="border-border border p-1.5">{props.children}</td>;
+}

src/app/components/navbar.tsx

@@ -7,6 +7,9 @@ import { HrefButton } from "./href-button";
 import Logo from "./logo";
 import { ToggleThemeButton } from "./theme-toggle-button";
 import { GithubStar } from "@/app/components/github-star";
+import { Card } from "@/app/components/card";
+import { cn } from "@/app/common/utils";
+import { CommandMenu } from "@/app/components/command-menu";
 
 type Page = {
   /**
@@ -19,6 +22,11 @@ type Page = {
    */
   url: string;
 
+  /**
+   * Whether to hide the button on mobile.
+   */
+  hideOnMobile?: boolean;
+
   /**
    * Whether clicking the button will
    * open the link in a new tab.
@@ -30,29 +38,38 @@ const pages: Page[] = [
   { name: "Player", url: "/player" },
   { name: "Server", url: "/server/java" },
   { name: "Mojang", url: "/mojang/status" },
-  { name: "API", url: "https://api.mcutils.xyz", openInNewTab: true },
+  { name: "API", url: "https://api.mcutils.xyz", hideOnMobile: true, openInNewTab: true },
+  { name: "Docs", url: "/docs" },
 ];
 
 export default function NavBar(): ReactElement {
-  const path = usePathname();
+  const path: string = usePathname();
+  const isDocs: boolean = path ? path.includes("/docs") : false;
 
   return (
-    <div className="bg-secondary relative w-full rounded-lg flex justify-between items-center gap-3 mt-2 px-3 bg-opacity-85 h-12">
+    <Card
+      classNameCard="w-full p-0 mt-2 border-none"
+      classNameContent="p-0 relative rounded-lg flex justify-between items-center gap-3 px-3 bg-opacity-85 h-12"
+    >
       {/* Left */}
-      <Link href="/" className="flex items-center gap-2">
-        <Logo />
-        <p className="hidden md:block">Minecraft Utilities</p>
-      </Link>
+      <div className={cn("flex flex-row items-center gap-2 z-50", isDocs ? "w-full md:w-fit" : "w-fit")}>
+        <Link href="/" className="flex items-center gap-2">
+          <Logo />
+        </Link>
+
+        {/* Command Menu */}
+        <CommandMenu className={cn(isDocs ? "" : "hidden md:inline-flex")} />
+      </div>
 
       {/* Links */}
-      <div className="absolute inset-x-0 flex justify-center">
+      <div className={cn("absolute inset-x-0 justify-center", isDocs ? "hidden md:flex" : "flex")}>
         <div className="flex gap-4">
           {pages.map((page, index) => {
-            const isActive = path.includes(page.url);
+            const isActive: boolean = path ? path.includes(page.url) : false;
 
             return (
               <HrefButton
-                className={isActive ? "text-primary" : ""}
+                className={cn(isActive ? "text-primary" : "", page.hideOnMobile ? "hidden md:block" : "")}
                 key={index}
                 title={page.name}
                 url={page.url}
@@ -64,10 +81,10 @@ export default function NavBar(): ReactElement {
       </div>
 
       {/* Right */}
-      <div className="flex gap-4 items-center">
+      <div className="flex gap-4 items-center z-50">
         <ToggleThemeButton />
-        <GithubStar />
+        <GithubStar className={isDocs ? "hidden md:flex" : "hidden"} />
       </div>
-    </div>
+    </Card>
   );
 }

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useToast } from "@/common/use-toast";
+import { useToast } from "@/app/common/use-toast";
 import { getPlayer } from "mcutils-library";
 import { useRouter } from "next/navigation";
 import { ReactElement, useState } from "react";
@@ -24,7 +24,6 @@ export function LookupPlayer({ currentPlayer }: PlayerLookupProps): ReactElement
   /**
    * Lookup a server based on the platform
    *
-   * @param platform the server platform
    * @param query the query to lookup
    */
   const lookupPlayer = async (query: string) => {
@@ -49,13 +48,14 @@ export function LookupPlayer({ currentPlayer }: PlayerLookupProps): ReactElement
         description: (err as Error).message,
         duration: 5000,
       });
-      return setLoading(false);
+      setLoading(false);
     }
   };
 
   return (
     <form
       className="flex flex-col gap-2 justify-center items-center mt-4 flex-wrap"
+      autoComplete="off"
       action={(form: FormData) => {
         lookupPlayer(form.get("query") as string);
       }}

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

@@ -0,0 +1,27 @@
+import { CachedPlayer, SkinPart } from "mcutils-library";
+import { ReactElement } from "react";
+import { SkinPartImage } from "@/app/components/player/skin-part-image";
+
+type PlayerSkinProps = {
+  /**
+   * The player to get the skin from.
+   */
+  player: CachedPlayer;
+};
+
+export function PlayerSkin({ player }: PlayerSkinProps): ReactElement {
+  const skin = player.skin;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <p className="text-lg">Skin Parts</p>
+      <div className="flex gap-2">
+        {Object.entries(skin.parts)
+          .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
+          .map(([part, url]) => {
+            return <SkinPartImage key={part} playerName={player.username} part={part as SkinPart} url={url} />;
+          })}
+      </div>
+    </div>
+  );
+}

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

@@ -6,6 +6,9 @@ import { CodeDialog } from "../code-dialog";
 import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
 import { SkinPartImage } from "./skin-part-image";
+import { CacheInformation } from "@/app/components/cache-information";
+import { PlayerSkin } from "@/app/components/player/player-skin";
+import { ReloadPageButton } from "@/app/components/reload-page-button";
 
 type PlayerViewProps = {
   /**
@@ -16,8 +19,8 @@ type PlayerViewProps = {
 
 export function PlayerView({ player }: PlayerViewProps): ReactElement {
   return (
-    <div className="flex flex-col gap-2">
-      <Card className="w-max xs:w-fit">
+    <div className="flex flex-col gap-2 items-center">
+      <Card classNameCard="w-screen xs:w-fit">
         <div className="flex gap-4 flex-col xs:flex-row relative">
           <div className="flex items-center flex-col">
             <SkinPartImage playerName={player.username} part={SkinPart.HEAD} url={player.skin.parts.head} size={96} />
@@ -31,20 +34,12 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
 
             <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 <SkinPartImage key={part} playerName={player.username} part={part as SkinPart} url={url} />;
-                  })}
-              </div>
-            </div>
+            <PlayerSkin player={player} />
           </div>
         </div>
       </Card>
-      <div className="8xl:top-0 xs:bottom-0">
+      <div className="flex gap-2 flex-wrap justify-center">
+        <ReloadPageButton />
         <CodeDialog
           title="Player Data"
           description="The player's data from the API"
@@ -52,6 +47,9 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
         >
           <Button>View as JSON</Button>
         </CodeDialog>
+        <CacheInformation cache={player.cache}>
+          <Button>Cache Information</Button>
+        </CacheInformation>
       </div>
     </div>
   );

src/app/components/player/skin-part-image.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import { capitalizeFirstLetter } from "@/common/string-utils";
+import { capitalizeFirstLetter } from "@/app/common/string-utils";
 import { SkinPart } from "mcutils-library";
 import Link from "next/link";
 import { ReactElement } from "react";

src/app/components/player/try-a-player.tsx

@@ -0,0 +1,49 @@
+import { ReactElement } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
+import Image from "next/image";
+import config from "@root/config.json";
+import Link from "next/link";
+import { Card } from "@/app/components/card";
+
+/**
+ * The players to try out.
+ */
+const tryMePlayers: string[] = ["Notch", "jeb_", "Dinnerbone", "Grumm", "deadmau5"];
+
+export function TryAPlayer(): ReactElement {
+  return (
+    <Card>
+      <div className="flex flex-col items-center justify-center text-center">
+        <div>
+          <h2 className="text-lg font-semibold">Try a Player</h2>
+          <p className="text-muted-foreground">Try one of these players to see how the player view works.</p>
+        </div>
+
+        <div className="flex flex-wrap justify-center gap-2 max-w-2xl mt-4">
+          {tryMePlayers.map(playerName => (
+            <Tooltip key={playerName}>
+              <TooltipTrigger asChild>
+                <div className="flex items-center justify-center bg-background p-1.5 rounded-md gap-2">
+                  <Image
+                    src={`${config.apiEndpoint}/player/head/${playerName}`}
+                    alt={"The player's head"}
+                    width={32}
+                    height={32}
+                  />
+                  <Link href={`/player/${playerName}`} className="hover:opacity-85 transform-gpu transition-all">
+                    {playerName}
+                  </Link>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>
+                  Click to try the player <b>{playerName}</b>.
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </div>
+      </div>
+    </Card>
+  );
+}

src/app/components/reload-page-button.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { ReactElement } from "react";
+import { Button } from "@/app/components/ui/button";
+import { ArrowPathIcon } from "@heroicons/react/16/solid";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
+
+export function ReloadPageButton(): ReactElement {
+  /**
+   * Reload the page.
+   */
+  function reload(): void {
+    window.location.reload();
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button onClick={() => reload()}>
+          <ArrowPathIcon className="w-4 h-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Reload the page</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}

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

@@ -1,7 +1,7 @@
 "use client";
 
-import { capitalizeFirstLetter } from "@/common/string-utils";
-import { useToast } from "@/common/use-toast";
+import { capitalizeFirstLetter } from "@/app/common/string-utils";
+import { useToast } from "@/app/common/use-toast";
 import { getServer, ServerPlatform } from "mcutils-library";
 import { useRouter } from "next/navigation";
 import { ReactElement, useState } from "react";
@@ -57,13 +57,14 @@ export function LookupServer({ currentPlatform, currentServer }: LookupServerPro
         description: (err as Error).message,
         duration: 5000,
       });
-      return setLoading(false);
+      setLoading(false);
     }
   };
 
   return (
     <form
       className="flex flex-col gap-2 justify-center items-center mt-4"
+      autoComplete="off"
       action={(form: FormData) => {
         lookupServer(form.get("platform") as ServerPlatform, form.get("query") as string);
       }}

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

@@ -1,10 +1,10 @@
-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";
 import { CodeDialog } from "../code-dialog";
 import { Button } from "../ui/button";
+import { CacheInformation } from "@/app/components/cache-information";
+import { ReloadPageButton } from "@/app/components/reload-page-button";
 
 type ServerViewProps = {
   /**
@@ -20,48 +20,28 @@ type ServerViewProps = {
 
 export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
   return (
-    <div className="flex flex-col gap-2">
-      <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>
-      <div className="8xl:top-0 xs:bottom-0">
+    <div className="flex relative flex-col gap-2 items-center w-screen">
+      <div>
+        <Image
+          src={`https://api.mcutils.xyz/server/java/preview/${server.hostname}`}
+          alt={"The server preview"}
+          width={650}
+          height={256}
+          unoptimized
+        />
+      </div>
+      <div className="flex gap-2 flex-wrap justify-center">
+        <ReloadPageButton />
         <CodeDialog
           title="Server Data"
-          description="The server's data from the API"
+          description="The servers's data from the API"
           code={JSON.stringify(server, undefined, 2)}
         >
           <Button>View as JSON</Button>
         </CodeDialog>
+        <CacheInformation cache={server.cache}>
+          <Button>Cache Information</Button>
+        </CacheInformation>
       </div>
     </div>
   );

src/app/components/server/try-a-server.tsx

@@ -0,0 +1,54 @@
+import { ReactElement } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
+import Image from "next/image";
+import Link from "next/link";
+import { capitalizeFirstLetter } from "@/app/common/string-utils";
+import { Card } from "@/app/components/card";
+import { ServerPlatform } from "mcutils-library";
+import { TryMeServer } from "@/app/types/server/try-me-server";
+
+/**
+ * The servers to try out.
+ */
+const tryMeServers: TryMeServer[] = [
+  { platform: ServerPlatform.Java, hostname: "mc.hypixel.net" },
+  { platform: ServerPlatform.Java, hostname: "wildprison.net" },
+  { platform: ServerPlatform.Java, hostname: "cubecraft.net" },
+  { platform: ServerPlatform.Bedrock, hostname: "geo.hivebedrock.network" },
+];
+
+export function TryAServer(): ReactElement {
+  return (
+    <Card>
+      <div className="flex flex-col items-center justify-center text-center">
+        <div>
+          <h2 className="text-lg font-semibold">Try a Server</h2>
+          <p className="text-muted-foreground">Try one of these servers to see how the server view works.</p>
+        </div>
+
+        <div className="flex flex-wrap justify-center gap-2 max-w-2xl mt-4">
+          {tryMeServers.map(({ platform, hostname }) => (
+            <Tooltip key={hostname}>
+              <TooltipTrigger asChild>
+                <div className="flex items-center justify-center bg-background p-1.5 rounded-md gap-2">
+                  <Image src={`/media/platform/${platform}.png`} alt={"The server's platform"} width={28} height={28} />
+                  <Link
+                    href={`/server/${platform}/${hostname}`}
+                    className="hover:opacity-85 transform-gpu transition-all"
+                  >
+                    {hostname}
+                  </Link>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>
+                  Click to try the <b>{capitalizeFirstLetter(platform)}</b> server: <b>{hostname}</b>
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </div>
+      </div>
+    </Card>
+  );
+}

src/app/components/stat.tsx

@@ -20,7 +20,7 @@ type StatProps = {
 
 export function Stat({ title, value, icon }: StatProps): ReactElement {
   return (
-    <div className="bg-secondary p-2 rounded-lg flex divide-x justify-center items-center text-center w-fit">
+    <div className="bg-card p-2 rounded-lg flex divide-x justify-center items-center text-center w-fit">
       <div className="pr-2">{icon}</div>
       <div className="pl-2">
         <p>{title}</p>

src/app/components/theme-toggle-button.tsx

@@ -2,11 +2,20 @@
 
 import { MoonIcon, SunIcon } from "@heroicons/react/16/solid";
 import { useTheme } from "next-themes";
-import { ReactElement } from "react";
+import { ReactElement, useEffect, useState } from "react";
 
 export function ToggleThemeButton(): ReactElement {
+  const [mounted, setMounted] = useState(false);
   const { theme, setTheme } = useTheme();
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <></>;
+  }
+
   return (
     <button
       className="rounded-lg"

src/app/components/title.tsx

@@ -0,0 +1,15 @@
+import { ReactElement } from "react";
+
+type TitleProps = {
+  title: string | ReactElement;
+  subtitle: string | ReactElement;
+};
+
+export function Title({ title, subtitle }: TitleProps): ReactElement {
+  return (
+    <div className="flex flex-col gap-2 items-center">
+      <div className="text-3xl text-primary font-semibold">{typeof title === "string" ? <h1>{title}</h1> : title}</div>
+      {typeof subtitle === "string" ? <p>{subtitle}</p> : subtitle}
+    </div>
+  );
+}

src/app/components/ui/breadcrumb.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/app/common/utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  ),
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return <Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />;
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

src/app/components/ui/button.tsx

@@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/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",

src/app/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/utils";
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />

src/app/components/ui/command.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@/app/common/utils";
+import { Dialog, DialogContent } from "@/app/components/ui/dialog";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className,
+    )}
+    shouldFilter={false}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

src/app/components/ui/context-menu.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/utils";
 
 const ContextMenu = ContextMenuPrimitive.Root;
 

src/app/components/ui/dialog.tsx

@@ -4,7 +4,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/utils";
 
 const Dialog = DialogPrimitive.Root;
 
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-md md:max-w-2xl xl:max-w-6xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid max-w-md md:max-w-2xl xl:max-w-6xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className,
       )}
       {...props}

src/app/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/utils";
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 

src/app/components/ui/label.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/utils";
 
 const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
 

src/app/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/app/common/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

src/app/components/ui/select.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/utils";
 
 const Select = SelectPrimitive.Root;
 

src/app/components/ui/separator.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,

src/app/components/ui/table.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/utils";
 import * as React from "react";
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(

src/app/components/ui/toast.tsx

@@ -5,7 +5,7 @@ import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/utils";
 
 const ToastProvider = ToastPrimitives.Provider;
 

src/app/components/ui/toaster.tsx

@@ -8,7 +8,7 @@ import {
   ToastTitle,
   ToastViewport,
 } from "@/app/components/ui/toast";
-import { useToast } from "@/common/use-toast";
+import { useToast } from "@/app/common/use-toast";
 
 export function Toaster() {
   const { toasts } = useToast();

src/app/components/ui/tooltip.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/utils";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 

src/app/font/fonts.ts

@@ -0,0 +1,6 @@
+import { Inter } from "next/font/google";
+
+/**
+ * The default font to use for the site.
+ */
+export const inter = Inter({ subsets: ["latin"] });

src/app/global-error.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import Error from "next/error";
+import { useEffect } from "react";
+import { Button } from "@/app/components/ui/button";
+
+export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <div className="flex text-center flex-col gap-4">
+      <div>
+        <h2 className="text-red-400 font-2xl font-semibold">Error</h2>
+        <p>An error occurred while rendering this page.</p>
+      </div>
+      <Button onClick={reset}>Reload</Button>
+    </div>
+  );
+}

src/app/globals.css

@@ -2,50 +2,51 @@
 @tailwind components;
 @tailwind utilities;
 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 95%;
+    --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
+    --popover-foreground: 0 0% 3.9%;
     --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 355.7 100% 97.3%;
-    --secondary: 5 5% 95%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 142.1 76.2% 36.3%;
-    --radius: 0.5rem;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.3rem;
   }
 
   .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 0 0% 95%;
-    --card: 24 9.8% 10%;
-    --card-foreground: 0 0% 95%;
-    --popover: 0 0% 9%;
-    --popover-foreground: 0 0% 95%;
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 8%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
     --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 144.9 80.4% 10%;
-    --secondary: 240 3.7% 15.9%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 15%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 12 6.5% 15.1%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-    --border: 240 5.9% 30%;
-    --input: 240 3.7% 15.9%;
-    --ring: 142.4 71.8% 29.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
   }
 }
 

src/app/layout.tsx

@@ -1,4 +1,3 @@
-import { Fonts } from "@/common/fonts";
 import { Metadata, Viewport } from "next";
 import Script from "next/script";
 import { ReactElement } from "react";
@@ -6,31 +5,32 @@ import Container from "./components/container";
 import ThemeProvider from "./components/theme-provider";
 import { Toaster } from "./components/ui/toaster";
 import { TooltipProvider } from "./components/ui/tooltip";
+import { inter } from "@/app/font/fonts";
+import config from "@root/config.json";
 
 import "./globals.css";
-import config from "@root/config.json";
 
 export const viewport: Viewport = {
   themeColor: "#3498DB",
 };
 
 export const metadata: Metadata = {
-  metadataBase: new URL(config.siteUrl),
+  metadataBase: new URL(config.publicUrl),
   title: {
-    template: config.siteName + " - %s",
-    default: config.siteName,
+    template: "%s - " + config.name,
+    default: config.name,
   },
-  description: config.siteDescription,
+  description: config.description,
   keywords: "Minecraft, APIs, wrapper, utility, development",
   openGraph: {
-    title: config.siteName,
-    description: config.siteDescription,
-    url: config.siteUrl,
+    title: config.name,
+    description: config.description,
+    url: config.publicUrl,
     locale: "en_US",
     type: "website",
     images: [
       {
-        url: "https://git.fascinated.cc/MinecraftUtilities/Assets/raw/branch/master/logo.png",
+        url: `${config.publicUrl}/media/logo.png`,
       },
     ],
   },
@@ -47,7 +47,7 @@ export default function RootLayout({
   return (
     <>
       <Script defer data-domain="mcutils.xyz" src="https://analytics.fascinated.cc/js/script.js" />
-      <html className={Fonts.inter.className} lang="en" suppressHydrationWarning>
+      <html className={inter.className} lang="en" suppressHydrationWarning>
         <head />
         <body>
           <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>

src/app/not-found.tsx

@@ -0,0 +1,17 @@
+import Link from "next/link";
+import { Button } from "@/app/components/ui/button";
+import { ReactElement } from "react";
+
+export default function NotFound(): ReactElement {
+  return (
+    <div className="flex text-center flex-col gap-4">
+      <div>
+        <h2 className="text-red-400 font-2xl font-semibold">Not Found</h2>
+        <p>The page you are looking for was not found.</p>
+      </div>
+      <Link href="/">
+        <Button>Return Home</Button>
+      </Link>
+    </div>
+  );
+}

src/app/types/create-haste-button.ts

@@ -0,0 +1,6 @@
+export type CreateHasteButtonProps = {
+  /**
+   * The content to create the haste with.
+   */
+  content: string;
+};

src/app/types/landing/landing-button.tsx

@@ -0,0 +1,27 @@
+export type LandingButton = {
+  /**
+   * 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;
+
+  /**
+   * The class name to apply to the button.
+   */
+  className?: string;
+};

src/app/types/player/page-params.ts

@@ -0,0 +1,5 @@
+export type PlayerPageParams = {
+  params: {
+    id: string;
+  };
+};

src/app/types/server/page-params.ts

@@ -0,0 +1,8 @@
+import { ServerPlatform } from "mcutils-library";
+
+export type ServerPageParams = {
+  params: {
+    platform: ServerPlatform;
+    hostname: string;
+  };
+};

src/app/types/server/try-me-server.ts

@@ -0,0 +1,13 @@
+import { ServerPlatform } from "mcutils-library";
+
+export type TryMeServer = {
+  /**
+   * The platform of the server.
+   */
+  platform: ServerPlatform;
+
+  /**
+   * The hostname of the server.
+   */
+  hostname: string;
+};