create-nextjs-cms 0.5.67 → 0.5.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.5.67",
+  "version": "0.5.69",
   "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]/page.tsx

@@ -0,0 +1,36 @@
+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.pluginId, plugin.component)
+    if (!PluginComponent) {
+        notFound()
+    }
+
+    return <PluginComponent />
+}

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+import { pluginServerLoaders } from 'nextjs-cms/plugins/server'
+
+export type PluginServerComponent = (props?: Record<string, unknown>) => ReactNode | Promise<ReactNode>
+
+export type PluginServerModule = {
+    default?: PluginServerComponent
+    [key: string]: unknown
+}
+
+export const getPluginServerComponent = async (packageName: string, componentName: string | undefined) => {
+    const loader = pluginServerLoaders[packageName]
+    if (!loader) return null
+
+    const mod = await loader()
+    const resolved = componentName
+        ? (mod as Record<string, PluginServerComponent | undefined>)[componentName]
+        : mod.default
+
+    if (!resolved || typeof resolved !== 'function') {
+        return null
+    }
+
+    return resolved
+}

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

@@ -1,7 +1,44 @@
-import DashboardPage from '@/components/DashboardPage'
-
-export const dynamic = 'force-dynamic'
-
-export default async function Page() {
-    return <DashboardPage />
-}
+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/(rootLayout)/page.tsx

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

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

@@ -1,4 +1,3 @@
-import type { AppRouter } from 'nextjs-cms/api'
-import { createTRPCReact} from '@trpc/react-query'
-
-export const trpc = createTRPCReact<AppRouter>()
+'use client'
+
+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 { appRouter, createTRPCContext } 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 = (req: NextRequest) =>
+const handler = async (req: NextRequest) =>
     fetchRequestHandler({
         endpoint: '/api/trpc',
         req,
-        router: appRouter,
+        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/cms.config.ts

@@ -2,8 +2,7 @@ import type { CMSConfig } from 'nextjs-cms/core/config'
 import process from 'process'
 import { resolve } from 'path'
 
-export const config: CMSConfig = {
-    ui: {
+export const config: CMSConfig = {
         title: 'NEXT CMS Admin',
         defaultTheme: 'dark',
         logo: '/logo.svg',

package/templates/default/components/AdminCard.tsx

@@ -4,12 +4,13 @@ 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'
 import { trpc } from '@/app/_trpc/client'
 import Image from 'next/image'
-import { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from 'nextjs-cms/api'
 
 export default function AdminCard({
     admin,
@@ -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/AdminPrivilegeCard.tsx

@@ -5,7 +5,7 @@ import React, { useEffect } from 'react'
 import getString from 'nextjs-cms/translations'
 import { Badge } from '@/components/ui/badge'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from 'nextjs-cms/api'
 
 export default function AdminRoleCard({
     privilege,

package/templates/default/components/CategorySectionSelectInput.tsx

@@ -7,7 +7,7 @@ import SelectInputButtons from '@/components/SelectInputButtons'
 import getString from 'nextjs-cms/translations'
 import { trpc } from '@/app/_trpc/client'
 import { SelectOption } from 'nextjs-cms/core/fields'
-import { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from 'nextjs-cms/api'
 import { nanoid } from 'nanoid'
 
 type CategorySelect = RouterOutputs['categorySections']['get']['data']

package/templates/default/components/DashboardPage.tsx

@@ -11,7 +11,7 @@ import { trpc } from '@/app/_trpc/client'
 ChartJS.register(ArcElement, Tooltip, Legend)
 
 const DashboardPage = () => {
-    const { isLoading, isError, data, error } = trpc.cpanel.getData.useQuery()
+    const { isLoading, isError, data, error } = trpc.cpanelDashboard.getData.useQuery()
 
     useEffect(() => {}, [])
 

package/templates/default/components/EmailCard.tsx

@@ -14,7 +14,7 @@ export default function EmailCard({ email, action }: { email: EmailItem; action:
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
     const { toast } = useToast()
 
-    const deleteMutation = trpc.cpanel.deleteEmail.useMutation({
+    const deleteMutation = trpc.cpanelEmails.deleteEmail.useMutation({
         onError: (error) => {
             setModalResponse({
                 message: error.message,

package/templates/default/components/EmailPasswordForm.tsx

@@ -9,7 +9,7 @@ export default function EmailPasswordForm({ email, action }: { email: string; ac
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
 
     const { toast } = useToast()
-    const quotaMutation = trpc.cpanel.passwordChange.useMutation({
+    const quotaMutation = trpc.cpanelEmails.passwordChange.useMutation({
         onError: (error) => {
             setModal({
                 title: getString('error'),

package/templates/default/components/EmailQuotaForm.tsx

@@ -10,7 +10,7 @@ export default function EmailQuotaForm({ email, action }: { email: string; actio
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
     const { toast } = useToast()
 
-    const quotaMutation = trpc.cpanel.quotaChange.useMutation({
+    const quotaMutation = trpc.cpanelEmails.quotaChange.useMutation({
         onError: (error) => {
             setModal({
                 title: getString('error'),

package/templates/default/components/EmailsPage.tsx

@@ -11,7 +11,7 @@ import { trpc } from '@/app/_trpc/client'
 const EmailsPage = () => {
     const controller = new AbortController()
 
-    const { isLoading, isError, data, error, refetch } = trpc.cpanel.getEmails.useQuery()
+    const { isLoading, isError, data, error, refetch } = trpc.cpanelEmails.getEmails.useQuery()
 
     useEffect(() => {
         return () => {

package/templates/default/components/NewAdminForm.tsx

@@ -6,7 +6,7 @@ import { useToast } from '@/components/ui/use-toast'
 import { trpc } from '@/app/_trpc/client'
 import AdminRoleCard from '@/components/AdminPrivilegeCard'
 import { Button } from '@/components/ui/button'
-import { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from 'nextjs-cms/api'
 
 export default function NewAdminForm({
     privileges,

package/templates/default/components/NewEmailForm.tsx

@@ -10,7 +10,7 @@ export default function NewEmailForm({ action }: { action: any }) {
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
     const formRef = React.useRef<HTMLFormElement>(null)
     const { toast } = useToast()
-    const newEmailMutation = trpc.cpanel.createEmail.useMutation({
+    const newEmailMutation = trpc.cpanelEmails.createEmail.useMutation({
         onError: (error) => {
             setModal({
                 title: getString('error'),

package/templates/default/components/SectionItemCard.tsx

@@ -9,7 +9,7 @@ import { CardTitle, CardHeader, CardFooter, Card, CardContent } from '@/componen
 import { Button } from '@/components/ui/button'
 import { PersonIcon } from '@radix-ui/react-icons'
 import { trpc } from '@/app/_trpc/client'
-import { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from 'nextjs-cms/api'
 
 // Used to get elements of array types as types
 type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[] ? ElementType : never

package/templates/default/components/Sidebar.tsx

@@ -51,7 +51,7 @@ const Sidebar = (props: SidebarProps) => {
                         'justify-between p-4': true,
                     })}
                 >
-                    <span className='bg-gray-800 px-2 font-bold tracking-tighter text-amber-200 ring-1 ring-sky-500 transition-all duration-150 hover:bg-transparent hover:font-normal hover:tracking-[1em] hover:ring-0'>
+                    <span className='bg-gray-800 px-2 font-bold tracking-tighter text-amber-200 ring-1 ring-sky-500 transition-all duration-150 hover:bg-transparent hover:font-normal hover:tracking-[0.1em] hover:ring-0'>
                         nextjs-cms
                     </span>
                 </div>

package/templates/default/components/form/Form.tsx

@@ -8,7 +8,7 @@ import NewVariantComponent, { VariantHandles } from '@/components/NewVariantComp
 import classNames from 'classnames'
 import ProgressBar from '@/components/ProgressBar'
 import React, { RefObject, useEffect } from 'react'
-import { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from 'nextjs-cms/api'
 import * as z from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm, FormProvider } from 'react-hook-form'

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

@@ -8,4 +8,4 @@ export const revalidate = 0
 
 // @refresh reset
 
-export const configLastUpdated = 1766857134012
+export const configLastUpdated = 1767365990312

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 [
@@ -42,27 +13,16 @@ const nextConfig: NextConfig = {
     },
     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.67",
+    "nextjs-cms": "0.5.69",
     "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.67",
+    "nextjs-cms-kit": "0.5.69",
     "postcss": "^8.5.1",
     "prettier": "3.5.0",
     "raw-loader": "^4.0.2",

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

@@ -1,7 +0,0 @@
-import AnalyticsPage from '@/components/AnalyticsPage'
-
-export const dynamic = 'force-dynamic'
-
-export default async function Page() {
-    return <AnalyticsPage />
-}

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

@@ -1,6 +0,0 @@
-import EmailsPage from '@/components/EmailsPage'
-
-export const dynamic = 'force-dynamic'
-export default async function Page() {
-    return <EmailsPage />
-}