@cybercraftit/blog-fetcher-client

A completely "Plug & Play" blog client for Next.js (App Router). Just install the package, define a single route, and you get a beautifully styled, full-featured blog with List Views, Single Posts, Search, Pagination, View Tracking, and SEO (OpenGraph & Schema) out of the box.

Installation

npm install @cybercraftit/blog-fetcher-client

Quick Setup (Plug & Play)

If you are using Next.js App Router, you can render the entire blog system by defining a single catch-all route. You don't need to manually build the UI or fetch data.

import { BlogSystem, generateBlogMetadata } from '@cybercraftit/blog-fetcher-client/next';
import { db } from '@/lib/db'; 

export const revalidate = 60; 

// 1. One-liner for full SEO (OpenGraph, Twitter, etc.)
export async function generateMetadata({ params }: any) {
    return generateBlogMetadata({ 
        params, 
        connections: getConnections, 
        siteUrl: "https://your-saas.com", 
        siteName: "My Amazing SaaS" 
    });
}

// 2. The connection fetcher (from your Dashboard DB)
const getConnections = async () => {
    const activeBlogs = await db.blogConnection.findMany({ where: { active: true } });
    return activeBlogs.map(b => ({ baseUrl: b.url, token: b.token }));
};

export default function BlogRoute({ params }: { params: { slug?: string[] } }) {
    return (
        <BlogSystem 
            params={params}
            siteUrl="https://your-saas.com"
            siteName="My Amazing SaaS"
            connections={getConnections} 
        />
    );
}

That's it! Your blog is now fully functional, heavily optimized for SEO, and dynamically synced with your database connections.

Tailwind CSS Configuration (Required)

Because the package provides beautiful out-of-the-box UI, you must tell your Host application's Tailwind config to scan the package for utility classes.

Update your tailwind.config.js:

module.exports = {
  content: [
    // ... your other content paths
    './node_modules/@cybercraftit/blog-fetcher-client/dist/**/*.{js,ts,jsx,tsx,mjs}',
  ],
  plugins: [
    require('@tailwindcss/typography'), // Required for proper markdown rendering
  ],
}

Headless Mode (Advanced Custom UI)

If you do NOT want to use our BlogSystem UI and prefer to build your own custom components, you can use the package as a headless data client.

import { createBlogClient } from '@cybercraftit/blog-fetcher-client';

const client = createBlogClient({
    getConnections: async () => [{ baseUrl: '...', token: '...' }]
});

// Fetch raw data
const posts = await client.getPosts();
const singlePost = await client.getPostBySlug('hello-world');