@asgerami/zemenay-blog/README.md

Plug-and-play blog system for Next.js - Get a fully functional blog running in minutes with zero configuration

# Zemenay Blog

A **plug-and-play blog system** for Next.js applications. Get a fully functional blog running in minutes with minimal setup.

## ✨ Features

- 🚀 **Zero Configuration** - Works out of the box
- 📝 **Rich Text Editor** - Create beautiful posts with TipTap
- 🎨 **Modern UI** - Beautiful, responsive design with dark mode
- 🔍 **Search & Filter** - Advanced search with categories and tags
- 📊 **Analytics** - Track your blog's performance
- 🔐 **Admin Panel** - Secure authentication with Supabase
- 📱 **Mobile Responsive** - Works perfectly on all devices
- 🎯 **TypeScript** - Full TypeScript support
- ⚡ **Fast** - Built with Next.js 14 and optimized for performance

## 🚀 Quick Start

### Option 1: One-Command Setup (Recommended)

```bash
# Create a new blog project
npx zemenay-blog@latest

# Or use the setup command in an existing Next.js project
npx setup-blog@latest
```

### Option 2: Manual Installation

```bash
# Install the package
npm install zemenay-blog

# Install additional dependencies
npm install -D @tailwindcss/typography
```

## 📋 Requirements

- Node.js 18+
- Next.js 14+
- Supabase account (free tier works great!)

## 🛠️ Setup

### 1. Install Dependencies

The package includes all necessary dependencies, but you'll need to install Tailwind CSS:

```bash
npm install -D tailwindcss @tailwindcss/typography @tailwindcss/postcss autoprefixer postcss
```

### 2. Configure Tailwind CSS

Create `tailwind.config.js`:

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/zemenay-blog/dist/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        zemenay: {
          50: "#eff6ff",
          100: "#dbeafe",
          200: "#bfdbfe",
          300: "#93c5fd",
          400: "#60a5fa",
          500: "#3b82f6",
          600: "#2563eb",
          700: "#1d4ed8",
          800: "#1e40af",
          900: "#1e3a8a",
        },
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};
```

Create `postcss.config.js`:

```javascript
module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
    autoprefixer: {},
  },
};
```

### 3. Update Global CSS

Add to your `app/globals.css`:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import Zemenay Blog styles */
@import "zemenay-blog/dist/styles.css";
```

### 4. Set Up Supabase

1. Create a new project at [supabase.com](https://supabase.com)
2. Run the SQL files from the `zemenay-blog-sql/` directory in your Supabase SQL Editor
3. Get your project URL and API key from Settings > API
4. Create `.env.local`:

```env
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here
```

## 📄 Usage

### Basic Blog List

```tsx
import { BlogList } from "zemenay-blog";

export default function BlogPage() {
  return (
    <div>
      <h1>My Blog</h1>
      <BlogList />
    </div>
  );
}
```

### Blog with Search

```tsx
import { BlogList, SearchWithFilters } from "zemenay-blog";

export default function BlogPage() {
  return (
    <div>
      <SearchWithFilters />
      <BlogList />
    </div>
  );
}
```

### Admin Panel

```tsx
import { AdminPanel } from "zemenay-blog";

export default function AdminPage() {
  return <AdminPanel />;
}
```

### Analytics Dashboard

```tsx
import { AnalyticsDashboard, AdminLayout } from "zemenay-blog";

export default function AnalyticsPage() {
  return (
    <AdminLayout title="Blog Analytics">
      <AnalyticsDashboard />
    </AdminLayout>
  );
}
```

## 🎨 Components

### Core Components

- `BlogList` - Display blog posts with pagination
- `BlogPost` - Individual blog post view
- `AdminPanel` - Complete admin interface
- `RichTextEditor` - WYSIWYG editor for posts
- `SearchWithFilters` - Advanced search with categories/tags
- `AnalyticsDashboard` - Blog analytics and insights

### UI Components

- `ThemeToggle` - Dark/light mode toggle
- `CategoryBadge` - Category display component
- `TagBadge` - Tag display component
- `LoadingStates` - Loading skeletons and animations

### Utility Components

- `SEOHead` - SEO meta tags
- `ImageUpload` - Image upload and management
- `FilterControls` - Advanced filtering options

## 🔧 Configuration

### Environment Variables

```env
# Required
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# Optional
NEXT_PUBLIC_BLOG_TITLE=My Awesome Blog
NEXT_PUBLIC_BLOG_DESCRIPTION=A blog powered by Zemenay Blog
```

### Customization

You can customize the styling by overriding the CSS classes:

```css
/* Custom blog post styling */
.blog-post-preview {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
}

/* Custom theme colors */
:root {
  --accent-color: #your-color;
  --success-color: #your-color;
  --error-color: #your-color;
}
```

## 📊 Database Schema

The package creates the following tables:

- `posts` - Blog posts
- `categories` - Post categories
- `tags` - Post tags
- `post_categories` - Many-to-many relationship
- `post_tags` - Many-to-many relationship
- `post_views` - Analytics data
- `post_engagement` - User engagement tracking

## 🚀 Deployment

### Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

### Other Platforms

The package works with any platform that supports Next.js:

- Netlify
- Railway
- DigitalOcean App Platform
- AWS Amplify

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

## 🆘 Support

- 📚 [Documentation]
- 🐛 [Issues]
- 💬 [Discussions]

## 🎯 Roadmap

- [ ] Image optimization
- [ ] SEO improvements
- [ ] Email newsletter integration
- [ ] Comment system
- [ ] Social media sharing
- [ ] Multi-language support
- [ ] Advanced analytics
- [ ] API endpoints

---