@jamwidgets/astro 0.6.1 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jamwidgets/astro",
-  "version": "0.6.1",
+  "version": "0.6.4",
   "description": "Astro components and content loaders for Jamwidgets",
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@jamwidgets/core": "^0.5.1"
+    "@jamwidgets/core": "^0.5.3"
   },
   "peerDependencies": {
     "astro": "^5.9.0 || ^6.0.0 || ^7.0.0"

package/src/Announcements.astro

@@ -54,16 +54,7 @@ import Theme from "./Theme.astro";
     isDismissible: boolean;
   }
 
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { getVisitorId } from "@jamwidgets/core";
 
   document.querySelectorAll("[data-jamwidgets-announcements]").forEach((container) => {
     const endpoint = (container as HTMLElement).dataset.endpoint;
@@ -89,6 +80,16 @@ import Theme from "./Theme.astro";
       }
     }
 
+    function safeLinkUrl(value?: string): string | null {
+      if (!value) return null;
+      try {
+        const url = new URL(value, window.location.href);
+        return url.protocol === "http:" || url.protocol === "https:" ? url.href : null;
+      } catch {
+        return null;
+      }
+    }
+
     function renderAnnouncements(announcements: Announcement[]) {
       container.innerHTML = "";
 
@@ -97,25 +98,31 @@ import Theme from "./Theme.astro";
         el.className = `jamwidgets-announcement jamwidgets-announcement-${announcement.announcementType}`;
         el.dataset.announcementId = announcement.id;
 
-        let content = `<span class="jamwidgets-announcement-content">${announcement.content}</span>`;
-
-        if (announcement.linkUrl) {
-          content += ` <a href="${announcement.linkUrl}" class="jamwidgets-announcement-link">${announcement.linkText || "Learn more"}</a>`;
+        const contentEl = document.createElement("span");
+        contentEl.className = "jamwidgets-announcement-content";
+        contentEl.textContent = announcement.content;
+        el.append(contentEl);
+
+        const linkUrl = safeLinkUrl(announcement.linkUrl);
+        if (linkUrl) {
+          const link = document.createElement("a");
+          link.className = "jamwidgets-announcement-link";
+          link.href = linkUrl;
+          link.textContent = announcement.linkText || "Learn more";
+          el.append(" ", link);
         }
 
         if (announcement.isDismissible) {
-          content += `
+          el.insertAdjacentHTML("beforeend", `
             <button type="button" class="jamwidgets-announcement-dismiss" aria-label="Dismiss">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <line x1="18" y1="6" x2="6" y2="18"></line>
                 <line x1="6" y1="6" x2="18" y2="18"></line>
               </svg>
             </button>
-          `;
+          `);
         }
 
-        el.innerHTML = content;
-
         // Handle dismiss
         const dismissBtn = el.querySelector(".jamwidgets-announcement-dismiss");
         dismissBtn?.addEventListener("click", async () => {

package/src/Embed.astro

@@ -64,16 +64,7 @@ import Theme from "./Theme.astro";
     userVotes?: string[];
   }
 
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { getVisitorId } from "@jamwidgets/core";
 
   class JamwidgetsEmbed extends HTMLElement {
     connectedCallback() {
@@ -188,11 +179,13 @@ import Theme from "./Theme.astro";
             const inputType = poll!.settings.multiSelect ? "checkbox" : "radio";
             optionEl.innerHTML = `
               <label class="jamwidgets-poll-label ${isSelected ? "jamwidgets-selected" : ""}">
-                <input type="${inputType}" name="poll-${poll!.id}" value="${option.id}" ${isSelected ? "checked" : ""} />
-                <span class="jamwidgets-poll-text">${option.text}</span>
+                <input type="${inputType}" ${isSelected ? "checked" : ""} />
+                <span class="jamwidgets-poll-text"></span>
               </label>
             `;
             const input = optionEl.querySelector("input")!;
+            input.name = `poll-${poll!.id}`;
+            input.value = option.id;
             input.addEventListener("change", () => {
               if (poll!.settings.multiSelect) {
                 if (input.checked) {
@@ -215,7 +208,7 @@ import Theme from "./Theme.astro";
             optionEl.innerHTML = `
               <div class="jamwidgets-poll-result ${isSelected ? "jamwidgets-voted" : ""}">
                 <div class="jamwidgets-poll-bar" style="width: ${percent}%"></div>
-                <span class="jamwidgets-poll-text">${option.text}</span>
+                <span class="jamwidgets-poll-text"></span>
                 <span class="jamwidgets-poll-percent">${percent}%</span>
               </div>
             `;
@@ -223,10 +216,11 @@ import Theme from "./Theme.astro";
             // Show without results (voted but results hidden)
             optionEl.innerHTML = `
               <div class="jamwidgets-poll-result jamwidgets-no-results ${isSelected ? "jamwidgets-voted" : ""}">
-                <span class="jamwidgets-poll-text">${option.text}</span>
+                <span class="jamwidgets-poll-text"></span>
               </div>
             `;
           }
+          optionEl.querySelector(".jamwidgets-poll-text")!.textContent = option.text;
           optionsEl.appendChild(optionEl);
         });
 

package/src/Feedback.astro

@@ -90,16 +90,7 @@ import Theme from "./Theme.astro";
 </div>
 
 <script>
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { getVisitorId } from "@jamwidgets/core";
 
   document.querySelectorAll("[data-jamwidgets-feedback]").forEach((container) => {
     const endpoint = (container as HTMLElement).dataset.endpoint;

package/src/Poll.astro

@@ -89,16 +89,7 @@ import Theme from "./Theme.astro";
     userVotes?: string[];
   }
 
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { getVisitorId } from "@jamwidgets/core";
 
   document.querySelectorAll("[data-jamwidgets-poll]").forEach((container) => {
     const endpoint = (container as HTMLElement).dataset.endpoint;
@@ -172,11 +163,13 @@ import Theme from "./Theme.astro";
           const inputType = poll!.settings.multiSelect ? "checkbox" : "radio";
           optionEl.innerHTML = `
             <label class="jamwidgets-poll-label ${isSelected ? "jamwidgets-selected" : ""}">
-              <input type="${inputType}" name="poll-${poll!.id}" value="${option.id}" ${isSelected ? "checked" : ""} />
-              <span class="jamwidgets-poll-text">${option.text}</span>
+              <input type="${inputType}" ${isSelected ? "checked" : ""} />
+              <span class="jamwidgets-poll-text"></span>
             </label>
           `;
           const input = optionEl.querySelector("input")!;
+          input.name = `poll-${poll!.id}`;
+          input.value = option.id;
           input.addEventListener("change", () => {
             if (poll!.settings.multiSelect) {
               if (input.checked) {
@@ -199,7 +192,7 @@ import Theme from "./Theme.astro";
           optionEl.innerHTML = `
             <div class="jamwidgets-poll-result ${isSelected ? "jamwidgets-voted" : ""}">
               <div class="jamwidgets-poll-bar" style="width: ${percent}%"></div>
-              <span class="jamwidgets-poll-text">${option.text}</span>
+              <span class="jamwidgets-poll-text"></span>
               <span class="jamwidgets-poll-percent">${percent}%</span>
             </div>
           `;
@@ -207,10 +200,11 @@ import Theme from "./Theme.astro";
           // Show without results (voted but results hidden)
           optionEl.innerHTML = `
             <div class="jamwidgets-poll-result jamwidgets-no-results ${isSelected ? "jamwidgets-voted" : ""}">
-              <span class="jamwidgets-poll-text">${option.text}</span>
+              <span class="jamwidgets-poll-text"></span>
             </div>
           `;
         }
+        optionEl.querySelector(".jamwidgets-poll-text")!.textContent = option.text;
         optionsEl.appendChild(optionEl);
       });
 

package/src/Reactions.astro

@@ -106,11 +106,14 @@ import Theme from "./Theme.astro";
       "X-Jamwidgets-Visitor": visitorId,
     };
 
-    // Track which reactions the user has made (stored in localStorage)
     const storageKey = `jamwidgets-reactions-${pageId}`;
-    const userReactions = new Set<string>(
-      JSON.parse(localStorage.getItem(storageKey) || "[]")
-    );
+    const userReactions = new Set<string>();
+    try {
+      const stored = JSON.parse(localStorage.getItem(storageKey) || "[]");
+      if (Array.isArray(stored)) {
+        for (const type of stored) if (typeof type === "string") userReactions.add(type);
+      }
+    } catch {}
 
     // Apply initial "reacted" state
     container.querySelectorAll(".jamwidgets-reaction-btn").forEach((btn) => {
@@ -134,7 +137,7 @@ import Theme from "./Theme.astro";
 
         // Sync with server's user reactions
         serverUserReactions.forEach((type: string) => userReactions.add(type));
-        localStorage.setItem(storageKey, JSON.stringify([...userReactions]));
+        try { localStorage.setItem(storageKey, JSON.stringify([...userReactions])); } catch {}
 
         container.querySelectorAll(".jamwidgets-reaction-btn").forEach((btn) => {
           const type = (btn as HTMLElement).dataset.reactionType;
@@ -204,7 +207,7 @@ import Theme from "./Theme.astro";
               }),
             );
           }
-          localStorage.setItem(storageKey, JSON.stringify([...userReactions]));
+          try { localStorage.setItem(storageKey, JSON.stringify([...userReactions])); } catch {}
         } catch (e) {
           console.error(isReacted ? "Failed to remove reaction:" : "Failed to add reaction:", e);
         } finally {

package/src/Subscribe.astro

@@ -93,16 +93,7 @@ import Theme from "./Theme.astro";
     message: string;
   }
 
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { getVisitorId } from "@jamwidgets/core";
 
   document.querySelectorAll("[data-jamwidgets-subscribe]").forEach((form) => {
     form.addEventListener("submit", async (e) => {

package/src/Views.astro

@@ -65,16 +65,7 @@ import Theme from "./Theme.astro";
 </div>
 
 <script>
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { getVisitorId } from "@jamwidgets/core";
 
   document.querySelectorAll("[data-jamwidgets-views]").forEach((container) => {
     const endpoint = (container as HTMLElement).dataset.endpoint;

package/src/Waitlist.astro

@@ -71,16 +71,7 @@ import Theme from "./Theme.astro";
 </div>
 
 <script>
-  // Get or create a visitor ID for anonymous users
-  const VISITOR_KEY = "jamwidgets_visitor_id";
-  function getVisitorId(): string {
-    let id = localStorage.getItem(VISITOR_KEY);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(VISITOR_KEY, id);
-    }
-    return id;
-  }
+  import { getVisitorId } from "@jamwidgets/core";
 
   document.querySelectorAll("[data-jamwidgets-waitlist]").forEach((container) => {
     const endpoint = (container as HTMLElement).dataset.endpoint;