new mojang status page, and add color to the embed based on if there was any offline or degraded

package.json

@@ -24,7 +24,7 @@
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.0",
     "lucide-react": "^0.372.0",
-    "mcutils-library": "^1.2.2",
+    "mcutils-library": "^1.2.4",
     "moment": "^2.30.1",
     "next": "14.2.2",
     "next-themes": "^0.3.0",

pnpm-lock.yaml

@@ -51,8 +51,8 @@ dependencies:
     specifier: ^0.372.0
     version: 0.372.0(react@18.2.0)
   mcutils-library:
-    specifier: ^1.2.2
+    specifier: ^1.2.4
-    version: 1.2.2(@babel/core@7.24.4)(@types/node@20.12.7)
+    version: 1.2.4(@babel/core@7.24.4)(@types/node@20.12.7)
   moment:
     specifier: ^2.30.1
     version: 2.30.1
@@ -4360,8 +4360,8 @@ packages:
       tmpl: 1.0.5
     dev: false
 
-  /mcutils-library@1.2.2(@babel/core@7.24.4)(@types/node@20.12.7):
+  /mcutils-library@1.2.4(@babel/core@7.24.4)(@types/node@20.12.7):
-    resolution: {integrity: sha512-OlzntolwWxkhdYUGbgHEK0ZbFFtqwUE/wbh+hTPtExLguebv3pCjPr0dBecVjOvtCs2mIyTA7u1rQOsEUh4CVg==}
+    resolution: {integrity: sha512-CO5jEYAWgnTyJt5G9/bB4/rhSs9W5Ll2hxAOP+sIy9JVGhzkZQnet1kxD9oVwu75hEOmlOxNWt1IiUhYMmqN1A==}
     dependencies:
       jest: 29.7.0(@types/node@20.12.7)(ts-node@10.9.2)
       ts-jest: 29.1.2(@babel/core@7.24.4)(jest@29.7.0)(typescript@5.4.5)

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

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

src/app/globals.css

@@ -40,7 +40,7 @@
     --secondary-foreground: 0 0% 98%;
     --muted: 0 0% 15%;
     --muted-foreground: 240 5% 64.9%;
-    --accent: 12 6.5% 15.1%;
+    --accent: 12 6.5% 75%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;

src/common/colors.ts

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