feat: integrated status

src/components/feat/LayoutPart.tsx

@@ -13,6 +13,7 @@ import NextTopLoader from "@/lib/top-loader";
 import Link from "next/link";
 import BannerContainer from "@/components/feat/BannerContainer";
 import { Inter } from "next/font/google";
+import useStatus from "@/lib/hooks/use-status";
 
 const inter = Inter({ variable: "--font-inter", subsets: ["latin"] });
 export default function LayoutPart({
@@ -20,15 +21,22 @@ export default function LayoutPart({
 }: {
   children: React.ReactNode;
 }) {
+  const { loading, incidents, statusURL } = useStatus();
+
   return (
     <>
       <BannerContainer
-        className={"w-screen h-[3rem] border-b fixed backdrop-blur flex z-10"}
+        className={
+          "w-screen h-[3rem] border-b grid-cols-3 fixed backdrop-blur z-10 " +
+          (!loading && (incidents as never as Array<any>).length > 0
+            ? "grid"
+            : "flex")
+        }
         style={(size: number) => ({
           marginTop: `${2 * size}rem`,
         })}
       >
-        <div className="items-center me-auto mt-2 pl-7 max-sm:mt-3">
+        <div className="items-center justify-self-start me-auto mt-2 pl-7 max-sm:mt-3 flex-1">
           <Breadcrumb>
             <BreadcrumbList>
               <Link href="/">
@@ -40,7 +48,28 @@ export default function LayoutPart({
             </BreadcrumbList>
           </Breadcrumb>
         </div>
-        <TopBar inter={inter.className} />
+        {!loading && incidents !== null && (
+          <div className="justify-self-center items-center text-center pb-2 pt-2 rounded border my-1 px-2 bg-red-500 text-white">
+            <strong className="text-sm">
+              {
+                (
+                  incidents[0] as {
+                    attributes: { title: string };
+                  }
+                ).attributes.title
+              }{" "}
+            </strong>{" "}
+            <span className="text-sm">- MHSF may be down</span>
+            <br />
+            <Link href={"https://" + statusURL} className="text-sm">
+              View MHSF Status
+            </Link>
+          </div>
+        )}
+
+        <div className="justify-self-end">
+          <TopBar inter={inter.className} />
+        </div>
       </BannerContainer>
       <BannerContainer
         style={(size: number) => ({

src/lib/hooks/use-status.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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) 2024 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 { useEffect, useState } from "react";
+
+export default function useStatus() {
+  const [loading, setLoading] = useState(true);
+  const [incidents, setIncidents] = useState(null);
+  const [statusURL, setStatusURL] = useState(null);
+
+  useEffect(() => {
+    fetch("/api/v1/get-status")
+      .then((c) => c.json())
+      .then((d) => {
+        setLoading(false);
+        setIncidents(d.incidents);
+        setStatusURL(d.url);
+      });
+  }, []);
+
+  return { loading, incidents, statusURL };
+}

src/pages/api/v1/get-status.ts

@@ -0,0 +1,61 @@
+/*
+ * 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) 2024 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";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const betterStackResult = await fetch(
+    `https://uptime.betterstack.com/api/v2/status-pages/${process.env.BS_STATUS_PAGE}/status-reports`,
+    { headers: { Authorization: `Bearer ${process.env.BS_TOKEN}` } }
+  );
+  const betterStackURL = await fetch(
+    `https://uptime.betterstack.com/api/v2/status-pages/${process.env.BS_STATUS_PAGE}`,
+    { headers: { Authorization: `Bearer ${process.env.BS_TOKEN}` } }
+  );
+
+  const result = await betterStackResult.json();
+  const url = await betterStackURL.json();
+
+  const filtered = result.data.filter(
+    (c: any) =>
+      c.attributes.ends_at === null &&
+      c.attributes.affected_resources.filter(
+        (v: any) =>
+          v.status_page_resource_id === process.env.BS_STATUS_MAIN_WEBSITE
+      ).length > 0
+  );
+
+  res.status(200).send({
+    url: url.data.attributes.custom_domain,
+    incidents: filtered,
+  });
+}