create-nextjs-cms 0.5.8

package/templates/default/app/api/submit/section/item/[slug]/route.ts

@@ -0,0 +1,63 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { EditSubmit } from 'nextjs-cms/core/submit'
+import auth from 'nextjs-cms/auth'
+
+export async function PUT(request: NextRequest, { params }: { params: Promise<{ slug: string }> }) {
+    const session = await auth()
+    const { slug: itemId } = await params
+
+    if (!session || !session.user) {
+        return NextResponse.json(
+            {
+                error: 'Access token not provided',
+            },
+            { status: 401 },
+        )
+    }
+
+    if (itemId === null) {
+        return NextResponse.json(
+            {
+                error: 'Item id not provided',
+            },
+            { status: 401 },
+        )
+    }
+
+    const user = session.user
+    const formData = await request.formData()
+    const sectionName = formData.get('sectionName') as string | null
+
+    if (!sectionName) {
+        return NextResponse.json(
+            {
+                error: 'Section name not provided',
+            },
+            { status: 400 },
+        )
+    }
+
+    const submit = new EditSubmit({
+        itemId: itemId as string,
+        sectionName,
+        user,
+        postData: formData,
+    })
+
+    await submit.initialize()
+    await submit.submit()
+    if (submit.error) {
+        return NextResponse.json(
+            {
+                error: submit.errorMessage,
+            },
+            { status: 400 },
+        )
+    }
+    return NextResponse.json(
+        {
+            message: 'Section item submitted successfully',
+        },
+        { status: 200 },
+    )
+}

package/templates/default/app/api/submit/section/item/route.ts

@@ -0,0 +1,53 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { NewSubmit } from 'nextjs-cms/core/submit'
+import auth from 'nextjs-cms/auth'
+
+export async function POST(request: NextRequest) {
+    const session = await auth()
+
+    if (!session || !session.user) {
+        return NextResponse.json(
+            {
+                error: 'Access token not provided',
+            },
+            { status: 401 },
+        )
+    }
+
+    const user = session.user
+    const formData = await request.formData()
+    const sectionName = formData.get('sectionName') as string | null
+
+    if (!sectionName) {
+        return NextResponse.json(
+            {
+                error: 'Section name not provided',
+            },
+            { status: 400 },
+        )
+    }
+
+    const submit = new NewSubmit({
+        sectionName,
+        user,
+        postData: formData,
+    })
+
+    await submit.initialize()
+    await submit.submit()
+    if (submit.error) {
+        return NextResponse.json(
+            {
+                error: submit.errorMessage,
+            },
+            { status: 400 },
+        )
+    }
+
+    return NextResponse.json(
+        {
+            message: 'Section item submitted successfully',
+        },
+        { status: 200 },
+    )
+}

package/templates/default/app/api/submit/section/simple/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { SimpleSectionSubmit } from 'nextjs-cms/core/submit'
+import auth from 'nextjs-cms/auth'
+
+export async function PUT(request: NextRequest) {
+    const session = await auth()
+
+    if (!session || !session.user) {
+        return NextResponse.json(
+            {
+                error: 'Access token not provided',
+            },
+            { status: 401 },
+        )
+    }
+
+    const user = session.user
+    const formData = await request.formData()
+    const sectionName = formData.get('sectionName') as string | null
+
+    if (!sectionName) {
+        return NextResponse.json(
+            {
+                error: 'Section name not provided',
+            },
+            { status: 400 },
+        )
+    }
+
+    const submit = new SimpleSectionSubmit({
+        itemId: '1',
+        sectionName,
+        user,
+        postData: formData,
+    })
+
+    await submit.initialize()
+    await submit.submit()
+    if (submit.error) {
+        return NextResponse.json(
+            {
+                error: submit.errorMessage,
+            },
+            { status: 400 },
+        )
+    }
+
+    return NextResponse.json(
+        {
+            message: 'Section item submitted successfully',
+        },
+        { status: 200 },
+    )
+}

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

@@ -0,0 +1,33 @@
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
+import { appRouter, createTRPCContext } from 'nextjs-cms/api'
+import { NextRequest } from 'next/server'
+
+/**
+ * This wraps the `createContext` helper and provides the required context for the tRPC API when
+ * handling a HTTP request (e.g. when you make requests from Client Components).
+ */
+
+const context = async (req: NextRequest) => {
+    return createTRPCContext({
+        req: req,
+    })
+}
+
+const handler = (req: NextRequest) =>
+    fetchRequestHandler({
+        endpoint: '/api/trpc',
+        req,
+        router: appRouter,
+        createContext: () => context(req),
+        /*onError(opts) {
+            return opts.error
+        },*/
+        onError:
+            process.env.NODE_ENV === 'development'
+                ? ({ path, error }) => {
+                      console.error(`❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`)
+                  }
+                : undefined,
+    })
+
+export { handler as GET, handler as POST }

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

@@ -0,0 +1,174 @@
+import { NextRequest, NextResponse } from 'next/server'
+import path from 'path'
+import fs from 'fs'
+import { readChunk } from 'read-chunk'
+import { fileTypeFromBuffer } from 'file-type'
+import { SectionFactory } from 'nextjs-cms/core/factories'
+import { FileField } from 'nextjs-cms/core/fields'
+import auth from 'nextjs-cms/auth'
+import { sanitizeFileName, sanitizeFolderOrFileName } from 'nextjs-cms/utils'
+import { streamFile } from 'nextjs-cms/api/helpers'
+import { getCMSConfig } from 'nextjs-cms/core/config'
+
+/**
+ * This route handler is used to stream a video file from the server
+ * It's used to protect the video files from being accessed directly
+ * It's being used in the `<ProtectedVideo />` component
+ * @param request
+ * @constructor
+ */
+
+export async function GET(request: NextRequest) {
+    const session = await auth()
+    const searchParams = request.nextUrl.searchParams
+
+    const name = searchParams.get('name')
+    const sectionName = searchParams.get('sectionName')
+    const fieldName = searchParams.get('fieldName')
+
+    if (!name || !sectionName || !fieldName) {
+        return NextResponse.json(
+            {
+                error: 'Invalid request',
+            },
+            { status: 400 },
+        )
+    }
+
+    // Check if the session is valid
+    if (!session || !session.user) {
+        return NextResponse.json(
+            {
+                error: 'Invalid token',
+            },
+            { status: 401 },
+        )
+    }
+
+    const uploadsFolder: string = getCMSConfig().files.upload.uploadPath
+
+    // Sanitize the inputs
+    const sanitizedFolder = sanitizeFolderOrFileName(sectionName)
+    const sanitizedName = sanitizeFileName(name)
+    /**
+     * Check the section and the field name, and get the allowed extensions,
+     *  while also checking if the user has access to the section
+     */
+    const section = await SectionFactory.getSectionForAdmin({
+        name: sanitizedFolder,
+        admin: { id: session.user.id },
+    })
+
+    /**
+     * If the check fails, throw an error
+     */
+    if (!section || !section.name) {
+        return NextResponse.json(
+            {
+                error: 'Invalid file path',
+            },
+            { status: 400 },
+        )
+    }
+
+    const fieldInfo = section.fields.find((field) => field.name === fieldName) as FileField
+
+    /**
+     * If field is not found, throw an error
+     */
+    if (!fieldInfo || !fieldInfo.name || !fieldInfo.extensions || fieldInfo.extensions.length === 0) {
+        return NextResponse.json(
+            {
+                error: 'Invalid request',
+            },
+            { status: 400 },
+        )
+    }
+
+    /**
+     * Split the allowed extensions into an array
+     */
+    const videoAllowedExtensions = fieldInfo.extensions
+    const dir = '.videos'
+    const pathToFile = path.join(uploadsFolder, dir, sanitizedFolder, sanitizedName)
+    /**
+     * First, check if the file exists
+     */
+    if (!fs.existsSync(pathToFile)) {
+        return NextResponse.json(
+            {
+                error: 'File not found',
+            },
+            { status: 404 },
+        )
+    }
+
+    /**
+     * Read the first 4100 bytes of the file
+     */
+    const chunkBuffer = await readChunk(pathToFile, { length: 4100 })
+    /**
+     * Get the file type from the buffer
+     */
+    const fileType = await fileTypeFromBuffer(chunkBuffer)
+
+    /**
+     * If the file type is invalid, return an error
+     */
+    if (!fileType) {
+        return NextResponse.json(
+            {
+                error: 'Invalid file type',
+            },
+            { status: 400 },
+        )
+    }
+
+    /**
+     * Check if the file type is allowed
+     */
+    if (!videoAllowedExtensions.includes(fileType.ext)) {
+        return NextResponse.json(
+            {
+                error: 'Invalid file type',
+            },
+            { status: 400 },
+        )
+    }
+
+    const fileStats = fs.statSync(pathToFile)
+    const range = request.headers.get('range')
+    const videoSize = fileStats.size
+    const videoMimeType = fileType.mime
+
+    let res = null
+    if (range) {
+        const parts = range.replace(/bytes=/, '').split('-')
+        const start = parseInt(parts[0] ?? '0', 10)
+        const end = parts[1] ? parseInt(parts[1], 10) : videoSize - 1
+        const chunkSize = end - start + 1
+
+        const data: ReadableStream<Uint8Array> = await streamFile(pathToFile, { start, end })
+
+        res = new NextResponse(data, {
+            headers: {
+                'Content-Range': `bytes ${start}-${end}/${videoSize}`,
+                'Accept-Ranges': 'bytes',
+                'Content-Length': chunkSize.toString(),
+                'Content-Type': videoMimeType,
+            },
+            status: 206,
+        })
+    } else {
+        const data: ReadableStream<Uint8Array> = await streamFile(pathToFile)
+        res = new NextResponse(data, {
+            headers: {
+                'Content-Length': videoSize.toString(),
+                'Content-Type': videoMimeType,
+            },
+            status: 200,
+        })
+    }
+
+    return res
+}

package/templates/default/app/dictionaries.ts

@@ -0,0 +1,14 @@
+import 'server-only'
+
+const dictionaries: Record<string, () => Promise<any>> = {
+    en: () => import('@/dictionaries/en.json').then((module) => module.default),
+    ar: () => import('@/dictionaries/ar.json').then((module) => module.default),
+    // DefaultS to Arabic
+    default: () => import('@/dictionaries/ar.json').then((module) => module.default),
+}
+export const getDictionary = async (locale: string) => {
+    const dictionary = dictionaries[locale]
+    if (dictionary) {
+        return dictionary()
+    }
+}

package/templates/default/app/layout.tsx

@@ -0,0 +1,28 @@
+import { Inter } from 'next/font/google'
+import '@/styles/globals.css'
+import type { Metadata } from 'next'
+import { cn } from 'nextjs-cms/utils'
+import { ThemeProvider } from '@/components/ThemeProvider'
+import Providers from '@/app/providers'
+
+export const metadata: Metadata = {
+    title: 'LAZEMNI CMS',
+    description: 'LAZEMNI CMS',
+}
+
+const inter = Inter({
+    subsets: ['latin'],
+    variable: '--font-sans',
+})
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang='en' suppressHydrationWarning>
+            <body className={cn('min-h-screen bg-background font-sans antialiased', inter.variable)}>
+                <ThemeProvider attribute='class' defaultTheme='dark' enableSystem disableTransitionOnChange>
+                    <Providers>{children}</Providers>
+                </ThemeProvider>
+            </body>
+        </html>
+    )
+}

package/templates/default/app/providers.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import { QueryClient, QueryClientProvider, defaultShouldDehydrateQuery } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { ModalProvider } from '@/context/ModalProvider'
+import { trpc } from '@/app/_trpc/client'
+import { httpBatchLink, loggerLink } from '@trpc/client'
+import SuperJSON from 'superjson'
+import { useState } from 'react'
+import { getCsrfToken, SessionProvider, refreshTokenLink } from 'nextjs-cms/auth/react'
+
+function MakeTrpcClient() {
+    const [trpcClient] = useState(() =>
+        trpc.createClient({
+            links: [
+                /**
+                 * The refresh token link will automatically refresh the access token if it's expired.
+                 * It fetches the new access token using the refresh token by calling the `/api/auth/refresh` endpoint.
+                 */
+                refreshTokenLink(),
+                /**
+                 * The logger link will log all the operations that are being sent to the server.
+                 * @see https://trpc.io/docs/client/links/loggerLink
+                 */
+                loggerLink({
+                    enabled: (op) =>
+                        process.env.NODE_ENV === 'development' ||
+                        (op.direction === 'down' && op.result instanceof Error),
+                }),
+
+                /**
+                 * The HTTP batch link is used to send multiple operations in a single HTTP request,
+                 * but doesn't wait for all the responses of the batch to be ready,
+                 * and streams the responses as soon as any data is available.
+                 * @see https://trpc.io/docs/client/links/httpBatchStreamLink
+                 *
+                 * TODO: The stream link is somehow causing empty responses before the actual response!
+                 */
+                /*unstable_httpBatchStreamLink({
+                    transformer: superjson,
+                    url: '/api/trpc',
+                    // You can pass any HTTP headers you wish here
+                    async headers() {
+                        const headers = new Headers()
+                        headers.set('x-trpc-source', 'nextjs-react')
+                        headers.set('Authorization', `Bearer ${authStore.state.accessToken}`)
+                        return headers
+                    },
+                }),*/
+
+                /**
+                 * The HTTP batch link is used to send multiple operations in a single HTTP request.
+                 * @see https://trpc.io/docs/client/links/httpBatchLink
+                 */
+                httpBatchLink({
+                    transformer: SuperJSON,
+                    url: '/api/trpc',
+                    // You can pass any HTTP headers you wish here
+                    async headers(op) {
+                        const headers = new Headers()
+                        /**
+                         * Check if there are any mutations in the operations list
+                         */
+                        if (op.opList.some((o) => o.type === 'mutation')) {
+                            /**
+                             * Get the CSRF token, and set it in the headers
+                             */
+                            const csrfToken = await getCsrfToken()
+                            headers.set('x-csrf-token', csrfToken)
+                        }
+
+                        headers.set('x-trpc-source', 'nextjs-react')
+
+                        return headers
+                    },
+                }),
+            ],
+        }),
+    )
+
+    return trpcClient
+}
+
+function makeQueryClient() {
+    return new QueryClient({
+        defaultOptions: {
+            queries: {
+                // With SSR, we usually want to set some default staleTime
+                // above 0 to avoid refetching immediately on the client
+                /**
+                 * It's better to leave the staleTime to 0 to always fetch the latest data in a cms
+                 */
+                // staleTime: 3 * 1000,
+                /**
+                 * We want to refetch on window focus in development only
+                 */
+                refetchOnWindowFocus: process.env.NODE_ENV === 'development' ? true : false, 
+                retry: 1, // default: 3
+            },
+            dehydrate: {
+                serializeData: SuperJSON.serialize,
+                shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
+            },
+            hydrate: {
+                deserializeData: SuperJSON.deserialize,
+            },
+        },
+    })
+}
+
+let browserQueryClient: QueryClient | undefined = undefined
+
+function getQueryClient() {
+    if (typeof window === 'undefined') {
+        // Server: always make a new query client
+        return makeQueryClient()
+    } else {
+        // Browser: make a new query client if we don't already have one
+        // This is very important so we don't re-make a new client if React
+        // suspends during the initial render. This may not be needed if we
+        // have a suspense boundary BELOW the creation of the query client
+        if (!browserQueryClient) browserQueryClient = makeQueryClient()
+        return browserQueryClient
+    }
+}
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+    // NOTE: Avoid useState when initializing the query client if you don't
+    //       have a suspense boundary between this and the code that may
+    //       suspend because React will throw away the client on the initial
+    //       render if it suspends and there is no boundary
+    const queryClient = getQueryClient()
+    // const trpcClient = getTrpcClient()
+    const trpcClient = MakeTrpcClient()
+
+    return (
+        <QueryClientProvider client={queryClient}>
+            <trpc.Provider client={trpcClient} queryClient={queryClient}>
+                <SessionProvider
+                    refetchOnWindowFocus={false}
+                    refetchInterval={0}
+                    refetchWhenOffline={false}>
+                    <ModalProvider>
+                        {children}
+                    </ModalProvider>
+                </SessionProvider>
+                <ReactQueryDevtools initialIsOpen={false} />
+            </trpc.Provider>
+        </QueryClientProvider>
+    )
+}

package/templates/default/cli.ts

@@ -0,0 +1,4 @@
+import 'dotenv/config'
+import program from 'nextjs-cms-kit'
+
+program.parse(process.argv)