initial commit

2026-04-17 15:32:19 +02:00
commit 8d1a6ba740
7 changed files with 955 additions and 0 deletions
@@ -0,0 +1,109 @@
+import { format } from "date-fns";
+import Handlebars from "handlebars";
+import romcal from "romcal";
+import { isToday } from "date-fns";
+
+function css() {
+  let color = "#007acc"; // Default color
+
+  const event = romcal
+    .calendarFor(new Date().getFullYear())
+    .find((e) => isToday(new Date(e.moment)));
+
+  if (event) {
+    if (event.data.meta.liturgicalColor.key.toLowerCase() === "white") {
+      color = "goldenrod"; // Use goldenrod for better visibility on white
+    } else {
+      color = event.data.meta.liturgicalColor.value;
+    }
+  }
+
+  return `
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+    padding: 0;
+    background-color: #f9f9f9;
+  }
+  h1 {
+    color: #333;
+    transition: color 0.3s;
+  }
+  h1:hover {
+    color: ${color};
+    cursor: pointer;
+  }
+  strong {
+    color: #333;
+  }
+  h2 {
+    color: ${color};
+    font-size: 18px;
+    margin-top: 5px;
+  }
+  p {
+    font-size: 16px;
+    line-height: 1.5;
+    color: #555;
+  }
+</style>
+`;
+}
+
+export const base = `
+  <html>
+    <head>
+      ${css()}
+    </head>
+    <body onload="glimpse.send({ action: 'ready' })">
+      <h1>Loading...</h1>
+    </body>
+  </html>
+  `;
+
+const readingTemplate = Handlebars.compile(`
+<html>
+  <head>
+    ${css()}
+  </head>
+  <body>
+    <h2>{{title}}</h2>
+    <h5>{{date}}</h2>
+    {{#each readings}}
+      <hr />
+      <h1 onclick="glimpse.send({ action: 'openUrl', url: '{{this.url}}' })">
+        {{this.title}}
+      </h1>
+      <p>{{{this.content}}}</p>
+    {{/each}}
+  </body>
+</html>
+`);
+
+export function reading(title, readings) {
+  const now = new Date();
+  const url = `https://bible.usccb.org/bible/readings/${format(now, "MMddyy")}.cfm`;
+  const date = format(now, "MMMM d, yyyy");
+
+  return readingTemplate({
+    title,
+    readings,
+    url,
+    date,
+  });
+}
+
+export function error(status) {
+  return `
+  <html>
+    <head>
+      ${css}
+    </head>
+    <body>
+      <h1>Error fetching reading</h1>
+      <p>Status: ${status}</p>
+    </body>
+  </html>
+  `;
+}