@jamwidgets/astro 0.1.0

package/src/SubscribeForm.astro

@@ -0,0 +1,154 @@
+---
+/**
+ * JamWidgets Headless Subscribe Form
+ *
+ * A headless subscription form that handles API/state but lets you provide your own UI.
+ * Use the default slot to provide your own email input and submit button.
+ *
+ * Required: An input with name="email" and a submit button.
+ *
+ * @example Basic usage
+ * <SubscribeForm siteKey={import.meta.env.JAMWIDGETS_SITE_KEY}>
+ *   <input type="email" name="email" placeholder="you@example.com" required />
+ *   <button type="submit">Subscribe</button>
+ * </SubscribeForm>
+ *
+ * @example With custom message handling
+ * <SubscribeForm siteKey={import.meta.env.JAMWIDGETS_SITE_KEY} id="my-form">
+ *   <input type="email" name="email" class="my-input" required />
+ *   <button type="submit">Get updates</button>
+ *   <p class="message"></p>
+ * </SubscribeForm>
+ * <script>
+ *   document.getElementById('my-form')?.addEventListener('jamwidgets:success', (e) => {
+ *     e.target.querySelector('.message').textContent = e.detail.message;
+ *   });
+ * </script>
+ *
+ * Events:
+ * - jamwidgets:loading - Fired when submission starts
+ * - jamwidgets:success - Fired on success, detail contains { success, message }
+ * - jamwidgets:error - Fired on error, detail contains the Error object
+ */
+
+interface Props {
+  /** Your site key (required) */
+  siteKey: string;
+  /** Base URL of your JamWidgets instance (default: 'https://jamwidgets.com') */
+  endpoint?: string;
+  /** HTML id attribute for the form */
+  id?: string;
+  /** CSS class for the form */
+  class?: string;
+}
+
+const DEFAULT_ENDPOINT = "https://jamwidgets.com";
+const API_PATH = "/api/v1";
+
+const {
+  siteKey,
+  endpoint = DEFAULT_ENDPOINT,
+  id,
+  class: className = "",
+} = Astro.props;
+
+const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+---
+
+<form
+  id={id}
+  class:list={["jamwidgets-subscribe-form", className]}
+  data-jamwidgets-subscribe-form
+  data-endpoint={baseUrl}
+  data-site-key={siteKey}
+>
+  <slot />
+
+  <!-- Honeypot field for spam protection -->
+  <div style="position: absolute; left: -9999px;" aria-hidden="true">
+    <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" />
+  </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-form]").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;
+
+      if (!endpoint || !siteKey) {
+        console.error("JamWidgets SubscribeForm: 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", { bubbles: true }));
+
+      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();
+
+        // Dispatch success event
+        formEl.dispatchEvent(
+          new CustomEvent("jamwidgets:success", {
+            bubbles: true,
+            detail: result,
+          }),
+        );
+
+        // Clear email input on success
+        const emailInput = formEl.querySelector('input[name="email"]') as HTMLInputElement | null;
+        if (emailInput) {
+          emailInput.value = "";
+        }
+      } catch (error) {
+        formEl.dispatchEvent(
+          new CustomEvent("jamwidgets:error", {
+            bubbles: true,
+            detail: error,
+          }),
+        );
+      }
+    });
+  });
+</script>

package/src/Views.astro

@@ -0,0 +1,203 @@
+---
+/**
+ * JamWidgets Views Component
+ *
+ * Tracks page views and displays view count.
+ * Automatically records a view when the page loads.
+ *
+ * @example
+ * <Views
+ *   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;
+  /** Show unique visitor count alongside total views (default: false) */
+  showUnique?: boolean;
+  /** 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,
+  showUnique = false,
+  theme = "light",
+  class: className = "",
+} = Astro.props;
+
+// Build the API URL
+const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+---
+
+<div
+  class:list={["jamwidgets-views", `jamwidgets-theme-${theme}`, className]}
+  data-jamwidgets-views
+  data-endpoint={baseUrl}
+  data-site-key={siteKey}
+  data-page-id={pageId}
+  data-show-unique={showUnique}
+>
+  <span class="jamwidgets-views-icon">
+    <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">
+      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
+      <circle cx="12" cy="12" r="3"/>
+    </svg>
+  </span>
+  <span class="jamwidgets-views-count">-</span>
+  <span class="jamwidgets-views-unique" style="display: none;"></span>
+</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-views]").forEach((container) => {
+    const endpoint = (container as HTMLElement).dataset.endpoint;
+    const siteKey = (container as HTMLElement).dataset.siteKey;
+    const pageId = (container as HTMLElement).dataset.pageId;
+    const showUnique = (container as HTMLElement).dataset.showUnique === "true";
+
+    if (!endpoint || !siteKey || !pageId) return;
+
+    const visitorId = getVisitorId();
+    const headers = {
+      "X-JamWidgets-Key": siteKey,
+      "X-JamWidgets-Visitor": visitorId,
+    };
+
+    const countEl = container.querySelector(".jamwidgets-views-count");
+    const uniqueEl = container.querySelector(".jamwidgets-views-unique") as HTMLElement;
+
+    // Record the view
+    async function recordView() {
+      try {
+        const response = await fetch(
+          `${endpoint}/views/${encodeURIComponent(pageId!)}`,
+          {
+            method: "POST",
+            headers,
+          },
+        );
+        if (!response.ok) return;
+        const data = await response.json();
+        const result = data.record_view_response;
+
+        if (countEl) {
+          countEl.textContent = String(result?.views || 0);
+        }
+
+        if (showUnique && uniqueEl && result?.unique_visitors !== undefined) {
+          uniqueEl.textContent = `(${result.unique_visitors} unique)`;
+          uniqueEl.style.display = "";
+        }
+
+        container.dispatchEvent(
+          new CustomEvent("jamwidgets:view-recorded", {
+            detail: result,
+          }),
+        );
+      } catch (e) {
+        console.error("Failed to record view:", e);
+        // Fallback: try to load existing counts
+        loadView();
+      }
+    }
+
+    // Load view count without recording
+    async function loadView() {
+      try {
+        const response = await fetch(
+          `${endpoint}/views/${encodeURIComponent(pageId!)}`,
+          { headers },
+        );
+        if (!response.ok) return;
+        const data = await response.json();
+        const result = data.page_view_counts;
+
+        if (countEl) {
+          countEl.textContent = String(result?.views || 0);
+        }
+
+        if (showUnique && uniqueEl && result?.uniqueVisitors !== undefined) {
+          uniqueEl.textContent = `(${result.uniqueVisitors} unique)`;
+          uniqueEl.style.display = "";
+        }
+      } catch (e) {
+        console.error("Failed to load view:", e);
+      }
+    }
+
+    // Record the view on page load
+    recordView();
+  });
+</script>
+
+<style is:global>
+  @layer jamwidgets {
+    .jamwidgets-views {
+      --jamwidgets-text-color: #6b7280;
+      --jamwidgets-icon-color: #9ca3af;
+
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      font-size: 0.875rem;
+      color: var(--jamwidgets-text-color);
+    }
+
+    /* Dark theme */
+    .jamwidgets-views.jamwidgets-theme-dark {
+      --jamwidgets-text-color: #9ca3af;
+      --jamwidgets-icon-color: #6b7280;
+    }
+
+    /* Auto theme - follows prefers-color-scheme */
+    @media (prefers-color-scheme: dark) {
+      .jamwidgets-views.jamwidgets-theme-auto {
+        --jamwidgets-text-color: #9ca3af;
+        --jamwidgets-icon-color: #6b7280;
+      }
+    }
+
+    .jamwidgets-views-icon {
+      display: flex;
+      color: var(--jamwidgets-icon-color);
+    }
+
+    .jamwidgets-views-icon svg {
+      width: 1em;
+      height: 1em;
+    }
+
+    .jamwidgets-views-count {
+      font-variant-numeric: tabular-nums;
+    }
+
+    .jamwidgets-views-unique {
+      color: var(--jamwidgets-icon-color);
+      font-size: 0.75rem;
+    }
+  }
+</style>

package/src/Waitlist.astro

@@ -0,0 +1,262 @@
+---
+/**
+ * JamWidgets Waitlist Component
+ *
+ * Displays a waitlist signup form for collecting emails before launch.
+ *
+ * @example
+ * <Waitlist 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";
+  /** Placeholder text for the email input (default: 'Enter your email') */
+  placeholder?: string;
+  /** Button text (default: 'Join Waitlist') */
+  buttonText?: string;
+  /** Success message (default: "You're on the list!") */
+  successMessage?: 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,
+  theme = "light",
+  placeholder = "Enter your email",
+  buttonText = "Join Waitlist",
+  successMessage = "You're on the list!",
+  class: className = "",
+} = Astro.props;
+
+// Build the API URL
+const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+---
+
+<div
+  class:list={["jamwidgets-waitlist", `jamwidgets-theme-${theme}`, className]}
+  data-jamwidgets-waitlist
+  data-endpoint={baseUrl}
+  data-site-key={siteKey}
+  data-success-message={successMessage}
+>
+  <form class="jamwidgets-waitlist-form">
+    <input
+      type="email"
+      name="email"
+      class="jamwidgets-waitlist-input"
+      placeholder={placeholder}
+      required
+    />
+    <button type="submit" class="jamwidgets-waitlist-submit">
+      {buttonText}
+    </button>
+  </form>
+  <div class="jamwidgets-waitlist-message" style="display: none;"></div>
+</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-waitlist]").forEach((container) => {
+    const endpoint = (container as HTMLElement).dataset.endpoint;
+    const siteKey = (container as HTMLElement).dataset.siteKey;
+    const successMessage = (container as HTMLElement).dataset.successMessage || "You're on the list!";
+
+    if (!endpoint || !siteKey) return;
+
+    const visitorId = getVisitorId();
+    const headers = {
+      "X-JamWidgets-Key": siteKey,
+      "X-JamWidgets-Visitor": visitorId,
+      "Content-Type": "application/json",
+    };
+
+    const form = container.querySelector(".jamwidgets-waitlist-form") as HTMLFormElement;
+    const input = container.querySelector(".jamwidgets-waitlist-input") as HTMLInputElement;
+    const submitBtn = container.querySelector(".jamwidgets-waitlist-submit") as HTMLButtonElement;
+    const messageEl = container.querySelector(".jamwidgets-waitlist-message") as HTMLElement;
+
+    form.addEventListener("submit", async (e) => {
+      e.preventDefault();
+
+      const email = input.value.trim();
+      if (!email) return;
+
+      submitBtn.disabled = true;
+      const originalText = submitBtn.textContent;
+      submitBtn.textContent = "Joining...";
+      messageEl.style.display = "none";
+
+      try {
+        const response = await fetch(`${endpoint}/waitlist`, {
+          method: "POST",
+          headers,
+          body: JSON.stringify({ email }),
+        });
+
+        if (!response.ok) {
+          const error = await response.json();
+          throw new Error(error.message || "Failed to join waitlist");
+        }
+
+        // Hide form and show success
+        form.style.display = "none";
+        messageEl.textContent = successMessage;
+        messageEl.className = "jamwidgets-waitlist-message jamwidgets-success";
+        messageEl.style.display = "block";
+
+        container.dispatchEvent(
+          new CustomEvent("jamwidgets:waitlist-joined", {
+            detail: { email },
+          }),
+        );
+      } catch (e) {
+        console.error("Failed to join waitlist:", e);
+        messageEl.textContent = e instanceof Error ? e.message : "Failed to join waitlist";
+        messageEl.className = "jamwidgets-waitlist-message jamwidgets-error";
+        messageEl.style.display = "block";
+        submitBtn.disabled = false;
+        submitBtn.textContent = originalText;
+
+        setTimeout(() => {
+          messageEl.style.display = "none";
+        }, 3000);
+      }
+    });
+  });
+</script>
+
+<style is:global>
+  .jamwidgets-waitlist {
+    --jamwidgets-border-color: #9ca3af;
+    --jamwidgets-bg-color: white;
+    --jamwidgets-text-color: inherit;
+    --jamwidgets-text-muted: #6b7280;
+    --jamwidgets-button-bg: #3b82f6;
+    --jamwidgets-button-text: white;
+    --jamwidgets-button-hover: #2563eb;
+    --jamwidgets-success-color: #16a34a;
+    --jamwidgets-success-bg: #dcfce7;
+    --jamwidgets-error-color: #dc2626;
+    --jamwidgets-error-bg: #fef2f2;
+    font-family: inherit;
+  }
+
+  .jamwidgets-waitlist.jamwidgets-theme-dark {
+    --jamwidgets-border-color: #9ca3af;
+    --jamwidgets-bg-color: #374151;
+    --jamwidgets-text-color: #f3f4f6;
+    --jamwidgets-text-muted: #9ca3af;
+    --jamwidgets-success-color: #22c55e;
+    --jamwidgets-success-bg: rgba(34, 197, 94, 0.15);
+    --jamwidgets-error-color: #ef4444;
+    --jamwidgets-error-bg: rgba(239, 68, 68, 0.15);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .jamwidgets-waitlist.jamwidgets-theme-auto {
+      --jamwidgets-border-color: #9ca3af;
+      --jamwidgets-bg-color: #374151;
+      --jamwidgets-text-color: #f3f4f6;
+      --jamwidgets-text-muted: #9ca3af;
+      --jamwidgets-success-color: #22c55e;
+      --jamwidgets-success-bg: rgba(34, 197, 94, 0.15);
+      --jamwidgets-error-color: #ef4444;
+      --jamwidgets-error-bg: rgba(239, 68, 68, 0.15);
+    }
+  }
+
+  .jamwidgets-waitlist-form {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .jamwidgets-waitlist .jamwidgets-waitlist-input {
+    flex: 1;
+    padding: 0.625rem 0.875rem;
+    font-size: 0.875rem;
+    border: 1px solid var(--jamwidgets-border-color);
+    border-radius: 0.5rem;
+    background: var(--jamwidgets-bg-color);
+    color: var(--jamwidgets-text-color);
+    font-family: inherit;
+    min-width: 0;
+  }
+
+  .jamwidgets-waitlist .jamwidgets-waitlist-input:focus {
+    outline: none;
+    border-color: var(--jamwidgets-button-bg);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+  }
+
+  .jamwidgets-waitlist .jamwidgets-waitlist-input::placeholder {
+    color: var(--jamwidgets-text-muted);
+  }
+
+  .jamwidgets-waitlist .jamwidgets-waitlist-submit {
+    padding: 0.625rem 1rem;
+    background: var(--jamwidgets-button-bg);
+    color: var(--jamwidgets-button-text);
+    border: none;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.15s;
+    white-space: nowrap;
+  }
+
+  .jamwidgets-waitlist .jamwidgets-waitlist-submit:hover:not(:disabled) {
+    background: var(--jamwidgets-button-hover);
+  }
+
+  .jamwidgets-waitlist .jamwidgets-waitlist-submit:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .jamwidgets-waitlist-message {
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    border-radius: 0.5rem;
+    text-align: center;
+  }
+
+  .jamwidgets-waitlist-message.jamwidgets-success {
+    background: var(--jamwidgets-success-bg);
+    color: var(--jamwidgets-success-color);
+  }
+
+  .jamwidgets-waitlist-message.jamwidgets-error {
+    background: var(--jamwidgets-error-bg);
+    color: var(--jamwidgets-error-color);
+  }
+
+  @media (max-width: 400px) {
+    .jamwidgets-waitlist-form {
+      flex-direction: column;
+    }
+    .jamwidgets-waitlist .jamwidgets-waitlist-submit {
+      width: 100%;
+    }
+  }
+</style>