Global CMS

The world's greatest CMS library for Next.js

Global CMS is a professional, multi-tenant Content Management System that you can install into any Next.js application. It provides a complete admin dashboard, 5 premium blog templates, and a powerful API — all ready to use out of the box.

✨ Features

• 🎨 5 Premium Templates — Professionally designed blog templates
• 📊 Full Admin Dashboard — Complete content management interface
• 🏢 Multi-Tenant — Support for multiple organizations/brands
• 🔐 Authentication Ready — Works with NextAuth.js
• 🎯 SEO Optimized — Meta tags, OpenGraph, and structured data
• 🌙 Dark Mode — All templates support light/dark themes
• 📱 Responsive — Mobile-first design across all components
• ⚡ Type Safe — Full TypeScript support

📦 Installation

npm install @mausoft/global-cms
# or
yarn add @mausoft/global-cms
# or
pnpm add @mausoft/global-cms

🚀 Quick Start

1. Initialize the CMS

Run the CLI to scaffold all necessary files:

npx @mausoft/global-cms init

This will:

• Add CMS models to your Prisma schema
• Create the admin dashboard pages
• Create the blog rendering pages
• Set up the API routes

2. Configure your Database

Add the CMS models to your database:

npx prisma db push

3. Start your app

npm run dev

Visit http://localhost:3000/admin to access your dashboard!

📚 Usage

Blog Renderer

Display blog posts with premium templates:

import { BlogRenderer } from '@mausoft/global-cms/templates'

export default function BlogPage({ blog, settings }) {
  return (
    <BlogRenderer 
      blog={blog} 
      settings={settings}
      templateOverride="cyberpunk" // Optional: override template
    />
  )
}

Blog List

Display a list of blog posts:

import { BlogListRenderer } from '@mausoft/global-cms/templates'

export default function BlogListPage({ blogs, settings }) {
  return (
    <BlogListRenderer 
      blogs={blogs} 
      settings={settings}
      basePath="/blog"
    />
  )
}

API Handler

Create a single API route to handle all CMS operations:

// app/api/cms/[...cms]/route.ts
import { createCMSHandler } from '@mausoft/global-cms/api'
import prisma from '@/lib/prisma'
import { authOptions } from '@/lib/auth'

export const { GET, POST, PUT, PATCH, DELETE } = createCMSHandler({
  prisma,
  authOptions,
})

Admin Dashboard

Wrap your admin pages with the dashboard layout:

// app/admin/layout.tsx
import { CMSDashboard, Providers } from '@mausoft/global-cms/admin'

export default function AdminLayout({ children }) {
  return (
    <Providers>
      <CMSDashboard>
        {children}
      </CMSDashboard>
    </Providers>
  )
}

🎨 Templates

Global CMS includes 5 professionally designed templates:

1. Minimalist Editorial

Clean, typography-focused design inspired by Medium and Substack.

• Reading progress indicator
• Elegant serif typography
• Perfect for long-form content

2. Tech Bold

Vibrant, modern design with gradients and animations.

• Featured posts highlight
• Dark mode default
• Glowing accent effects

3. Visual Storyteller

Visual-first design with full-bleed images.

• Masonry grid layout
• Immersive hero sections
• Great for portfolios

4. Corporate Trust

Professional, business-focused design.

• Table of contents
• Author bio cards
• Breadcrumb navigation

5. Cyberpunk Glass

Futuristic design with glassmorphism and neon accents.

• Animated backgrounds
• Scanline effects
• Terminal-style typography

Using Templates Directly

import { MinimalistBlogView, TechBoldListView } from '@mausoft/global-cms/templates'

// Use a specific template
<MinimalistBlogView blog={blog} settings={settings} />

// Or the list view
<TechBoldListView blogs={blogs} basePath="/blog" />

🔧 Configuration

Organization Settings

Templates can be customized through organization settings:

const settings = {
  templateId: 'tech-bold',
  primaryColor: '#6366f1',
  accentColor: '#8b5cf6',
  darkMode: true,
  seo: {
    defaultTitle: 'My Blog',
    defaultDescription: 'Welcome to my blog',
  },
  social: {
    twitter: '@myhandle',
    linkedin: 'company/mycompany',
  },
}

Custom Templates

You can register your own templates:

import { registerTemplate } from '@mausoft/global-cms/templates'

registerTemplate('my-template', {
  info: {
    id: 'my-template',
    name: 'My Custom Template',
    description: 'A custom template',
    features: ['Feature 1', 'Feature 2'],
    category: 'custom',
  },
  BlogView: MyBlogComponent,
  ListView: MyListComponent,
})

📋 Prisma Schema

The CMS uses these models (added automatically via CLI):

model Organization {
  id        String   @id @default(uuid())
  name      String
  slug      String   @unique
  logo      String?
  settings  Json?
  // ... relations
}

model Blog {
  id             String     @id @default(uuid())
  title          String
  slug           String
  content        String
  excerpt        String?
  featuredImage  String?
  status         BlogStatus
  // ... relations
}

model User {
  id       String @id @default(uuid())
  email    String @unique
  name     String
  role     Role
  // ... relations
}

🔐 Authentication

Global CMS is designed to work with NextAuth.js. Configure your auth options:

// lib/auth.ts
export const authOptions = {
  providers: [...],
  callbacks: {
    session: ({ session, token }) => ({
      ...session,
      user: {
        ...session.user,
        id: token.id,
        role: token.role,
        organizationId: token.organizationId,
      },
    }),
  },
}

🌐 Multi-Tenancy

Global CMS supports multi-tenant architecture:

• Organizations — Each tenant has their own organization
• Domains — Map custom domains to organizations
• Isolated Content — Blogs are scoped to organizations
• Role-Based Access — SUPER_ADMIN and ADMIN roles

📖 API Reference

Endpoints

When using createCMSHandler, these endpoints are available:

| Method | Endpoint | Description | |--------|----------|-------------| | GET | /api/cms/blogs | List all blogs | | GET | /api/cms/blogs/:id | Get single blog | | POST | /api/cms/blogs | Create blog | | PATCH | /api/cms/blogs/:id | Update blog | | DELETE | /api/cms/blogs/:id | Delete blog | | GET | /api/cms/organizations | List organizations | | POST | /api/cms/organizations | Create organization | | GET | /api/cms/public/blogs?org=slug | Public blog list | | GET | /api/cms/public/blogs/:slug?org=slug | Public blog detail |

🛠️ TypeScript

Full TypeScript support with exported types:

import type { 
  Blog, 
  Organization, 
  TemplateId,
  BlogRendererProps,
} from '@mausoft/global-cms'

📄 License

MIT © Mausoft