m14i-blogging

Modular blog system for React/Next.js - Split into focused packages for easy SaaS integration.

📦 Packages

| Package | Size | Peer Deps | Use Case | |---------|------|-----------|----------| | @m14i/blogging-core | ~50KB | 3 | Public blog frontend | | @m14i/blogging-admin | ~200KB | 11 | CMS with WYSIWYG editor | | @m14i/blogging-server | ~110KB | 1 | API routes, AI, SEO |

🚀 Quick Start

Read-only blog:

npm install @m14i/blogging-core react react-dom lucide-react

Full CMS:

npm install @m14i/blogging-admin \
  react react-dom lucide-react \
  @hello-pangea/dnd \
  @tiptap/react @tiptap/starter-kit \
  @tiptap/extension-{image,link,placeholder} \
  react-markdown remark-gfm rehype-stringify remark-parse remark-rehype unified

Server/API:

npm install @m14i/blogging-server @supabase/supabase-js

See INSTALL.md for complete integration guide.

🎯 Features

@m14i/blogging-core

• ✅ Public blog UI with multiple layouts
• ✅ SEO optimization built-in
• ✅ Search, filtering, pagination
• ✅ Supabase data layer
• ✅ Zero heavy dependencies

@m14i/blogging-admin

• ✅ Drag & drop layout builder
• ✅ WYSIWYG editor (TipTap)
• ✅ Rich content blocks (code, charts, PDFs, carousels)
• ✅ Media library (upload, gallery, stock photos)
• ✅ AI content generation

@m14i/blogging-server

• ✅ Next.js API route handlers
• ✅ AI content generation (Claude)
• ✅ SEO utilities (sitemap, RSS, robots.txt)
• ✅ Media upload with validation
• ✅ Rate limiting middleware

📖 Documentation

• Installation Guide - Fresh install for new projects
• Core Package - Public blog components
• Admin Package - CMS interface
• Server Package - API & utilities
• Docs - Detailed guides

🏗️ Architecture

@m14i/blogging-core          (Base package)
     ↑          ↑
     |          |
@m14i/blogging-admin    @m14i/blogging-server

Core = Types + public UI + client
Admin = Editor + builder (depends on core)
Server = API routes + AI (depends on core)

💻 Example

Public blog:

import { Blog } from '@m14i/blogging-core';
import '@m14i/blogging-core/styles';

export default function BlogPage() {
  return <Blog basePath="/blog" />;
}

Admin CMS:

import { BlogAdmin } from '@m14i/blogging-admin';
import '@m14i/blogging-admin/styles';

export default function AdminPage() {
  return <BlogAdmin basePath="/admin/blog" apiBasePath="/api/blog" />;
}

API route (server-side):

import { createPostsRoutes } from '@m14i/blogging-server';
import { createBlogClient } from '@m14i/blogging-core/client';

const blogClient = createBlogClient(supabase);
export const { GET, POST } = createPostsRoutes({ blogClient });

🔧 Development

# Install
pnpm install

# Build all
pnpm -r build

# Dev mode
pnpm -r dev

# Run example
cd example/app && pnpm dev

📊 Bundle Comparison

| Use Case | Before (monolith) | After (modular) | |----------|-------------------|-----------------| | Read-only blog | 15 peer deps | 3 peer deps | | node_modules | 672MB | ~50MB | | Integration | Complex | Simple |

🤝 Contributing

See CONTRIBUTING.md

📝 License

MIT

🔗 Links

• NPM: @m14i organization
• Storybook: Live demos
• Issues: GitHub Issues
• Repository: GitHub