@jamwidgets/astro 0.1.0

package/src/Embed.astro

@@ -0,0 +1,513 @@
+---
+/**
+ * JamWidgets Embed Component
+ *
+ * Hydrates widget placeholders embedded in post content.
+ * Place this component after your post content to activate
+ * any embedded polls, reactions, etc.
+ *
+ * @example
+ * <article set:html={post.content} />
+ * <Embed 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;
+  /** Theme preset: 'light' (default), 'dark', or 'auto' (uses prefers-color-scheme) */
+  theme?: "light" | "dark" | "auto";
+}
+
+const DEFAULT_ENDPOINT = "https://jamwidgets.com";
+const API_PATH = "/api/v1";
+
+const {
+  siteKey,
+  endpoint = DEFAULT_ENDPOINT,
+  theme = "light",
+} = Astro.props;
+
+const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+---
+
+<jamwidgets-embed
+  data-site-key={siteKey}
+  data-endpoint={baseUrl}
+  data-theme={theme}
+  style="display: none;"
+></jamwidgets-embed>
+
+<script>
+  interface PollOption {
+    id: string;
+    text: string;
+  }
+
+  interface PollWithResults {
+    id: string;
+    question: string;
+    options: PollOption[];
+    settings: {
+      multiSelect: boolean;
+      showResults: "always" | "afterVote" | "afterEnd" | "never";
+    };
+    endsAt?: string;
+    isActive: boolean;
+    results: Record<string, number>;
+    totalVotes: number;
+    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;
+  }
+
+  class JamWidgetsEmbed extends HTMLElement {
+    connectedCallback() {
+      const siteKey = this.dataset.siteKey!;
+      const endpoint = this.dataset.endpoint!;
+      const theme = this.dataset.theme!;
+
+      // Find all poll placeholders and hydrate them
+      document.querySelectorAll('[data-jamwidgets-embed="poll"]').forEach((el) => {
+        const slug = (el as HTMLElement).dataset.slug;
+        if (!slug) return;
+        this.hydratePoll(el as HTMLElement, { siteKey, endpoint, theme, slug });
+      });
+    }
+
+    hydratePoll(
+      container: HTMLElement,
+      config: { siteKey: string; endpoint: string; theme: string; slug: string },
+    ) {
+      // Setup container with Poll widget structure
+      container.className = `jamwidgets-poll jamwidgets-theme-${config.theme}`;
+      container.setAttribute("data-jamwidgets-poll", "");
+      container.removeAttribute("data-jamwidgets-embed");
+
+      // Inject poll HTML structure
+      container.innerHTML = `
+        <div class="jamwidgets-poll-loading">
+          <span class="jamwidgets-poll-spinner"></span>
+        </div>
+        <div class="jamwidgets-poll-content" style="display: none;">
+          <h3 class="jamwidgets-poll-question"></h3>
+          <div class="jamwidgets-poll-options"></div>
+          <div class="jamwidgets-poll-footer">
+            <span class="jamwidgets-poll-total"></span>
+            <span class="jamwidgets-poll-status"></span>
+          </div>
+          <button type="button" class="jamwidgets-poll-submit" style="display: none;">Vote</button>
+        </div>
+        <div class="jamwidgets-poll-error" style="display: none;"></div>
+      `;
+
+      // Initialize poll
+      this.initPoll(container, config);
+    }
+
+    async initPoll(
+      container: HTMLElement,
+      config: { siteKey: string; endpoint: string; theme: string; slug: string },
+    ) {
+      const visitorId = getVisitorId();
+      const headers = {
+        "X-JamWidgets-Key": config.siteKey,
+        "X-JamWidgets-Visitor": visitorId,
+      };
+
+      const loadingEl = container.querySelector(".jamwidgets-poll-loading") as HTMLElement;
+      const contentEl = container.querySelector(".jamwidgets-poll-content") as HTMLElement;
+      const errorEl = container.querySelector(".jamwidgets-poll-error") as HTMLElement;
+      const questionEl = container.querySelector(".jamwidgets-poll-question") as HTMLElement;
+      const optionsEl = container.querySelector(".jamwidgets-poll-options") as HTMLElement;
+      const totalEl = container.querySelector(".jamwidgets-poll-total") as HTMLElement;
+      const statusEl = container.querySelector(".jamwidgets-poll-status") as HTMLElement;
+      const submitBtn = container.querySelector(".jamwidgets-poll-submit") as HTMLButtonElement;
+
+      let poll: PollWithResults | null = null;
+      let selectedOptions: Set<string> = new Set();
+
+      async function loadPoll() {
+        try {
+          const response = await fetch(`${config.endpoint}/polls/${config.slug}`, { headers });
+          if (!response.ok) throw new Error("Failed to load poll");
+          const data = await response.json();
+          poll = data.poll_with_results;
+          renderPoll();
+        } catch (e) {
+          console.error("Failed to load poll:", e);
+          loadingEl.style.display = "none";
+          errorEl.style.display = "block";
+          errorEl.textContent = "Failed to load poll";
+        }
+      }
+
+      function renderPoll() {
+        if (!poll) return;
+
+        loadingEl.style.display = "none";
+        contentEl.style.display = "block";
+
+        questionEl.textContent = poll.question;
+
+        const hasVoted = poll.userVotes && poll.userVotes.length > 0;
+        const isEnded = poll.endsAt ? new Date(poll.endsAt) < new Date() : false;
+        const canVote = poll.isActive && !isEnded && !hasVoted;
+        const showResults = Object.keys(poll.results).length > 0;
+
+        // Pre-select user's votes if any
+        if (poll.userVotes) {
+          selectedOptions = new Set(poll.userVotes);
+        }
+
+        optionsEl.innerHTML = "";
+        poll.options.forEach((option) => {
+          const optionEl = document.createElement("div");
+          optionEl.className = "jamwidgets-poll-option";
+
+          const votes = poll!.results[option.id] || 0;
+          const percent = poll!.totalVotes > 0 ? Math.round((votes / poll!.totalVotes) * 100) : 0;
+          const isSelected = selectedOptions.has(option.id);
+
+          if (canVote) {
+            // Interactive option
+            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>
+              </label>
+            `;
+            const input = optionEl.querySelector("input")!;
+            input.addEventListener("change", () => {
+              if (poll!.settings.multiSelect) {
+                if (input.checked) {
+                  selectedOptions.add(option.id);
+                } else {
+                  selectedOptions.delete(option.id);
+                }
+              } else {
+                selectedOptions = new Set([option.id]);
+              }
+              updateSubmitButton();
+              // Update visual selection
+              optionsEl.querySelectorAll(".jamwidgets-poll-label").forEach((label) => {
+                const labelInput = label.querySelector("input") as HTMLInputElement;
+                label.classList.toggle("jamwidgets-selected", labelInput.checked);
+              });
+            });
+          } else if (showResults) {
+            // Show results
+            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-percent">${percent}%</span>
+              </div>
+            `;
+          } else {
+            // 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>
+              </div>
+            `;
+          }
+          optionsEl.appendChild(optionEl);
+        });
+
+        // Footer
+        if (showResults) {
+          totalEl.textContent = `${poll.totalVotes} vote${poll.totalVotes !== 1 ? "s" : ""}`;
+        } else {
+          totalEl.textContent = "";
+        }
+
+        if (isEnded) {
+          statusEl.textContent = "Ended";
+        } else if (!poll.isActive) {
+          statusEl.textContent = "Closed";
+        } else if (hasVoted) {
+          statusEl.textContent = "Voted";
+        } else {
+          statusEl.textContent = "";
+        }
+
+        // Submit button
+        if (canVote) {
+          submitBtn.style.display = "";
+          updateSubmitButton();
+        } else {
+          submitBtn.style.display = "none";
+        }
+      }
+
+      function updateSubmitButton() {
+        submitBtn.disabled = selectedOptions.size === 0;
+      }
+
+      submitBtn.addEventListener("click", async () => {
+        if (selectedOptions.size === 0) return;
+
+        submitBtn.disabled = true;
+        submitBtn.textContent = "Voting...";
+
+        try {
+          const response = await fetch(`${config.endpoint}/polls/${config.slug}/vote`, {
+            method: "POST",
+            headers: {
+              ...headers,
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ selectedOptions: Array.from(selectedOptions) }),
+          });
+
+          if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.message || "Failed to vote");
+          }
+
+          const data = await response.json();
+          const result = data.vote_response;
+
+          // Update poll with new results
+          if (poll) {
+            poll.results = result.results;
+            poll.totalVotes = result.totalVotes;
+            poll.userVotes = Array.from(selectedOptions);
+          }
+
+          container.dispatchEvent(
+            new CustomEvent("jamwidgets:poll-voted", {
+              detail: { pollSlug: config.slug, selectedOptions: Array.from(selectedOptions), results: result },
+            }),
+          );
+
+          renderPoll();
+        } catch (e) {
+          console.error("Failed to vote:", e);
+          submitBtn.disabled = false;
+          submitBtn.textContent = "Vote";
+          errorEl.style.display = "block";
+          errorEl.textContent = e instanceof Error ? e.message : "Failed to vote";
+          setTimeout(() => {
+            errorEl.style.display = "none";
+          }, 3000);
+        }
+      });
+
+      loadPoll();
+    }
+  }
+
+  customElements.define("jamwidgets-embed", JamWidgetsEmbed);
+</script>
+
+<style is:global>
+  @layer jamwidgets {
+    .jamwidgets-poll {
+      --jamwidgets-border-color: #e5e7eb;
+      --jamwidgets-bg-color: white;
+      --jamwidgets-text-color: inherit;
+      --jamwidgets-text-muted: #6b7280;
+      --jamwidgets-hover-bg: #f3f4f6;
+      --jamwidgets-selected-bg: #dbeafe;
+      --jamwidgets-selected-border: #3b82f6;
+      --jamwidgets-bar-bg: #dbeafe;
+      --jamwidgets-voted-bar-bg: #3b82f6;
+      --jamwidgets-button-bg: #3b82f6;
+      --jamwidgets-button-text: white;
+      --jamwidgets-button-hover: #2563eb;
+
+      font-family: inherit;
+    }
+
+    /* Dark theme */
+    .jamwidgets-poll.jamwidgets-theme-dark {
+      --jamwidgets-border-color: #374151;
+      --jamwidgets-bg-color: transparent;
+      --jamwidgets-text-color: #f3f4f6;
+      --jamwidgets-text-muted: #9ca3af;
+      --jamwidgets-hover-bg: #374151;
+      --jamwidgets-selected-bg: rgba(59, 130, 246, 0.2);
+      --jamwidgets-selected-border: #3b82f6;
+      --jamwidgets-bar-bg: rgba(59, 130, 246, 0.2);
+      --jamwidgets-voted-bar-bg: #3b82f6;
+    }
+
+    /* Auto theme */
+    @media (prefers-color-scheme: dark) {
+      .jamwidgets-poll.jamwidgets-theme-auto {
+        --jamwidgets-border-color: #374151;
+        --jamwidgets-bg-color: transparent;
+        --jamwidgets-text-color: #f3f4f6;
+        --jamwidgets-text-muted: #9ca3af;
+        --jamwidgets-hover-bg: #374151;
+        --jamwidgets-selected-bg: rgba(59, 130, 246, 0.2);
+        --jamwidgets-selected-border: #3b82f6;
+        --jamwidgets-bar-bg: rgba(59, 130, 246, 0.2);
+        --jamwidgets-voted-bar-bg: #3b82f6;
+      }
+    }
+
+    .jamwidgets-poll-loading {
+      display: flex;
+      justify-content: center;
+      padding: 2rem;
+    }
+
+    .jamwidgets-poll-spinner {
+      width: 1.5rem;
+      height: 1.5rem;
+      border: 2px solid var(--jamwidgets-border-color);
+      border-top-color: var(--jamwidgets-button-bg);
+      border-radius: 50%;
+      animation: jamwidgets-spin 0.8s linear infinite;
+    }
+
+    @keyframes jamwidgets-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .jamwidgets-poll-question {
+      font-weight: 600;
+      font-size: 1.125rem;
+      margin: 0 0 1rem;
+      color: var(--jamwidgets-text-color);
+    }
+
+    .jamwidgets-poll-options {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .jamwidgets-poll-label {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.75rem 1rem;
+      border: 1px solid var(--jamwidgets-border-color);
+      border-radius: 0.5rem;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+
+    .jamwidgets-poll-label:hover {
+      background: var(--jamwidgets-hover-bg);
+    }
+
+    .jamwidgets-poll-label.jamwidgets-selected {
+      background: var(--jamwidgets-selected-bg);
+      border-color: var(--jamwidgets-selected-border);
+    }
+
+    .jamwidgets-poll-label input {
+      margin: 0;
+    }
+
+    .jamwidgets-poll-result {
+      position: relative;
+      padding: 0.75rem 1rem;
+      border: 1px solid var(--jamwidgets-border-color);
+      border-radius: 0.5rem;
+      overflow: hidden;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .jamwidgets-poll-result.jamwidgets-voted {
+      border-color: var(--jamwidgets-selected-border);
+    }
+
+    .jamwidgets-poll-bar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      background: var(--jamwidgets-bar-bg);
+      transition: width 0.3s ease;
+    }
+
+    .jamwidgets-poll-result.jamwidgets-voted .jamwidgets-poll-bar {
+      background: var(--jamwidgets-voted-bar-bg);
+      opacity: 0.2;
+    }
+
+    .jamwidgets-poll-text {
+      position: relative;
+      z-index: 1;
+    }
+
+    .jamwidgets-poll-percent {
+      position: relative;
+      z-index: 1;
+      font-weight: 500;
+      font-size: 0.875rem;
+      color: var(--jamwidgets-text-muted);
+    }
+
+    .jamwidgets-poll-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 0.75rem;
+      font-size: 0.875rem;
+      color: var(--jamwidgets-text-muted);
+    }
+
+    .jamwidgets-poll-submit {
+      margin-top: 1rem;
+      width: 100%;
+      padding: 0.625rem 1rem;
+      background: var(--jamwidgets-button-bg);
+      color: var(--jamwidgets-button-text);
+      border: none;
+      border-radius: 0.5rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    .jamwidgets-poll-submit:hover:not(:disabled) {
+      background: var(--jamwidgets-button-hover);
+    }
+
+    .jamwidgets-poll-submit:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .jamwidgets-poll-error {
+      padding: 0.75rem;
+      background: #fef2f2;
+      color: #991b1b;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+    }
+
+    .jamwidgets-theme-dark .jamwidgets-poll-error,
+    .jamwidgets-theme-auto .jamwidgets-poll-error {
+      background: rgba(239, 68, 68, 0.15);
+      color: #fca5a5;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .jamwidgets-theme-auto .jamwidgets-poll-error {
+        background: rgba(239, 68, 68, 0.15);
+        color: #fca5a5;
+      }
+    }
+  }
+</style>