@xexr/blog-platform 1.0.9 → 1.0.11

package/dist/components/NewsletterSignup.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import { useState, useSyncExternalStore, type FormEvent } from "react";
+import { ArrowUpRight, Check } from "lucide-react";
+
+import { cn } from "../lib/utils";
+import type { PublishedNewsletterSettings } from "../types/contracts";
+
+export const NEWSLETTER_SUCCESS_MESSAGE =
+  "Thanks, you're on the list. We'll confirm before sending updates.";
+
+export interface NewsletterSignupProps {
+  siteId: string;
+  settings: PublishedNewsletterSettings;
+  sourceSurface: "blog_home" | "article";
+  sourceArticleSlug?: string;
+  sourceUrl?: string;
+  previewMode?: boolean;
+  className?: string;
+}
+
+export function NewsletterSignup({
+  siteId,
+  settings,
+  sourceSurface,
+  sourceArticleSlug,
+  sourceUrl,
+  previewMode = false,
+  className,
+}: NewsletterSignupProps) {
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [hasSubmitted, setHasSubmitted] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const subscriptionKey = getSubscriptionStorageKey(siteId);
+  const hasStoredSubscribed = useSyncExternalStore(
+    subscribeToStoredSubscription,
+    () => hasStoredSubscription(subscriptionKey),
+    () => false,
+  );
+  const hasSubscribed = hasSubmitted || (!previewMode && hasStoredSubscribed);
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setMessage(null);
+
+    const formData = new FormData(event.currentTarget);
+    const honeypot = getFormString(formData, "company");
+
+    if (previewMode) {
+      setMessage(NEWSLETTER_SUCCESS_MESSAGE);
+      setHasSubmitted(true);
+      event.currentTarget.reset();
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const response = await fetch(
+        `${settings.captureBaseUrl.replace(/\/$/, "")}/api/newsletter/subscribe`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            siteId: Number(siteId),
+            publicSubscribeToken: settings.publicSubscribeToken,
+            email: getFormString(formData, "email"),
+            name: getOptionalFormString(formData, "name"),
+            sourceSurface,
+            sourceUrl: resolveSourceUrl(sourceUrl),
+            sourceArticleSlug: sourceArticleSlug ?? null,
+            honeypot,
+          }),
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error("Newsletter signup failed.");
+      }
+
+      const result: unknown = await response.json().catch(() => null);
+      const successMessage =
+        getNewsletterResponseMessage(result) ?? NEWSLETTER_SUCCESS_MESSAGE;
+
+      storeSubscription(subscriptionKey);
+      setMessage(successMessage);
+      setHasSubmitted(true);
+      event.currentTarget.reset();
+    } catch {
+      setMessage(null);
+      setError("Newsletter signup failed. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <section
+      className={cn(
+        "border-y border-[var(--blog-accent-border)] py-5 sm:py-6",
+        className,
+      )}
+      aria-labelledby={`newsletter-${sourceSurface}-title`}
+    >
+      <div className="grid gap-4 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.4fr)] lg:items-end">
+        <div className="max-w-xl space-y-1">
+          <h2
+            id={`newsletter-${sourceSurface}-title`}
+            className="text-base leading-6 font-semibold"
+          >
+            {settings.title}
+          </h2>
+          <p className="text-muted-foreground text-sm leading-6">
+            {settings.description}
+          </p>
+        </div>
+
+        {hasSubscribed ? (
+          <div
+            className="flex items-start gap-3 text-sm leading-6 text-emerald-500"
+            role="status"
+            aria-live="polite"
+          >
+            <span className="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-emerald-500/15">
+              <Check className="size-3.5" aria-hidden="true" />
+            </span>
+            <p>{message ?? NEWSLETTER_SUCCESS_MESSAGE}</p>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-3">
+            <div className="grid gap-2 sm:grid-cols-[minmax(0,0.8fr)_minmax(0,1fr)_auto]">
+              <label
+                className="sr-only"
+                htmlFor={`newsletter-name-${sourceSurface}`}
+              >
+                Name
+              </label>
+              <input
+                id={`newsletter-name-${sourceSurface}`}
+                name="name"
+                type="text"
+                autoComplete="name"
+                placeholder="Name"
+                className="border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring min-h-10 rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+              />
+
+              <label
+                className="sr-only"
+                htmlFor={`newsletter-email-${sourceSurface}`}
+              >
+                Email
+              </label>
+              <input
+                id={`newsletter-email-${sourceSurface}`}
+                name="email"
+                type="email"
+                autoComplete="email"
+                placeholder="Email address"
+                required
+                className="border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring min-h-10 rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+              />
+
+              <input
+                type="text"
+                name="company"
+                tabIndex={-1}
+                autoComplete="off"
+                aria-hidden="true"
+                className="hidden"
+              />
+
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="inline-flex min-h-10 w-full shrink-0 items-center justify-center gap-2 rounded-full bg-[var(--blog-accent)] px-5 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
+              >
+                {isSubmitting ? "Submitting..." : settings.buttonLabel}
+                <ArrowUpRight className="size-4" aria-hidden="true" />
+              </button>
+            </div>
+
+            {error && <p className="text-sm text-red-600">{error}</p>}
+          </form>
+        )}
+      </div>
+    </section>
+  );
+}
+
+function resolveSourceUrl(sourceUrl: string | undefined): string | null {
+  if (sourceUrl?.startsWith("http://") || sourceUrl?.startsWith("https://")) {
+    return sourceUrl;
+  }
+
+  if (typeof window !== "undefined") {
+    return window.location.href;
+  }
+
+  return null;
+}
+
+function getFormString(formData: FormData, key: string): string {
+  const value = formData.get(key);
+  return typeof value === "string" ? value : "";
+}
+
+function getOptionalFormString(formData: FormData, key: string): string | null {
+  const value = getFormString(formData, key).trim();
+  if (value.length === 0) {
+    return null;
+  }
+
+  return value;
+}
+
+function getSubscriptionStorageKey(siteId: string): string {
+  return `bloggy_newsletter_subscribed_${siteId}`;
+}
+
+function hasStoredSubscription(key: string): boolean {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  try {
+    if (window.localStorage.getItem(key) === "true") {
+      return true;
+    }
+  } catch {
+    // Ignore storage failures; the subscription API remains the source of truth.
+  }
+
+  if (typeof document === "undefined") {
+    return false;
+  }
+
+  return document.cookie
+    .split(";")
+    .some((cookie) => cookie.trim().startsWith(`${key}=true`));
+}
+
+function storeSubscription(key: string): void {
+  if (typeof window !== "undefined") {
+    try {
+      window.localStorage.setItem(key, "true");
+    } catch {
+      // Ignore storage failures; users can still submit normally.
+    }
+  }
+
+  if (typeof document !== "undefined") {
+    document.cookie = `${key}=true; Max-Age=31536000; Path=/; SameSite=Lax`;
+  }
+}
+
+function subscribeToStoredSubscription(callback: () => void): () => void {
+  if (typeof window === "undefined") {
+    return () => undefined;
+  }
+
+  window.addEventListener("storage", callback);
+  return () => window.removeEventListener("storage", callback);
+}
+
+function getNewsletterResponseMessage(value: unknown): string | null {
+  if (
+    value &&
+    typeof value === "object" &&
+    "message" in value &&
+    typeof value.message === "string"
+  ) {
+    return value.message;
+  }
+
+  return null;
+}

package/dist/index.d.mts

@@ -1,8 +1,8 @@
-import { PublishedArticle, PublishedSite, PublishedAuthor, PublishResult, PublishedTopic } from './types/index.mjs';
+import { PublishedArticle, PublishedSite, PublishedNewsletterSettings, PublishedAuthor, PublishResult, PublishedTopic } from './types/index.mjs';
 export { PublishPayload, PublishedAuthorSocialLinks } from './types/index.mjs';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { CSSProperties, ReactElement } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -42,61 +42,55 @@ declare function formatArticleDateMeta(publishedAt: string, updatedAt: string):
 declare function extractTableOfContents(markdown: string): TocItem[];
 
 interface BlogHomePageProps {
-    articles: PublishedArticle[];
-    siteName?: string;
-    siteTagline?: string;
-    className?: string;
-    /** Site data for structured data generation */
-    site?: PublishedSite;
-    /** Whether to include structured data */
-    includeStructuredData?: boolean;
-    /** Public path where this blog is mounted, e.g. "/blog" or "/new-blog". */
-    basePath?: string;
-    /** Pagination configuration */
-    pagination?: {
-        currentPage: number;
-        totalPages: number;
-        baseUrl?: string;
-    };
-    /** Optional theme values for host-site brand integration. */
-    theme?: BlogTheme;
+  articles: PublishedArticle[];
+  siteName?: string;
+  siteTagline?: string;
+  className?: string;
+  site?: PublishedSite;
+  includeStructuredData?: boolean;
+  basePath?: string;
+  pagination?: {
+    currentPage: number;
+    totalPages: number;
+    baseUrl?: string;
+  };
+  theme?: BlogTheme;
+  newsletter?: PublishedNewsletterSettings;
+  newsletterPreviewMode?: boolean;
 }
-/**
- * Blog home page component that displays a list of published articles.
- *
- * This component is designed to be used by customers who install the
- * @xexr/blog-platform package. It provides a clean, SEO-friendly
- * article listing with proper metadata.
- */
-declare function BlogHomePage({ articles, siteName, siteTagline, className, site, includeStructuredData, basePath, pagination, theme, }: BlogHomePageProps): react_jsx_runtime.JSX.Element;
-/**
- * Generate metadata for the blog home page for SEO optimization.
- * This function should be used in the Next.js metadata API.
- */
-declare function generateBlogHomeMetadata(siteName?: string, siteDescription?: string, siteUrl?: string, pagination?: {
+
+declare function BlogHomePage(props: BlogHomePageProps): ReactElement;
+
+declare function generateBlogHomeMetadata(
+  siteName?: string,
+  siteTagline?: string,
+  siteUrl?: string,
+  pagination?: {
     currentPage: number;
     totalPages: number;
-}, basePath?: string): {
+  },
+  basePath?: string,
+): {
+  title: string;
+  description: string;
+  openGraph: {
     title: string;
     description: string;
-    openGraph: {
-        url?: string | undefined;
-        title: string;
-        description: string;
-        type: string;
-    };
-    twitter: {
-        card: string;
-        title: string;
-        description: string;
-    };
-    alternates: {
-        canonical?: string | undefined;
-    };
-    other: {
-        next?: string | undefined;
-        prev?: string | undefined;
-    };
+    type: string;
+    url?: string;
+  };
+  twitter: {
+    card: string;
+    title: string;
+    description: string;
+  };
+  alternates: {
+    canonical?: string;
+  };
+  other: {
+    prev?: string;
+    next?: string;
+  };
 };
 
 interface ArticlePageProps {
@@ -128,6 +122,8 @@ interface ArticlePageProps {
     href: string;
     label: string;
   };
+  newsletter?: PublishedNewsletterSettings;
+  newsletterPreviewMode?: boolean;
   relatedArticles?: PublishedArticle[];
   showShareLinks?: boolean;
 }
@@ -419,6 +415,18 @@ interface BlogAuthorsIndexPageProps {
 }
 declare function BlogAuthorsIndexPage({ articles, basePath, title, description, className, theme, }: BlogAuthorsIndexPageProps): react_jsx_runtime.JSX.Element;
 
+declare const NEWSLETTER_SUCCESS_MESSAGE = "Thanks, you're on the list. We'll confirm before sending updates.";
+interface NewsletterSignupProps {
+    siteId: string;
+    settings: PublishedNewsletterSettings;
+    sourceSurface: "blog_home" | "article";
+    sourceArticleSlug?: string;
+    sourceUrl?: string;
+    previewMode?: boolean;
+    className?: string;
+}
+declare function NewsletterSignup({ siteId, settings, sourceSurface, sourceArticleSlug, sourceUrl, previewMode, className, }: NewsletterSignupProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Authentication configuration interface
  * Customers can implement this to customize authentication behavior
@@ -894,6 +902,63 @@ declare const bpArticles: drizzle_orm_sqlite_core.SQLiteTableWithColumns<{
         }, {}, {
             length: number | undefined;
         }>;
+        featuredImageCaption: drizzle_orm_sqlite_core.SQLiteColumn<{
+            name: "featured_image_caption";
+            tableName: "bp_articles";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {
+            length: number | undefined;
+        }>;
+        featuredImageCreditText: drizzle_orm_sqlite_core.SQLiteColumn<{
+            name: "featured_image_credit_text";
+            tableName: "bp_articles";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {
+            length: number | undefined;
+        }>;
+        featuredImageCreditUrl: drizzle_orm_sqlite_core.SQLiteColumn<{
+            name: "featured_image_credit_url";
+            tableName: "bp_articles";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {
+            length: number | undefined;
+        }>;
         authorJson: drizzle_orm_sqlite_core.SQLiteColumn<{
             name: "author_json";
             tableName: "bp_articles";
@@ -1947,4 +2012,4 @@ declare function OPTIONS(request: NextRequest): Promise<NextResponse>;
 
 declare const PACKAGE_VERSION: string;
 
-export { ApiKeyAuth, type AuthConfig, type AuthResult, type AuthorArchive, type AuthorArchiveOptions, ArticlePage as BlogArticlePage, AuthorPage as BlogAuthorPage, BlogAuthorsIndexPage, BlogHomePage, type BlogPlatformConfig, type BlogPlatformStorage, type BlogPostingSchema, type BlogSitemapConfig, type BlogTheme, BlogTopicArchivePage, BlogTopicsIndexPage, type BreadcrumbListSchema, Button, type CanonicalUrlOptions, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DrizzleStorage, EnvAuth, type GeneratedMetadata, InMemoryStorage, type LinkTag, type MetaTag, type MetadataOptions, type NextjsSitemapEntry, NoAuth, type OrganizationSchema, PACKAGE_VERSION, Pagination$1 as Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PersonSchema, PublishResult, PublishedArticle, PublishedAuthor, PublishedSite, PublishedTopic, type RateLimitConfig, type RateLimitResult, Pagination as ShadcnPagination, type SitemapChangeFreq, type SitemapData, type SitemapEntry, type SitemapOptions, StructuredDataError, type StructuredDataOptions, type TopicArchive, UninitializedAuth, type WebSiteSchema, autoConfigureRateLimit, bpArticles, bpOperations, buildAuthorPath, buildBlogPath, buttonVariants, checkRateLimit, cn, configureRateLimit, createBlogSitemapRoute, createDynamicBlogSitemap, createRateLimitErrorResponse, createStructuredDataScript, enforceRateLimit, extractKeywordsFromArticle, extractTableOfContents, extractTokenFromHeader, formatArticleDateMeta, generateArticleMetadata, generateArticleStructuredData, generateAuthorPageMetadata, generateAuthorStructuredData, generateBlogHomeMetadata, generateBlogHomeStructuredData, generateBlogSitemapEntries, generateBreadcrumbStructuredData, generateCanonicalUrl, generateCanonicalUrlFromSlug, generateCompleteArticleStructuredData, generateOrganizationStructuredData, generatePaginationMetadata, generateSiteMetadata, generateSitemap, generateSitemapIndex, generateWebSiteStructuredData, getAllTopics, getArticlePrimaryTopic, getAuthConfig, getAuthorArchive, getAuthorsFromArticles, getBaseUrl, getBlogThemeStyle, getDrizzleAdapterSql, getPathPrefixFromBlogUrl, getRateLimitHeaders, getStorage, getTopicArchive, initBlogPlatform, initBlogPlatformDev, initBlogPlatformOnce, initBlogPlatformProd, initEnvAuth, isValidCanonicalUrl, loadAuthorArchive, metadataToHtml, normalizeBlogBasePath, normalizeDomain, normalizeSlug, POST$1 as publishHandler, safeGenerateArticleStructuredData, setAuthConfig, setStorage, shouldSkipAuth, sitemapToXml, GET as slugExistsHandler, OPTIONS as slugExistsOptionsHandler, structuredDataToJsonLd, POST as unpublishHandler, updateArticleCanonicalUrl, usePagination, validateMetadata, validateSitemap, validateStructuredData, GET$1 as versionHandler };
+export { ApiKeyAuth, type AuthConfig, type AuthResult, type AuthorArchive, type AuthorArchiveOptions, ArticlePage as BlogArticlePage, AuthorPage as BlogAuthorPage, BlogAuthorsIndexPage, BlogHomePage, type BlogPlatformConfig, type BlogPlatformStorage, type BlogPostingSchema, type BlogSitemapConfig, type BlogTheme, BlogTopicArchivePage, BlogTopicsIndexPage, type BreadcrumbListSchema, Button, type CanonicalUrlOptions, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DrizzleStorage, EnvAuth, type GeneratedMetadata, InMemoryStorage, type LinkTag, type MetaTag, type MetadataOptions, NEWSLETTER_SUCCESS_MESSAGE, NewsletterSignup, type NewsletterSignupProps, type NextjsSitemapEntry, NoAuth, type OrganizationSchema, PACKAGE_VERSION, Pagination$1 as Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PersonSchema, PublishResult, PublishedArticle, PublishedAuthor, PublishedNewsletterSettings, PublishedSite, PublishedTopic, type RateLimitConfig, type RateLimitResult, Pagination as ShadcnPagination, type SitemapChangeFreq, type SitemapData, type SitemapEntry, type SitemapOptions, StructuredDataError, type StructuredDataOptions, type TopicArchive, UninitializedAuth, type WebSiteSchema, autoConfigureRateLimit, bpArticles, bpOperations, buildAuthorPath, buildBlogPath, buttonVariants, checkRateLimit, cn, configureRateLimit, createBlogSitemapRoute, createDynamicBlogSitemap, createRateLimitErrorResponse, createStructuredDataScript, enforceRateLimit, extractKeywordsFromArticle, extractTableOfContents, extractTokenFromHeader, formatArticleDateMeta, generateArticleMetadata, generateArticleStructuredData, generateAuthorPageMetadata, generateAuthorStructuredData, generateBlogHomeMetadata, generateBlogHomeStructuredData, generateBlogSitemapEntries, generateBreadcrumbStructuredData, generateCanonicalUrl, generateCanonicalUrlFromSlug, generateCompleteArticleStructuredData, generateOrganizationStructuredData, generatePaginationMetadata, generateSiteMetadata, generateSitemap, generateSitemapIndex, generateWebSiteStructuredData, getAllTopics, getArticlePrimaryTopic, getAuthConfig, getAuthorArchive, getAuthorsFromArticles, getBaseUrl, getBlogThemeStyle, getDrizzleAdapterSql, getPathPrefixFromBlogUrl, getRateLimitHeaders, getStorage, getTopicArchive, initBlogPlatform, initBlogPlatformDev, initBlogPlatformOnce, initBlogPlatformProd, initEnvAuth, isValidCanonicalUrl, loadAuthorArchive, metadataToHtml, normalizeBlogBasePath, normalizeDomain, normalizeSlug, POST$1 as publishHandler, safeGenerateArticleStructuredData, setAuthConfig, setStorage, shouldSkipAuth, sitemapToXml, GET as slugExistsHandler, OPTIONS as slugExistsOptionsHandler, structuredDataToJsonLd, POST as unpublishHandler, updateArticleCanonicalUrl, usePagination, validateMetadata, validateSitemap, validateStructuredData, GET$1 as versionHandler };