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)

# 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

# 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:

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

2. Configure Tailwind CSS

Create tailwind.config.js:

/** @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:

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

3. Update Global CSS

Add to your app/globals.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
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:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here

📄 Usage

Basic Blog List

import { BlogList } from "zemenay-blog";

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

Blog with Search

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

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

Admin Panel

import { AdminPanel } from "zemenay-blog";

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

Analytics Dashboard

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

# 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:

/* 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