@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

bash

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

tsx

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

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



// ... inside your 

  path="/blog/*" 

  element={} 

/>





$3

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.



$3

Displays a vertical list of categories and a tag cloud.

tsx

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

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



  client={superdevClient} 

  showTags={true} 

  categoriesTitle="Explore Topics" 

/>





$3

A minimal link list perfect for footers.

tsx

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



  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)