From fead895405fb04ed5b45aa03c08d256cedb01b40 Mon Sep 17 00:00:00 2001
From: rizaldy <oss@rizaldy.club>
Date: Sun, 22 Sep 2024 17:54:10 +0700
Subject: [PATCH] feat: add integration with status

---
 assets/css/style.css              | 19 ++++++++++++++++++-
 src/_includes/fragments/footer.md |  2 ++
 src/_includes/layouts/base.liquid | 27 +++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index dd234d7..c8462b1 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -302,7 +302,7 @@ footer a {
 }
 
 ._listenbrainz {
-  color: #b90000;
+    color: #b90000;
 }
 
 @media screen and (min-width: 30em) {
@@ -350,3 +350,20 @@ footer a {
         font-size: 3rem;
     }
 }
+
+#status {
+    display: none;
+    box-sizing: border-box;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: #cf7328;
+    overflow-x: auto;
+    text-align: center;
+    padding: 0 10px;
+    color: #fff;
+    font-weight: bold;
+    height: 30px;
+    white-space: nowrap;
+}
diff --git a/src/_includes/fragments/footer.md b/src/_includes/fragments/footer.md
index ee4fe9d..55749b0 100644
--- a/src/_includes/fragments/footer.md
+++ b/src/_includes/fragments/footer.md
@@ -1,5 +1,7 @@
 ---
 
+<div id="status"></div>
+
 <footer>
 
 I collect a bit of data—for the sake of vanity metrics—that is reported to my self-hosted [Umami](https://umami.is) instance. No personal data is collected and you can opt out by using [uBlock Origin](https://ublockorigin.com/) just like the rest of us.
diff --git a/src/_includes/layouts/base.liquid b/src/_includes/layouts/base.liquid
index a9eba5e..4d2cc62 100644
--- a/src/_includes/layouts/base.liquid
+++ b/src/_includes/layouts/base.liquid
@@ -9,5 +9,32 @@
 
     <script async src="https://u.faultables.net/umami.js" data-website-id="82853ef5-d8ca-4a3d-8170-784698eff79f"></script>
 
+    <script>
+      document.addEventListener("DOMContentLoaded", function() {
+        fetch("https://status.edgy0.workers.dev/")
+          .then(res => res.json())
+          .then(payload => {
+              const data = payload.data
+
+              if (data.downCount > 0) {
+                const container = document.getElementById("status")
+                const learnMore = document.createElement("a")
+
+                learnMore.href = "https://status.faultables.net"
+                learnMore.rel = "noopener noreferer"
+                learnMore.target = "_blank"
+                learnMore.innerText = "learn more here"
+
+                const text = document.createElement("p")
+                text.innerText = `${data.downCount} out of ${data.servicesCount} services from faultables homelab are down — `
+
+                container.style.display = "block"
+                text.appendChild(learnMore)
+                container.appendChild(text)
+              }
+          })
+        })
+    </script>
+
   </body>
 </html>