@jamwidgets/astro 0.1.0

package/src/Announcements.astro

@@ -0,0 +1,233 @@
+---
+/**
+ * JamWidgets Announcements Component
+ *
+ * Displays site-wide announcements/banners.
+ * Supports dismissible announcements with localStorage persistence.
+ *
+ * @example
+ * <Announcements siteKey={import.meta.env.JAMWIDGETS_SITE_KEY} />
+ */
+
+interface Props {
+  /** Your site key (required) */
+  siteKey: string;
+  /** Base URL of your JamWidgets instance (default: 'https://jamwidgets.com') */
+  endpoint?: string;
+  /** CSS class to add to the container */
+  class?: string;
+}
+
+const DEFAULT_ENDPOINT = "https://jamwidgets.com";
+const API_PATH = "/api/v1";
+
+const {
+  siteKey,
+  endpoint = DEFAULT_ENDPOINT,
+  class: className = "",
+} = Astro.props;
+
+// Build the API URL
+const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+---
+
+<div
+  class:list={["jamwidgets-announcements", className]}
+  data-jamwidgets-announcements
+  data-endpoint={baseUrl}
+  data-site-key={siteKey}
+></div>
+
+<script>
+  interface Announcement {
+    id: string;
+    content: string;
+    announcementType: "info" | "warning" | "success" | "error";
+    linkUrl?: string;
+    linkText?: string;
+    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;
+  }
+
+  document.querySelectorAll("[data-jamwidgets-announcements]").forEach((container) => {
+    const endpoint = (container as HTMLElement).dataset.endpoint;
+    const siteKey = (container as HTMLElement).dataset.siteKey;
+
+    if (!endpoint || !siteKey) return;
+
+    const visitorId = getVisitorId();
+    const headers = {
+      "X-JamWidgets-Key": siteKey,
+      "X-JamWidgets-Visitor": visitorId,
+    };
+
+    async function loadAnnouncements() {
+      try {
+        const response = await fetch(`${endpoint}/announcements`, { headers });
+        if (!response.ok) return;
+        const data = await response.json();
+        const announcements: Announcement[] = data.announcements || [];
+        renderAnnouncements(announcements);
+      } catch (e) {
+        console.error("Failed to load announcements:", e);
+      }
+    }
+
+    function renderAnnouncements(announcements: Announcement[]) {
+      container.innerHTML = "";
+
+      announcements.forEach((announcement) => {
+        const el = document.createElement("div");
+        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>`;
+        }
+
+        if (announcement.isDismissible) {
+          content += `
+            <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 () => {
+          try {
+            await fetch(`${endpoint}/announcements/${announcement.id}/dismiss`, {
+              method: "POST",
+              headers,
+            });
+            el.remove();
+            container.dispatchEvent(
+              new CustomEvent("jamwidgets:announcement-dismissed", {
+                detail: { id: announcement.id },
+              }),
+            );
+          } catch (e) {
+            console.error("Failed to dismiss announcement:", e);
+          }
+        });
+
+        container.appendChild(el);
+      });
+    }
+
+    loadAnnouncements();
+  });
+</script>
+
+<style is:global>
+  @layer jamwidgets {
+    .jamwidgets-announcements {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .jamwidgets-announcement {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.75rem 1rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+    }
+
+    .jamwidgets-announcement-info {
+      background: #dbeafe;
+      color: #1e40af;
+    }
+
+    .jamwidgets-announcement-warning {
+      background: #fef3c7;
+      color: #92400e;
+    }
+
+    .jamwidgets-announcement-success {
+      background: #dcfce7;
+      color: #166534;
+    }
+
+    .jamwidgets-announcement-error {
+      background: #fef2f2;
+      color: #991b1b;
+    }
+
+    .jamwidgets-announcement-content {
+      flex: 1;
+    }
+
+    .jamwidgets-announcement-link {
+      font-weight: 500;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    .jamwidgets-announcement-link:hover {
+      text-decoration: none;
+    }
+
+    .jamwidgets-announcement-dismiss {
+      padding: 0.25rem;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      opacity: 0.6;
+      transition: opacity 0.15s;
+      display: flex;
+    }
+
+    .jamwidgets-announcement-dismiss:hover {
+      opacity: 1;
+    }
+
+    .jamwidgets-announcement-dismiss svg {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    /* Dark mode adjustments */
+    @media (prefers-color-scheme: dark) {
+      .jamwidgets-announcement-info {
+        background: rgba(59, 130, 246, 0.2);
+        color: #93c5fd;
+      }
+
+      .jamwidgets-announcement-warning {
+        background: rgba(245, 158, 11, 0.2);
+        color: #fcd34d;
+      }
+
+      .jamwidgets-announcement-success {
+        background: rgba(34, 197, 94, 0.2);
+        color: #86efac;
+      }
+
+      .jamwidgets-announcement-error {
+        background: rgba(239, 68, 68, 0.2);
+        color: #fca5a5;
+      }
+    }
+  }
+</style>

package/src/Comments.astro

@@ -0,0 +1,481 @@
+---
+/**
+ * JamWidgets Comments Component
+ *
+ * Displays threaded comments with a form to post new comments and replies.
+ * Customize with CSS custom properties.
+ *
+ * @example
+ * <Comments siteKey={import.meta.env.JAMWIDGETS_SITE_KEY} pageId={Astro.url.pathname} />
+ */
+
+interface Props {
+  /** Your site key (required) */
+  siteKey: string;
+  /** Unique identifier for this page (e.g., slug or URL path) */
+  pageId: string;
+  /** Base URL of your JamWidgets instance (default: 'https://jamwidgets.com') */
+  endpoint?: string;
+  /** Theme preset: 'light' (default), 'dark', or 'auto' (uses prefers-color-scheme) */
+  theme?: "light" | "dark" | "auto";
+  /** CSS class to add to the container */
+  class?: string;
+}
+
+const DEFAULT_ENDPOINT = "https://jamwidgets.com";
+const API_PATH = "/api/v1";
+
+const {
+  siteKey,
+  pageId,
+  endpoint = DEFAULT_ENDPOINT,
+  theme = "light",
+  class: className = "",
+} = Astro.props;
+
+// Build the API URL
+const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+---
+
+<div
+  class:list={["jamwidgets-comments", `jamwidgets-theme-${theme}`, className]}
+  data-jamwidgets-comments
+  data-endpoint={baseUrl}
+  data-site-key={siteKey}
+  data-page-id={pageId}
+>
+  <div class="jamwidgets-comments-list"></div>
+
+  <form class="jamwidgets-comments-form">
+    <div class="jamwidgets-reply-indicator" style="display: none;">
+      <span>Replying to <strong class="jamwidgets-reply-to-name"></strong></span>
+      <button type="button" class="jamwidgets-cancel-reply">Cancel</button>
+    </div>
+    <input type="hidden" name="parentId" value="" />
+    <slot name="form">
+      <div class="jamwidgets-form-group">
+        <label for="jamwidgets-author-name">Name</label>
+        <input type="text" id="jamwidgets-author-name" name="authorName" required />
+      </div>
+      <div class="jamwidgets-form-group">
+        <label for="jamwidgets-author-email">Email (optional)</label>
+        <input type="email" id="jamwidgets-author-email" name="authorEmail" />
+      </div>
+      <div class="jamwidgets-form-group">
+        <label for="jamwidgets-content">Comment</label>
+        <textarea id="jamwidgets-content" name="content" required rows="3"></textarea>
+      </div>
+      <button type="submit">Post Comment</button>
+    </slot>
+
+    <!-- Honeypot field for spam protection (hidden from users, catches bots) -->
+    <div style="position: absolute; left: -9999px;" aria-hidden="true">
+      <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" />
+    </div>
+  </form>
+
+  <template id="jamwidgets-comment-template">
+    <div class="jamwidgets-comment">
+      <div class="jamwidgets-comment-header">
+        <span class="jamwidgets-comment-author"></span>
+        <span class="jamwidgets-comment-date"></span>
+      </div>
+      <div class="jamwidgets-comment-content"></div>
+      <button type="button" class="jamwidgets-reply-btn">Reply</button>
+      <div class="jamwidgets-comment-replies"></div>
+    </div>
+  </template>
+</div>
+
+<script>
+  interface Comment {
+    id: string;
+    authorName: string;
+    content: string;
+    createdAt: string;
+    replies: Comment[];
+  }
+
+  // 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;
+  }
+
+  // Store form load timestamps for spam detection
+  const formTimestamps = new WeakMap<Element, number>();
+
+  document.querySelectorAll("[data-jamwidgets-comments]").forEach((container) => {
+    const endpoint = (container as HTMLElement).dataset.endpoint;
+    const siteKey = (container as HTMLElement).dataset.siteKey;
+    const pageId = (container as HTMLElement).dataset.pageId;
+    const list = container.querySelector(".jamwidgets-comments-list");
+    const form = container.querySelector(".jamwidgets-comments-form") as HTMLFormElement;
+    const template = container.querySelector("#jamwidgets-comment-template") as HTMLTemplateElement;
+    const replyIndicator = container.querySelector(".jamwidgets-reply-indicator") as HTMLElement;
+    const replyToName = container.querySelector(".jamwidgets-reply-to-name") as HTMLElement;
+    const cancelReplyBtn = container.querySelector(".jamwidgets-cancel-reply") as HTMLButtonElement;
+    const parentIdInput = form?.querySelector('input[name="parentId"]') as HTMLInputElement;
+
+    if (!endpoint || !siteKey || !pageId || !list || !form || !template) return;
+
+    const visitorId = getVisitorId();
+    const headers = {
+      "X-JamWidgets-Key": siteKey,
+      "X-JamWidgets-Visitor": visitorId,
+    };
+
+    // Record when form was loaded (for time-based spam detection)
+    formTimestamps.set(form, Math.floor(Date.now() / 1000));
+
+    // Cancel reply mode
+    function cancelReply() {
+      if (parentIdInput) parentIdInput.value = "";
+      if (replyIndicator) replyIndicator.style.display = "none";
+      const submitBtn = form.querySelector('[type="submit"]') as HTMLButtonElement;
+      if (submitBtn) submitBtn.textContent = "Post Comment";
+    }
+
+    cancelReplyBtn?.addEventListener("click", cancelReply);
+
+    async function loadComments() {
+      try {
+        const response = await fetch(
+          `${endpoint}/comments/${encodeURIComponent(pageId!)}`,
+          { headers },
+        );
+        if (!response.ok) return;
+        const data = await response.json();
+        renderComments(data.comment_threads || []);
+      } catch (e) {
+        console.error("Failed to load comments:", e);
+      }
+    }
+
+    function renderComments(comments: Comment[]) {
+      list!.innerHTML = "";
+      if (comments.length === 0) {
+        const empty = document.createElement("p");
+        empty.className = "jamwidgets-comments-empty";
+        empty.textContent = "No comments yet. Be the first!";
+        list!.appendChild(empty);
+        return;
+      }
+      comments.forEach((comment) => renderComment(comment, list!));
+    }
+
+    function renderComment(comment: Comment, parent: Element) {
+      const clone = template!.content.cloneNode(true) as DocumentFragment;
+      const el = clone.querySelector(".jamwidgets-comment") as HTMLElement;
+      el.dataset.commentId = comment.id;
+      el.querySelector(".jamwidgets-comment-author")!.textContent = comment.authorName;
+      el.querySelector(".jamwidgets-comment-date")!.textContent = new Date(
+        comment.createdAt,
+      ).toLocaleDateString();
+      el.querySelector(".jamwidgets-comment-content")!.textContent = comment.content;
+
+      // Add reply button handler
+      const replyBtn = el.querySelector(".jamwidgets-reply-btn") as HTMLButtonElement;
+      replyBtn?.addEventListener("click", () => {
+        if (parentIdInput) parentIdInput.value = comment.id;
+        if (replyToName) replyToName.textContent = comment.authorName;
+        if (replyIndicator) replyIndicator.style.display = "flex";
+        const submitBtn = form.querySelector('[type="submit"]') as HTMLButtonElement;
+        if (submitBtn) submitBtn.textContent = "Post Reply";
+        // Scroll form into view and focus
+        form.scrollIntoView({ behavior: "smooth", block: "center" });
+        const contentField = form.querySelector('textarea[name="content"]') as HTMLTextAreaElement;
+        setTimeout(() => contentField?.focus(), 300);
+      });
+
+      const repliesContainer = el.querySelector(".jamwidgets-comment-replies")!;
+      comment.replies?.forEach((reply) => renderComment(reply, repliesContainer));
+
+      parent.appendChild(clone);
+    }
+
+    form.addEventListener("submit", async (e) => {
+      e.preventDefault();
+      const formEl = e.target as HTMLFormElement;
+      const formData = new FormData(formEl);
+      const submitBtn = formEl.querySelector('[type="submit"]') as HTMLButtonElement;
+
+      if (submitBtn) submitBtn.disabled = true;
+
+      // Get honeypot value (should be empty for real users)
+      const honeypot = formData.get("_gotcha") as string | null;
+
+      // Get load timestamp for time-based spam detection
+      const loadTimestamp = formTimestamps.get(formEl);
+
+      // Get parent ID if replying
+      const parentId = formData.get("parentId") as string | null;
+
+      try {
+        const response = await fetch(
+          `${endpoint}/comments/${encodeURIComponent(pageId)}`,
+          {
+            method: "POST",
+            headers: {
+              ...headers,
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              authorName: formData.get("authorName"),
+              authorEmail: formData.get("authorEmail") || undefined,
+              content: formData.get("content"),
+              parentId: parentId ? parseInt(parentId, 10) : undefined,
+              _gotcha: honeypot || undefined,
+              _jamwidgets_ts: loadTimestamp,
+            }),
+          },
+        );
+
+        if (!response.ok) throw new Error("Failed to post comment");
+
+        formEl.reset();
+        cancelReply(); // Reset reply mode
+        container.dispatchEvent(
+          new CustomEvent("jamwidgets:comment-posted", {
+            detail: await response.json(),
+          }),
+        );
+
+        // Show pending notice (comment may need approval)
+        const notice = document.createElement("p");
+        notice.className = "jamwidgets-comment-notice";
+        notice.textContent = "Thanks! Your comment is pending approval.";
+        formEl.appendChild(notice);
+        setTimeout(() => notice.remove(), 5000);
+      } catch (e) {
+        console.error("Failed to post comment:", e);
+      } finally {
+        if (submitBtn) submitBtn.disabled = false;
+      }
+    });
+
+    loadComments();
+  });
+</script>
+
+<style is:global>
+  .jamwidgets-comments {
+    --jamwidgets-border-color: #e5e7eb;
+    --jamwidgets-bg-color: #f9fafb;
+    --jamwidgets-text-color: inherit;
+    --jamwidgets-text-muted: #6b7280;
+    --jamwidgets-input-bg: white;
+    --jamwidgets-input-border: #9ca3af;
+    --jamwidgets-focus-color: #3b82f6;
+    --jamwidgets-focus-ring: rgba(59, 130, 246, 0.2);
+    --jamwidgets-button-bg: #3b82f6;
+    --jamwidgets-button-hover: #2563eb;
+    --jamwidgets-button-text: white;
+    --jamwidgets-notice-bg: #fef3c7;
+    --jamwidgets-notice-text: #92400e;
+    color: var(--jamwidgets-text-color);
+  }
+
+  .jamwidgets-comments.jamwidgets-theme-dark {
+    --jamwidgets-border-color: #4b5563;
+    --jamwidgets-bg-color: transparent;
+    --jamwidgets-text-color: #f3f4f6;
+    --jamwidgets-text-muted: #9ca3af;
+    --jamwidgets-input-bg: #374151;
+    --jamwidgets-input-border: #9ca3af;
+    --jamwidgets-focus-color: #60a5fa;
+    --jamwidgets-focus-ring: rgba(96, 165, 250, 0.3);
+    --jamwidgets-button-bg: #3b82f6;
+    --jamwidgets-button-hover: #60a5fa;
+    --jamwidgets-button-text: white;
+    --jamwidgets-notice-bg: #422006;
+    --jamwidgets-notice-text: #fcd34d;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .jamwidgets-comments.jamwidgets-theme-auto {
+      --jamwidgets-border-color: #4b5563;
+      --jamwidgets-bg-color: transparent;
+      --jamwidgets-text-color: #f3f4f6;
+      --jamwidgets-text-muted: #9ca3af;
+      --jamwidgets-input-bg: #374151;
+      --jamwidgets-input-border: #9ca3af;
+      --jamwidgets-focus-color: #60a5fa;
+      --jamwidgets-focus-ring: rgba(96, 165, 250, 0.3);
+      --jamwidgets-button-bg: #3b82f6;
+      --jamwidgets-button-hover: #60a5fa;
+      --jamwidgets-button-text: white;
+      --jamwidgets-notice-bg: #422006;
+      --jamwidgets-notice-text: #fcd34d;
+    }
+  }
+
+  .jamwidgets-comments-form {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--jamwidgets-border-color);
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+  }
+
+  @media (min-width: 480px) {
+    .jamwidgets-comments-form {
+      grid-template-columns: 1fr 1fr;
+    }
+    .jamwidgets-comments-form .jamwidgets-form-group:has(textarea),
+    .jamwidgets-comments-form .jamwidgets-reply-indicator,
+    .jamwidgets-comments-form button[type="submit"] {
+      grid-column: 1 / -1;
+    }
+  }
+
+  .jamwidgets-reply-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    background: var(--jamwidgets-notice-bg);
+    color: var(--jamwidgets-notice-text);
+    border-radius: 0.25rem;
+    font-size: 0.8125rem;
+    grid-column: 1 / -1;
+  }
+
+  .jamwidgets-cancel-reply {
+    margin-left: auto;
+    padding: 0.125rem 0.5rem;
+    background: transparent;
+    border: 1px solid currentColor;
+    border-radius: 0.25rem;
+    color: inherit;
+    font-size: 0.75rem;
+    cursor: pointer;
+  }
+
+  .jamwidgets-form-group {
+    margin-bottom: 0;
+  }
+
+  .jamwidgets-form-group label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-weight: 500;
+    font-size: 0.75rem;
+  }
+
+  .jamwidgets-comments .jamwidgets-form-group input,
+  .jamwidgets-comments .jamwidgets-form-group textarea {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--jamwidgets-input-border);
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    background: var(--jamwidgets-input-bg);
+    color: var(--jamwidgets-text-color);
+    font-family: inherit;
+  }
+
+  .jamwidgets-comments .jamwidgets-form-group textarea {
+    min-height: 5rem;
+    resize: vertical;
+  }
+
+  .jamwidgets-comments .jamwidgets-form-group input:focus,
+  .jamwidgets-comments .jamwidgets-form-group textarea:focus {
+    outline: none;
+    border-color: var(--jamwidgets-focus-color);
+    box-shadow: 0 0 0 2px var(--jamwidgets-focus-ring);
+  }
+
+  .jamwidgets-comments .jamwidgets-comments-form button[type="submit"] {
+    padding: 0.5rem 1rem;
+    background: var(--jamwidgets-button-bg);
+    color: var(--jamwidgets-button-text);
+    border: none;
+    border-radius: 0.375rem;
+    font-weight: 500;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .jamwidgets-comments .jamwidgets-comments-form button[type="submit"]:hover {
+    background: var(--jamwidgets-button-hover);
+  }
+
+  .jamwidgets-comments .jamwidgets-comments-form button[type="submit"]:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .jamwidgets-comment {
+    padding: 0.75rem;
+    background: var(--jamwidgets-bg-color);
+    border: 1px solid var(--jamwidgets-border-color);
+    border-radius: 0.375rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .jamwidgets-comment-header {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-bottom: 0.25rem;
+    font-size: 0.8125rem;
+  }
+
+  .jamwidgets-comment-author {
+    font-weight: 600;
+  }
+
+  .jamwidgets-comment-date {
+    color: var(--jamwidgets-text-muted);
+    font-size: 0.75rem;
+  }
+
+  .jamwidgets-comment-content {
+    white-space: pre-wrap;
+    font-size: 0.875rem;
+  }
+
+  .jamwidgets-reply-btn {
+    margin-top: 0.5rem;
+    padding: 0.125rem 0.5rem;
+    background: transparent;
+    border: none;
+    color: var(--jamwidgets-text-muted);
+    font-size: 0.75rem;
+    cursor: pointer;
+  }
+
+  .jamwidgets-reply-btn:hover {
+    color: var(--jamwidgets-focus-color);
+    text-decoration: underline;
+  }
+
+  .jamwidgets-comment-replies {
+    margin-left: 1rem;
+    margin-top: 0.5rem;
+  }
+
+  .jamwidgets-comments-empty {
+    color: var(--jamwidgets-text-muted);
+    font-style: italic;
+    font-size: 0.875rem;
+  }
+
+  .jamwidgets-comment-notice {
+    margin-top: 0.5rem;
+    padding: 0.375rem 0.5rem;
+    background: var(--jamwidgets-notice-bg);
+    color: var(--jamwidgets-notice-text);
+    border-radius: 0.25rem;
+    font-size: 0.8125rem;
+  }
+</style>