React Components

// app/blog/page.tsx
import { WrytzeClient } from "@wrytze/sdk";
import { BlogList } from "@wrytze/react";

const wrytze = new WrytzeClient({
  apiKey: process.env.WRYTZE_API_KEY!,
  websiteId: process.env.WRYTZE_WEBSITE_ID,
});

export default async function BlogPage() {
  const { data: blogs, pagination } = await wrytze.blogs.list({ limit: 9 });
  const { data: categories } = await wrytze.categories.list();

  return (
    <main className="mx-auto max-w-6xl px-4 py-12">
      <h1 className="mb-8 text-4xl font-bold">Blog</h1>
      <BlogList blogs={blogs} pagination={pagination} categories={categories} />
    </main>
  );
}

// app/blog/page.tsx
"use client";

import { WrytzeClient } from "@wrytze/sdk";
import { WrytzeProvider, BlogList } from "@wrytze/react";

const client = new WrytzeClient({
  apiKey: process.env.NEXT_PUBLIC_WRYTZE_API_KEY!,
  websiteId: process.env.NEXT_PUBLIC_WRYTZE_WEBSITE_ID,
});

export default function BlogPage() {
  return (
    <WrytzeProvider client={client}>
      <main className="mx-auto max-w-6xl px-4 py-12">
        <h1 className="mb-8 text-4xl font-bold">Blog</h1>
        <BlogList />
      </main>
    </WrytzeProvider>
  );
}

import { WrytzeProvider } from "@wrytze/react";
import { WrytzeClient } from "@wrytze/sdk";

const client = new WrytzeClient({ apiKey: "..." });

<WrytzeProvider client={client}>
  {/* BlogList, BlogArticle, hooks — all work here */}
</WrytzeProvider>

import { useWrytzeClient, useRequiredWrytzeClient } from "@wrytze/react";

import { BlogListPage } from "@wrytze/react/next";

<BlogListPage
  blogs={blogs}
  pagination={pagination}
  categories={categories}
  title="Our Blog"
  description="Thoughts, guides, and updates from our team."
/>

import { BlogPostPage } from "@wrytze/react/next";

<BlogPostPage
  blog={blogDetail}
  prev={{ title: "Previous Post", slug: "previous-post" }}
  next={{ title: "Next Post", slug: "next-post" }}
/>

import { useBlogs } from "@wrytze/react";

const { data, pagination, error, isLoading } = useBlogs(client, params);

function useBlogs(
  client: WrytzeClient,
  params?: ListBlogsParams
): UseBlogsResult

import { useBlog } from "@wrytze/react";

const { data, error, isLoading } = useBlog(client, { slug: "my-post" });
// or
const { data, error, isLoading } = useBlog(client, { id: "cm5abc123" });

type BlogIdentifier = { id: string } | { slug: string }

function useBlog(
  client: WrytzeClient,
  identifier: BlogIdentifier
): UseBlogResult

import { useCategories } from "@wrytze/react";

const { data, error, isLoading } = useCategories(client);

function useCategories(
  client: WrytzeClient,
  params?: ListResourceParams
): UseCategoriesResult

import { useTags } from "@wrytze/react";

const { data, error, isLoading } = useTags(client);

function useTags(
  client: WrytzeClient,
  params?: ListResourceParams
): UseTagsResult

import { BlogList } from "@wrytze/react";

// Data mode — you own the data
<BlogList blogs={blogs} pagination={pagination} categories={categories} />

// Client mode — component fetches automatically
<BlogList websiteId="ws_abc123" />

import { BlogArticle } from "@wrytze/react";

// Data mode
<BlogArticle blog={blogDetail} />

// Client mode — fetch by slug
<BlogArticle slug="building-a-modern-blog" />

// Client mode — fetch by ID
<BlogArticle id="cm5abc123def456" client={client} />

import { BlogCard } from "@wrytze/react";

<BlogCard blog={blog} basePath="/blog" />

import { BlogHeader } from "@wrytze/react";

<BlogHeader
  title={blog.title}
  featuredImageUrl={blog.featuredImageUrl}
  featuredImageAlt={blog.featuredImageAlt}
  categories={blog.categories}
/>

import { BlogImage } from "@wrytze/react";

<BlogImage
  src="https://cdn.example.com/cover.jpg"
  alt="Cover image"
  aspectRatio="aspect-[16/9]"
  priority
/>

import { BlogContent } from "@wrytze/react";

<BlogContent contentHtml={blog.contentHtml} />

import { BlogMeta } from "@wrytze/react";

<BlogMeta
  publishedAt={blog.publishedAt}
  readingTimeMinutes={blog.readingTimeMinutes}
  wordCount={blog.wordCount}
/>

import { BlogCategories } from "@wrytze/react";

<BlogCategories categories={blog.categories} basePath="/blog" />

import { BlogTags } from "@wrytze/react";

<BlogTags tags={blog.tags} basePath="/blog" />

import { BlogPagination } from "@wrytze/react";

<BlogPagination
  pagination={pagination}
  onPageChange={(page) => setCurrentPage(page)}
/>

import { BlogSearch } from "@wrytze/react";

<BlogSearch
  onSearch={(query) => setSearch(query)}
  placeholder="Search posts..."
/>

import { BlogFilter } from "@wrytze/react";

<BlogFilter
  categories={categories}
  activeCategory={currentCategory}
  onCategoryChange={(slug) => setCategory(slug)}
/>

import { BlogSkeleton } from "@wrytze/react";

// Show a 6-card grid placeholder
<BlogSkeleton variant="list" count={6} />

// Show an article placeholder
<BlogSkeleton variant="article" />

import { BlogError } from "@wrytze/react";

<BlogError
  message="Failed to load posts."
  onRetry={() => refetch()}
/>

import { TableOfContents } from "@wrytze/react";

<TableOfContents items={blog.tableOfContents} />

import { ReadingProgress } from "@wrytze/react";

<ReadingProgress />

import { ShareButtons } from "@wrytze/react";

// Horizontal layout (below content)
<ShareButtons url="https://example.com/blog/post" title="My Post" />

// Vertical layout (sidebar)
<ShareButtons url="https://example.com/blog/post" title="My Post" vertical />

import { AuthorCard } from "@wrytze/react";

<AuthorCard
  author={blog.author}
  publishedAt={blog.publishedAt}
  readingTimeMinutes={blog.readingTimeMinutes}
  wordCount={blog.wordCount}
/>

import { RelatedPosts } from "@wrytze/react";

<RelatedPosts
  blogs={blog.relatedBlogs}
  basePath="/blog"
  imageComponent={NextImage}
/>

import { PostNavigation } from "@wrytze/react";

<PostNavigation
  prev={{ title: "Getting Started with AI", slug: "getting-started-ai" }}
  next={{ title: "Advanced Techniques", slug: "advanced-techniques" }}
  basePath="/blog"
/>

import {
  BlogImage,     // uses next/image automatically
  BlogList,      // syncs page/category/search to URL params
  BlogSearch,    // syncs search query to URL params
  BlogListPage,  // complete blog listing page with filters + grid
  BlogPostPage,  // complete blog post page with TOC + share + related
} from "@wrytze/react/next";

// app/blog/page.tsx
import { WrytzeClient } from "@wrytze/sdk";
import { BlogList } from "@wrytze/react/next";

const wrytze = new WrytzeClient({ apiKey: process.env.WRYTZE_API_KEY! });

export default async function BlogPage({
  searchParams,
}: {
  searchParams: { page?: string; category?: string; search?: string };
}) {
  const page = Number(searchParams.page) || 1;

  const { data: blogs, pagination } = await wrytze.blogs.list({
    page,
    category: searchParams.category,
    search: searchParams.search,
  });

  const { data: categories } = await wrytze.categories.list();

  return (
    <BlogList
      blogs={blogs}
      pagination={pagination}
      categories={categories}
    />
  );
}

ComponentType<{
  src: string;
  alt: string;
  fill: boolean;
  priority?: boolean;
  sizes?: string;
  className?: string;
}>

import NextImage from "next/image";

<BlogList
  blogs={blogs}
  pagination={pagination}
  imageComponent={NextImage}
/>

import { cn } from "@wrytze/react";

function cn(...inputs: ClassValue[]): string

<BlogCard
  blog={blog}
  className={cn("ring-2 ring-blue-500", isActive && "ring-offset-2")}
/>

import { formatDate } from "@wrytze/react";

function formatDate(dateString: string): string

formatDate("2024-03-15T10:00:00Z"); // "March 15, 2024"

import { formatNumber } from "@wrytze/react";

function formatNumber(num: number): string

formatNumber(12500); // "12,500"

import {
  generateBlogListMetadata,
  generateBlogPostMetadata,
} from "@wrytze/react/metadata";

// app/blog/page.tsx
import type { Metadata } from "next";
import { generateBlogListMetadata } from "@wrytze/react/metadata";

export function generateMetadata(): Metadata {
  return generateBlogListMetadata({
    title: "Our Blog",
    description: "Thoughts, guides, and updates from our team.",
    baseUrl: "https://example.com/blog",
  });
}

// app/blog/[slug]/page.tsx
import type { Metadata } from "next";
import { generateBlogPostMetadata } from "@wrytze/react/metadata";
import { wrytze } from "@/lib/wrytze";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const { data: blog } = await wrytze.blogs.getBySlug(slug);
  if (!blog) return { title: "Post not found" };

  return generateBlogPostMetadata(blog, {
    siteName: "My Site",
    baseUrl: "https://example.com",
  });
}

@import "tailwindcss";
@import "@wrytze/react/tailwind.css";
@plugin "@tailwindcss/typography";

// Override card background and remove the border
<BlogCard
  blog={blog}
  className="border-0 bg-gray-50 dark:bg-gray-900"
/>

import type {
  // Context
  WrytzeProviderProps,

  // Hook results
  UseBlogsResult,
  UseBlogResult,
  BlogIdentifier,
  UseCategoriesResult,
  UseTagsResult,

  // Component props
  BlogListProps,
  BlogArticleProps,
  BlogCardProps,
  BlogHeaderProps,
  BlogImageProps,
  BlogContentProps,
  BlogMetaProps,
  BlogCategoriesProps,
  BlogTagsProps,
  BlogPaginationProps,
  BlogSearchProps,
  BlogFilterProps,
  BlogSkeletonProps,
  BlogErrorProps,
  TableOfContentsProps,
  ReadingProgressProps,
  ShareButtonsProps,
  AuthorCardProps,
  RelatedPostsProps,
  PostNavigationProps,
} from "@wrytze/react";

// Page-level component props (Next.js only)
import type {
  BlogListPageProps,
  BlogPostPageProps,
} from "@wrytze/react/next";