statuspage embed link

bitrise-io · Jun 17, 2024 · 09b9b94 · 09b9b94
1 parent 13ca3e3
commit 09b9b94
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 0 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+
+  <a href="https://status.bitrise.io/" id="statuspage" targe="_blank" title="Website Status">Website Status</a>
+  <script src="/status.js"></script>
+
+</body>
+</html>
diff --git a/src/css/status.css b/src/css/status.css
@@ -0,0 +1,47 @@
+a.statuspage__entry-point {
+  --radii-4: 4px;
+  --space-8: 8px;
+  --space-12: 12px;
+
+  --red-70: #ff8091;
+  --green-70: #77cf8f;
+  --orange-70: #fd9730;
+  --yellow-70: #ebba00;
+  --neutral-10: #201b22;
+
+  font-family: "Figtree", sans-serif;
+  font-size: 0.6875rem;
+  line-height: 1rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  text-decoration: none;
+  border-radius: var(--radii-4);
+  display: inline-block;
+  padding: calc(var(--space-8) - 1px) calc(var(--space-12) - 1px);
+  border-width: 1px;
+  border-style: solid;
+}
+
+a.statuspage__severity-none {
+  border-color: var(--green-70);
+  background-color: var(--green-70);
+  color: var(--neutral-10);
+}
+
+a.statuspage__severity-minor {
+  border-color: var(--yellow-70);
+  background-color: var(--yellow-70);
+  color: var(--neutral-10);
+}
+
+a.statuspage__severity-major {
+  border-color: var(--orange-70);
+  background-color: var(--orange-70);
+  color: var(--neutral-10);
+}
+
+a.statuspage__severity-critical {
+  border-color: var(--red-70);
+  background-color: var(--red-70);
+  color: var(--neutral-10);
+}
diff --git a/src/js/status.js b/src/js/status.js
@@ -0,0 +1,44 @@
+/**
+ * Statuspage Embed Link
+ * @see https://metastatuspage.com/api
+ */
+
+import '../css/status.css';
+
+/**
+ * @typedef {{
+ *  page: {
+ *    id: string;
+ *    name: string;
+ *    url: string;
+ *    time_zone: string;
+ *    updated_at: string;
+ *  };
+ *  status: {
+ *    indicator: "minor" | "major" | "critical" | "none" | "maintenance";
+ *    description: string;
+ *  };
+ * }} StatusResult
+ */
+
+(async () => {
+  /** @type {HTMLAnchorElement} */
+  const statusLink = document.getElementById('statuspage');
+  statusLink.className = `statuspage__entry-point`;
+
+  const statusURL = new URL(statusLink.href);
+  statusURL.pathname = '/api/v2/status.json';
+
+  try {
+    const result = await fetch(statusURL);
+    /** @type {StatusResult} */
+    const data = await result.json();
+    const severity = data.status.indicator === 'maintenance' ? 'minor' : data.status.indicator;
+    statusLink.className = `statuspage__entry-point statuspage__severity-${severity}`;
+    statusLink.innerHTML = `Status: ${data.status.description}`;
+  } catch (e) {
+    /* something's wrong */
+  }
+})();
+
+if (import.meta.webpackHot) import.meta.webpackHot.accept();