Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127import type { RouterOutputs } from "@openstatus/api";import { format } from "date-fns";import { ImageResponse } from "next/og";
import { DESCRIPTION, TITLE } from "../../../../lib/metadata/shared-metadata";import { cn } from "../../../../lib/utils";import { api } from "../../../../trpc/server";import { SIZE } from "../utils";
export const runtime = "edge";
const FOOTER = "openstatus.dev";
type Page = NonNullable<RouterOutputs["statusPage"]["get"]>;
function getContent(page?: Page | null) { switch (page?.status) { case "error": return { label: "Incident Ongoing", bg: "bg-rose-500/90 border-rose-500", text: "text-rose-500", }; case "degraded": return { label: "Degraded Performance", bg: "bg-orange-500/90 border-orange-500", text: "text-amber-500", }; case "info": return { label: "Maintenance", bg: "bg-blue-500/90 border-blue-500", text: "text-blue-500", }; case "success": return { label: "All Systems Operational", bg: "bg-green-500/90 border-green-500", text: "text-green-500", }; default: return { label: "Unknown", bg: "bg-gray-500/90 border-gray-500", text: "text-gray-500", }; }}
export async function GET(req: Request) { const fontMonoRegular = await fetch( new URL("../../../../public/fonts/RobotoMono-Regular.ttf", import.meta.url), ).then((res) => res.arrayBuffer()); const fontMonoMedium = await fetch( new URL("../../../../public/fonts/RobotoMono-Medium.ttf", import.meta.url), ).then((res) => res.arrayBuffer()); const fontMonoBold = await fetch( new URL("../../../../public/fonts/RobotoMono-Bold.ttf", import.meta.url), ).then((res) => res.arrayBuffer());
const { searchParams } = new URL(req.url);
const slug = searchParams.has("slug") ? searchParams.get("slug") : undefined;
const page = await api.statusPage.get.query({ slug: slug || "" }); const content = getContent(page);
const title = page ? page.title : TITLE; const description = page ? page.description : DESCRIPTION; const category = content?.label || "unknown"; const footer = page?.customDomain || page ? `${page?.slug}.openstatus.dev` : FOOTER;
return new ImageResponse( <div tw="relative flex flex-col items-start justify-start w-full h-full bg-gray-100"> <div tw="flex flex-col h-full p-8 w-full" style={{ fontFamily: "Font Mono" }} > <div tw="flex flex-col justify-end flex-1 mb-8"> <div tw={cn("flex flex-row items-center text-2xl", content?.text)}> [<div tw={cn("mr-2 h-5 w-5 rounded-full", content?.bg)} /> <p>{category}</p>] | {format(new Date(), "MMM d, yyyy HH:mm zzz")} </div> <h1 tw="text-6xl text-black text-left font-medium" style={{ lineClamp: 2, display: "block" }} > {title} </h1> <p tw="text-4xl text-slate-700 text-left" style={{ lineClamp: 2, display: "block" }} > {description} </p> </div> <p tw="font-medium text-xl text-slate-500 text-left">{footer}</p> </div> </div>, { ...SIZE, fonts: [ { name: "Font Mono", data: fontMonoRegular, style: "normal", weight: 400, }, { name: "Font Mono", data: fontMonoMedium, style: "normal", weight: 500, }, { name: "Font Mono", data: fontMonoBold, style: "normal", weight: 700, }, ], }, );}