new mojang status page, and add color to the embed based on if there was any offline or degraded
This commit is contained in:
parent
7305714b12
commit
93ea24762c
@ -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",
|
||||
|
||||
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
@ -51,8 +51,8 @@ dependencies:
|
||||
specifier: ^0.372.0
|
||||
version: 0.372.0(react@18.2.0)
|
||||
mcutils-library:
|
||||
specifier: ^1.2.2
|
||||
version: 1.2.2(@babel/core@7.24.4)(@types/node@20.12.7)
|
||||
specifier: ^1.2.4
|
||||
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):
|
||||
resolution: {integrity: sha512-OlzntolwWxkhdYUGbgHEK0ZbFFtqwUE/wbh+hTPtExLguebv3pCjPr0dBecVjOvtCs2mIyTA7u1rQOsEUh4CVg==}
|
||||
/mcutils-library@1.2.4(@babel/core@7.24.4)(@types/node@20.12.7):
|
||||
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)
|
||||
|
||||
@ -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 { Metadata } from "next";
|
||||
import { CachedEndpointStatus, getMojangEndpointStatus, Status } from "mcutils-library";
|
||||
import { Metadata, Viewport } from "next";
|
||||
import Link from "next/link";
|
||||
import { ReactElement } from "react";
|
||||
import { Colors } from "@/common/colors";
|
||||
|
||||
/**
|
||||
* 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)
|
||||
.map(([url, status]) => {
|
||||
return `${url}: ${formatStatus(status)}`;
|
||||
})
|
||||
.join("\n");
|
||||
description += `\n\nEmbed Cache: ${formatTime(new Date())}`;
|
||||
let description = "Current Mojang API Status:\n";
|
||||
for (const endpoint of endpoints) {
|
||||
const { name, hostname, status } = endpoint;
|
||||
|
||||
description += `${name} (${hostname}): ${status}\n`;
|
||||
}
|
||||
|
||||
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">
|
||||
<div>
|
||||
{endpointsSize === 0 && <p>Unable to fetch endpoint statuses</p>}
|
||||
{endpointsSize > 0 && (
|
||||
<Table className="md:w-[500px] text-start">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="pl-1 h-8">Service</TableHead>
|
||||
<TableHead className="pl-1 h-8">Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{Object.entries(endpoints).map(([url, status]) => {
|
||||
return (
|
||||
<TableRow key={url}>
|
||||
<TableCell className="p-[0.3rem]">
|
||||
<Link className="hover:text-primary transition-all" href={url} target="_blank">
|
||||
{url}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell className={cn(getColor(status), "p-[0.3rem] text-left")}>
|
||||
{formatStatus(status)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
<Card classNameCard="py-0 pb-2" classNameContent="w-[23rem] md:w-[35rem] text-left">
|
||||
<div className="flex flex-col divide-y gap-2">
|
||||
{endpoints.length == 0 && <p>Unable to fetch endpoint statuses</p>}
|
||||
{endpoints.length > 0 &&
|
||||
endpoints.map((endpoint: CachedEndpointStatus) => {
|
||||
const { name, hostname, status } = endpoint;
|
||||
|
||||
const url = `https://${hostname}`;
|
||||
return (
|
||||
<div key={name} className="flex flex-row justify-between pt-2">
|
||||
<div className="flex flex-col leading-[1.5rem]">
|
||||
<p className="font-semibold">{name}</p>
|
||||
<Link
|
||||
href={url}
|
||||
className="text-sm text-primary hover:opacity-75 transition-all transform-gpu"
|
||||
target="_blank"
|
||||
>
|
||||
<p>{url}</p>
|
||||
</Link>
|
||||
</div>
|
||||
<div className={cn("flex items-center font-semibold", getColor(status))}>
|
||||
<p>{formatStatus(status)}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -4,4 +4,5 @@
|
||||
export const Colors = {
|
||||
green: "#0FFF50",
|
||||
red: "#8B0000",
|
||||
yellow: "#FFD700",
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user