feat: add service status widget.

.gitignore

@@ -1 +1,2 @@
 node_modules
+TODO.md

index.html

@@ -12,6 +12,16 @@
     <header class="shadow-lg pt-4 pb-6 sticky top-0 left-0">
         <div class="flex flex-row gap-2 items-center container max-w-[1440px] justify-between">
             <div><img src="/public/images/logo-light.svg" alt="wah.su" /></div>
+            <div>
+                <a href="https://status.wah.su" class="flex flex-row items-center gap-2" target="_blank">
+                    <div class="bg-green-500 w-4 h-4 rounded-full hidden" id="status-up-icon"></div>
+                    <div class="bg-yellow-400  w-4 h-4 rounded-full hidden" id="status-degraded-icon"></div>
+                    <div class="bg-red-600 w-4 h-4 rounded-full hidden" id="status-down-icon"></div>
+                    <p class="hidden" id="status-up-text">All Systems Operational.</p>
+                    <p class="hidden" id="status-degraded-text">Degraded Services.</p>
+                    <p class="hidden" id="status-down-text">All Systems Down.</p>
+                </a>
+            </div>
             <div class="flex flex-row items-center justify-center">
                 <button type="button"
                     class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
@@ -34,7 +44,7 @@
             to the right place! wah.su is all about providing a safe and stable
             environment for your projects.
 
-            Run by yours truly, @radiquum, we believe in quality over quantity, which is why access is currently invite-only.
+            Run by yours truly, <a href="https://bento.me/radiquum" class="font-medium text-blue-600 dark:text-blue-500 hover:underline" target="_blank">@radiquum</a>, we believe in quality over quantity, which is why access is currently invite-only.
             Interested in joining the pack? Reach out to me to sniff out an invitation.
         </p>
         <!--noformat-->
@@ -48,6 +58,7 @@
 
     <script src="/public/js/flowbite.min.js"></script>
     <script src="/public/js/cards.js"></script>
+    <script src="/public/js/status.js"></script>
 </body>
 
 </html>

public/js/status.js

@@ -0,0 +1,66 @@
+const serviceUp = {
+  icon: document.getElementById("status-up-icon"),
+  text: document.getElementById("status-up-text"),
+};
+const serviceDegraded = {
+  icon: document.getElementById("status-degraded-icon"),
+  text: document.getElementById("status-degraded-text"),
+};
+const serviceDown = {
+  icon: document.getElementById("status-down-icon"),
+  text: document.getElementById("status-down-text"),
+};
+
+async function getServicesHealth() {
+  const serviceStatus = await fetch(
+    "https://status.wah.su/api/status-page/heartbeat/services"
+  );
+
+  const services = await serviceStatus.json();
+  const heartbeatDict = services.heartbeatList;
+  let lastHeartbeats = [];
+
+  for (const [key, value] of Object.entries(heartbeatDict)) {
+    lastHeartbeats.push(
+      heartbeatDict[key][heartbeatDict[key].length - 1].status
+    );
+  }
+
+  let status = "up";
+  const count = lastHeartbeats.reduce((partialSum, a) => partialSum + a, 0);
+
+  if (count === lastHeartbeats.length) {
+    status = "up";
+  } else if (count === 0) {
+    status = "down";
+  } else {
+    status = "degraded";
+  }
+
+  if (status === "up") {
+    serviceUp.icon.classList.remove("hidden");
+    serviceUp.text.classList.remove("hidden");
+    serviceDegraded.icon.classList.add("hidden");
+    serviceDegraded.text.classList.add("hidden");
+    serviceDown.icon.classList.add("hidden");
+    serviceDown.text.classList.add("hidden");
+  } else if (status === "degraded") {
+    serviceUp.icon.classList.add("hidden");
+    serviceUp.text.classList.add("hidden");
+    serviceDegraded.icon.classList.remove("hidden");
+    serviceDegraded.text.classList.remove("hidden");
+    serviceDown.icon.classList.add("hidden");
+    serviceDown.text.classList.add("hidden");
+  } else if (status === "down") {
+    serviceUp.icon.classList.add("hidden");
+    serviceUp.text.classList.add("hidden");
+    serviceDegraded.icon.classList.add("hidden");
+    serviceDegraded.text.classList.add("hidden");
+    serviceDown.icon.classList.remove("hidden");
+    serviceDown.text.classList.remove("hidden");
+  }
+}
+
+getServicesHealth();
+
+setInterval(getServicesHealth, 600000);

public/output.css

@@ -1162,10 +1162,6 @@ input:checked + .toggle-bg {
   margin-top: 3.5rem;
 }
 
-.mt-16 {
-  margin-top: 4rem;
-}
-
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -1174,34 +1170,6 @@ input:checked + .toggle-bg {
   margin-top: 1.5rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
-}
-
-.mt-10 {
-  margin-top: 2.5rem;
-}
-
-.mt-8 {
-  margin-top: 2rem;
-}
-
-.mt-20 {
-  margin-top: 5rem;
-}
-
-.mt-24 {
-  margin-top: 6rem;
-}
-
-.mt-32 {
-  margin-top: 8rem;
-}
-
-.mt-28 {
-  margin-top: 7rem;
-}
-
 .block {
   display: block;
 }
@@ -1422,6 +1390,10 @@ input:checked + .toggle-bg {
   border-radius: 0.5rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-e-lg {
   border-start-end-radius: 0.5rem;
   border-end-end-radius: 0.5rem;
@@ -1513,6 +1485,21 @@ input:checked + .toggle-bg {
   background-color: rgb(255 255 255 / 0.5);
 }
 
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(14 159 110 / var(--tw-bg-opacity));
+}
+
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 36 36 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(227 160 8 / var(--tw-bg-opacity));
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1563,11 +1550,6 @@ input:checked + .toggle-bg {
   padding-bottom: 0.75rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
 .pb-6 {
   padding-bottom: 1.5rem;
 }
@@ -1576,14 +1558,6 @@ input:checked + .toggle-bg {
   padding-top: 0.5rem;
 }
 
-.pt-8 {
-  padding-top: 2rem;
-}
-
-.pt-6 {
-  padding-top: 1.5rem;
-}
-
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1776,6 +1750,10 @@ input:checked + .toggle-bg {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
 .focus\:z-10:focus {
   z-index: 10;
 }