--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main.ts	Fri Aug 09 15:09:22 2024 -0700
@@ -0,0 +1,71 @@
+import { LitElement, TemplateResult, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("mm-page")
+export class MmPage extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        background: #121212;
+        color: white;
+        text-shadow: 0.6px 0.6px 0px #ffffff70;
+        font-family: monospace;
+        font-size: 135%;
+      }
+      div.message {
+        color: #888;
+      }
+      .msgKey {
+        color: #006699;
+        padding-left: 14px;
+      }
+      .msgValue {
+        color: #ff4500;
+      }
+      .metricName {
+        color: #008000;
+      }
+      .metricLabelName {
+        color: #9400d3;
+      }
+      .metricLabelValue {
+        color: #ffc125;
+      }
+      .metricValue {
+        color: #4169e1;
+      }
+    `,
+  ];
+  render() {
+    return html`
+      <h1>Mqtt metrics</h1>
+
+      <div class="message">
+        <div>
+          Incoming mqtt message: <span class="msgKey">t</span>=<span class="msgValue">${"2024-08-09 14:43:28"}</span> <span class="msgKey">topic</span>=<span
+            class="msgValue"
+            >${"tr-air-quality/sensor/particulate_matter__10_0__m_concentration/state"}</span
+          >
+          <span class="msgKey">message</span>=<span class="msgValue">${"12"}</span>
+        </div>
+        <div>
+          Converted to metrics event:
+          <span class="metricName">pm_concentration</span>
+          {
+          <span class="metricLabelName">location</span>="<span class="metricLabelValue">rr</span>", <span class="metricLabelName">size</span>="<span
+            class="metricLabelValue"
+            >10</span
+          >" } value=<span class="metricValue">12</span>
+        </div>
+      </div>
+
+      <p>
+        <a href="metrics">metrics</a> |
+      </p>
+      <bigast-loginbar></bigast-loginbar>
+    `;
+  }
+}