postack-cms v0.1.7

Postack CMS SDK

A lightweight SDK for integrating Postack CMS into your Next.js, React, or Node.js applications.

Installation

npm install postack-cms

Features

• Authentication: Easily integrate Postack's authentication system
• Content Management: Access and manage blog posts, categories, and comments
• Admin Panel: Embed the admin panel in your own application
• Components: Use pre-built React components for displaying blog content
• API Utilities: Simplified API access for content management

Quick Start

1. Set up the Provider

Wrap your application with the PostackProvider to enable SDK features:

// app/providers.tsx (Next.js App Router)
import { PostackProvider } from 'postack-cms';

export function Providers({ children }) {
  return (
    <PostackProvider 
      apiUrl="https://your-api-url.com" // Replace with your API URL
      authConfig={{
        providers: ['credentials'],
      }}
    >
      {children}
    </PostackProvider>
  );
}

2. Use the Hooks

Access your blog content using the provided hooks:

'use client';

import { usePosts, useCategories } from 'postack-cms';

export default function BlogPage() {
  const { posts, loading, error } = usePosts({ limit: 10, featured: true });
  const { categories } = useCategories();
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error loading posts</div>;
  
  return (
    <div>
      <h1>Blog Posts</h1>
      <div className="posts-grid">
        {posts.map(post => (
          <div key={post.id} className="post-card">
            <h2>{post.title}</h2>
            <p>{post.excerpt}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Testing Connection with a Live Website

To test the connection between your application and the Postack CMS API:

import { useEffect, useState } from 'react';
import { usePostack } from 'postack-cms';

export function ConnectionTest() {
  const { config } = usePostack();
  const [status, setStatus] = useState('checking');
  
  useEffect(() => {
    async function checkConnection() {
      try {
        const response = await fetch(`${config.apiUrl}/posts?limit=1`);
        if (response.ok) {
          setStatus('connected');
        } else {
          setStatus('error');
        }
      } catch (error) {
        setStatus('error');
        console.error('Connection error:', error);
      }
    }
    
    checkConnection();
  }, [config.apiUrl]);
  
  return (
    <div>
      <h2>API Connection Status</h2>
      <div>
        Status: {status === 'checking' ? 'Checking...' : 
                status === 'connected' ? 'Connected ✅' : 'Error ❌'}
      </div>
      <div>API URL: {config.apiUrl}</div>
    </div>
  );
}

Available Hooks

• usePosts({ category, limit, featured }) - Fetch blog posts with filtering options
• usePost(slug) - Fetch a single post by slug
• useCategories() - Fetch all categories
• useComments(postId) - Fetch comments for a post

Publishing the Package

To publish this package to npm for testing with a live website:

1. Build the Package

Navigate to the SDK directory and build the package:

cd sdk
npm run build

This will compile the TypeScript files and generate the distribution files in the dist directory.

2. Login to npm

Make sure you're logged in to npm:

npm login

3. Publish the Package

Publish the package to npm:

npm publish

If this is your first time publishing this package, it will be published to the npm registry. If you're updating an existing package, you'll need to update the version number in package.json first.

4. Local Testing Without Publishing

For local testing without publishing to npm:

1. In the SDK directory, create a local link:

cd sdk
npm link

2. In your test project, use the linked package:

cd your-test-project
npm link postack-cms

3. Import and use the SDK in your test project as if it were installed from npm.

License

MIT