9 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/(frontend)/page.tsx:
--------------------------------------------------------------------------------
1 | import PageTemplate, { generateMetadata } from './[slug]/page'
2 |
3 | export default PageTemplate
4 |
5 | export { generateMetadata }
6 |
--------------------------------------------------------------------------------
/src/app/(frontend)/posts/[slug]/PostHero/index.tsx:
--------------------------------------------------------------------------------
1 | import { formatDateTime } from '@/lib/utils/formatDateTime'
2 | import React from 'react'
3 |
4 | import type { Post } from '@/payload-types'
5 |
6 | import { Media } from '@/components/Media'
7 | import { formatAuthors } from '@/lib/utils/formatAuthors'
8 |
9 | export const PostHero: React.FC<{
10 | post: Post
11 | }> = ({ post }) => {
12 | const { heroImage, populatedAuthors, publishedAt, title } = post
13 |
14 | const hasAuthors =
15 | populatedAuthors && populatedAuthors.length > 0 && formatAuthors(populatedAuthors) !== ''
16 |
17 | return (
18 |
10 |
13 |
16 | 404
11 |This page could not be found.
12 |
19 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/src/app/(frontend)/posts/[slug]/page.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { useHeaderTheme } from '@/components/ThemeProvider/HeaderTheme'
3 | import React, { useEffect } from 'react'
4 |
5 | const PageClient: React.FC = () => {
6 | /* Force the header to be dark mode while we have an image behind it */
7 | const { setHeaderTheme } = useHeaderTheme()
8 |
9 | useEffect(() => {
10 | setHeaderTheme('dark')
11 | }, [setHeaderTheme])
12 | return
20 |
45 |
21 |
44 |
22 |
24 |
25 | {title}
23 |
26 | {hasAuthors && (
27 |
43 |
28 |
34 | )}
35 | {publishedAt && (
36 |
29 |
33 | Author
30 | 31 |{formatAuthors(populatedAuthors)}
32 |
37 |
41 | )}
42 | Date Published
38 | 39 | 40 |
46 | {heroImage && typeof heroImage !== 'string' && (
47 |
51 |
64 |
74 |
65 | typeof post === 'object')}
70 | />
71 | )}
72 |
73 |
34 |
61 | )
62 | }
63 |
64 | export function generateMetadata(): Metadata {
65 | return {
66 | title: `Payload Website Template Posts`,
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/app/(frontend)/posts/page/[pageNumber]/page.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { useHeaderTheme } from '@/components/ThemeProvider/HeaderTheme'
3 | import React, { useEffect } from 'react'
4 |
5 | const PageClient: React.FC = () => {
6 | /* Force the header to be dark mode while we have an image behind it */
7 | const { setHeaderTheme } = useHeaderTheme()
8 |
9 | useEffect(() => {
10 | setHeaderTheme('light')
11 | }, [setHeaderTheme])
12 | return
36 |
40 |
41 |
37 |
39 | Posts
38 |
42 |
49 |
50 |
53 | {posts.totalPages > 1 && posts.page && (
54 |
60 |
40 |
64 | )
65 | }
66 |
67 | export async function generateMetadata({ params: paramsPromise }: Args): Promise
42 |
46 |
47 |
43 |
45 | Posts
44 |
48 |
55 |
56 |
59 | {posts?.page && posts?.totalPages > 1 && (
60 |
63 |
10 | Database seeded! You can now{' '}
11 |
12 | visit your website
13 |
14 |
15 | )
16 |
17 | export const SeedButton: React.FC = () => {
18 | const [loading, setLoading] = useState(false)
19 | const [seeded, setSeeded] = useState(false)
20 | const [error, setError] = useState(null)
21 |
22 | const handleClick = useCallback(
23 | async (e) => {
24 | e.preventDefault()
25 |
26 | if (seeded) {
27 | toast.info('Database already seeded.')
28 | return
29 | }
30 | if (loading) {
31 | toast.info('Seeding already in progress.')
32 | return
33 | }
34 | if (error) {
35 | toast.error(`An error occurred, please refresh and try again.`)
36 | return
37 | }
38 |
39 | setLoading(true)
40 |
41 | try {
42 | toast.promise(
43 | new Promise((resolve, reject) => {
44 | try {
45 | fetch('/next/seed', { method: 'POST', credentials: 'include' })
46 | .then((res) => {
47 | if (res.ok) {
48 | resolve(true)
49 | setSeeded(true)
50 | } else {
51 | reject('An error occurred while seeding.')
52 | }
53 | })
54 | .catch((error) => {
55 | reject(error)
56 | })
57 | } catch (error) {
58 | reject(error)
59 | }
60 | }),
61 | {
62 | loading: 'Seeding with data....',
63 | success:
12 |
13 |
15 | Here's what to do next:
16 |
71 | )
72 | }
73 |
74 | export default BeforeDashboard
75 |
--------------------------------------------------------------------------------
/src/components/BeforeLogin/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const BeforeLogin: React.FC = () => {
4 | return (
5 | Welcome to your dashboard!
14 |-
17 |
-
18 |
19 | {' with a few pages, posts, and projects to jump-start your new site, then '} 20 | 21 | visit your website 22 | 23 | {' to see the results.'} 24 |
25 | - 26 | If you created this repo using Payload Cloud, head over to GitHub and clone it to your 27 | local machine. It will be under the GitHub Scope that you selected when creating 28 | this project. 29 | 30 |
- 31 | {'Modify your '} 32 | 37 | collections 38 | 39 | {' and add more '} 40 | 45 | fields 46 | 47 | {' as needed. If you are new to Payload, we also recommend you check out the '} 48 | 53 | Getting Started 54 | 55 | {' docs.'} 56 | 57 |
- 58 | Commit and push your changes to the repository to trigger a redeployment of your project. 59 | 60 |
8 |
13 | )
14 | }
15 |
16 | export default BeforeLogin
17 |
--------------------------------------------------------------------------------
/src/components/Card/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { cn } from '@/lib/utils'
3 | import useClickableCard from '@/lib/utils/useClickableCard'
4 | import Link from 'next/link'
5 | import React, { Fragment } from 'react'
6 |
7 | import type { Post } from '@/payload-types'
8 |
9 | import { Media } from '@/components/Media'
10 |
11 | export type CardPostData = Pick9 | Welcome to your dashboard! 10 | {' This is where site admins will log in to manage your website.'} 11 |
12 |
41 | {!metaImage &&
44 | No image
}
42 | {metaImage && typeof metaImage !== 'string' &&
45 | {showCategories && hasCategories && (
46 |
82 |
47 | {showCategories && hasCategories && (
48 |
70 | )}
71 | {titleToUse && (
72 |
49 | {categories?.map((category, index) => {
50 | if (typeof category === 'object') {
51 | const { title: titleFromCategory } = category
52 |
53 | const categoryTitle = titleFromCategory || 'Untitled category'
54 |
55 | const isLast = index === categories.length - 1
56 |
57 | return (
58 |
59 | {categoryTitle}
60 | {!isLast && , }
61 |
62 | )
63 | }
64 |
65 | return null
66 | })}
67 |
68 | )}
69 |
73 |
79 | )}
80 | {description && 74 | 75 | {titleToUse} 76 | 77 |
78 |{description &&
}
81 | {sanitizedDescription}
}
16 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/LivePreviewListener/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { getClientSideURL } from '@/lib/utils/getURL'
3 | import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react'
4 | import { useRouter } from 'next/navigation'
5 | import React from 'react'
6 |
7 | export const LivePreviewListener: React.FC = () => {
8 | const router = useRouter()
9 | return
17 |
31 |
18 | {posts?.map((result, index) => {
19 | if (typeof result === 'object' && result !== null) {
20 | return (
21 |
30 |
22 |
24 | )
25 | }
26 |
27 | return null
28 | })}
29 | 
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/Media/ImageMedia/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import type { StaticImageData } from 'next/image'
4 |
5 | import { cn } from '@/lib/utils'
6 | import NextImage from 'next/image'
7 | import React from 'react'
8 |
9 | import type { Props as MediaProps } from '../types'
10 |
11 | import { getClientSideURL } from '@/lib/utils/getURL'
12 |
13 | const breakpoints = {
14 | '3xl': 1920,
15 | '2xl': 1536,
16 | xl: 1280,
17 | lg: 1024,
18 | md: 768,
19 | sm: 640,
20 | }
21 |
22 | // A base64 encoded image to use as a placeholder while the image is loading
23 | const placeholderBlur =
24 | 'data:image/png;base64,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'
25 |
26 | export const ImageMedia: React.FC
46 | {(typeof totalDocs === 'undefined' || totalDocs === 0) && 'Search produced no results.'}
47 | {typeof totalDocs !== 'undefined' &&
48 | totalDocs > 0 &&
49 | `Showing ${indexStart}${indexStart > 0 ? ` - ${indexEnd}` : ''} of ${totalDocs} ${
50 | totalDocs > 1 ? plural : singular
51 | }`}
52 |
53 | )
54 | }
55 |
--------------------------------------------------------------------------------
/src/components/Pagination/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import {
4 | Pagination as PaginationComponent,
5 | PaginationContent,
6 | PaginationEllipsis,
7 | PaginationItem,
8 | PaginationLink,
9 | PaginationNext,
10 | PaginationPrevious,
11 | } from '@/components/ui/pagination'
12 | import { cn } from '@/lib/utils'
13 | import { useRouter, usePathname } from 'next/navigation'
14 | import React from 'react'
15 |
16 | // improved pagination with auto page number in URL path
17 | export const Pagination: React.FC<{
18 | className?: string
19 | page: number
20 | totalPages: number
21 | pageHref?: string
22 | previousHref?: string
23 | nextHref?: string
24 | }> = (props) => {
25 | const router = useRouter()
26 | const pathname = usePathname()
27 |
28 | const { className, page, totalPages, previousHref, pageHref, nextHref } = props
29 | const hasNextPage = page < totalPages
30 | const hasPrevPage = page > 1
31 |
32 | const hasExtraPrevPages = page - 1 > 1
33 | const hasExtraNextPages = page + 1 < totalPages
34 |
35 | const createPageUrl = (pageNumber: number) => {
36 | const basePath = pathname.replace(/\/page\/\d+$/, '')
37 |
38 | if (pageNumber === 1) {
39 | return basePath
40 | }
41 |
42 | return `${basePath}/page/${pageNumber}`
43 | }
44 |
45 | return (
46 |
47 |
48 |
49 |
50 | {
53 | router.push(previousHref || createPageUrl(page - 1))
54 | }}
55 | />
56 |
57 |
58 | {hasExtraPrevPages && (
59 |
60 |
62 | )}
63 |
64 | {hasPrevPage && (
65 |
66 | {
68 | router.push(previousHref || createPageUrl(page - 1))
69 | }}
70 | >
71 | {page - 1}
72 |
73 |
74 | )}
75 |
76 |
77 | {
80 | router.push(pageHref || createPageUrl(page))
81 | }}
82 | >
83 | {page}
84 |
85 |
86 |
87 | {hasNextPage && (
88 |
89 | {
91 | router.push(nextHref || createPageUrl(page + 1))
92 | }}
93 | >
94 | {page + 1}
95 |
96 |
97 | )}
98 |
99 | {hasExtraNextPages && (
100 |
101 |
103 | )}
104 |
105 |
106 | {
109 | router.push(nextHref || createPageUrl(page + 1))
110 | }}
111 | />
112 |
113 |
114 |
115 |
116 | )
117 | }
118 |
--------------------------------------------------------------------------------
/src/components/PayloadRedirects/index.tsx:
--------------------------------------------------------------------------------
1 | import type React from 'react'
2 | import type { Page, Post } from '@/payload-types'
3 |
4 | import { getCachedDocument } from '@/lib/utils/getDocument'
5 | import { getCachedRedirects } from '@/lib/utils/getRedirects'
6 | import { notFound, redirect } from 'next/navigation'
7 |
8 | interface Props {
9 | disableNotFound?: boolean
10 | url: string
11 | }
12 |
13 | /* This component helps us with SSR based dynamic redirects */
14 | export const PayloadRedirects: React.FC{post.title}
38 | * {authorString && ( 39 | *By {authorString}
40 | * )} 41 | * 42 | *{post.title}
75 | * 76 | *
45 | *
48 | * );
49 | * }
50 | *
51 | * // In a login page.tsx
52 | * export default async function LoginPage() {
53 | * // Redirects to /dashboard if already authenticated
54 | * try {
55 | * await getMeUser({
56 | * validUserRedirect: '/dashboard'
57 | * });
58 | * } catch (error) {
59 | * // User is not authenticated, show login form
60 | * }
61 | *
62 | * return Welcome, {user.name}
46 | *Your email: {user.email}
47 | *
57 | {introContent && (
58 |
64 | )
65 | }
66 |
--------------------------------------------------------------------------------
/src/payload/blocks/ArchiveBlock/config.ts:
--------------------------------------------------------------------------------
1 | import type { Block } from 'payload'
2 |
3 | import {
4 | FixedToolbarFeature,
5 | HeadingFeature,
6 | InlineToolbarFeature,
7 | lexicalEditor,
8 | } from '@payloadcms/richtext-lexical'
9 |
10 | export const Archive: Block = {
11 | slug: 'archive',
12 | interfaceName: 'ArchiveBlock',
13 | fields: [
14 | {
15 | name: 'introContent',
16 | type: 'richText',
17 | editor: lexicalEditor({
18 | features: ({ rootFeatures }) => {
19 | return [
20 | ...rootFeatures,
21 | HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
22 | FixedToolbarFeature(),
23 | InlineToolbarFeature(),
24 | ]
25 | },
26 | }),
27 | label: 'Intro Content',
28 | },
29 | {
30 | name: 'populateBy',
31 | type: 'select',
32 | defaultValue: 'collection',
33 | options: [
34 | {
35 | label: 'Collection',
36 | value: 'collection',
37 | },
38 | {
39 | label: 'Individual Selection',
40 | value: 'selection',
41 | },
42 | ],
43 | },
44 | {
45 | name: 'relationTo',
46 | type: 'select',
47 | admin: {
48 | condition: (_, siblingData) => siblingData.populateBy === 'collection',
49 | },
50 | defaultValue: 'posts',
51 | label: 'Collections To Show',
52 | options: [
53 | {
54 | label: 'Posts',
55 | value: 'posts',
56 | },
57 | ],
58 | },
59 | {
60 | name: 'categories',
61 | type: 'relationship',
62 | admin: {
63 | condition: (_, siblingData) => siblingData.populateBy === 'collection',
64 | },
65 | hasMany: true,
66 | label: 'Categories To Show',
67 | relationTo: 'categories',
68 | },
69 | {
70 | name: 'limit',
71 | type: 'number',
72 | admin: {
73 | condition: (_, siblingData) => siblingData.populateBy === 'collection',
74 | step: 1,
75 | },
76 | defaultValue: 10,
77 | label: 'Limit',
78 | },
79 | {
80 | name: 'selectedDocs',
81 | type: 'relationship',
82 | admin: {
83 | condition: (_, siblingData) => siblingData.populateBy === 'selection',
84 | },
85 | hasMany: true,
86 | label: 'Selection',
87 | relationTo: ['posts'],
88 | },
89 | ],
90 | labels: {
91 | plural: 'Archives',
92 | singular: 'Archive',
93 | },
94 | }
95 |
--------------------------------------------------------------------------------
/src/payload/blocks/Banner/Component.tsx:
--------------------------------------------------------------------------------
1 | import type { BannerBlock as BannerBlockProps } from '@/payload-types'
2 |
3 | import { cn } from '@/lib/utils'
4 | import React from 'react'
5 | import RichText from '@/components/RichText'
6 |
7 | type Props = {
8 | className?: string
9 | } & BannerBlockProps
10 |
11 | export const BannerBlock: React.FC
59 |
61 | )}
62 |
14 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/payload/blocks/Banner/config.ts:
--------------------------------------------------------------------------------
1 | import type { Block } from 'payload'
2 |
3 | import {
4 | FixedToolbarFeature,
5 | InlineToolbarFeature,
6 | lexicalEditor,
7 | } from '@payloadcms/richtext-lexical'
8 |
9 | export const Banner: Block = {
10 | slug: 'banner',
11 | fields: [
12 | {
13 | name: 'style',
14 | type: 'select',
15 | defaultValue: 'info',
16 | options: [
17 | { label: 'Info', value: 'info' },
18 | { label: 'Warning', value: 'warning' },
19 | { label: 'Error', value: 'error' },
20 | { label: 'Success', value: 'success' },
21 | ],
22 | required: true,
23 | },
24 | {
25 | name: 'content',
26 | type: 'richText',
27 | editor: lexicalEditor({
28 | features: ({ rootFeatures }) => {
29 | return [...rootFeatures, FixedToolbarFeature(), InlineToolbarFeature()]
30 | },
31 | }),
32 | label: false,
33 | required: true,
34 | },
35 | ],
36 | interfaceName: 'BannerBlock',
37 | }
38 |
--------------------------------------------------------------------------------
/src/payload/blocks/CallToAction/Component.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import type { CallToActionBlock as CTABlockProps } from '@/payload-types'
4 |
5 | import RichText from '@/components/RichText'
6 | import { CMSLink } from '@/payload/fields/Link/index'
7 |
8 | export const CallToActionBlock: React.FC
22 |
24 |
11 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/payload/blocks/CallToAction/config.ts:
--------------------------------------------------------------------------------
1 | import type { Block } from 'payload'
2 |
3 | import {
4 | FixedToolbarFeature,
5 | HeadingFeature,
6 | InlineToolbarFeature,
7 | lexicalEditor,
8 | } from '@payloadcms/richtext-lexical'
9 |
10 | import { linkGroup } from '@/payload/fields/Link/linkGroup'
11 |
12 | export const CallToAction: Block = {
13 | slug: 'cta',
14 | interfaceName: 'CallToActionBlock',
15 | fields: [
16 | {
17 | name: 'richText',
18 | type: 'richText',
19 | editor: lexicalEditor({
20 | features: ({ rootFeatures }) => {
21 | return [
22 | ...rootFeatures,
23 | HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
24 | FixedToolbarFeature(),
25 | InlineToolbarFeature(),
26 | ]
27 | },
28 | }),
29 | label: false,
30 | },
31 | linkGroup({
32 | appearances: ['default', 'outline'],
33 | overrides: {
34 | maxRows: 2,
35 | },
36 | }),
37 | ],
38 | labels: {
39 | plural: 'Calls to Action',
40 | singular: 'Call to Action',
41 | },
42 | }
43 |
--------------------------------------------------------------------------------
/src/payload/blocks/Code/Component.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { Highlight, themes } from 'prism-react-renderer'
3 | import React from 'react'
4 | import { CopyButton } from './CopyButton'
5 |
6 | type Props = {
7 | code: string
8 | language?: string
9 | }
10 |
11 | export const Code: React.FC
12 |
21 |
13 | {richText &&
15 |
16 | {(links || []).map(({ link }, i) => {
17 | return
20 |
18 | {tokens.map((line, i) => (
19 |
20 | {i + 1}
21 |
22 | {line.map((token, key) => (
23 |
24 | ))}
25 |
26 |
27 | ))}
28 |
30 | )}
31 |
18 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/payload/blocks/Code/CopyButton.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { Button } from '@/components/ui/button'
3 | import { CopyIcon } from '@payloadcms/ui/icons/Copy'
4 | import { useState } from 'react'
5 |
6 | export function CopyButton({ code }: { code: string }) {
7 | const [text, setText] = useState('Copy')
8 |
9 | function updateCopyStatus() {
10 | if (text === 'Copy') {
11 | setText(() => 'Copied!')
12 | setTimeout(() => {
13 | setText(() => 'Copy')
14 | }, 1000)
15 | }
16 | }
17 |
18 | return (
19 |
20 |
31 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/src/payload/blocks/Code/config.ts:
--------------------------------------------------------------------------------
1 | import type { Block } from 'payload'
2 |
3 | export const Code: Block = {
4 | slug: 'code',
5 | interfaceName: 'CodeBlock',
6 | fields: [
7 | {
8 | name: 'language',
9 | type: 'select',
10 | defaultValue: 'typescript',
11 | options: [
12 | {
13 | label: 'Typescript',
14 | value: 'typescript',
15 | },
16 | {
17 | label: 'Javascript',
18 | value: 'javascript',
19 | },
20 | {
21 | label: 'CSS',
22 | value: 'css',
23 | },
24 | ],
25 | },
26 | {
27 | name: 'code',
28 | type: 'code',
29 | label: false,
30 | required: true,
31 | },
32 | ],
33 | }
34 |
--------------------------------------------------------------------------------
/src/payload/blocks/Content/Component.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@/lib/utils'
2 | import React from 'react'
3 | import RichText from '@/components/RichText'
4 |
5 | import type { ContentBlock as ContentBlockProps } from '@/payload-types'
6 |
7 | import { CMSLink } from '@/payload/fields/Link/index'
8 |
9 | export const ContentBlock: React.FC
21 |
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/src/payload/blocks/Content/config.ts:
--------------------------------------------------------------------------------
1 | import type { Block, Field } from 'payload'
2 |
3 | import {
4 | FixedToolbarFeature,
5 | HeadingFeature,
6 | InlineToolbarFeature,
7 | lexicalEditor,
8 | } from '@payloadcms/richtext-lexical'
9 |
10 | import { link } from '@/payload/fields/Link/link'
11 |
12 | const columnFields: Field[] = [
13 | {
14 | name: 'size',
15 | type: 'select',
16 | defaultValue: 'oneThird',
17 | options: [
18 | {
19 | label: 'One Third',
20 | value: 'oneThird',
21 | },
22 | {
23 | label: 'Half',
24 | value: 'half',
25 | },
26 | {
27 | label: 'Two Thirds',
28 | value: 'twoThirds',
29 | },
30 | {
31 | label: 'Full',
32 | value: 'full',
33 | },
34 | ],
35 | },
36 | {
37 | name: 'richText',
38 | type: 'richText',
39 | editor: lexicalEditor({
40 | features: ({ rootFeatures }) => {
41 | return [
42 | ...rootFeatures,
43 | HeadingFeature({ enabledHeadingSizes: ['h2', 'h3', 'h4'] }),
44 | FixedToolbarFeature(),
45 | InlineToolbarFeature(),
46 | ]
47 | },
48 | }),
49 | label: false,
50 | },
51 | {
52 | name: 'enableLink',
53 | type: 'checkbox',
54 | },
55 | link({
56 | overrides: {
57 | admin: {
58 | condition: (_, { enableLink }) => Boolean(enableLink),
59 | },
60 | },
61 | }),
62 | ]
63 |
64 | export const Content: Block = {
65 | slug: 'content',
66 | interfaceName: 'ContentBlock',
67 | fields: [
68 | {
69 | name: 'columns',
70 | type: 'array',
71 | admin: {
72 | initCollapsed: true,
73 | },
74 | fields: columnFields,
75 | },
76 | ],
77 | }
78 |
--------------------------------------------------------------------------------
/src/payload/blocks/HighImpact/Component.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { useHeaderTheme } from '@/components/ThemeProvider/HeaderTheme'
3 | import React, { useEffect } from 'react'
4 |
5 | import { CMSLink } from '@/payload/fields/Link/index'
6 | import { Media } from '@/components/Media'
7 | import RichText from '@/components/RichText'
8 | import { HighImpactHeroBlock } from '@/payload-types'
9 |
10 | export const HighImpactHero = ({ links, media, richText }: HighImpactHeroBlock) => {
11 | const { setHeaderTheme } = useHeaderTheme()
12 |
13 | useEffect(() => {
14 | setHeaderTheme('dark')
15 | })
16 |
17 | return (
18 |
22 | {columns &&
23 | columns.length > 0 &&
24 | columns.map((col, index) => {
25 | const { enableLink, link, richText, size } = col
26 |
27 | return (
28 |
41 |
34 | {richText &&
38 | )
39 | })}
40 |
22 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/src/payload/blocks/HighImpact/config.ts:
--------------------------------------------------------------------------------
1 | import type { Block, Field } from 'payload'
2 |
3 | import {
4 | FixedToolbarFeature,
5 | HeadingFeature,
6 | InlineToolbarFeature,
7 | lexicalEditor,
8 | } from '@payloadcms/richtext-lexical'
9 |
10 | import { linkGroup } from '@/payload/fields/Link/linkGroup'
11 |
12 | export const HighImpactHero: Block = {
13 | slug: 'HighImpactHero',
14 | interfaceName: 'HighImpactHeroBlock',
15 | fields: [
16 | {
17 | name: 'richText',
18 | type: 'richText',
19 | editor: lexicalEditor({
20 | features: ({ rootFeatures }) => {
21 | return [
22 | ...rootFeatures,
23 | HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
24 | FixedToolbarFeature(),
25 | InlineToolbarFeature(),
26 | ]
27 | },
28 | }),
29 | label: false,
30 | },
31 | linkGroup({
32 | overrides: {
33 | maxRows: 2,
34 | },
35 | }),
36 | {
37 | name: 'media',
38 | type: 'upload',
39 | relationTo: 'media',
40 | required: true,
41 | },
42 | ],
43 | }
44 |
--------------------------------------------------------------------------------
/src/payload/blocks/LowImpact/Component.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import type { Page } from '@/payload-types'
4 |
5 | import RichText from '@/components/RichText'
6 |
7 | export const LowImpactHero = ({ children, richText }) => {
8 | return (
9 |
23 |
38 |
24 | {richText &&
37 | -
27 | {links.map(({ link }, i) => {
28 | return (
29 |
-
30 |
31 |
32 | )
33 | })}
34 |
39 | {media && typeof media === 'object' && (
40 |
43 |
10 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/src/payload/blocks/LowImpact/config.ts:
--------------------------------------------------------------------------------
1 | import type { Block, Field } from 'payload'
2 |
3 | import {
4 | FixedToolbarFeature,
5 | HeadingFeature,
6 | InlineToolbarFeature,
7 | lexicalEditor,
8 | } from '@payloadcms/richtext-lexical'
9 |
10 | import { linkGroup } from '@/payload/fields/Link/linkGroup'
11 |
12 | export const LowImpactHero: Block = {
13 | slug: 'LowImpactHero',
14 | interfaceName: 'LowImpactHeroBlock',
15 | fields: [
16 | {
17 | name: 'richText',
18 | type: 'richText',
19 | editor: lexicalEditor({
20 | features: ({ rootFeatures }) => {
21 | return [
22 | ...rootFeatures,
23 | HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
24 | FixedToolbarFeature(),
25 | InlineToolbarFeature(),
26 | ]
27 | },
28 | }),
29 | label: false,
30 | },
31 | linkGroup({
32 | overrides: {
33 | maxRows: 2,
34 | },
35 | }),
36 | ],
37 | }
38 |
--------------------------------------------------------------------------------
/src/payload/blocks/MediaBlock/Component.tsx:
--------------------------------------------------------------------------------
1 | import type { StaticImageData } from 'next/image'
2 |
3 | import { cn } from '@/lib/utils'
4 | import React from 'react'
5 | import RichText from '@/components/RichText'
6 |
7 | import type { MediaBlock as MediaBlockProps } from '@/payload-types'
8 |
9 | import { Media } from '@/components/Media'
10 |
11 | type Props = MediaBlockProps & {
12 | breakout?: boolean
13 | captionClassName?: string
14 | className?: string
15 | enableGutter?: boolean
16 | imgClassName?: string
17 | staticImage?: StaticImageData
18 | }
19 |
20 | export const MediaBlock: React.FC
11 | {children || (richText &&
13 |
43 | {(media || staticImage) && (
44 |
61 | )
62 | }
63 |
--------------------------------------------------------------------------------
/src/payload/blocks/MediaBlock/config.ts:
--------------------------------------------------------------------------------
1 | import type { Block } from 'payload'
2 |
3 | export const MediaBlock: Block = {
4 | slug: 'mediaBlock',
5 | interfaceName: 'MediaBlock',
6 | fields: [
7 | {
8 | name: 'media',
9 | type: 'upload',
10 | relationTo: 'media',
11 | required: true,
12 | },
13 | ],
14 | }
15 |
--------------------------------------------------------------------------------
/src/payload/blocks/MediumImpact/Component.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { CMSLink } from '@/payload/fields/Link/index'
4 | import { Media } from '@/components/Media'
5 | import RichText from '@/components/RichText'
6 | import { MediumImpactHeroBlock } from '@/payload-types'
7 |
8 | export const MediumImpactHero = ({ links, media, richText }: MediumImpactHeroBlock) => {
9 | return (
10 |
57 |
59 | )}
60 |
11 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/src/payload/blocks/MediumImpact/config.ts:
--------------------------------------------------------------------------------
1 | import type { Block, Field } from 'payload'
2 |
3 | import {
4 | FixedToolbarFeature,
5 | HeadingFeature,
6 | InlineToolbarFeature,
7 | lexicalEditor,
8 | } from '@payloadcms/richtext-lexical'
9 |
10 | import { linkGroup } from '@/payload/fields/Link/linkGroup'
11 |
12 | export const MediumImpactHero: Block = {
13 | slug: 'MediumImpactHero',
14 | interfaceName: 'MediumImpactHeroBlock',
15 | fields: [
16 | {
17 | name: 'richText',
18 | type: 'richText',
19 | editor: lexicalEditor({
20 | features: ({ rootFeatures }) => {
21 | return [
22 | ...rootFeatures,
23 | HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
24 | FixedToolbarFeature(),
25 | InlineToolbarFeature(),
26 | ]
27 | },
28 | }),
29 | label: false,
30 | },
31 | linkGroup({
32 | overrides: {
33 | maxRows: 2,
34 | },
35 | }),
36 | {
37 | name: 'media',
38 | type: 'upload',
39 | relationTo: 'media',
40 | required: true,
41 | },
42 | ],
43 | }
44 |
--------------------------------------------------------------------------------
/src/payload/blocks/RelatedPosts/Component.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx'
2 | import React from 'react'
3 | import RichText from '@/components/RichText'
4 | import { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'
5 |
6 | import type { Post } from '@/payload-types'
7 |
8 | import { Card } from '@/components/Card'
9 |
10 | export type RelatedPostsProps = {
11 | className?: string
12 | docs?: Post[]
13 | introContent?: SerializedEditorState
14 | }
15 |
16 | export const RelatedPosts: React.FC
12 | {richText &&
26 | -
16 | {links.map(({ link }, i) => {
17 | return (
18 |
-
19 |
20 |
21 | )
22 | })}
23 |
27 | {media && typeof media === 'object' && (
28 |
43 |
29 |
41 | )}
42 |
37 |
39 | )}
40 |
21 | {introContent &&
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/payload/blocks/RenderBlocks.tsx:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react'
2 |
3 | import type { Page } from '@/payload-types'
4 |
5 | import { ArchiveBlock } from '@/payload/blocks/ArchiveBlock/Component'
6 | import { CallToActionBlock } from '@/payload/blocks/CallToAction/Component'
7 | import { ContentBlock } from '@/payload/blocks/Content/Component'
8 | import { MediaBlock } from '@/payload/blocks/MediaBlock/Component'
9 | import { HighImpactHero } from './HighImpact/Component'
10 | import { MediumImpactHero } from './MediumImpact/Component'
11 | import { Block } from 'payload'
12 | import { LowImpactHero } from './LowImpact/Component'
13 |
14 | const blockComponents: Record
24 | {docs?.map((doc, index) => {
25 | if (typeof doc === 'string') return null
26 |
27 | return
30 |
72 |
87 | )
88 | }
89 |
--------------------------------------------------------------------------------
/src/payload/fields/slug/formatSlug.ts:
--------------------------------------------------------------------------------
1 | import type { FieldHook } from 'payload'
2 |
3 | export const formatSlug = (val: string): string =>
4 | val
5 | .replace(/ /g, '-')
6 | .replace(/[^\w-]+/g, '')
7 | .toLowerCase()
8 |
9 | export const formatSlugHook =
10 | (fallback: string): FieldHook =>
11 | ({ data, operation, value }) => {
12 | if (typeof value === 'string') {
13 | return formatSlug(value)
14 | }
15 |
16 | if (operation === 'create' || !data?.slug) {
17 | const fallbackData = data?.[fallback] || data?.[fallback]
18 |
19 | if (fallbackData && typeof fallbackData === 'string') {
20 | return formatSlug(fallbackData)
21 | }
22 | }
23 |
24 | return value
25 | }
26 |
--------------------------------------------------------------------------------
/src/payload/fields/slug/index.scss:
--------------------------------------------------------------------------------
1 | .slug-field-component {
2 | .label-wrapper {
3 | display: flex;
4 | justify-content: space-between;
5 | align-items: center;
6 | }
7 |
8 | .lock-button {
9 | margin: 0;
10 | padding-bottom: 0.3125rem;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/payload/fields/slug/index.ts:
--------------------------------------------------------------------------------
1 | import type { CheckboxField, TextField } from 'payload'
2 |
3 | import { formatSlugHook } from './formatSlug'
4 |
5 | type Overrides = {
6 | slugOverrides?: Partial
73 |
79 |
80 | {label}
13 | }
14 |
--------------------------------------------------------------------------------
/src/payload/globals/Footer/config.ts:
--------------------------------------------------------------------------------
1 | import type { GlobalConfig } from 'payload'
2 |
3 | import { link } from '@/payload/fields/Link/link'
4 | import { revalidateFooter } from './hooks/revalidateFooter'
5 |
6 | export const Footer: GlobalConfig = {
7 | slug: 'footer',
8 | access: {
9 | read: () => true,
10 | },
11 | fields: [
12 | {
13 | name: 'navItems',
14 | type: 'array',
15 | fields: [
16 | link({
17 | appearances: false,
18 | }),
19 | ],
20 | maxRows: 6,
21 | admin: {
22 | initCollapsed: true,
23 | components: {
24 | RowLabel: '@/payload/globals/Footer/RowLabel#RowLabel',
25 | },
26 | },
27 | },
28 | ],
29 | hooks: {
30 | afterChange: [revalidateFooter],
31 | },
32 | }
33 |
--------------------------------------------------------------------------------
/src/payload/globals/Footer/hooks/revalidateFooter.ts:
--------------------------------------------------------------------------------
1 | import type { GlobalAfterChangeHook } from 'payload'
2 |
3 | import { revalidateTag } from 'next/cache'
4 |
5 | export const revalidateFooter: GlobalAfterChangeHook = ({ doc, req: { payload, context } }) => {
6 | if (!context.disableRevalidate) {
7 | payload.logger.info(`Revalidating footer`)
8 |
9 | revalidateTag('global_footer')
10 | }
11 |
12 | return doc
13 | }
14 |
--------------------------------------------------------------------------------
/src/payload/globals/Header/Component.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { useHeaderTheme } from '@/components/ThemeProvider/HeaderTheme'
3 | import Link from 'next/link'
4 | import { usePathname } from 'next/navigation'
5 | import React, { useEffect, useState } from 'react'
6 |
7 | import type { Header } from '@/payload-types'
8 |
9 | import { Logo } from '@/components/Logo/Logo'
10 | import { HeaderNav } from './Nav'
11 |
12 | interface HeaderClientProps {
13 | data: Header
14 | }
15 |
16 | export const HeaderClient: React.FC
35 |
36 |
40 | {label}
13 | }
14 |
--------------------------------------------------------------------------------
/src/payload/globals/Header/config.ts:
--------------------------------------------------------------------------------
1 | import type { GlobalConfig } from 'payload'
2 |
3 | import { link } from '@/payload/fields/Link/link'
4 | import { revalidateHeader } from './hooks/revalidateHeader'
5 |
6 | export const Header: GlobalConfig = {
7 | slug: 'header',
8 | access: {
9 | read: () => true,
10 | },
11 | fields: [
12 | {
13 | name: 'navItems',
14 | type: 'array',
15 | fields: [
16 | link({
17 | appearances: false,
18 | }),
19 | ],
20 | maxRows: 6,
21 | admin: {
22 | initCollapsed: true,
23 | components: {
24 | RowLabel: '@/payload/globals/Header/RowLabel#RowLabel',
25 | },
26 | },
27 | },
28 | ],
29 | hooks: {
30 | afterChange: [revalidateHeader],
31 | },
32 | }
33 |
--------------------------------------------------------------------------------
/src/payload/globals/Header/hooks/revalidateHeader.ts:
--------------------------------------------------------------------------------
1 | import type { GlobalAfterChangeHook } from 'payload'
2 |
3 | import { revalidateTag } from 'next/cache'
4 |
5 | export const revalidateHeader: GlobalAfterChangeHook = ({ doc, req: { payload, context } }) => {
6 | if (!context.disableRevalidate) {
7 | payload.logger.info(`Revalidating header`)
8 |
9 | revalidateTag('global_header')
10 | }
11 |
12 | return doc
13 | }
14 |
--------------------------------------------------------------------------------
/src/payload/hooks/formatSlug.ts:
--------------------------------------------------------------------------------
1 | import type { FieldHook } from 'payload'
2 |
3 | const format = (val: string): string =>
4 | val
5 | .replace(/ /g, '-')
6 | .replace(/[^\w-]+/g, '')
7 | .toLowerCase()
8 |
9 | const formatSlug =
10 | (fallback: string): FieldHook =>
11 | ({ data, operation, originalDoc, value }) => {
12 | if (typeof value === 'string') {
13 | return format(value)
14 | }
15 |
16 | if (operation === 'create') {
17 | const fallbackData = data?.[fallback] || originalDoc?.[fallback]
18 |
19 | if (fallbackData && typeof fallbackData === 'string') {
20 | return format(fallbackData)
21 | }
22 | }
23 |
24 | return value
25 | }
26 |
27 | export default formatSlug
28 |
--------------------------------------------------------------------------------
/src/payload/hooks/populatePublishedAt.ts:
--------------------------------------------------------------------------------
1 | import type { CollectionBeforeChangeHook } from 'payload'
2 |
3 | export const populatePublishedAt: CollectionBeforeChangeHook = ({ data, operation, req }) => {
4 | if (operation === 'create' || operation === 'update') {
5 | if (req.data && !req.data.publishedAt) {
6 | const now = new Date()
7 | return {
8 | ...data,
9 | publishedAt: now,
10 | }
11 | }
12 | }
13 |
14 | return data
15 | }
16 |
--------------------------------------------------------------------------------
/src/payload/hooks/revalidateRedirects.ts:
--------------------------------------------------------------------------------
1 | import type { CollectionAfterChangeHook } from 'payload'
2 |
3 | import { revalidateTag } from 'next/cache'
4 |
5 | export const revalidateRedirects: CollectionAfterChangeHook = ({ doc, req: { payload } }) => {
6 | payload.logger.info(`Revalidating redirects`)
7 |
8 | revalidateTag('redirects')
9 |
10 | return doc
11 | }
12 |
--------------------------------------------------------------------------------
/src/payload/plugins/index.ts:
--------------------------------------------------------------------------------
1 |
2 | import { payloadCloudPlugin } from '@payloadcms/payload-cloud'
3 | import { redirectsPlugin } from '@payloadcms/plugin-redirects'
4 | import { seoPlugin } from '@payloadcms/plugin-seo'
5 | import { Plugin } from 'payload'
6 |
7 | import { getServerSideURL } from '@/lib/utils/getURL'
8 | import { Page, Post } from '@/payload-types'
9 | import { revalidateRedirects } from '../hooks/revalidateRedirects'
10 |
11 | export const plugins: Plugin[] = [
12 | // storage-adapter-placeholder,
13 |
14 | redirectsPlugin({
15 | collections: ['pages', 'posts'],
16 | overrides: {
17 | // @ts-expect-error - This is a valid override, mapped fields don't resolve to the same type
18 | fields: ({ defaultFields }) => {
19 | return defaultFields.map((field) => {
20 | if ('name' in field && field.name === 'from') {
21 | return {
22 | ...field,
23 | admin: {
24 | description: 'You will need to rebuild the website when changing this field.',
25 | },
26 | }
27 | }
28 | return field
29 | })
30 | },
31 | hooks: {
32 | afterChange: [revalidateRedirects],
33 | },
34 | },
35 | }),
36 |
37 | seoPlugin({
38 | generateTitle: ({ doc }: { doc: Post | Page }) => {
39 | return doc?.title ? `${doc.title} | payloadblocks.dev Website Template` : 'payloadblocks.dev Website Template'
40 | },
41 | generateURL: ({ doc }: { doc: Post | Page }) => {
42 | const url = getServerSideURL()
43 | return doc?.slug ? `${url}/${doc.slug}` : url
44 | },
45 | }),
46 |
47 | payloadCloudPlugin(),
48 | ]
--------------------------------------------------------------------------------
/tailwind.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | './pages/**/*.{ts,tsx}',
5 | './components/**/*.{ts,tsx}',
6 | './app/**/*.{ts,tsx}',
7 | './src/**/*.{ts,tsx}',
8 | ],
9 | darkMode: ['selector', '[data-theme="dark"]'],
10 | plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
11 | prefix: '',
12 | safelist: [
13 | 'lg:col-span-4',
14 | 'lg:col-span-6',
15 | 'lg:col-span-8',
16 | 'lg:col-span-12',
17 | 'border-border',
18 | 'bg-card',
19 | 'border-error',
20 | 'bg-error/30',
21 | 'border-success',
22 | 'bg-success/30',
23 | 'border-warning',
24 | 'bg-warning/30',
25 | ],
26 | theme: {
27 | container: {
28 | center: true,
29 | padding: {
30 | '2xl': '2rem',
31 | DEFAULT: '1rem',
32 | lg: '2rem',
33 | md: '2rem',
34 | sm: '1rem',
35 | xl: '2rem',
36 | },
37 | screens: {
38 | '2xl': '86rem',
39 | lg: '64rem',
40 | md: '48rem',
41 | sm: '40rem',
42 | xl: '80rem',
43 | },
44 | },
45 | extend: {
46 | animation: {
47 | 'accordion-down': 'accordion-down 0.2s ease-out',
48 | 'accordion-up': 'accordion-up 0.2s ease-out',
49 | },
50 | borderRadius: {
51 | lg: 'var(--radius)',
52 | md: 'calc(var(--radius) - 2px)',
53 | sm: 'calc(var(--radius) - 4px)',
54 | },
55 | colors: {
56 | accent: {
57 | DEFAULT: 'hsl(var(--accent))',
58 | foreground: 'hsl(var(--accent-foreground))',
59 | },
60 | background: 'hsl(var(--background))',
61 | border: 'hsla(var(--border))',
62 | card: {
63 | DEFAULT: 'hsl(var(--card))',
64 | foreground: 'hsl(var(--card-foreground))',
65 | },
66 | destructive: {
67 | DEFAULT: 'hsl(var(--destructive))',
68 | foreground: 'hsl(var(--destructive-foreground))',
69 | },
70 | foreground: 'hsl(var(--foreground))',
71 | input: 'hsl(var(--input))',
72 | muted: {
73 | DEFAULT: 'hsl(var(--muted))',
74 | foreground: 'hsl(var(--muted-foreground))',
75 | },
76 | popover: {
77 | DEFAULT: 'hsl(var(--popover))',
78 | foreground: 'hsl(var(--popover-foreground))',
79 | },
80 | primary: {
81 | DEFAULT: 'hsl(var(--primary))',
82 | foreground: 'hsl(var(--primary-foreground))',
83 | },
84 | ring: 'hsl(var(--ring))',
85 | secondary: {
86 | DEFAULT: 'hsl(var(--secondary))',
87 | foreground: 'hsl(var(--secondary-foreground))',
88 | },
89 | success: 'hsl(var(--success))',
90 | error: 'hsl(var(--error))',
91 | warning: 'hsl(var(--warning))',
92 | },
93 | fontFamily: {
94 | mono: ['var(--font-geist-mono)'],
95 | sans: ['var(--font-geist-sans)'],
96 | },
97 | keyframes: {
98 | 'accordion-down': {
99 | from: { height: '0' },
100 | to: { height: 'var(--radix-accordion-content-height)' },
101 | },
102 | 'accordion-up': {
103 | from: { height: 'var(--radix-accordion-content-height)' },
104 | to: { height: '0' },
105 | },
106 | },
107 | typography: ({ theme }) => ({
108 | DEFAULT: {
109 | css: [
110 | {
111 | '--tw-prose-body': 'var(--text)',
112 | '--tw-prose-headings': 'var(--text)',
113 | h1: {
114 | fontWeight: 'normal',
115 | marginBottom: '0.25em',
116 | },
117 | },
118 | ],
119 | },
120 | base: {
121 | css: [
122 | {
123 | h1: {
124 | fontSize: '2.5rem',
125 | },
126 | h2: {
127 | fontSize: '1.25rem',
128 | fontWeight: 600,
129 | },
130 | },
131 | ],
132 | },
133 | md: {
134 | css: [
135 | {
136 | h1: {
137 | fontSize: '3.5rem',
138 | },
139 | h2: {
140 | fontSize: '1.5rem',
141 | },
142 | },
143 | ],
144 | },
145 | }),
146 | },
147 | },
148 | }
149 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "esModuleInterop": true,
5 | "target": "ES2022",
6 | "lib": [
7 | "DOM",
8 | "DOM.Iterable",
9 | "ES2022"
10 | ],
11 | "allowJs": true,
12 | "skipLibCheck": true,
13 | "strict": false,
14 | "strictNullChecks": true,
15 | "forceConsistentCasingInFileNames": true,
16 | "noEmit": true,
17 | "incremental": true,
18 | "jsx": "preserve",
19 | "module": "esnext",
20 | "moduleResolution": "bundler",
21 | "resolveJsonModule": true,
22 | "sourceMap": true,
23 | "isolatedModules": true,
24 | "plugins": [
25 | {
26 | "name": "next"
27 | }
28 | ],
29 | "paths": {
30 | "@payload-config": [
31 | "./src/payload.config.ts"
32 | ],
33 | "react": [
34 | "./node_modules/@types/react"
35 | ],
36 | "@/*": [
37 | "./src/*"
38 | ],
39 | }
40 | },
41 | "include": [
42 | "**/*.ts",
43 | "**/*.tsx",
44 | ".next/types/**/*.ts",
45 | "redirects.js",
46 | "next.config.ts",
47 | "next-sitemap.config.cjs",
48 | ],
49 | "exclude": [
50 | "node_modules"
51 | ]
52 | }
53 |
--------------------------------------------------------------------------------