From 09b9b94c60fe61f868764ab76536250b80528805 Mon Sep 17 00:00:00 2001 From: Antal Orcsik Date: Mon, 17 Jun 2024 13:14:41 +0200 Subject: [PATCH] statuspage embed link --- dist/index.html | 14 ++++++++++++++ src/css/status.css | 47 ++++++++++++++++++++++++++++++++++++++++++++++ src/js/status.js | 44 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 105 insertions(+) create mode 100644 src/css/status.css create mode 100644 src/js/status.js diff --git a/dist/index.html b/dist/index.html index e69de29..d20c6b9 100644 --- a/dist/index.html +++ b/dist/index.html @@ -0,0 +1,14 @@ + + + + + + Document + + + + Website Status + + + + \ No newline at end of file diff --git a/src/css/status.css b/src/css/status.css new file mode 100644 index 0000000..18d2b06 --- /dev/null +++ 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 new file mode 100644 index 0000000..fcf1567 --- /dev/null +++ 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();