@seriphxyz/astro 0.1.2

package/src/Reactions.astro

@@ -0,0 +1,290 @@
+---
+/**
+ * Seriph Reactions Component
+ *
+ * Displays reaction buttons (like, clap, etc.) for a page.
+ * Customize with CSS custom properties.
+ *
+ * @example
+ * <Reactions
+ *   siteKey={import.meta.env.SERIPH_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 Seriph instance (default: 'https://seriph.xyz') */
+  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://seriph.xyz";
+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={["seriph-reactions", `seriph-theme-${theme}`, className]}
+  data-seriph-reactions
+  data-endpoint={baseUrl}
+  data-site-key={siteKey}
+  data-page-id={pageId}
+>
+  {
+    reactions.map((reaction) => (
+      <button
+        type="button"
+        class="seriph-reaction-btn"
+        data-reaction-type={reaction}
+        title={reaction}
+      >
+        <span class="seriph-reaction-icon">{getIcon(reaction)}</span>
+        <span class="seriph-reaction-count">0</span>
+      </button>
+    ))
+  }
+</div>
+
+<script>
+  document.querySelectorAll("[data-seriph-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;
+
+    // Track which reactions the user has made (stored in localStorage)
+    const storageKey = `seriph-reactions-${pageId}`;
+    const userReactions = new Set<string>(
+      JSON.parse(localStorage.getItem(storageKey) || "[]")
+    );
+
+    // Apply initial "reacted" state
+    container.querySelectorAll(".seriph-reaction-btn").forEach((btn) => {
+      const type = (btn as HTMLElement).dataset.reactionType;
+      if (type && userReactions.has(type)) {
+        btn.classList.add("seriph-reacted");
+      }
+    });
+
+    async function loadReactions() {
+      try {
+        const response = await fetch(
+          `${endpoint}/reactions/${encodeURIComponent(pageId!)}`,
+          {
+            headers: { "X-Seriph-Key": siteKey! },
+          },
+        );
+        if (!response.ok) return;
+        const data = await response.json();
+        const counts = data.reaction_counts?.counts || {};
+
+        container.querySelectorAll(".seriph-reaction-btn").forEach((btn) => {
+          const type = (btn as HTMLElement).dataset.reactionType;
+          const countEl = btn.querySelector(".seriph-reaction-count");
+          if (type && countEl) {
+            countEl.textContent = String(counts[type] || 0);
+          }
+        });
+      } catch (e) {
+        console.error("Failed to load reactions:", e);
+      }
+    }
+
+    container.querySelectorAll(".seriph-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("seriph-loading");
+
+        try {
+          const response = await fetch(
+            `${endpoint}/reactions/${encodeURIComponent(pageId)}`,
+            {
+              method: isReacted ? "DELETE" : "POST",
+              headers: {
+                "Content-Type": "application/json",
+                "X-Seriph-Key": siteKey!,
+              },
+              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(".seriph-reaction-count");
+          if (countEl) {
+            countEl.textContent = String(data.reaction?.count || 0);
+          }
+
+          if (isReacted) {
+            // Remove reaction
+            btn.classList.remove("seriph-reacted");
+            userReactions.delete(type);
+            container.dispatchEvent(
+              new CustomEvent("seriph:reaction-removed", {
+                detail: data.reaction,
+              }),
+            );
+          } else {
+            // Add reaction
+            btn.classList.add("seriph-reacted");
+            userReactions.add(type);
+            container.dispatchEvent(
+              new CustomEvent("seriph: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("seriph-loading");
+        }
+      });
+    });
+
+    loadReactions();
+  });
+</script>
+
+<style is:global>
+  @layer seriph {
+    .seriph-reactions {
+      --seriph-border-color: #e5e7eb;
+      --seriph-button-bg: white;
+      --seriph-hover-bg: #f3f4f6;
+      --seriph-hover-border: #d1d5db;
+      --seriph-active-bg: #dbeafe;
+      --seriph-active-border: #93c5fd;
+      --seriph-active-hover-bg: #bfdbfe;
+      --seriph-count-color: #6b7280;
+      --seriph-active-text: #1d4ed8;
+
+      display: flex;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+
+    /* Dark theme */
+    .seriph-reactions.seriph-theme-dark {
+      --seriph-border-color: #374151;
+      --seriph-button-bg: transparent;
+      --seriph-hover-bg: #374151;
+      --seriph-hover-border: #4b5563;
+      --seriph-active-bg: rgba(59, 130, 246, 0.2);
+      --seriph-active-border: #3b82f6;
+      --seriph-active-hover-bg: rgba(59, 130, 246, 0.3);
+      --seriph-count-color: #9ca3af;
+      --seriph-active-text: #60a5fa;
+    }
+
+    /* Auto theme - follows prefers-color-scheme */
+    @media (prefers-color-scheme: dark) {
+      .seriph-reactions.seriph-theme-auto {
+        --seriph-border-color: #374151;
+        --seriph-button-bg: transparent;
+        --seriph-hover-bg: #374151;
+        --seriph-hover-border: #4b5563;
+        --seriph-active-bg: rgba(59, 130, 246, 0.2);
+        --seriph-active-border: #3b82f6;
+        --seriph-active-hover-bg: rgba(59, 130, 246, 0.3);
+        --seriph-count-color: #9ca3af;
+        --seriph-active-text: #60a5fa;
+      }
+    }
+
+    .seriph-reaction-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--seriph-border-color);
+      border-radius: 9999px;
+      background: var(--seriph-button-bg);
+      cursor: pointer;
+      transition: all 0.15s ease;
+      font-family: inherit;
+      font-size: 0.875rem;
+    }
+
+    .seriph-reaction-btn:hover:not(.seriph-reacted) {
+      background: var(--seriph-hover-bg);
+      border-color: var(--seriph-hover-border);
+    }
+
+    .seriph-reaction-btn.seriph-reacted {
+      background: var(--seriph-active-bg);
+      border-color: var(--seriph-active-border);
+    }
+
+    .seriph-reaction-btn.seriph-reacted:hover {
+      background: var(--seriph-active-hover-bg);
+    }
+
+    .seriph-reaction-btn.seriph-loading {
+      opacity: 0.6;
+      cursor: wait;
+    }
+
+    .seriph-reaction-icon {
+      font-size: 1.125rem;
+      line-height: 1;
+    }
+
+    .seriph-reaction-count {
+      color: var(--seriph-count-color);
+      font-weight: 500;
+      min-width: 1ch;
+    }
+
+    .seriph-reacted .seriph-reaction-count {
+      color: var(--seriph-active-text);
+    }
+  }
+</style>

package/src/index.ts

@@ -0,0 +1,212 @@
+const DEFAULT_ENDPOINT = "https://seriph.xyz";
+const API_PATH = "/api/v1";
+
+// Types
+export interface SeriphConfig {
+  /** Your site key (required) */
+  siteKey: string;
+  /** @deprecated Use siteKey instead */
+  apiKey?: string;
+  /** Base URL of your Seriph instance (default: 'https://seriph.xyz') */
+  endpoint?: string;
+}
+
+/** @deprecated Use SeriphConfig instead */
+export type SeraphConfig = SeriphConfig;
+
+// Re-export loader
+export {
+  seriphPostsLoader,
+  seraphPostsLoader,
+  fetchPosts,
+  fetchPost,
+  type SeriphPost,
+  type SeraphPost,
+  type SeriphPostsLoaderOptions,
+  type SeraphPostsLoaderOptions,
+  type FetchPostsOptions,
+  type FetchPostOptions,
+} from "./loader.js";
+
+export interface FormSubmitOptions {
+  onSuccess?: (data: unknown) => void;
+  onError?: (error: Error) => void;
+}
+
+export interface Comment {
+  id: string;
+  pageId: string;
+  parentId?: string;
+  authorName: string;
+  content: string;
+  createdAt: string;
+  replies: Comment[];
+}
+
+export interface ReactionCounts {
+  pageId: string;
+  counts: Record<string, number>;
+}
+
+// Helper to build API URL
+function buildUrl(endpoint: string | undefined, path: string): string {
+  const base = (endpoint || DEFAULT_ENDPOINT).replace(/\/+$/, "");
+  return `${base}${API_PATH}${path}`;
+}
+
+// Helper to get site key (supports both siteKey and deprecated apiKey)
+function getSiteKey(config: SeriphConfig): string {
+  const key = config.siteKey || config.apiKey;
+  if (!key) {
+    throw new Error("siteKey is required");
+  }
+  return key;
+}
+
+export interface SubmitFormOptions extends SeriphConfig {
+  formSlug: string;
+  data: Record<string, unknown>;
+  /** Form load timestamp for spam detection (auto-set if not provided) */
+  formLoadTime?: number;
+}
+
+export interface FormSubmitResponse {
+  success: boolean;
+  message: string;
+}
+
+// Client utilities
+export async function submitForm(options: SubmitFormOptions): Promise<FormSubmitResponse> {
+  const { endpoint, formSlug, data, formLoadTime } = options;
+  const siteKey = getSiteKey(options);
+  const url = buildUrl(endpoint, `/forms/${formSlug}/submit`);
+
+  // Include timestamp for time-based spam detection
+  const payload = {
+    ...data,
+    _seriph_ts: formLoadTime || Math.floor(Date.now() / 1000),
+  };
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Seriph-Key": siteKey,
+    },
+    body: JSON.stringify(payload),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Form submission failed: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+export interface FetchCommentsOptions extends SeriphConfig {
+  pageId: string;
+}
+
+export async function fetchComments(options: FetchCommentsOptions): Promise<Comment[]> {
+  const { endpoint, pageId } = options;
+  const siteKey = getSiteKey(options);
+  const url = buildUrl(endpoint, `/comments/${encodeURIComponent(pageId)}`);
+
+  const response = await fetch(url, {
+    headers: {
+      "X-Seriph-Key": siteKey,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch comments: ${response.statusText}`);
+  }
+
+  const data = await response.json();
+  return data.data || [];
+}
+
+export interface PostCommentOptions extends SeriphConfig {
+  pageId: string;
+  authorName: string;
+  authorEmail?: string;
+  content: string;
+  parentId?: string;
+}
+
+export async function postComment(options: PostCommentOptions): Promise<Comment> {
+  const { endpoint, pageId, ...rest } = options;
+  const siteKey = getSiteKey(options);
+  const url = buildUrl(endpoint, `/comments/${encodeURIComponent(pageId)}`);
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Seriph-Key": siteKey,
+    },
+    body: JSON.stringify({
+      authorName: rest.authorName,
+      authorEmail: rest.authorEmail,
+      content: rest.content,
+      parentId: rest.parentId,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to post comment: ${response.statusText}`);
+  }
+
+  const data = await response.json();
+  return data.data;
+}
+
+export interface FetchReactionsOptions extends SeriphConfig {
+  pageId: string;
+}
+
+export async function fetchReactions(options: FetchReactionsOptions): Promise<ReactionCounts> {
+  const { endpoint, pageId } = options;
+  const siteKey = getSiteKey(options);
+  const url = buildUrl(endpoint, `/reactions/${encodeURIComponent(pageId)}`);
+
+  const response = await fetch(url, {
+    headers: {
+      "X-Seriph-Key": siteKey,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch reactions: ${response.statusText}`);
+  }
+
+  const data = await response.json();
+  return data.data;
+}
+
+export interface AddReactionOptions extends SeriphConfig {
+  pageId: string;
+  reactionType?: string;
+}
+
+export async function addReaction(options: AddReactionOptions): Promise<{ reactionType: string; count: number }> {
+  const { endpoint, pageId, reactionType = "like" } = options;
+  const siteKey = getSiteKey(options);
+  const url = buildUrl(endpoint, `/reactions/${encodeURIComponent(pageId)}`);
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Seriph-Key": siteKey,
+    },
+    body: JSON.stringify({ reactionType }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to add reaction: ${response.statusText}`);
+  }
+
+  const data = await response.json();
+  return data.data;
+}