+
+ )
+}
diff --git a/templates/with-vercel-website/src/app/(frontend)/page.tsx b/templates/with-vercel-website/src/app/(frontend)/page.tsx
new file mode 100644
index 000000000..6aba7d647
--- /dev/null
+++ b/templates/with-vercel-website/src/app/(frontend)/page.tsx
@@ -0,0 +1,5 @@
+import PageTemplate, { generateMetadata } from './[slug]/page'
+
+export default PageTemplate
+
+export { generateMetadata }
diff --git a/templates/with-vercel-website/src/app/(frontend)/posts/[slug]/page.client.tsx b/templates/with-vercel-website/src/app/(frontend)/posts/[slug]/page.client.tsx
new file mode 100644
index 000000000..0025b057e
--- /dev/null
+++ b/templates/with-vercel-website/src/app/(frontend)/posts/[slug]/page.client.tsx
@@ -0,0 +1,15 @@
+'use client'
+import { useHeaderTheme } from '@/providers/HeaderTheme'
+import React, { useEffect } from 'react'
+
+const PageClient: React.FC = () => {
+ /* Force the header to be dark mode while we have an image behind it */
+ const { setHeaderTheme } = useHeaderTheme()
+
+ useEffect(() => {
+ setHeaderTheme('dark')
+ }, [setHeaderTheme])
+ return
+
+
+ 404
+This page could not be found.
+
+ typeof post === 'object')}
+ />
+ )}
+
+
+
+
+ {post.relatedPosts && post.relatedPosts.length > 0 && (
+
+
+ )
+}
+
+export function generateMetadata(): Metadata {
+ return {
+ title: `Payload Website Template Posts`,
+ }
+}
diff --git a/templates/with-vercel-website/src/app/(frontend)/posts/page/[pageNumber]/page.client.tsx b/templates/with-vercel-website/src/app/(frontend)/posts/page/[pageNumber]/page.client.tsx
new file mode 100644
index 000000000..2d5266928
--- /dev/null
+++ b/templates/with-vercel-website/src/app/(frontend)/posts/page/[pageNumber]/page.client.tsx
@@ -0,0 +1,15 @@
+'use client'
+import { useHeaderTheme } from '@/providers/HeaderTheme'
+import React, { useEffect } from 'react'
+
+const PageClient: React.FC = () => {
+ /* Force the header to be dark mode while we have an image behind it */
+ const { setHeaderTheme } = useHeaderTheme()
+
+ useEffect(() => {
+ setHeaderTheme('light')
+ }, [setHeaderTheme])
+ return
+
+
+
+
+ Posts
+
+
+
+
+ {posts.totalPages > 1 && posts.page && (
+
+
+
+ )
+}
+
+export async function generateMetadata({ params: paramsPromise }: Args): Promise
+
+
+
+
+ Posts
+
+
+
+
+ {posts.totalPages > 1 && posts.page && (
+
+
+
+ )
+}
+
+export function generateMetadata(): Metadata {
+ return {
+ title: `Payload Website Template Search`,
+ }
+}
diff --git a/templates/with-vercel-website/src/app/(payload)/admin/[[...segments]]/not-found.tsx b/templates/with-vercel-website/src/app/(payload)/admin/[[...segments]]/not-found.tsx
new file mode 100644
index 000000000..64108365f
--- /dev/null
+++ b/templates/with-vercel-website/src/app/(payload)/admin/[[...segments]]/not-found.tsx
@@ -0,0 +1,24 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
+import { importMap } from '../importMap'
+
+type Args = {
+ params: Promise<{
+ segments: string[]
+ }>
+ searchParams: Promise<{
+ [key: string]: string | string[]
+ }>
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise
+
+
+ {posts.totalDocs > 0 ? (
+
+
+ Search
+No results found.
+ )}
+
+ {introContent && (
+
+ )
+}
diff --git a/templates/with-vercel-website/src/blocks/ArchiveBlock/config.ts b/templates/with-vercel-website/src/blocks/ArchiveBlock/config.ts
new file mode 100644
index 000000000..f87a376bd
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/ArchiveBlock/config.ts
@@ -0,0 +1,94 @@
+import type { Block } from 'payload'
+
+import {
+ FixedToolbarFeature,
+ HeadingFeature,
+ InlineToolbarFeature,
+ lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+
+export const Archive: Block = {
+ slug: 'archive',
+ interfaceName: 'ArchiveBlock',
+ fields: [
+ {
+ name: 'introContent',
+ type: 'richText',
+ editor: lexicalEditor({
+ features: ({ rootFeatures }) => {
+ return [
+ ...rootFeatures,
+ HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
+ FixedToolbarFeature(),
+ InlineToolbarFeature(),
+ ]
+ },
+ }),
+ label: 'Intro Content',
+ },
+ {
+ name: 'populateBy',
+ type: 'select',
+ defaultValue: 'collection',
+ options: [
+ {
+ label: 'Collection',
+ value: 'collection',
+ },
+ {
+ label: 'Individual Selection',
+ value: 'selection',
+ },
+ ],
+ },
+ {
+ name: 'relationTo',
+ type: 'select',
+ admin: {
+ condition: (_, siblingData) => siblingData.populateBy === 'collection',
+ },
+ defaultValue: 'posts',
+ label: 'Collections To Show',
+ options: [
+ {
+ label: 'Posts',
+ value: 'posts',
+ },
+ ],
+ },
+ {
+ name: 'categories',
+ type: 'relationship',
+ admin: {
+ condition: (_, siblingData) => siblingData.populateBy === 'collection',
+ },
+ hasMany: true,
+ label: 'Categories To Show',
+ relationTo: 'categories',
+ },
+ {
+ name: 'limit',
+ type: 'number',
+ admin: {
+ condition: (_, siblingData) => siblingData.populateBy === 'collection',
+ step: 1,
+ },
+ defaultValue: 10,
+ label: 'Limit',
+ },
+ {
+ name: 'selectedDocs',
+ type: 'relationship',
+ admin: {
+ condition: (_, siblingData) => siblingData.populateBy === 'selection',
+ },
+ hasMany: true,
+ label: 'Selection',
+ relationTo: ['posts'],
+ },
+ ],
+ labels: {
+ plural: 'Archives',
+ singular: 'Archive',
+ },
+}
diff --git a/templates/with-vercel-website/src/blocks/Banner/Component.tsx b/templates/with-vercel-website/src/blocks/Banner/Component.tsx
new file mode 100644
index 000000000..143596cb2
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/Banner/Component.tsx
@@ -0,0 +1,26 @@
+import type { BannerBlock as BannerBlockProps } from 'src/payload-types'
+
+import { cn } from 'src/utilities/cn'
+import React from 'react'
+import RichText from '@/components/RichText'
+
+type Props = {
+ className?: string
+} & BannerBlockProps
+
+export const BannerBlock: React.FC
+
+ )}
+
+
+ )
+}
diff --git a/templates/with-vercel-website/src/blocks/Banner/config.ts b/templates/with-vercel-website/src/blocks/Banner/config.ts
new file mode 100644
index 000000000..53e46b5cb
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/Banner/config.ts
@@ -0,0 +1,37 @@
+import type { Block } from 'payload'
+
+import {
+ FixedToolbarFeature,
+ InlineToolbarFeature,
+ lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+
+export const Banner: Block = {
+ slug: 'banner',
+ fields: [
+ {
+ name: 'style',
+ type: 'select',
+ defaultValue: 'info',
+ options: [
+ { label: 'Info', value: 'info' },
+ { label: 'Warning', value: 'warning' },
+ { label: 'Error', value: 'error' },
+ { label: 'Success', value: 'success' },
+ ],
+ required: true,
+ },
+ {
+ name: 'content',
+ type: 'richText',
+ editor: lexicalEditor({
+ features: ({ rootFeatures }) => {
+ return [...rootFeatures, FixedToolbarFeature(), InlineToolbarFeature()]
+ },
+ }),
+ label: false,
+ required: true,
+ },
+ ],
+ interfaceName: 'BannerBlock',
+}
diff --git a/templates/with-vercel-website/src/blocks/CallToAction/Component.tsx b/templates/with-vercel-website/src/blocks/CallToAction/Component.tsx
new file mode 100644
index 000000000..6be9287a2
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/CallToAction/Component.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+import type { CallToActionBlock as CTABlockProps } from '@/payload-types'
+
+import RichText from '@/components/RichText'
+import { CMSLink } from '@/components/Link'
+
+export const CallToActionBlock: React.FC
+
+
+
+ )
+}
diff --git a/templates/with-vercel-website/src/blocks/CallToAction/config.ts b/templates/with-vercel-website/src/blocks/CallToAction/config.ts
new file mode 100644
index 000000000..f4ffa77c6
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/CallToAction/config.ts
@@ -0,0 +1,42 @@
+import type { Block } from 'payload'
+
+import {
+ FixedToolbarFeature,
+ HeadingFeature,
+ InlineToolbarFeature,
+ lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+
+import { linkGroup } from '../../fields/linkGroup'
+
+export const CallToAction: Block = {
+ slug: 'cta',
+ interfaceName: 'CallToActionBlock',
+ fields: [
+ {
+ name: 'richText',
+ type: 'richText',
+ editor: lexicalEditor({
+ features: ({ rootFeatures }) => {
+ return [
+ ...rootFeatures,
+ HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
+ FixedToolbarFeature(),
+ InlineToolbarFeature(),
+ ]
+ },
+ }),
+ label: false,
+ },
+ linkGroup({
+ appearances: ['default', 'outline'],
+ overrides: {
+ maxRows: 2,
+ },
+ }),
+ ],
+ labels: {
+ plural: 'Calls to Action',
+ singular: 'Call to Action',
+ },
+}
diff --git a/templates/with-vercel-website/src/blocks/Code/Component.client.tsx b/templates/with-vercel-website/src/blocks/Code/Component.client.tsx
new file mode 100644
index 000000000..fc8fb6254
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/Code/Component.client.tsx
@@ -0,0 +1,33 @@
+'use client'
+import { Highlight, themes } from 'prism-react-renderer'
+import React from 'react'
+import { CopyButton } from './CopyButton'
+
+type Props = {
+ code: string
+ language?: string
+}
+
+export const Code: React.FC
+
+
+ {richText &&
+
+ {(links || []).map(({ link }, i) => {
+ return
+
+ {tokens.map((line, i) => (
+
+ {i + 1}
+
+ {line.map((token, key) => (
+
+ ))}
+
+
+ ))}
+
+ )}
+
+
+ )
+}
diff --git a/templates/with-vercel-website/src/blocks/Code/CopyButton.tsx b/templates/with-vercel-website/src/blocks/Code/CopyButton.tsx
new file mode 100644
index 000000000..040a70297
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/Code/CopyButton.tsx
@@ -0,0 +1,36 @@
+'use client'
+import { Button } from '@/components/ui/button'
+import { CopyIcon } from '@payloadcms/ui'
+import { useState } from 'react'
+
+export function CopyButton({ code }: { code: string }) {
+ const [text, setText] = useState('Copy')
+
+ function updateCopyStatus() {
+ if (text === 'Copy') {
+ setText(() => 'Copied!')
+ setTimeout(() => {
+ setText(() => 'Copy')
+ }, 1000)
+ }
+ }
+
+ return (
+
+
+
+ )
+}
diff --git a/templates/with-vercel-website/src/blocks/Code/config.ts b/templates/with-vercel-website/src/blocks/Code/config.ts
new file mode 100644
index 000000000..7b26f805d
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/Code/config.ts
@@ -0,0 +1,33 @@
+import type { Block } from 'payload'
+
+export const Code: Block = {
+ slug: 'code',
+ interfaceName: 'CodeBlock',
+ fields: [
+ {
+ name: 'language',
+ type: 'select',
+ defaultValue: 'typescript',
+ options: [
+ {
+ label: 'Typescript',
+ value: 'typescript',
+ },
+ {
+ label: 'Javascript',
+ value: 'javascript',
+ },
+ {
+ label: 'CSS',
+ value: 'css',
+ },
+ ],
+ },
+ {
+ name: 'code',
+ type: 'code',
+ label: false,
+ required: true,
+ },
+ ],
+}
diff --git a/templates/with-vercel-website/src/blocks/Content/Component.tsx b/templates/with-vercel-website/src/blocks/Content/Component.tsx
new file mode 100644
index 000000000..b34126c19
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/Content/Component.tsx
@@ -0,0 +1,43 @@
+import { cn } from 'src/utilities/cn'
+import React from 'react'
+import RichText from '@/components/RichText'
+
+import type { ContentBlock as ContentBlockProps } from '@/payload-types'
+
+import { CMSLink } from '../../components/Link'
+
+export const ContentBlock: React.FC
+
+ )
+}
diff --git a/templates/with-vercel-website/src/blocks/Content/config.ts b/templates/with-vercel-website/src/blocks/Content/config.ts
new file mode 100644
index 000000000..01c22edc3
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/Content/config.ts
@@ -0,0 +1,74 @@
+import type { Block, Field } from 'payload'
+
+import {
+ FixedToolbarFeature,
+ HeadingFeature,
+ InlineToolbarFeature,
+ lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+
+import { link } from '@/fields/link'
+
+const columnFields: Field[] = [
+ {
+ name: 'size',
+ type: 'select',
+ defaultValue: 'oneThird',
+ options: [
+ {
+ label: 'One Third',
+ value: 'oneThird',
+ },
+ {
+ label: 'Half',
+ value: 'half',
+ },
+ {
+ label: 'Two Thirds',
+ value: 'twoThirds',
+ },
+ {
+ label: 'Full',
+ value: 'full',
+ },
+ ],
+ },
+ {
+ name: 'richText',
+ type: 'richText',
+ editor: lexicalEditor({
+ features: ({ rootFeatures }) => {
+ return [
+ ...rootFeatures,
+ HeadingFeature({ enabledHeadingSizes: ['h2', 'h3', 'h4'] }),
+ FixedToolbarFeature(),
+ InlineToolbarFeature(),
+ ]
+ },
+ }),
+ label: false,
+ },
+ {
+ name: 'enableLink',
+ type: 'checkbox',
+ },
+ link({
+ overrides: {
+ admin: {
+ condition: (_, { enableLink }) => Boolean(enableLink),
+ },
+ },
+ }),
+]
+
+export const Content: Block = {
+ slug: 'content',
+ interfaceName: 'ContentBlock',
+ fields: [
+ {
+ name: 'columns',
+ type: 'array',
+ fields: columnFields,
+ },
+ ],
+}
diff --git a/templates/with-vercel-website/src/blocks/Form/Checkbox/index.tsx b/templates/with-vercel-website/src/blocks/Form/Checkbox/index.tsx
new file mode 100644
index 000000000..1eff6940a
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/Form/Checkbox/index.tsx
@@ -0,0 +1,44 @@
+import type { CheckboxField } from '@payloadcms/plugin-form-builder/types'
+import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form'
+
+import { useFormContext } from 'react-hook-form'
+
+import { Checkbox as CheckboxUi } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+import React from 'react'
+
+import { Error } from '../Error'
+import { Width } from '../Width'
+
+export const Checkbox: React.FC<
+ CheckboxField & {
+ errors: Partial<
+ FieldErrorsImpl<{
+ [x: string]: any
+ }>
+ >
+ getValues: any
+ register: UseFormRegister
+ {columns &&
+ columns.length > 0 &&
+ columns.map((col, index) => {
+ const { enableLink, link, richText, size } = col
+
+ return (
+
+
+ {richText &&
+ )
+ })}
+
+ {
+ setValue(props.name, checked)
+ }}
+ />
+
+
+ {requiredFromProps && errors[name] &&
+
+ {enableIntro && introContent && !hasSubmitted && (
+
+
+ )
+}
diff --git a/templates/with-vercel-website/src/blocks/Form/Country/index.tsx b/templates/with-vercel-website/src/blocks/Form/Country/index.tsx
new file mode 100644
index 000000000..e6cfa0844
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/Form/Country/index.tsx
@@ -0,0 +1,63 @@
+import type { CountryField } from '@payloadcms/plugin-form-builder/types'
+import type { Control, FieldErrorsImpl, FieldValues } from 'react-hook-form'
+
+import { Label } from '@/components/ui/label'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select'
+import React from 'react'
+import { Controller } from 'react-hook-form'
+
+import { Error } from '../Error'
+import { Width } from '../Width'
+import { countryOptions } from './options'
+
+export const Country: React.FC<
+ CountryField & {
+ control: ControlLoading, please wait...
} + {error &&{`${error.status || '500'}: ${error.message || ''}`}
}
+ {!hasSubmitted && (
+
+ )}
+ This field is required
+}
diff --git a/templates/with-vercel-website/src/blocks/Form/Message/index.tsx b/templates/with-vercel-website/src/blocks/Form/Message/index.tsx
new file mode 100644
index 000000000..f1d785186
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/Form/Message/index.tsx
@@ -0,0 +1,12 @@
+import RichText from '@/components/RichText'
+import React from 'react'
+
+import { Width } from '../Width'
+
+export const Message: React.FC = ({ message }: { message: Record
+ {children}
+
+ )
+}
diff --git a/templates/with-vercel-website/src/blocks/Form/buildInitialFormState.tsx b/templates/with-vercel-website/src/blocks/Form/buildInitialFormState.tsx
new file mode 100644
index 000000000..fe5d3c0c0
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/Form/buildInitialFormState.tsx
@@ -0,0 +1,42 @@
+import type { FormFieldBlock } from '@payloadcms/plugin-form-builder/types'
+
+export const buildInitialFormState = (fields: FormFieldBlock[]) => {
+ return fields?.reduce((initialSchema, field) => {
+ if (field.blockType === 'checkbox') {
+ return {
+ ...initialSchema,
+ [field.name]: field.defaultValue,
+ }
+ }
+ if (field.blockType === 'country') {
+ return {
+ ...initialSchema,
+ [field.name]: '',
+ }
+ }
+ if (field.blockType === 'email') {
+ return {
+ ...initialSchema,
+ [field.name]: '',
+ }
+ }
+ if (field.blockType === 'text') {
+ return {
+ ...initialSchema,
+ [field.name]: '',
+ }
+ }
+ if (field.blockType === 'select') {
+ return {
+ ...initialSchema,
+ [field.name]: '',
+ }
+ }
+ if (field.blockType === 'state') {
+ return {
+ ...initialSchema,
+ [field.name]: '',
+ }
+ }
+ }, {})
+}
diff --git a/templates/with-vercel-website/src/blocks/Form/config.ts b/templates/with-vercel-website/src/blocks/Form/config.ts
new file mode 100644
index 000000000..5334289f3
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/Form/config.ts
@@ -0,0 +1,51 @@
+import type { Block } from 'payload'
+
+import {
+ FixedToolbarFeature,
+ HeadingFeature,
+ InlineToolbarFeature,
+ lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+
+export const FormBlock: Block = {
+ slug: 'formBlock',
+ interfaceName: 'FormBlock',
+ fields: [
+ {
+ name: 'form',
+ type: 'relationship',
+ relationTo: 'forms',
+ required: true,
+ },
+ {
+ name: 'enableIntro',
+ type: 'checkbox',
+ label: 'Enable Intro Content',
+ },
+ {
+ name: 'introContent',
+ type: 'richText',
+ admin: {
+ condition: (_, { enableIntro }) => Boolean(enableIntro),
+ },
+ editor: lexicalEditor({
+ features: ({ rootFeatures }) => {
+ return [
+ ...rootFeatures,
+ HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
+ FixedToolbarFeature(),
+ InlineToolbarFeature(),
+ ]
+ },
+ }),
+ label: 'Intro Content',
+ },
+ ],
+ graphQL: {
+ singularName: 'FormBlock',
+ },
+ labels: {
+ plural: 'Form Blocks',
+ singular: 'Form Block',
+ },
+}
diff --git a/templates/with-vercel-website/src/blocks/Form/fields.tsx b/templates/with-vercel-website/src/blocks/Form/fields.tsx
new file mode 100644
index 000000000..fa660f7e3
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/Form/fields.tsx
@@ -0,0 +1,21 @@
+import { Checkbox } from './Checkbox'
+import { Country } from './Country'
+import { Email } from './Email'
+import { Message } from './Message'
+import { Number } from './Number'
+import { Select } from './Select'
+import { State } from './State'
+import { Text } from './Text'
+import { Textarea } from './Textarea'
+
+export const fields = {
+ checkbox: Checkbox,
+ country: Country,
+ email: Email,
+ message: Message,
+ number: Number,
+ select: Select,
+ state: State,
+ text: Text,
+ textarea: Textarea,
+}
diff --git a/templates/with-vercel-website/src/blocks/MediaBlock/Component.tsx b/templates/with-vercel-website/src/blocks/MediaBlock/Component.tsx
new file mode 100644
index 000000000..d4e09977f
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/MediaBlock/Component.tsx
@@ -0,0 +1,69 @@
+import type { StaticImageData } from 'next/image'
+
+import { cn } from 'src/utilities/cn'
+import React from 'react'
+import RichText from '@/components/RichText'
+
+import type { MediaBlock as MediaBlockProps } from '@/payload-types'
+
+import { Media } from '../../components/Media'
+
+type Props = MediaBlockProps & {
+ breakout?: boolean
+ captionClassName?: string
+ className?: string
+ enableGutter?: boolean
+ imgClassName?: string
+ staticImage?: StaticImageData
+ disableInnerContainer?: boolean
+}
+
+export const MediaBlock: React.FC
+ {position === 'fullscreen' && (
+
+ )
+}
diff --git a/templates/with-vercel-website/src/blocks/MediaBlock/config.ts b/templates/with-vercel-website/src/blocks/MediaBlock/config.ts
new file mode 100644
index 000000000..ba84efe4a
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/MediaBlock/config.ts
@@ -0,0 +1,29 @@
+import type { Block } from 'payload'
+
+export const MediaBlock: Block = {
+ slug: 'mediaBlock',
+ interfaceName: 'MediaBlock',
+ fields: [
+ {
+ name: 'position',
+ type: 'select',
+ defaultValue: 'default',
+ options: [
+ {
+ label: 'Default',
+ value: 'default',
+ },
+ {
+ label: 'Fullscreen',
+ value: 'fullscreen',
+ },
+ ],
+ },
+ {
+ name: 'media',
+ type: 'upload',
+ relationTo: 'media',
+ required: true,
+ },
+ ],
+}
diff --git a/templates/with-vercel-website/src/blocks/RelatedPosts/Component.tsx b/templates/with-vercel-website/src/blocks/RelatedPosts/Component.tsx
new file mode 100644
index 000000000..3bebc7517
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/RelatedPosts/Component.tsx
@@ -0,0 +1,31 @@
+import clsx from 'clsx'
+import React from 'react'
+import RichText from '@/components/RichText'
+
+import type { Post } from '@/payload-types'
+
+import { Card } from '../../components/Card'
+
+export type RelatedPostsProps = {
+ className?: string
+ docs?: Post[]
+ introContent?: any
+}
+
+export const RelatedPosts: React.FC
+
+ )}
+ {position === 'default' && (
+
+
+ )}
+
+ {introContent &&
+ )
+}
diff --git a/templates/with-vercel-website/src/blocks/RenderBlocks.tsx b/templates/with-vercel-website/src/blocks/RenderBlocks.tsx
new file mode 100644
index 000000000..e87fd8a1b
--- /dev/null
+++ b/templates/with-vercel-website/src/blocks/RenderBlocks.tsx
@@ -0,0 +1,52 @@
+import { cn } from 'src/utilities/cn'
+import React, { Fragment } from 'react'
+
+import type { Page } from '@/payload-types'
+
+import { ArchiveBlock } from '@/blocks/ArchiveBlock/Component'
+import { CallToActionBlock } from '@/blocks/CallToAction/Component'
+import { ContentBlock } from '@/blocks/Content/Component'
+import { FormBlock } from '@/blocks/Form/Component'
+import { MediaBlock } from '@/blocks/MediaBlock/Component'
+
+const blockComponents = {
+ archive: ArchiveBlock,
+ content: ContentBlock,
+ cta: CallToActionBlock,
+ formBlock: FormBlock,
+ mediaBlock: MediaBlock,
+}
+
+export const RenderBlocks: React.FC<{
+ blocks: Page['layout'][0][]
+}> = (props) => {
+ const { blocks } = props
+
+ const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0
+
+ if (hasBlocks) {
+ return (
+
+ {docs?.map((doc, index) => {
+ if (typeof doc === 'string') return null
+
+ return
+
+ {/* @ts-expect-error */}
+
+ )
+ }
+ }
+ return null
+ })}
+
+
+ )
+}
diff --git a/templates/with-vercel-website/src/components/BeforeDashboard/SeedButton/index.tsx b/templates/with-vercel-website/src/components/BeforeDashboard/SeedButton/index.tsx
new file mode 100644
index 000000000..bc81350af
--- /dev/null
+++ b/templates/with-vercel-website/src/components/BeforeDashboard/SeedButton/index.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import React, { Fragment, useCallback, useState } from 'react'
+import { toast } from '@payloadcms/ui'
+
+const SuccessMessage: React.FC = () => (
+
+
+
+ Database seeded! You can now{' '}
+
+ visit your website
+
+
+)
+
+export const SeedButton: React.FC = () => {
+ const [loading, setLoading] = useState(false)
+ const [seeded, setSeeded] = useState(false)
+ const [error, setError] = useState(null)
+
+ const handleClick = useCallback(
+ async (e) => {
+ e.preventDefault()
+ if (loading || seeded) return
+
+ setLoading(true)
+
+ try {
+ await fetch('/api/seed')
+ setSeeded(true)
+ toast.success(
+
+
+ Here's what to do next:
+
+ )
+}
+
+export default BeforeDashboard
diff --git a/templates/with-vercel-website/src/components/BeforeLogin/index.tsx b/templates/with-vercel-website/src/components/BeforeLogin/index.tsx
new file mode 100644
index 000000000..8768831c8
--- /dev/null
+++ b/templates/with-vercel-website/src/components/BeforeLogin/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const BeforeLogin: React.FC = () => {
+ return (
+ Welcome to your dashboard!
+-
+
-
+
+ {' with a few pages, posts, and projects to jump-start your new site, then '} + + visit your website + + {' to see the results.'} +
+ - + If you created this repo using Payload Cloud, head over to GitHub and clone it to your + local machine. It will be under the GitHub Scope that you selected when creating + this project. + +
- + {'Modify your '} + + collections + + {' and add more '} + + fields + + {' as needed. If you are new to Payload, we also recommend you check out the '} + + Getting Started + + {' docs.'} + +
- + Commit and push your changes to the repository to trigger a redeployment of your project. + +
+
+ )
+}
+
+export default BeforeLogin
diff --git a/templates/with-vercel-website/src/components/Card/index.tsx b/templates/with-vercel-website/src/components/Card/index.tsx
new file mode 100644
index 000000000..6277de2df
--- /dev/null
+++ b/templates/with-vercel-website/src/components/Card/index.tsx
@@ -0,0 +1,82 @@
+'use client'
+import { cn } from '@/utilities/cn'
+import useClickableCard from '@/utilities/useClickableCard'
+import Link from 'next/link'
+import React, { Fragment } from 'react'
+
+import type { Post } from '@/payload-types'
+
+import { Media } from '@/components/Media'
+
+export const Card: React.FC<{
+ alignItems?: 'center'
+ className?: string
+ doc?: Post
+ relationTo?: 'posts'
+ showCategories?: boolean
+ title?: string
+}> = (props) => {
+ const { card, link } = useClickableCard({})
+ const { className, doc, relationTo, showCategories, title: titleFromProps } = props
+
+ const { slug, categories, meta, title } = doc || {}
+ const { description, image: metaImage } = meta || {}
+
+ const hasCategories = categories && Array.isArray(categories) && categories.length > 0
+ const titleToUse = titleFromProps || title
+ const sanitizedDescription = description?.replace(/\s/g, ' ') // replace non-breaking space with white space
+ const href = `/${relationTo}/${slug}`
+
+ return (
+ + Welcome to your dashboard! + {' This is where site admins will log in to manage your website.'} +
+
+ {!metaImage &&
+ No image
}
+ {metaImage && typeof metaImage !== 'string' &&
+ {showCategories && hasCategories && (
+
+
+ {showCategories && hasCategories && (
+
+ )}
+ {titleToUse && (
+
+ {categories?.map((category, index) => {
+ if (typeof category === 'object') {
+ const { title: titleFromCategory } = category
+
+ const categoryTitle = titleFromCategory || 'Untitled category'
+
+ const isLast = index === categories.length - 1
+
+ return (
+
+ {categoryTitle}
+ {!isLast && , }
+
+ )
+ }
+
+ return null
+ })}
+
+ )}
+
+
+ )}
+ {description && + + {titleToUse} + +
+{description &&
}
+ {sanitizedDescription}
}
+
+ )
+}
diff --git a/templates/with-vercel-website/src/components/Link/index.tsx b/templates/with-vercel-website/src/components/Link/index.tsx
new file mode 100644
index 000000000..af7fd0440
--- /dev/null
+++ b/templates/with-vercel-website/src/components/Link/index.tsx
@@ -0,0 +1,66 @@
+import { Button, type ButtonProps } from '@/components/ui/button'
+import { cn } from 'src/utilities/cn'
+import Link from 'next/link'
+import React from 'react'
+
+import type { Page, Post } from '@/payload-types'
+
+type CMSLinkType = {
+ appearance?: 'inline' | ButtonProps['variant']
+ children?: React.ReactNode
+ className?: string
+ label?: string | null
+ newTab?: boolean | null
+ reference?: {
+ relationTo: 'pages' | 'posts'
+ value: Page | Post | string | number
+ } | null
+ size?: ButtonProps['size'] | null
+ type?: 'custom' | 'reference' | null
+ url?: string | null
+}
+
+export const CMSLink: React.FC
+
+
+ {posts?.map((result, index) => {
+ if (typeof result === 'object' && result !== null) {
+ return (
+
+
+
+ )
+ }
+
+ return null
+ })}
+ 
+ )
+}
diff --git a/templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx b/templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx
new file mode 100644
index 000000000..308cd4b85
--- /dev/null
+++ b/templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import type { StaticImageData } from 'next/image'
+
+import { cn } from 'src/utilities/cn'
+import NextImage from 'next/image'
+import React from 'react'
+
+import type { Props as MediaProps } from '../types'
+
+import cssVariables from '@/cssVariables'
+
+const { breakpoints } = cssVariables
+
+export const ImageMedia: React.FC
+ {(typeof totalDocs === 'undefined' || totalDocs === 0) && 'Search produced no results.'}
+ {typeof totalDocs !== 'undefined' &&
+ totalDocs > 0 &&
+ `Showing ${indexStart}${indexStart > 0 ? ` - ${indexEnd}` : ''} of ${totalDocs} ${
+ totalDocs > 1 ? plural : singular
+ }`}
+
+ )
+}
diff --git a/templates/with-vercel-website/src/components/Pagination/index.tsx b/templates/with-vercel-website/src/components/Pagination/index.tsx
new file mode 100644
index 000000000..d6d6fda19
--- /dev/null
+++ b/templates/with-vercel-website/src/components/Pagination/index.tsx
@@ -0,0 +1,101 @@
+'use client'
+import {
+ Pagination as PaginationComponent,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from '@/components/ui/pagination'
+import { cn } from '@/utilities/cn'
+import { useRouter } from 'next/navigation'
+import React from 'react'
+
+export const Pagination: React.FC<{
+ className?: string
+ page: number
+ totalPages: number
+}> = (props) => {
+ const router = useRouter()
+
+ const { className, page, totalPages } = props
+ const hasNextPage = page < totalPages
+ const hasPrevPage = page > 1
+
+ const hasExtraPrevPages = page - 1 > 1
+ const hasExtraNextPages = page + 1 < totalPages
+
+ return (
+
+
+
+
+ {
+ router.push(`/posts/page/${page - 1}`)
+ }}
+ />
+
+
+ {hasExtraPrevPages && (
+
+
+ )}
+
+ {hasPrevPage && (
+
+ {
+ router.push(`/posts/page/${page - 1}`)
+ }}
+ >
+ {page - 1}
+
+
+ )}
+
+
+ {
+ router.push(`/posts/page/${page}`)
+ }}
+ >
+ {page}
+
+
+
+ {hasNextPage && (
+
+ {
+ router.push(`/posts/page/${page + 1}`)
+ }}
+ >
+ {page + 1}
+
+
+ )}
+
+ {hasExtraNextPages && (
+
+
+ )}
+
+
+ {
+ router.push(`/posts/page/${page + 1}`)
+ }}
+ />
+
+
+
+
+ )
+}
diff --git a/templates/with-vercel-website/src/components/PayloadRedirects/index.tsx b/templates/with-vercel-website/src/components/PayloadRedirects/index.tsx
new file mode 100644
index 000000000..2e94fdde8
--- /dev/null
+++ b/templates/with-vercel-website/src/components/PayloadRedirects/index.tsx
@@ -0,0 +1,50 @@
+import type React from 'react'
+import type { Page, Post } from '@/payload-types'
+
+import { getCachedDocument } from '@/utilities/getDocument'
+import { getCachedRedirects } from '@/utilities/getRedirects'
+import { notFound, redirect } from 'next/navigation'
+
+interface Props {
+ disableNotFound?: boolean
+ url: string
+}
+
+/* This component helps us with SSR based dynamic redirects */
+export const PayloadRedirects: React.FC
+ {content &&
+ !Array.isArray(content) &&
+ typeof content === 'object' &&
+ 'root' in content &&
+ serializeLexical({ nodes: content?.root?.children })}
+
+ )
+}
+
+export default RichText
diff --git a/templates/with-vercel-website/src/components/RichText/nodeFormat.tsx b/templates/with-vercel-website/src/components/RichText/nodeFormat.tsx
new file mode 100644
index 000000000..5d5ff5917
--- /dev/null
+++ b/templates/with-vercel-website/src/components/RichText/nodeFormat.tsx
@@ -0,0 +1,125 @@
+// @ts-nocheck
+//This copy-and-pasted from lexical here: https://github.com/facebook/lexical/blob/c2ceee223f46543d12c574e62155e619f9a18a5d/packages/lexical/src/LexicalConstants.ts
+
+import type { ElementFormatType, TextFormatType } from 'lexical'
+import type { TextDetailType, TextModeType } from 'lexical/nodes/LexicalTextNode'
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// DOM
+export const DOM_ELEMENT_TYPE = 1
+export const DOM_TEXT_TYPE = 3
+
+// Reconciling
+export const NO_DIRTY_NODES = 0
+export const HAS_DIRTY_NODES = 1
+export const FULL_RECONCILE = 2
+
+// Text node modes
+export const IS_NORMAL = 0
+export const IS_TOKEN = 1
+export const IS_SEGMENTED = 2
+// IS_INERT = 3
+
+// Text node formatting
+export const IS_BOLD = 1
+export const IS_ITALIC = 1 << 1
+export const IS_STRIKETHROUGH = 1 << 2
+export const IS_UNDERLINE = 1 << 3
+export const IS_CODE = 1 << 4
+export const IS_SUBSCRIPT = 1 << 5
+export const IS_SUPERSCRIPT = 1 << 6
+export const IS_HIGHLIGHT = 1 << 7
+
+export const IS_ALL_FORMATTING =
+ IS_BOLD |
+ IS_ITALIC |
+ IS_STRIKETHROUGH |
+ IS_UNDERLINE |
+ IS_CODE |
+ IS_SUBSCRIPT |
+ IS_SUPERSCRIPT |
+ IS_HIGHLIGHT
+
+// Text node details
+export const IS_DIRECTIONLESS = 1
+export const IS_UNMERGEABLE = 1 << 1
+
+// Element node formatting
+export const IS_ALIGN_LEFT = 1
+export const IS_ALIGN_CENTER = 2
+export const IS_ALIGN_RIGHT = 3
+export const IS_ALIGN_JUSTIFY = 4
+export const IS_ALIGN_START = 5
+export const IS_ALIGN_END = 6
+
+// Reconciliation
+export const NON_BREAKING_SPACE = '\u00A0'
+const ZERO_WIDTH_SPACE = '\u200b'
+
+export const DOUBLE_LINE_BREAK = '\n\n'
+
+// For FF, we need to use a non-breaking space, or it gets composition
+// in a stuck state.
+
+const RTL = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC'
+const LTR =
+ 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6' +
+ '\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u200E\u2C00-\uFB1C' +
+ '\uFE00-\uFE6F\uFEFD-\uFFFF'
+
+export const RTL_REGEX = new RegExp('^[^' + LTR + ']*[' + RTL + ']')
+
+export const LTR_REGEX = new RegExp('^[^' + RTL + ']*[' + LTR + ']')
+
+export const TEXT_TYPE_TO_FORMAT: Record{node.text}
+ }
+ if (node.format & IS_SUBSCRIPT) {
+ text = {text}
+ }
+ if (node.format & IS_SUPERSCRIPT) {
+ text = {text}
+ }
+
+ return text
+ }
+
+ // NOTE: Hacky fix for
+ // https://github.com/facebook/lexical/blob/d10c4e6e55261b2fdd7d1845aed46151d0f06a8c/packages/lexical-list/src/LexicalListItemNode.ts#L133
+ // which does not return checked: false (only true - i.e. there is no prop for false)
+ const serializedChildrenFn = (node: NodeTypes): JSX.Element | null => {
+ if (node.children == null) {
+ return null
+ } else {
+ if (node?.type === 'list' && node?.listType === 'check') {
+ for (const item of node.children) {
+ if ('checked' in item) {
+ if (!item?.checked) {
+ item.checked = false
+ }
+ }
+ }
+ }
+ return serializeLexical({ nodes: node.children as NodeTypes[] })
+ }
+ }
+
+ const serializedChildren = 'children' in node ? serializedChildrenFn(node) : ''
+
+ if (node.type === 'block') {
+ const block = node.fields
+
+ const blockType = block?.blockType
+
+ if (!block || !blockType) {
+ return null
+ }
+
+ switch (blockType) {
+ case 'cta':
+ return + } + case 'paragraph': { + return ( +
+ {serializedChildren} +
+ ) + } + case 'heading': { + const Tag = node?.tag + return ( ++ {serializedChildren} ++ ) + } + case 'link': { + const fields = node.fields + + return ( +