feat: add integration with status

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;
+}

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.

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>