create-nextjs-cms 0.7.11 → 0.8.1

package/package.json

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

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

@@ -0,0 +1,167 @@
+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 type { DocumentFieldConfigType } 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 streams a document file from the server.
+ * It protects document files from being accessed directly and avoids
+ * the base64 payload size limits that occur with the tRPC approach.
+ * Used by the `<ProtectedDocument />` component.
+ */
+
+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 = (await getCMSConfig()).media.upload.path
+
+    // 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, return an error
+     */
+    if (!section || !section.name) {
+        return NextResponse.json(
+            {
+                error: 'File not found, or you do not have access to it.',
+            },
+            { status: 400 },
+        )
+    }
+
+    const fieldConfig = section.fields.find((field) => field.name === fieldName) as
+        | DocumentFieldConfigType
+        | undefined
+
+    if (!fieldConfig || typeof fieldConfig.build !== 'function') {
+        return NextResponse.json(
+            {
+                error: 'Invalid request',
+            },
+            { status: 400 },
+        )
+    }
+
+    const field = fieldConfig.build()
+
+    /**
+     * If field is not found, return an error
+     */
+    if (!field || !field.name || !field.extensions || field.extensions.length === 0) {
+        return NextResponse.json(
+            {
+                error: 'Invalid request',
+            },
+            { status: 400 },
+        )
+    }
+
+    /**
+     * Split the allowed extensions into an array
+     */
+    const documentAllowedExtensions = field.extensions
+    const dir = '.documents'
+    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 (!documentAllowedExtensions.includes(fileType.ext)) {
+        return NextResponse.json(
+            {
+                error: 'Invalid file type',
+            },
+            { status: 400 },
+        )
+    }
+
+    const fileStats = fs.statSync(pathToFile)
+    const fileSize = fileStats.size
+    const fileMimeType = fileType.mime
+
+    const data: ReadableStream<Uint8Array> = await streamFile(pathToFile)
+
+    return new NextResponse(data, {
+        headers: {
+            'Content-Length': fileSize.toString(),
+            'Content-Type': fileMimeType,
+            'Content-Disposition': 'inline',
+        },
+        status: 200,
+    })
+}

package/templates/default/components/ProtectedDocument.tsx

@@ -1,6 +1,4 @@
-import React, { useEffect } from 'react'
-import { trpc } from '@/app/_trpc/client'
-import { base64ToBlob } from 'nextjs-cms/utils'
+import React, { useEffect, useRef } from 'react'
 
 const ProtectedDocument = ({
     section,
@@ -9,7 +7,6 @@ const ProtectedDocument = ({
     width,
     height,
     className = 'rounded-3xl object-cover',
-    displayAs = 'base64',
 }: {
     section: string
     fieldName: string
@@ -17,42 +14,49 @@ const ProtectedDocument = ({
     width: number
     height: number
     className?: string
-    displayAs?: 'blob' | 'base64'
 }) => {
     const [srcUrl, setSrcUrl] = React.useState<string | null>(null)
-    const { data, error, isLoading } = trpc.files.getDocument.useQuery({
-        name: file,
-        sectionName: section,
-        fieldName: fieldName,
-    })
+    const blobUrlRef = useRef<string | null>(null)
 
     useEffect(() => {
-        if (!data) return
-        if (error) return
-        switch (displayAs) {
-            case 'blob':
-                setSrcUrl(
-                    URL.createObjectURL(
-                        base64ToBlob({
-                            base64: data.base64,
-                            contentType: data.mimeType,
-                            stripHeader: true,
-                        }),
-                    ),
-                )
-                break
-            case 'base64':
-                setSrcUrl(data.base64)
-                break
+        const controller = new AbortController()
+
+        const fetchDocument = async () => {
+            try {
+                const params = new URLSearchParams({
+                    name: file,
+                    sectionName: section,
+                    fieldName: fieldName,
+                })
+
+                const response = await fetch(`/api/document?${params.toString()}`, {
+                    signal: controller.signal,
+                })
+
+                if (!response.ok) return
+
+                const blob = await response.blob()
+                const url = URL.createObjectURL(blob)
+                blobUrlRef.current = url
+                setSrcUrl(url)
+            } catch (error) {
+                // Ignore abort errors from cleanup
+                if (error instanceof DOMException && error.name === 'AbortError') return
+            }
         }
 
+        fetchDocument()
+
         return () => {
-            setSrcUrl(null)
-            if (displayAs === 'blob' && srcUrl) {
-                URL.revokeObjectURL(srcUrl)
+            controller.abort()
+            if (blobUrlRef.current) {
+                URL.revokeObjectURL(blobUrlRef.current)
+                blobUrlRef.current = null
             }
+            setSrcUrl(null)
         }
-    }, [data])
+    }, [file, section, fieldName])
+
     return (
         <div className={className}>
             {srcUrl ? (
@@ -61,12 +65,6 @@ const ProtectedDocument = ({
                     className='max-w-full'
                     width={width}
                     height={height}
-                    onLoad={(e) => {
-                        // Revoke the blob url after the image is loaded
-                        if (displayAs === 'blob' && srcUrl) {
-                            URL.revokeObjectURL(srcUrl)
-                        }
-                    }}
                 />
             ) : (
                 <div className='animate-pulse bg-gray-500' style={{ width, height }} />

package/templates/default/components/SectionIcon.tsx

@@ -0,0 +1,8 @@
+'use client'
+
+import {DynamicIcon} from 'lucide-react/dynamic'
+import type { IconName } from 'lucide-react/dynamic'
+
+export default function SectionIcon({ name, className }: { name: string; className?: string }) {
+    return <DynamicIcon name={name as IconName} className={className} />
+}

package/templates/default/components/SidebarDropdownItem.tsx

@@ -3,8 +3,9 @@ import classNames from 'classnames'
 import { useState } from 'react'
 import { SidebarItemProps } from 'nextjs-cms/core/types'
 import { useAutoAnimate } from '@formkit/auto-animate/react'
-import { ChevronDownIcon, ChevronUpIcon, FolderIcon, PlusCircleIcon, PlusIcon } from 'lucide-react'
+import { ChevronDownIcon, ChevronUpIcon, FolderIcon, PlusIcon } from 'lucide-react'
 import { useI18n } from 'nextjs-cms/translations/client'
+import SectionIcon from '@/components/SectionIcon'
 
 export default function SidebarDropdownItem({ item, closeSideBar }: SidebarItemProps) {
     const t = useI18n()
@@ -22,8 +23,10 @@ export default function SidebarDropdownItem({ item, closeSideBar }: SidebarItemP
                 onClick={() => setOpen((prev) => !prev)}
             >
                 <li className='relative flex w-full items-center justify-between gap-2'>
-                    {/*<span>{item.icon}</span>*/}
-                    <span className='text-start'>{item.title}</span>
+                    <span className='flex items-center gap-2 text-start'>
+                        {item.icon && <SectionIcon name={item.icon} className='size-4' />}
+                        <span>{item.title}</span>
+                    </span>
                     <span>
                         {open ? (
                             <ChevronUpIcon className='h-5 w-5' />

package/templates/default/components/SidebarItem.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import classNames from 'classnames'
 import { SidebarItemProps } from 'nextjs-cms/core/types'
+import SectionIcon from '@/components/SectionIcon'
 
 export default function SidebarItem({ item, closeSideBar }: SidebarItemProps) {
     return (
@@ -14,7 +15,10 @@ export default function SidebarItem({ item, closeSideBar }: SidebarItemProps) {
                 'text-start': true, // RTL support
             })}
         >
-            <span>{item.title}</span>
+            <span className='flex items-center gap-2'>
+                {item.icon && <SectionIcon name={item.icon} className='size-4' />}
+                <span>{item.title}</span>
+            </span>
         </Link>
     )
 }

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

@@ -8,4 +8,4 @@ export const revalidate = 0
 
 // @refresh reset
 
-export const configLastUpdated = 1770880774270
+export const configLastUpdated = 1771768058991

package/templates/default/package.json

@@ -66,7 +66,7 @@
     "nanoid": "^5.1.2",
     "next": "16.1.1",
     "next-themes": "^0.4.6",
-    "nextjs-cms": "0.7.11",
+    "nextjs-cms": "0.8.1",
     "plaiceholder": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "qrcode": "^1.5.4",