fix(www): optimize statistics

apps/www/package.json

@@ -40,6 +40,7 @@
     "@unocss/transformer-directives": "^0.61.5",
     "@unocss/webpack": "^0.61.5",
     "@vercel/functions": "^2.0.0",
+    "@vercel/og": "^0.6.5",
     "ag-grid-react": "^33.0.3",
     "contentlayer": "^0.3.4",
     "cron": "^3.1.7",
@@ -60,6 +61,7 @@
     "next-themes": "^0.4.3",
     "nextjs-toploader": "^1.6.12",
     "nprogress": "^0.2.0",
+    "nuqs": "^2.4.1",
     "postcss-obfuscator": "^1.6.1",
     "prettier": "^3.3.1",
     "react": "19.0.0",
@@ -73,6 +75,7 @@
     "remark-gfm": "^4.0.0",
     "sonner": "^1.7.0",
     "stripe-gradient": "^1.0.1",
+    "swapy": "^1.0.5",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^4.0.7",
     "tailwindcss-animate": "^1.0.7",

apps/www/src/app/(main)/layout.tsx

@@ -43,6 +43,7 @@ import { FontBoundary } from "@/components/util/font-boundary";
 import { ClerkProvider } from "@/components/util/clerk-provider";
 import { Toaster } from "sonner";
 import { Footer } from "@/components/feat/footer/footer";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
 
 export default function RootLayout({
   children,
@@ -75,6 +76,7 @@ export default function RootLayout({
       >
         <ClerkProvider>
           <IsScript>
+            <NuqsAdapter>
               <FontBoundary>
                 <TooltipProvider>
                   <Toaster richColors position="top-center" />
@@ -85,6 +87,7 @@ export default function RootLayout({
                   </ClerkProvider>
                 </TooltipProvider>
               </FontBoundary>
+            </NuqsAdapter>
           </IsScript>
         </ClerkProvider>
       </ThemeProvider>

apps/www/src/app/(main)/server/[server]/page.tsx

@@ -1,5 +1,7 @@
+import { ServerProvider } from "@/components/feat/server-page/server-provider";
 import { ServerResponse } from "@/lib/types/mh-server";
 import type { Metadata } from "next";
+import { notFound } from "next/navigation";
 
 export async function generateMetadata({
   params,
@@ -7,19 +9,67 @@ export async function generateMetadata({
   params: Promise<{ server: string }>;
 }): Promise<Metadata> {
   const id = (await params).server;
-  const { server }: { server: ServerResponse } = await (
+  const { server }: { server: ServerResponse | undefined } = await (
     await fetch("https://api.minehut.com/server/" + id)
   ).json();
 
+  if (server === null) return notFound();
+
+  // Default fallback values
+  const defaultName = "Server not found";
+  const defaultDescription = "A server on Minehut, find it on MHSF!";
+
+  // Get server name or use fallback
+  const serverName = server?.name || defaultName;
+
+  // Generate the absolute URL for the OG image
+  const ogImageUrl = new URL(
+    `/api/og/server/${id}`,
+    process.env.NEXT_PUBLIC_APP_URL || "https://mhsf.app"
+  ).toString();
+
   return {
     applicationName: "MHSF",
-    title: `${server.name} | MHSF`,
+    title: `${serverName} | MHSF`,
     openGraph: {
-      title: server.name,
+      title: serverName,
-      description: "A server on Minehut, find it on MHSF!",
+      description: defaultDescription,
+      images: [
+        {
+          url: ogImageUrl,
+          width: 1200,
+          height: 630,
+          alt: `${serverName} server statistics`,
         },
-    description: "A server on Minehut, find it on MHSF!",
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: serverName,
+      description: defaultDescription,
+      images: [
+        {
+          url: ogImageUrl,
+          width: 1200,
+          height: 630,
+          alt: `${serverName} server statistics`,
+        },
+      ],
+    },
+    description: defaultDescription,
   };
 }
 
-export default function ServerPage() {}
+export default async function ServerPage({
+  params,
+}: {
+  params: Promise<{ server: string }>;
+}) {
+  const slug = (await params).server;
+
+  return (
+    <main>
+      <ServerProvider serverId={slug} />
+    </main>
+  );
+}

apps/www/src/app/api/og/fonts/index.ts

@@ -0,0 +1,16 @@
+// For Edge runtime, we need to use fetch instead of fs
+export async function loadFonts() {
+	const interRegularFontP = fetch(
+		new URL("./Inter-Regular.ttf", import.meta.url),
+	).then((res) => res.arrayBuffer());
+
+	const interMediumFontP = fetch(
+		new URL("./Inter-Medium.ttf", import.meta.url),
+	).then((res) => res.arrayBuffer());
+
+	const interBoldFontP = fetch(
+		new URL("./Inter-Bold.ttf", import.meta.url),
+	).then((res) => res.arrayBuffer());
+
+	return Promise.all([interRegularFontP, interMediumFontP, interBoldFontP]);
+}

apps/www/src/app/api/og/server/[id]/route.tsx

@@ -0,0 +1,486 @@
+import { ImageResponse } from "@vercel/og";
+import { ServerResponse } from "@/lib/types/mh-server";
+import { NextRequest } from "next/server";
+import { miniMessage } from "minimessage-js";
+import { loadFonts } from "../../fonts";
+
+export const runtime = "edge";
+
+// Function to parse MiniMessage and create JSX elements with styling
+function parseMotdToJsx(text: string) {
+  try {
+    // First convert to HTML
+    const htmlContent = miniMessage().toHTML(miniMessage().deserialize(text));
+
+    // Simple parsing of the HTML to extract basic formatting
+    // This is a simplified approach that handles common formatting
+    const parts = [];
+    let currentText = "";
+    let inBold = false;
+    let inItalic = false;
+    let inUnderline = false;
+    let currentColor = "white";
+    let partIndex = 0;
+
+    // Create a simple parser for the HTML content
+    let i = 0;
+    while (i < htmlContent.length) {
+      // Handle opening tags
+      if (htmlContent[i] === "<") {
+        // Add current text if any
+        if (currentText) {
+          parts.push(
+            <span
+              key={`part-${partIndex++}`}
+              style={{
+                color: currentColor,
+                fontWeight: inBold ? "bold" : "normal",
+                fontStyle: inItalic ? "italic" : "normal",
+                textDecoration: inUnderline ? "underline" : "none",
+                display: "flex",
+              }}
+            >
+              {currentText}
+            </span>
+          );
+          currentText = "";
+        }
+
+        // Find the end of the tag
+        const tagEnd = htmlContent.indexOf(">", i);
+        if (tagEnd === -1) break;
+
+        const tag = htmlContent.substring(i, tagEnd + 1);
+
+        // Handle specific tags
+        if (tag.includes('span style="font-weight: bold"') || tag === "<b>") {
+          inBold = true;
+        } else if (tag === "</b>" || (tag === "</span>" && inBold)) {
+          inBold = false;
+        } else if (
+          tag.includes('span style="font-style: italic"') ||
+          tag === "<i>"
+        ) {
+          inItalic = true;
+        } else if (tag === "</i>" || (tag === "</span>" && inItalic)) {
+          inItalic = false;
+        } else if (
+          tag.includes('span style="text-decoration: underline"') ||
+          tag === "<u>"
+        ) {
+          inUnderline = true;
+        } else if (tag === "</u>" || (tag === "</span>" && inUnderline)) {
+          inUnderline = false;
+        } else if (tag.includes('span style="color:')) {
+          // Extract color
+          const colorMatch = tag.match(/color:\s*([^;"]+)/);
+          if (colorMatch?.[1]) {
+            currentColor = colorMatch[1];
+          }
+        } else if (tag === "</span>" && currentColor !== "white") {
+          currentColor = "white";
+        }
+
+        i = tagEnd + 1;
+      } else {
+        currentText += htmlContent[i];
+        i++;
+      }
+    }
+
+    // Add any remaining text
+    if (currentText) {
+      parts.push(
+        <span
+          key={`part-${partIndex++}`}
+          style={{
+            color: currentColor,
+            fontWeight: inBold ? "bold" : "normal",
+            fontStyle: inItalic ? "italic" : "normal",
+            textDecoration: inUnderline ? "underline" : "none",
+            display: "flex",
+          }}
+        >
+          {currentText}
+        </span>
+      );
+    }
+
+    return parts.length > 0
+      ? parts
+      : [
+          <span key="empty" style={{ display: "flex" }}>
+            No description available
+          </span>,
+        ];
+  } catch (error) {
+    console.error("Error parsing MOTD:", error);
+    return [
+      <span key="error" style={{ display: "flex" }}>
+        No description available
+      </span>,
+    ];
+  }
+}
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    // Load banner image
+    const bannerImageData = await fetch(
+      new URL("/branding/bg-banner.png", request.url)
+    ).then((res) => res.arrayBuffer());
+
+    const id = (await params).id;
+
+    // Load fonts
+    const [interRegular, interMedium, interBold] = await loadFonts();
+
+    // Fetch server data
+    const response = await fetch(`https://api.minehut.com/server/${id}`);
+    const { server }: { server: ServerResponse | undefined } =
+      await response.json();
+
+    if (!server) {
+      // Return a default banner for server not found
+      return new ImageResponse(
+        (
+          <div
+            style={{
+              display: "flex",
+              fontSize: 60,
+              color: "white",
+              width: "100%",
+              height: "100%",
+              padding: "50px 50px",
+              textAlign: "center",
+              justifyContent: "center",
+              alignItems: "center",
+              backgroundImage: `url(data:image/png;base64,${Buffer.from(bannerImageData).toString("base64")})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              fontFamily: "Inter",
+            }}
+          >
+            <div style={{ display: "flex" }}>
+              <span>Server not found</span>
+            </div>
+          </div>
+        ),
+        {
+          width: 1200,
+          height: 630,
+          fonts: [
+            {
+              name: "Inter",
+              data: interRegular,
+              style: "normal",
+              weight: 400,
+            },
+          ],
+        }
+      );
+    }
+
+    // Format player count
+    const playerCount = server.playerCount || 0;
+    const maxPlayers = server.maxPlayers || 0;
+
+    // Format last online date
+    const lastOnline = server.last_online
+      ? new Date(server.last_online).toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+        })
+      : "Unknown";
+
+    // Format creation date
+    const creationDate = server.creation
+      ? new Date(server.creation).toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+        })
+      : "Unknown";
+
+    // Determine status color
+    const statusColor = server.online ? "#4ade80" : "#ef4444";
+
+    // Parse MOTD to JSX with formatting
+    const motdElements = parseMotdToJsx(
+      server.motd || "No description available"
+    );
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "100%",
+            padding: "50px 50px",
+            position: "relative",
+            overflow: "hidden",
+            fontFamily: "Inter",
+            backgroundImage: `url(data:image/png;base64,${Buffer.from(bannerImageData).toString("base64")})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+        >
+          {/* Decorative elements */}
+          <div
+            style={{
+              position: "absolute",
+              top: "-100px",
+              right: "-100px",
+              width: "400px",
+              height: "400px",
+              borderRadius: "50%",
+              background: "rgba(79, 70, 229, 0.1)",
+              filter: "blur(40px)",
+              display: "flex",
+            }}
+          />
+          <div
+            style={{
+              position: "absolute",
+              bottom: "-100px",
+              left: "-100px",
+              width: "300px",
+              height: "300px",
+              borderRadius: "50%",
+              background: "rgba(236, 72, 153, 0.1)",
+              filter: "blur(40px)",
+              display: "flex",
+            }}
+          />
+
+          {/* Header with server name and status */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              marginBottom: "20px",
+            }}
+          >
+            <div
+              style={{
+                width: "24px",
+                height: "24px",
+                borderRadius: "50%",
+                background: statusColor,
+                marginRight: "15px",
+                display: "flex",
+              }}
+            />
+            <h1 style={{ fontSize: 40, fontWeight: "bold", margin: 0 }}>
+              {server.name}
+            </h1>
+          </div>
+
+          {/* MOTD with formatting */}
+          <div
+            style={{
+              fontSize: 32,
+              marginBottom: "30px",
+              opacity: 0.9,
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              gap: "4px",
+            }}
+          >
+            {motdElements}
+          </div>
+
+          {/* Stats grid */}
+          <div
+            style={{
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "30px",
+              marginTop: "auto",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                minWidth: "200px",
+              }}
+            >
+              <div style={{ fontSize: 24, opacity: 0.7, display: "flex" }}>
+                <span>Players</span>
+              </div>
+              <div
+                style={{ fontSize: 36, fontWeight: "bold", display: "flex" }}
+              >
+                <span>
+                  {playerCount}/{maxPlayers}
+                </span>
+              </div>
+            </div>
+
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                minWidth: "200px",
+              }}
+            >
+              <div style={{ fontSize: 24, opacity: 0.7, display: "flex" }}>
+                <span>Plan</span>
+              </div>
+              <div
+                style={{
+                  fontSize: 36,
+                  fontWeight: "bold",
+                  display: "flex",
+                  textTransform: "capitalize",
+                }}
+              >
+                <span>
+                  {server.server_plan.toLocaleLowerCase().split("_")[0] ||
+                    "Unknown"}
+                </span>
+              </div>
+            </div>
+
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                minWidth: "200px",
+              }}
+            >
+              <div style={{ fontSize: 24, opacity: 0.7, display: "flex" }}>
+                <span>Created</span>
+              </div>
+              <div
+                style={{ fontSize: 36, fontWeight: "bold", display: "flex" }}
+              >
+                <span>{creationDate}</span>
+              </div>
+            </div>
+
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                minWidth: "200px",
+              }}
+            >
+              <div style={{ fontSize: 24, opacity: 0.7, display: "flex" }}>
+                <span>Last Online</span>
+              </div>
+              <div
+                style={{ fontSize: 36, fontWeight: "bold", display: "flex" }}
+              >
+                <span>{lastOnline}</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginTop: "40px",
+              fontSize: 24,
+              opacity: 0.7,
+            }}
+          >
+            <div style={{ display: "flex" }}>
+              <span>mhsf.app</span>
+            </div>
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+        fonts: [
+          {
+            name: "Inter",
+            data: interRegular,
+            style: "normal",
+            weight: 400,
+          },
+          {
+            name: "Inter",
+            data: interBold,
+            style: "normal",
+            weight: 700,
+          },
+          {
+            name: "Inter",
+            data: interMedium,
+            style: "normal",
+            weight: 500,
+          },
+        ],
+      }
+    );
+  } catch (error) {
+    const [interRegular, interMedium, interBold] = await loadFonts();
+    console.error("Error generating OG image:", error);
+
+    // Try to load the banner image again in case it failed earlier
+    let bannerImageData: ArrayBuffer | undefined;
+    try {
+      bannerImageData = await fetch(
+        new URL("/branding/dark-banner.png", request.url)
+      ).then((res) => res.arrayBuffer());
+    } catch (e) {
+      // If banner image fails to load, use a solid color background
+      console.error("Failed to load banner image for error page:", e);
+    }
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            display: "flex",
+            fontSize: 60,
+            color: "white",
+            background: bannerImageData ? undefined : "#121212",
+            width: "100%",
+            height: "100%",
+            padding: "50px 50px",
+            textAlign: "center",
+            justifyContent: "center",
+            alignItems: "center",
+            fontFamily: "Inter",
+            ...(bannerImageData && {
+              backgroundImage: `url(data:image/png;base64,${Buffer.from(bannerImageData).toString("base64")})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+            }),
+          }}
+        >
+          <div style={{ display: "flex" }}>
+            <span>Error generating image</span>
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+        fonts: [
+          {
+            name: "Inter",
+            data: interRegular,
+            style: "normal",
+            weight: 400,
+          },
+        ],
+      }
+    );
+  }
+}

apps/www/src/app/globals.css

@@ -35,6 +35,99 @@
 
 @custom-variant dark (&:is(.dark *));
 
+:root {
+  --background: 0 0% 100%;
+  --border: 214.3 31.8% 91.4%;
+  --foreground: 0 0% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+  --ring: 0 0% 3.9%;
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+  --radius: 0.5rem;
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+
+  *,
+  ::before,
+  ::after {
+    /* Workaround for Tailwind being stupid */
+    border-color: hsl(214.3 31.8% 91.4%);
+  }
+}
+.dark {
+  --border: 216 34% 17%;
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+  --ring: 0 0% 83.1%;
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+
+  *,
+  ::before,
+  ::after {
+    @apply border-zinc-800;
+  }
+
+  --sidebar-background: 240 5.9% 10%;
+
+  --sidebar-foreground: 240 4.8% 95.9%;
+
+  --sidebar-primary: 224.3 76.3% 48%;
+
+  --sidebar-primary-foreground: 0 0% 100%;
+
+  --sidebar-accent: 240 3.7% 15.9%;
+
+  --sidebar-accent-foreground: 240 4.8% 95.9%;
+
+  --sidebar-border: 240 3.7% 15.9%;
+
+  --sidebar-ring: 217.2 91.2% 59.8%;
+}
+
 @theme {
   --animate-spin: spin 1s linear infinite;
   --animate-scale-in: scaleIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -171,101 +264,6 @@
     sans-serif;
 }
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --border: 214.3 31.8% 91.4%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-
-    *,
-    ::before,
-    ::after {
-      /* Workaround for Tailwind being stupid */
-      border-color: hsl(214.3 31.8% 91.4%);
-    }
-  }
-  .dark {
-    --border: 216 34% 17%;
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-
-    *,
-    ::before,
-    ::after {
-      @apply border-zinc-800;
-    }
-
-    --sidebar-background: 240 5.9% 10%;
-
-    --sidebar-foreground: 240 4.8% 95.9%;
-
-    --sidebar-primary: 224.3 76.3% 48%;
-
-    --sidebar-primary-foreground: 0 0% 100%;
-
-    --sidebar-accent: 240 3.7% 15.9%;
-
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-
-    --sidebar-border: 240 3.7% 15.9%;
-
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
 @layer utilities {
   body {
     @apply bg-slate-50 text-slate-900 dark:bg-zinc-950 dark:text-zinc-100 accent-slate-950 dark:accent-zinc-50;

apps/www/src/app/layout.tsx

@@ -47,6 +47,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <noscript>{children}</noscript>
+        <script src="https://unpkg.com/react-scan/dist/auto.global.js" />
         {children}
       </body>
     </html>

apps/www/src/components/feat/footer/status.tsx

@@ -8,10 +8,25 @@ import { cn } from "@/lib/utils";
 export function FooterStatus() {
   const { loading, incidents, statusURL } = useStatus();
 
+  const determineIfOutage = () => {
+    return (
+      !loading && incidents !== null && (incidents as Array<any>).length > 0
+    );
+  };
+
+  const determineWhatOutage = () => {
+    if (incidents !== null)
+      return {
+        name: (incidents as Array<any>)[0].attributes.name,
+        id: (incidents as Array<any>)[0].id,
+      };
+    return null;
+  };
+
   if (!loading)
     return (
       <Link
-        href={`https://${statusURL as string}`}
+        href={`https://${statusURL as string}${determineIfOutage() ? `/incident/${determineWhatOutage()?.id}` : ""}`}
         noExtraIcons
         target="_blank"
       >
@@ -19,18 +34,25 @@ export function FooterStatus() {
           <span
             className={cn(
               "text-sm flex items-center gap-2 font-normal",
-              "text-blue-600"
+              determineIfOutage() ? "text-orange-400" : "text-blue-600"
             )}
           >
             <div
-              className="items-center bg-blue-600 dark:bg-blue-600"
+              className={cn(
+                "items-center",
+                determineIfOutage()
+                  ? "bg-orange-400"
+                  : "bg-blue-600 dark:bg-blue-600"
+              )}
               style={{
                 width: ".5rem",
                 height: ".5rem",
                 borderRadius: "9999px",
               }}
             />
-            All systems normal
+            {determineIfOutage()
+              ? determineWhatOutage()?.name
+              : "All systems normal"}
           </span>
         </Button>
       </Link>

apps/www/src/components/feat/server-list/server-card.tsx

@@ -39,7 +39,7 @@ import {
 import { toast } from "sonner";
 import { useEffectOnce } from "@/lib/useEffectOnce";
 import { allTags } from "@/config/tags";
-import { ReactNode, useState } from "react";
+import { type ReactNode, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import {
   Dialog,
@@ -52,25 +52,21 @@ import {
 import { Button } from "@/components/ui/button";
 import { Copy } from "lucide-react";
 import useClipboard from "@/lib/useClipboard";
+import { useRouter } from "next/navigation";
+import { MOTDRenderer } from "../server-page/motd/motd-renderer";
 
-export default function ServerCard({
+export default function ServerCard({ server }: { server: OnlineServer }) {
-  server,
-  motd,
-}: {
-  server: OnlineServer;
-  motd: string | undefined;
-}) {
   const clipboard = useClipboard();
+  const router = useRouter();
 
   return (
     <Material
-      key={server.name}
       className="min-h-[250px] max-h-[250px] cursor-pointer outline-0 group hover:drop-shadow-card-hover focus:drop-shadow-card-hover transition-all"
-      onClick={() => toast.success("pluh")}
+      onClick={() => router.push(`/server/${server.staticInfo._id}`)}
       tabIndex={0}
       onKeyDown={(e) => {
         // Only send user when they hit "Enter"
-        if (e.key === "Enter") toast.success("keyboard");
+        if (e.key === "Enter") router.push(`/server/${server.staticInfo._id}`);
       }}
     >
       <span className="text-sm hidden group-focus-visible:block text-muted-foreground mb-2">
@@ -133,11 +129,13 @@ export default function ServerCard({
         </TooltipContent>
       </Tooltip>
       <TagShower server={server} className="mt-1 " />
-      {motd && (
+      {server.motd && (
-        <span
+        <MOTDRenderer
           className="block break-all overflow-hidden mt-3"
-          dangerouslySetInnerHTML={{ __html: motd }}
+          minecraftFont
-        />
+        >
+          {server.motd}
+        </MOTDRenderer>
       )}
     </Material>
   );
@@ -157,7 +155,8 @@ export type BadgeColor =
   | "gray-subtle"
   | "blue-subtle"
   | "purple-subtle"
-  | "custom";
+  | "custom"
+  | "rainbow";
 
 export function TagShower(props: {
   server: OnlineServer;
@@ -179,7 +178,7 @@ export function TagShower(props: {
     if (loading) {
       allTags.forEach((tag) => {
         if (!tag.condition) {
-          tag.name(props.server).then((n) => {
+          tag.name({ online: props.server }).then((n) => {
             compatiableTags.push({
               name: n,
               docsName: tag.docsName,
@@ -190,9 +189,9 @@ export function TagShower(props: {
             setLoading(false);
           });
         } else
-          tag.condition(props.server).then((b) => {
+          tag.condition({ online: props.server }).then((b) => {
-            if (b && tag.primary) {
+            if (b) {
-              tag.name(props.server).then((n) => {
+              tag.name({ online: props.server }).then((n) => {
                 compatiableTags.push({
                   name: n,
                   docsName: tag.docsName,

apps/www/src/components/feat/server-list/server-list.tsx

@@ -36,33 +36,11 @@ import { Separator } from "@/components/ui/separator";
 import { Statistics } from "./statistics";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { useInfiniteScrolling } from "@/lib/hooks/use-infinite-scrolling";
-import { useEffect, useState } from "react";
-import MiniMessage from "minimessage-js";
 
 export function ServerList() {
   const { servers, loading, serverCount, playerCount } = useServers();
   const { itemsLength, fetchMoreData, hasMoreData, data } =
     useInfiniteScrolling(servers);
-  const [motdList, setMotdList] = useState<{ name: string; motd: string }[]>(
-    []
-  );
-
-  useEffect(() => {
-    const result: Array<{ name: string; motd: string }> = [];
-    const mm = MiniMessage.miniMessage();
-    servers.forEach((c) => {
-      try {
-        result.push({
-          name: c.name,
-          motd: mm.toHTML(mm.deserialize(c.motd)),
-        });
-      } catch (e) {
-        console.log(e);
-      }
-    });
-
-    setMotdList(result);
-  }, [servers]);
 
   if (loading)
     return (
@@ -97,11 +75,7 @@ export function ServerList() {
       >
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 mt-3">
           {data.map((c) => (
-            <ServerCard
+            <ServerCard server={c} key={c.staticInfo._id} />
-              server={c}
-              key={c.name}
-              motd={motdList.find((x) => x.name === c.name)?.motd}
-            />
           ))}
         </div>
       </InfiniteScroll>

apps/www/src/components/feat/server-page/motd/motd-renderer.tsx

@@ -28,30 +28,53 @@
  * OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { NextApiRequest, NextApiResponse } from "next";
+import { miniMessage } from "minimessage-js";
-import { MongoClient } from "mongodb";
+import { cn } from "@/lib/utils";
-import { waitUntil } from "@vercel/functions";
+import localFont from "next/font/local";
+import { useEffect, useState } from "react";
+import { useSettingsStore } from "@/lib/hooks/use-settings-store";
 
-export default async function handler(
+const Font = localFont({ src: "./motd-font.ttf" });
-	req: NextApiRequest,
-	res: NextApiResponse,
-) {
-	const { server } = req.body;
 
-	if (server == null) {
+export function MOTDRenderer({
-		res.status(400).send({ message: "Couldn't find data" });
+  className,
-		return;
+  children,
+  minecraftFont,
+}: {
+  className?: string;
+  children: string;
+  minecraftFont?: boolean;
+}) {
+  const [result, setResult] = useState("");
+  const [error, setError] = useState(false);
+  const { get } = useSettingsStore();
+
+  useEffect(() => {
+    try {
+      setResult(miniMessage().toHTML(miniMessage().deserialize(children)));
+    } catch (e) {
+      setError(true);
+      setResult(
+        "Error while parsing MOTD. \n Please let the server owners know."
+      );
     }
+  }, []);
 
-	const client = new MongoClient(process.env.MONGO_DB as string);
+  return (
-	await client.connect();
+    <div
-
+      dangerouslySetInnerHTML={{
-	const db = client.db(process.env.CUSTOM_MONGO_DB ?? "mhsf");
+        __html: result,
-	const collection = db.collection("owned-servers");
+      }}
-
+      className={cn(
-	// Close the database, but don't close this
+        className,
-	// serverless instance until it happens
+        minecraftFont
-	waitUntil(client.close());
+          ? error
-
+            ? ""
-	res.send({ owned: (await collection.findOne({ server })) != undefined });
+            : (get("mc-font") ?? "true") === "true"
+              ? Font.className
+              : ""
+          : ""
+      )}
+    />
+  );
 }

apps/www/src/components/feat/server-page/motd/motd-row.tsx

@@ -28,26 +28,44 @@
  * OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { waitUntil } from "@vercel/functions";
+import { Separator } from "@/components/ui/separator";
-import { MongoClient } from "mongodb";
+import type { ServerResponse } from "@/lib/types/mh-server";
-import { NextApiRequest, NextApiResponse } from "next";
+import { MOTDRenderer } from "./motd-renderer";
+import useClipboard from "@/lib/useClipboard";
+import { miniMessage } from "minimessage-js";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
 
-export default async function handler(
+export function MOTDRow({ server }: { server: ServerResponse }) {
-	req: NextApiRequest,
+  const clipboard = useClipboard();
-	res: NextApiResponse,
-) {
-	const { server } = req.query;
-	if (!server) return res.status(400).send({ error: "No server was provided" });
 
-	const client = new MongoClient(process.env.MONGO_DB as string);
+  return (
-	await client.connect();
+    <div className="border rounded-xl p-4 relative max-h-[250px] ">
-
+      <strong className="text-lg">MOTD</strong>
-	const db = client.db(process.env.CUSTOM_MONGO_DB ?? "mhsf");
+      <br />
-	const collection = db.collection("achievements");
+      <Separator className="my-2" />
-
+      <MOTDRenderer
-	// Close the database, but don't close this
+        className={cn("mt-2 break-all overflow-y-auto max-h-[150px]")}
-	// serverless instance until it happens
+        minecraftFont
-	waitUntil(client.close());
+      >
-
+        {server.motd}
-	res.send({ result: await collection.find({ name: server }).toArray() });
+      </MOTDRenderer>
+      <br />
+      <small className="absolute bottom-[10px]">
+        {server.motd.length} characters,{" "}
+        <button
+          className="cursor-pointer underline"
+          type="button"
+          onClick={() => {
+            clipboard.writeText(
+              miniMessage().toHTML(miniMessage().deserialize(server.motd))
+            );
+            toast.success("Copied to clipboard.");
+          }}
+        >
+          click to copy HTML
+        </button>
+      </small>
+    </div>
+  );
 }

apps/www/src/components/feat/server-page/server-page-buttons.tsx

@@ -0,0 +1,83 @@
+/*
+ * MHSF, Minehut Server List
+ * All external content is rather licensed under the ECA Agreement
+ * located here: https://mhsf.app/docs/legal/external-content-agreement
+ *
+ * All code under MHSF is licensed under the MIT License
+ * by open source contributors
+ *
+ * Copyright (c) 2025 dvelo
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ * OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Button } from "@/components/ui/button";
+import { ServerResponse } from "@/lib/types/mh-server";
+import { SignedIn, SignedOut, useClerk } from "@clerk/nextjs";
+import { Heart, Star } from "lucide-react";
+import { useFavoriteStore } from "@/lib/hooks/use-favorite-store";
+import { useState } from "react";
+import { Spinner } from "@/components/ui/spinner";
+
+export function ServerPageButtons({ server }: { server: ServerResponse }) {
+  const clerk = useClerk();
+  const favoritesStore = useFavoriteStore(server.name);
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <>
+      <SignedIn>
+        <Button
+          className="flex items-center gap-2 text-sm"
+          variant={favoritesStore.isFavorite ? "secondary" : "default"}
+          onClick={async () => {
+            setLoading(true);
+            await favoritesStore.toggleFavorite(server.name);
+            setLoading(false);
+          }}
+          disabled={loading || favoritesStore.isFavorite === null}
+        >
+          <Heart
+            size={16}
+            fill={favoritesStore.isFavorite ? "red" : "transparent"}
+            color="red"
+          />
+          Favorite
+          {favoritesStore.favoriteNumber !== null && (
+            <code>{favoritesStore.favoriteNumber}</code>
+          )}
+          {loading && <Spinner />}
+        </Button>
+      </SignedIn>
+      <SignedOut>
+        <Button
+          className="flex items-center gap-2 text-sm"
+          onClick={() => clerk.openSignUp()}
+        >
+          <Star size={16} />
+          Favorite
+          {favoritesStore.favoriteNumber !== null && (
+            <code>{favoritesStore.favoriteNumber}</code>
+          )}
+        </Button>
+      </SignedOut>
+    </>
+  );
+}

apps/www/src/components/feat/server-page/server-page-tags.tsx

@@ -0,0 +1,184 @@
+"use client";
+import type { OnlineServer, ServerResponse } from "@/lib/types/mh-server";
+import { type ReactNode, useState } from "react";
+import type { BadgeColor } from "../server-list/server-card";
+import { allTags } from "@/config/tags";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useEffectOnce } from "@/lib/useEffectOnce";
+import { parseAsArrayOf, parseAsString, useQueryState } from "nuqs";
+
+export function ServerPageTags(props: {
+  server: ServerResponse;
+  onlineServer?: OnlineServer;
+  className?: string;
+  unclickable?: boolean;
+}) {
+  const [loading, setLoading] = useState<boolean | undefined>(undefined);
+  const [compatibleTags, setCompatibleTags] = useState<
+    Array<{
+      name: ReactNode;
+      docsName?: string;
+      tooltip: string;
+      htmlDocs: string;
+      role: BadgeColor;
+    }>
+  >([]);
+
+  const [tagOpen, setTagOpen] = useQueryState(
+    "t",
+    parseAsArrayOf(parseAsString).withOptions({
+      history: "push",
+      shallow: true,
+    })
+  );
+
+  useEffectOnce(() => {
+    if (loading === undefined) {
+      setLoading(true);
+      setCompatibleTags([]);
+
+      const tagPromises = allTags.map(async (tag) => {
+        try {
+          if (
+            !tag.condition ||
+            (await tag.condition({
+              server: props.server,
+              online: props.onlineServer,
+            }))
+          ) {
+            const name = await tag.name({
+              server: props.server,
+              online: props.onlineServer,
+            });
+            return {
+              name,
+              docsName: tag.docsName,
+              tooltip: tag.tooltipDesc,
+              htmlDocs: tag.htmlDocs,
+              role: tag.role === undefined ? "default" : tag.role,
+            };
+          }
+        } catch (error) {
+          console.error("Error processing tag:", error);
+        }
+        return null;
+      });
+
+      Promise.all(tagPromises)
+        .then((results) => {
+          setCompatibleTags(results.filter(Boolean) as any[]);
+          setLoading(false);
+        })
+        .catch((error) => {
+          console.error("Error loading tags:", error);
+          setLoading(false);
+        });
+    }
+  });
+
+  const toggleTagInQuery = async (
+    tagName: string | undefined,
+    shouldAdd: boolean
+  ) => {
+    if (!tagName) return;
+
+    try {
+      const currentTags = tagOpen || [];
+
+      if (shouldAdd) {
+        if (!currentTags.includes(btoa(tagName))) {
+          await setTagOpen([...currentTags, btoa(tagName)]);
+        }
+      } else {
+        const filteredTags = currentTags.filter((tag) => tag !== btoa(tagName));
+        await setTagOpen(filteredTags.length > 0 ? filteredTags : null);
+      }
+    } catch (error) {
+      console.error("Failed to update URL params:", error);
+    }
+  };
+
+  if (loading) {
+    return <></>;
+  }
+
+  return (
+    <div
+      className="font-normal tracking-normal flex flex-wrap"
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => e.stopPropagation()}
+    >
+      {compatibleTags.map((t) => {
+        const tagName = t.docsName || "";
+        const isOpen = tagOpen?.includes(btoa(tagName)) || false;
+
+        return (
+          <span key={tagName || String(t.name)} className="mr-1">
+            {props.unclickable ? (
+              <Badge variant={t.role} className={props.className}>
+                {t.name}
+              </Badge>
+            ) : (
+              <>
+                <Tooltip>
+                  <TooltipTrigger
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      toggleTagInQuery(tagName, true);
+                    }}
+                  >
+                    <Badge variant={t.role} className={props.className}>
+                      {t.name}
+                    </Badge>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <div className="font-normal">
+                      {t.tooltip}
+                      <br />
+                      Click the tag to learn more about it.
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+                <Dialog
+                  open={isOpen}
+                  onOpenChange={(open) => {
+                    toggleTagInQuery(tagName, open);
+                  }}
+                >
+                  <DialogContent>
+                    <DialogHeader>
+                      <DialogTitle>
+                        {'"'}
+                        {t.docsName === undefined ? t.name : t.docsName}
+                        {'"'} documentation
+                      </DialogTitle>
+                      <DialogDescription className="font-normal">
+                        <div
+                          className="prose prose-sm max-w-none dark:prose-invert"
+                          dangerouslySetInnerHTML={{ __html: t.htmlDocs }}
+                        />
+                      </DialogDescription>
+                    </DialogHeader>
+                  </DialogContent>
+                </Dialog>
+              </>
+            )}
+          </span>
+        );
+      })}
+    </div>
+  );
+}

apps/www/src/components/feat/server-page/server-page.tsx

@@ -0,0 +1,32 @@
+"use client";
+import type { ServerResponse } from "@/lib/types/mh-server";
+import IconDisplay from "../icons/minecraft-icon-display";
+import { ServerPageTags } from "./server-page-tags";
+import { Separator } from "@/components/ui/separator";
+import { ServerRows } from "./server-rows";
+import { ServerPageButtons } from "./server-page-buttons";
+
+export function ServerMainPage({ server }: { server: ServerResponse }) {
+  return (
+    <div className="pt-[150px] xl:px-[100px]">
+      <span className="flex items-center gap-2 w-full">
+        <div className="bg-secondary p-4 rounded-lg ml-4">
+          <IconDisplay server={server} />
+        </div>
+        <p className="w-full">
+          <div className="flex justify-between w-full">
+            <h1 className="text-2xl font-bold">{server.name}</h1>
+            <span>
+              <ServerPageButtons server={server} />
+            </span>
+          </div>
+          <span className="flex items-center gap-2 flex-wrap">
+            <ServerPageTags server={server} className="mt-1" />
+          </span>
+        </p>
+      </span>
+      <Separator className="my-6" />
+      <ServerRows server={server} />
+    </div>
+  );
+}

apps/www/src/components/feat/server-page/server-provider.tsx

@@ -0,0 +1,40 @@
+"use client";
+import { Placeholder } from "@/components/ui/placeholder";
+import { Spinner } from "@/components/ui/spinner";
+import { useServer } from "@/lib/hooks/use-server";
+import type { OnlineServer } from "@/lib/types/mh-server";
+import { X } from "lucide-react";
+import { ServerMainPage } from "./server-page";
+
+export function ServerProvider({ serverId }: { serverId: string }) {
+  const { server, error, loading } = useServer({ id: serverId });
+
+  if (loading)
+    return (
+      <div className="absolute top-[50%] left-[50%]">
+        <Spinner />
+      </div>
+    );
+
+  if (error !== null)
+    return (
+      <div className="absolute top-[50%] left-[50%]">
+        <Placeholder
+          icon={<X />}
+          title="Error while fetching server"
+          description={
+            <>
+              Try again later <br /> If this occurs again, please contact
+              support or make a GitHub issue. <br /> {error}
+            </>
+          }
+        />
+      </div>
+    );
+
+  return (
+    <div className="px-10">
+      <ServerMainPage server={server as OnlineServer} />
+    </div>
+  );
+}

apps/www/src/components/feat/server-page/server-rows.tsx

@@ -28,4 +28,18 @@
  * OTHER DEALINGS IN THE SOFTWARE.
  */
 
-// TODO: make multiple endpoint to allow achievements to be shown on the server-list
+import type { ServerResponse } from "@/lib/types/mh-server";
+import useClipboard from "@/lib/useClipboard";
+import { MOTDRow } from "./motd/motd-row";
+import { StatisticsMainRow } from "./stats/stats-main-row";
+
+export function ServerRows({ server }: { server: ServerResponse }) {
+  const clipboard = useClipboard();
+
+  return (
+    <span className="lg:grid lg:grid-cols-3 w-full gap-3">
+      <MOTDRow server={server} />
+      <StatisticsMainRow server={server} />
+    </span>
+  );
+}

apps/www/src/components/feat/server-page/stats/stats-main-row.tsx

@@ -0,0 +1,12 @@
+import { Separator } from "@/components/ui/separator";
+import type { ServerResponse } from "@/lib/types/mh-server";
+
+export function StatisticsMainRow({ server }: { server: ServerResponse }) {
+  return (
+    <span className="border rounded-xl p-4 relative col-span-2 min-h-[250px] max-h-[250px]">
+      <strong className="text-lg">Statistics</strong>
+      <br />
+      <Separator className="my-2" />
+    </span>
+  );
+}

apps/www/src/components/feat/settings/browser-settings.tsx

@@ -46,14 +46,17 @@ import {
 } from "@/components/ui/select";
 import { useEffect, useState } from "react";
 import { useSettingsStore } from "@/lib/hooks/use-settings-store";
+import { Switch } from "@/components/ui/switch";
 
 export function BrowserSettings() {
   const settingsStore = useSettingsStore();
   const [fontFamily, setFontFamily] = useState("inter");
+  const [mcFont, setMcFont] = useState(true);
 
   useEffect(() => {
     setFontFamily((settingsStore.get("font-family") ?? "inter") as string);
-  }, [settingsStore]);
+    setMcFont((settingsStore.get("mc-font") === "true") as boolean);
+  }, []);
 
   return (
     <Material className="mt-6 grid gap-4">
@@ -69,6 +72,24 @@ export function BrowserSettings() {
           <ModeToggle />
         </SettingContent>
       </Setting>
+      <Setting>
+        <SettingContent>
+          <SettingMeta>
+            <SettingTitle>Use Minecraft font</SettingTitle>
+            <SettingDescription>
+              Use Minecraft font for MOTD. Turning this off restores font
+              settings for MOTD's to a v1-like state.
+            </SettingDescription>
+          </SettingMeta>
+          <Switch
+            checked={mcFont}
+            onCheckedChange={(c) => {
+              settingsStore.set("mc-font", c, false);
+              setMcFont(c);
+            }}
+          />
+        </SettingContent>
+      </Setting>
       <Setting>
         <SettingContent>
           <SettingMeta>

apps/www/src/components/ui/badge.tsx

@@ -60,6 +60,8 @@ const badgeVariants = cva(
 		ring-blue-400 dark:ring-blue-400/30`,
         "purple-subtle": `bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400
 		ring-purple-400 dark:ring-purple-500/30`,
+        rainbow:
+          "text-white ring-transparent [background:_linear-gradient(45deg,rgba(255,_0,_0,_1)_0%,rgba(255,_154,_0,_1)_10%,rgba(208,_222,_33,_1)_20%,rgba(79,_220,_74,_1)_30%,rgba(63,_218,_216,_1)_40%,rgba(47,_201,_226,_1)_50%,rgba(28,_127,_238,_1)_60%,rgba(95,_21,_242,_1)_70%,rgba(186,_12,_248,_1)_80%,rgba(251,_7,_217,_1)_90%,rgba(255,_0,_0,_1)_100%);] backdrop-blur-sm opacity-60 ",
         custom: "",
       },
       allowIconOnly: {

apps/www/src/components/ui/button.tsx

@@ -49,7 +49,7 @@ const buttonVariants = cva(
 		    hover:bg-slate-100 dark:hover:bg-zinc-800 dark:hover:border-zinc-700 dark:hover:border-zinc-700 dark:active:bg-zinc-900 active:bg-slate-200`,
 
         tertiary:
-          "border border-transparent bg-transparent hover:bg-slate-100 dark:hover:bg-zinc-700/30 dark:text-zinc-200",
+          "bg-transparent hover:bg-slate-100 dark:hover:bg-zinc-700/30 dark:text-zinc-200",
 
         danger:
           "border border-red-500 bg-red-500 hover:text-red-500 hover:bg-transparent text-white",

apps/www/src/components/ui/context-menu.tsx

@@ -126,7 +126,7 @@ const ContextMenuItem = React.forwardRef<
     className={cn(
       "w-full px-2 rounded-lg z-100 min-h-[36px] font-normal flex items-center cursor-pointer dark:hover:bg-zinc-800/70",
       props.disabled ? "opacity-70 pointer-events-none cursor-not-allowed" : "",
-      "duration-100 border border-transparent bg-transparent hover:bg-slate-100 dark:text-zinc-200",
+      "duration-100 bg-transparent hover:bg-slate-100 dark:text-zinc-200",
       className
     )}
     {...props}

apps/www/src/components/ui/dropdown-menu.tsx

@@ -128,7 +128,7 @@ const DropdownMenuItem = React.forwardRef<
     className={cn(
       "w-full px-2 rounded-lg z-100 outline-hidden min-h-[36px] font-normal flex items-center cursor-pointer dark:hover:bg-zinc-800/70",
       props.disabled ? "opacity-70 pointer-events-none cursor-not-allowed" : "",
-      "duration-100 border border-transparent bg-transparent hover:bg-slate-100 dark:text-zinc-200",
+      "duration-100 bg-transparent hover:bg-slate-100 dark:text-zinc-200",
       className
     )}
     {...props}

apps/www/src/components/ui/switch.tsx

@@ -41,10 +41,9 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex w-11 h-6 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs",
+      "peer inline-flex w-11 h-6 shrink-0 cursor-pointer items-center rounded-full border-2 data-[state=unchecked]:border-transparent data-[state=checked]:!border-shadcn-primary shadow-xs",
-      "transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "transition-colors focus-visible:outline-hidden ",
-      "focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-shadcn-primary",
+      "data-[state=unchecked]:bg-input data-[state=checked]:bg-shadcn-primary",
-      "data-[state=unchecked]:bg-input",
       className
     )}
     {...props}

apps/www/src/config/tags.tsx

@@ -28,10 +28,11 @@
  * OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { BadgeColor } from "@/components/feat/server-list/server-card";
+import type { BadgeColor } from "@/components/feat/server-list/server-card";
-import { OnlineServer, ServerResponse } from "@/lib/types/mh-server";
+import { isFavorited } from "@/lib/api";
-import { ServerCog } from "lucide-react";
+import type { OnlineServer, ServerResponse } from "@/lib/types/mh-server";
-import { ReactNode } from "react";
+import { Cake, ServerCog } from "lucide-react";
+import type { ReactNode } from "react";
 
 const serverCache: any = {};
 
@@ -43,19 +44,22 @@ const serverCache: any = {};
 // htmlDocs: when clicked, what appears (formatted in HTML, string, using the `` string format)
 // docsName: name appearing on the title in the docs. (string)
 // role?: the role used on the badge (https://ui.shadcn.com/docs/components/badge + some custom others, string)
-// primary: does this tag appear **just** in the home screen (true), or **just** inside the server screen (false)
 // __disab: you shouldn't mess with this flag
 // __filter: if your name isn't static, set this to true
 //
 // You may also use `requestServer()` to grab the offline version of the server from the API, which may get you more information about the server (ServerResponse)
 export const allTags: Array<{
-  name: (server: OnlineServer) => Promise<string | ReactNode>;
+  name: (server: {
-  condition?: (server: OnlineServer) => Promise<boolean>;
+    online?: OnlineServer;
-  listCondition?: (server: ServerResponse) => Promise<boolean>;
+    server?: ServerResponse;
+  }) => Promise<string | ReactNode>;
+  condition?: (server: {
+    online?: OnlineServer;
+    server?: ServerResponse;
+  }) => Promise<boolean>;
   tooltipDesc: string;
   htmlDocs: string;
   docsName: string;
-  primary: boolean;
   role?: BadgeColor;
   __disab?: boolean;
   __filter?: boolean;
@@ -71,15 +75,23 @@ export const allTags: Array<{
             borderRadius: "9999px",
           }}
         />
-        {c.playerData.playerCount} online
+        {String(
+          c.online === undefined
+            ? c.server?.playerCount
+            : c.online.playerData.playerCount
+        )}{" "}
+        online
       </>
     ),
-    condition: async (c) => c.playerData.playerCount !== 0,
+    condition: async (c) =>
+      (c.online === undefined
+        ? c.server?.playerCount
+        : c.online.playerData.playerCount) !== 0,
     htmlDocs:
       "'Players Online' specifies the amount of players currently online. If this server is a network, the amount of players may not be accurate as this counter only counts the number of players coming directly from Minehut",
     tooltipDesc:
       "'Players Online' specifies the amount of players currently online.",
-    primary: true,
+
     role: "green-subtle",
     docsName: "Players Online",
     __filter: true,
@@ -98,10 +110,12 @@ export const allTags: Array<{
         0 online
       </>
     ),
-    condition: async (c) => c.playerData.playerCount === 0,
+    condition: async (c) =>
+      (c.online === undefined ? c.server?.playerCount : c.online.playerData) ===
+      0,
     htmlDocs: "Nobody is online this server.",
     tooltipDesc: "Nobody is online this server.",
-    primary: true,
+
     role: "gray-subtle",
     docsName: "Nobody Online",
     __filter: true,
@@ -113,48 +127,91 @@ export const allTags: Array<{
         Always Online
       </>
     ),
-    condition: async (b: any) => b.staticInfo.alwaysOnline,
+    condition: async (b) =>
+      b.online !== undefined && b.online.staticInfo?.alwaysOnline,
     tooltipDesc:
       '"Always online" means that the server will not shut down until the plan associated with it expires.',
     htmlDocs: `
     This tag appears on servers where the plan they are under allows the server to be always online. However, if the plan associated with the tag expires, the server will no longer be Always Online. <em>This is in servers with one of the more expensive plans, or just a server that is external.</em>
     `,
-    primary: true,
+
     docsName: "Always Online",
-    role: "blue",
+    role: "blue-subtle",
     __disab: true,
   },
   {
-    name: async (s) => s.staticInfo.planMaxPlayers + " max players",
+    name: async (s) =>
-    condition: async (s) => s.staticInfo.planMaxPlayers != null,
+      (s.online !== undefined
+        ? s.online.staticInfo.planMaxPlayers
+        : s.server?.maxPlayers) + " max players",
+    condition: async (s) =>
+      s.online !== undefined
+        ? s.online.staticInfo.planMaxPlayers != null
+        : s.server?.maxPlayers != null,
     tooltipDesc:
       "This tag represents the maximum amount of players the server can have at one time.",
     docsName: "Max Players",
     htmlDocs:
       "This tag represents the maximum amount of players the server can have at one time. This doesn't mean the amount of players before the server crashes, it means the amount Minehut said the server can handle or the plan the server is on. <em>However, sometimes it might not appear because the server is external.</em>",
-    primary: true,
+
-    role: "default",
+    role: "blue",
     __filter: true,
   },
   {
     name: async () => "Partner",
-    condition: async (s) => s.name === "CoreBoxx",
+    condition: async (s) =>
+      (s.server ?? s.online ?? { name: "" }).name === "CoreBoxx",
     tooltipDesc: "This server is a partner with MHSF.",
     docsName: "Partner",
     htmlDocs: "This tag represents that this server is a partner with MHSF.",
-    primary: true,
+    role: "rainbow",
-    role: "purple",
   },
   {
-    name: async (s) => <>{s.staticInfo.serverPlan.split(" ")[0]}</>,
+    name: async (s) => (
+      <span className="capitalize">
+        {(s.online !== undefined
+          ? s.online.staticInfo.serverPlan
+          : (s.server?.server_plan ?? "")
+        )
+          .split(" ")[0]
+          .split("_")[0]
+          .toLocaleLowerCase()}
+      </span>
+    ),
     tooltipDesc: "This tag represents the server plan this server is using.",
     docsName: "Server Plan",
     htmlDocs:
       "This tag represents the maximum amount of players the server can have at one time. This doesn't mean the amount of players before the server crashes, it means the amount Minehut said the server can handle or the plan the server is on. <em>However, sometimes it might not appear because the server is external.</em>",
-    primary: true,
+
     role: "red-subtle",
     __filter: true,
   },
+  {
+    name: async (s) => (
+      <span className="flex items-center gap-2">
+        <Cake size={16} /> Created {timeConverter(s.server?.creation)}
+      </span>
+    ),
+    condition: async (s) => s.server !== undefined,
+    tooltipDesc: "This tag represents the date this server was created.",
+    docsName: "Creation Date",
+    htmlDocs: "This tag represents the date this server was created.",
+    role: "gray",
+  },
+  {
+    name: async (s) => "Favorited",
+    condition: async (s) => {
+      const favorited = await isFavorited(
+        (s.online ?? s.server ?? { name: "" }).name
+      );
+      return favorited;
+    },
+    tooltipDesc: "This tag represents that you favorited this server.",
+    docsName: "Favorited",
+    htmlDocs:
+      "This tag shows that you favorited this server in MHSF. The amount of favorites is publicly shown to other users using MHSF. We do not provide server owners with data about who favorites a server, unlike traditional voting systems.",
+    role: "red",
+  },
   // deprecated
   /**{
     name: async () => "Velocity",
@@ -167,7 +224,7 @@ export const allTags: Array<{
     htmlDocs:
       'Does this server use <a href="https://papermc.io/software/velocity">Velocity</a>? This means that the server has multiple minigames/other servers gamemodes that are private, and this server is the lobby.',
     docsName: "Velocity",
-    primary: true,
+    
     role: "violet",
   }, */
 ];
@@ -175,161 +232,143 @@ export const allTags: Array<{
 export const allCategories: Array<{
   name: string;
   condition: (server: OnlineServer) => Promise<boolean>;
-  primary: boolean;
+  role?: BadgeColor;
-  role?:
-    | "default"
-    | "destructive"
-    | "outline"
-    | "secondary"
-    | "red"
-    | "orange"
-    | "yellow"
-    | "green"
-    | "lime"
-    | "blue"
-    | "teal"
-    | "cyan"
-    | "violet"
-    | "indigo"
-    | "purple"
-    | "fuchsia"
-    | "pink";
 }> = [
   {
     name: "Farming",
     condition: async (b: any) => {
       return b.allCategories.includes("farming");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "SMP",
     condition: async (b: any) => {
       return b.allCategories.includes("smp");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "Factions",
     condition: async (b: any) => {
       return b.allCategories.includes("factions");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "Meme",
     condition: async (b: any) => {
       return b.allCategories.includes("meme");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "Puzzle",
     condition: async (b: any) => {
       return b.allCategories.includes("puzzle");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "Box",
     condition: async (b: any) => {
       return b.allCategories.includes("box");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "Minigames",
     condition: async (b: any) => {
       return b.allCategories.includes("minigames");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "RPG",
     condition: async (b: any) => {
       return b.allCategories.includes("rpg");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "Parkour",
     condition: async (b: any) => {
       return b.allCategories.includes("parkour");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "Lifesteal",
     condition: async (b: any) => {
       return b.allCategories.includes("lifesteal");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "Prison",
     condition: async (b: any) => {
       return b.allCategories.includes("prison");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "Gens",
     condition: async (b: any) => {
       return b.allCategories.includes("gens");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "Skyblock",
     condition: async (b: any) => {
       return b.allCategories.includes("skyblock");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "Roleplay",
     condition: async (b: any) => {
       return b.allCategories.includes("roleplay");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "PvP",
     condition: async (b: any) => {
       return b.allCategories.includes("pvp");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "Modded",
     condition: async (b: any) => {
       return b.allCategories.includes("modded");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
   {
     name: "Creative",
     condition: async (b: any) => {
       return b.allCategories.includes("creative");
     },
-    primary: true,
+
-    role: "secondary",
+    role: "default",
   },
 ];
 
@@ -344,3 +383,26 @@ async function requestServer(s: OnlineServer): Promise<ServerResponse> {
   }
   return serverCache[s.name];
 }
+
+function timeConverter(UNIX_timestamp: any) {
+  const a = new Date(UNIX_timestamp);
+  const months = [
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "10",
+    "11",
+    "12",
+  ];
+  const year = a.getFullYear();
+  const month = months[a.getMonth()];
+  const date = a.getDate();
+  const time = month + "/" + date + "/" + year;
+  return time;
+}

apps/www/src/lib/hooks/use-customizations.tsx

@@ -0,0 +1,5 @@
+import { useEffectOnce } from "../useEffectOnce";
+
+export function useCustomizations() {
+  useEffectOnce(() => {});
+}

apps/www/src/lib/hooks/use-favorite-store.tsx

@@ -0,0 +1,59 @@
+import { useClerk } from "@clerk/nextjs";
+import { useState, useEffect } from "react";
+import {
+  favoriteServer,
+  getAccountFavorites,
+  getCommunityServerFavorites,
+  isFavorited,
+} from "../api";
+
+export function useFavoriteStore(server?: string) {
+  const [favorites, setFavorites] = useState<string[] | null>(null);
+  const [isFavorite, setIsFavorite] = useState<boolean | null>(null);
+  const [favoriteNumber, setFavoriteNumber] = useState<number | null>(null);
+  const { isSignedIn } = useClerk();
+
+  useEffect(() => {
+    if (isSignedIn) {
+      getAccountFavorites().then((favorites) => setFavorites(favorites));
+    }
+    if (server) {
+      getCommunityServerFavorites(server).then((number) =>
+        setFavoriteNumber(number)
+      );
+      if (isFavorite === null) {
+        isFavorited(server).then((isFavorite) => setIsFavorite(isFavorite));
+      }
+    }
+  }, [isSignedIn, server, isFavorite]);
+
+  return {
+    reloadFavorites: () => {
+      if (isSignedIn) {
+        getAccountFavorites().then((favorites) => setFavorites(favorites));
+      } else throw new Error("Not signed in");
+    },
+    favorites,
+    loading: favorites === null,
+    loadingNumber: favoriteNumber === null,
+    favoriteNumber,
+    isFavorite,
+    toggleFavorite: async (server: string) => {
+      if (isFavorite === null) throw new Error("Hold up lemme load rq");
+      if (favoriteNumber === null) throw new Error("Nah");
+      await favoriteServer(server);
+
+      // Resolve remote differences
+      if (isFavorite === true) {
+        setIsFavorite(false);
+        setFavoriteNumber(favoriteNumber - 1);
+      }
+      if (isFavorite === false) {
+        setIsFavorite(true);
+        setFavoriteNumber(favoriteNumber + 1);
+      }
+    },
+    getServerFavoritesNumber: async (server: string) =>
+      await getCommunityServerFavorites(server),
+  };
+}

apps/www/src/lib/hooks/use-infinite-scrolling.tsx

@@ -34,7 +34,7 @@ import type { OnlineServer } from "../types/mh-server";
 const itemsPerScroll = 40;
 
 export function useInfiniteScrolling(servers: OnlineServer[]) {
-  const [currentOffset, setCurrentOffset] = useState(0);
+  const [currentOffset, setCurrentOffset] = useState(itemsPerScroll);
   const [data, setData] = useState<OnlineServer[]>([]);
   const [hasMoreData, setHasMoreData] = useState(true);
 
@@ -46,6 +46,7 @@ export function useInfiniteScrolling(servers: OnlineServer[]) {
   return {
     itemsLength: currentOffset + itemsPerScroll,
     fetchMoreData: () => {
+      setData([]);
       setCurrentOffset(currentOffset + itemsPerScroll);
       const currentData = data;
       const dataSlice = servers.slice(

apps/www/src/lib/hooks/use-server.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import type { OnlineServer } from "../types/mh-server";
+import { useEffectOnce } from "../useEffectOnce";
+
+export function useServer(serverSpecifier: { id?: string; name?: string }) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [server, setServer] = useState<OnlineServer | null>(null);
+
+  useEffectOnce(() => {
+    try {
+      (async () => {
+        const res = await fetch(
+          `https://api.minehut.com/server/${serverSpecifier.id || serverSpecifier.name}${serverSpecifier.name ? "?byName=true" : ""}`
+        );
+        const json = await res.json();
+        console.log(json);
+        if (json.server === null) throw new Error("Server not found");
+
+        setServer(json.server);
+        setLoading(false);
+      })();
+    } catch (e) {
+      console.log("Error occurred while fetching server data", e);
+      setError((e as Error).message);
+      setLoading(false);
+    }
+  });
+
+  return { loading, error, server };
+}

apps/www/src/lib/hooks/use-settings-store.tsx

@@ -52,16 +52,24 @@ export function useSettingsStore() {
       }
       return localStorage.getItem(key);
     },
-    set: async (key: string, value: string, userEntry: boolean) => {
+    set: async (
+      key: string,
+      value: string | boolean,
+      userEntry: boolean,
+      __unsafeMetadata = false
+    ) => {
+      if (isSignedIn && userEntry === true && __unsafeMetadata) {
+        await user.update({ unsafeMetadata: { [key]: value } });
+      }
       if (isSignedIn && userEntry === true) {
         await fetch("/api/v0/account-sl/change", {
           body: JSON.stringify({ [key]: value }),
+          method: "POST",
         });
       }
-      if (!isSignedIn && userEntry)
+      if (!isSignedIn && userEntry) localStorage.setItem(key, value.toString());
-        throw new Error("How is this even possible?!?!");
       if (userEntry === false) {
-        localStorage.setItem(key, value);
+        localStorage.setItem(key, value.toString());
       }
     },
   };

apps/www/src/lib/types/data.ts

@@ -28,26 +28,29 @@
  * OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { NextApiRequest, NextApiResponse } from "next";
+import { Achievement } from "./achievement";
-import { MongoClient } from "mongodb";
-import { waitUntil } from "@vercel/functions";
 
-export default async function handler(
+export type MHSFData = {
-	req: NextApiRequest,
+  favoriteData: {
-	res: NextApiResponse,
+    favoritedByAccount: boolean | null;
-) {
+    favoriteNumber: number;
-	const server = req.query.server as string;
+    favoriteHistoricalData: { date: string; favorites: number }[];
-	const client = new MongoClient(process.env.MONGO_DB as string);
+  };
-	await client.connect();
+  customizationData: {
-
+    description: string | undefined;
-	const db = client.db(process.env.CUSTOM_MONGO_DB ?? "mhsf");
+    banner: string | undefined;
-	const collection = db.collection("customization");
+    discord: string | undefined;
-
+    colorScheme: string | undefined;
-	// Close the database, but don't close this
+    userProfilePicture: string | undefined;
-	// serverless instance until it happens
+    isOwned: boolean;
-	waitUntil(client.close());
+    isOwnedByUser: boolean;
-
+  };
-	res.send({ results: await collection.findOne({ server }) });
+  playerData: {
-
+    historically: { date: string; playerCount: number }[];
-	client.close();
+    max: number;
-}
+  };
+  achievements: {
+    historically: { _id: string; name: string; achievements: Achievement[] }[];
+    currently: Achievement[];
+  };
+};

apps/www/src/pages/api/inngest.ts

@@ -31,13 +31,13 @@
 import type { OnlineServer } from "@/lib/types/mh-server";
 import { Inngest } from "inngest";
 import { serve } from "inngest/next";
-import { Document, MongoClient, ObjectId, WithId } from "mongodb";
+import { MongoClient } from "mongodb";
 import { createReportIssue } from "@/lib/linear";
 
 // Create a client to send and receive events
 export const inngest = new Inngest({ id: "mhsf" });
 
-// Create an API that serves zero functions
+// Create an API that serves zero (not zero, silly) functions
 export default serve({
   client: inngest,
   functions: [
@@ -46,10 +46,14 @@ export default serve({
       { event: "report-server" },
       async ({ event, step }) => {
         // by the way, I bombed the Discord stuff
- 				await createReportIssue(event.data.server, event.data.reason, event.data.userId);
+        await createReportIssue(
+          event.data.server,
+          event.data.reason,
+          event.data.userId
+        );
 
-				return { event, body: "Done" }
+        return { event, body: "Done" };
-			},
+      }
     ),
     inngest.createFunction(
       { id: "short-term-data" },
@@ -71,6 +75,7 @@ export default serve({
                   "sec-fetch-mode": "cors",
                   "sec-fetch-site": "cross-site",
                   "Content-Type": "application/json",
+                  // They'll never know hehehehehe
                   Referer: "http://localhost:3000/",
                   "Referrer-Policy": "strict-origin-when-cross-origin",
                 },
@@ -117,9 +122,7 @@ export default serve({
 
           return { event, body: "Cloudflare.. aborting " + e };
         }
-			},
+      }
     ),
   ],
 });
-
-

apps/www/src/pages/api/v0/customization/getList.ts

@@ -1,61 +0,0 @@
-/*
- * MHSF, Minehut Server List
- * All external content is rather licensed under the ECA Agreement
- * located here: https://mhsf.app/docs/legal/external-content-agreement
- *
- * All code under MHSF is licensed under the MIT License
- * by open source contributors
- *
- * Copyright (c) 2025 dvelo
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to
- * deal in the Software without restriction, including without limitation the
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
- * sell copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
- * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
- * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
- * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
- * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
- * OTHER DEALINGS IN THE SOFTWARE.
- */
-
-import { NextApiRequest, NextApiResponse } from "next";
-import { MongoClient } from "mongodb";
-import { waitUntil } from "@vercel/functions";
-
-export default async function handler(
-	req: NextApiRequest,
-	res: NextApiResponse,
-) {
-	const { server }: { server: Array<string> | undefined } = req.body;
-
-	if (server == null) {
-		res.status(400).send({ message: "Couldn't find data" });
-		return;
-	}
-	const client = new MongoClient(process.env.MONGO_DB as string);
-	await client.connect();
-
-	const db = client.db(process.env.CUSTOM_MONGO_DB ?? "mhsf");
-	const collection = db.collection("customization");
-	const results: { server: string; customization: any }[] = [];
-
-	server.forEach(async (c) => {
-		results.push({ server: c, customization: await collection.findOne({ c }) });
-	});
-
-	// Close the database, but don't close this
-	// serverless instance until it happens
-	waitUntil(client.close());
-
-	res.send({ results });
-}

apps/www/src/pages/api/v0/favorites/[server]/community-favorites.ts

@@ -1,91 +0,0 @@
-/*
- * MHSF, Minehut Server List
- * All external content is rather licensed under the ECA Agreement
- * located here: https://mhsf.app/docs/legal/external-content-agreement
- *
- * All code under MHSF is licensed under the MIT License
- * by open source contributors
- *
- * Copyright (c) 2025 dvelo
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to
- * deal in the Software without restriction, including without limitation the
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
- * sell copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
- * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
- * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
- * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
- * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
- * OTHER DEALINGS IN THE SOFTWARE.
- */
-
-import type { NextApiResponse, NextApiRequest } from "next";
-import { MongoClient } from "mongodb";
-import { waitUntil } from "@vercel/functions";
-
-export default async function handler(
-	req: NextApiRequest,
-	res: NextApiResponse,
-) {
-	const { server } = req.query;
-	const client = new MongoClient(process.env.MONGO_DB as string);
-
-	await client.connect();
-
-	const db = client.db(process.env.CUSTOM_MONGO_DB ?? "mhsf");
-	const collection = db.collection("meta");
-	const find = await collection.find({ server: server }).toArray();
-
-	// Close the database, but don't close this
-	// serverless instance until it happens
-	waitUntil(client.close());
-
-	if (find.length != 0) {
-		const entry = find[0];
-		res.send({ result: entry.favorites });
-	} else {
-		res.send({ result: 0 });
-	}
-}
-
-export async function increaseNum(client: MongoClient, server: string) {
-	const db = client.db("mhsf");
-	const collection = db.collection("meta");
-	const find = await collection.find({ server: server }).toArray();
-
-	if (find.length == 0) {
-		collection.insertOne({ server: server, favorites: 1, date: new Date() });
-	} else {
-		const entry = find[0];
-		collection.findOneAndReplace(
-			{ server: server },
-			{ server: server, favorites: entry.favorites + 1, date: new Date() },
-		);
-	}
-}
-
-export async function decreaseNum(client: MongoClient, server: string) {
-	const db = client.db("mhsf");
-	const collection = db.collection("meta");
-	const find = await collection.find({ server: server }).toArray();
-
-	if (find.length == 0) {
-		return;
-		// Physically is impossible
-	} else {
-		const entry = find[0];
-		collection.findOneAndReplace(
-			{ server: server },
-			{ server: server, favorites: entry.favorites - 1 },
-		);
-	}
-}

apps/www/src/pages/api/v0/favorites/[server]/favorite-server.ts

@@ -51,7 +51,7 @@ export default async function handler(
 	const collection = db.collection("favorites");
 	const find = await collection.find({ user: userId }).toArray();
 
-	if (find.length == 0) {
+	if (find.length === 0) {
 		collection.insertOne({ user: userId, favorites: [server] });
 		await increaseNum(client, server);
 
@@ -72,7 +72,7 @@ export default async function handler(
 			if (index > -1) {
 				existingFavorites.splice(index, 1);
 			}
-			collection.replaceOne(
+			await collection.replaceOne(
 				{ _id: new ObjectId(collect._id) },
 				{
 					user: userId,
@@ -88,7 +88,7 @@ export default async function handler(
 		} else {
 			existingFavorites.push(server);
 			await increaseNum(client, server);
-			collection.replaceOne(
+			await collection.replaceOne(
 				{ _id: new ObjectId(collect._id) },
 				{
 					user: userId,

apps/www/src/pages/api/v0/favorites/[server]/favorited.ts

@@ -1,61 +0,0 @@
-/*
- * MHSF, Minehut Server List
- * All external content is rather licensed under the ECA Agreement
- * located here: https://mhsf.app/docs/legal/external-content-agreement
- *
- * All code under MHSF is licensed under the MIT License
- * by open source contributors
- *
- * Copyright (c) 2025 dvelo
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to
- * deal in the Software without restriction, including without limitation the
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
- * sell copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
- * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
- * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
- * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
- * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
- * OTHER DEALINGS IN THE SOFTWARE.
- */
-
-import type { NextApiResponse, NextApiRequest } from "next";
-import { MongoClient } from "mongodb";
-import { getAuth } from "@clerk/nextjs/server";
-import { waitUntil } from "@vercel/functions";
-
-export default async function handler(
-	req: NextApiRequest,
-	res: NextApiResponse,
-) {
-	const { userId } = getAuth(req);
-
-	if (!userId) {
-		return res.status(401).json({ error: "Unauthorized" });
-	}
-	const server = req.query.server as string;
-	const client = new MongoClient(process.env.MONGO_DB as string);
-	await client.connect();
-
-	const db = client.db(process.env.CUSTOM_MONGO_DB ?? "mhsf");
-	const collection = db.collection("favorites");
-	const find = await collection.find({ user: userId }).toArray();
-
-	// Close the database, but don't close this
-	// serverless instance until it happens
-	waitUntil(client.close());
-
-	if (find.length == 0) res.send({ result: false });
-	else {
-		res.send({ result: find[0].favorites.includes(server) });
-	}
-}

apps/www/src/pages/api/v0/history/[server]/get-short-term-data.ts

@@ -1,70 +0,0 @@
-/*
- * MHSF, Minehut Server List
- * All external content is rather licensed under the ECA Agreement
- * located here: https://mhsf.app/docs/legal/external-content-agreement
- *
- * All code under MHSF is licensed under the MIT License
- * by open source contributors
- *
- * Copyright (c) 2025 dvelo
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to
- * deal in the Software without restriction, including without limitation the
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
- * sell copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
- * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
- * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
- * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
- * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
- * OTHER DEALINGS IN THE SOFTWARE.
- */
-
-import { MongoClient } from "mongodb";
-import { NextApiRequest, NextApiResponse } from "next";
-import { waitUntil } from "@vercel/functions";
-
-export default async function handler(
-	req: NextApiRequest,
-	res: NextApiResponse,
-) {
-	const client = new MongoClient(process.env.MONGO_DB as string);
-	const db = client.db("mhsf").collection("history");
-	const server = req.query.server as string;
-	let dataMax = 0;
-	const scopes: Array<string> = checkForInfoOrLeave(res, req.body.scopes);
-
-	const allData = await db.find({ server }).toArray();
-	const data: any[] = [];
-
-	dataMax = (
-		await db.find({ server }).sort({ player_count: -1 }).limit(1).toArray()
-	)[0].player_count;
-
-	allData.forEach((d) => {
-		const result: any = {};
-		scopes.forEach((b) => {
-			result[b] = d[b];
-		});
-		data.push(result);
-	});
-
-	// Close the database, but don't close this
-	// serverless instance until it happens
-	waitUntil(client.close());
-	res.send({ data, dataMax });
-}
-
-function checkForInfoOrLeave(res: NextApiResponse, info: any) {
-	if (info == undefined)
-		res.status(400).json({ message: "Information wasn't supplied" });
-	return info;
-}

apps/www/src/pages/api/v1/server/bulk.ts

@@ -0,0 +1,428 @@
+/*
+ * MHSF, Minehut Server List
+ * All external content is rather licensed under the ECA Agreement
+ * located here: https://mhsf.app/docs/legal/external-content-agreement
+ *
+ * All code under MHSF is licensed under the MIT License
+ * by open source contributors
+ *
+ * Copyright (c) 2025 dvelo
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ * OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { MHSFData } from "@/lib/types/data";
+import { MongoClient } from "mongodb";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+// Type definitions for query parameters
+type QueryParams = {
+  maxFavoriteEntries?: string | string[];
+  favoriteTimespanStart?: string | string[];
+  favoriteTimespanEnd?: string | string[];
+  maxPlayerEntries?: string | string[];
+  playerTimespanStart?: string | string[];
+  playerTimespanEnd?: string | string[];
+  maxAchievementEntries?: string | string[];
+  achievementTimespanStart?: string | string[];
+  achievementTimespanEnd?: string | string[];
+};
+
+// Type for customization data
+type CustomizationData = {
+  description: string | undefined;
+  banner: string | undefined;
+  discord: string | undefined;
+  colorScheme: string | undefined;
+  userProfilePicture: string | undefined;
+  isOwned: boolean;
+  isOwnedByUser: boolean;
+};
+
+// Type for favorite data
+type FavoriteData = {
+  favoritedByAccount: boolean | null;
+  favoriteNumber: number;
+  favoriteHistoricalData: any[];
+};
+
+// Type for player data
+type PlayerData = {
+  historically: { date: string; playerCount: number }[];
+  max: number;
+};
+
+// Type for achievements data
+type AchievementsData = {
+  historically: any[];
+  currently: any[];
+};
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<{ servers: Record<string, MHSFData | null> }>
+) {
+  // Only accept POST requests with server list in the body
+  if (req.method !== "POST") {
+    return res.status(405).json({ servers: {} });
+  }
+
+  // Get the list of servers from the request body
+  const { servers, options } = req.body;
+
+  if (!servers || !Array.isArray(servers) || servers.length === 0) {
+    return res.status(400).json({ servers: {} });
+  }
+
+  // Limit the number of servers to prevent abuse (max 25 servers per request)
+  const serverList = servers.slice(0, 25);
+
+  // Extract query parameters
+  const queryOptions: QueryParams = {
+    maxFavoriteEntries: req.query.maxFavoriteEntries,
+    favoriteTimespanStart: req.query.favoriteTimespanStart,
+    favoriteTimespanEnd: req.query.favoriteTimespanEnd,
+    maxPlayerEntries: req.query.maxPlayerEntries,
+    playerTimespanStart: req.query.playerTimespanStart,
+    playerTimespanEnd: req.query.playerTimespanEnd,
+    maxAchievementEntries: req.query.maxAchievementEntries,
+    achievementTimespanStart: req.query.achievementTimespanStart,
+    achievementTimespanEnd: req.query.achievementTimespanEnd,
+  };
+
+  // Determine which data to fetch based on options
+  const fetchOptions = {
+    favorites: options?.favorites !== false,
+    customization: options?.customization !== false,
+    players: options?.players !== false,
+    achievements: options?.achievements !== false,
+  };
+
+  const mongo = new MongoClient(process.env.MONGO_DB as string);
+  const result: Record<string, MHSFData | null> = {};
+
+  try {
+    await mongo.connect();
+    const db = mongo.db(process.env.CUSTOM_MONGO_DB ?? "mhsf");
+    const userId = req.cookies.userId;
+
+    // Process each server in parallel
+    await Promise.all(
+      serverList.map(async (server: string) => {
+        try {
+          // Verify server exists
+          const serverData = await findServerData(server);
+          if (!serverData.exists) {
+            result[server] = null;
+            return;
+          }
+
+          // Prepare promises array based on fetch options
+          const promises: Promise<any>[] = [];
+          const promiseResults: Record<string, any> = {};
+
+          if (fetchOptions.favorites) {
+            promises.push(
+              findFavoriteData(serverData.name, userId, db, queryOptions).then(
+                (data: FavoriteData) => {
+                  promiseResults.favoriteData = data;
+                }
+              )
+            );
+          }
+
+          if (fetchOptions.customization) {
+            promises.push(
+              findCustomizationData(serverData.name, userId, db).then(
+                (data: CustomizationData) => {
+                  promiseResults.customizationData = data;
+                }
+              )
+            );
+          }
+
+          if (fetchOptions.players) {
+            promises.push(
+              findPlayerData(serverData.name, db, queryOptions).then(
+                (data: PlayerData) => {
+                  promiseResults.playerData = data;
+                }
+              )
+            );
+          }
+
+          if (fetchOptions.achievements) {
+            promises.push(
+              findAchievements(serverData.name, db, queryOptions).then(
+                (data: AchievementsData) => {
+                  promiseResults.achievements = data;
+                }
+              )
+            );
+          }
+
+          // Wait for all promises to resolve
+          await Promise.all(promises);
+
+          // Create default values for any missing data
+          const serverResult: MHSFData = {
+            favoriteData: promiseResults.favoriteData || {
+              favoritedByAccount: null,
+              favoriteNumber: 0,
+              favoriteHistoricalData: [],
+            },
+            customizationData: promiseResults.customizationData || {
+              description: undefined,
+              banner: undefined,
+              discord: undefined,
+              colorScheme: undefined,
+              userProfilePicture: undefined,
+              isOwned: false,
+              isOwnedByUser: false,
+            },
+            playerData: promiseResults.playerData || {
+              historically: [],
+              max: 0,
+            },
+            achievements: promiseResults.achievements || {
+              historically: [],
+              currently: [],
+            },
+          };
+
+          result[server] = serverResult;
+        } catch (error) {
+          console.error(`Error processing server ${server}:`, error);
+          result[server] = null;
+        }
+      })
+    );
+
+    res.status(200).json({ servers: result });
+  } catch (error) {
+    console.error("Error processing bulk request:", error);
+    res.status(500).json({ servers: {} });
+  } finally {
+    await mongo.close();
+  }
+}
+
+// Helper functions
+async function findServerData(
+  server: string
+): Promise<{ exists: boolean; name: string }> {
+  try {
+    const response = await fetch("https://api.minehut.com/server/" + server);
+
+    if (!response.ok) {
+      return { exists: false, name: "" };
+    }
+
+    const serverJSON = await response.json();
+    if (!serverJSON.server) return { exists: false, name: "" };
+
+    return { exists: true, name: serverJSON.server.name };
+  } catch (error) {
+    console.error("Error fetching server data:", error);
+    return { exists: false, name: "" };
+  }
+}
+
+async function findCustomizationData(
+  serverName: string,
+  userId: string | undefined,
+  db: any
+): Promise<CustomizationData> {
+  // Run queries in parallel
+  const [customizationData, ownedServerData] = await Promise.all([
+    db.collection("customization").findOne({ server: serverName }),
+    userId
+      ? db.collection("owned-servers").findOne({ server: serverName })
+      : null,
+  ]);
+
+  if (customizationData) {
+    return {
+      ...(customizationData as any),
+      isOwned: true,
+      isOwnedByUser: ownedServerData?.author === userId,
+    };
+  }
+
+  return {
+    isOwned: false,
+    isOwnedByUser: false,
+    description: undefined,
+    banner: undefined,
+    discord: undefined,
+    colorScheme: undefined,
+    userProfilePicture: undefined,
+  };
+}
+
+async function findFavoriteData(
+  serverName: string,
+  userId: string | undefined,
+  db: any,
+  query: QueryParams
+): Promise<FavoriteData> {
+  // Run queries in parallel
+  const [userFavorites, metaData, historyData] = await Promise.all([
+    userId ? db.collection("favorites").findOne({ user: userId }) : null,
+    db.collection("meta").findOne({ server: serverName }),
+    fetchHistoryData(db, serverName, query),
+  ]);
+
+  // Process user favorites
+  const favoritedByAccount =
+    userId && userFavorites
+      ? userFavorites.favorites.includes(serverName)
+      : null;
+
+  // Process favorite count
+  const favoriteNumber = metaData?.favorites || 0;
+
+  return {
+    favoritedByAccount,
+    favoriteNumber,
+    favoriteHistoricalData: historyData,
+  };
+}
+
+async function fetchHistoryData(
+  db: any,
+  serverName: string,
+  query: QueryParams
+): Promise<any[]> {
+  // Build query filter
+  const filter: any = { server: serverName };
+
+  // Add date range filter if provided
+  if (query.favoriteTimespanStart && query.favoriteTimespanEnd) {
+    filter.date = {
+      $gte: new Date(Number(query.favoriteTimespanStart)),
+      $lte: new Date(Number(query.favoriteTimespanEnd)),
+    };
+  }
+
+  // Determine limit
+  const limit = query.maxFavoriteEntries ? Number(query.maxFavoriteEntries) : 0;
+
+  // Use projection to only fetch needed fields
+  const projection = { favorites: 1, date: 1, _id: 0 };
+
+  // Execute optimized query
+  const cursor = db.collection("history").find(filter).project(projection);
+
+  // Apply limit if specified
+  if (limit > 0) {
+    cursor.limit(limit);
+  }
+
+  return await cursor.toArray();
+}
+
+async function findPlayerData(
+  serverName: string,
+  db: any,
+  query: QueryParams
+): Promise<PlayerData> {
+  // Build query filter
+  const filter: any = { server: serverName };
+
+  // Add date range filter if provided
+  if (query.playerTimespanStart && query.playerTimespanEnd) {
+    filter.date = {
+      $gte: new Date(Number(query.playerTimespanStart)),
+      $lte: new Date(Number(query.playerTimespanEnd)),
+    };
+  }
+
+  // Use projection to only fetch needed fields
+  const projection = { player_count: 1, date: 1, _id: 0 };
+
+  // Get max player count in a single query
+  const [maxResult, playerHistory] = await Promise.all([
+    db
+      .collection("history")
+      .find({ server: serverName })
+      .sort({ player_count: -1 })
+      .limit(1)
+      .project({ player_count: 1 })
+      .toArray(),
+
+    db.collection("history").find(filter).project(projection).toArray(),
+  ]);
+
+  // Apply limit if specified
+  let historically = playerHistory;
+  if (query.maxPlayerEntries) {
+    historically = historically.slice(0, Number(query.maxPlayerEntries));
+  }
+
+  // Format the data to match the expected structure
+  const formattedHistory = historically.map(
+    (item: { date: string; player_count?: number }) => ({
+      date: item.date,
+      playerCount: item.player_count || 0,
+    })
+  );
+
+  const max = maxResult.length > 0 ? maxResult[0].player_count : 0;
+
+  return { historically: formattedHistory, max };
+}
+
+async function findAchievements(
+  serverName: string,
+  db: any,
+  query: QueryParams
+): Promise<AchievementsData> {
+  // Get achievements data
+  const achievementsCollection = db.collection("achievements");
+
+  // Build query filter
+  const filter: any = { name: serverName };
+
+  // Add date range filter if provided
+  if (query.achievementTimespanStart && query.achievementTimespanEnd) {
+    // Assuming there's a timestamp or date field in the achievements collection
+    filter.timestamp = {
+      $gte: new Date(Number(query.achievementTimespanStart)),
+      $lte: new Date(Number(query.achievementTimespanEnd)),
+    };
+  }
+
+  // Get historical achievements
+  let historically = await achievementsCollection.find(filter).toArray();
+
+  // Apply limit if specified
+  if (query.maxAchievementEntries) {
+    historically = historically.slice(0, Number(query.maxAchievementEntries));
+  }
+
+  const currently: any[] = [];
+  for (const a of historically)
+    a.achievements.forEach((item: any, interval: number) =>
+      currently.push({ interval, ...item })
+    );
+
+  return { historically, currently };
+}

apps/www/src/pages/api/v1/server/get/[server].ts

@@ -0,0 +1,329 @@
+/*
+ * MHSF, Minehut Server List
+ * All external content is rather licensed under the ECA Agreement
+ * located here: https://mhsf.app/docs/legal/external-content-agreement
+ *
+ * All code under MHSF is licensed under the MIT License
+ * by open source contributors
+ *
+ * Copyright (c) 2025 dvelo
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ * OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { MHSFData } from "@/lib/types/data";
+import { MongoClient } from "mongodb";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<{ server: MHSFData | null }>
+) {
+  const {
+    server,
+    maxFavoriteEntries,
+    favoriteTimespanStart,
+    favoriteTimespanEnd,
+    maxPlayerEntries,
+    playerTimespanStart,
+    playerTimespanEnd,
+    maxAchievementEntries,
+    achievementTimespanStart,
+    achievementTimespanEnd,
+  } = req.query;
+  if (!server) return res.status(400).send({ server: null });
+
+  const serverData = await findServerData(server as string);
+  if (!serverData.exists) return res.status(404).send({ server: null });
+
+  const mongo = new MongoClient(process.env.MONGO_DB as string);
+
+  try {
+    await mongo.connect();
+    const db = mongo.db(process.env.CUSTOM_MONGO_DB ?? "mhsf");
+    const userId = req.cookies.userId;
+
+    // Run queries in parallel
+    const [favoriteData, customizationData, playerData, achievements] =
+      await Promise.all([
+        findFavoriteData(serverData.name, userId, db, {
+          maxFavoriteEntries,
+          favoriteTimespanStart,
+          favoriteTimespanEnd,
+        }),
+        findCustomizationData(serverData.name, userId, db),
+        findPlayerData(serverData.name, db, {
+          maxPlayerEntries,
+          playerTimespanStart,
+          playerTimespanEnd,
+        }),
+        findAchievements(serverData.name, db, {
+          maxAchievementEntries,
+          achievementTimespanStart,
+          achievementTimespanEnd,
+        }),
+      ]);
+
+    // Ignore the linter error as requested
+    res.send({
+      server: {
+        favoriteData,
+        customizationData,
+        playerData,
+        achievements,
+      },
+    });
+  } catch (error) {
+    console.error("Error processing request:", error);
+    res.status(500).send({ server: null });
+  } finally {
+    await mongo.close();
+  }
+}
+
+async function findCustomizationData(
+  serverName: string,
+  userId: string | undefined,
+  db: any
+): Promise<{
+  description: string | undefined;
+  banner: string | undefined;
+  discord: string | undefined;
+  colorScheme: string | undefined;
+  userProfilePicture: string | undefined;
+  isOwned: boolean;
+  isOwnedByUser: boolean;
+}> {
+  // Run queries in parallel
+  const [customizationData, ownedServerData] = await Promise.all([
+    db.collection("customization").findOne({ server: serverName }),
+    userId
+      ? db.collection("owned-servers").findOne({ server: serverName })
+      : null,
+  ]);
+
+  if (customizationData) {
+    return {
+      ...(customizationData as any),
+      isOwned: true,
+      isOwnedByUser: ownedServerData?.author === userId,
+    };
+  }
+
+  return {
+    isOwned: false,
+    isOwnedByUser: false,
+    description: undefined,
+    banner: undefined,
+    discord: undefined,
+    colorScheme: undefined,
+    userProfilePicture: undefined,
+  };
+}
+
+async function findFavoriteData(
+  serverName: string,
+  userId: string | undefined,
+  db: any,
+  query: {
+    maxFavoriteEntries?: string | string[];
+    favoriteTimespanStart?: string | string[];
+    favoriteTimespanEnd?: string | string[];
+  }
+) {
+  // Run queries in parallel
+  const [userFavorites, metaData, historyData] = await Promise.all([
+    userId ? db.collection("favorites").findOne({ user: userId }) : null,
+    db.collection("meta").findOne({ server: serverName }),
+    fetchHistoryData(db, serverName, query),
+  ]);
+
+  // Process user favorites
+  const favoritedByAccount =
+    userId && userFavorites
+      ? userFavorites.favorites.includes(serverName)
+      : null;
+
+  // Process favorite count
+  const favoriteNumber = metaData?.favorites || 0;
+
+  return {
+    favoritedByAccount,
+    favoriteNumber,
+    favoriteHistoricalData: historyData,
+  };
+}
+
+async function fetchHistoryData(
+  db: any,
+  serverName: string,
+  query: {
+    maxFavoriteEntries?: string | string[];
+    favoriteTimespanStart?: string | string[];
+    favoriteTimespanEnd?: string | string[];
+  }
+) {
+  // Build query filter
+  const filter: any = { server: serverName };
+
+  // Add date range filter if provided
+  if (query.favoriteTimespanStart && query.favoriteTimespanEnd) {
+    filter.date = {
+      $gte: new Date(Number(query.favoriteTimespanStart)),
+      $lte: new Date(Number(query.favoriteTimespanEnd)),
+    };
+  }
+
+  // Determine limit
+  const limit = query.maxFavoriteEntries ? Number(query.maxFavoriteEntries) : 0;
+
+  // Use projection to only fetch needed fields
+  const projection = { favorites: 1, date: 1, _id: 0 };
+
+  // Execute optimized query
+  const cursor = db.collection("history").find(filter).project(projection);
+
+  // Apply limit if specified
+  if (limit > 0) {
+    cursor.limit(limit);
+  }
+
+  return await cursor.toArray();
+}
+
+async function findServerData(
+  server: string
+): Promise<{ exists: boolean; name: string }> {
+  try {
+    const response = await fetch("https://api.minehut.com/server/" + server);
+
+    // Check if the response is ok before parsing JSON
+    if (!response.ok) {
+      return { exists: false, name: "" };
+    }
+
+    const serverJSON = await response.json();
+    if (!serverJSON.server) return { exists: false, name: "" };
+
+    return { exists: true, name: serverJSON.server.name };
+  } catch (error) {
+    console.error("Error fetching server data:", error);
+    return { exists: false, name: "" };
+  }
+}
+
+async function findPlayerData(
+  serverName: string,
+  db: any,
+  query: {
+    maxPlayerEntries?: string | string[];
+    playerTimespanStart?: string | string[];
+    playerTimespanEnd?: string | string[];
+  }
+) {
+  // Get historical player data
+  const historyCollection = db.collection("history");
+
+  // Build query filter
+  const filter: any = { server: serverName };
+
+  // Add date range filter if provided
+  if (query.playerTimespanStart && query.playerTimespanEnd) {
+    filter.date = {
+      $gte: new Date(Number(query.playerTimespanStart)),
+      $lte: new Date(Number(query.playerTimespanEnd)),
+    };
+  }
+
+  // Use projection to only fetch needed fields
+  const projection = { player_count: 1, date: 1, _id: 0 };
+
+  // Get max player count in a single query
+  const [maxResult, playerHistory] = await Promise.all([
+    historyCollection
+      .find({ server: serverName })
+      .sort({ player_count: -1 })
+      .limit(1)
+      .project({ player_count: 1 })
+      .toArray(),
+
+    historyCollection.find(filter).project(projection).toArray(),
+  ]);
+
+  // Apply limit if specified
+  let historically = playerHistory;
+  if (query.maxPlayerEntries) {
+    historically = historically.slice(0, Number(query.maxPlayerEntries));
+  }
+
+  // Format the data to match the expected structure
+  const formattedHistory = historically.map(
+    (item: { date: string; player_count?: number }) => ({
+      date: item.date,
+      playerCount: item.player_count || 0,
+    })
+  );
+
+  const max = maxResult.length > 0 ? maxResult[0].player_count : 0;
+
+  return { historically: formattedHistory, max };
+}
+
+async function findAchievements(
+  serverName: string,
+  db: any,
+  query: {
+    maxAchievementEntries?: string | string[];
+    achievementTimespanStart?: string | string[];
+    achievementTimespanEnd?: string | string[];
+  }
+) {
+  // Get achievements data
+  const achievementsCollection = db.collection("achievements");
+
+  // Build query filter
+  const filter: any = { name: serverName };
+
+  // Add date range filter if provided
+  if (query.achievementTimespanStart && query.achievementTimespanEnd) {
+    // Assuming there's a timestamp or date field in the achievements collection
+    // If it's stored in _id, we might need a different approach
+    filter.timestamp = {
+      $gte: new Date(Number(query.achievementTimespanStart)),
+      $lte: new Date(Number(query.achievementTimespanEnd)),
+    };
+  }
+
+  // Get historical achievements
+  let historically = await achievementsCollection.find(filter).toArray();
+
+  // Apply limit if specified
+  if (query.maxAchievementEntries) {
+    historically = historically.slice(0, Number(query.maxAchievementEntries));
+  }
+
+  const currently: any[] = [];
+  for (const a of historically)
+    a.achievements.forEach((item: any, interval: number) =>
+      currently.push({ interval, ...item })
+    );
+
+  return { historically, currently };
+}

apps/www/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-		"lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,14 @@
       }
     ],
     "paths": {
-			"contentlayer/generated": ["./.contentlayer/generated"],
+      "contentlayer/generated": [
-			"@/*": ["./src/*"]
+        "./.contentlayer/generated"
-		}
+      ],
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
   },
   "include": [
     "next-env.d.ts",
@@ -30,5 +39,7 @@
     ".contentlayer/generated",
     "docs/legal/external-content-agreement.mdx"
   ],
-	"exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }