refactor: migrate to pnpm monorepo with Payload CMS backend and Astro frontend to support scalable website development and AI-assisted workflows

apps/backend/src/Footer/Component.tsx

@@ -0,0 +1,34 @@
+import { getCachedGlobal } from '@/utilities/getGlobals'
+import Link from 'next/link'
+import React from 'react'
+
+import type { Footer } from '@/payload-types'
+
+import { ThemeSelector } from '@/providers/Theme/ThemeSelector'
+import { CMSLink } from '@/components/Link'
+import { Logo } from '@/components/Logo/Logo'
+
+export async function Footer() {
+  const footerData: Footer = await getCachedGlobal('footer', 1)()
+
+  const navItems = footerData?.navItems || []
+
+  return (
+    <footer className="mt-auto border-t border-border bg-black dark:bg-card text-white">
+      <div className="container py-8 gap-8 flex flex-col md:flex-row md:justify-between">
+        <Link className="flex items-center" href="/">
+          <Logo />
+        </Link>
+
+        <div className="flex flex-col-reverse items-start md:flex-row gap-4 md:items-center">
+          <ThemeSelector />
+          <nav className="flex flex-col md:flex-row gap-4">
+            {navItems.map(({ link }, i) => {
+              return <CMSLink className="text-white" key={i} {...link} />
+            })}
+          </nav>
+        </div>
+      </div>
+    </footer>
+  )
+}

apps/backend/src/Footer/RowLabel.tsx

@@ -0,0 +1,13 @@
+'use client'
+import { Header } from '@/payload-types'
+import { RowLabelProps, useRowLabel } from '@payloadcms/ui'
+
+export const RowLabel: React.FC<RowLabelProps> = () => {
+  const data = useRowLabel<NonNullable<Header['navItems']>[number]>()
+
+  const label = data?.data?.link?.label
+    ? `Nav item ${data.rowNumber !== undefined ? data.rowNumber + 1 : ''}: ${data?.data?.link?.label}`
+    : 'Row'
+
+  return <div>{label}</div>
+}

apps/backend/src/Footer/config.ts

@@ -0,0 +1,32 @@
+import type { GlobalConfig } from 'payload'
+
+import { link } from '@/fields/link'
+import { revalidateFooter } from './hooks/revalidateFooter'
+
+export const Footer: GlobalConfig = {
+  slug: 'footer',
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: 'navItems',
+      type: 'array',
+      fields: [
+        link({
+          appearances: false,
+        }),
+      ],
+      maxRows: 6,
+      admin: {
+        initCollapsed: true,
+        components: {
+          RowLabel: '@/Footer/RowLabel#RowLabel',
+        },
+      },
+    },
+  ],
+  hooks: {
+    afterChange: [revalidateFooter],
+  },
+}

apps/backend/src/Footer/hooks/revalidateFooter.ts

@@ -0,0 +1,13 @@
+import type { GlobalAfterChangeHook } from 'payload'
+
+import { revalidateTag } from 'next/cache'
+
+export const revalidateFooter: GlobalAfterChangeHook = ({ doc, req: { payload, context } }) => {
+  if (!context.disableRevalidate) {
+    payload.logger.info(`Revalidating footer`)
+
+    revalidateTag('global_footer')
+  }
+
+  return doc
+}

apps/backend/src/Header/Component.client.tsx

@@ -0,0 +1,42 @@
+'use client'
+import { useHeaderTheme } from '@/providers/HeaderTheme'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import React, { useEffect, useState } from 'react'
+
+import type { Header } from '@/payload-types'
+
+import { Logo } from '@/components/Logo/Logo'
+import { HeaderNav } from './Nav'
+
+interface HeaderClientProps {
+  data: Header
+}
+
+export const HeaderClient: React.FC<HeaderClientProps> = ({ data }) => {
+  /* Storing the value in a useState to avoid hydration errors */
+  const [theme, setTheme] = useState<string | null>(null)
+  const { headerTheme, setHeaderTheme } = useHeaderTheme()
+  const pathname = usePathname()
+
+  useEffect(() => {
+    setHeaderTheme(null)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname])
+
+  useEffect(() => {
+    if (headerTheme && headerTheme !== theme) setTheme(headerTheme)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [headerTheme])
+
+  return (
+    <header className="container relative z-20   " {...(theme ? { 'data-theme': theme } : {})}>
+      <div className="py-8 flex justify-between">
+        <Link href="/">
+          <Logo loading="eager" priority="high" className="invert dark:invert-0" />
+        </Link>
+        <HeaderNav data={data} />
+      </div>
+    </header>
+  )
+}

apps/backend/src/Header/Component.tsx

@@ -0,0 +1,11 @@
+import { HeaderClient } from './Component.client'
+import { getCachedGlobal } from '@/utilities/getGlobals'
+import React from 'react'
+
+import type { Header } from '@/payload-types'
+
+export async function Header() {
+  const headerData: Header = await getCachedGlobal('header', 1)()
+
+  return <HeaderClient data={headerData} />
+}

apps/backend/src/Header/Nav/index.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import React from 'react'
+
+import type { Header as HeaderType } from '@/payload-types'
+
+import { CMSLink } from '@/components/Link'
+import Link from 'next/link'
+import { SearchIcon } from 'lucide-react'
+
+export const HeaderNav: React.FC<{ data: HeaderType }> = ({ data }) => {
+  const navItems = data?.navItems || []
+
+  return (
+    <nav className="flex gap-3 items-center">
+      {navItems.map(({ link }, i) => {
+        return <CMSLink key={i} {...link} appearance="link" />
+      })}
+      <Link href="/search">
+        <span className="sr-only">Search</span>
+        <SearchIcon className="w-5 text-primary" />
+      </Link>
+    </nav>
+  )
+}

apps/backend/src/Header/RowLabel.tsx

@@ -0,0 +1,13 @@
+'use client'
+import { Header } from '@/payload-types'
+import { RowLabelProps, useRowLabel } from '@payloadcms/ui'
+
+export const RowLabel: React.FC<RowLabelProps> = () => {
+  const data = useRowLabel<NonNullable<Header['navItems']>[number]>()
+
+  const label = data?.data?.link?.label
+    ? `Nav item ${data.rowNumber !== undefined ? data.rowNumber + 1 : ''}: ${data?.data?.link?.label}`
+    : 'Row'
+
+  return <div>{label}</div>
+}

apps/backend/src/Header/config.ts

@@ -0,0 +1,32 @@
+import type { GlobalConfig } from 'payload'
+
+import { link } from '@/fields/link'
+import { revalidateHeader } from './hooks/revalidateHeader'
+
+export const Header: GlobalConfig = {
+  slug: 'header',
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: 'navItems',
+      type: 'array',
+      fields: [
+        link({
+          appearances: false,
+        }),
+      ],
+      maxRows: 6,
+      admin: {
+        initCollapsed: true,
+        components: {
+          RowLabel: '@/Header/RowLabel#RowLabel',
+        },
+      },
+    },
+  ],
+  hooks: {
+    afterChange: [revalidateHeader],
+  },
+}

apps/backend/src/Header/hooks/revalidateHeader.ts

@@ -0,0 +1,13 @@
+import type { GlobalAfterChangeHook } from 'payload'
+
+import { revalidateTag } from 'next/cache'
+
+export const revalidateHeader: GlobalAfterChangeHook = ({ doc, req: { payload, context } }) => {
+  if (!context.disableRevalidate) {
+    payload.logger.info(`Revalidating header`)
+
+    revalidateTag('global_header')
+  }
+
+  return doc
+}

apps/backend/src/access/anyone.ts

@@ -0,0 +1,3 @@
+import type { Access } from 'payload'
+
+export const anyone: Access = () => true

apps/backend/src/access/authenticated.ts

@@ -0,0 +1,9 @@
+import type { AccessArgs } from 'payload'
+
+import type { User } from '@/payload-types'
+
+type isAuthenticated = (args: AccessArgs<User>) => boolean
+
+export const authenticated: isAuthenticated = ({ req: { user } }) => {
+  return Boolean(user)
+}

apps/backend/src/access/authenticatedOrPublished.ts

@@ -0,0 +1,13 @@
+import type { Access } from 'payload'
+
+export const authenticatedOrPublished: Access = ({ req: { user } }) => {
+  if (user) {
+    return true
+  }
+
+  return {
+    _status: {
+      equals: 'published',
+    },
+  }
+}

apps/backend/src/app/(frontend)/(sitemaps)/pages-sitemap.xml/route.ts

@@ -0,0 +1,68 @@
+import { getServerSideSitemap } from 'next-sitemap'
+import { getPayload } from 'payload'
+import config from '@payload-config'
+import { unstable_cache } from 'next/cache'
+
+const getPagesSitemap = unstable_cache(
+  async () => {
+    const payload = await getPayload({ config })
+    const SITE_URL =
+      process.env.NEXT_PUBLIC_SERVER_URL ||
+      process.env.VERCEL_PROJECT_PRODUCTION_URL ||
+      'https://example.com'
+
+    const results = await payload.find({
+      collection: 'pages',
+      overrideAccess: false,
+      draft: false,
+      depth: 0,
+      limit: 1000,
+      pagination: false,
+      where: {
+        _status: {
+          equals: 'published',
+        },
+      },
+      select: {
+        slug: true,
+        updatedAt: true,
+      },
+    })
+
+    const dateFallback = new Date().toISOString()
+
+    const defaultSitemap = [
+      {
+        loc: `${SITE_URL}/search`,
+        lastmod: dateFallback,
+      },
+      {
+        loc: `${SITE_URL}/posts`,
+        lastmod: dateFallback,
+      },
+    ]
+
+    const sitemap = results.docs
+      ? results.docs
+          .filter((page) => Boolean(page?.slug))
+          .map((page) => {
+            return {
+              loc: page?.slug === 'home' ? `${SITE_URL}/` : `${SITE_URL}/${page?.slug}`,
+              lastmod: page.updatedAt || dateFallback,
+            }
+          })
+      : []
+
+    return [...defaultSitemap, ...sitemap]
+  },
+  ['pages-sitemap'],
+  {
+    tags: ['pages-sitemap'],
+  },
+)
+
+export async function GET() {
+  const sitemap = await getPagesSitemap()
+
+  return getServerSideSitemap(sitemap)
+}

apps/backend/src/app/(frontend)/(sitemaps)/posts-sitemap.xml/route.ts

@@ -0,0 +1,55 @@
+import { getServerSideSitemap } from 'next-sitemap'
+import { getPayload } from 'payload'
+import config from '@payload-config'
+import { unstable_cache } from 'next/cache'
+
+const getPostsSitemap = unstable_cache(
+  async () => {
+    const payload = await getPayload({ config })
+    const SITE_URL =
+      process.env.NEXT_PUBLIC_SERVER_URL ||
+      process.env.VERCEL_PROJECT_PRODUCTION_URL ||
+      'https://example.com'
+
+    const results = await payload.find({
+      collection: 'posts',
+      overrideAccess: false,
+      draft: false,
+      depth: 0,
+      limit: 1000,
+      pagination: false,
+      where: {
+        _status: {
+          equals: 'published',
+        },
+      },
+      select: {
+        slug: true,
+        updatedAt: true,
+      },
+    })
+
+    const dateFallback = new Date().toISOString()
+
+    const sitemap = results.docs
+      ? results.docs
+          .filter((post) => Boolean(post?.slug))
+          .map((post) => ({
+            loc: `${SITE_URL}/posts/${post?.slug}`,
+            lastmod: post.updatedAt || dateFallback,
+          }))
+      : []
+
+    return sitemap
+  },
+  ['posts-sitemap'],
+  {
+    tags: ['posts-sitemap'],
+  },
+)
+
+export async function GET() {
+  const sitemap = await getPostsSitemap()
+
+  return getServerSideSitemap(sitemap)
+}

apps/backend/src/app/(frontend)/[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('light')
+  }, [setHeaderTheme])
+  return <React.Fragment />
+}
+
+export default PageClient

apps/backend/src/app/(frontend)/[slug]/page.tsx

@@ -0,0 +1,110 @@
+import type { Metadata } from 'next'
+
+import { PayloadRedirects } from '@/components/PayloadRedirects'
+import configPromise from '@payload-config'
+import { getPayload, type RequiredDataFromCollectionSlug } from 'payload'
+import { draftMode } from 'next/headers'
+import React, { cache } from 'react'
+import { homeStatic } from '@/endpoints/seed/home-static'
+
+import { RenderBlocks } from '@/blocks/RenderBlocks'
+import { RenderHero } from '@/heros/RenderHero'
+import { generateMeta } from '@/utilities/generateMeta'
+import PageClient from './page.client'
+import { LivePreviewListener } from '@/components/LivePreviewListener'
+
+export async function generateStaticParams() {
+  const payload = await getPayload({ config: configPromise })
+  const pages = await payload.find({
+    collection: 'pages',
+    draft: false,
+    limit: 1000,
+    overrideAccess: false,
+    pagination: false,
+    select: {
+      slug: true,
+    },
+  })
+
+  const params = pages.docs
+    ?.filter((doc) => {
+      return doc.slug !== 'home'
+    })
+    .map(({ slug }) => {
+      return { slug }
+    })
+
+  return params
+}
+
+type Args = {
+  params: Promise<{
+    slug?: string
+  }>
+}
+
+export default async function Page({ params: paramsPromise }: Args) {
+  const { isEnabled: draft } = await draftMode()
+  const { slug = 'home' } = await paramsPromise
+  const url = '/' + slug
+
+  let page: RequiredDataFromCollectionSlug<'pages'> | null
+
+  page = await queryPageBySlug({
+    slug,
+  })
+
+  // Remove this code once your website is seeded
+  if (!page && slug === 'home') {
+    page = homeStatic
+  }
+
+  if (!page) {
+    return <PayloadRedirects url={url} />
+  }
+
+  const { hero, layout } = page
+
+  return (
+    <article className="pt-16 pb-24">
+      <PageClient />
+      {/* Allows redirects for valid pages too */}
+      <PayloadRedirects disableNotFound url={url} />
+
+      {draft && <LivePreviewListener />}
+
+      <RenderHero {...hero} />
+      <RenderBlocks blocks={layout} />
+    </article>
+  )
+}
+
+export async function generateMetadata({ params: paramsPromise }: Args): Promise<Metadata> {
+  const { slug = 'home' } = await paramsPromise
+  const page = await queryPageBySlug({
+    slug,
+  })
+
+  return generateMeta({ doc: page })
+}
+
+const queryPageBySlug = cache(async ({ slug }: { slug: string }) => {
+  const { isEnabled: draft } = await draftMode()
+
+  const payload = await getPayload({ config: configPromise })
+
+  const result = await payload.find({
+    collection: 'pages',
+    draft,
+    limit: 1,
+    pagination: false,
+    overrideAccess: draft,
+    where: {
+      slug: {
+        equals: slug,
+      },
+    },
+  })
+
+  return result.docs?.[0] || null
+})

apps/backend/src/app/(frontend)/globals.css

@@ -0,0 +1,103 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: unset;
+    font-weight: unset;
+  }
+
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 240 5% 96%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 240 6% 80%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.2rem;
+
+    --success: 196 52% 74%;
+    --warning: 34 89% 85%;
+    --error: 10 100% 86%;
+  }
+
+  [data-theme='dark'] {
+    --background: 0 0% 0%;
+    --foreground: 210 40% 98%;
+
+    --card: 0 0% 4%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 0, 0%, 15%, 0.8;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+
+    --success: 196 100% 14%;
+    --warning: 34 51% 25%;
+    --error: 10 39% 43%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground min-h-[100vh] flex flex-col;
+  }
+}
+
+html {
+  opacity: 0;
+}
+
+html[data-theme='dark'],
+html[data-theme='light'] {
+  opacity: initial;
+}

apps/backend/src/app/(frontend)/layout.tsx

@@ -0,0 +1,53 @@
+import type { Metadata } from 'next'
+
+import { cn } from '@/utilities/ui'
+import { GeistMono } from 'geist/font/mono'
+import { GeistSans } from 'geist/font/sans'
+import React from 'react'
+
+import { AdminBar } from '@/components/AdminBar'
+import { Footer } from '@/Footer/Component'
+import { Header } from '@/Header/Component'
+import { Providers } from '@/providers'
+import { InitTheme } from '@/providers/Theme/InitTheme'
+import { mergeOpenGraph } from '@/utilities/mergeOpenGraph'
+import { draftMode } from 'next/headers'
+
+import './globals.css'
+import { getServerSideURL } from '@/utilities/getURL'
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const { isEnabled } = await draftMode()
+
+  return (
+    <html className={cn(GeistSans.variable, GeistMono.variable)} lang="en" suppressHydrationWarning>
+      <head>
+        <InitTheme />
+        <link href="/favicon.ico" rel="icon" sizes="32x32" />
+        <link href="/favicon.svg" rel="icon" type="image/svg+xml" />
+      </head>
+      <body>
+        <Providers>
+          <AdminBar
+            adminBarProps={{
+              preview: isEnabled,
+            }}
+          />
+
+          <Header />
+          {children}
+          <Footer />
+        </Providers>
+      </body>
+    </html>
+  )
+}
+
+export const metadata: Metadata = {
+  metadataBase: new URL(getServerSideURL()),
+  openGraph: mergeOpenGraph(),
+  twitter: {
+    card: 'summary_large_image',
+    creator: '@payloadcms',
+  },
+}

apps/backend/src/app/(frontend)/next/exit-preview/route.ts

@@ -0,0 +1,7 @@
+import { draftMode } from 'next/headers'
+
+export async function GET(): Promise<Response> {
+  const draft = await draftMode()
+  draft.disable()
+  return new Response('Draft mode is disabled')
+}

apps/backend/src/app/(frontend)/next/preview/route.ts

@@ -0,0 +1,56 @@
+import type { CollectionSlug, PayloadRequest } from 'payload'
+import { getPayload } from 'payload'
+
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { NextRequest } from 'next/server'
+
+import configPromise from '@payload-config'
+
+export async function GET(req: NextRequest): Promise<Response> {
+  const payload = await getPayload({ config: configPromise })
+
+  const { searchParams } = new URL(req.url)
+
+  const path = searchParams.get('path')
+  const collection = searchParams.get('collection') as CollectionSlug
+  const slug = searchParams.get('slug')
+  const previewSecret = searchParams.get('previewSecret')
+
+  if (previewSecret !== process.env.PREVIEW_SECRET) {
+    return new Response('You are not allowed to preview this page', { status: 403 })
+  }
+
+  if (!path || !collection || !slug) {
+    return new Response('Insufficient search params', { status: 404 })
+  }
+
+  if (!path.startsWith('/')) {
+    return new Response('This endpoint can only be used for relative previews', { status: 500 })
+  }
+
+  let user
+
+  try {
+    user = await payload.auth({
+      req: req as unknown as PayloadRequest,
+      headers: req.headers,
+    })
+  } catch (error) {
+    payload.logger.error({ err: error }, 'Error verifying token for live preview')
+    return new Response('You are not allowed to preview this page', { status: 403 })
+  }
+
+  const draft = await draftMode()
+
+  if (!user) {
+    draft.disable()
+    return new Response('You are not allowed to preview this page', { status: 403 })
+  }
+
+  // You can add additional checks here to see if the user is allowed to preview this page
+
+  draft.enable()
+
+  redirect(path)
+}

apps/backend/src/app/(frontend)/next/seed/route.ts

@@ -0,0 +1,31 @@
+import { createLocalReq, getPayload } from 'payload'
+import { seed } from '@/endpoints/seed'
+import config from '@payload-config'
+import { headers } from 'next/headers'
+
+export const maxDuration = 60 // This function can run for a maximum of 60 seconds
+
+export async function POST(): Promise<Response> {
+  const payload = await getPayload({ config })
+  const requestHeaders = await headers()
+
+  // Authenticate by passing request headers
+  const { user } = await payload.auth({ headers: requestHeaders })
+
+  if (!user) {
+    return new Response('Action forbidden.', { status: 403 })
+  }
+
+  try {
+    // Create a Payload request object to pass to the Local API for transactions
+    // At this point you should pass in a user, locale, and any other context you need for the Local API
+    const payloadReq = await createLocalReq({ user }, payload)
+
+    await seed({ payload, req: payloadReq })
+
+    return Response.json({ success: true })
+  } catch (e) {
+    payload.logger.error({ err: e, message: 'Error seeding data' })
+    return new Response('Error seeding data.', { status: 500 })
+  }
+}

apps/backend/src/app/(frontend)/not-found.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import React from 'react'
+
+import { Button } from '@/components/ui/button'
+
+export default function NotFound() {
+  return (
+    <div className="container py-28">
+      <div className="prose max-w-none">
+        <h1 style={{ marginBottom: 0 }}>404</h1>
+        <p className="mb-4">This page could not be found.</p>
+      </div>
+      <Button asChild variant="default">
+        <Link href="/">Go home</Link>
+      </Button>
+    </div>
+  )
+}

apps/backend/src/app/(frontend)/page.tsx

@@ -0,0 +1,5 @@
+import PageTemplate, { generateMetadata } from './[slug]/page'
+
+export default PageTemplate
+
+export { generateMetadata }

apps/backend/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 <React.Fragment />
+}
+
+export default PageClient

apps/backend/src/app/(frontend)/posts/[slug]/page.tsx

@@ -0,0 +1,104 @@
+import type { Metadata } from 'next'
+
+import { RelatedPosts } from '@/blocks/RelatedPosts/Component'
+import { PayloadRedirects } from '@/components/PayloadRedirects'
+import configPromise from '@payload-config'
+import { getPayload } from 'payload'
+import { draftMode } from 'next/headers'
+import React, { cache } from 'react'
+import RichText from '@/components/RichText'
+
+import type { Post } from '@/payload-types'
+
+import { PostHero } from '@/heros/PostHero'
+import { generateMeta } from '@/utilities/generateMeta'
+import PageClient from './page.client'
+import { LivePreviewListener } from '@/components/LivePreviewListener'
+
+export async function generateStaticParams() {
+  const payload = await getPayload({ config: configPromise })
+  const posts = await payload.find({
+    collection: 'posts',
+    draft: false,
+    limit: 1000,
+    overrideAccess: false,
+    pagination: false,
+    select: {
+      slug: true,
+    },
+  })
+
+  const params = posts.docs.map(({ slug }) => {
+    return { slug }
+  })
+
+  return params
+}
+
+type Args = {
+  params: Promise<{
+    slug?: string
+  }>
+}
+
+export default async function Post({ params: paramsPromise }: Args) {
+  const { isEnabled: draft } = await draftMode()
+  const { slug = '' } = await paramsPromise
+  const url = '/posts/' + slug
+  const post = await queryPostBySlug({ slug })
+
+  if (!post) return <PayloadRedirects url={url} />
+
+  return (
+    <article className="pt-16 pb-16">
+      <PageClient />
+
+      {/* Allows redirects for valid pages too */}
+      <PayloadRedirects disableNotFound url={url} />
+
+      {draft && <LivePreviewListener />}
+
+      <PostHero post={post} />
+
+      <div className="flex flex-col items-center gap-4 pt-8">
+        <div className="container">
+          <RichText className="max-w-[48rem] mx-auto" data={post.content} enableGutter={false} />
+          {post.relatedPosts && post.relatedPosts.length > 0 && (
+            <RelatedPosts
+              className="mt-12 max-w-[52rem] lg:grid lg:grid-cols-subgrid col-start-1 col-span-3 grid-rows-[2fr]"
+              docs={post.relatedPosts.filter((post) => typeof post === 'object')}
+            />
+          )}
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export async function generateMetadata({ params: paramsPromise }: Args): Promise<Metadata> {
+  const { slug = '' } = await paramsPromise
+  const post = await queryPostBySlug({ slug })
+
+  return generateMeta({ doc: post })
+}
+
+const queryPostBySlug = cache(async ({ slug }: { slug: string }) => {
+  const { isEnabled: draft } = await draftMode()
+
+  const payload = await getPayload({ config: configPromise })
+
+  const result = await payload.find({
+    collection: 'posts',
+    draft,
+    limit: 1,
+    overrideAccess: draft,
+    pagination: false,
+    where: {
+      slug: {
+        equals: slug,
+      },
+    },
+  })
+
+  return result.docs?.[0] || null
+})

apps/backend/src/app/(frontend)/posts/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 <React.Fragment />
+}
+
+export default PageClient

apps/backend/src/app/(frontend)/posts/page.tsx

@@ -0,0 +1,63 @@
+import type { Metadata } from 'next/types'
+
+import { CollectionArchive } from '@/components/CollectionArchive'
+import { PageRange } from '@/components/PageRange'
+import { Pagination } from '@/components/Pagination'
+import configPromise from '@payload-config'
+import { getPayload } from 'payload'
+import React from 'react'
+import PageClient from './page.client'
+
+export const dynamic = 'force-static'
+export const revalidate = 600
+
+export default async function Page() {
+  const payload = await getPayload({ config: configPromise })
+
+  const posts = await payload.find({
+    collection: 'posts',
+    depth: 1,
+    limit: 12,
+    overrideAccess: false,
+    select: {
+      title: true,
+      slug: true,
+      categories: true,
+      meta: true,
+    },
+  })
+
+  return (
+    <div className="pt-24 pb-24">
+      <PageClient />
+      <div className="container mb-16">
+        <div className="prose dark:prose-invert max-w-none">
+          <h1>Posts</h1>
+        </div>
+      </div>
+
+      <div className="container mb-8">
+        <PageRange
+          collection="posts"
+          currentPage={posts.page}
+          limit={12}
+          totalDocs={posts.totalDocs}
+        />
+      </div>
+
+      <CollectionArchive posts={posts.docs} />
+
+      <div className="container">
+        {posts.totalPages > 1 && posts.page && (
+          <Pagination page={posts.page} totalPages={posts.totalPages} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function generateMetadata(): Metadata {
+  return {
+    title: `Payload Website Template Posts`,
+  }
+}

apps/backend/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 <React.Fragment />
+}
+
+export default PageClient

apps/backend/src/app/(frontend)/posts/page/[pageNumber]/page.tsx

@@ -0,0 +1,88 @@
+import type { Metadata } from 'next/types'
+
+import { CollectionArchive } from '@/components/CollectionArchive'
+import { PageRange } from '@/components/PageRange'
+import { Pagination } from '@/components/Pagination'
+import configPromise from '@payload-config'
+import { getPayload } from 'payload'
+import React from 'react'
+import PageClient from './page.client'
+import { notFound } from 'next/navigation'
+
+export const revalidate = 600
+
+type Args = {
+  params: Promise<{
+    pageNumber: string
+  }>
+}
+
+export default async function Page({ params: paramsPromise }: Args) {
+  const { pageNumber } = await paramsPromise
+  const payload = await getPayload({ config: configPromise })
+
+  const sanitizedPageNumber = Number(pageNumber)
+
+  if (!Number.isInteger(sanitizedPageNumber)) notFound()
+
+  const posts = await payload.find({
+    collection: 'posts',
+    depth: 1,
+    limit: 12,
+    page: sanitizedPageNumber,
+    overrideAccess: false,
+  })
+
+  return (
+    <div className="pt-24 pb-24">
+      <PageClient />
+      <div className="container mb-16">
+        <div className="prose dark:prose-invert max-w-none">
+          <h1>Posts</h1>
+        </div>
+      </div>
+
+      <div className="container mb-8">
+        <PageRange
+          collection="posts"
+          currentPage={posts.page}
+          limit={12}
+          totalDocs={posts.totalDocs}
+        />
+      </div>
+
+      <CollectionArchive posts={posts.docs} />
+
+      <div className="container">
+        {posts?.page && posts?.totalPages > 1 && (
+          <Pagination page={posts.page} totalPages={posts.totalPages} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export async function generateMetadata({ params: paramsPromise }: Args): Promise<Metadata> {
+  const { pageNumber } = await paramsPromise
+  return {
+    title: `Payload Website Template Posts Page ${pageNumber || ''}`,
+  }
+}
+
+export async function generateStaticParams() {
+  const payload = await getPayload({ config: configPromise })
+  const { totalDocs } = await payload.count({
+    collection: 'posts',
+    overrideAccess: false,
+  })
+
+  const totalPages = Math.ceil(totalDocs / 10)
+
+  const pages: { pageNumber: string }[] = []
+
+  for (let i = 1; i <= totalPages; i++) {
+    pages.push({ pageNumber: String(i) })
+  }
+
+  return pages
+}

apps/backend/src/app/(frontend)/search/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 <React.Fragment />
+}
+
+export default PageClient

apps/backend/src/app/(frontend)/search/page.tsx

@@ -0,0 +1,88 @@
+import type { Metadata } from 'next/types'
+
+import { CollectionArchive } from '@/components/CollectionArchive'
+import configPromise from '@payload-config'
+import { getPayload } from 'payload'
+import React from 'react'
+import { Search } from '@/search/Component'
+import PageClient from './page.client'
+import { CardPostData } from '@/components/Card'
+
+type Args = {
+  searchParams: Promise<{
+    q: string
+  }>
+}
+export default async function Page({ searchParams: searchParamsPromise }: Args) {
+  const { q: query } = await searchParamsPromise
+  const payload = await getPayload({ config: configPromise })
+
+  const posts = await payload.find({
+    collection: 'search',
+    depth: 1,
+    limit: 12,
+    select: {
+      title: true,
+      slug: true,
+      categories: true,
+      meta: true,
+    },
+    // pagination: false reduces overhead if you don't need totalDocs
+    pagination: false,
+    ...(query
+      ? {
+          where: {
+            or: [
+              {
+                title: {
+                  like: query,
+                },
+              },
+              {
+                'meta.description': {
+                  like: query,
+                },
+              },
+              {
+                'meta.title': {
+                  like: query,
+                },
+              },
+              {
+                slug: {
+                  like: query,
+                },
+              },
+            ],
+          },
+        }
+      : {}),
+  })
+
+  return (
+    <div className="pt-24 pb-24">
+      <PageClient />
+      <div className="container mb-16">
+        <div className="prose dark:prose-invert max-w-none text-center">
+          <h1 className="mb-8 lg:mb-16">Search</h1>
+
+          <div className="max-w-[50rem] mx-auto">
+            <Search />
+          </div>
+        </div>
+      </div>
+
+      {posts.totalDocs > 0 ? (
+        <CollectionArchive posts={posts.docs as CardPostData[]} />
+      ) : (
+        <div className="container">No results found.</div>
+      )}
+    </div>
+  )
+}
+
+export function generateMetadata(): Metadata {
+  return {
+    title: `Payload Website Template Search`,
+  }
+}

apps/backend/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<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const NotFound = ({ params, searchParams }: Args) =>
+  NotFoundPage({ config, params, searchParams, importMap })
+
+export default NotFound

apps/backend/src/app/(payload)/admin/[[...segments]]/page.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 { RootPage, 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<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const Page = ({ params, searchParams }: Args) =>
+  RootPage({ config, params, searchParams, importMap })
+
+export default Page

apps/backend/src/app/(payload)/admin/importMap.js

@@ -0,0 +1,71 @@
+import { RscEntryLexicalCell as RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
+import { RscEntryLexicalField as RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
+import { LexicalDiffComponent as LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
+import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { FixedToolbarFeatureClient as FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { HeadingFeatureClient as HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { LinkFeatureClient as LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { OverviewComponent as OverviewComponent_a8a977ebc872c5d5ea7ee689724c0860 } from '@payloadcms/plugin-seo/client'
+import { MetaTitleComponent as MetaTitleComponent_a8a977ebc872c5d5ea7ee689724c0860 } from '@payloadcms/plugin-seo/client'
+import { MetaImageComponent as MetaImageComponent_a8a977ebc872c5d5ea7ee689724c0860 } from '@payloadcms/plugin-seo/client'
+import { MetaDescriptionComponent as MetaDescriptionComponent_a8a977ebc872c5d5ea7ee689724c0860 } from '@payloadcms/plugin-seo/client'
+import { PreviewComponent as PreviewComponent_a8a977ebc872c5d5ea7ee689724c0860 } from '@payloadcms/plugin-seo/client'
+import { SlugComponent as SlugComponent_92cc057d0a2abb4f6cf0307edf59f986 } from '@/fields/slug/SlugComponent'
+import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { BlocksFeatureClient as BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { LinkToDoc as LinkToDoc_aead06e4cbf6b2620c5c51c9ab283634 } from '@payloadcms/plugin-search/client'
+import { ReindexButton as ReindexButton_aead06e4cbf6b2620c5c51c9ab283634 } from '@payloadcms/plugin-search/client'
+import { RowLabel as RowLabel_ec255a65fa6fa8d1faeb09cf35284224 } from '@/Header/RowLabel'
+import { RowLabel as RowLabel_1f6ff6ff633e3695d348f4f3c58f1466 } from '@/Footer/RowLabel'
+import { default as default_1a7510af427896d367a49dbf838d2de6 } from '@/components/BeforeDashboard'
+import { default as default_8a7ab0eb7ab5c511aba12e68480bfe5e } from '@/components/BeforeLogin'
+
+export const importMap = {
+  '@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell':
+    RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
+  '@payloadcms/richtext-lexical/rsc#RscEntryLexicalField':
+    RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e,
+  '@payloadcms/richtext-lexical/rsc#LexicalDiffComponent':
+    LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e,
+  '@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient':
+    InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  '@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient':
+    FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  '@payloadcms/richtext-lexical/client#HeadingFeatureClient':
+    HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  '@payloadcms/richtext-lexical/client#ParagraphFeatureClient':
+    ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  '@payloadcms/richtext-lexical/client#UnderlineFeatureClient':
+    UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  '@payloadcms/richtext-lexical/client#BoldFeatureClient':
+    BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  '@payloadcms/richtext-lexical/client#ItalicFeatureClient':
+    ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  '@payloadcms/richtext-lexical/client#LinkFeatureClient':
+    LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  '@payloadcms/plugin-seo/client#OverviewComponent':
+    OverviewComponent_a8a977ebc872c5d5ea7ee689724c0860,
+  '@payloadcms/plugin-seo/client#MetaTitleComponent':
+    MetaTitleComponent_a8a977ebc872c5d5ea7ee689724c0860,
+  '@payloadcms/plugin-seo/client#MetaImageComponent':
+    MetaImageComponent_a8a977ebc872c5d5ea7ee689724c0860,
+  '@payloadcms/plugin-seo/client#MetaDescriptionComponent':
+    MetaDescriptionComponent_a8a977ebc872c5d5ea7ee689724c0860,
+  '@payloadcms/plugin-seo/client#PreviewComponent':
+    PreviewComponent_a8a977ebc872c5d5ea7ee689724c0860,
+  '@/fields/slug/SlugComponent#SlugComponent': SlugComponent_92cc057d0a2abb4f6cf0307edf59f986,
+  '@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient':
+    HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  '@payloadcms/richtext-lexical/client#BlocksFeatureClient':
+    BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  '@payloadcms/plugin-search/client#LinkToDoc': LinkToDoc_aead06e4cbf6b2620c5c51c9ab283634,
+  '@payloadcms/plugin-search/client#ReindexButton': ReindexButton_aead06e4cbf6b2620c5c51c9ab283634,
+  '@/Header/RowLabel#RowLabel': RowLabel_ec255a65fa6fa8d1faeb09cf35284224,
+  '@/Footer/RowLabel#RowLabel': RowLabel_1f6ff6ff633e3695d348f4f3c58f1466,
+  '@/components/BeforeDashboard#default': default_1a7510af427896d367a49dbf838d2de6,
+  '@/components/BeforeLogin#default': default_8a7ab0eb7ab5c511aba12e68480bfe5e,
+}

apps/backend/src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,20 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import '@payloadcms/next/css'
+import {
+  REST_DELETE,
+  REST_GET,
+  REST_OPTIONS,
+  REST_PATCH,
+  REST_POST,
+  REST_PUT,
+} from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)
+
+export const PUT = REST_PUT(config)
+export const OPTIONS = REST_OPTIONS(config)

apps/backend/src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,7 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import '@payloadcms/next/css'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

apps/backend/src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,8 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)
+
+export const OPTIONS = REST_OPTIONS(config)

apps/backend/src/app/(payload)/layout.tsx

@@ -0,0 +1,31 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import '@payloadcms/next/css'
+import type { ServerFunctionClient } from 'payload'
+import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
+import React from 'react'
+
+import { importMap } from './admin/importMap.js'
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const serverFunction: ServerFunctionClient = async function (args) {
+  'use server'
+  return handleServerFunctions({
+    ...args,
+    config,
+    importMap,
+  })
+}
+
+const Layout = ({ children }: Args) => (
+  <RootLayout config={config} importMap={importMap} serverFunction={serverFunction}>
+    {children}
+  </RootLayout>
+)
+
+export default Layout

apps/backend/src/blocks/ArchiveBlock/Component.tsx

@@ -0,0 +1,65 @@
+import type { Post, ArchiveBlock as ArchiveBlockProps } from '@/payload-types'
+
+import configPromise from '@payload-config'
+import { getPayload } from 'payload'
+import React from 'react'
+import RichText from '@/components/RichText'
+
+import { CollectionArchive } from '@/components/CollectionArchive'
+
+export const ArchiveBlock: React.FC<
+  ArchiveBlockProps & {
+    id?: string
+  }
+> = async (props) => {
+  const { id, categories, introContent, limit: limitFromProps, populateBy, selectedDocs } = props
+
+  const limit = limitFromProps || 3
+
+  let posts: Post[] = []
+
+  if (populateBy === 'collection') {
+    const payload = await getPayload({ config: configPromise })
+
+    const flattenedCategories = categories?.map((category) => {
+      if (typeof category === 'object') return category.id
+      else return category
+    })
+
+    const fetchedPosts = await payload.find({
+      collection: 'posts',
+      depth: 1,
+      limit,
+      ...(flattenedCategories && flattenedCategories.length > 0
+        ? {
+            where: {
+              categories: {
+                in: flattenedCategories,
+              },
+            },
+          }
+        : {}),
+    })
+
+    posts = fetchedPosts.docs
+  } else {
+    if (selectedDocs?.length) {
+      const filteredSelectedPosts = selectedDocs.map((post) => {
+        if (typeof post.value === 'object') return post.value
+      }) as Post[]
+
+      posts = filteredSelectedPosts
+    }
+  }
+
+  return (
+    <div className="my-16" id={`block-${id}`}>
+      {introContent && (
+        <div className="container mb-16">
+          <RichText className="ms-0 max-w-[48rem]" data={introContent} enableGutter={false} />
+        </div>
+      )}
+      <CollectionArchive posts={posts} />
+    </div>
+  )
+}

apps/backend/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',
+  },
+}

apps/backend/src/blocks/Banner/Component.tsx

@@ -0,0 +1,26 @@
+import type { BannerBlock as BannerBlockProps } from 'src/payload-types'
+
+import { cn } from '@/utilities/ui'
+import React from 'react'
+import RichText from '@/components/RichText'
+
+type Props = {
+  className?: string
+} & BannerBlockProps
+
+export const BannerBlock: React.FC<Props> = ({ className, content, style }) => {
+  return (
+    <div className={cn('mx-auto my-8 w-full', className)}>
+      <div
+        className={cn('border py-3 px-6 flex items-center rounded', {
+          'border-border bg-card': style === 'info',
+          'border-error bg-error/30': style === 'error',
+          'border-success bg-success/30': style === 'success',
+          'border-warning bg-warning/30': style === 'warning',
+        })}
+      >
+        <RichText data={content} enableGutter={false} enableProse={false} />
+      </div>
+    </div>
+  )
+}

apps/backend/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',
+}

apps/backend/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<CTABlockProps> = ({ links, richText }) => {
+  return (
+    <div className="container">
+      <div className="bg-card rounded border-border border p-4 flex flex-col gap-8 md:flex-row md:justify-between md:items-center">
+        <div className="max-w-[48rem] flex items-center">
+          {richText && <RichText className="mb-0" data={richText} enableGutter={false} />}
+        </div>
+        <div className="flex flex-col gap-8">
+          {(links || []).map(({ link }, i) => {
+            return <CMSLink key={i} size="lg" {...link} />
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

apps/backend/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',
+  },
+}

apps/backend/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<Props> = ({ code, language = '' }) => {
+  if (!code) return null
+
+  return (
+    <Highlight code={code} language={language} theme={themes.vsDark}>
+      {({ getLineProps, getTokenProps, tokens }) => (
+        <pre className="bg-black p-4 border text-xs border-border rounded overflow-x-auto">
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ className: 'table-row', line })}>
+              <span className="table-cell select-none text-right text-white/25">{i + 1}</span>
+              <span className="table-cell pl-4">
+                {line.map((token, key) => (
+                  <span key={key} {...getTokenProps({ token })} />
+                ))}
+              </span>
+            </div>
+          ))}
+          <CopyButton code={code} />
+        </pre>
+      )}
+    </Highlight>
+  )
+}

apps/backend/src/blocks/Code/Component.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { Code } from './Component.client'
+
+export type CodeBlockProps = {
+  code: string
+  language?: string
+  blockType: 'code'
+}
+
+type Props = CodeBlockProps & {
+  className?: string
+}
+
+export const CodeBlock: React.FC<Props> = ({ className, code, language }) => {
+  return (
+    <div className={[className, 'not-prose'].filter(Boolean).join(' ')}>
+      <Code code={code} language={language} />
+    </div>
+  )
+}

apps/backend/src/blocks/Code/CopyButton.tsx

@@ -0,0 +1,33 @@
+'use client'
+import { Button } from '@/components/ui/button'
+import { CopyIcon } from '@payloadcms/ui/icons/Copy'
+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 (
+    <div className="flex justify-end align-middle">
+      <Button
+        className="flex gap-1"
+        variant={'secondary'}
+        onClick={async () => {
+          await navigator.clipboard.writeText(code)
+          updateCopyStatus()
+        }}
+      >
+        <p>{text}</p>
+        <CopyIcon />
+      </Button>
+    </div>
+  )
+}

apps/backend/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,
+    },
+  ],
+}

apps/backend/src/blocks/Content/Component.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@/utilities/ui'
+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<ContentBlockProps> = (props) => {
+  const { columns } = props
+
+  const colsSpanClasses = {
+    full: '12',
+    half: '6',
+    oneThird: '4',
+    twoThirds: '8',
+  }
+
+  return (
+    <div className="container my-16">
+      <div className="grid grid-cols-4 lg:grid-cols-12 gap-y-8 gap-x-16">
+        {columns &&
+          columns.length > 0 &&
+          columns.map((col, index) => {
+            const { enableLink, link, richText, size } = col
+
+            return (
+              <div
+                className={cn(`col-span-4 lg:col-span-${colsSpanClasses[size!]}`, {
+                  'md:col-span-2': size !== 'full',
+                })}
+                key={index}
+              >
+                {richText && <RichText data={richText} enableGutter={false} />}
+
+                {enableLink && <CMSLink {...link} />}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}

apps/backend/src/blocks/Content/config.ts

@@ -0,0 +1,79 @@
+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: (_data, siblingData) => {
+          return Boolean(siblingData?.enableLink)
+        },
+      },
+    },
+  }),
+]
+
+export const Content: Block = {
+  slug: 'content',
+  interfaceName: 'ContentBlock',
+  fields: [
+    {
+      name: 'columns',
+      type: 'array',
+      admin: {
+        initCollapsed: true,
+      },
+      fields: columnFields,
+    },
+  ],
+}

apps/backend/src/blocks/Form/Checkbox/index.tsx

@@ -0,0 +1,45 @@
+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>
+    register: UseFormRegister<FieldValues>
+  }
+> = ({ name, defaultValue, errors, label, register, required, width }) => {
+  const props = register(name, { required: required })
+  const { setValue } = useFormContext()
+
+  return (
+    <Width width={width}>
+      <div className="flex items-center gap-2">
+        <CheckboxUi
+          defaultChecked={defaultValue}
+          id={name}
+          {...props}
+          onCheckedChange={(checked) => {
+            setValue(props.name, checked)
+          }}
+        />
+        <Label htmlFor={name}>
+          {required && (
+            <span className="required">
+              * <span className="sr-only">(required)</span>
+            </span>
+          )}
+          {label}
+        </Label>
+      </div>
+      {errors[name] && <Error name={name} />}
+    </Width>
+  )
+}

apps/backend/src/blocks/Form/Component.tsx

@@ -0,0 +1,163 @@
+'use client'
+import type { FormFieldBlock, Form as FormType } from '@payloadcms/plugin-form-builder/types'
+
+import { useRouter } from 'next/navigation'
+import React, { useCallback, useState } from 'react'
+import { useForm, FormProvider } from 'react-hook-form'
+import RichText from '@/components/RichText'
+import { Button } from '@/components/ui/button'
+import type { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
+
+import { fields } from './fields'
+import { getClientSideURL } from '@/utilities/getURL'
+
+export type FormBlockType = {
+  blockName?: string
+  blockType?: 'formBlock'
+  enableIntro: boolean
+  form: FormType
+  introContent?: DefaultTypedEditorState
+}
+
+export const FormBlock: React.FC<
+  {
+    id?: string
+  } & FormBlockType
+> = (props) => {
+  const {
+    enableIntro,
+    form: formFromProps,
+    form: { id: formID, confirmationMessage, confirmationType, redirect, submitButtonLabel } = {},
+    introContent,
+  } = props
+
+  const formMethods = useForm({
+    defaultValues: formFromProps.fields,
+  })
+  const {
+    control,
+    formState: { errors },
+    handleSubmit,
+    register,
+  } = formMethods
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [hasSubmitted, setHasSubmitted] = useState<boolean>()
+  const [error, setError] = useState<{ message: string; status?: string } | undefined>()
+  const router = useRouter()
+
+  const onSubmit = useCallback(
+    (data: FormFieldBlock[]) => {
+      let loadingTimerID: ReturnType<typeof setTimeout>
+      const submitForm = async () => {
+        setError(undefined)
+
+        const dataToSend = Object.entries(data).map(([name, value]) => ({
+          field: name,
+          value,
+        }))
+
+        // delay loading indicator by 1s
+        loadingTimerID = setTimeout(() => {
+          setIsLoading(true)
+        }, 1000)
+
+        try {
+          const req = await fetch(`${getClientSideURL()}/api/form-submissions`, {
+            body: JSON.stringify({
+              form: formID,
+              submissionData: dataToSend,
+            }),
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            method: 'POST',
+          })
+
+          const res = await req.json()
+
+          clearTimeout(loadingTimerID)
+
+          if (req.status >= 400) {
+            setIsLoading(false)
+
+            setError({
+              message: res.errors?.[0]?.message || 'Internal Server Error',
+              status: res.status,
+            })
+
+            return
+          }
+
+          setIsLoading(false)
+          setHasSubmitted(true)
+
+          if (confirmationType === 'redirect' && redirect) {
+            const { url } = redirect
+
+            const redirectUrl = url
+
+            if (redirectUrl) router.push(redirectUrl)
+          }
+        } catch (err) {
+          console.warn(err)
+          setIsLoading(false)
+          setError({
+            message: 'Something went wrong.',
+          })
+        }
+      }
+
+      void submitForm()
+    },
+    [router, formID, redirect, confirmationType],
+  )
+
+  return (
+    <div className="container lg:max-w-[48rem]">
+      {enableIntro && introContent && !hasSubmitted && (
+        <RichText className="mb-8 lg:mb-12" data={introContent} enableGutter={false} />
+      )}
+      <div className="p-4 lg:p-6 border border-border rounded-[0.8rem]">
+        <FormProvider {...formMethods}>
+          {!isLoading && hasSubmitted && confirmationType === 'message' && (
+            <RichText data={confirmationMessage} />
+          )}
+          {isLoading && !hasSubmitted && <p>Loading, please wait...</p>}
+          {error && <div>{`${error.status || '500'}: ${error.message || ''}`}</div>}
+          {!hasSubmitted && (
+            <form id={formID} onSubmit={handleSubmit(onSubmit)}>
+              <div className="mb-4 last:mb-0">
+                {formFromProps &&
+                  formFromProps.fields &&
+                  formFromProps.fields?.map((field, index) => {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const Field: React.FC<any> = fields?.[field.blockType as keyof typeof fields]
+                    if (Field) {
+                      return (
+                        <div className="mb-6 last:mb-0" key={index}>
+                          <Field
+                            form={formFromProps}
+                            {...field}
+                            {...formMethods}
+                            control={control}
+                            errors={errors}
+                            register={register}
+                          />
+                        </div>
+                      )
+                    }
+                    return null
+                  })}
+              </div>
+
+              <Button form={formID} type="submit" variant="default">
+                {submitButtonLabel}
+              </Button>
+            </form>
+          )}
+        </FormProvider>
+      </div>
+    </div>
+  )
+}

apps/backend/src/blocks/Form/Country/index.tsx

@@ -0,0 +1,65 @@
+import type { CountryField } from '@payloadcms/plugin-form-builder/types'
+import type { Control, FieldErrorsImpl } 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: Control
+    errors: Partial<FieldErrorsImpl>
+  }
+> = ({ name, control, errors, label, required, width }) => {
+  return (
+    <Width width={width}>
+      <Label className="" htmlFor={name}>
+        {label}
+
+        {required && (
+          <span className="required">
+            * <span className="sr-only">(required)</span>
+          </span>
+        )}
+      </Label>
+      <Controller
+        control={control}
+        defaultValue=""
+        name={name}
+        render={({ field: { onChange, value } }) => {
+          const controlledValue = countryOptions.find((t) => t.value === value)
+
+          return (
+            <Select onValueChange={(val) => onChange(val)} value={controlledValue?.value}>
+              <SelectTrigger className="w-full" id={name}>
+                <SelectValue placeholder={label} />
+              </SelectTrigger>
+              <SelectContent>
+                {countryOptions.map(({ label, value }) => {
+                  return (
+                    <SelectItem key={value} value={value}>
+                      {label}
+                    </SelectItem>
+                  )
+                })}
+              </SelectContent>
+            </Select>
+          )
+        }}
+        rules={{ required }}
+      />
+      {errors[name] && <Error name={name} />}
+    </Width>
+  )
+}

apps/backend/src/blocks/Form/Country/options.ts

@@ -0,0 +1,982 @@
+export const countryOptions = [
+  {
+    label: 'Afghanistan',
+    value: 'AF',
+  },
+  {
+    label: 'Åland Islands',
+    value: 'AX',
+  },
+  {
+    label: 'Albania',
+    value: 'AL',
+  },
+  {
+    label: 'Algeria',
+    value: 'DZ',
+  },
+  {
+    label: 'American Samoa',
+    value: 'AS',
+  },
+  {
+    label: 'Andorra',
+    value: 'AD',
+  },
+  {
+    label: 'Angola',
+    value: 'AO',
+  },
+  {
+    label: 'Anguilla',
+    value: 'AI',
+  },
+  {
+    label: 'Antarctica',
+    value: 'AQ',
+  },
+  {
+    label: 'Antigua and Barbuda',
+    value: 'AG',
+  },
+  {
+    label: 'Argentina',
+    value: 'AR',
+  },
+  {
+    label: 'Armenia',
+    value: 'AM',
+  },
+  {
+    label: 'Aruba',
+    value: 'AW',
+  },
+  {
+    label: 'Australia',
+    value: 'AU',
+  },
+  {
+    label: 'Austria',
+    value: 'AT',
+  },
+  {
+    label: 'Azerbaijan',
+    value: 'AZ',
+  },
+  {
+    label: 'Bahamas',
+    value: 'BS',
+  },
+  {
+    label: 'Bahrain',
+    value: 'BH',
+  },
+  {
+    label: 'Bangladesh',
+    value: 'BD',
+  },
+  {
+    label: 'Barbados',
+    value: 'BB',
+  },
+  {
+    label: 'Belarus',
+    value: 'BY',
+  },
+  {
+    label: 'Belgium',
+    value: 'BE',
+  },
+  {
+    label: 'Belize',
+    value: 'BZ',
+  },
+  {
+    label: 'Benin',
+    value: 'BJ',
+  },
+  {
+    label: 'Bermuda',
+    value: 'BM',
+  },
+  {
+    label: 'Bhutan',
+    value: 'BT',
+  },
+  {
+    label: 'Bolivia',
+    value: 'BO',
+  },
+  {
+    label: 'Bosnia and Herzegovina',
+    value: 'BA',
+  },
+  {
+    label: 'Botswana',
+    value: 'BW',
+  },
+  {
+    label: 'Bouvet Island',
+    value: 'BV',
+  },
+  {
+    label: 'Brazil',
+    value: 'BR',
+  },
+  {
+    label: 'British Indian Ocean Territory',
+    value: 'IO',
+  },
+  {
+    label: 'Brunei Darussalam',
+    value: 'BN',
+  },
+  {
+    label: 'Bulgaria',
+    value: 'BG',
+  },
+  {
+    label: 'Burkina Faso',
+    value: 'BF',
+  },
+  {
+    label: 'Burundi',
+    value: 'BI',
+  },
+  {
+    label: 'Cambodia',
+    value: 'KH',
+  },
+  {
+    label: 'Cameroon',
+    value: 'CM',
+  },
+  {
+    label: 'Canada',
+    value: 'CA',
+  },
+  {
+    label: 'Cape Verde',
+    value: 'CV',
+  },
+  {
+    label: 'Cayman Islands',
+    value: 'KY',
+  },
+  {
+    label: 'Central African Republic',
+    value: 'CF',
+  },
+  {
+    label: 'Chad',
+    value: 'TD',
+  },
+  {
+    label: 'Chile',
+    value: 'CL',
+  },
+  {
+    label: 'China',
+    value: 'CN',
+  },
+  {
+    label: 'Christmas Island',
+    value: 'CX',
+  },
+  {
+    label: 'Cocos (Keeling) Islands',
+    value: 'CC',
+  },
+  {
+    label: 'Colombia',
+    value: 'CO',
+  },
+  {
+    label: 'Comoros',
+    value: 'KM',
+  },
+  {
+    label: 'Congo',
+    value: 'CG',
+  },
+  {
+    label: 'Congo, The Democratic Republic of the',
+    value: 'CD',
+  },
+  {
+    label: 'Cook Islands',
+    value: 'CK',
+  },
+  {
+    label: 'Costa Rica',
+    value: 'CR',
+  },
+  {
+    label: "Cote D'Ivoire",
+    value: 'CI',
+  },
+  {
+    label: 'Croatia',
+    value: 'HR',
+  },
+  {
+    label: 'Cuba',
+    value: 'CU',
+  },
+  {
+    label: 'Cyprus',
+    value: 'CY',
+  },
+  {
+    label: 'Czech Republic',
+    value: 'CZ',
+  },
+  {
+    label: 'Denmark',
+    value: 'DK',
+  },
+  {
+    label: 'Djibouti',
+    value: 'DJ',
+  },
+  {
+    label: 'Dominica',
+    value: 'DM',
+  },
+  {
+    label: 'Dominican Republic',
+    value: 'DO',
+  },
+  {
+    label: 'Ecuador',
+    value: 'EC',
+  },
+  {
+    label: 'Egypt',
+    value: 'EG',
+  },
+  {
+    label: 'El Salvador',
+    value: 'SV',
+  },
+  {
+    label: 'Equatorial Guinea',
+    value: 'GQ',
+  },
+  {
+    label: 'Eritrea',
+    value: 'ER',
+  },
+  {
+    label: 'Estonia',
+    value: 'EE',
+  },
+  {
+    label: 'Ethiopia',
+    value: 'ET',
+  },
+  {
+    label: 'Falkland Islands (Malvinas)',
+    value: 'FK',
+  },
+  {
+    label: 'Faroe Islands',
+    value: 'FO',
+  },
+  {
+    label: 'Fiji',
+    value: 'FJ',
+  },
+  {
+    label: 'Finland',
+    value: 'FI',
+  },
+  {
+    label: 'France',
+    value: 'FR',
+  },
+  {
+    label: 'French Guiana',
+    value: 'GF',
+  },
+  {
+    label: 'French Polynesia',
+    value: 'PF',
+  },
+  {
+    label: 'French Southern Territories',
+    value: 'TF',
+  },
+  {
+    label: 'Gabon',
+    value: 'GA',
+  },
+  {
+    label: 'Gambia',
+    value: 'GM',
+  },
+  {
+    label: 'Georgia',
+    value: 'GE',
+  },
+  {
+    label: 'Germany',
+    value: 'DE',
+  },
+  {
+    label: 'Ghana',
+    value: 'GH',
+  },
+  {
+    label: 'Gibraltar',
+    value: 'GI',
+  },
+  {
+    label: 'Greece',
+    value: 'GR',
+  },
+  {
+    label: 'Greenland',
+    value: 'GL',
+  },
+  {
+    label: 'Grenada',
+    value: 'GD',
+  },
+  {
+    label: 'Guadeloupe',
+    value: 'GP',
+  },
+  {
+    label: 'Guam',
+    value: 'GU',
+  },
+  {
+    label: 'Guatemala',
+    value: 'GT',
+  },
+  {
+    label: 'Guernsey',
+    value: 'GG',
+  },
+  {
+    label: 'Guinea',
+    value: 'GN',
+  },
+  {
+    label: 'Guinea-Bissau',
+    value: 'GW',
+  },
+  {
+    label: 'Guyana',
+    value: 'GY',
+  },
+  {
+    label: 'Haiti',
+    value: 'HT',
+  },
+  {
+    label: 'Heard Island and Mcdonald Islands',
+    value: 'HM',
+  },
+  {
+    label: 'Holy See (Vatican City State)',
+    value: 'VA',
+  },
+  {
+    label: 'Honduras',
+    value: 'HN',
+  },
+  {
+    label: 'Hong Kong',
+    value: 'HK',
+  },
+  {
+    label: 'Hungary',
+    value: 'HU',
+  },
+  {
+    label: 'Iceland',
+    value: 'IS',
+  },
+  {
+    label: 'India',
+    value: 'IN',
+  },
+  {
+    label: 'Indonesia',
+    value: 'ID',
+  },
+  {
+    label: 'Iran, Islamic Republic Of',
+    value: 'IR',
+  },
+  {
+    label: 'Iraq',
+    value: 'IQ',
+  },
+  {
+    label: 'Ireland',
+    value: 'IE',
+  },
+  {
+    label: 'Isle of Man',
+    value: 'IM',
+  },
+  {
+    label: 'Israel',
+    value: 'IL',
+  },
+  {
+    label: 'Italy',
+    value: 'IT',
+  },
+  {
+    label: 'Jamaica',
+    value: 'JM',
+  },
+  {
+    label: 'Japan',
+    value: 'JP',
+  },
+  {
+    label: 'Jersey',
+    value: 'JE',
+  },
+  {
+    label: 'Jordan',
+    value: 'JO',
+  },
+  {
+    label: 'Kazakhstan',
+    value: 'KZ',
+  },
+  {
+    label: 'Kenya',
+    value: 'KE',
+  },
+  {
+    label: 'Kiribati',
+    value: 'KI',
+  },
+  {
+    label: "Democratic People's Republic of Korea",
+    value: 'KP',
+  },
+  {
+    label: 'Korea, Republic of',
+    value: 'KR',
+  },
+  {
+    label: 'Kosovo',
+    value: 'XK',
+  },
+  {
+    label: 'Kuwait',
+    value: 'KW',
+  },
+  {
+    label: 'Kyrgyzstan',
+    value: 'KG',
+  },
+  {
+    label: "Lao People's Democratic Republic",
+    value: 'LA',
+  },
+  {
+    label: 'Latvia',
+    value: 'LV',
+  },
+  {
+    label: 'Lebanon',
+    value: 'LB',
+  },
+  {
+    label: 'Lesotho',
+    value: 'LS',
+  },
+  {
+    label: 'Liberia',
+    value: 'LR',
+  },
+  {
+    label: 'Libyan Arab Jamahiriya',
+    value: 'LY',
+  },
+  {
+    label: 'Liechtenstein',
+    value: 'LI',
+  },
+  {
+    label: 'Lithuania',
+    value: 'LT',
+  },
+  {
+    label: 'Luxembourg',
+    value: 'LU',
+  },
+  {
+    label: 'Macao',
+    value: 'MO',
+  },
+  {
+    label: 'Macedonia, The Former Yugoslav Republic of',
+    value: 'MK',
+  },
+  {
+    label: 'Madagascar',
+    value: 'MG',
+  },
+  {
+    label: 'Malawi',
+    value: 'MW',
+  },
+  {
+    label: 'Malaysia',
+    value: 'MY',
+  },
+  {
+    label: 'Maldives',
+    value: 'MV',
+  },
+  {
+    label: 'Mali',
+    value: 'ML',
+  },
+  {
+    label: 'Malta',
+    value: 'MT',
+  },
+  {
+    label: 'Marshall Islands',
+    value: 'MH',
+  },
+  {
+    label: 'Martinique',
+    value: 'MQ',
+  },
+  {
+    label: 'Mauritania',
+    value: 'MR',
+  },
+  {
+    label: 'Mauritius',
+    value: 'MU',
+  },
+  {
+    label: 'Mayotte',
+    value: 'YT',
+  },
+  {
+    label: 'Mexico',
+    value: 'MX',
+  },
+  {
+    label: 'Micronesia, Federated States of',
+    value: 'FM',
+  },
+  {
+    label: 'Moldova, Republic of',
+    value: 'MD',
+  },
+  {
+    label: 'Monaco',
+    value: 'MC',
+  },
+  {
+    label: 'Mongolia',
+    value: 'MN',
+  },
+  {
+    label: 'Montenegro',
+    value: 'ME',
+  },
+  {
+    label: 'Montserrat',
+    value: 'MS',
+  },
+  {
+    label: 'Morocco',
+    value: 'MA',
+  },
+  {
+    label: 'Mozambique',
+    value: 'MZ',
+  },
+  {
+    label: 'Myanmar',
+    value: 'MM',
+  },
+  {
+    label: 'Namibia',
+    value: 'NA',
+  },
+  {
+    label: 'Nauru',
+    value: 'NR',
+  },
+  {
+    label: 'Nepal',
+    value: 'NP',
+  },
+  {
+    label: 'Netherlands',
+    value: 'NL',
+  },
+  {
+    label: 'Netherlands Antilles',
+    value: 'AN',
+  },
+  {
+    label: 'New Caledonia',
+    value: 'NC',
+  },
+  {
+    label: 'New Zealand',
+    value: 'NZ',
+  },
+  {
+    label: 'Nicaragua',
+    value: 'NI',
+  },
+  {
+    label: 'Niger',
+    value: 'NE',
+  },
+  {
+    label: 'Nigeria',
+    value: 'NG',
+  },
+  {
+    label: 'Niue',
+    value: 'NU',
+  },
+  {
+    label: 'Norfolk Island',
+    value: 'NF',
+  },
+  {
+    label: 'Northern Mariana Islands',
+    value: 'MP',
+  },
+  {
+    label: 'Norway',
+    value: 'NO',
+  },
+  {
+    label: 'Oman',
+    value: 'OM',
+  },
+  {
+    label: 'Pakistan',
+    value: 'PK',
+  },
+  {
+    label: 'Palau',
+    value: 'PW',
+  },
+  {
+    label: 'Palestinian Territory, Occupied',
+    value: 'PS',
+  },
+  {
+    label: 'Panama',
+    value: 'PA',
+  },
+  {
+    label: 'Papua New Guinea',
+    value: 'PG',
+  },
+  {
+    label: 'Paraguay',
+    value: 'PY',
+  },
+  {
+    label: 'Peru',
+    value: 'PE',
+  },
+  {
+    label: 'Philippines',
+    value: 'PH',
+  },
+  {
+    label: 'Pitcairn',
+    value: 'PN',
+  },
+  {
+    label: 'Poland',
+    value: 'PL',
+  },
+  {
+    label: 'Portugal',
+    value: 'PT',
+  },
+  {
+    label: 'Puerto Rico',
+    value: 'PR',
+  },
+  {
+    label: 'Qatar',
+    value: 'QA',
+  },
+  {
+    label: 'Reunion',
+    value: 'RE',
+  },
+  {
+    label: 'Romania',
+    value: 'RO',
+  },
+  {
+    label: 'Russian Federation',
+    value: 'RU',
+  },
+  {
+    label: 'Rwanda',
+    value: 'RW',
+  },
+  {
+    label: 'Saint Helena',
+    value: 'SH',
+  },
+  {
+    label: 'Saint Kitts and Nevis',
+    value: 'KN',
+  },
+  {
+    label: 'Saint Lucia',
+    value: 'LC',
+  },
+  {
+    label: 'Saint Pierre and Miquelon',
+    value: 'PM',
+  },
+  {
+    label: 'Saint Vincent and the Grenadines',
+    value: 'VC',
+  },
+  {
+    label: 'Samoa',
+    value: 'WS',
+  },
+  {
+    label: 'San Marino',
+    value: 'SM',
+  },
+  {
+    label: 'Sao Tome and Principe',
+    value: 'ST',
+  },
+  {
+    label: 'Saudi Arabia',
+    value: 'SA',
+  },
+  {
+    label: 'Senegal',
+    value: 'SN',
+  },
+  {
+    label: 'Serbia',
+    value: 'RS',
+  },
+  {
+    label: 'Seychelles',
+    value: 'SC',
+  },
+  {
+    label: 'Sierra Leone',
+    value: 'SL',
+  },
+  {
+    label: 'Singapore',
+    value: 'SG',
+  },
+  {
+    label: 'Slovakia',
+    value: 'SK',
+  },
+  {
+    label: 'Slovenia',
+    value: 'SI',
+  },
+  {
+    label: 'Solomon Islands',
+    value: 'SB',
+  },
+  {
+    label: 'Somalia',
+    value: 'SO',
+  },
+  {
+    label: 'South Africa',
+    value: 'ZA',
+  },
+  {
+    label: 'South Georgia and the South Sandwich Islands',
+    value: 'GS',
+  },
+  {
+    label: 'Spain',
+    value: 'ES',
+  },
+  {
+    label: 'Sri Lanka',
+    value: 'LK',
+  },
+  {
+    label: 'Sudan',
+    value: 'SD',
+  },
+  {
+    label: 'Suriname',
+    value: 'SR',
+  },
+  {
+    label: 'Svalbard and Jan Mayen',
+    value: 'SJ',
+  },
+  {
+    label: 'Swaziland',
+    value: 'SZ',
+  },
+  {
+    label: 'Sweden',
+    value: 'SE',
+  },
+  {
+    label: 'Switzerland',
+    value: 'CH',
+  },
+  {
+    label: 'Syrian Arab Republic',
+    value: 'SY',
+  },
+  {
+    label: 'Taiwan',
+    value: 'TW',
+  },
+  {
+    label: 'Tajikistan',
+    value: 'TJ',
+  },
+  {
+    label: 'Tanzania, United Republic of',
+    value: 'TZ',
+  },
+  {
+    label: 'Thailand',
+    value: 'TH',
+  },
+  {
+    label: 'Timor-Leste',
+    value: 'TL',
+  },
+  {
+    label: 'Togo',
+    value: 'TG',
+  },
+  {
+    label: 'Tokelau',
+    value: 'TK',
+  },
+  {
+    label: 'Tonga',
+    value: 'TO',
+  },
+  {
+    label: 'Trinidad and Tobago',
+    value: 'TT',
+  },
+  {
+    label: 'Tunisia',
+    value: 'TN',
+  },
+  {
+    label: 'Turkey',
+    value: 'TR',
+  },
+  {
+    label: 'Turkmenistan',
+    value: 'TM',
+  },
+  {
+    label: 'Turks and Caicos Islands',
+    value: 'TC',
+  },
+  {
+    label: 'Tuvalu',
+    value: 'TV',
+  },
+  {
+    label: 'Uganda',
+    value: 'UG',
+  },
+  {
+    label: 'Ukraine',
+    value: 'UA',
+  },
+  {
+    label: 'United Arab Emirates',
+    value: 'AE',
+  },
+  {
+    label: 'United Kingdom',
+    value: 'GB',
+  },
+  {
+    label: 'United States',
+    value: 'US',
+  },
+  {
+    label: 'United States Minor Outlying Islands',
+    value: 'UM',
+  },
+  {
+    label: 'Uruguay',
+    value: 'UY',
+  },
+  {
+    label: 'Uzbekistan',
+    value: 'UZ',
+  },
+  {
+    label: 'Vanuatu',
+    value: 'VU',
+  },
+  {
+    label: 'Venezuela',
+    value: 'VE',
+  },
+  {
+    label: 'Viet Nam',
+    value: 'VN',
+  },
+  {
+    label: 'Virgin Islands, British',
+    value: 'VG',
+  },
+  {
+    label: 'Virgin Islands, U.S.',
+    value: 'VI',
+  },
+  {
+    label: 'Wallis and Futuna',
+    value: 'WF',
+  },
+  {
+    label: 'Western Sahara',
+    value: 'EH',
+  },
+  {
+    label: 'Yemen',
+    value: 'YE',
+  },
+  {
+    label: 'Zambia',
+    value: 'ZM',
+  },
+  {
+    label: 'Zimbabwe',
+    value: 'ZW',
+  },
+]

apps/backend/src/blocks/Form/Email/index.tsx

@@ -0,0 +1,38 @@
+import type { EmailField } from '@payloadcms/plugin-form-builder/types'
+import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form'
+
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import React from 'react'
+
+import { Error } from '../Error'
+import { Width } from '../Width'
+
+export const Email: React.FC<
+  EmailField & {
+    errors: Partial<FieldErrorsImpl>
+    register: UseFormRegister<FieldValues>
+  }
+> = ({ name, defaultValue, errors, label, register, required, width }) => {
+  return (
+    <Width width={width}>
+      <Label htmlFor={name}>
+        {label}
+
+        {required && (
+          <span className="required">
+            * <span className="sr-only">(required)</span>
+          </span>
+        )}
+      </Label>
+      <Input
+        defaultValue={defaultValue}
+        id={name}
+        type="text"
+        {...register(name, { pattern: /^\S[^\s@]*@\S+$/, required })}
+      />
+
+      {errors[name] && <Error name={name} />}
+    </Width>
+  )
+}

apps/backend/src/blocks/Form/Error/index.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import * as React from 'react'
+import { useFormContext } from 'react-hook-form'
+
+export const Error = ({ name }: { name: string }) => {
+  const {
+    formState: { errors },
+  } = useFormContext()
+  return (
+    <div className="mt-2 text-red-500 text-sm">
+      {(errors[name]?.message as string) || 'This field is required'}
+    </div>
+  )
+}

apps/backend/src/blocks/Form/Message/index.tsx

@@ -0,0 +1,13 @@
+import RichText from '@/components/RichText'
+import React from 'react'
+
+import { Width } from '../Width'
+import { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
+
+export const Message: React.FC<{ message: DefaultTypedEditorState }> = ({ message }) => {
+  return (
+    <Width className="my-12" width="100">
+      {message && <RichText data={message} />}
+    </Width>
+  )
+}

apps/backend/src/blocks/Form/Number/index.tsx

@@ -0,0 +1,36 @@
+import type { TextField } from '@payloadcms/plugin-form-builder/types'
+import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form'
+
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import React from 'react'
+
+import { Error } from '../Error'
+import { Width } from '../Width'
+export const Number: React.FC<
+  TextField & {
+    errors: Partial<FieldErrorsImpl>
+    register: UseFormRegister<FieldValues>
+  }
+> = ({ name, defaultValue, errors, label, register, required, width }) => {
+  return (
+    <Width width={width}>
+      <Label htmlFor={name}>
+        {label}
+
+        {required && (
+          <span className="required">
+            * <span className="sr-only">(required)</span>
+          </span>
+        )}
+      </Label>
+      <Input
+        defaultValue={defaultValue}
+        id={name}
+        type="number"
+        {...register(name, { required })}
+      />
+      {errors[name] && <Error name={name} />}
+    </Width>
+  )
+}

apps/backend/src/blocks/Form/Select/index.tsx

@@ -0,0 +1,63 @@
+import type { SelectField } from '@payloadcms/plugin-form-builder/types'
+import type { Control, FieldErrorsImpl } from 'react-hook-form'
+
+import { Label } from '@/components/ui/label'
+import {
+  Select as SelectComponent,
+  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'
+
+export const Select: React.FC<
+  SelectField & {
+    control: Control
+    errors: Partial<FieldErrorsImpl>
+  }
+> = ({ name, control, errors, label, options, required, width, defaultValue }) => {
+  return (
+    <Width width={width}>
+      <Label htmlFor={name}>
+        {label}
+        {required && (
+          <span className="required">
+            * <span className="sr-only">(required)</span>
+          </span>
+        )}
+      </Label>
+      <Controller
+        control={control}
+        defaultValue={defaultValue}
+        name={name}
+        render={({ field: { onChange, value } }) => {
+          const controlledValue = options.find((t) => t.value === value)
+
+          return (
+            <SelectComponent onValueChange={(val) => onChange(val)} value={controlledValue?.value}>
+              <SelectTrigger className="w-full" id={name}>
+                <SelectValue placeholder={label} />
+              </SelectTrigger>
+              <SelectContent>
+                {options.map(({ label, value }) => {
+                  return (
+                    <SelectItem key={value} value={value}>
+                      {label}
+                    </SelectItem>
+                  )
+                })}
+              </SelectContent>
+            </SelectComponent>
+          )
+        }}
+        rules={{ required }}
+      />
+      {errors[name] && <Error name={name} />}
+    </Width>
+  )
+}

apps/backend/src/blocks/Form/State/index.tsx

@@ -0,0 +1,64 @@
+import type { StateField } from '@payloadcms/plugin-form-builder/types'
+import type { Control, FieldErrorsImpl } 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 { stateOptions } from './options'
+
+export const State: React.FC<
+  StateField & {
+    control: Control
+    errors: Partial<FieldErrorsImpl>
+  }
+> = ({ name, control, errors, label, required, width }) => {
+  return (
+    <Width width={width}>
+      <Label htmlFor={name}>
+        {label}
+        {required && (
+          <span className="required">
+            * <span className="sr-only">(required)</span>
+          </span>
+        )}
+      </Label>
+      <Controller
+        control={control}
+        defaultValue=""
+        name={name}
+        render={({ field: { onChange, value } }) => {
+          const controlledValue = stateOptions.find((t) => t.value === value)
+
+          return (
+            <Select onValueChange={(val) => onChange(val)} value={controlledValue?.value}>
+              <SelectTrigger className="w-full" id={name}>
+                <SelectValue placeholder={label} />
+              </SelectTrigger>
+              <SelectContent>
+                {stateOptions.map(({ label, value }) => {
+                  return (
+                    <SelectItem key={value} value={value}>
+                      {label}
+                    </SelectItem>
+                  )
+                })}
+              </SelectContent>
+            </Select>
+          )
+        }}
+        rules={{ required }}
+      />
+      {errors[name] && <Error name={name} />}
+    </Width>
+  )
+}

apps/backend/src/blocks/Form/State/options.ts

@@ -0,0 +1,52 @@
+export const stateOptions = [
+  { label: 'Alabama', value: 'AL' },
+  { label: 'Alaska', value: 'AK' },
+  { label: 'Arizona', value: 'AZ' },
+  { label: 'Arkansas', value: 'AR' },
+  { label: 'California', value: 'CA' },
+  { label: 'Colorado', value: 'CO' },
+  { label: 'Connecticut', value: 'CT' },
+  { label: 'Delaware', value: 'DE' },
+  { label: 'Florida', value: 'FL' },
+  { label: 'Georgia', value: 'GA' },
+  { label: 'Hawaii', value: 'HI' },
+  { label: 'Idaho', value: 'ID' },
+  { label: 'Illinois', value: 'IL' },
+  { label: 'Indiana', value: 'IN' },
+  { label: 'Iowa', value: 'IA' },
+  { label: 'Kansas', value: 'KS' },
+  { label: 'Kentucky', value: 'KY' },
+  { label: 'Louisiana', value: 'LA' },
+  { label: 'Maine', value: 'ME' },
+  { label: 'Maryland', value: 'MD' },
+  { label: 'Massachusetts', value: 'MA' },
+  { label: 'Michigan', value: 'MI' },
+  { label: 'Minnesota', value: 'MN' },
+  { label: 'Mississippi', value: 'MS' },
+  { label: 'Missouri', value: 'MO' },
+  { label: 'Montana', value: 'MT' },
+  { label: 'Nebraska', value: 'NE' },
+  { label: 'Nevada', value: 'NV' },
+  { label: 'New Hampshire', value: 'NH' },
+  { label: 'New Jersey', value: 'NJ' },
+  { label: 'New Mexico', value: 'NM' },
+  { label: 'New York', value: 'NY' },
+  { label: 'North Carolina', value: 'NC' },
+  { label: 'North Dakota', value: 'ND' },
+  { label: 'Ohio', value: 'OH' },
+  { label: 'Oklahoma', value: 'OK' },
+  { label: 'Oregon', value: 'OR' },
+  { label: 'Pennsylvania', value: 'PA' },
+  { label: 'Rhode Island', value: 'RI' },
+  { label: 'South Carolina', value: 'SC' },
+  { label: 'South Dakota', value: 'SD' },
+  { label: 'Tennessee', value: 'TN' },
+  { label: 'Texas', value: 'TX' },
+  { label: 'Utah', value: 'UT' },
+  { label: 'Vermont', value: 'VT' },
+  { label: 'Virginia', value: 'VA' },
+  { label: 'Washington', value: 'WA' },
+  { label: 'West Virginia', value: 'WV' },
+  { label: 'Wisconsin', value: 'WI' },
+  { label: 'Wyoming', value: 'WY' },
+]

apps/backend/src/blocks/Form/Text/index.tsx

@@ -0,0 +1,32 @@
+import type { TextField } from '@payloadcms/plugin-form-builder/types'
+import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form'
+
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import React from 'react'
+
+import { Error } from '../Error'
+import { Width } from '../Width'
+
+export const Text: React.FC<
+  TextField & {
+    errors: Partial<FieldErrorsImpl>
+    register: UseFormRegister<FieldValues>
+  }
+> = ({ name, defaultValue, errors, label, register, required, width }) => {
+  return (
+    <Width width={width}>
+      <Label htmlFor={name}>
+        {label}
+
+        {required && (
+          <span className="required">
+            * <span className="sr-only">(required)</span>
+          </span>
+        )}
+      </Label>
+      <Input defaultValue={defaultValue} id={name} type="text" {...register(name, { required })} />
+      {errors[name] && <Error name={name} />}
+    </Width>
+  )
+}

apps/backend/src/blocks/Form/Textarea/index.tsx

@@ -0,0 +1,40 @@
+import type { TextField } from '@payloadcms/plugin-form-builder/types'
+import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form'
+
+import { Label } from '@/components/ui/label'
+import { Textarea as TextAreaComponent } from '@/components/ui/textarea'
+import React from 'react'
+
+import { Error } from '../Error'
+import { Width } from '../Width'
+
+export const Textarea: React.FC<
+  TextField & {
+    errors: Partial<FieldErrorsImpl>
+    register: UseFormRegister<FieldValues>
+    rows?: number
+  }
+> = ({ name, defaultValue, errors, label, register, required, rows = 3, width }) => {
+  return (
+    <Width width={width}>
+      <Label htmlFor={name}>
+        {label}
+
+        {required && (
+          <span className="required">
+            * <span className="sr-only">(required)</span>
+          </span>
+        )}
+      </Label>
+
+      <TextAreaComponent
+        defaultValue={defaultValue}
+        id={name}
+        rows={rows}
+        {...register(name, { required: required })}
+      />
+
+      {errors[name] && <Error name={name} />}
+    </Width>
+  )
+}

apps/backend/src/blocks/Form/Width/index.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+export const Width: React.FC<{
+  children: React.ReactNode
+  className?: string
+  width?: number | string
+}> = ({ children, className, width }) => {
+  return (
+    <div className={className} style={{ maxWidth: width ? `${width}%` : undefined }}>
+      {children}
+    </div>
+  )
+}

apps/backend/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',
+  },
+}

apps/backend/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,
+}

apps/backend/src/blocks/MediaBlock/Component.tsx

@@ -0,0 +1,67 @@
+import type { StaticImageData } from 'next/image'
+
+import { cn } from '@/utilities/ui'
+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<Props> = (props) => {
+  const {
+    captionClassName,
+    className,
+    enableGutter = true,
+    imgClassName,
+    media,
+    staticImage,
+    disableInnerContainer,
+  } = props
+
+  let caption
+  if (media && typeof media === 'object') caption = media.caption
+
+  return (
+    <div
+      className={cn(
+        '',
+        {
+          container: enableGutter,
+        },
+        className,
+      )}
+    >
+      {(media || staticImage) && (
+        <Media
+          imgClassName={cn('border border-border rounded-[0.8rem]', imgClassName)}
+          resource={media}
+          src={staticImage}
+        />
+      )}
+      {caption && (
+        <div
+          className={cn(
+            'mt-6',
+            {
+              container: !disableInnerContainer,
+            },
+            captionClassName,
+          )}
+        >
+          <RichText data={caption} enableGutter={false} />
+        </div>
+      )}
+    </div>
+  )
+}

apps/backend/src/blocks/MediaBlock/config.ts

@@ -0,0 +1,14 @@
+import type { Block } from 'payload'
+
+export const MediaBlock: Block = {
+  slug: 'mediaBlock',
+  interfaceName: 'MediaBlock',
+  fields: [
+    {
+      name: 'media',
+      type: 'upload',
+      relationTo: 'media',
+      required: true,
+    },
+  ],
+}

apps/backend/src/blocks/RelatedPosts/Component.tsx

@@ -0,0 +1,32 @@
+import clsx from 'clsx'
+import React from 'react'
+import RichText from '@/components/RichText'
+
+import type { Post } from '@/payload-types'
+
+import { Card } from '../../components/Card'
+import { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
+
+export type RelatedPostsProps = {
+  className?: string
+  docs?: Post[]
+  introContent?: DefaultTypedEditorState
+}
+
+export const RelatedPosts: React.FC<RelatedPostsProps> = (props) => {
+  const { className, docs, introContent } = props
+
+  return (
+    <div className={clsx('lg:container', className)}>
+      {introContent && <RichText data={introContent} enableGutter={false} />}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 items-stretch">
+        {docs?.map((doc, index) => {
+          if (typeof doc === 'string') return null
+
+          return <Card key={index} doc={doc} relationTo="posts" showCategories />
+        })}
+      </div>
+    </div>
+  )
+}

apps/backend/src/blocks/RenderBlocks.tsx

@@ -0,0 +1,51 @@
+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 (
+      <Fragment>
+        {blocks.map((block, index) => {
+          const { blockType } = block
+
+          if (blockType && blockType in blockComponents) {
+            const Block = blockComponents[blockType]
+
+            if (Block) {
+              return (
+                <div className="my-16" key={index}>
+                  {/* @ts-expect-error there may be some mismatch between the expected types here */}
+                  <Block {...block} disableInnerContainer />
+                </div>
+              )
+            }
+          }
+          return null
+        })}
+      </Fragment>
+    )
+  }
+
+  return null
+}

apps/backend/src/collections/Categories.ts

@@ -0,0 +1,26 @@
+import type { CollectionConfig } from 'payload'
+
+import { anyone } from '../access/anyone'
+import { authenticated } from '../access/authenticated'
+import { slugField } from '@/fields/slug'
+
+export const Categories: CollectionConfig = {
+  slug: 'categories',
+  access: {
+    create: authenticated,
+    delete: authenticated,
+    read: anyone,
+    update: authenticated,
+  },
+  admin: {
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    ...slugField(),
+  ],
+}

apps/backend/src/collections/Media.ts

@@ -0,0 +1,80 @@
+import type { CollectionConfig } from 'payload'
+
+import {
+  FixedToolbarFeature,
+  InlineToolbarFeature,
+  lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+import { anyone } from '../access/anyone'
+import { authenticated } from '../access/authenticated'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+export const Media: CollectionConfig = {
+  slug: 'media',
+  access: {
+    create: authenticated,
+    delete: authenticated,
+    read: anyone,
+    update: authenticated,
+  },
+  fields: [
+    {
+      name: 'alt',
+      type: 'text',
+      //required: true,
+    },
+    {
+      name: 'caption',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: ({ rootFeatures }) => {
+          return [...rootFeatures, FixedToolbarFeature(), InlineToolbarFeature()]
+        },
+      }),
+    },
+  ],
+  upload: {
+    // Upload to the public/media directory in Next.js making them publicly accessible even outside of Payload
+    staticDir: path.resolve(dirname, '../../public/media'),
+    adminThumbnail: 'thumbnail',
+    focalPoint: true,
+    imageSizes: [
+      {
+        name: 'thumbnail',
+        width: 300,
+      },
+      {
+        name: 'square',
+        width: 500,
+        height: 500,
+      },
+      {
+        name: 'small',
+        width: 600,
+      },
+      {
+        name: 'medium',
+        width: 900,
+      },
+      {
+        name: 'large',
+        width: 1400,
+      },
+      {
+        name: 'xlarge',
+        width: 1920,
+      },
+      {
+        name: 'og',
+        width: 1200,
+        height: 630,
+        crop: 'center',
+      },
+    ],
+  },
+}

apps/backend/src/collections/Pages/hooks/revalidatePage.ts

@@ -0,0 +1,43 @@
+import type { CollectionAfterChangeHook, CollectionAfterDeleteHook } from 'payload'
+
+import { revalidatePath, revalidateTag } from 'next/cache'
+
+import type { Page } from '../../../payload-types'
+
+export const revalidatePage: CollectionAfterChangeHook<Page> = ({
+  doc,
+  previousDoc,
+  req: { payload, context },
+}) => {
+  if (!context.disableRevalidate) {
+    if (doc._status === 'published') {
+      const path = doc.slug === 'home' ? '/' : `/${doc.slug}`
+
+      payload.logger.info(`Revalidating page at path: ${path}`)
+
+      revalidatePath(path)
+      revalidateTag('pages-sitemap')
+    }
+
+    // If the page was previously published, we need to revalidate the old path
+    if (previousDoc?._status === 'published' && doc._status !== 'published') {
+      const oldPath = previousDoc.slug === 'home' ? '/' : `/${previousDoc.slug}`
+
+      payload.logger.info(`Revalidating old page at path: ${oldPath}`)
+
+      revalidatePath(oldPath)
+      revalidateTag('pages-sitemap')
+    }
+  }
+  return doc
+}
+
+export const revalidateDelete: CollectionAfterDeleteHook<Page> = ({ doc, req: { context } }) => {
+  if (!context.disableRevalidate) {
+    const path = doc?.slug === 'home' ? '/' : `/${doc?.slug}`
+    revalidatePath(path)
+    revalidateTag('pages-sitemap')
+  }
+
+  return doc
+}

apps/backend/src/collections/Pages/index.ts

@@ -0,0 +1,139 @@
+import type { CollectionConfig } from 'payload'
+
+import { authenticated } from '../../access/authenticated'
+import { authenticatedOrPublished } from '../../access/authenticatedOrPublished'
+import { Archive } from '../../blocks/ArchiveBlock/config'
+import { CallToAction } from '../../blocks/CallToAction/config'
+import { Content } from '../../blocks/Content/config'
+import { FormBlock } from '../../blocks/Form/config'
+import { MediaBlock } from '../../blocks/MediaBlock/config'
+import { hero } from '@/heros/config'
+import { slugField } from '@/fields/slug'
+import { populatePublishedAt } from '../../hooks/populatePublishedAt'
+import { generatePreviewPath } from '../../utilities/generatePreviewPath'
+import { revalidateDelete, revalidatePage } from './hooks/revalidatePage'
+
+import {
+  MetaDescriptionField,
+  MetaImageField,
+  MetaTitleField,
+  OverviewField,
+  PreviewField,
+} from '@payloadcms/plugin-seo/fields'
+
+export const Pages: CollectionConfig<'pages'> = {
+  slug: 'pages',
+  access: {
+    create: authenticated,
+    delete: authenticated,
+    read: authenticatedOrPublished,
+    update: authenticated,
+  },
+  // This config controls what's populated by default when a page is referenced
+  // https://payloadcms.com/docs/queries/select#defaultpopulate-collection-config-property
+  // Type safe if the collection slug generic is passed to `CollectionConfig` - `CollectionConfig<'pages'>
+  defaultPopulate: {
+    title: true,
+    slug: true,
+  },
+  admin: {
+    defaultColumns: ['title', 'slug', 'updatedAt'],
+    livePreview: {
+      url: ({ data, req }) => {
+        const path = generatePreviewPath({
+          slug: typeof data?.slug === 'string' ? data.slug : '',
+          collection: 'pages',
+          req,
+        })
+
+        return path
+      },
+    },
+    preview: (data, { req }) =>
+      generatePreviewPath({
+        slug: typeof data?.slug === 'string' ? data.slug : '',
+        collection: 'pages',
+        req,
+      }),
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          fields: [hero],
+          label: 'Hero',
+        },
+        {
+          fields: [
+            {
+              name: 'layout',
+              type: 'blocks',
+              blocks: [CallToAction, Content, MediaBlock, Archive, FormBlock],
+              required: true,
+              admin: {
+                initCollapsed: true,
+              },
+            },
+          ],
+          label: 'Content',
+        },
+        {
+          name: 'meta',
+          label: 'SEO',
+          fields: [
+            OverviewField({
+              titlePath: 'meta.title',
+              descriptionPath: 'meta.description',
+              imagePath: 'meta.image',
+            }),
+            MetaTitleField({
+              hasGenerateFn: true,
+            }),
+            MetaImageField({
+              relationTo: 'media',
+            }),
+
+            MetaDescriptionField({}),
+            PreviewField({
+              // if the `generateUrl` function is configured
+              hasGenerateFn: true,
+
+              // field paths to match the target field for data
+              titlePath: 'meta.title',
+              descriptionPath: 'meta.description',
+            }),
+          ],
+        },
+      ],
+    },
+    {
+      name: 'publishedAt',
+      type: 'date',
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    ...slugField(),
+  ],
+  hooks: {
+    afterChange: [revalidatePage],
+    beforeChange: [populatePublishedAt],
+    afterDelete: [revalidateDelete],
+  },
+  versions: {
+    drafts: {
+      autosave: {
+        interval: 100, // We set this interval for optimal live preview
+      },
+      schedulePublish: true,
+    },
+    maxPerDoc: 50,
+  },
+}

apps/backend/src/collections/Posts/hooks/populateAuthors.ts

@@ -0,0 +1,37 @@
+import type { CollectionAfterReadHook } from 'payload'
+import { User } from 'src/payload-types'
+
+// The `user` collection has access control locked so that users are not publicly accessible
+// This means that we need to populate the authors manually here to protect user privacy
+// GraphQL will not return mutated user data that differs from the underlying schema
+// So we use an alternative `populatedAuthors` field to populate the user data, hidden from the admin UI
+export const populateAuthors: CollectionAfterReadHook = async ({ doc, req, req: { payload } }) => {
+  if (doc?.authors && doc?.authors?.length > 0) {
+    const authorDocs: User[] = []
+
+    for (const author of doc.authors) {
+      try {
+        const authorDoc = await payload.findByID({
+          id: typeof author === 'object' ? author?.id : author,
+          collection: 'users',
+          depth: 0,
+        })
+
+        if (authorDoc) {
+          authorDocs.push(authorDoc)
+        }
+
+        if (authorDocs.length > 0) {
+          doc.populatedAuthors = authorDocs.map((authorDoc) => ({
+            id: authorDoc.id,
+            name: authorDoc.name,
+          }))
+        }
+      } catch {
+        // swallow error
+      }
+    }
+  }
+
+  return doc
+}

apps/backend/src/collections/Posts/hooks/revalidatePost.ts

@@ -0,0 +1,44 @@
+import type { CollectionAfterChangeHook, CollectionAfterDeleteHook } from 'payload'
+
+import { revalidatePath, revalidateTag } from 'next/cache'
+
+import type { Post } from '../../../payload-types'
+
+export const revalidatePost: CollectionAfterChangeHook<Post> = ({
+  doc,
+  previousDoc,
+  req: { payload, context },
+}) => {
+  if (!context.disableRevalidate) {
+    if (doc._status === 'published') {
+      const path = `/posts/${doc.slug}`
+
+      payload.logger.info(`Revalidating post at path: ${path}`)
+
+      revalidatePath(path)
+      revalidateTag('posts-sitemap')
+    }
+
+    // If the post was previously published, we need to revalidate the old path
+    if (previousDoc._status === 'published' && doc._status !== 'published') {
+      const oldPath = `/posts/${previousDoc.slug}`
+
+      payload.logger.info(`Revalidating old post at path: ${oldPath}`)
+
+      revalidatePath(oldPath)
+      revalidateTag('posts-sitemap')
+    }
+  }
+  return doc
+}
+
+export const revalidateDelete: CollectionAfterDeleteHook<Post> = ({ doc, req: { context } }) => {
+  if (!context.disableRevalidate) {
+    const path = `/posts/${doc?.slug}`
+
+    revalidatePath(path)
+    revalidateTag('posts-sitemap')
+  }
+
+  return doc
+}

apps/backend/src/collections/Posts/index.ts

@@ -0,0 +1,236 @@
+import type { CollectionConfig } from 'payload'
+
+import {
+  BlocksFeature,
+  FixedToolbarFeature,
+  HeadingFeature,
+  HorizontalRuleFeature,
+  InlineToolbarFeature,
+  lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+
+import { authenticated } from '../../access/authenticated'
+import { authenticatedOrPublished } from '../../access/authenticatedOrPublished'
+import { Banner } from '../../blocks/Banner/config'
+import { Code } from '../../blocks/Code/config'
+import { MediaBlock } from '../../blocks/MediaBlock/config'
+import { generatePreviewPath } from '../../utilities/generatePreviewPath'
+import { populateAuthors } from './hooks/populateAuthors'
+import { revalidateDelete, revalidatePost } from './hooks/revalidatePost'
+
+import {
+  MetaDescriptionField,
+  MetaImageField,
+  MetaTitleField,
+  OverviewField,
+  PreviewField,
+} from '@payloadcms/plugin-seo/fields'
+import { slugField } from '@/fields/slug'
+
+export const Posts: CollectionConfig<'posts'> = {
+  slug: 'posts',
+  access: {
+    create: authenticated,
+    delete: authenticated,
+    read: authenticatedOrPublished,
+    update: authenticated,
+  },
+  // This config controls what's populated by default when a post is referenced
+  // https://payloadcms.com/docs/queries/select#defaultpopulate-collection-config-property
+  // Type safe if the collection slug generic is passed to `CollectionConfig` - `CollectionConfig<'posts'>
+  defaultPopulate: {
+    title: true,
+    slug: true,
+    categories: true,
+    meta: {
+      image: true,
+      description: true,
+    },
+  },
+  admin: {
+    defaultColumns: ['title', 'slug', 'updatedAt'],
+    livePreview: {
+      url: ({ data, req }) => {
+        const path = generatePreviewPath({
+          slug: typeof data?.slug === 'string' ? data.slug : '',
+          collection: 'posts',
+          req,
+        })
+
+        return path
+      },
+    },
+    preview: (data, { req }) =>
+      generatePreviewPath({
+        slug: typeof data?.slug === 'string' ? data.slug : '',
+        collection: 'posts',
+        req,
+      }),
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          fields: [
+            {
+              name: 'heroImage',
+              type: 'upload',
+              relationTo: 'media',
+            },
+            {
+              name: 'content',
+              type: 'richText',
+              editor: lexicalEditor({
+                features: ({ rootFeatures }) => {
+                  return [
+                    ...rootFeatures,
+                    HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
+                    BlocksFeature({ blocks: [Banner, Code, MediaBlock] }),
+                    FixedToolbarFeature(),
+                    InlineToolbarFeature(),
+                    HorizontalRuleFeature(),
+                  ]
+                },
+              }),
+              label: false,
+              required: true,
+            },
+          ],
+          label: 'Content',
+        },
+        {
+          fields: [
+            {
+              name: 'relatedPosts',
+              type: 'relationship',
+              admin: {
+                position: 'sidebar',
+              },
+              filterOptions: ({ id }) => {
+                return {
+                  id: {
+                    not_in: [id],
+                  },
+                }
+              },
+              hasMany: true,
+              relationTo: 'posts',
+            },
+            {
+              name: 'categories',
+              type: 'relationship',
+              admin: {
+                position: 'sidebar',
+              },
+              hasMany: true,
+              relationTo: 'categories',
+            },
+          ],
+          label: 'Meta',
+        },
+        {
+          name: 'meta',
+          label: 'SEO',
+          fields: [
+            OverviewField({
+              titlePath: 'meta.title',
+              descriptionPath: 'meta.description',
+              imagePath: 'meta.image',
+            }),
+            MetaTitleField({
+              hasGenerateFn: true,
+            }),
+            MetaImageField({
+              relationTo: 'media',
+            }),
+
+            MetaDescriptionField({}),
+            PreviewField({
+              // if the `generateUrl` function is configured
+              hasGenerateFn: true,
+
+              // field paths to match the target field for data
+              titlePath: 'meta.title',
+              descriptionPath: 'meta.description',
+            }),
+          ],
+        },
+      ],
+    },
+    {
+      name: 'publishedAt',
+      type: 'date',
+      admin: {
+        date: {
+          pickerAppearance: 'dayAndTime',
+        },
+        position: 'sidebar',
+      },
+      hooks: {
+        beforeChange: [
+          ({ siblingData, value }) => {
+            if (siblingData._status === 'published' && !value) {
+              return new Date()
+            }
+            return value
+          },
+        ],
+      },
+    },
+    {
+      name: 'authors',
+      type: 'relationship',
+      admin: {
+        position: 'sidebar',
+      },
+      hasMany: true,
+      relationTo: 'users',
+    },
+    // This field is only used to populate the user data via the `populateAuthors` hook
+    // This is because the `user` collection has access control locked to protect user privacy
+    // GraphQL will also not return mutated user data that differs from the underlying schema
+    {
+      name: 'populatedAuthors',
+      type: 'array',
+      access: {
+        update: () => false,
+      },
+      admin: {
+        disabled: true,
+        readOnly: true,
+      },
+      fields: [
+        {
+          name: 'id',
+          type: 'text',
+        },
+        {
+          name: 'name',
+          type: 'text',
+        },
+      ],
+    },
+    ...slugField(),
+  ],
+  hooks: {
+    afterChange: [revalidatePost],
+    afterRead: [populateAuthors],
+    afterDelete: [revalidateDelete],
+  },
+  versions: {
+    drafts: {
+      autosave: {
+        interval: 100, // We set this interval for optimal live preview
+      },
+      schedulePublish: true,
+    },
+    maxPerDoc: 50,
+  },
+}

apps/backend/src/collections/Users/index.ts

@@ -0,0 +1,26 @@
+import type { CollectionConfig } from 'payload'
+
+import { authenticated } from '../../access/authenticated'
+
+export const Users: CollectionConfig = {
+  slug: 'users',
+  access: {
+    admin: authenticated,
+    create: authenticated,
+    delete: authenticated,
+    read: authenticated,
+    update: authenticated,
+  },
+  admin: {
+    defaultColumns: ['name', 'email'],
+    useAsTitle: 'name',
+  },
+  auth: true,
+  fields: [
+    {
+      name: 'name',
+      type: 'text',
+    },
+  ],
+  timestamps: true,
+}

apps/backend/src/components/AdminBar/index.scss

@@ -0,0 +1,7 @@
+@import '~@payloadcms/ui/scss';
+
+.admin-bar {
+  @include small-break {
+    display: none;
+  }
+}

apps/backend/src/components/AdminBar/index.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import type { PayloadAdminBarProps, PayloadMeUser } from '@payloadcms/admin-bar'
+
+import { cn } from '@/utilities/ui'
+import { useSelectedLayoutSegments } from 'next/navigation'
+import { PayloadAdminBar } from '@payloadcms/admin-bar'
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+import './index.scss'
+
+import { getClientSideURL } from '@/utilities/getURL'
+
+const baseClass = 'admin-bar'
+
+const collectionLabels = {
+  pages: {
+    plural: 'Pages',
+    singular: 'Page',
+  },
+  posts: {
+    plural: 'Posts',
+    singular: 'Post',
+  },
+  projects: {
+    plural: 'Projects',
+    singular: 'Project',
+  },
+}
+
+const Title: React.FC = () => <span>Dashboard</span>
+
+export const AdminBar: React.FC<{
+  adminBarProps?: PayloadAdminBarProps
+}> = (props) => {
+  const { adminBarProps } = props || {}
+  const segments = useSelectedLayoutSegments()
+  const [show, setShow] = useState(false)
+  const collection = (
+    collectionLabels[segments?.[1] as keyof typeof collectionLabels] ? segments[1] : 'pages'
+  ) as keyof typeof collectionLabels
+  const router = useRouter()
+
+  const onAuthChange = React.useCallback((user: PayloadMeUser) => {
+    setShow(Boolean(user?.id))
+  }, [])
+
+  return (
+    <div
+      className={cn(baseClass, 'py-2 bg-black text-white', {
+        block: show,
+        hidden: !show,
+      })}
+    >
+      <div className="container">
+        <PayloadAdminBar
+          {...adminBarProps}
+          className="py-2 text-white"
+          classNames={{
+            controls: 'font-medium text-white',
+            logo: 'text-white',
+            user: 'text-white',
+          }}
+          cmsURL={getClientSideURL()}
+          collectionSlug={collection}
+          collectionLabels={{
+            plural: collectionLabels[collection]?.plural || 'Pages',
+            singular: collectionLabels[collection]?.singular || 'Page',
+          }}
+          logo={<Title />}
+          onAuthChange={onAuthChange}
+          onPreviewExit={() => {
+            fetch('/next/exit-preview').then(() => {
+              router.push('/')
+              router.refresh()
+            })
+          }}
+          style={{
+            backgroundColor: 'transparent',
+            padding: 0,
+            position: 'relative',
+            zIndex: 'unset',
+          }}
+        />
+      </div>
+    </div>
+  )
+}

apps/backend/src/components/BeforeDashboard/SeedButton/index.scss

@@ -0,0 +1,12 @@
+.seedButton {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  text-decoration: underline;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.85;
+  }
+}

apps/backend/src/components/BeforeDashboard/SeedButton/index.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import React, { Fragment, useCallback, useState } from 'react'
+import { toast } from '@payloadcms/ui'
+
+import './index.scss'
+
+const SuccessMessage: React.FC = () => (
+  <div>
+    Database seeded! You can now{' '}
+    <a target="_blank" href="/">
+      visit your website
+    </a>
+  </div>
+)
+
+export const SeedButton: React.FC = () => {
+  const [loading, setLoading] = useState(false)
+  const [seeded, setSeeded] = useState(false)
+  const [error, setError] = useState<null | string>(null)
+
+  const handleClick = useCallback(
+    async (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault()
+
+      if (seeded) {
+        toast.info('Database already seeded.')
+        return
+      }
+      if (loading) {
+        toast.info('Seeding already in progress.')
+        return
+      }
+      if (error) {
+        toast.error(`An error occurred, please refresh and try again.`)
+        return
+      }
+
+      setLoading(true)
+
+      try {
+        toast.promise(
+          new Promise((resolve, reject) => {
+            try {
+              fetch('/next/seed', { method: 'POST', credentials: 'include' })
+                .then((res) => {
+                  if (res.ok) {
+                    resolve(true)
+                    setSeeded(true)
+                  } else {
+                    reject('An error occurred while seeding.')
+                  }
+                })
+                .catch((error) => {
+                  reject(error)
+                })
+            } catch (error) {
+              reject(error)
+            }
+          }),
+          {
+            loading: 'Seeding with data....',
+            success: <SuccessMessage />,
+            error: 'An error occurred while seeding.',
+          },
+        )
+      } catch (err) {
+        const error = err instanceof Error ? err.message : String(err)
+        setError(error)
+      }
+    },
+    [loading, seeded, error],
+  )
+
+  let message = ''
+  if (loading) message = ' (seeding...)'
+  if (seeded) message = ' (done!)'
+  if (error) message = ` (error: ${error})`
+
+  return (
+    <Fragment>
+      <button className="seedButton" onClick={handleClick}>
+        Seed your database
+      </button>
+      {message}
+    </Fragment>
+  )
+}

apps/backend/src/components/BeforeDashboard/index.scss

@@ -0,0 +1,24 @@
+@import '~@payloadcms/ui/scss';
+
+.dashboard .before-dashboard {
+  margin-bottom: base(1.5);
+
+  &__banner {
+    & h4 {
+      margin: 0;
+    }
+  }
+
+  &__instructions {
+    list-style: decimal;
+    margin-bottom: base(0.5);
+
+    & li {
+      width: 100%;
+    }
+  }
+
+  & a:hover {
+    opacity: 0.85;
+  }
+}

apps/backend/src/components/BeforeDashboard/index.tsx

@@ -0,0 +1,74 @@
+import { Banner } from '@payloadcms/ui/elements/Banner'
+import React from 'react'
+
+import { SeedButton } from './SeedButton'
+import './index.scss'
+
+const baseClass = 'before-dashboard'
+
+const BeforeDashboard: React.FC = () => {
+  return (
+    <div className={baseClass}>
+      <Banner className={`${baseClass}__banner`} type="success">
+        <h4>Welcome to your dashboard!</h4>
+      </Banner>
+      Here&apos;s what to do next:
+      <ul className={`${baseClass}__instructions`}>
+        <li>
+          <SeedButton />
+          {' with a few pages, posts, and projects to jump-start your new site, then '}
+          <a href="/" target="_blank">
+            visit your website
+          </a>
+          {' to see the results.'}
+        </li>
+        <li>
+          If you created this repo using Payload Cloud, head over to GitHub and clone it to your
+          local machine. It will be under the <i>GitHub Scope</i> that you selected when creating
+          this project.
+        </li>
+        <li>
+          {'Modify your '}
+          <a
+            href="https://payloadcms.com/docs/configuration/collections"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            collections
+          </a>
+          {' and add more '}
+          <a
+            href="https://payloadcms.com/docs/fields/overview"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            fields
+          </a>
+          {' as needed. If you are new to Payload, we also recommend you check out the '}
+          <a
+            href="https://payloadcms.com/docs/getting-started/what-is-payload"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Getting Started
+          </a>
+          {' docs.'}
+        </li>
+        <li>
+          Commit and push your changes to the repository to trigger a redeployment of your project.
+        </li>
+      </ul>
+      {'Pro Tip: This block is a '}
+      <a
+        href="https://payloadcms.com/docs/custom-components/overview"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        custom component
+      </a>
+      , you can remove it at any time by updating your <strong>payload.config</strong>.
+    </div>
+  )
+}
+
+export default BeforeDashboard

apps/backend/src/components/BeforeLogin/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const BeforeLogin: React.FC = () => {
+  return (
+    <div>
+      <p>
+        <b>Welcome to your dashboard!</b>
+        {' This is where site admins will log in to manage your website.'}
+      </p>
+    </div>
+  )
+}
+
+export default BeforeLogin

apps/backend/src/components/Card/index.tsx

@@ -0,0 +1,84 @@
+'use client'
+import { cn } from '@/utilities/ui'
+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 type CardPostData = Pick<Post, 'slug' | 'categories' | 'meta' | 'title'>
+
+export const Card: React.FC<{
+  alignItems?: 'center'
+  className?: string
+  doc?: CardPostData
+  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 (
+    <article
+      className={cn(
+        'border border-border rounded-lg overflow-hidden bg-card hover:cursor-pointer',
+        className,
+      )}
+      ref={card.ref}
+    >
+      <div className="relative w-full ">
+        {!metaImage && <div className="">No image</div>}
+        {metaImage && typeof metaImage !== 'string' && <Media resource={metaImage} size="33vw" />}
+      </div>
+      <div className="p-4">
+        {showCategories && hasCategories && (
+          <div className="uppercase text-sm mb-4">
+            {showCategories && hasCategories && (
+              <div>
+                {categories?.map((category, index) => {
+                  if (typeof category === 'object') {
+                    const { title: titleFromCategory } = category
+
+                    const categoryTitle = titleFromCategory || 'Untitled category'
+
+                    const isLast = index === categories.length - 1
+
+                    return (
+                      <Fragment key={index}>
+                        {categoryTitle}
+                        {!isLast && <Fragment>, &nbsp;</Fragment>}
+                      </Fragment>
+                    )
+                  }
+
+                  return null
+                })}
+              </div>
+            )}
+          </div>
+        )}
+        {titleToUse && (
+          <div className="prose">
+            <h3>
+              <Link className="not-prose" href={href} ref={link.ref}>
+                {titleToUse}
+              </Link>
+            </h3>
+          </div>
+        )}
+        {description && <div className="mt-2">{description && <p>{sanitizedDescription}</p>}</div>}
+      </div>
+    </article>
+  )
+}

apps/backend/src/components/CollectionArchive/index.tsx

@@ -0,0 +1,32 @@
+import { cn } from '@/utilities/ui'
+import React from 'react'
+
+import { Card, CardPostData } from '@/components/Card'
+
+export type Props = {
+  posts: CardPostData[]
+}
+
+export const CollectionArchive: React.FC<Props> = (props) => {
+  const { posts } = props
+
+  return (
+    <div className={cn('container')}>
+      <div>
+        <div className="grid grid-cols-4 sm:grid-cols-8 lg:grid-cols-12 gap-y-4 gap-x-4 lg:gap-y-8 lg:gap-x-8 xl:gap-x-8">
+          {posts?.map((result, index) => {
+            if (typeof result === 'object' && result !== null) {
+              return (
+                <div className="col-span-4" key={index}>
+                  <Card className="h-full" doc={result} relationTo="posts" showCategories />
+                </div>
+              )
+            }
+
+            return null
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

apps/backend/src/components/Link/index.tsx

@@ -0,0 +1,66 @@
+import { Button, type ButtonProps } from '@/components/ui/button'
+import { cn } from '@/utilities/ui'
+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<CMSLinkType> = (props) => {
+  const {
+    type,
+    appearance = 'inline',
+    children,
+    className,
+    label,
+    newTab,
+    reference,
+    size: sizeFromProps,
+    url,
+  } = props
+
+  const href =
+    type === 'reference' && typeof reference?.value === 'object' && reference.value.slug
+      ? `${reference?.relationTo !== 'pages' ? `/${reference?.relationTo}` : ''}/${
+          reference.value.slug
+        }`
+      : url
+
+  if (!href) return null
+
+  const size = appearance === 'link' ? 'clear' : sizeFromProps
+  const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
+
+  /* Ensure we don't break any styles set by richText */
+  if (appearance === 'inline') {
+    return (
+      <Link className={cn(className)} href={href || url || ''} {...newTabProps}>
+        {label && label}
+        {children && children}
+      </Link>
+    )
+  }
+
+  return (
+    <Button asChild className={className} size={size} variant={appearance}>
+      <Link className={cn(className)} href={href || url || ''} {...newTabProps}>
+        {label && label}
+        {children && children}
+      </Link>
+    </Button>
+  )
+}

apps/backend/src/components/LivePreviewListener/index.tsx

@@ -0,0 +1,10 @@
+'use client'
+import { getClientSideURL } from '@/utilities/getURL'
+import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react'
+import { useRouter } from 'next/navigation'
+import React from 'react'
+
+export const LivePreviewListener: React.FC = () => {
+  const router = useRouter()
+  return <PayloadLivePreview refresh={router.refresh} serverURL={getClientSideURL()} />
+}

apps/backend/src/components/Logo/Logo.tsx

@@ -0,0 +1,29 @@
+import clsx from 'clsx'
+import React from 'react'
+
+interface Props {
+  className?: string
+  loading?: 'lazy' | 'eager'
+  priority?: 'auto' | 'high' | 'low'
+}
+
+export const Logo = (props: Props) => {
+  const { loading: loadingFromProps, priority: priorityFromProps, className } = props
+
+  const loading = loadingFromProps || 'lazy'
+  const priority = priorityFromProps || 'low'
+
+  return (
+    /* eslint-disable @next/next/no-img-element */
+    <img
+      alt="Payload Logo"
+      width={193}
+      height={34}
+      loading={loading}
+      fetchPriority={priority}
+      decoding="async"
+      className={clsx('max-w-[9.375rem] w-full h-[34px]', className)}
+      src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-logo-light.svg"
+    />
+  )
+}

apps/backend/src/components/Media/ImageMedia/index.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import type { StaticImageData } from 'next/image'
+
+import { cn } from '@/utilities/ui'
+import NextImage from 'next/image'
+import React from 'react'
+
+import type { Props as MediaProps } from '../types'
+
+import { cssVariables } from '@/cssVariables'
+import { getMediaUrl } from '@/utilities/getMediaUrl'
+
+const { breakpoints } = cssVariables
+
+// A base64 encoded image to use as a placeholder while the image is loading
+const placeholderBlur =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABchJREFUWEdtlwtTG0kMhHtGM7N+AAdcDsjj///EBLzenbtuadbLJaZUTlHB+tRqSesETB3IABqQG1KbUFqDlQorBSmboqeEBcC1d8zrCixXYGZcgMsFmH8B+AngHdurAmXKOE8nHOoBrU6opcGswPi5KSP9CcBaQ9kACJH/ALAA1xm4zMD8AczvQCcAQeJVAZsy7nYApTSUzwCHUKACeUJi9TsFci7AHmDtuHYqQIC9AgQYKnSwNAig4NyOOwXq/xU47gDYggarjIpsRSEA3Fqw7AGkwgW4fgALAdiC2btKgNZwbgdMbEFpqFR2UyCR8xwAhf8bUHIGk1ckMyB5C1YkeWAdAPQBAeiD6wVYPoD1HUgXwFagZAGc6oSpTmilopoD5GzISQD3odcNIFca0BUQQM5YA2DpHV0AYURBDIAL0C+ugC0C4GedSsVUmwC8/4w8TPiwU6AClJ5RWL1PgQNkrABWdKB3YF3cBwRY5lsI4ApkKpCQi+FIgFJU/TDgDuAxAAwonJuKpGD1rkCXCR1ALyrAUSSEQAhwBdYZ6DPAgSUA2c1wKIZmRcHxMzMYR9DH8NlbkAwwApSAcABwBwTAbb6owAr0AFiZPILVEyCtMmK2jCkTwFDNUNj7nJETQx744gCUmgkZVGJUHyakEZE4W91jtGFA9KsD8Z3JFYDlhGYZLWcllwJMnplcPy+csFAgAAaIDOgeuAGoB96GLZg4kmtfMjnr6ig5oSoySsoy3ya/FMivXZWxwr0KIf9nACbfqcBEgmBSAtAlIT83R+70IWpyACamIjf5E1Iqb9ECVmnoI/FvAIRk8s2J0Y5IquQDgB+5wpScw5AUTC75VTmTs+72NUzoCvQIaAXv5Q8PDAZKLD+MxLv3RFE7KlsQChgBIlKiCv5ByaZv3gJZNm8AnVMhAN+EjrtTYQMICJpu6/0aiQnhClANlz+Bw0cIWa8ev0sBrtrhAyaXEnrfGfATQJiRKih5vKeOHNXXPFrgyamAADh0Q4F2/sESojomDS9o9k0b0H83xjB8qL+JNoTjN+enjpaBpingRh4e8MSugudM030A8FeqMI6PFIgNyPehkpZWGFEAARIQdH5LcAAqIACHkAJqg4OoBccHAuz76wr4BbzFOEa8iBuAZB8AtJHLP2VgMgJw/EIBowo7HxCAH3V6dAXEE/vZ5aZIA8BP8RKhm7Cp8BnAMnAQADdgQDA520AVIpScP+enHz0Gwp25h4i2dPg5FkDXrbsdJikQwXuWgaM5gEMk1AgH4DKKFjDf3bMD+FjEeIxLlRKYnBk2BbquvSDCAQ4gwZiMAAmH4gBTyRtEsYxi7gP6QSrc//39BrDNqG8rtYTmC4BV1SfMhOhaumFCT87zy4pPhQBZEK1kQVRjJBBi7AOlePgyAPYjwlvtagx9e/dnQraAyS894TIkkAIEYMKEc8k4EqJ68lZ5jjNqcQC2QteQOf7659umwBgPybNtK4dg9WvnMyFwXYGP7uEO1lwJgAnPNeMYMVXbIIYKFioI4PGFt+BWPVfmWJdjW2lTUnLGCswECAgaUy86iwA1464ajo0QhgMBFGyBoZahANsMpMfXr1JA1SN29m5lqgXj+UPV85uRA7yv/KYUO4Tk7Hc1AZwbIRzg0AyNj2UlAMwfSLSMnl7fdAbcxHuA27YaAMvaQ4GOjwX4RTUGAG8Ge14N963g1AynqUiFqRX9noasxT4b8entNRQYyamk/3tYcHsO7R3XJRRYOn4tw4iUnwBM5gDnySGOreAwAGo8F9IDHEcq8Pz2Kg/oXCpuIL6tOPD8LsDn0ABYQoGFRowlsAEUPPDrGAGowAbgKsgDMmE8mDy/vXQ9IAwI7u4wta+gAdAdgB64Ah9SgD4IgGKhwACoAjgNgFDhtxY8f33ZTMjqdTAiHMBPrn8ZWkEfzFdX4Oc1AHg3+ADbvN8PU8WdFKg4Tt6CQy2+D4YHaMT/JP4XzbAq98cPDIUAAAAASUVORK5CYII='
+
+export const ImageMedia: React.FC<MediaProps> = (props) => {
+  const {
+    alt: altFromProps,
+    fill,
+    pictureClassName,
+    imgClassName,
+    priority,
+    resource,
+    size: sizeFromProps,
+    src: srcFromProps,
+    loading: loadingFromProps,
+  } = props
+
+  let width: number | undefined
+  let height: number | undefined
+  let alt = altFromProps
+  let src: StaticImageData | string = srcFromProps || ''
+
+  if (!src && resource && typeof resource === 'object') {
+    const { alt: altFromResource, height: fullHeight, url, width: fullWidth } = resource
+
+    width = fullWidth!
+    height = fullHeight!
+    alt = altFromResource || ''
+
+    const cacheTag = resource.updatedAt
+
+    src = getMediaUrl(url, cacheTag)
+  }
+
+  const loading = loadingFromProps || (!priority ? 'lazy' : undefined)
+
+  // NOTE: this is used by the browser to determine which image to download at different screen sizes
+  const sizes = sizeFromProps
+    ? sizeFromProps
+    : Object.entries(breakpoints)
+        .map(([, value]) => `(max-width: ${value}px) ${value * 2}w`)
+        .join(', ')
+
+  return (
+    <picture className={cn(pictureClassName)}>
+      <NextImage
+        alt={alt || ''}
+        className={cn(imgClassName)}
+        fill={fill}
+        height={!fill ? height : undefined}
+        placeholder="blur"
+        blurDataURL={placeholderBlur}
+        priority={priority}
+        quality={100}
+        loading={loading}
+        sizes={sizes}
+        src={src}
+        width={!fill ? width : undefined}
+      />
+    </picture>
+  )
+}

apps/backend/src/components/Media/VideoMedia/index.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { cn } from '@/utilities/ui'
+import React, { useEffect, useRef } from 'react'
+
+import type { Props as MediaProps } from '../types'
+
+import { getMediaUrl } from '@/utilities/getMediaUrl'
+
+export const VideoMedia: React.FC<MediaProps> = (props) => {
+  const { onClick, resource, videoClassName } = props
+
+  const videoRef = useRef<HTMLVideoElement>(null)
+  // const [showFallback] = useState<boolean>()
+
+  useEffect(() => {
+    const { current: video } = videoRef
+    if (video) {
+      video.addEventListener('suspend', () => {
+        // setShowFallback(true);
+        // console.warn('Video was suspended, rendering fallback image.')
+      })
+    }
+  }, [])
+
+  if (resource && typeof resource === 'object') {
+    const { filename } = resource
+
+    return (
+      <video
+        autoPlay
+        className={cn(videoClassName)}
+        controls={false}
+        loop
+        muted
+        onClick={onClick}
+        playsInline
+        ref={videoRef}
+      >
+        <source src={getMediaUrl(`/media/${filename}`)} />
+      </video>
+    )
+  }
+
+  return null
+}

apps/backend/src/components/Media/index.tsx

@@ -0,0 +1,25 @@
+import React, { Fragment } from 'react'
+
+import type { Props } from './types'
+
+import { ImageMedia } from './ImageMedia'
+import { VideoMedia } from './VideoMedia'
+
+export const Media: React.FC<Props> = (props) => {
+  const { className, htmlElement = 'div', resource } = props
+
+  const isVideo = typeof resource === 'object' && resource?.mimeType?.includes('video')
+  const Tag = htmlElement || Fragment
+
+  return (
+    <Tag
+      {...(htmlElement !== null
+        ? {
+            className,
+          }
+        : {})}
+    >
+      {isVideo ? <VideoMedia {...props} /> : <ImageMedia {...props} />}
+    </Tag>
+  )
+}

apps/backend/src/components/Media/types.ts

@@ -0,0 +1,22 @@
+import type { StaticImageData } from 'next/image'
+import type { ElementType, Ref } from 'react'
+
+import type { Media as MediaType } from '@/payload-types'
+
+export interface Props {
+  alt?: string
+  className?: string
+  fill?: boolean // for NextImage only
+  htmlElement?: ElementType | null
+  pictureClassName?: string
+  imgClassName?: string
+  onClick?: () => void
+  onLoad?: () => void
+  loading?: 'lazy' | 'eager' // for NextImage only
+  priority?: boolean // for NextImage only
+  ref?: Ref<HTMLImageElement | HTMLVideoElement | null>
+  resource?: MediaType | string | number | null // for Payload media
+  size?: string // for NextImage only
+  src?: StaticImageData // for static media
+  videoClassName?: string
+}

apps/backend/src/components/PageRange/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+
+const defaultLabels = {
+  plural: 'Docs',
+  singular: 'Doc',
+}
+
+const defaultCollectionLabels = {
+  posts: {
+    plural: 'Posts',
+    singular: 'Post',
+  },
+}
+
+export const PageRange: React.FC<{
+  className?: string
+  collection?: keyof typeof defaultCollectionLabels
+  collectionLabels?: {
+    plural?: string
+    singular?: string
+  }
+  currentPage?: number
+  limit?: number
+  totalDocs?: number
+}> = (props) => {
+  const {
+    className,
+    collection,
+    collectionLabels: collectionLabelsFromProps,
+    currentPage,
+    limit,
+    totalDocs,
+  } = props
+
+  let indexStart = (currentPage ? currentPage - 1 : 1) * (limit || 1) + 1
+  if (totalDocs && indexStart > totalDocs) indexStart = 0
+
+  let indexEnd = (currentPage || 1) * (limit || 1)
+  if (totalDocs && indexEnd > totalDocs) indexEnd = totalDocs
+
+  const { plural, singular } =
+    collectionLabelsFromProps ||
+    (collection ? defaultCollectionLabels[collection] : undefined) ||
+    defaultLabels ||
+    {}
+
+  return (
+    <div className={[className, 'font-semibold'].filter(Boolean).join(' ')}>
+      {(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
+        }`}
+    </div>
+  )
+}

apps/backend/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/ui'
+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 (
+    <div className={cn('my-12', className)}>
+      <PaginationComponent>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              disabled={!hasPrevPage}
+              onClick={() => {
+                router.push(`/posts/page/${page - 1}`)
+              }}
+            />
+          </PaginationItem>
+
+          {hasExtraPrevPages && (
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+          )}
+
+          {hasPrevPage && (
+            <PaginationItem>
+              <PaginationLink
+                onClick={() => {
+                  router.push(`/posts/page/${page - 1}`)
+                }}
+              >
+                {page - 1}
+              </PaginationLink>
+            </PaginationItem>
+          )}
+
+          <PaginationItem>
+            <PaginationLink
+              isActive
+              onClick={() => {
+                router.push(`/posts/page/${page}`)
+              }}
+            >
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+
+          {hasNextPage && (
+            <PaginationItem>
+              <PaginationLink
+                onClick={() => {
+                  router.push(`/posts/page/${page + 1}`)
+                }}
+              >
+                {page + 1}
+              </PaginationLink>
+            </PaginationItem>
+          )}
+
+          {hasExtraNextPages && (
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+          )}
+
+          <PaginationItem>
+            <PaginationNext
+              disabled={!hasNextPage}
+              onClick={() => {
+                router.push(`/posts/page/${page + 1}`)
+              }}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </PaginationComponent>
+    </div>
+  )
+}

apps/backend/src/components/PayloadRedirects/index.tsx

@@ -0,0 +1,48 @@
+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<Props> = async ({ disableNotFound, url }) => {
+  const redirects = await getCachedRedirects()()
+
+  const redirectItem = redirects.find((redirect) => redirect.from === url)
+
+  if (redirectItem) {
+    if (redirectItem.to?.url) {
+      redirect(redirectItem.to.url)
+    }
+
+    let redirectUrl: string
+
+    if (typeof redirectItem.to?.reference?.value === 'string') {
+      const collection = redirectItem.to?.reference?.relationTo
+      const id = redirectItem.to?.reference?.value
+
+      const document = (await getCachedDocument(collection, id)()) as Page | Post
+      redirectUrl = `${redirectItem.to?.reference?.relationTo !== 'pages' ? `/${redirectItem.to?.reference?.relationTo}` : ''}/${
+        document?.slug
+      }`
+    } else {
+      redirectUrl = `${redirectItem.to?.reference?.relationTo !== 'pages' ? `/${redirectItem.to?.reference?.relationTo}` : ''}/${
+        typeof redirectItem.to?.reference?.value === 'object'
+          ? redirectItem.to?.reference?.value?.slug
+          : ''
+      }`
+    }
+
+    if (redirectUrl) redirect(redirectUrl)
+  }
+
+  if (disableNotFound) return null
+
+  notFound()
+}

apps/backend/src/components/RichText/index.tsx

@@ -0,0 +1,81 @@
+import { MediaBlock } from '@/blocks/MediaBlock/Component'
+import {
+  DefaultNodeTypes,
+  SerializedBlockNode,
+  SerializedLinkNode,
+  type DefaultTypedEditorState,
+} from '@payloadcms/richtext-lexical'
+import {
+  JSXConvertersFunction,
+  LinkJSXConverter,
+  RichText as ConvertRichText,
+} from '@payloadcms/richtext-lexical/react'
+
+import { CodeBlock, CodeBlockProps } from '@/blocks/Code/Component'
+
+import type {
+  BannerBlock as BannerBlockProps,
+  CallToActionBlock as CTABlockProps,
+  MediaBlock as MediaBlockProps,
+} from '@/payload-types'
+import { BannerBlock } from '@/blocks/Banner/Component'
+import { CallToActionBlock } from '@/blocks/CallToAction/Component'
+import { cn } from '@/utilities/ui'
+
+type NodeTypes =
+  | DefaultNodeTypes
+  | SerializedBlockNode<CTABlockProps | MediaBlockProps | BannerBlockProps | CodeBlockProps>
+
+const internalDocToHref = ({ linkNode }: { linkNode: SerializedLinkNode }) => {
+  const { value, relationTo } = linkNode.fields.doc!
+  if (typeof value !== 'object') {
+    throw new Error('Expected value to be an object')
+  }
+  const slug = value.slug
+  return relationTo === 'posts' ? `/posts/${slug}` : `/${slug}`
+}
+
+const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters }) => ({
+  ...defaultConverters,
+  ...LinkJSXConverter({ internalDocToHref }),
+  blocks: {
+    banner: ({ node }) => <BannerBlock className="col-start-2 mb-4" {...node.fields} />,
+    mediaBlock: ({ node }) => (
+      <MediaBlock
+        className="col-start-1 col-span-3"
+        imgClassName="m-0"
+        {...node.fields}
+        captionClassName="mx-auto max-w-[48rem]"
+        enableGutter={false}
+        disableInnerContainer={true}
+      />
+    ),
+    code: ({ node }) => <CodeBlock className="col-start-2" {...node.fields} />,
+    cta: ({ node }) => <CallToActionBlock {...node.fields} />,
+  },
+})
+
+type Props = {
+  data: DefaultTypedEditorState
+  enableGutter?: boolean
+  enableProse?: boolean
+} & React.HTMLAttributes<HTMLDivElement>
+
+export default function RichText(props: Props) {
+  const { className, enableProse = true, enableGutter = true, ...rest } = props
+  return (
+    <ConvertRichText
+      converters={jsxConverters}
+      className={cn(
+        'payload-richtext',
+        {
+          container: enableGutter,
+          'max-w-none': !enableGutter,
+          'mx-auto prose md:prose-md dark:prose-invert': enableProse,
+        },
+        className,
+      )}
+      {...rest}
+    />
+  )
+}