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

@@ -4,13 +4,10 @@ export async function loadFonts() {
     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]);
+  return Promise.all([interRegularFontP, interBoldFontP]);
 }

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

@@ -1,5 +1,5 @@
 import { ImageResponse } from "@vercel/og";
-import type { NextRequest } from "next/server";
+import { NextRequest } from "next/server";
 import { MongoClient } from "mongodb";
 import fs from "node:fs";
 import path from "node:path";
@@ -26,7 +26,6 @@ async function loadLocalFonts() {
 
   return [
     fs.readFileSync(path.join(fontPath, "Inter-Regular.ttf")),
-    fs.readFileSync(path.join(fontPath, "Inter-Medium.ttf")),
     fs.readFileSync(path.join(fontPath, "Inter-Bold.ttf")),
   ];
 }
@@ -36,19 +35,11 @@ export async function GET(
   { params }: { params: Promise<{ id: string }> }
 ) {
   try {
-    // Load banner image from filesystem
-    const bannerPath = path.join(
-      process.cwd(),
-      "public",
-      "branding",
-      "bg-banner.png"
-    );
-    const bannerImageData = fs.readFileSync(bannerPath);
 
     const id = (await params).id;
 
     // Load fonts
-    const [interRegular, interMedium, interBold] = await loadLocalFonts();
+    const [interRegular, interBold] = await loadLocalFonts();
 
     // Verify server exists
     const serverResponse = await fetch(`https://api.minehut.com/server/${id}`);
@@ -69,7 +60,7 @@ export async function GET(
               textAlign: "center",
               justifyContent: "center",
               alignItems: "center",
-              backgroundImage: `url(data:image/png;base64,${bannerImageData.toString("base64")})`,
+              backgroundColor: "white",
               backgroundSize: "cover",
               backgroundPosition: "center",
               fontFamily: "Inter",
@@ -257,7 +248,7 @@ export async function GET(
             position: "relative",
             overflow: "hidden",
             fontFamily: "Inter",
-            backgroundImage: `url(data:image/png;base64,${bannerImageData.toString("base64")})`,
+            backgroundColor: "white",
             backgroundSize: "cover",
             backgroundPosition: "center",
           }}
@@ -549,12 +540,6 @@ export async function GET(
             style: "normal",
             weight: 700,
           },
-          {
-            name: "Inter",
-            data: interMedium,
-            style: "normal",
-            weight: 500,
-          },
         ],
       }
     );
@@ -570,21 +555,6 @@ export async function GET(
       console.error("Failed to load fonts for error page:", e);
     }
 
-    // Try to load the banner image
-    let bannerImageData: Buffer | null = null;
-    try {
-      const bannerPath = path.join(
-        process.cwd(),
-        "public",
-        "branding",
-        "dark-banner.png"
-      );
-      bannerImageData = fs.readFileSync(bannerPath);
-    } 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
@@ -592,7 +562,6 @@ export async function GET(
             display: "flex",
             fontSize: 60,
             color: "white",
-            background: bannerImageData ? undefined : "#121212",
             width: "100%",
             height: "100%",
             padding: "50px 50px",
@@ -600,11 +569,7 @@ export async function GET(
             justifyContent: "center",
             alignItems: "center",
             fontFamily: "Inter",
-            ...(bannerImageData && {
-              backgroundImage: `url(data:image/png;base64,${bannerImageData.toString("base64")})`,
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-            }),
+            backgroundColor: "white"
           }}
         >
           <div

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

@@ -4,7 +4,7 @@ import { NextRequest } from "next/server";
 import { miniMessage } from "minimessage-js";
 import { loadFonts } from "../../fonts";
 
-// export const runtime = "edge";
+export const runtime = "edge";
 
 // Function to parse MiniMessage and create JSX elements with styling
 function parseMotdToJsx(text: string) {
@@ -128,15 +128,11 @@ export async function GET(
   { 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();
+    const [interRegular, interBold] = await loadFonts();
 
     // Fetch server data
     const response = await fetch(`https://api.minehut.com/server/${id}`);
@@ -158,7 +154,6 @@ export async function GET(
               textAlign: "center",
               justifyContent: "center",
               alignItems: "center",
-              backgroundImage: `url(data:image/png;base64,${Buffer.from(bannerImageData).toString("base64")})`,
               backgroundSize: "cover",
               backgroundPosition: "center",
               fontFamily: "Inter",
@@ -226,7 +221,7 @@ export async function GET(
             position: "relative",
             overflow: "hidden",
             fontFamily: "Inter",
-            backgroundImage: `url(data:image/png;base64,${Buffer.from(bannerImageData).toString("base64")})`,
+            backgroundColor: "white",
             backgroundSize: "cover",
             backgroundPosition: "center",
           }}
@@ -417,30 +412,15 @@ export async function GET(
             data: interBold,
             style: "normal",
             weight: 700,
-          },
-          {
-            name: "Inter",
-            data: interMedium,
-            style: "normal",
-            weight: 500,
-          },
+          }
+          
         ],
       }
     );
   } catch (error) {
-    const [interRegular, interMedium, interBold] = await loadFonts();
+    const [interRegular, 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(
       (
@@ -449,7 +429,7 @@ export async function GET(
             display: "flex",
             fontSize: 60,
             color: "white",
-            background: bannerImageData ? undefined : "#121212",
+            background:  "#121212",
             width: "100%",
             height: "100%",
             padding: "50px 50px",
@@ -457,11 +437,7 @@ export async function GET(
             justifyContent: "center",
             alignItems: "center",
             fontFamily: "Inter",
-            ...(bannerImageData && {
-              backgroundImage: `url(data:image/png;base64,${Buffer.from(bannerImageData).toString("base64")})`,
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-            }),
+            backgroundColor: "white",
           }}
         >
           <div style={{ display: "flex" }}>

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

@@ -103,6 +103,7 @@ export function ServerList() {
 							</TooltipTrigger>
 							<TooltipContent
 								side="bottom"
+								className="backdrop-blur bg-transparent text-black dark:text-white "
 							>
 								{filterCount} modification(s) enabled
 							</TooltipContent>

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

@@ -61,7 +61,6 @@ export function useFilters(data: OnlineServer[]) {
 	const { user, isSignedIn } = useUser();
 
 	const updateServers = async (newFilters: EmbeddedFilter[]) => {
-		if (newFilters.length === 0) setFilteredData(data);
 		const modificationMap = await Promise.all(data.map((v) =>
 			Promise.all(newFilters.map(async (c) => c.functionFilter(v))),
 		));