Update dependency @types/react to v18.3.11

Reviewed-on: #68

.eslintrc.json

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

.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.
+# Get the git commit hash
-# Learn more here: https://nextjs.org/telemetry
+ARG GIT_REV
-# Uncomment the following line in case you want to disable telemetry during the build.
+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,7 +46,8 @@ FROM base AS runner
 WORKDIR /app
 
 ENV NODE_ENV production
-# Uncomment the following line in case you want to disable telemetry during runtime.
+
+# Disable telemetry during runtime
 ENV NEXT_TELEMETRY_DISABLED 1
 
 RUN addgroup --system --gid 1001 nodejs

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
+See [The Website](https://mcutils.xyz) or [Minecraft Utilities Documentation](https://mcutils.xyz/docs) for more information.
-
-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.

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/landing.md

@@ -1,11 +0,0 @@
----
-title: 
----
-
-# Minecraft Utilities Documentation
-
-Welcome to the Minecraft Utilities documentation! Here you can find information on how to use the various features of the plugin.
-
-## Getting Started
-
-This is still a work in progress, so please be patient as we continue to add more documentation.

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,4 +1,16 @@
-import createMDX from '@next/mdx'
+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 = {
@@ -17,6 +29,46 @@ const nextConfig = {
       },
     ],
   },
+  env: {
+    NEXT_PUBLIC_BUILD_ID: buildId,
+  },
+  experimental: {
+    mdxRs: true,
+  },
 };
 
-export default createMDX()(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"
   },
@@ -24,31 +25,46 @@
     "@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",
+    "cmdk": "^1.0.0",
-    "mcutils-library": "^1.2.6",
+    "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",
-    "remote-mdx": "^0.0.4",
+    "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)/documentation/[[...slug]]/page.tsx

@@ -1,49 +0,0 @@
-import { getDocumentation } from "@/common/documentation";
-import { CustomMDX } from "@/app/components/mx-components";
-
-export async function generateStaticParams() {
-  let documentationPages = getDocumentation();
-
-  return documentationPages.map(page => ({
-    slug: [page.slug],
-  }));
-}
-
-type DocumentationPageParams = {
-  params: {
-    slug?: string;
-  };
-};
-
-export default function Page({ params: { slug } }: DocumentationPageParams) {
-  const documentationPages = getDocumentation();
-  let page = documentationPages.find(page => page.slug === slug);
-
-  // Fallback to the landing page
-  if (!page) {
-    page = documentationPages.find(page => page.slug === "landing");
-  }
-
-  // Fallback to a 404 page if we still can't find the page
-  if (!page) {
-    page = {
-      metadata: {
-        title: "404 - Not Found",
-      },
-      content: "If you are seeing this, it means that the documentation page you are looking for does not exist.",
-      slug: "empty",
-    };
-  }
-
-  return (
-    <div className="w-full px-4 flex flex-col gap-4">
-      {/* The documentation page title */}
-      {page.metadata.title && <h1 className="text-center">{page.metadata.title}</h1>}
-
-      {/* The content of the documentation page */}
-      <div className="text-left w-full">
-        <CustomMDX source={page.content} />
-      </div>
-    </div>
-  );
-}

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

@@ -1,13 +1,13 @@
+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 { generateEmbed } from "@/common/embed";
+import { Title } from "@/app/components/title";
-import { capitalizeFirstLetter } from "@/common/string-utils";
-import { cn } from "@/common/utils";
 import { CachedEndpointStatus, getMojangEndpointStatus, Status } from "mcutils-library";
 import { Metadata, Viewport } from "next";
 import Link from "next/link";
 import { ReactElement } from "react";
-import { Colors } from "@/common/colors";
-import { Title } from "@/app/components/title";
 
 /**
  * Force the page to be dynamic, so it will be regenerated on every request
@@ -89,20 +89,19 @@ export default async function Page(): Promise<ReactElement> {
       >
         {endpoints.length == 0 && <p>Unable to fetch endpoint statuses</p>}
         {endpoints.length > 0 &&
-          endpoints.map((endpoint: CachedEndpointStatus) => {
+          endpoints.map((server: CachedEndpointStatus) => {
-            const { name, hostname, status } = endpoint;
+            const { name, endpoint, status } = server;
 
-            const url = `https://${hostname}`;
             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={url}
+                    href={endpoint}
                     className="text-sm text-primary hover:opacity-75 transition-all transform-gpu"
                     target="_blank"
                   >
-                    <p>{url}</p>
+                    <p>{endpoint}</p>
                   </Link>
                 </div>
                 <div className={cn("flex items-center font-semibold", getColor(status))}>

src/app/(pages)/page.tsx

@@ -5,47 +5,15 @@ 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 = {
+const buttons: 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;
-};
-
-const buttons: Button[] = [
   {
     title: "Get Started",
-    tooltip: "Click to get started!",
+    tooltip: "Click to get started with the API",
-    url: "/documentation",
+    url: "/docs",
-  },
+    className:
-  {
+      "bg-gradient-to-r from-indigo-600 to-emerald-600 px-7 hover:opacity-75 transition-all transform-gpu text-white",
-    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,
   },
 ];
 
@@ -70,7 +38,7 @@ export default function Home(): ReactElement {
             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>

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

@@ -4,34 +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 { Colors } from "@/app/common/colors";
-import { generateEmbed } from "@/common/embed";
+import { generateEmbed } from "@/app/common/embed";
-import { isValidPlayer } from "@/common/player";
+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";
 
-/**
+export const revalidate = 60;
- * Force the page to be dynamic, so it will be regenerated on every request
- */
-export const revalidate = 0;
 
-type Params = {
+export async function generateViewport({ params: { id } }: PlayerPageParams): Promise<Viewport> {
-  params: {
-    id: string;
-  };
-};
-
-export async function generateViewport({ params: { id } }: Params): 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({
@@ -58,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
 
@@ -101,6 +94,9 @@ export default async function Page({ params: { id } }: Params): Promise<ReactEle
           </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 { Colors } from "@/app/common/colors";
-import { generateEmbed } from "@/common/embed";
+import { generateEmbed } from "@/app/common/embed";
-import { formatNumber } from "@/common/number-utils";
+import { isValidServer } from "@/app/common/server";
-import { isValidServer } from "@/common/server";
+import { capitalizeFirstLetter } from "@/app/common/string-utils";
-import { capitalizeFirstLetter } from "@/common/string-utils";
 import config from "@root/config.json";
 import {
   CachedBedrockMinecraftServer,
@@ -19,18 +18,10 @@ import {
 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";
 
-/**
+export const revalidate = 60;
- * Force the page to be dynamic, so it will be regenerated on every request
- */
-export const revalidate = 0;
-
-type Params = {
-  params: {
-    platform: ServerPlatform;
-    hostname: string;
-  };
-};
 
 /**
  * Gets the favicon for a server
@@ -60,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({
@@ -85,18 +76,14 @@ export async function generateMetadata({ params: { platform, hostname } }: Param
 
   try {
     const server = await getServer(platform, hostname);
-    const { hostname: serverHostname, players } = server;
+    const { hostname: serverHostname } = 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.";
 
     return generateEmbed({
       title: `${serverHostname} ${capitalizeFirstLetter(platform)} Server`,
       embedTitle: `${capitalizeFirstLetter(platform)} Server: ${serverHostname}`,
-      description: description,
+      description: "Click to view more information about the server.",
-      image: favicon,
+      image: `${config.apiEndpoint}/server/${platform}/preview/${serverHostname}`,
+      cardType: "summary_large_image",
     });
   } catch (err) {
     // An error occurred
@@ -107,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
@@ -136,7 +123,10 @@ export default async function Page({ params: { platform, hostname } }: Params):
         <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 asChild>
@@ -154,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/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

@@ -20,6 +20,11 @@ type Embed = {
    * The image to show as the thumbmail.
    */
   image?: string;
+
+  /**
+   * The type of the card.
+   */
+  cardType?: "summary" | "summary_large_image";
 };
 
 /**
@@ -29,13 +34,17 @@ type 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, embedTitle, 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}`,
@@ -44,7 +53,7 @@ export function generateEmbed({ title, embedTitle, description, image }: Embed):
       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/card.tsx

@@ -1,5 +1,5 @@
 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";
 

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-screen md: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,20 +69,21 @@ function rowRenderer({
   });
 }
 
-export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps): ReactElement {
+export function CodeHighlighter({ code, language = "json", rounded = true }: CodeHighlighterProps): ReactElement {
   return (
-    <div className="text-xs md:text-md">
+    <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
-        language="json"
+        className={cn("max-h-[600px] !bg-secondary break-all rounded-md", rounded && "rounded-md")}
+        language={language}
         style={atomOneDark}
         wrapLongLines
         renderer={rowRenderer}
-        customStyle={{
-          maxHeight: "600px",
-          backgroundColor: "hsl(var(--background-accent))",
-          wordBreak: "break-all",
-          borderRadius: rounded ? "0.75rem" : undefined,
-        }}
       >
         {code}
       </SyntaxHighlighter>

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,8 +3,16 @@
 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 () => {
@@ -19,7 +27,10 @@ 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"
+      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"
     >

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

@@ -1,6 +1,5 @@
 import Image from "next/image";
 import { ReactElement } from "react";
-import config from "@root/config.json";
 
 type LogoProps = {
   /**

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/mx-components.tsx

@@ -1,10 +0,0 @@
-import { MDXRemote } from "remote-mdx/rsc";
-
-const components = {
-  h1: (props: any) => <h1 className="text-2xl font-semibold pb-2" {...props} />,
-  h2: (props: any) => <h1 className="text-xl font-semibold pb-2 pt-4" {...props} />,
-};
-
-export function CustomMDX(props: any) {
-  return <MDXRemote {...props} components={{ ...components, ...(props.components || {}) }} />;
-}

src/app/components/navbar.tsx

@@ -8,6 +8,8 @@ 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 = {
   /**
@@ -20,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.
@@ -31,12 +38,13 @@ 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: "/documentation", 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 (
     <Card
@@ -44,22 +52,24 @@ export default function NavBar(): ReactElement {
       classNameContent="p-0 relative rounded-lg flex justify-between items-center gap-3 px-3 bg-opacity-85 h-12"
     >
       {/* Left */}
-      <div className="z-50">
+      <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 />
-          <p className="hidden lg:block text-lg font-semibold">Minecraft Utilities</p>
         </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}
@@ -73,7 +83,7 @@ export default function NavBar(): ReactElement {
       {/* Right */}
       <div className="flex gap-4 items-center z-50">
         <ToggleThemeButton />
-        <GithubStar />
+        <GithubStar className={isDocs ? "hidden md:flex" : "hidden"} />
       </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) => {

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

@@ -8,6 +8,7 @@ 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 = {
   /**
@@ -38,6 +39,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
         </div>
       </Card>
       <div className="flex gap-2 flex-wrap justify-center">
+        <ReloadPageButton />
         <CodeDialog
           title="Player Data"
           description="The player's data from the API"

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 { capitalizeFirstLetter } from "@/app/common/string-utils";
-import { useToast } from "@/common/use-toast";
+import { useToast } from "@/app/common/use-toast";
 import { getServer, ServerPlatform } from "mcutils-library";
 import { useRouter } from "next/navigation";
 import { ReactElement, useState } from "react";

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

@@ -3,10 +3,8 @@ import Image from "next/image";
 import { ReactElement } from "react";
 import { CodeDialog } from "../code-dialog";
 import { Button } from "../ui/button";
-import config from "@root/config.json";
-import { cn } from "@/common/utils";
-import { minecraft } from "@/app/font/fonts";
 import { CacheInformation } from "@/app/components/cache-information";
+import { ReloadPageButton } from "@/app/components/reload-page-button";
 
 type ServerViewProps = {
   /**
@@ -23,37 +21,17 @@ type ServerViewProps = {
 export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
   return (
     <div className="flex relative flex-col gap-2 items-center w-screen">
-      <div
+      <div>
-        className={cn(
-          "w-[29rem] relative p-2 flex gap-2 rounded-lg pointer-events-none scale-75 xs:scale-100",
-          'bg-[url("/media/server-background.png")]',
-        )}
-      >
-        {/* Favicon */}
         <Image
-          src={favicon || `${config.apiEndpoint}/server/icon/fallback`}
+          src={`https://api.mcutils.xyz/server/java/preview/${server.hostname}`}
-          alt={`${server.hostname}'s Favicon`}
+          alt={"The server preview"}
-          width={64}
+          width={650}
-          height={64}
+          height={256}
+          unoptimized
         />
-
-        {/* Name & MOTD */}
-        <div className={cn("flex flex-col leading-[1.3rem]", minecraft.className)}>
-          <h1>{server.hostname}</h1>
-          {server.motd.html.map((line: string, index: number): ReactElement => {
-            return <p key={index} className="pointer-events-auto" dangerouslySetInnerHTML={{ __html: line }}></p>;
-          })}
-        </div>
-
-        {/* Ping */}
-        <div className={cn("absolute top-0.5 right-0.5 flex items-center", minecraft.className)}>
-          <p>
-            {server.players.online}/{server.players.max}
-          </p>
-          <Image src="/media/full-ping.png" alt="Ping!" width={28} height={28} />
-        </div>
       </div>
       <div className="flex gap-2 flex-wrap justify-center">
+        <ReloadPageButton />
         <CodeDialog
           title="Server Data"
           description="The servers's data from the API"

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

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/common/utils";
+import { cn } from "@/app/common/utils";
 
 const Popover = PopoverPrimitive.Root;
 

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

@@ -1,16 +1,6 @@
 import { Inter } from "next/font/google";
 
-import localFont from "next/font/local";
-import { NextFont } from "next/dist/compiled/@next/font";
-
 /**
  * The default font to use for the site.
  */
 export const inter = Inter({ subsets: ["latin"] });
-
-/**
- * The Minecraft font to use for the site.
- */
-export const minecraft: NextFont = localFont({
-  src: "../font/Minecraft.otf",
-});

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,51 +2,51 @@
 @tailwind components;
 @tailwind utilities;
 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
+    --card: 0 0% 95%;
-    --card-foreground: 240 10% 3.9%;
+    --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%;
+    --primary-foreground: 0 0% 98%;
-    --secondary: 5 5% 95%;
+    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 240 5.9% 10%;
+    --secondary-foreground: 0 0% 9%;
-    --muted: 240 4.8% 95.9%;
+    --muted: 0 0% 96.1%;
-    --muted-foreground: 240 3.8% 46.1%;
+    --muted-foreground: 0 0% 45.1%;
-    --accent: 240 4.8% 95.9%;
+    --accent: 0 0% 96.1%;
-    --accent-foreground: 240 5.9% 10%;
+    --accent-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
+    --border: 0 0% 89.8%;
-    --input: 240 5.9% 90%;
+    --input: 0 0% 89.8%;
-    --ring: 221.2 83.2% 53.3%;
+    --ring: 0 0% 3.9%;
-    --radius: 0.5rem;
+    --radius: 0.3rem;
   }
 
   .dark {
-    --background: 20 14.3% 6.5%;
+    --background: 0 0% 3.9%;
-    --background-accent: 20 14.3% 8.5%;
+    --foreground: 0 0% 98%;
-    --foreground: 0 0% 95%;
+    --card: 0 0% 8%;
-    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 98%;
-    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 3.9%;
-    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 98%;
-    --popover-foreground: 0 0% 95%;
     --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 144.9 80.4% 10%;
+    --primary-foreground: 0 0% 9%;
-    --secondary: 240 3.7% 15.9%;
+    --secondary: 0 0% 9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 15%;
+    --muted: 0 0% 14.9%;
-    --muted-foreground: 240 5% 64.9%;
+    --muted-foreground: 0 0% 63.9%;
-    --accent: 12 6.5% 75%;
+    --accent: 0 0% 14.9%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
+    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 30%;
+    --border: 0 0% 14.9%;
-    --input: 240 3.7% 15.9%;
+    --input: 0 0% 14.9%;
-    --ring: 224.3 76.3% 48%;
+    --ring: 0 0% 83.1%;
   }
 }
 

src/app/layout.tsx

@@ -5,10 +5,10 @@ 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";
-import { inter } from "@/app/font/fonts";
 
 export const viewport: Viewport = {
   themeColor: "#3498DB",

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;
+};

src/common/documentation.ts

@@ -1,52 +0,0 @@
-import * as fs from "node:fs";
-import path from "node:path";
-
-type Metadata = {
-  title: string;
-};
-
-function parseFrontmatter(fileContent: string) {
-  let frontmatterRegex = /---\s*([\s\S]*?)\s*---/;
-  let match = frontmatterRegex.exec(fileContent);
-  let frontMatterBlock = match![1];
-  let content = fileContent.replace(frontmatterRegex, "").trim();
-  let frontMatterLines = frontMatterBlock.trim().split("\n");
-  let metadata: Partial<Metadata> = {};
-
-  frontMatterLines.forEach(line => {
-    let [key, ...valueArr] = line.split(": ");
-    let value = valueArr.join(": ").trim();
-    value = value.replace(/^['"](.*)['"]$/, "$1"); // Remove quotes
-    metadata[key.trim() as keyof Metadata] = value;
-  });
-
-  return { metadata: metadata as Metadata, content };
-}
-
-const documentationDirectory = path.join(process.cwd(), "documentation");
-
-/**
- * Gets the files for the documentation.
- */
-function getDocumentationFiles() {
-  return fs.readdirSync(documentationDirectory);
-}
-
-function getDocumentationFileContent(file: string) {
-  return fs.readFileSync(path.join(documentationDirectory, file), "utf-8");
-}
-
-export function getDocumentation() {
-  const files = getDocumentationFiles();
-
-  return files.map(file => {
-    const { metadata, content } = parseFrontmatter(getDocumentationFileContent(file));
-    let slug = path.basename(file, path.extname(file));
-
-    return {
-      metadata,
-      content,
-      slug,
-    };
-  });
-}

src/instrumentation.ts

@@ -0,0 +1,9 @@
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('../sentry.server.config');
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('../sentry.edge.config');
+  }
+}

tailwind.config.ts

@@ -3,7 +3,13 @@ import defaultTheme from "tailwindcss/defaultTheme";
 
 const config = {
   darkMode: ["class"],
-  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+    "../documentation",
+  ],
   prefix: "",
   theme: {
     container: {