@pro-laico/create-atomic-payload 0.1.4

package/template/src/collections/fonts/script.ts

@@ -0,0 +1,199 @@
+import fs from 'fs'
+import path from 'path'
+import https from 'https'
+import dotenv from 'dotenv'
+import { fileURLToPath } from 'url'
+import { PayloadSDK } from '@payloadcms/sdk'
+import { Font, GenericFontFamily, Config } from '@/ts/types'
+
+const colors = {
+  blue: (t: string) => `\x1b[34m${t}\x1b[0m`,
+  green: (t: string) => `\x1b[32m${t}\x1b[0m`,
+  red: (t: string) => `\x1b[31m${t}\x1b[0m`,
+  orange: (t: string) => `\x1b[33m${t}\x1b[0m`,
+}
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+dotenv.config({ path: path.join(__dirname, '../../../.env') })
+
+const FONT_FILES_DIR = './public/fonts'
+const FONT_DEFINITION_FILE = './src/app/definition.ts'
+
+type FontExtensions = {
+  sans: string
+  serif: string
+  mono: string
+  display: string
+}
+
+let hasWarnings = false
+
+function warn(message: string, error?: unknown) {
+  hasWarnings = true
+  console.warn(message)
+  if (error) console.warn(error)
+}
+
+const requiredEnvVars = {
+  LIVE_SITE_URL: process.env.LIVE_SITE_URL,
+  BLOB_READ_WRITE_TOKEN: process.env.BLOB_READ_WRITE_TOKEN,
+  SCRIPT_USER_EMAIL: process.env.SCRIPT_USER_EMAIL,
+  SCRIPT_USER_PASSWORD: process.env.SCRIPT_USER_PASSWORD,
+}
+
+for (const [key, value] of Object.entries(requiredEnvVars)) {
+  if (!value) warn(colors.red(`Missing required environment variable: ${key}`))
+}
+
+const sdk = new PayloadSDK<Config>({ baseURL: `${process.env.LIVE_SITE_URL}/api` })
+
+function ensureFontOutputs() {
+  if (!fs.existsSync(FONT_FILES_DIR)) fs.mkdirSync(FONT_FILES_DIR, { recursive: true })
+
+  for (const file of fs.readdirSync(FONT_FILES_DIR)) fs.unlinkSync(path.join(FONT_FILES_DIR, file))
+
+  // Always create a safe fallback definition file
+  generateFontDefinitions({ sans: '', serif: '', mono: '', display: '' })
+}
+
+function generateFontDefinitions(extensions: FontExtensions): void {
+  const configs: Array<{
+    name: string
+    type: GenericFontFamily
+    extension: string
+    variable: string
+  }> = [
+    { name: 'fontSans', type: 'sans', extension: extensions.sans, variable: '--font-setSans' },
+    { name: 'fontSerif', type: 'serif', extension: extensions.serif, variable: '--font-setSerif' },
+    { name: 'fontMono', type: 'mono', extension: extensions.mono, variable: '--font-setMono' },
+    { name: 'fontDisplay', type: 'display', extension: extensions.display, variable: '--font-setDisplay' },
+  ]
+
+  const available = configs.filter((c) => c.extension)
+
+  const declarations = available
+    .map((c) => `const ${c.name} = localFont({ src: '../../public/fonts/${c.type}.${c.extension}', variable: '${c.variable}' })`)
+    .join('\n')
+
+  const exports = available.map((c) => c.name).join(', ')
+
+  fs.writeFileSync(
+    FONT_DEFINITION_FILE,
+    `// DO NOT EDIT MANUALLY. THIS FILE IS AUTOMATICALLY GENERATED.
+${declarations.length === 0 ? '//eslint-disable-next-line' : ''}
+import localFont from 'next/font/local'
+
+${declarations || '// No fonts available'}
+
+const fonts = { ${exports} }
+export default fonts
+`,
+  )
+}
+
+async function downloadFile(fileUrl: string, outputPath: string): Promise<void> {
+  const file = fs.createWriteStream(outputPath)
+
+  return new Promise((resolve, reject) => {
+    https
+      .get(fileUrl, (res) => {
+        res.pipe(file)
+        file.on('finish', () => {
+          file.close((err) => {
+            if (err) reject(err)
+            else resolve()
+          })
+        })
+      })
+      .on('error', (err) => {
+        if (fs.existsSync(outputPath)) fs.unlinkSync(outputPath)
+        reject(err)
+      })
+  })
+}
+
+async function downloadFont(font: Font | string | null, fontType: keyof FontExtensions, baseUrl: string): Promise<string | undefined | void> {
+  if (typeof font === 'string') return warn(colors.orange(`The ${fontType} font is a string reference`))
+  if (!font?.filename) return warn(colors.orange(`No ${fontType} font found`))
+
+  try {
+    const extension = font.filename.split('.').pop()?.toLowerCase() || 'ttf'
+    await downloadFile(`${baseUrl}/${font.filename}?download=1`, `${FONT_FILES_DIR}/${fontType}.${extension}`)
+    console.log(`${colors.green('✓')} Downloaded ${fontType} font`)
+    return extension
+  } catch (err) {
+    warn(colors.red(`Failed to download ${fontType} font`), err)
+  }
+}
+
+async function run() {
+  console.log(colors.blue('Starting Font Download...\n'))
+
+  // Always ensure outputs exist so imports never break
+  ensureFontOutputs()
+
+  if (hasWarnings) {
+    console.warn(colors.orange('Font download failed — No fonts will be used'))
+    return
+  }
+
+  const blobToken = process.env.BLOB_READ_WRITE_TOKEN!
+  const accountId = blobToken.split('_').slice(-2, -1)[0]
+  const baseUrl = `https://${accountId}.public.blob.vercel-storage.com`
+
+  let user
+  try {
+    user = await sdk.login({
+      collection: 'users',
+      data: {
+        email: process.env.SCRIPT_USER_EMAIL!,
+        password: process.env.SCRIPT_USER_PASSWORD!,
+      },
+    })
+  } catch (err) {
+    warn(colors.red('Authentication failed'), err)
+    return
+  }
+
+  let designSet
+  try {
+    designSet = await sdk.find(
+      { collection: 'designSet', where: { active: { equals: true } }, limit: 1 },
+      { headers: { Authorization: `JWT ${user.token}` } },
+    )
+  } catch (err) {
+    warn(colors.red('Failed to fetch design set'), err)
+    return
+  }
+
+  if (!designSet.docs.length) return warn(colors.red('No active design set found'))
+
+  const fonts = designSet.docs[0].font
+  if (!fonts) return warn(colors.red('No font configuration found'))
+
+  const hasProcessableFonts = Object.values(fonts).some((font) => typeof font === 'object' && font?.filename)
+  if (!hasProcessableFonts) return console.log(colors.green('No valid fonts to process. Continuing build process.'))
+
+  console.log(colors.green('✓ Font configuration found\n'))
+
+  const extensions: FontExtensions = { sans: '', serif: '', mono: '', display: '' }
+  const entries = Object.entries(fonts) as Array<[keyof FontExtensions, Font | string | null]>
+
+  const results = await Promise.all(entries.map(([key, font]) => downloadFont(font, key, baseUrl)))
+
+  entries.forEach(([key], i) => {
+    extensions[key] = results[i] ?? ''
+  })
+
+  if (hasWarnings) {
+    console.warn(colors.orange('\n⚠ Warnings encountered — No fonts will be used.'))
+    return
+  }
+
+  generateFontDefinitions(extensions)
+  console.log(colors.green('\n✓ Font definitions generated successfully\n'))
+}
+
+run().catch((err) => warn(colors.red('Unexpected script failure'), err))

package/template/src/collections/footers/collection.ts

@@ -0,0 +1,48 @@
+import { APFControlsPath } from '@/ui'
+import { ActiveField } from '@/fields/active'
+import { authd } from '@/access/authenticated'
+import { DevModeField } from '@/fields/devMode'
+import type { CollectionConfig } from 'payload'
+import { type APFunction } from '@/ts/types/apf'
+import { TestPathField } from '@/fields/testPath'
+import { ClassNameField } from '@/fields/className'
+import { UniqueTitleField } from '@/fields/uniqueTitle'
+import { generateAPFFields } from '@/fields/apf/storage'
+import { ChildrenBlocks } from '@/fields/blocks/children'
+import { StorageTab } from '@/fields/tabs/collection/storage'
+import { atomicHook } from '@/hooks/collection/atomicHook/atomicHook'
+import { revalidateCacheOnDelete } from '@/hooks/collection/revalidate'
+import { generateLivePreviewPath } from '@/utilities/generatePreviewPath'
+
+const APFunctions: APFunction[] = ['form', 'actions', 'classes', 'active']
+
+export const Footer: CollectionConfig = {
+  slug: 'footer',
+  access: { create: authd, delete: authd, read: authd, update: authd },
+
+  admin: {
+    group: 'Website',
+    useAsTitle: 'title',
+    enableListViewSelectAPI: true,
+    defaultColumns: ['title', 'active', '_status'],
+    preview: (data, { req }) => generateLivePreviewPath({ data, req }),
+    livePreview: { url: ({ data, req }) => generateLivePreviewPath({ data, req }) },
+    components: { edit: { beforeDocumentControls: [{ path: APFControlsPath, clientProps: { APFunctions } }] } },
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Settings',
+          fields: [{ type: 'row', fields: [ActiveField(), DevModeField(), UniqueTitleField('New Footer'), TestPathField] }],
+        },
+        { label: 'Content', fields: [ClassNameField({ label: 'Footer Elements Class Name' }), ChildrenBlocks] },
+        StorageTab(),
+      ],
+    },
+    ...generateAPFFields(APFunctions),
+  ],
+  hooks: { beforeChange: [atomicHook], afterDelete: [revalidateCacheOnDelete] },
+  versions: { drafts: { schedulePublish: true, validate: true }, maxPerDoc: 50 },
+}

package/template/src/collections/footers/component.tsx

@@ -0,0 +1,13 @@
+'use server'
+import { Footer as FooterType } from '@/ts/types'
+import { RenderChildren } from '@/components/child/renderChildren'
+
+export const Footer = async ({ footer }: { footer: FooterType }) => {
+  if (!footer) return <footer>No Footer Found</footer>
+
+  return (
+    <footer className={footer?.ClassName || undefined}>
+      <RenderChildren blocks={footer?.children} />
+    </footer>
+  )
+}

package/template/src/collections/headers/collection.ts

@@ -0,0 +1,47 @@
+import { APFControlsPath } from '@/ui'
+import { ActiveField } from '@/fields/active'
+import { authd } from '@/access/authenticated'
+import { DevModeField } from '@/fields/devMode'
+import type { CollectionConfig } from 'payload'
+import { type APFunction } from '@/ts/types/apf'
+import { TestPathField } from '@/fields/testPath'
+import { ClassNameField } from '@/fields/className'
+import { UniqueTitleField } from '@/fields/uniqueTitle'
+import { generateAPFFields } from '@/fields/apf/storage'
+import { ChildrenBlocks } from '@/fields/blocks/children'
+import { StorageTab } from '@/fields/tabs/collection/storage'
+import { atomicHook } from '@/hooks/collection/atomicHook/atomicHook'
+import { revalidateCacheOnDelete } from '@/hooks/collection/revalidate'
+import { generateLivePreviewPath } from '@/utilities/generatePreviewPath'
+
+const APFunctions: APFunction[] = ['form', 'actions', 'classes', 'active']
+
+export const Header: CollectionConfig = {
+  slug: 'header',
+  access: { create: authd, delete: authd, read: authd, update: authd },
+  admin: {
+    group: 'Website',
+    useAsTitle: 'title',
+    enableListViewSelectAPI: true,
+    defaultColumns: ['title', 'active', '_status'],
+    preview: (data, { req }) => generateLivePreviewPath({ data, req }),
+    livePreview: { url: ({ data, req }) => generateLivePreviewPath({ data, req }) },
+    components: { edit: { beforeDocumentControls: [{ path: APFControlsPath, clientProps: { APFunctions } }] } },
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Settings',
+          fields: [{ type: 'row', fields: [ActiveField(), DevModeField(), UniqueTitleField('New Header'), TestPathField] }],
+        },
+        { label: 'Content', fields: [ClassNameField({ label: 'Header Elements Class Name' }), ChildrenBlocks] },
+        StorageTab(),
+      ],
+    },
+    ...generateAPFFields(APFunctions),
+  ],
+  hooks: { beforeChange: [atomicHook], afterDelete: [revalidateCacheOnDelete] },
+  versions: { drafts: { schedulePublish: true, validate: true }, maxPerDoc: 50 },
+}

package/template/src/collections/headers/component.tsx

@@ -0,0 +1,13 @@
+'use server'
+import { Header as HeaderType } from '@/ts/types'
+import { RenderChildren } from '@/components/child/renderChildren'
+
+export const Header = async ({ header }: { header: HeaderType }) => {
+  if (!header) return <header>No Header Found</header>
+
+  return (
+    <header className={header?.ClassName || undefined}>
+      <RenderChildren blocks={header?.children} />
+    </header>
+  )
+}

package/template/src/collections/iconSets/collection.ts

@@ -0,0 +1,80 @@
+import { APField } from '@/fields/apf'
+import { ActiveField } from '@/fields/active'
+import { authd } from '@/access/authenticated'
+import type { CollectionConfig } from 'payload'
+import { type APFunction } from '@/ts/types/apf'
+import { TestPathField } from '@/fields/testPath'
+import { APFControlsPath, IconLabelPath } from '@/ui'
+import { UniqueTitleField } from '@/fields/uniqueTitle'
+import { generateAPFFields } from '@/fields/apf/storage'
+//import DefaultIconList from '@/collections/iconSets/defaults'
+import { atomicHook } from '@/hooks/collection/atomicHook/atomicHook'
+import { revalidateCacheOnDelete } from '@/hooks/collection/revalidate'
+import { generateLivePreviewPath } from '@/utilities/generatePreviewPath'
+
+const APFunctions: APFunction[] = ['active']
+
+const d = {
+  icon: 'Select an icon',
+  name: 'The name of the icon',
+}
+
+export const IconSet: CollectionConfig = {
+  slug: 'iconSet',
+  access: { create: authd, delete: authd, read: authd, update: authd },
+  admin: {
+    group: 'Sets',
+    useAsTitle: 'title',
+    enableListViewSelectAPI: true,
+    defaultColumns: ['title', 'active', '_status'],
+    preview: (data, { req }) => generateLivePreviewPath({ data, req }),
+    livePreview: { url: ({ data, req }) => generateLivePreviewPath({ data, req }) },
+    components: { edit: { beforeDocumentControls: [{ path: APFControlsPath, clientProps: { APFunctions } }] } },
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Settings',
+          fields: [{ type: 'row', fields: [ActiveField(), UniqueTitleField('New Icon Set'), TestPathField] }],
+        },
+        {
+          label: 'Icons',
+          fields: [
+            {
+              name: 'iconsArray',
+              type: 'array',
+              admin: { initCollapsed: true, components: { RowLabel: IconLabelPath } },
+              //defaultValue: DefaultIconList,
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    APField({
+                      name: 'name',
+                      type: 'text',
+                      kebab: true,
+                      required: true,
+                      admin: { width: '25%', description: d.name, style: { maxWidth: '350px' } },
+                    }),
+                    {
+                      name: 'icon',
+                      type: 'upload',
+                      relationTo: 'icon',
+                      displayPreview: false,
+                      admin: { allowCreate: false, width: '75%', description: d.icon, style: { maxWidth: '350px' } },
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    ...generateAPFFields(APFunctions),
+  ],
+  hooks: { beforeChange: [atomicHook], afterDelete: [revalidateCacheOnDelete] },
+  versions: { drafts: { schedulePublish: true, validate: true }, maxPerDoc: 50 },
+}

package/template/src/collections/iconSets/defaults.ts

@@ -0,0 +1,81 @@
+export const GENERAL_ICON_VARIANTS = [
+  { value: 'day', label: 'Day' },
+  { value: 'night', label: 'Night' },
+  { value: 'person', label: 'Person' },
+  { value: 'people', label: 'People' },
+  { value: 'photo', label: 'Photo' },
+  { value: 'video', label: 'Video' },
+  { value: 'music', label: 'Music' },
+  { value: 'quote', label: 'Quote' },
+  { value: 'text', label: 'Text' },
+] as const
+
+export const INTERFACE_ICON_VARIANTS = [
+  { value: 'checkmark', label: 'Checkmark' },
+  { value: 'select', label: 'Select' },
+  { value: 'menu', label: 'Menu' },
+  { value: 'home', label: 'Home' },
+  { value: 'back', label: 'Back' },
+  { value: 'forward', label: 'Forward' },
+  { value: 'close', label: 'Close' },
+  { value: 'search', label: 'Search' },
+  { value: 'settings', label: 'Settings' },
+  { value: 'ellipsis', label: 'Ellipsis' },
+  { value: 'alignRight', label: 'Align Right' },
+  { value: 'alignLeft', label: 'Align Left' },
+  { value: 'chevronDown', label: 'Chevron Down' },
+  { value: 'chevronUp', label: 'Chevron Up' },
+  { value: 'chevronLeft', label: 'Chevron Left' },
+  { value: 'chevronRight', label: 'Chevron Right' },
+  { value: 'play', label: 'Play' },
+  { value: 'pause', label: 'Pause' },
+  { value: 'stop', label: 'Stop' },
+  { value: 'copy', label: 'Copy' },
+  { value: 'link', label: 'Link' },
+  { value: 'plus', label: 'Plus' },
+  { value: 'minus', label: 'Minus' },
+] as const
+
+export const SOCIAL_ICON_VARIANTS = [
+  { value: 'facebook', label: 'Facebook' },
+  { value: 'twitter', label: 'Twitter' },
+  { value: 'instagram', label: 'Instagram' },
+  { value: 'linkedin', label: 'LinkedIn' },
+  { value: 'reddit', label: 'Reddit' },
+  { value: 'youtube', label: 'YouTube' },
+  { value: 'bluesky', label: 'Bluesky' },
+  { value: 'tiktok', label: 'TikTok' },
+  { value: 'twitch', label: 'Twitch' },
+  { value: 'discord', label: 'Discord' },
+  { value: 'github', label: 'GitHub' },
+] as const
+
+export const SHAPES_ICON_VARIANTS = [
+  { value: 'circle', label: 'Circle' },
+  { value: 'square', label: 'Square' },
+  { value: 'triangle', label: 'Triangle' },
+  { value: 'diamond', label: 'Diamond' },
+] as const
+
+export const BRAND_ICON_VARIANTS = [{ value: 'logo', label: 'Logo' }] as const
+
+export type IconName =
+  | (typeof GENERAL_ICON_VARIANTS)[number]['value']
+  | (typeof INTERFACE_ICON_VARIANTS)[number]['value']
+  | (typeof SOCIAL_ICON_VARIANTS)[number]['value']
+  | (typeof SHAPES_ICON_VARIANTS)[number]['value']
+  | (typeof BRAND_ICON_VARIANTS)[number]['value']
+
+const IconList = {
+  GENERAL_ICON_VARIANTS,
+  INTERFACE_ICON_VARIANTS,
+  SOCIAL_ICON_VARIANTS,
+  SHAPES_ICON_VARIANTS,
+  BRAND_ICON_VARIANTS,
+}
+
+const DefaultIconList = Object.values(IconList)
+  .flat()
+  .map((icon) => ({ name: icon?.value }))
+
+export default DefaultIconList

package/template/src/collections/icons.ts

@@ -0,0 +1,20 @@
+import { authd } from '@/access/authenticated'
+import type { CollectionConfig } from 'payload'
+import { formatSVGHook } from '@/hooks/collection/formatSVG'
+import { revalidateCache } from '@/hooks/collection/revalidate'
+
+export const Icon: CollectionConfig = {
+  slug: 'icon',
+  access: { create: authd, delete: authd, read: authd, update: authd },
+  admin: { group: 'Assets', useAsTitle: 'filename', enableListViewSelectAPI: true, defaultColumns: ['filename', 'filesize', 'updatedAt'] },
+  fields: [
+    { type: 'text', name: 'optimized', admin: { readOnly: true, condition: (data) => Boolean(data?.optimized) } },
+    {
+      type: 'code',
+      name: 'svgString',
+      admin: { language: 'xml', condition: (data) => Boolean(data?.svgString), editorOptions: { wordWrap: 'off', scrollBeyondLastLine: false } },
+    },
+  ],
+  upload: { mimeTypes: ['image/svg+xml'] },
+  hooks: { beforeChange: [formatSVGHook, revalidateCache] },
+}

package/template/src/collections/images.ts

@@ -0,0 +1,29 @@
+import { anyone } from '@/access/anyone'
+import { authd } from '@/access/authenticated'
+import { revalidateCache } from '@/hooks/collection/revalidate'
+import type { CollectionConfig, ImageUploadFormatOptions } from 'payload'
+
+const formatOptions: ImageUploadFormatOptions = { format: 'webp', options: { nearLossless: true, quality: 75 } }
+
+export const Images: CollectionConfig = {
+  slug: 'images',
+  access: { create: authd, delete: authd, read: anyone, update: authd },
+  admin: { group: 'Assets', enableListViewSelectAPI: true },
+  fields: [{ name: 'alt', type: 'text' }],
+  hooks: { beforeChange: [revalidateCache] },
+  upload: {
+    formatOptions,
+    focalPoint: true,
+    adminThumbnail: 'thumbnail',
+    mimeTypes: ['image/png', 'image/jpeg', 'image/jpg', 'image/webp', 'image/avif'],
+    imageSizes: [
+      { formatOptions, name: 'thumbnail', width: 300 },
+      { formatOptions, name: 'square', width: 500, height: 500 },
+      { formatOptions, name: 'small', width: 600 },
+      { formatOptions, name: 'medium', width: 900 },
+      { formatOptions, name: 'large', width: 1400 },
+      { formatOptions, name: 'xlarge', width: 1920 },
+      { formatOptions, name: 'og', width: 1200, height: 630, crop: 'center' },
+    ],
+  },
+}

package/template/src/collections/index.ts

@@ -0,0 +1,17 @@
+import { Icon } from './icons'
+import { Users } from './users'
+import { Images } from './images'
+import { Favicons } from './favicons'
+import { MuxVideo } from './muxVideos'
+import { Font } from './fonts/collection'
+import { Pages } from './pages/collection'
+import { Header } from './headers/collection'
+import { Footer } from './footers/collection'
+import { IconSet } from './iconSets/collection'
+import DesignSet from './designSets/collection'
+import ShortcutSet from './shortcutSets/collection'
+import { PostHogProperty } from './posthogProperty'
+
+const collections = [Font, Icon, Users, Pages, Footer, Header, Images, Favicons, IconSet, MuxVideo, DesignSet, ShortcutSet, PostHogProperty]
+
+export default collections

package/template/src/collections/muxVideos.ts

@@ -0,0 +1,13 @@
+import { anyone } from '@/access/anyone'
+import { authd } from '@/access/authenticated'
+import type { CollectionConfig } from 'payload'
+
+export const MuxVideo: CollectionConfig = {
+  slug: 'mux-video', //Do not change. This slug means this extends the Mux Video plugin.
+  admin: { group: 'Assets', enableListViewSelectAPI: true },
+  access: { create: authd, delete: authd, read: anyone, update: authd },
+  fields: [
+    //Add fields here to be appended to the mux video plugins default fields.
+    //Existing fields: https://github.com/oversightstudio/payload-plugins/blob/main/packages/mux-video/src/collections/MuxVideo.ts
+  ],
+}

package/template/src/collections/pages/collection.ts

@@ -0,0 +1,88 @@
+import { APFControlsPath } from '@/ui'
+import { APField } from '@/fields/apf'
+import { slugField } from '@/fields/slug'
+import { authd } from '@/access/authenticated'
+import { type APFunction } from '@/ts/types'
+import type { CollectionConfig } from 'payload'
+import { ClassNameField } from '@/fields/className'
+import { updateHrefHook } from '@/hooks/field/href'
+import { SEOTab } from '@/collections/pages/tabs/SEO'
+import { ChildrenBlocks } from '@/fields/blocks/children'
+import { StorageTab } from '@/fields/tabs/collection/storage'
+import { SettingsTab } from '@/collections/pages/tabs/settings'
+import { updatePublishedAtHook } from '@/hooks/field/publishedAt'
+import { createParentField } from '@payloadcms/plugin-nested-docs'
+import { atomicHook } from '@/hooks/collection/atomicHook/atomicHook'
+import { revalidateCacheOnDelete } from '@/hooks/collection/revalidate'
+import { generateLivePreviewPath } from '@/utilities/generatePreviewPath'
+import { authenticatedOrPublished } from '@/access/authenticatedOrPublished'
+
+const APFunctions: APFunction[] = ['form', 'page', 'pages', 'actions', 'classes', 'seo', 'sitemap']
+
+const d = {
+  liveDescription: 'If unchecked, the page will not be indexed by search engines, and can only be viewed in admins live preview.',
+}
+
+export const Pages: CollectionConfig<'pages'> = {
+  slug: 'pages',
+  defaultPopulate: { title: true, slug: true, href: true },
+  access: { create: authd, delete: authd, read: authenticatedOrPublished, update: authd },
+  admin: {
+    group: 'Website',
+    useAsTitle: 'href',
+    enableListViewSelectAPI: true,
+    preview: (data, { req }) => generateLivePreviewPath({ data, req }),
+    livePreview: { url: ({ data, req }) => generateLivePreviewPath({ data, req }) },
+    defaultColumns: ['href', 'title', 'publishedAt'],
+    components: { edit: { beforeDocumentControls: [{ path: APFControlsPath, clientProps: { APFunctions } }] } },
+  },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        APField({ type: 'text', apf: ['page'], name: 'title', required: true, admin: { width: '50%', style: { maxWidth: '500px' } } }),
+        {
+          type: 'date',
+          name: 'publishedAt',
+          hooks: { beforeChange: [updatePublishedAtHook] },
+          admin: { width: '30%', style: { maxWidth: '300px' } },
+        },
+      ],
+    },
+    ...slugField('title', {
+      slugOverrides: { admin: { width: '30%', style: { maxWidth: '300px' } } },
+    }),
+    {
+      type: 'row',
+      fields: [
+        createParentField('pages', { name: 'parent', admin: { width: '30%', style: { maxWidth: '305px' }, allowCreate: false } }),
+        APField({
+          type: 'text',
+          name: 'href',
+          apf: ['page', 'pages'],
+          hooks: { beforeChange: [updateHrefHook] },
+          admin: { width: '30%', readOnly: true, style: { maxWidth: '300px' } },
+        }),
+        APField({
+          type: 'checkbox',
+          apf: ['page', 'pages', 'sitemap'],
+          name: 'live',
+          required: true,
+          defaultValue: true,
+          admin: { width: '20%', description: d.liveDescription },
+        }),
+      ],
+    },
+    {
+      type: 'tabs',
+      tabs: [
+        { label: 'Content', fields: [ClassNameField({ namePrefix: 'main', defaultValue: 'page-main' }), ChildrenBlocks] },
+        SEOTab(),
+        StorageTab(),
+        SettingsTab(),
+      ],
+    },
+  ],
+  hooks: { beforeChange: [atomicHook], afterDelete: [revalidateCacheOnDelete] },
+  versions: { drafts: { schedulePublish: true, validate: true }, maxPerDoc: 50 },
+}