create-nextjs-cms 0.5.8

package/templates/default/CHANGELOG.md

@@ -0,0 +1,77 @@
+# cms
+
+## 0.5.8
+
+### Patch Changes
+
+- Updated dependencies
+    - nextjs-cms@0.5.8
+
+## 0.5.7
+
+### Patch Changes
+
+- Updated dependencies
+    - nextjs-cms@0.5.7
+
+## 0.5.6
+
+### Patch Changes
+
+- Updated dependencies
+    - nextjs-cms@0.5.6
+
+## 0.5.5
+
+### Patch Changes
+
+- Updated dependencies
+    - nextjs-cms@0.5.5
+
+## 0.5.4
+
+### Patch Changes
+
+- Updated dependencies
+    - nextjs-cms@0.5.4
+
+## 0.5.3
+
+### Patch Changes
+
+- Updated dependencies
+    - nextjs-cms@0.5.3
+
+## 0.5.2
+
+### Patch Changes
+
+- Updated dependencies
+    - nextjs-cms@0.5.2
+
+## 0.5.1
+
+### Patch Changes
+
+- Improved the create package.
+- Updated dependencies
+    - nextjs-cms@0.5.1
+
+## 0.5.0
+
+### Minor Changes
+
+- ff70c26: Refactored the next-cms to be one package.
+
+    Refactored and optimized all modules inside next-cms.
+
+    Added zod schemas to sections and fields classes and helper functions.
+
+    Added some props to the cms config.
+
+    Introduced unit testing and integration testing. (not done yet)
+
+### Patch Changes
+
+- Updated dependencies [ff70c26]
+    - nextjs-cms@0.5.0

package/templates/default/README.md

@@ -0,0 +1,45 @@
+This is the official repository for LZCMS
+
+LZCMS is an open-source content management system that is designed to be simple and easy to use. It is built with Next.js and Tailwind CSS.
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start adding sections to the cms by adding a new file in the `sections` directory. The file should end with `.section.ts` and should export a default object with the following properties:
+
+```tsx
+export default {
+  name: 'Section Name',
+  slug: 'section-name',
+  fields: [
+    {
+      name: 'Field Name',
+      slug: 'field-name',
+      type: 'text',
+      required: true,
+    },
+  ],
+};
+```
+
+
+## Learn More
+
+To learn more about LZCMS, take a look at the following documentation:
+
+- [LZCMS Documentation](https://lzcms.org/docs) - learn about lzcms features and API.
+
+You can check out [the LZCMS GitHub repository](https://github.com/lzcms/lzcms/) - your feedback and contributions are welcome!

package/templates/default/app/(auth)/auth/login/LoginPage.tsx

@@ -0,0 +1,175 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import getString from 'nextjs-cms/translations'
+import InfoCard from '@/components/InfoCard'
+import Link from 'next/link'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
+import { useTheme } from 'next-themes'
+import { login, useSession } from 'nextjs-cms/auth/react'
+
+type fromErrors = {
+    username?: string | null
+    password?: string | null
+    general?: string | null
+    [key: string]: any
+}
+
+export default function LoginPage() {
+    const session = useSession()
+    const searchParams = useSearchParams()
+    const router = useRouter()
+    const loginButtonRef = useRef<HTMLButtonElement>(null)
+    const formRef = useRef<HTMLFormElement>(null)
+    const { setTheme } = useTheme()
+
+    const handleSubmit = async (event: React.FormEvent<HTMLButtonElement>) => {
+        event.preventDefault()
+        if (loginButtonRef.current) {
+            loginButtonRef.current.disabled = true
+            loginButtonRef.current.innerHTML = getString('loading')
+        }
+        try {
+            await login({
+                username: formRef.current?.username.value,
+                password: formRef.current?.password.value,
+            })
+        } catch (error: any) {
+            if (loginButtonRef.current) {
+                loginButtonRef.current.disabled = false
+                loginButtonRef.current.innerHTML = getString('login')
+            }
+
+            if (!error.message) {
+                setFormErrors({
+                    general: getString('server_error'),
+                })
+            } else {
+                setFormErrors({ general: error.message })
+            }
+        }
+    }
+
+    const [formErrors, setFormErrors] = useState<fromErrors>({ username: null, password: null, general: null })
+
+    useEffect(() => {
+        if (session?.status === 'authenticated') {
+            const from = searchParams.get('callbackUrl')
+            if (from) {
+                router.push(from)
+            } else {
+                router.push('/')
+            }
+        }
+    }, [session])
+
+    return (
+        <>
+            <div className='fixed left-0 top-0 h-full w-full flex-1 flex-col justify-center overflow-auto bg-background px-6 py-12 text-foreground lg:px-8'>
+                <div className='flex w-full'>
+                    <Button
+                        variant='default'
+                        onClick={() => {
+                            setTheme((theme) => (theme === 'dark' ? 'light' : 'dark'))
+                        }}
+                        type='button'
+                        className='absolute end-10 top-10 rounded-full p-3 focus:outline-none'
+                    >
+                        <span className='sr-only'>Theme</span>
+                        <SunIcon className='hidden transition-all dark:block' aria-hidden='true' />
+                        <MoonIcon className='transition-all dark:hidden' aria-hidden='true' />
+                    </Button>
+                </div>
+                <div className='text-center sm:mx-auto sm:w-full sm:max-w-sm'>
+                    <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:text-foreground hover:ring-0'>
+                        LAZEMNI
+                    </span>
+                    <h2 className='mt-10 text-center text-2xl font-bold leading-9 tracking-tight'>
+                        {getString('login_to_your_account')}
+                    </h2>
+                </div>
+
+                <div className='mx-auto mt-10 w-full max-w-md rounded-lg bg-gradient-to-bl from-sky-50 to-green-50 p-12 shadow-lg ring-2 ring-inset ring-sky-400 dark:from-neutral-950 dark:to-neutral-800'>
+                    <form ref={formRef} className='space-y-6'>
+                        <div>
+                            <label htmlFor='username' className='block text-sm font-medium leading-6'>
+                                {getString('username')}
+                            </label>
+                            <div>
+                                <input
+                                    id='username'
+                                    name='username'
+                                    type='text'
+                                    placeholder={getString('username')}
+                                    required
+                                    className='block w-full rounded-md border-0 bg-background p-3 text-foreground shadow-sm outline-0 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
+                                />
+                            </div>
+                        </div>
+
+                        <div>
+                            <label htmlFor='password' className='block text-sm font-medium leading-6'>
+                                {getString('password')}
+                            </label>
+                            <div>
+                                <input
+                                    id='password'
+                                    name='password'
+                                    type='password'
+                                    placeholder={getString('password')}
+                                    required
+                                    className='block w-full rounded-md border-0 bg-background p-3 text-foreground shadow-sm outline-0 ring-1 ring-inset ring-sky-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
+                                />
+                            </div>
+                            <div className='mt-2 text-end'>
+                                <div className='text-sm'>
+                                    <Link href='#' className='font-semibold text-indigo-600 hover:text-indigo-500'>
+                                        {getString('forgot_password')}
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                        <div>
+                            <div className='flex items-center justify-between'>
+                                <div className='flex gap-2'>
+                                    <div className='flex items-center space-x-2'>
+                                        <Switch id='remember_me_check' name='rm' />
+                                        <Label htmlFor='remember_me_check'>{getString('remember_me')}</Label>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className='mt-2'></div>
+                        </div>
+
+                        <div>
+                            <Button
+                                ref={loginButtonRef}
+                                onClick={handleSubmit}
+                                type='submit'
+                                className='flex w-full justify-center rounded-md bg-gradient-to-r from-green-400 to-blue-500 font-extrabold hover:to-sky-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+                            >
+                                {getString('login')}
+                            </Button>
+                        </div>
+                    </form>
+                    {Object.keys(formErrors).map((key, index) => {
+                        if (formErrors[key]) {
+                            return (
+                                <div className='pt-3' key={index}>
+                                    <InfoCard
+                                        key={index}
+                                        result={{ key: 'danger', status: false, title: formErrors[key] }}
+                                    />
+                                </div>
+                            )
+                        }
+                    })}
+                </div>
+            </div>
+        </>
+    )
+}

package/templates/default/app/(auth)/auth/login/page.tsx

@@ -0,0 +1,12 @@
+import LoginPage from './LoginPage'
+import auth from 'nextjs-cms/auth'
+import { redirect } from 'next/navigation'
+
+// export const dynamic = 'force-dynamic'
+export default async function Page() {
+    const session = await auth()
+    if (session) {
+        redirect('/')
+    }
+    return <LoginPage />
+}

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

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

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

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

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

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

package/templates/default/app/(rootLayout)/browse/[section]/[page]/page.tsx

@@ -0,0 +1,7 @@
+import BrowsePage from '@/components/BrowsePage'
+type Params = Promise<{ section: string; page: string }>
+
+export default async function Page(props: { params: Params }) {
+    const params = await props.params
+    return <BrowsePage page={params.page} section={params.section} />
+}

package/templates/default/app/(rootLayout)/categorized/[section]/page.tsx

@@ -0,0 +1,7 @@
+import CategorizedSectionPage from '@/components/CategorizedSectionPage'
+type Params = Promise<{ section: string }>
+
+export default async function Page(props: { params: Params }) {
+    const params = await props.params
+    return <CategorizedSectionPage section={params.section} />
+}

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

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

package/templates/default/app/(rootLayout)/edit/[section]/[itemId]/page.tsx

@@ -0,0 +1,7 @@
+import ItemEditPage from '@/components/ItemEditPage'
+type Params = Promise<{ section: string; itemId: string }>
+
+export default async function Page(props: { params: Params }) {
+    const params = await props.params
+    return <ItemEditPage sectionType='has_items' section={params.section} itemId={params.itemId} />
+}

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

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

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

@@ -0,0 +1,5 @@
+import Layout from '@/components/Layout'
+
+export default async function CMSLayout({ children }: { children: React.ReactNode }) {
+    return <Layout>{children}</Layout>
+}

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

@@ -0,0 +1,10 @@
+import LoadingSpinners from '@/components/LoadingSpinners'
+
+export default function Loading() {
+    // You can add any UI inside Loading, including a Skeleton.
+    return (
+        <div className='p-20'>
+            <LoadingSpinners />
+        </div>
+    )
+}

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

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

package/templates/default/app/(rootLayout)/new/[section]/page.tsx

@@ -0,0 +1,7 @@
+import NewPage from '@/components/NewPage'
+type Params = Promise<{ section: string }>
+
+export default async function Page(props: { params: Params }) {
+    const params = await props.params
+    return <NewPage sectionType='has_items' section={params.section} />
+}

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import Dashboard from './dashboard/page'
+
+export const dynamic = 'force-dynamic'
+
+export default function Home() {
+    return <Dashboard />
+}

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

@@ -0,0 +1,7 @@
+import SectionPage from '@/components/SectionPage'
+type Params = Promise<{ section: string }>
+
+export default async function Page(props: { params: Params }) {
+    const params = await props.params
+    return <SectionPage section={params.section} />
+}

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

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

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

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

package/templates/default/app/api/auth/csrf/route.ts

@@ -0,0 +1,25 @@
+import { responseHeaders } from 'nextjs-cms/utils'
+import { createCSRFToken } from 'nextjs-cms/auth/actions'
+import { cookies } from 'next/headers'
+
+export async function GET() {
+    const cookieStore = await cookies()
+    const csrfTokenCookie = cookieStore.get('csrf_token')
+    const { csrfToken, cookie } = await createCSRFToken(csrfTokenCookie?.value)
+
+    if (cookie) {
+        (await cookies()).set({
+            name: 'csrf_token',
+            value: cookie,
+            httpOnly: true,
+            secure: true,
+            sameSite: true,
+        })
+    }
+    return Response.json(
+        {
+            csrfToken,
+        },
+        responseHeaders,
+    )
+}

package/templates/default/app/api/auth/refresh/route.ts

@@ -0,0 +1,10 @@
+import { NextRequest } from 'next/server'
+import { authRefresh } from 'nextjs-cms/auth/actions'
+
+export async function GET(request: NextRequest) {
+    const refreshToken = request.cookies.get('refresh_token')
+    const loginResult = await authRefresh(refreshToken)
+    return Response.json(loginResult, {
+        status: loginResult.status,
+    })
+}

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

@@ -0,0 +1,23 @@
+import { NextRequest } from 'next/server'
+import auth from 'nextjs-cms/auth'
+import { deleteSession, login } from 'nextjs-cms/auth/actions'
+
+export async function POST(request: NextRequest) {
+    const { username, password } = await request.json()
+    try {
+        const loginResult = await login({ username, password })
+        return Response.json(loginResult, { status: 200 })
+    } catch (error: any) {
+        return Response.json({ error: error.message }, { status: 400 })
+    }
+}
+
+export async function DELETE() {
+    const session = await auth()
+    try {
+        const loginResult = await deleteSession(session)
+        return Response.json(loginResult, { status: 200 })
+    } catch (error: any) {
+        return Response.json({ error: error.message }, { status: 400 })
+    }
+}

package/templates/default/app/api/auth/session/route.ts

@@ -0,0 +1,20 @@
+import auth from 'nextjs-cms/auth'
+import { NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+    const session = await auth()
+    return Response.json(session, {
+        status: session ? 200 : 404,
+    })
+}
+
+export async function POST(request: NextRequest) {
+    const session = await auth()
+    if (!session) {
+        return Response.json('Unauthorized', { status: 401 })
+    }
+
+    // TODO: Handle POST request to update session with new data
+
+    return Response.json(session)
+}

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

@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from 'next/server'
+import sharp from 'sharp'
+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 formData = await request.formData()
+    const photo = formData.get('photo') as File
+
+    if (!photo) {
+        return NextResponse.json(
+            {
+                error: 'Photo not provided',
+            },
+            { status: 400 },
+        )
+    }
+
+    const arrayBuffer = await photo.arrayBuffer()
+    const buffer = Buffer.from(arrayBuffer)
+
+    sharp.cache({ files: 0 })
+    sharp.cache(false)
+    const image = sharp(buffer)
+
+    let webpBuffer = await image.toFormat('webp').resize(1200, 768).withExif({}).toBuffer()
+
+    const base64String = webpBuffer.toString('base64')
+    image.destroy()
+
+    return NextResponse.json(`data:image/webp;base64,${base64String}`)
+}

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

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getPhoto } from 'nextjs-cms/api/helpers'
+
+export async function GET(request: NextRequest) {
+    const searchParams = request.nextUrl.searchParams
+
+    const name = searchParams.get('name')
+    const folder = searchParams.get('folder')
+    const isThumb = searchParams.get('isThumb')
+
+    if (!name || !folder || !isThumb) {
+        return NextResponse.json(
+            {
+                error: 'Invalid request',
+            },
+            { status: 400 },
+        )
+    }
+
+    const base64String =  await getPhoto({
+        name,
+        folder,
+        isThumb: isThumb === 'true',
+    })
+
+    return NextResponse.json(base64String)
+}

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

@@ -0,0 +1,7 @@
+import { NextRequest } from 'next/server'
+// import { getPlaiceholder } from 'plaiceholder'
+import { responseHeaders } from 'nextjs-cms/utils'
+
+export async function GET(request: NextRequest) {
+    return Response.json(null, responseHeaders)
+}