@seriphxyz/astro 0.1.5 → 0.1.7

package/README.md

@@ -152,6 +152,49 @@ import Reactions from "@seriphxyz/astro/Reactions";
 - `seriph:reaction-added` - Reaction added
 - `seriph:reaction-removed` - Reaction removed
 
+### Subscribe
+
+Email subscription form with double opt-in:
+
+```astro
+---
+import Subscribe from "@seriphxyz/astro/Subscribe";
+---
+
+<Subscribe
+  siteKey={import.meta.env.SERIPH_SITE_KEY}
+  buttonText="Subscribe"
+  placeholder="your@email.com"
+/>
+```
+
+**Props:**
+- `siteKey` (required) - Your Seriph site key
+- `endpoint` - Base URL (default: `https://seriph.xyz`)
+- `buttonText` - Submit button text (default: `'Subscribe'`)
+- `placeholder` - Email input placeholder
+- `successMessage` - Custom success message
+- `theme` - `'light'` | `'dark'` | `'auto'` (default: `'light'`)
+- `class` - Additional CSS class
+
+**Events:**
+- `seriph:subscribed` - Subscription successful
+
+### SubscribeForm
+
+A more flexible subscription form that wraps your own markup:
+
+```astro
+---
+import SubscribeForm from "@seriphxyz/astro/SubscribeForm";
+---
+
+<SubscribeForm siteKey={import.meta.env.SERIPH_SITE_KEY}>
+  <input name="email" type="email" placeholder="Email" required />
+  <button type="submit">Join newsletter</button>
+</SubscribeForm>
+```
+
 ## JavaScript API
 
 For advanced use cases, use the JavaScript API directly:

package/dist/index.d.ts

@@ -4,5 +4,5 @@
  * Astro components and content loader for Seriph widgets.
  * Re-exports all types, API functions, and controllers from @seriphxyz/core.
  */
-export { DEFAULT_ENDPOINT, API_PATH, type SeriphConfig, type Comment, type ReactionCounts, type FormSubmitResponse, type SubscribeResponse, type SeriphPost, buildUrl, getSiteKey, type SubmitFormOptions, submitForm, type FetchCommentsOptions, fetchComments, type PostCommentOptions, postComment, type FetchReactionsOptions, fetchReactions, type AddReactionOptions, addReaction, type RemoveReactionOptions, removeReaction, type SubscribeOptions, subscribe, type FetchPostsOptions, fetchPosts, type FetchPostOptions, fetchPost, type ControllerStatus, type ControllerListener, type SubscribeState, type FormState, type ReactionsState, type CommentsState, SubscribeController, FormController, ReactionsController, CommentsController, } from "@seriphxyz/core";
+export { DEFAULT_ENDPOINT, API_PATH, VISITOR_STORAGE_KEY, type SeriphConfig, type Comment, type ReactionCounts, type FormSubmitResponse, type SubscribeResponse, type SeriphPost, buildUrl, getSiteKey, getVisitorId, setVisitorId, type SubmitFormOptions, submitForm, type FetchCommentsOptions, fetchComments, type PostCommentOptions, postComment, type FetchReactionsOptions, type FetchReactionsResponse, fetchReactions, type AddReactionOptions, addReaction, type RemoveReactionOptions, removeReaction, type SubscribeOptions, subscribe, type JoinWaitlistOptions, type JoinWaitlistResponse, joinWaitlist, type ViewCountsOptions, type ViewCounts, type RecordViewResponse, getViewCounts, recordView, type FetchPostsOptions, fetchPosts, type FetchPostOptions, fetchPost, type ControllerStatus, type ControllerListener, type SubscribeState, type FormState, type ReactionsState, type CommentsState, type WaitlistState, SubscribeController, WaitlistController, FormController, ReactionsController, CommentsController, } from "@seriphxyz/core";
 export { seriphPostsLoader, type SeriphPostsLoaderOptions, } from "./loader.js";

package/dist/index.js

@@ -7,8 +7,8 @@
 // Re-export everything from core
 export { 
 // Constants
-DEFAULT_ENDPOINT, API_PATH, 
+DEFAULT_ENDPOINT, API_PATH, VISITOR_STORAGE_KEY, 
 // Helpers
-buildUrl, getSiteKey, submitForm, fetchComments, postComment, fetchReactions, addReaction, removeReaction, subscribe, fetchPosts, fetchPost, SubscribeController, FormController, ReactionsController, CommentsController, } from "@seriphxyz/core";
+buildUrl, getSiteKey, getVisitorId, setVisitorId, submitForm, fetchComments, postComment, fetchReactions, addReaction, removeReaction, subscribe, joinWaitlist, getViewCounts, recordView, fetchPosts, fetchPost, SubscribeController, WaitlistController, FormController, ReactionsController, CommentsController, } from "@seriphxyz/core";
 // Re-export loader (Astro-specific)
 export { seriphPostsLoader, } from "./loader.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seriphxyz/astro",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Astro components and content loader for Seriph widgets (forms, comments, reactions, posts)",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@seriphxyz/core": "0.1.2"
+    "@seriphxyz/core": "0.1.7"
   },
   "peerDependencies": {
     "astro": "^5.0.0"

package/src/Comments.astro

@@ -2,7 +2,7 @@
 /**
  * Seriph Comments Component
  *
- * Displays threaded comments with a form to post new comments.
+ * Displays threaded comments with a form to post new comments and replies.
  * Customize with CSS custom properties.
  *
  * @example
@@ -47,6 +47,11 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
   <div class="seriph-comments-list"></div>
 
   <form class="seriph-comments-form">
+    <div class="seriph-reply-indicator" style="display: none;">
+      <span>Replying to <strong class="seriph-reply-to-name"></strong></span>
+      <button type="button" class="seriph-cancel-reply">Cancel</button>
+    </div>
+    <input type="hidden" name="parentId" value="" />
     <slot name="form">
       <div class="seriph-form-group">
         <label for="seriph-author-name">Name</label>
@@ -76,6 +81,7 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
         <span class="seriph-comment-date"></span>
       </div>
       <div class="seriph-comment-content"></div>
+      <button type="button" class="seriph-reply-btn">Reply</button>
       <div class="seriph-comment-replies"></div>
     </div>
   </template>
@@ -98,14 +104,28 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
     const siteKey = (container as HTMLElement).dataset.siteKey;
     const pageId = (container as HTMLElement).dataset.pageId;
     const list = container.querySelector(".seriph-comments-list");
-    const form = container.querySelector(".seriph-comments-form");
+    const form = container.querySelector(".seriph-comments-form") as HTMLFormElement;
     const template = container.querySelector("#seriph-comment-template") as HTMLTemplateElement;
+    const replyIndicator = container.querySelector(".seriph-reply-indicator") as HTMLElement;
+    const replyToName = container.querySelector(".seriph-reply-to-name") as HTMLElement;
+    const cancelReplyBtn = container.querySelector(".seriph-cancel-reply") as HTMLButtonElement;
+    const parentIdInput = form?.querySelector('input[name="parentId"]') as HTMLInputElement;
 
     if (!endpoint || !siteKey || !pageId || !list || !form || !template) return;
 
     // 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(
@@ -144,6 +164,20 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
       ).toLocaleDateString();
       el.querySelector(".seriph-comment-content")!.textContent = comment.content;
 
+      // Add reply button handler
+      const replyBtn = el.querySelector(".seriph-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(".seriph-comment-replies")!;
       comment.replies?.forEach((reply) => renderComment(reply, repliesContainer));
 
@@ -164,6 +198,9 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
       // 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)}`,
@@ -177,6 +214,7 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
               authorName: formData.get("authorName"),
               authorEmail: formData.get("authorEmail") || undefined,
               content: formData.get("content"),
+              parentId: parentId ? parseInt(parentId, 10) : undefined,
               _gotcha: honeypot || undefined,
               _seriph_ts: loadTimestamp,
             }),
@@ -186,6 +224,7 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
         if (!response.ok) throw new Error("Failed to post comment");
 
         formEl.reset();
+        cancelReply(); // Reset reply mode
         container.dispatchEvent(
           new CustomEvent("seriph:comment-posted", {
             detail: await response.json(),
@@ -278,12 +317,40 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
         grid-template-columns: 1fr 1fr;
       }
 
-      .seriph-comments-form .seriph-form-group:nth-child(3),
+      .seriph-comments-form .seriph-form-group:nth-child(4),
+      .seriph-comments-form .seriph-reply-indicator,
       .seriph-comments-form button[type="submit"] {
         grid-column: 1 / -1;
       }
     }
 
+    .seriph-reply-indicator {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 0.75rem;
+      background: var(--seriph-notice-bg);
+      color: var(--seriph-notice-text);
+      border-radius: 0.25rem;
+      font-size: 0.8125rem;
+      grid-column: 1 / -1;
+    }
+
+    .seriph-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;
+    }
+
+    .seriph-cancel-reply:hover {
+      background: rgba(0, 0, 0, 0.1);
+    }
+
     .seriph-form-group {
       margin-bottom: 0;
     }
@@ -368,6 +435,21 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
       font-size: 0.875rem;
     }
 
+    .seriph-reply-btn {
+      margin-top: 0.5rem;
+      padding: 0.125rem 0.5rem;
+      background: transparent;
+      border: none;
+      color: var(--seriph-text-muted);
+      font-size: 0.75rem;
+      cursor: pointer;
+    }
+
+    .seriph-reply-btn:hover {
+      color: var(--seriph-focus-color);
+      text-decoration: underline;
+    }
+
     .seriph-comment-replies {
       margin-left: 1rem;
       margin-top: 0.5rem;

package/src/index.ts

@@ -10,6 +10,7 @@ export {
   // Constants
   DEFAULT_ENDPOINT,
   API_PATH,
+  VISITOR_STORAGE_KEY,
 
   // Types
   type SeriphConfig,
@@ -22,6 +23,8 @@ export {
   // Helpers
   buildUrl,
   getSiteKey,
+  getVisitorId,
+  setVisitorId,
 
   // API Functions - Forms
   type SubmitFormOptions,
@@ -35,6 +38,7 @@ export {
 
   // API Functions - Reactions
   type FetchReactionsOptions,
+  type FetchReactionsResponse,
   fetchReactions,
   type AddReactionOptions,
   addReaction,
@@ -45,6 +49,18 @@ export {
   type SubscribeOptions,
   subscribe,
 
+  // API Functions - Waitlist
+  type JoinWaitlistOptions,
+  type JoinWaitlistResponse,
+  joinWaitlist,
+
+  // API Functions - Views
+  type ViewCountsOptions,
+  type ViewCounts,
+  type RecordViewResponse,
+  getViewCounts,
+  recordView,
+
   // API Functions - Posts
   type FetchPostsOptions,
   fetchPosts,
@@ -58,7 +74,9 @@ export {
   type FormState,
   type ReactionsState,
   type CommentsState,
+  type WaitlistState,
   SubscribeController,
+  WaitlistController,
   FormController,
   ReactionsController,
   CommentsController,