Add Better Stack stuff

announcement.css

@@ -0,0 +1,66 @@
+.betteruptime-announcement {
+    --betteruptime-announcement-bg: #1f1f20;
+    --betteruptime-announcement-color: #ffffff;
+    --betteruptime-annoncement-font-family: "Simvoni", "Roboto", "San Francisco", "Segoe UI", "Ubuntu", "Helvetica Neue", sans-serif;
+    --betteruptime-annoncement-font-size: 14px;
+    --betteruptime-annoncement-line-height: 1.5;
+    --betteruptime-announcement-padding-x: 16px;
+    --betteruptime-announcement-padding-y: 14px;
+    --betteruptime-announcement-max-width: 970px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 999999;
+    background: var(--betteruptime-announcement-bg, #1f1f20);
+    color: var(--betteruptime-announcement-color, #ffffff);
+    padding: var(--betteruptime-announcement-padding-y, 14px) var(--betteruptime-announcement-padding-x, 16px);
+    font-family: var(--betteruptime-annoncement-font-family, "Simvoni", "Roboto", "San Francisco", "Segoe UI", "Ubuntu", "Helvetica Neue", sans-serif);
+    font-size: var(--betteruptime-annoncement-font-size, 14px);
+    line-height: var(--betteruptime-annoncement-line-height, 1.5);
+}
+.betteruptime-announcement,
+.betteruptime-announcement * {
+    box-sizing: border-box;
+}
+.betteruptime-announcement__placeholder {
+    position: relative;
+    width: 100%;
+    z-index: -1;
+}
+.betteruptime-announcement__placeholder::after {
+    display: block;
+    clear: both;
+    content: "";
+}
+.betteruptime-announcement--clickable {
+    cursor: pointer;
+}
+.betteruptime-announcement__message {
+    width: 100%;
+    max-width: var(--betteruptime-announcement-max-width, 970px);
+    margin: 0 auto;
+    text-align: center;
+    padding-left: 32px;
+    padding-right: 32px;
+}
+.betteruptime-announcement__message p {
+    margin: 0;
+}
+.betteruptime-announcement__message a {
+    color: inherit;
+}
+.betteruptime-announcement__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: var(--betteruptime-announcement-padding-y, 14px) var(--betteruptime-announcement-padding-x, 16px);
+    z-index: 10;
+    text-decoration: none;
+    display: block;
+}
+.betteruptime-announcement__close svg {
+    width: 20px;
+    height: 20px;
+    fill: var(--betteruptime-announcement-color, #ffffff);
+}

announcement.js

@@ -0,0 +1,142 @@
+// Better Stack announcement bar 
+// Last Updated 9 December 2023 by JoshAtticus
+// For use on Meower sites only
+
+if (window.BetterUptimeAnnouncementWidget != null) {
+    window.BetterUptimeAnnouncementWidget.initialize();
+} else {
+    window.BetterUptimeAnnouncementWidget = {
+        currentScript: document.currentScript,
+        cookieName: "betteruptime_announcement_bar_dismissed",
+        announcementBarWrapper: null,
+        announcementBar: null,
+        announcementBarPlaceholder: null,
+        announcementLink: null,
+        announcementDigest: null,
+        initialize() {
+            if (this.currentScript == null || this.currentScript.dataset == null || this.currentScript.dataset.id == null) {
+                return;
+            }
+            this.loadStylesheet(() => {
+                this.loadAnnouncementBar(this.currentScript.dataset.id, (err, response) => {
+                    if (response.hidden) {
+                        return;
+                    }
+                    document.querySelectorAll(".betteruptime-announcement").forEach((node) => node.remove());
+                    this.announcementBarWrapper = this.htmlToElement(response.html);
+                    this.announcementBar = this.announcementBarWrapper.querySelector(".betteruptime-announcement");
+                    this.announcementDigest = response.digest;
+                    this.announcementLink = response.link;
+                    if (this.announcementDigest === this.getCookie(this.cookieName)) {
+                        return;
+                    }
+                    this.announcementBarPlaceholder = document.createElement("div");
+                    this.announcementBarPlaceholder.classList.add("betteruptime-announcement__placeholder");
+                    const firstChild = document.body.firstChild;
+                    document.body.insertBefore(this.announcementBarWrapper, firstChild);
+                    document.body.insertBefore(this.announcementBarPlaceholder, firstChild);
+                    this.resizePlaceholder();
+                    this.addEventHandlers();
+                });
+            });
+        },
+        htmlToElement(html) {
+            const template = document.createElement("template");
+            html = html.trim();
+            template.innerHTML = html;
+            return template.content.firstChild;
+        },
+        loadAnnouncementBar(id, callback) {
+            if (!callback) {
+                callback = function () {};
+            }
+            const url = `https://uptime.betterstack.com/widgets/announcement?id=148703`;
+            this.loadAsync(url, function (responseText) {
+                const json = JSON.parse(responseText);
+                if (json.success) {
+                    callback(null, json);
+                } else {
+                    console.error(`[Better Stack] Error loading Announcement Bar, used id: 148703`);
+                }
+            });
+        },
+        loadAsync(url, callback) {
+            if (!callback) {
+                callback = function () {};
+            }
+            const xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = function () {
+                if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
+                    callback(this.responseText);
+                }
+            };
+            xhr.open("GET", url);
+            xhr.send();
+        },
+        loadStylesheet(callback) {
+            const linkTag = document.createElement("link");
+            linkTag.type = "text/css";
+            linkTag.rel = "stylesheet";
+            linkTag.href = "https://meower.org/announcement.css";
+            this.style = document.head.appendChild(linkTag);
+            callback();
+        },
+        addEventHandlers() {
+            this.announcementBar.querySelector("[data-announcement-dismiss]").addEventListener("click", (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.dismissAnnouncementBar();
+            });
+            this.announcementBar.addEventListener("click", (e) => {
+                e.preventDefault();
+                this.openAnnouncementLink();
+            });
+        },
+        openAnnouncementLink() {
+            if (!this.announcementLink) {
+                return;
+            }
+            window.open(this.announcementLink, "_blank");
+        },
+        dismissAnnouncementBar() {
+            document.cookie = `${this.cookieName}=${this.announcementDigest}`;
+            this.announcementBar.remove();
+            this.announcementBarWrapper.remove();
+            this.announcementBarPlaceholder.remove();
+            this.style.remove();
+        },
+        resizePlaceholder() {
+            this.announcementBarPlaceholder.style.height = `${this.announcementBar.offsetHeight}px`;
+        },
+        getCookie(cname) {
+            const name = cname + "=";
+            const decodedCookie = decodeURIComponent(document.cookie);
+            const ca = decodedCookie.split(";");
+            let i = 0;
+            while (i < ca.length) {
+                let c = ca[i];
+                while (c.charAt(0) === " ") {
+                    c = c.substring(1);
+                }
+                if (c.indexOf(name) === 0) {
+                    return c.substring(name.length, c.length);
+                }
+                i++;
+            }
+        },
+    };
+    let initialized = false;
+    const initializeAnnouncementBar = function () {
+        if (document.readyState === "loading" || initialized) {
+            return;
+        }
+        window.BetterUptimeAnnouncementWidget.initialize();
+        initialized = true;
+    };
+    initializeAnnouncementBar();
+    document.onreadystatechange = initializeAnnouncementBar;
+    document.addEventListener("turbo:load", () => {
+        initialized = false;
+        initializeAnnouncementBar();
+    });
+}