@superdevhq/blog

Superdev CMS Blog Integration for React. This package provides a self-contained blog module that handles its own routing and respected CMS activation status.

Installation

npm install @superdevhq/blog

Zero-Effort Integration

Just add the BlogModule to your existing route tree. It will automatically handle everything under /blog (listing and posts).

In your src/App.tsx:

import { BlogModule } from '@superdevhq/blog';
import { superdevClient } from '@/lib/superdev/client';

// ... inside your <Routes>
<Route 
  path="/blog/*" 
  element={<BlogModule client={superdevClient} showSidebar={true} />} 
/>

What this does:

1. Self-Routing: Automatically manages /blog, /blog/:category/:slug, and /blog/:slug.
2. CMS Aware: It will render null if cmsActive is false in your project settings, making it safe to include in the base template.
3. Configurable Layout: Pass showSidebar={true} to activate a built-in 2-column sidebar layout for your blog pages.
4. Fully Independent: You don't need to create any blog pages or logic in your application.

Standalone Sidebar & Footer Components

You can use these components anywhere in your app (sidebars, footers, etc.) to list categories and tags.

BlogSidebar

Displays a vertical list of categories and a tag cloud.

import { BlogSidebar } from '@superdevhq/blog';
import { superdevClient } from '@/lib/superdev/client';

<BlogSidebar 
  client={superdevClient} 
  showTags={true} 
  categoriesTitle="Explore Topics" 
/>

BlogFooterLinks

A minimal link list perfect for footers.

import { BlogFooterLinks } from '@superdevhq/blog';

<BlogFooterLinks 
  client={superdevClient} 
  type="categories" 
  title="Resource Center" 
  layout="vertical"
/>

Peer Dependencies

Ensure your project has the following:

• @superdevhq/client
• @tanstack/react-query
• react-router-dom
• lucide-react, date-fns, tailwind-merge, clsx
• @tailwindcss/typography (for prose styling)