@seriphxyz/astro 0.1.2 → 0.1.7

package/src/Subscribe.astro

@@ -0,0 +1,302 @@
+---
+/**
+ * Seriph 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.SERIPH_SITE_KEY} />
+ *
+ * @example With custom styling
+ * <Subscribe
+ *   siteKey={import.meta.env.SERIPH_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 Seriph instance (default: 'https://seriph.xyz') */
+  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://seriph.xyz";
+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={["seriph-subscribe", `seriph-theme-${theme}`, className]}
+  data-seriph-subscribe
+  data-endpoint={baseUrl}
+  data-site-key={siteKey}
+  data-success-message={successMessage}
+>
+  <div class="seriph-subscribe-input-group">
+    <input
+      type="email"
+      name="email"
+      required
+      placeholder={placeholder}
+      class="seriph-subscribe-input"
+      autocomplete="email"
+    />
+    <button type="submit" class="seriph-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="seriph-subscribe-message" style="display: none;" aria-live="polite"></div>
+</form>
+
+<script>
+  interface SubscribeResponse {
+    success: boolean;
+    message: string;
+  }
+
+  document.querySelectorAll("[data-seriph-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(".seriph-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("Seriph 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("seriph: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-Seriph-Key": siteKey,
+          },
+          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 = "seriph-subscribe-message seriph-subscribe-success";
+        }
+
+        // Dispatch success event with response data
+        formEl.dispatchEvent(
+          new CustomEvent("seriph: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 = "seriph-subscribe-message seriph-subscribe-error";
+        }
+
+        formEl.dispatchEvent(
+          new CustomEvent("seriph:error", {
+            detail: error,
+          }),
+        );
+      } finally {
+        // Re-enable submit button
+        if (submitBtn) {
+          submitBtn.disabled = false;
+          submitBtn.textContent = submitBtn.dataset.originalText || "Subscribe";
+        }
+      }
+    });
+  });
+</script>
+
+<style is:global>
+  @layer seriph {
+    .seriph-subscribe {
+      --seriph-border-color: #d1d5db;
+      --seriph-input-bg: #ffffff;
+      --seriph-input-text: #111827;
+      --seriph-button-bg: #4f46e5;
+      --seriph-button-text: #ffffff;
+      --seriph-button-hover: #4338ca;
+      --seriph-success-bg: #dcfce7;
+      --seriph-success-text: #166534;
+      --seriph-success-border: #bbf7d0;
+      --seriph-error-bg: #fef2f2;
+      --seriph-error-text: #991b1b;
+      --seriph-error-border: #fecaca;
+      --seriph-focus-ring: rgba(79, 70, 229, 0.5);
+
+      position: relative;
+    }
+
+    /* Dark theme */
+    .seriph-subscribe.seriph-theme-dark {
+      --seriph-border-color: #4b5563;
+      --seriph-input-bg: #1f2937;
+      --seriph-input-text: #f9fafb;
+      --seriph-button-bg: #6366f1;
+      --seriph-button-hover: #818cf8;
+      --seriph-success-bg: rgba(34, 197, 94, 0.15);
+      --seriph-success-text: #86efac;
+      --seriph-success-border: rgba(34, 197, 94, 0.3);
+      --seriph-error-bg: rgba(239, 68, 68, 0.15);
+      --seriph-error-text: #fca5a5;
+      --seriph-error-border: rgba(239, 68, 68, 0.3);
+    }
+
+    /* Auto theme - follows prefers-color-scheme */
+    @media (prefers-color-scheme: dark) {
+      .seriph-subscribe.seriph-theme-auto {
+        --seriph-border-color: #4b5563;
+        --seriph-input-bg: #1f2937;
+        --seriph-input-text: #f9fafb;
+        --seriph-button-bg: #6366f1;
+        --seriph-button-hover: #818cf8;
+        --seriph-success-bg: rgba(34, 197, 94, 0.15);
+        --seriph-success-text: #86efac;
+        --seriph-success-border: rgba(34, 197, 94, 0.3);
+        --seriph-error-bg: rgba(239, 68, 68, 0.15);
+        --seriph-error-text: #fca5a5;
+        --seriph-error-border: rgba(239, 68, 68, 0.3);
+      }
+    }
+
+    .seriph-subscribe-input-group {
+      display: flex;
+      gap: 0.5rem;
+    }
+
+    .seriph-subscribe-input {
+      flex: 1;
+      padding: 0.625rem 0.875rem;
+      border: 1px solid var(--seriph-border-color);
+      border-radius: 0.375rem;
+      background-color: var(--seriph-input-bg);
+      color: var(--seriph-input-text);
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+
+    .seriph-subscribe-input:focus {
+      outline: none;
+      border-color: var(--seriph-button-bg);
+      box-shadow: 0 0 0 3px var(--seriph-focus-ring);
+    }
+
+    .seriph-subscribe-input::placeholder {
+      color: #9ca3af;
+    }
+
+    .seriph-subscribe-button {
+      padding: 0.625rem 1rem;
+      border: none;
+      border-radius: 0.375rem;
+      background-color: var(--seriph-button-bg);
+      color: var(--seriph-button-text);
+      font-size: 0.875rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background-color 0.15s ease;
+      white-space: nowrap;
+    }
+
+    .seriph-subscribe-button:hover:not(:disabled) {
+      background-color: var(--seriph-button-hover);
+    }
+
+    .seriph-subscribe-button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .seriph-subscribe-message {
+      margin-top: 0.75rem;
+      padding: 0.625rem 0.875rem;
+      border-radius: 0.375rem;
+      font-size: 0.875rem;
+    }
+
+    .seriph-subscribe-success {
+      background-color: var(--seriph-success-bg);
+      color: var(--seriph-success-text);
+      border: 1px solid var(--seriph-success-border);
+    }
+
+    .seriph-subscribe-error {
+      background-color: var(--seriph-error-bg);
+      color: var(--seriph-error-text);
+      border: 1px solid var(--seriph-error-border);
+    }
+  }
+</style>

package/src/SubscribeForm.astro

@@ -0,0 +1,142 @@
+---
+/**
+ * Seriph 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.SERIPH_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.SERIPH_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('seriph:success', (e) => {
+ *     e.target.querySelector('.message').textContent = e.detail.message;
+ *   });
+ * </script>
+ *
+ * Events:
+ * - seriph:loading - Fired when submission starts
+ * - seriph:success - Fired on success, detail contains { success, message }
+ * - seriph:error - Fired on error, detail contains the Error object
+ */
+
+interface Props {
+  /** Your site key (required) */
+  siteKey: string;
+  /** Base URL of your Seriph instance (default: 'https://seriph.xyz') */
+  endpoint?: string;
+  /** HTML id attribute for the form */
+  id?: string;
+  /** CSS class for the form */
+  class?: string;
+}
+
+const DEFAULT_ENDPOINT = "https://seriph.xyz";
+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={["seriph-subscribe-form", className]}
+  data-seriph-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;
+  }
+
+  document.querySelectorAll("[data-seriph-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("Seriph 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("seriph:loading", { bubbles: true }));
+
+      try {
+        const response = await fetch(`${endpoint}/subscribe`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-Seriph-Key": siteKey,
+          },
+          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("seriph: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("seriph:error", {
+            bubbles: true,
+            detail: error,
+          }),
+        );
+      }
+    });
+  });
+</script>