EasyBlog Components

A React component library for building blog applications with simple, centralized theming support.

Installation

Stable Version

npm install @your-scope/easyblog-components

Beta Version

npm install @your-scope/easyblog-components@beta

🎨 Theming System

The components use a simple, centralized theming approach through ThemeWrapper. This provides a clean, predictable way to manage themes across your entire application with full dynamic theming support.

Option 1: Use ThemeWrapper with Custom Themes (Recommended)

Wrap your app with ThemeWrapper and pass custom theme objects for full dynamic theming:

import { ThemeWrapper, Badge } from '@weekend-studio/easyblog-components';

// Define your custom theme
const myCustomTheme = {
  colors: {
    primary: '#ff6b6b',
    primaryForeground: '#ffffff',
    secondary: '#4ecdc4',
    secondaryForeground: '#ffffff',
    background: '#f8f9fa',
    foreground: '#2c3e50',
    card: '#ffffff',
    cardForeground: '#2c3e50',
    border: '#e9ecef',
    muted: '#f8f9fa',
    mutedForeground: '#6c757d',
    destructive: '#e74c3c',
    destructiveForeground: '#ffffff',
    // ... add all theme colors you need
  }
};

function App() {
  return (
    <ThemeWrapper customTheme={myCustomTheme}>
      <div className="my-app">
        <h1>My App</h1>
        <Badge variant="default">Uses Custom Theme</Badge>
      </div>
    </ThemeWrapper>
  );
}

Option 2: Use Built-in Light/Dark Themes

Use the built-in themes with easy switching:

import { ThemeWrapper, Badge } from '@weekend-studio/easyblog-components';

function App() {
  const [isDark, setIsDark] = useState(false);
  
  return (
    <ThemeWrapper initialMode={isDark ? 'dark' : 'light'}>
      <div className="my-app">
        <button onClick={() => setIsDark(!isDark)}>
          Toggle Theme
        </button>
        <Badge variant="default">Automatically Adapts</Badge>
      </div>
    </ThemeWrapper>
  );
}

Option 3: CSS Custom Properties (Fallback Only)

Note: This approach bypasses the dynamic theming system and is only recommended as a fallback or for very simple use cases.

Set CSS custom properties on any parent element:

/* Your app's CSS */
:root {
  --ec-primary: #007acc;
  --ec-secondary: #f0f0f0;
  --ec-background: #ffffff;
  --ec-foreground: #000000;
  --ec-border: #e5e7eb;
  --ec-muted: #f9fafb;
  --ec-muted-foreground: #6b7280;
  --ec-card: #ffffff;
  --ec-card-foreground: #000000;
}

/* Dark theme */
[data-theme="dark"] {
  --ec-primary: #60a5fa;
  --ec-secondary: #374151;
  --ec-background: #111827;
  --ec-foreground: #f9fafb;
  --ec-border: #374151;
  --ec-muted: #1f2937;
  --ec-muted-foreground: #9ca3af;
  --ec-card: #1f2937;
  --ec-card-foreground: #f9fafb;
}

Then use components normally:

import { Badge } from '@weekend-studio/easyblog-components';

function App() {
  return (
    <div>
      <Badge variant="secondary">Tag</Badge>
      {/* Component uses CSS custom properties as fallback */}
    </div>
  );
}

🔧 Component API

Badge

interface BadgeProps {
  variant?: "default" | "secondary" | "destructive" | "outline";
  className?: string;
  style?: React.CSSProperties;
}

No theme prop needed! Components automatically get theme from ThemeWrapper context.

🎯 How Theming Works

1. ThemeWrapper provides theme context to all child components
2. Components automatically use theme colors from context
3. Fallback to CSS custom properties if no context is available
4. Dynamic - themes can be changed programmatically at runtime
5. Simple - no need to pass theme props to individual components

🌟 Examples

Custom Theme with Dynamic Switching

import { ThemeWrapper, Badge, Card } from '@weekend-studio/easyblog-components';

function App() {
  const [currentTheme, setCurrentTheme] = useState('default');
  
  const themes = {
    default: {
      colors: {
        primary: '#007acc',
        background: '#ffffff',
        foreground: '#000000',
        // ... other colors
      }
    },
    sunset: {
      colors: {
        primary: '#ff6b6b',
        background: '#fff5f5',
        foreground: '#2c3e50',
        // ... other colors
      }
    },
    ocean: {
      colors: {
        primary: '#4ecdc4',
        background: '#f0f8ff',
        foreground: '#1a365d',
        // ... other colors
      }
    }
  };
  
  return (
    <ThemeWrapper customTheme={themes[currentTheme]}>
      <div>
        <div style={{ marginBottom: '1rem' }}>
          <button onClick={() => setCurrentTheme('default')}>Default</button>
          <button onClick={() => setCurrentTheme('sunset')}>Sunset</button>
          <button onClick={() => setCurrentTheme('ocean')}>Ocean</button>
        </div>
        
        <Card>
          <Badge variant="default">Theme: {currentTheme}</Badge>
          {/* All components automatically update when theme changes */}
        </Card>
      </div>
    </ThemeWrapper>
  );
}

Basic Usage with ThemeWrapper

import { ThemeWrapper, Badge } from '@weekend-studio/easyblog-components';

function App() {
  return (
    <ThemeWrapper initialMode="dark">
      <div>
        <Badge variant="secondary">Tag</Badge>
        {/* Automatically uses dark theme */}
      </div>
    </ThemeWrapper>
  );
}

CSS Custom Properties Only (Limited)

import './app.css'; // Contains your CSS custom properties
import { Badge } from '@weekend-studio/easyblog-components';

function App() {
  return (
    <div>
      <Badge variant="secondary">Tag</Badge>
      {/* Uses CSS custom properties as fallback */}
    </div>
  );
}

🔍 Available Components

• Badge - Status and tag component
• Button - Interactive button component
• Card - Content container component
• Skeleton - Loading placeholder component
• ArticleV2 - Blog post display component
• ArticleCardV2 - Blog post preview component
• ArticleGroupV2 - Blog post list component
• TableOfContentsV2 - Navigation component
• LoadingV2 - Loading states component
• LinkBadgeV2 - Clickable tag component

🤝 Contributing

This is a component library SDK with a dynamic theming system. Components automatically inherit themes from context, making them easy to integrate with any design system while providing full runtime theme customization capabilities.