React Blog CMS

A simple blog CMS system for React/Next.js projects that allows you to manage blog posts with a JSON file-based storage system.

Features

• Add, edit, and delete blog posts
• JSON file-based storage or localStorage
• Client-side dynamic rendering
• Automatic integration with React/Next.js projects
• Dynamic routing for blog posts
• Modern and responsive UI
• Fully customizable theming

Installation

npm install react-blog-cms

Usage

For Next.js Projects

1. First, wrap your application with the providers:

// pages/_app.tsx
import { BlogProvider, ConfigProvider } from 'react-blog-cms';

function MyApp({ Component, pageProps }) {
  return (
    <ConfigProvider
      config={{
        isNextJS: true,
        storageType: 'json',
        apiBasePath: '' // Leave empty for same-origin requests
      }}
    >
      <BlogProvider>
        <Component {...pageProps} />
      </BlogProvider>
    </ConfigProvider>
  );
}

export default MyApp;

2. Create the API route for blogs:

// pages/api/blogs.ts
import { NextApiRequest, NextApiResponse } from 'next';
import fs from 'fs';
import path from 'path';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const dataDir = path.join(process.cwd(), 'data');
  const filePath = path.join(dataDir, 'blogs.json');

  // Ensure data directory exists
  if (!fs.existsSync(dataDir)) {
    fs.mkdirSync(dataDir, { recursive: true });
  }

  if (req.method === 'GET') {
    try {
      if (!fs.existsSync(filePath)) {
        return res.status(200).json([]);
      }
      const fileContents = fs.readFileSync(filePath, 'utf8');
      const blogs = JSON.parse(fileContents);
      res.status(200).json(blogs);
    } catch (error) {
      res.status(500).json({ error: 'Error reading blogs' });
    }
  } else if (req.method === 'POST') {
    try {
      const blogs = req.body;
      fs.writeFileSync(filePath, JSON.stringify(blogs, null, 2));
      res.status(200).json({ message: 'Blogs saved successfully' });
    } catch (error) {
      res.status(500).json({ error: 'Error saving blogs' });
    }
  } else {
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

For React Projects

1. Wrap your application with the providers:

// App.tsx
import { BlogProvider, ConfigProvider } from 'react-blog-cms';

function App() {
  return (
    <ConfigProvider
      config={{
        isNextJS: false,
        storageType: 'localStorage' // Use localStorage for React projects
      }}
    >
      <BlogProvider>
        <YourApp />
      </BlogProvider>
    </ConfigProvider>
  );
}

export default App;

2. Create the admin pages for managing blogs:

// AdminBlogs.tsx
import { BlogList } from 'react-blog-cms';

export default function AdminBlogs() {
  return <BlogList />;
}

// NewBlog.tsx
import { BlogForm } from 'react-blog-cms';

export default function NewBlog() {
  return <BlogForm />;
}

// EditBlog.tsx
import { BlogForm } from 'react-blog-cms';
import { useParams } from 'react-router-dom';
import { useBlog } from 'react-blog-cms';

export default function EditBlog() {
  const { id } = useParams();
  const { blogs } = useBlog();
  const blog = blogs.find((b) => b.id === id);

  return <BlogForm initialBlog={blog} />;
}

3. Create the blog post page:

// BlogPost.tsx
import { BlogPost } from 'react-blog-cms';
import { useParams } from 'react-router-dom';

export default function BlogPostPage() {
  return <BlogPost />;
}

Theming

All components accept a theme prop that allows you to customize the appearance:

const theme = {
  colors: {
    primary: '#0070f3',    // Primary color for buttons and links
    secondary: '#666',     // Secondary text color
    background: '#ffffff', // Background color
    text: '#000000',      // Main text color
    accent: '#00a000',    // Accent color for hover states
    error: '#ff0000',     // Error color
    success: '#00a000',   // Success color
    border: '#eaeaea'     // Border color
  },
  typography: {
    fontFamily: 'system-ui, -apple-system, sans-serif',
    headingFontFamily: 'Georgia, serif', // Optional separate font for headings
    fontSize: {
      small: '14px',
      medium: '16px',
      large: '18px',
      xlarge: '24px'
    },
    fontWeight: {
      normal: 400,
      medium: 500,
      bold: 700
    },
    lineHeight: {
      tight: 1.2,
      normal: 1.5,
      relaxed: 1.8
    }
  },
  spacing: {
    small: '10px',
    medium: '20px',
    large: '30px'
  },
  borderRadius: {
    small: '4px',
    medium: '8px',
    large: '12px'
  }
};

// Apply theme to components
<BlogList theme={theme} />
<BlogForm theme={theme} />
<BlogPost theme={theme} />

API

Components

• BlogProvider: Context provider for the blog system
• ConfigProvider: Configuration provider for environment settings
• BlogList: Component to display and manage blog posts
• BlogForm: Form component for creating and editing blog posts
• BlogPost: Component to display individual blog posts

Hooks

• useBlog: Hook to access blog functionality

  const { blogs, addBlog, updateBlog, deleteBlog, getBlogBySlug } = useBlog();

License

MIT