Core CMS Architecture

The /cms package is the heart of the THLSPress project. It's a modern Next.js application designed for performance, security, and extensibility.

Technology Stack

• Framework: Next.js (with App Router)
• Language: TypeScript
• Styling: Tailwind CSS with shadcn/ui components
• Database ORM: Prisma
• Authentication: NextAuth.js
• State Management: Zustand / React Context (for specific use cases)

Directory Structure (/cms)

The cms package follows the standard Next.js App Router conventions:

• app/: Contains all routes and UI components.
  • (auth-routes)/: A route group for all pages that require authentication (the admin panel).
    • admin-panel/: The main dashboard and settings pages.
  • (pages)/: A route group for all public-facing pages (e.g., the blog, homepage).
  • api/: Contains all API route handlers, organized by feature.
• components/: Shared React components used across the application (e.g., UI elements, layout components).
• lib/: Utility functions, helper scripts, and service classes (e.g., prisma.ts, auth.ts).
• prisma/:
  • schema.prisma: The central source of truth for the database schema. This core schema only contains tables essential for the base CMS. Modules extend this schema during installation.
• public/: Static assets like images and fonts.

Key Architectural Concepts

Database Schema

The core schema.prisma is designed to be minimal. It includes essential models such as:

• User & UserRole: For user management and permissions.
• Page & EditableComponent: For the visual page builder.
• Media: For the media library.
• Article: For the built-in blogging functionality.
• Secret: For secure storage of API keys and other secrets.

The schema is heavily commented with injection markers (e.g., // THLSPRESS:INJECT:USER). These markers are critical for the CLI, as they serve as anchor points for injecting new fields and relations when a module is installed.

Authentication and Authorization

Authentication is handled by NextAuth.js, providing a robust and secure session management system.

Authorization is implemented using a combination of:

1. Middleware (middleware.ts): Protects entire route segments (like /admin-panel) by checking for a valid session.
2. Server-Side Checks: API routes and Server Components verify user roles and permissions before performing sensitive operations, ensuring a secure backend.
3. PermissionGuard Component: A client-side component can be used to conditionally render UI elements based on the current user's role.