--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/FdCountdown.ts	Thu Jun 06 17:52:28 2024 -0700
@@ -0,0 +1,83 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { sortBy } from "lodash";
+import { DataFactory, Quad_Subject, Store } from "n3";
+import { shared } from "./shared";
+import { EV, fetchGraph, parseGraph, RDF } from "./parseRdf";
+import { DisplayEvent } from "./DisplayEvent";
+
+const { namedNode } = DataFactory;
+
+@customElement("fd-countdown")
+export class FdCountdown extends LitElement {
+  static styles = [
+    shared,
+    css`
+      ol {
+        list-style: none;
+        font-size: 16px;
+        background: #cd66bb2e;
+        padding: 9px;
+        width: fit-content;
+        position: relative;
+        top: -21px;
+        border-radius: 14px;
+      }
+      span.d {
+        opacity: 0.5;
+      }
+      li:has(.until) {
+        color: #666;
+      }
+      li:has(.until-2d) {
+        color: #fff;
+      }
+      li:has(.until-7d) {
+        color: #ccc;
+      }
+      li:has(.until-30d) {
+        color: #999;
+      }
+      li:has(.until)::before {
+        display: inline-block;
+        width: 1.4em;
+        content: "";
+      }
+      li:has(.until-2d)::before {
+        content: "🌕";
+      }
+      li:has(.until-7d)::before {
+        content: "🌙";
+      }
+      li:has(.until-30d)::before {
+        content: "🌑";
+      }
+    `,
+  ];
+  @property() evs: DisplayEvent[];
+  constructor() {
+    super();
+    this.evs = [];
+    this.load();
+    setInterval(this.load.bind(this), 5 * 60 * 1000);
+  }
+  async load() {
+    const store = new Store();
+    const r = await fetchGraph("/gcalendarwatch/graph/calendar/countdown");
+    await parseGraph(r, (store: Store) => {
+      const graph = namedNode(EV + "gcalendar");
+      this.evs = [];
+      store.getSubjects(namedNode(RDF + "type"), namedNode(EV + "Event"), graph).forEach((ev: Quad_Subject) => {
+        const de = new DisplayEvent(store, graph, ev);
+        this.evs = [...this.evs, de];
+      });
+      this.evs = sortBy(this.evs, "start");
+    });
+  }
+  render() {
+    return html`<h1 data-text="Coming Soon">Coming Soon</h1>
+      <ol>
+        ${this.evs.map((d) => html`<li>In ${d.inHowLong()}, ${d.title}</li>`)}
+      </ol> `;
+  }
+}