seo-pilot-blog

A CLI tool to download beautiful blog components for multiple frameworks. Version 2.0 introduces Smart Components that automatically work with SEO-Pilot data - no manual transformation needed!

Installation

npx seo-pilot-blog@latest add <framework>/<component>

Available Components

🚀 Smart Components (NEW in v2.0)

Smart components automatically understand SEO-Pilot data structure - no manual mapping required!

SmartBlogGrid

Intelligent blog grid that auto-maps SEO-Pilot data with:

• Zero data transformation needed
• Multiple variants (default, compact, featured)
• Show/hide author, tags, read time
• Custom empty states
• Event handlers

SmartPagination

Enhanced pagination with SEO-Pilot integration:

• Post count display (e.g., "Showing 1-10 of 50 posts")
• Multiple variants (default, minimal, detailed)
• Automatic page calculations
• Works with SEO-Pilot's pagination data

SmartArticleCard

Flexible article card with variants:

• Default, horizontal, and minimal layouts
• Smart data extraction with fallbacks
• Customizable display options
• Click handlers for custom routing

SmartBlogArticle (NEW!)

Complete blog article page component:

• Hero section with featured image
• Table of contents navigation
• Proper typography and content styling
• Related posts section
• Social sharing buttons
• Mobile-optimized responsive design

Classic Components

Hero Section

A stunning hero section with gradient backgrounds and call-to-action buttons.

BlogGrid

A responsive grid layout for displaying blog posts with:

• 2, 3, or 4 column layouts
• Image placeholders
• Category badges
• Read time indicators

Navigation

A sticky navigation menu with:

• Mobile-responsive hamburger menu
• Active state indicators
• Smooth scroll effects

ArticleCard

Individual blog post cards matching modern blog designs with:

• Featured image with gradient fallback
• Category badges (blue-100 background, blue-800 text)
• Hover effects
• Date formatting

CategoryFilter

Filter posts by category with:

• Pill-style buttons
• Active state highlighting
• Post count badges

Pagination

Page navigation controls with:

• Previous/Next buttons
• Page number display
• Ellipsis for large page counts
• Mobile-responsive design

Usage Examples

Download Smart Components (NEW!)

# Download SEO-Pilot types and smart components
npx seo-pilot-blog@latest add nextjs/types nextjs/smartbloggrid nextjs/smartpagination

# All smart components at once
npx seo-pilot-blog@latest add nextjs/types nextjs/smartbloggrid nextjs/smartpagination nextjs/smartarticlecard nextjs/smartblogarticle

Download Classic Components

npx seo-pilot-blog@latest add nextjs/hero
npx seo-pilot-blog@latest add vue/bloggrid
npx seo-pilot-blog@latest add vanilla/navigation

Download to custom directory

npx seo-pilot-blog@latest add react/smartbloggrid --output src/components

Download multiple components

npx seo-pilot-blog@latest add nextjs/hero nextjs/bloggrid nextjs/pagination

Framework Support

• Next.js: React components with Tailwind CSS classes (requires Tailwind CSS)
• React: Pure React functional components with inline styles
• Vue: Vue 3 composition API components with scoped styles
• Angular: Standalone Angular components with component styles
• Svelte: Native Svelte components with scoped styles
• Vanilla: Plain JavaScript classes with embedded CSS

Component Features

✨ Self-Contained: Most components include embedded CSS (Next.js requires Tailwind CSS) 🎨 Modern Design: Beautiful, professional designs with smooth animations 📱 Responsive: Mobile-first approach with proper breakpoints ♿ Accessible: Proper ARIA labels and keyboard navigation 🎯 Type-Safe: TypeScript support where applicable 🚀 Production-Ready: Optimized and tested components

Requirements

Next.js Components

Next.js components use Tailwind CSS classes and require:

• Tailwind CSS installed and configured in your project
• Support for client components (some components use 'use client' directive)
• Add these custom animations to your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      keyframes: {
        fadeInUp: {
          from: { opacity: '0', transform: 'translateY(30px)' },
          to: { opacity: '1', transform: 'translateY(0)' }
        },
        float: {
          '0%, 100%': { transform: 'translateY(0) rotate(0deg)' },
          '50%': { transform: 'translateY(-20px) rotate(10deg)' }
        }
      }
    }
  }
}

Other Frameworks

All other framework components are truly self-contained with embedded CSS.

Output Structure

Components are downloaded to a structured directory:

components/
├── nextjs/
│   ├── Hero.tsx
│   ├── BlogGrid.tsx
│   └── Navigation.tsx
├── react/
├── vue/
├── angular/
├── svelte/
└── vanilla/

Each framework directory includes:

• Component files with proper extensions
• README.md with usage instructions
• Auto-generated index files for easy imports

🎯 Smart Components Usage (v2.0)

The biggest advantage of Smart Components is zero data transformation. Here's the difference:

Before (Classic Components) - Complex Manual Mapping

// You had to transform SEO-Pilot data manually
const transformedPosts = seoPilotData.articles.map(article => ({
  id: article.id || article.slug,
  title: article.headline || article.title || 'Untitled',
  excerpt: article.metaDescription || article.excerpt || '',
  category: article.category?.title || 'General',
  date: new Date(article.publishedAt || article.createdAt).toLocaleDateString(),
  readTime: `${article.readingTime || 5} min read`,
  image: article.image,
  link: `/blog/${article.slug}`
}));

<BlogGrid posts={transformedPosts} />

After (Smart Components) - Direct Usage!

// Just pass SEO-Pilot data directly!
<SmartBlogGrid 
  posts={seoPilotData.articles}
  columns={3}
  showAuthor={true}
  showTags={true}
  variant="default"
/>

<SmartPagination
  currentPage={pageNumber}
  totalPages={lastPage}
  totalPosts={seoPilotData.total}
  baseUrl="/blog"
/>

SmartBlogGrid Props

interface SmartBlogGridProps {
  posts: SeoPilotPost[];        // Direct SEO-Pilot data!
  columns?: 2 | 3 | 4;          // Grid columns
  showImage?: boolean;          // Show featured images
  showCategory?: boolean;       // Show category badges
  showReadTime?: boolean;       // Show reading time
  showAuthor?: boolean;         // Show author info
  showTags?: boolean;           // Show post tags
  variant?: 'default' | 'compact' | 'featured';
  emptyState?: {                // Custom empty state
    icon?: string;
    title?: string;
    description?: string;
  };
  onPostClick?: (post: SeoPilotPost) => void;
}

SmartPagination Props

interface SmartPaginationProps {
  currentPage: number;
  totalPages: number;
  totalPosts?: number;          // Shows "Showing 1-10 of 50 posts"
  postsPerPage?: number;
  baseUrl?: string;
  variant?: 'default' | 'minimal' | 'detailed';
  showPageInfo?: boolean;
  showPostCount?: boolean;
  onPageChange?: (page: number) => void;
}

SmartArticleCard Props

interface SmartArticleCardProps {
  article: SeoPilotPost;        // Direct SEO-Pilot post!
  variant?: 'default' | 'horizontal' | 'minimal';
  showImage?: boolean;
  showCategory?: boolean;
  showAuthor?: boolean;
  showExcerpt?: boolean;
  showReadTime?: boolean;
  showTags?: boolean;
  onClick?: (article: SeoPilotPost) => void;
}

SmartBlogArticle Props

interface SmartBlogArticleProps {
  post: SeoPilotPost;           // Direct SEO-Pilot post!
  
  // Hero section customization
  hero?: {
    showCategory?: boolean;
    showReadingTime?: boolean;
    showAuthor?: boolean;
    showDate?: boolean;
    showShareButtons?: boolean;
    imagePosition?: 'left' | 'right' | 'top' | 'none';
    imageSize?: 'small' | 'medium' | 'large';
  };
  
  // Content customization
  content?: {
    showTableOfContents?: boolean;
    proseClass?: string;
    maxWidth?: string;
    showRelatedPosts?: boolean;
    relatedPostsCount?: number;
  };
  
  // Navigation customization
  navigation?: {
    position?: 'left' | 'right';
    sticky?: boolean;
    showLevels?: number[];      // [1, 2, 3] for h1, h2, h3
    maxHeight?: string;
    showScrollIndicator?: boolean;
  };
  
  // Callbacks
  onHeadingClick?: (id: string) => void;
  onShare?: (platform: string, url: string) => void;
  onRelatedPostClick?: (post: SeoPilotPost) => void;
}

SmartBlogArticle Usage Example

<SmartBlogArticle 
  post={seoPilotPost}
  hero={{
    showCategory: true,
    showReadingTime: true,
    imagePosition: 'right'
  }}
  content={{
    showTableOfContents: true,
    showRelatedPosts: true
  }}
  navigation={{
    position: 'right',
    sticky: true
  }}
/>

Component API Examples

Hero Component

<Hero
  title="Welcome to Our Blog"
  description="Discover amazing content"
  ctaText="Get Started"
  ctaLink="/blog"
  variant="centered"
/>

BlogGrid Component

<BlogGrid
  posts={posts}
  columns={3}
  showImage={true}
  showCategory={true}
/>

Navigation Component

<Navigation
  items={[
    { label: 'Home', href: '/', active: true },
    { label: 'Blog', href: '/blog' }
  ]}
  logo="My Blog"
  sticky={true}
/>

ArticleCard Component

<ArticleCard
  article={{
    id: '1',
    slug: 'my-post',
    headline: 'Post Title',
    category: { title: 'SEO' },
    publishedAt: '2023-12-01'
  }}
/>

CategoryFilter Component

<CategoryFilter
  categories={[
    { id: '1', name: 'SEO', slug: 'seo', count: 15 }
  ]}
  activeCategory="seo"
  onCategoryChange={(category) => console.log(category)}
/>

Pagination Component

<Pagination
  currentPage={3}
  totalPages={10}
  maxVisible={5}
  onPageChange={(page) => console.log(page)}
/>

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - feel free to use these components in your projects!