add status page and embed Datadog dashboard; enhance styles for status embed

Author: robertDurst

docs/index.ptree

@@ -2,3 +2,4 @@
 
 index.html
 manifesto.html
+status.html

docs/pollen.rkt

@@ -45,3 +45,10 @@
      (h3 (a ((href ,url)) ,name))
      (p ((class "project-desc")) ,@description)
      (p ((class "project-status")) (span ((class "pink")) "Status: ") (em ,status) " · Written in " (a ((href ,lang-url)) ,lang))))
+
+;; Datadog dashboard embed
+(define (datadog-embed src)
+  `(div ((class "status-embed"))
+     (iframe ((src ,src)
+              (title "Brickell Research status dashboard")
+              (loading "lazy")))))

docs/status.html.pm

@@ -0,0 +1,9 @@
+#lang pollen
+
+◊(define-meta title "Status")
+
+◊h2{System Status}
+
+◊cyan{We dogfood ◊link["https://caffeine-lang.run/"]{Caffeine} on our own infrastructure. The dashboard below is rendered from SLO definitions written in Caffeine and shipped to Datadog.}
+
+◊datadog-embed["https://p.datadoghq.com/sb/embed/5132f4c8-409d-11ee-9683-da7ad0900002-679fca999eae93e17c4c020056700d2e"]

docs/styles.css

@@ -84,6 +84,29 @@ li { margin-bottom: 0.8em; }
 .project-status em { color: #00CED1; }
 
 
+.status-embed {
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(calc(100vw - 2rem), 900px);
+  margin: 1.5rem 0;
+  border: 1px solid #1a1a2e;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #0a0a14;
+}
+
+.status-embed iframe {
+  display: block;
+  width: 100%;
+  height: 800px;
+  border: 0;
+}
+
+@media (max-width: 600px) {
+  .status-embed iframe { height: 600px; }
+}
+
 .manifesto-comment {
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.85em;