feat(events): Add script to fetch and display Zoho calendar events

This commit introduces a new script that fetches and normalizes event data from Zoho Calendar using OAuth2. The script makes an API call to retrieve calendar events for the current month. The event data is then processed and formatted to be used by a Nunjucks template.

Key Changes:
- test(dummy-data): Created a dummy calendar and dummy events for development and testing.
- feat(events): Added a new script to fetch event data from Zoho Calendar.
- feat(oauth2): Implemented OAuth2 authentication for secure API access.
- refactor(data): Normalized the fetched data payload for consistency.
- feat(ui): Integrated the normalized data with a Nunjucks template to dynamically populate "event cards" on the community events page.

src/scripts/tooltips.js

@@ -1,42 +1,47 @@
-// JS for tooltip hover
 document.addEventListener("DOMContentLoaded", () => {
-    // Hide inline thumbs when JS is available
+    // Hide inline thumbs when JS is active
     document.querySelectorAll(".thumb-inline").forEach(img => img.style.display = "none");
 
-    // Tooltip element
     const tip = document.createElement("div");
     tip.className = "thumb-tooltip";
     document.body.appendChild(tip);
 
-    function positionTip(el) {
-        const rect = el.getBoundingClientRect();
-        const tipRect = tip.getBoundingClientRect();
-        let left = rect.left + window.scrollX;
-        if (left + tipRect.width > window.innerWidth) {
-            left = window.innerWidth - tipRect.width - 8; // small margin
-        }
-        tip.style.top = (rect.bottom + window.scrollY + 6) + "px";
-        tip.style.left = left + "px";
-    }
-
-
     function show(e) {
-        const url = e.currentTarget.getAttribute("data-tooltip");
+        const el = e.currentTarget;
+        const url = el.getAttribute("data-tooltip");
         if (!url) return;
 
-        // Preload image to get natural size
-        const img = new Image();
-        img.onload = () => {
-        tip.style.width = img.naturalWidth + "px";
-        tip.style.height = img.naturalHeight + "px";
         tip.style.backgroundImage = `url("${url}")`;
         tip.style.display = "block";
-        positionTip(e.currentTarget);
+
+        // preload image to size tooltip
+        const img = new Image();
+        img.onload = () => {
+            tip.style.width = img.naturalWidth + "px";
+            tip.style.height = img.naturalHeight + "px";
+
+            // position tooltip relative to element
+            const rect = el.getBoundingClientRect();
+            const scrollX = window.scrollX;
+            const scrollY = window.scrollY;
+
+            let left = rect.left + scrollX + (rect.width - tip.offsetWidth) / 2;
+            let top = rect.top + scrollY - tip.offsetHeight - 8; // above element
+
+            // fallback below if not enough space
+            if (top < scrollY) {
+                top = rect.bottom + scrollY + 8;
+            }
+
+            tip.style.left = left + "px";
+            tip.style.top = top + "px";
         };
         img.src = url;
     }
 
-    function hide() { tip.style.display = "none"; }
+    function hide() {
+        tip.style.display = "none";
+    }
 
     document.querySelectorAll("li.credit").forEach(item => {
         item.addEventListener("mouseenter", show);
@@ -44,4 +49,4 @@ document.addEventListener("DOMContentLoaded", () => {
         item.addEventListener("focusin", show);
         item.addEventListener("focusout", hide);
     });
-});
+});