create-nextjs-cms 0.5.68 → 0.5.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.5.68",
+  "version": "0.5.70",
   "private": false,
   "type": "module",
   "bin": {
@@ -29,8 +29,8 @@
     "tsx": "^4.20.6",
     "typescript": "^5.9.2",
     "@lzcms/eslint-config": "0.3.0",
-    "@lzcms/prettier-config": "0.1.0",
-    "@lzcms/tsconfig": "0.1.0"
+    "@lzcms/tsconfig": "0.1.0",
+    "@lzcms/prettier-config": "0.1.0"
   },
   "prettier": "@lzcms/prettier-config",
   "scripts": {

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/.plugin-registry.mjs

@@ -0,0 +1,7 @@
+// AUTO GENERATED FILE, DO NOT DELETE OR EDIT
+// THIS FILE IS GENERATED BY THE PLUGIN SYSTEM
+export const _pluginNamesMap = {
+    'cpanel-dashboard': '@nextjs-cms-plugins/cpanel-dashboard/server',
+    'cpanel-emails': '@nextjs-cms-plugins/cpanel-emails/server',
+    'google-analytics': '@nextjs-cms-plugins/google-analytics/server',
+}

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/page.tsx

@@ -1,41 +1,36 @@
-import { notFound, redirect } from 'next/navigation'
-import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
-import { findPluginRouteByPath } from 'nextjs-cms/plugins/server'
-import PluginClient from './PluginClient'
-
-export const dynamic = 'force-dynamic'
-type Params = Promise<{ slug?: string[] }>
-
-export default async function Page(props: { params: Params }) {
-    const params = await props.params
-    const slug = params.slug ?? []
-
-    if (slug[0] === 'plugin') {
-        const rest = slug.slice(1)
-        if (rest.length === 0) {
-            const routes = await api.plugins.routes()
-            const target = routes[0]?.path
-            if (target) {
-                redirect(target)
-            }
-            notFound()
-        }
-        redirect(`/${rest.join('/')}`)
-    }
-
-    const path = `/${slug.join('/')}`
-    const route = await findPluginRouteByPath(path)
-    if (!route) {
-        notFound()
-    }
-
-    if (route.prefetch) {
-        await route.prefetch({ api })
-    }
-
-    return (
-        <HydrateClient>
-            <PluginClient packageName={route.pluginId} component={route.component} />
-        </HydrateClient>
-    )
-}
+import { notFound } from 'next/navigation'
+import auth from 'nextjs-cms/auth'
+import { getAdminPrivileges } from 'nextjs-cms/api/helpers'
+import { findPluginRouteByPath } from 'nextjs-cms/plugins/server'
+import { getPluginServerComponent } from './plugin-server-registry'
+
+export const dynamic = 'force-dynamic'
+type Params = Promise<{ slug?: string[] }>
+
+export default async function Page(props: { params: Params }) {
+    const params = await props.params
+    const slug = params.slug ?? []
+
+    const path = `/${slug.join('/')}`
+    const session = await auth()
+    if (!session?.user) {
+        notFound()
+    }
+
+    const plugin = await findPluginRouteByPath(path)
+    if (!plugin) {
+        notFound()
+    }
+
+    const privilegeSet = await getAdminPrivileges(session.user.id)
+    if (!privilegeSet.has(plugin.pluginName)) {
+        notFound()
+    }
+
+    const PluginComponent = await getPluginServerComponent(plugin.pluginRegistryName, plugin.component)
+    if (!PluginComponent) {
+        notFound()
+    }
+
+    return <PluginComponent />
+}

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/plugin-server-registry.ts

@@ -0,0 +1,21 @@
+import dynamic from 'next/dynamic'
+import { _pluginNamesMap } from './.plugin-registry.mjs'
+
+export const pluginNamesMap: Record<string, string> = {
+    ..._pluginNamesMap,
+    // A workaround to avoid importing error if no plugins are installed
+    blank: 'nextjs-cms/plugins/blank-component',
+}
+
+export const getPluginServerComponent = async (registryName: string, componentName: string | undefined) => {
+    const pluginName = pluginNamesMap[registryName]
+    const ClientComponent = dynamic(
+        () =>
+            import(pluginName ?? 'nextjs-cms/plugins/blank-component').then((mod) =>
+                componentName ? mod[componentName] : mod.default,
+            ),
+        { ssr: true },
+    )
+
+    return ClientComponent
+}

package/templates/default/app/(rootLayout)/dashboard/page.tsx

@@ -0,0 +1,44 @@
+export const dynamic = 'force-dynamic'
+
+export default function DashboardPage() {
+    return (
+        <div className='w-full'>
+            <div className='bg-linear-to-r from-amber-200 via-orange-200 to-rose-200 p-8 text-foreground dark:from-amber-900 dark:via-orange-900 dark:to-rose-900'>
+                <h1 className='text-3xl font-extrabold tracking-tight'>Welcome to Mission Control</h1>
+                <p className='mt-2 text-base text-muted-foreground'>
+                    Your CMS is ready. Chart a course, publish boldly, and keep the lights green.
+                </p>
+            </div>
+
+            <div className='space-y-6 p-6'>
+                <section className='rounded-lg border bg-card p-6 text-card-foreground shadow-sm'>
+                    <h2 className='text-xl font-semibold'>Today&apos;s focus</h2>
+                    <p className='mt-2 text-sm text-muted-foreground'>
+                        Start with one small win: verify a section, ship a quick update, or polish a headline.
+                    </p>
+                </section>
+
+                <section className='grid gap-4 md:grid-cols-3'>
+                    <div className='rounded-lg border bg-card p-4 text-card-foreground shadow-sm'>
+                        <div className='text-sm font-semibold'>Ship with confidence</div>
+                        <div className='mt-2 text-sm text-muted-foreground'>
+                            Keep changes tight and reversible. Small releases, fast feedback.
+                        </div>
+                    </div>
+                    <div className='rounded-lg border bg-card p-4 text-card-foreground shadow-sm'>
+                        <div className='text-sm font-semibold'>Stay organized</div>
+                        <div className='mt-2 text-sm text-muted-foreground'>
+                            Group your content by intent, not just by type.
+                        </div>
+                    </div>
+                    <div className='rounded-lg border bg-card p-4 text-card-foreground shadow-sm'>
+                        <div className='text-sm font-semibold'>Delight users</div>
+                        <div className='mt-2 text-sm text-muted-foreground'>
+                            A clean headline and a single strong image can do the heavy lifting.
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </div>
+    )
+}

package/templates/default/app/_trpc/client.ts

@@ -1,4 +1,3 @@
-import type { AppRouter } from 'nextjs-cms/api'
-import { createTRPCReact } from '@trpc/react-query'
+'use client'
 
-export const trpc = createTRPCReact<AppRouter>()
+export { trpc } from 'nextjs-cms/api/trpc/client'

package/templates/default/app/api/editor/photo/route.ts

@@ -2,6 +2,13 @@ import { NextRequest, NextResponse } from 'next/server'
 import sharp from 'sharp'
 import auth from 'nextjs-cms/auth'
 
+/**
+ * This route handler is used to use a photo in rich text editor
+ * It expects an image file in the request body
+ * It returns the base64 string of the image
+ * @param request
+ * @returns NextResponse with the base64 string of the image
+ */
 export async function POST(request: NextRequest) {
     const session = await auth()
 

package/templates/default/app/api/trpc/[trpc]/route.ts

@@ -1,5 +1,5 @@
 import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
-import { createTRPCContext, getAppRouter } from 'nextjs-cms/api'
+import { createTRPCContext, getAppRouter } from 'nextjs-cms/api'
 import { NextRequest } from 'next/server'
 
 /**
@@ -13,11 +13,11 @@ const context = async (req: NextRequest) => {
     })
 }
 
-const handler = async (req: NextRequest) =>
+const handler = async (req: NextRequest) =>
     fetchRequestHandler({
         endpoint: '/api/trpc',
         req,
-        router: await getAppRouter(),
+        router: await getAppRouter(),
         createContext: () => context(req),
         /*onError(opts) {
             return opts.error

package/templates/default/app/api/video/route.ts

@@ -65,7 +65,7 @@ export async function GET(request: NextRequest) {
     if (!section || !section.name) {
         return NextResponse.json(
             {
-                error: 'Invalid file path',
+                error: 'File not found, or you do not have access to it.',
             },
             { status: 400 },
         )

package/templates/default/components/AdminCard.tsx

@@ -4,6 +4,7 @@ import useModal from '@/hooks/useModal'
 import ProtectedImage from '@/components/ProtectedImage'
 import AdminEditPage from '@/components/AdminEditPage'
 import { useToast } from '@/components/ui/use-toast'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -76,28 +77,30 @@ export default function AdminCard({
                                     height={50}
                                     width={50}
                                     alt={admin.username}
-                                    className='rounded-full ring-2 ring-inset ring-amber-300'
+                                    className='rounded-full ring-2 ring-amber-300 ring-inset'
                                 />
                             )}
                         </div>
                         <div className='flex flex-col break-all'>
-                            <div className='text-sm font-medium text-foreground'>
+                            <div className='text-foreground text-sm font-medium'>
                                 <div className='font-bold'>{admin.username}</div>
                             </div>
                         </div>
                     </div>
                 </CardTitle>
             </CardHeader>
-            <CardContent>
-                <div className='flex flex-wrap gap-2'>
-                    {admin.roles &&
-                        admin.roles.length > 0 &&
-                        admin.roles.map((role, index: number) => (
-                            <Badge key={index} className='border-foreground' variant='secondary'>
-                                {role.sectionName} ({role.operations})
-                            </Badge>
-                        ))}
-                </div>
+            <CardContent className='p-1'>
+                <ScrollArea className='bg-accent/50 h-[100px] p-2' type='always'>
+                    <div className='flex flex-wrap gap-2'>
+                        {admin.roles &&
+                            admin.roles.length > 0 &&
+                            admin.roles.map((role, index: number) => (
+                                <Badge key={index} className='border-foreground/30' variant='outline'>
+                                    {role.sectionName} ({role.operations})
+                                </Badge>
+                            ))}
+                    </div>
+                </ScrollArea>
             </CardContent>
             <CardFooter className='flex flex-wrap gap-4'>
                 <Button

package/templates/default/components/form/helpers/_section-hot-reload.js

@@ -8,4 +8,4 @@ export const revalidate = 0
 
 // @refresh reset
 
-export const configLastUpdated = 1767359297387
+export const configLastUpdated = 1767626197465

package/templates/default/next.config.ts

@@ -1,36 +1,7 @@
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
-    serverExternalPackages: [
-        'esbuild',
-        'esbuild-register',
-        '@esbuild/win32-x64',
-        // optional: if you deploy to linux/mac too, include these:
-        '@esbuild/linux-x64',
-        '@esbuild/linux-arm64',
-        '@esbuild/darwin-x64',
-        '@esbuild/darwin-arm64',
-    ],
-    turbopack: {
-        rules: {
-            'esbuild.exe': {
-                loaders: ['raw-loader'],
-                as: 'executable',
-            },
-            '*.md': {
-                loaders: ['raw-loader'],
-                as: '*.js',
-            },
-        },
-    },
 
-    typescript: {
-        // !! WARN !!
-        // Dangerously allow production builds to successfully complete even if
-        // your project has type errors.
-        // !! WARN !!
-        ignoreBuildErrors: true,
-    },
     reactStrictMode: true,
     async rewrites() {
         return [
@@ -38,31 +9,24 @@ const nextConfig: NextConfig = {
                 source: '/browse/:section',
                 destination: '/browse/:section/1',
             },
+            {
+                source: '/',
+                destination: '/dashboard',
+            },
         ]
     },
     images: {
         formats: ['image/avif', 'image/webp'],
-        unoptimized: true,
-        remotePatterns: [
-            {
-                protocol: 'https',
-                hostname: 'lazemnicms.com',
-                port: '',
-                pathname: '/**',
-            },
-            {
-                protocol: 'https',
-                hostname: 'api.lazemnicms.com',
-                port: '',
-                pathname: '/**',
-            },
-            {
-                protocol: 'https',
-                hostname: 'images.lazemnicms.com',
-                port: '',
-                pathname: '/**',
-            },
-        ],
+        remotePatterns: [
+            // Use remotePatterns in your next.config.js file to allow images from specific external paths and block all others.
+            // https://nextjs.org/docs/app/api-reference/components/image#remotepatterns
+            // {
+            //     protocol: 'https',
+            //     hostname: 'example.com',
+            //     port: '',
+            //     pathname: '/**',
+            // },
+        ],
     },
 }
 

package/templates/default/package.json

@@ -64,7 +64,7 @@
     "nanoid": "^5.1.2",
     "next": "16.1.1",
     "next-themes": "^0.4.6",
-    "nextjs-cms": "0.5.68",
+    "nextjs-cms": "0.5.70",
     "plaiceholder": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "qrcode": "^1.5.4",
@@ -97,7 +97,7 @@
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.3",
     "fs-extra": "^11.3.3",
-    "nextjs-cms-kit": "0.5.68",
+    "nextjs-cms-kit": "0.5.70",
     "postcss": "^8.5.1",
     "prettier": "3.5.0",
     "raw-loader": "^4.0.2",

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/PluginClient.tsx

@@ -1,55 +0,0 @@
-'use client'
-
-import dynamic from 'next/dynamic'
-import React, { useMemo } from 'react'
-import { trpc } from '@/app/_trpc/client'
-import { getPluginClientLoader } from './plugin-registry'
-
-type PluginClientProps = {
-    packageName: string
-    component: string
-}
-
-const isComponentType = (value: unknown): value is React.ComponentType<any> => {
-    if (typeof value === 'function') return true
-    if (typeof value === 'object' && value !== null && '$$typeof' in value) return true
-    return false
-}
-
-export function PluginClient({ packageName, component }: PluginClientProps) {
-    const loader = getPluginClientLoader(packageName)
-    if (!loader) {
-        return <div className='text-destructive p-6 text-sm'>Plugin client package not registered: {packageName}</div>
-    }
-
-    const Component = useMemo(
-        () =>
-            dynamic(
-                async () => {
-                    const mod = await loader()
-                    const resolved =
-                        (mod.components && mod.components[component]) ||
-                        (mod as Record<string, React.ComponentType<any>>)[component] ||
-                        mod.default
-
-                    if (!resolved || !isComponentType(resolved)) {
-                        return {
-                            default: () => (
-                                <div className='text-destructive p-6 text-sm'>
-                                    Plugin component not found: {component}
-                                </div>
-                            ),
-                        }
-                    }
-
-                    return { default: resolved }
-                },
-                { ssr: false },
-            ),
-        [component, loader],
-    )
-
-    return <Component trpc={trpc} />
-}
-
-export default PluginClient

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/plugin-registry.ts

@@ -1,16 +0,0 @@
-import type { ComponentType } from 'react'
-
-export type PluginClientComponent = ComponentType<any>
-
-export type PluginClientModule = {
-    components?: Record<string, PluginClientComponent>
-    default?: unknown
-    [key: string]: unknown
-}
-
-export type PluginClientLoader = () => Promise<PluginClientModule>
-
-// Keep this list in sync with cms.config.ts and apps/cms/package.json.
-const pluginClientLoaders: Record<string, PluginClientLoader> = {}
-
-export const getPluginClientLoader = (packageName: string) => pluginClientLoaders[packageName]

package/templates/default/app/(rootLayout)/page.tsx

@@ -1,10 +0,0 @@
-import { redirect } from 'next/navigation'
-import { getPluginRoutes } from 'nextjs-cms/plugins/server'
-
-export const dynamic = 'force-dynamic'
-
-export default async function Home() {
-    const routes = await getPluginRoutes()
-    const target = routes[0]?.path ?? '/admins'
-    redirect(target)
-}