@logicspike/blog

Official blog SDK for LogicSpike — a headless API client and pre-built React components for rendering blog posts, categories, and tags.

Installation

npm install @logicspike/blog

Quick Start

Headless Client (No React)

import { LogicSpikeClient } from '@logicspike/blog';

const client = new LogicSpikeClient({
  apiKey: 'your-api-key',
  baseUrl: 'https://api.logicspike.com',
});

// List posts
const { data, meta } = await client.blog.list({ page: 1, limit: 10 });

// Get a single post
const post = await client.blog.get('my-post-slug');

// List categories & tags
const { data: categories } = await client.blog.categories.list();
const { data: tags } = await client.blog.tags.list();

React Components

import { LogicSpikeClient } from '@logicspike/blog';
import { LogicSpikeProvider, BlogList, BlogPost } from '@logicspike/blog/react';
import '@logicspike/blog/styles.css';

const client = new LogicSpikeClient({
  apiKey: 'your-api-key',
  baseUrl: 'https://api.logicspike.com',
});

function App() {
  return (
    <LogicSpikeProvider client={client}>
      <BlogList columns={3} limit={9} />
    </LogicSpikeProvider>
  );
}

function PostPage({ slug }: { slug: string }) {
  return (
    <LogicSpikeProvider client={client}>
      <BlogPost slug={slug} />
    </LogicSpikeProvider>
  );
}

Components

| Component | Description | |---|---| | <BlogList> | Paginated post grid/list with loading skeletons | | <BlogPost> | Full post view with featured image, metadata, content | | <BlogCard> | Individual post card (default, featured, compact variants) | | <BlogCategoryNav> | Category navigation (sidebar, tabs, pills variants) | | <BlogTagNav> | Tag navigation (pills, cloud variants) |

Hooks

| Hook | Returns | |---|---| | usePosts(params?) | { data, loading, error, refetch, page, totalPages, hasNextPage, hasPrevPage } | | usePost(slug) | { data, loading, error } | | useCategories() | { data, loading, error, refetch } | | useTags() | { data, loading, error, refetch } |

Filtering & Pagination

const { data } = usePosts({
  page: 1,
  limit: 10,
  category: 'tutorials',
  tag: 'react',
  search: 'getting started',
  sort: 'publishedAt',
  order: 'desc',
});

Styling

Import the default styles for rendered blog content:

import '@logicspike/blog/styles.css';

These styles target the .lsb-content class and support CSS custom properties (--border, --muted, --primary, --muted-foreground) for easy theming. Components use Tailwind CSS utility classes and are fully compatible with shadcn/ui themes.

License

MIT