@jamwidgets/astro 0.1.0

package/src/Reactions.astro

@@ -0,0 +1,317 @@
+---
+/**
+ * JamWidgets Reactions Component
+ *
+ * Displays reaction buttons (like, clap, etc.) for a page.
+ * Customize with CSS custom properties.
+ *
+ * @example
+ * <Reactions
+ *   siteKey={import.meta.env.JAMWIDGETS_SITE_KEY}
+ *   pageId={Astro.url.pathname}
+ *   reactions={['like', 'love', 'clap']}
+ * />
+ */
+
+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;
+  /** Reaction types to show (default: ['like']) */
+  reactions?: string[];
+  /** Custom icons for reaction types (emoji or text) */
+  icons?: Record<string, 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 defaultIcons: Record<string, string> = {
+  like: "\u{1F44D}",
+  love: "\u{2764}\u{FE0F}",
+  clap: "\u{1F44F}",
+  fire: "\u{1F525}",
+  think: "\u{1F914}",
+  sad: "\u{1F622}",
+  laugh: "\u{1F602}",
+};
+
+const {
+  siteKey,
+  pageId,
+  endpoint = DEFAULT_ENDPOINT,
+  reactions = ["like"],
+  icons = {},
+  theme = "light",
+  class: className = "",
+} = Astro.props;
+
+// Merge custom icons with defaults
+const mergedIcons = { ...defaultIcons, ...icons };
+
+function getIcon(type: string): string {
+  return mergedIcons[type] || type;
+}
+
+// Build the API URL
+const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+---
+
+<div
+  class:list={["jamwidgets-reactions", `jamwidgets-theme-${theme}`, className]}
+  data-jamwidgets-reactions
+  data-endpoint={baseUrl}
+  data-site-key={siteKey}
+  data-page-id={pageId}
+>
+  {
+    reactions.map((reaction) => (
+      <button
+        type="button"
+        class="jamwidgets-reaction-btn"
+        data-reaction-type={reaction}
+        title={reaction}
+      >
+        <span class="jamwidgets-reaction-icon">{getIcon(reaction)}</span>
+        <span class="jamwidgets-reaction-count">0</span>
+      </button>
+    ))
+  }
+</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;
+  }
+
+  document.querySelectorAll("[data-jamwidgets-reactions]").forEach((container) => {
+    const endpoint = (container as HTMLElement).dataset.endpoint;
+    const siteKey = (container as HTMLElement).dataset.siteKey;
+    const pageId = (container as HTMLElement).dataset.pageId;
+
+    if (!endpoint || !siteKey || !pageId) return;
+
+    const visitorId = getVisitorId();
+    const headers = {
+      "X-JamWidgets-Key": siteKey,
+      "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) || "[]")
+    );
+
+    // Apply initial "reacted" state
+    container.querySelectorAll(".jamwidgets-reaction-btn").forEach((btn) => {
+      const type = (btn as HTMLElement).dataset.reactionType;
+      if (type && userReactions.has(type)) {
+        btn.classList.add("jamwidgets-reacted");
+      }
+    });
+
+    async function loadReactions() {
+      try {
+        const response = await fetch(
+          `${endpoint}/reactions/${encodeURIComponent(pageId!)}`,
+          { headers },
+        );
+        if (!response.ok) return;
+        const data = await response.json();
+        const result = data.reaction_counts_with_user;
+        const counts = result?.counts || {};
+        const serverUserReactions = result?.userReactions || [];
+
+        // Sync with server's user reactions
+        serverUserReactions.forEach((type: string) => userReactions.add(type));
+        localStorage.setItem(storageKey, JSON.stringify([...userReactions]));
+
+        container.querySelectorAll(".jamwidgets-reaction-btn").forEach((btn) => {
+          const type = (btn as HTMLElement).dataset.reactionType;
+          const countEl = btn.querySelector(".jamwidgets-reaction-count");
+          if (type) {
+            if (countEl) {
+              countEl.textContent = String(counts[type] || 0);
+            }
+            // Update visual state based on server data
+            if (userReactions.has(type)) {
+              btn.classList.add("jamwidgets-reacted");
+            } else {
+              btn.classList.remove("jamwidgets-reacted");
+            }
+          }
+        });
+      } catch (e) {
+        console.error("Failed to load reactions:", e);
+      }
+    }
+
+    container.querySelectorAll(".jamwidgets-reaction-btn").forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        const type = (btn as HTMLElement).dataset.reactionType;
+        if (!type) return;
+
+        const isReacted = userReactions.has(type);
+        btn.classList.add("jamwidgets-loading");
+
+        try {
+          const response = await fetch(
+            `${endpoint}/reactions/${encodeURIComponent(pageId)}`,
+            {
+              method: isReacted ? "DELETE" : "POST",
+              headers: {
+                ...headers,
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({ reactionType: type }),
+            },
+          );
+
+          if (!response.ok) throw new Error(isReacted ? "Failed to remove reaction" : "Failed to add reaction");
+
+          const data = await response.json();
+          const countEl = btn.querySelector(".jamwidgets-reaction-count");
+          if (countEl) {
+            countEl.textContent = String(data.reaction?.count || 0);
+          }
+
+          if (isReacted) {
+            // Remove reaction
+            btn.classList.remove("jamwidgets-reacted");
+            userReactions.delete(type);
+            container.dispatchEvent(
+              new CustomEvent("jamwidgets:reaction-removed", {
+                detail: data.reaction,
+              }),
+            );
+          } else {
+            // Add reaction
+            btn.classList.add("jamwidgets-reacted");
+            userReactions.add(type);
+            container.dispatchEvent(
+              new CustomEvent("jamwidgets:reaction-added", {
+                detail: data.reaction,
+              }),
+            );
+          }
+          localStorage.setItem(storageKey, JSON.stringify([...userReactions]));
+        } catch (e) {
+          console.error(isReacted ? "Failed to remove reaction:" : "Failed to add reaction:", e);
+        } finally {
+          btn.classList.remove("jamwidgets-loading");
+        }
+      });
+    });
+
+    loadReactions();
+  });
+</script>
+
+<style is:global>
+  .jamwidgets-reactions {
+    --jamwidgets-border-color: #e5e7eb;
+    --jamwidgets-button-bg: white;
+    --jamwidgets-hover-bg: #f3f4f6;
+    --jamwidgets-hover-border: #d1d5db;
+    --jamwidgets-active-bg: #dbeafe;
+    --jamwidgets-active-border: #93c5fd;
+    --jamwidgets-active-hover-bg: #bfdbfe;
+    --jamwidgets-count-color: #6b7280;
+    --jamwidgets-active-text: #1d4ed8;
+
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  /* Dark theme */
+  .jamwidgets-reactions.jamwidgets-theme-dark {
+    --jamwidgets-border-color: #374151;
+    --jamwidgets-button-bg: transparent;
+    --jamwidgets-hover-bg: #374151;
+    --jamwidgets-hover-border: #4b5563;
+    --jamwidgets-active-bg: rgba(59, 130, 246, 0.2);
+    --jamwidgets-active-border: #3b82f6;
+    --jamwidgets-active-hover-bg: rgba(59, 130, 246, 0.3);
+    --jamwidgets-count-color: #9ca3af;
+    --jamwidgets-active-text: #60a5fa;
+  }
+
+  /* Auto theme - follows prefers-color-scheme */
+  @media (prefers-color-scheme: dark) {
+    .jamwidgets-reactions.jamwidgets-theme-auto {
+      --jamwidgets-border-color: #374151;
+      --jamwidgets-button-bg: transparent;
+      --jamwidgets-hover-bg: #374151;
+      --jamwidgets-hover-border: #4b5563;
+      --jamwidgets-active-bg: rgba(59, 130, 246, 0.2);
+      --jamwidgets-active-border: #3b82f6;
+      --jamwidgets-active-hover-bg: rgba(59, 130, 246, 0.3);
+      --jamwidgets-count-color: #9ca3af;
+      --jamwidgets-active-text: #60a5fa;
+    }
+  }
+
+  .jamwidgets-reaction-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--jamwidgets-border-color);
+    border-radius: 9999px;
+    background: var(--jamwidgets-button-bg);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    font-family: inherit;
+    font-size: 0.875rem;
+  }
+
+  .jamwidgets-reaction-btn:hover:not(.jamwidgets-reacted) {
+    background: var(--jamwidgets-hover-bg);
+    border-color: var(--jamwidgets-hover-border);
+  }
+
+  .jamwidgets-reaction-btn.jamwidgets-reacted {
+    background: var(--jamwidgets-active-bg);
+    border-color: var(--jamwidgets-active-border);
+  }
+
+  .jamwidgets-reaction-btn.jamwidgets-reacted:hover {
+    background: var(--jamwidgets-active-hover-bg);
+  }
+
+  .jamwidgets-reaction-btn.jamwidgets-loading {
+    opacity: 0.6;
+    cursor: wait;
+  }
+
+  .jamwidgets-reaction-icon {
+    font-size: 1.125rem;
+    line-height: 1;
+  }
+
+  .jamwidgets-reaction-count {
+    color: var(--jamwidgets-count-color);
+    font-weight: 500;
+    min-width: 1ch;
+  }
+
+  .jamwidgets-reacted .jamwidgets-reaction-count {
+    color: var(--jamwidgets-active-text);
+  }
+</style>

package/src/Subscribe.astro

@@ -0,0 +1,314 @@
+---
+/**
+ * JamWidgets Subscribe Component
+ *
+ * A subscription form for email updates. Implements double opt-in -
+ * users receive a confirmation email and must click to confirm.
+ *
+ * @example
+ * <Subscribe siteKey={import.meta.env.JAMWIDGETS_SITE_KEY} />
+ *
+ * @example With custom styling
+ * <Subscribe
+ *   siteKey={import.meta.env.JAMWIDGETS_SITE_KEY}
+ *   buttonText="Get Updates"
+ *   placeholder="Enter your email"
+ *   successMessage="Check your inbox!"
+ * />
+ */
+
+interface Props {
+  /** Your site key (required) */
+  siteKey: string;
+  /** Base URL of your JamWidgets instance (default: 'https://jamwidgets.com') */
+  endpoint?: string;
+  /** Submit button text (default: 'Subscribe') */
+  buttonText?: string;
+  /** Email input placeholder (default: 'your@email.com') */
+  placeholder?: string;
+  /** Success message override (default: uses server response) */
+  successMessage?: string;
+  /** Theme preset: 'light' (default), 'dark', or 'auto' (uses prefers-color-scheme) */
+  theme?: "light" | "dark" | "auto";
+  /** CSS class to add to the form */
+  class?: string;
+}
+
+const DEFAULT_ENDPOINT = "https://jamwidgets.com";
+const API_PATH = "/api/v1";
+
+const {
+  siteKey,
+  endpoint = DEFAULT_ENDPOINT,
+  buttonText = "Subscribe",
+  placeholder = "your@email.com",
+  successMessage,
+  theme = "light",
+  class: className = "",
+} = Astro.props;
+
+// Build the API URL
+const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+---
+
+<form
+  class:list={["jamwidgets-subscribe", `jamwidgets-theme-${theme}`, className]}
+  data-jamwidgets-subscribe
+  data-endpoint={baseUrl}
+  data-site-key={siteKey}
+  data-success-message={successMessage}
+>
+  <div class="jamwidgets-subscribe-input-group">
+    <input
+      type="email"
+      name="email"
+      required
+      placeholder={placeholder}
+      class="jamwidgets-subscribe-input"
+      autocomplete="email"
+    />
+    <button type="submit" class="jamwidgets-subscribe-button">
+      {buttonText}
+    </button>
+  </div>
+
+  <!-- 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>
+
+  <!-- Success/Error message container (hidden by default) -->
+  <div class="jamwidgets-subscribe-message" style="display: none;" aria-live="polite"></div>
+</form>
+
+<script>
+  interface SubscribeResponse {
+    success: boolean;
+    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;
+  }
+
+  document.querySelectorAll("[data-jamwidgets-subscribe]").forEach((form) => {
+    form.addEventListener("submit", async (e) => {
+      e.preventDefault();
+
+      const formEl = e.target as HTMLFormElement;
+      const endpoint = formEl.dataset.endpoint;
+      const siteKey = formEl.dataset.siteKey;
+      const customSuccessMessage = formEl.dataset.successMessage;
+      const messageEl = formEl.querySelector(".jamwidgets-subscribe-message") as HTMLElement | null;
+      const submitBtn = formEl.querySelector('button[type="submit"]') as HTMLButtonElement | null;
+      const inputEl = formEl.querySelector('input[name="email"]') as HTMLInputElement | null;
+
+      if (!endpoint || !siteKey) {
+        console.error("JamWidgets Subscribe: missing siteKey or endpoint");
+        return;
+      }
+
+      // Collect form data
+      const formData = new FormData(formEl);
+      const data: Record<string, unknown> = {};
+      formData.forEach((value, key) => {
+        data[key] = value;
+      });
+
+      // Dispatch loading event
+      formEl.dispatchEvent(new CustomEvent("jamwidgets:loading"));
+
+      // Disable submit button and show loading state
+      if (submitBtn) {
+        submitBtn.disabled = true;
+        submitBtn.dataset.originalText = submitBtn.textContent || "";
+        submitBtn.textContent = "...";
+      }
+
+      try {
+        const response = await fetch(`${endpoint}/subscribe`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-JamWidgets-Key": siteKey,
+            "X-JamWidgets-Visitor": getVisitorId(),
+          },
+          body: JSON.stringify(data),
+        });
+
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(errorText || "Subscription failed");
+        }
+
+        const result: SubscribeResponse = await response.json();
+
+        // Show success message
+        if (messageEl) {
+          messageEl.textContent = customSuccessMessage || result.message;
+          messageEl.style.display = "block";
+          messageEl.className = "jamwidgets-subscribe-message jamwidgets-subscribe-success";
+        }
+
+        // Dispatch success event with response data
+        formEl.dispatchEvent(
+          new CustomEvent("jamwidgets:success", {
+            detail: result,
+          }),
+        );
+
+        // Clear input on success
+        if (inputEl) {
+          inputEl.value = "";
+        }
+      } catch (error) {
+        // Show error message
+        if (messageEl) {
+          messageEl.textContent = error instanceof Error ? error.message : "Something went wrong";
+          messageEl.style.display = "block";
+          messageEl.className = "jamwidgets-subscribe-message jamwidgets-subscribe-error";
+        }
+
+        formEl.dispatchEvent(
+          new CustomEvent("jamwidgets:error", {
+            detail: error,
+          }),
+        );
+      } finally {
+        // Re-enable submit button
+        if (submitBtn) {
+          submitBtn.disabled = false;
+          submitBtn.textContent = submitBtn.dataset.originalText || "Subscribe";
+        }
+      }
+    });
+  });
+</script>
+
+<style is:global>
+  @layer jamwidgets {
+    .jamwidgets-subscribe {
+      --jamwidgets-border-color: #d1d5db;
+      --jamwidgets-input-bg: #ffffff;
+      --jamwidgets-input-text: #111827;
+      --jamwidgets-button-bg: #4f46e5;
+      --jamwidgets-button-text: #ffffff;
+      --jamwidgets-button-hover: #4338ca;
+      --jamwidgets-success-bg: #dcfce7;
+      --jamwidgets-success-text: #166534;
+      --jamwidgets-success-border: #bbf7d0;
+      --jamwidgets-error-bg: #fef2f2;
+      --jamwidgets-error-text: #991b1b;
+      --jamwidgets-error-border: #fecaca;
+      --jamwidgets-focus-ring: rgba(79, 70, 229, 0.5);
+
+      position: relative;
+    }
+
+    /* Dark theme */
+    .jamwidgets-subscribe.jamwidgets-theme-dark {
+      --jamwidgets-border-color: #4b5563;
+      --jamwidgets-input-bg: #1f2937;
+      --jamwidgets-input-text: #f9fafb;
+      --jamwidgets-button-bg: #6366f1;
+      --jamwidgets-button-hover: #818cf8;
+      --jamwidgets-success-bg: rgba(34, 197, 94, 0.15);
+      --jamwidgets-success-text: #86efac;
+      --jamwidgets-success-border: rgba(34, 197, 94, 0.3);
+      --jamwidgets-error-bg: rgba(239, 68, 68, 0.15);
+      --jamwidgets-error-text: #fca5a5;
+      --jamwidgets-error-border: rgba(239, 68, 68, 0.3);
+    }
+
+    /* Auto theme - follows prefers-color-scheme */
+    @media (prefers-color-scheme: dark) {
+      .jamwidgets-subscribe.jamwidgets-theme-auto {
+        --jamwidgets-border-color: #4b5563;
+        --jamwidgets-input-bg: #1f2937;
+        --jamwidgets-input-text: #f9fafb;
+        --jamwidgets-button-bg: #6366f1;
+        --jamwidgets-button-hover: #818cf8;
+        --jamwidgets-success-bg: rgba(34, 197, 94, 0.15);
+        --jamwidgets-success-text: #86efac;
+        --jamwidgets-success-border: rgba(34, 197, 94, 0.3);
+        --jamwidgets-error-bg: rgba(239, 68, 68, 0.15);
+        --jamwidgets-error-text: #fca5a5;
+        --jamwidgets-error-border: rgba(239, 68, 68, 0.3);
+      }
+    }
+
+    .jamwidgets-subscribe-input-group {
+      display: flex;
+      gap: 0.5rem;
+    }
+
+    .jamwidgets-subscribe-input {
+      flex: 1;
+      padding: 0.625rem 0.875rem;
+      border: 1px solid var(--jamwidgets-border-color);
+      border-radius: 0.375rem;
+      background-color: var(--jamwidgets-input-bg);
+      color: var(--jamwidgets-input-text);
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+
+    .jamwidgets-subscribe-input:focus {
+      outline: none;
+      border-color: var(--jamwidgets-button-bg);
+      box-shadow: 0 0 0 3px var(--jamwidgets-focus-ring);
+    }
+
+    .jamwidgets-subscribe-input::placeholder {
+      color: #9ca3af;
+    }
+
+    .jamwidgets-subscribe-button {
+      padding: 0.625rem 1rem;
+      border: none;
+      border-radius: 0.375rem;
+      background-color: var(--jamwidgets-button-bg);
+      color: var(--jamwidgets-button-text);
+      font-size: 0.875rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background-color 0.15s ease;
+      white-space: nowrap;
+    }
+
+    .jamwidgets-subscribe-button:hover:not(:disabled) {
+      background-color: var(--jamwidgets-button-hover);
+    }
+
+    .jamwidgets-subscribe-button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .jamwidgets-subscribe-message {
+      margin-top: 0.75rem;
+      padding: 0.625rem 0.875rem;
+      border-radius: 0.375rem;
+      font-size: 0.875rem;
+    }
+
+    .jamwidgets-subscribe-success {
+      background-color: var(--jamwidgets-success-bg);
+      color: var(--jamwidgets-success-text);
+      border: 1px solid var(--jamwidgets-success-border);
+    }
+
+    .jamwidgets-subscribe-error {
+      background-color: var(--jamwidgets-error-bg);
+      color: var(--jamwidgets-error-text);
+      border: 1px solid var(--jamwidgets-error-border);
+    }
+  }
+</style>