Skip to content

Commit 19ddd3c

Browse files
paulpopuspaulpopus
authored
templates: improvements to seed speed on website template and updated hero and collapsible fields (#9779)
- Improvements to seed speed on the website template - Update hero on mobile - Fields are collapsed by default where possible now - Add rowlabel components for nav items
1 parent 1ab3be6 commit 19ddd3c

File tree

13 files changed

+140
-63
lines changed

13 files changed

+140
-63
lines changed

‎templates/website/src/Footer/RowLabel.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use client'
2+
import { Header } from '@/payload-types'
3+
import { RowLabelProps, useRowLabel } from '@payloadcms/ui'
4+
5+
export const RowLabel: React.FC<RowLabelProps> = (props) => {
6+
const data = useRowLabel<NonNullable<Header['navItems']>[number]>()
7+
8+
const label = data?.data?.link?.label
9+
? `Nav item ${data.rowNumber !== undefined ? data.rowNumber + 1 : ''}: ${data?.data?.link?.label}`
10+
: 'Row'
11+
12+
return <div>{label}</div>
13+
}

‎templates/website/src/Footer/config.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ export const Footer: GlobalConfig = {
1818
}),
1919
],
2020
maxRows: 6,
21+
admin: {
22+
initCollapsed: true,
23+
components: {
24+
RowLabel: '@/Footer/RowLabel#RowLabel',
25+
},
26+
},
2127
},
2228
],
2329
hooks: {

‎templates/website/src/Header/RowLabel.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use client'
2+
import { Header } from '@/payload-types'
3+
import { RowLabelProps, useRowLabel } from '@payloadcms/ui'
4+
5+
export const RowLabel: React.FC<RowLabelProps> = (props) => {
6+
const data = useRowLabel<NonNullable<Header['navItems']>[number]>()
7+
8+
const label = data?.data?.link?.label
9+
? `Nav item ${data.rowNumber !== undefined ? data.rowNumber + 1 : ''}: ${data?.data?.link?.label}`
10+
: 'Row'
11+
12+
return <div>{label}</div>
13+
}

‎templates/website/src/Header/config.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ export const Header: GlobalConfig = {
1818
}),
1919
],
2020
maxRows: 6,
21+
admin: {
22+
initCollapsed: true,
23+
components: {
24+
RowLabel: '@/Header/RowLabel#RowLabel',
25+
},
26+
},
2127
},
2228
],
2329
hooks: {

‎templates/website/src/app/(payload)/admin/importMap.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f
1818
import { BlocksFeatureClient as BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
1919
import { LinkToDoc as LinkToDoc_aead06e4cbf6b2620c5c51c9ab283634 } from '@payloadcms/plugin-search/client'
2020
import { ReindexButton as ReindexButton_aead06e4cbf6b2620c5c51c9ab283634 } from '@payloadcms/plugin-search/client'
21+
import { RowLabel as RowLabel_ec255a65fa6fa8d1faeb09cf35284224 } from '@/Header/RowLabel'
22+
import { RowLabel as RowLabel_1f6ff6ff633e3695d348f4f3c58f1466 } from '@/Footer/RowLabel'
2123
import { default as default_1a7510af427896d367a49dbf838d2de6 } from '@/components/BeforeDashboard'
2224
import { default as default_8a7ab0eb7ab5c511aba12e68480bfe5e } from '@/components/BeforeLogin'
2325

@@ -59,6 +61,8 @@ export const importMap = {
5961
BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
6062
'@payloadcms/plugin-search/client#LinkToDoc': LinkToDoc_aead06e4cbf6b2620c5c51c9ab283634,
6163
'@payloadcms/plugin-search/client#ReindexButton': ReindexButton_aead06e4cbf6b2620c5c51c9ab283634,
64+
'@/Header/RowLabel#RowLabel': RowLabel_ec255a65fa6fa8d1faeb09cf35284224,
65+
'@/Footer/RowLabel#RowLabel': RowLabel_1f6ff6ff633e3695d348f4f3c58f1466,
6266
'@/components/BeforeDashboard#default': default_1a7510af427896d367a49dbf838d2de6,
6367
'@/components/BeforeLogin#default': default_8a7ab0eb7ab5c511aba12e68480bfe5e,
6468
}

‎templates/website/src/blocks/Content/config.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@ export const Content: Block = {
6868
{
6969
name: 'columns',
7070
type: 'array',
71+
admin: {
72+
initCollapsed: true,
73+
},
7174
fields: columnFields,
7275
},
7376
],

‎templates/website/src/blocks/RelatedPosts/Component.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const RelatedPosts: React.FC<RelatedPostsProps> = (props) => {
1616
const { className, docs, introContent } = props
1717

1818
return (
19-
<div className={clsx('container', className)}>
19+
<div className={clsx('lg:container', className)}>
2020
{introContent && <RichText data={introContent} enableGutter={false} />}
2121

2222
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 items-stretch">

‎templates/website/src/collections/Pages/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,9 @@ export const Pages: CollectionConfig<'pages'> = {
7979
type: 'blocks',
8080
blocks: [CallToAction, Content, MediaBlock, Archive, FormBlock],
8181
required: true,
82+
admin: {
83+
initCollapsed: true,
84+
},
8285
},
8386
],
8487
label: 'Content',

‎templates/website/src/components/RichText/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default function RichText(props: Props) {
5555
{
5656
'container ': enableGutter,
5757
'max-w-none': !enableGutter,
58-
'mx-auto prose dark:prose-invert ': enableProse,
58+
'mx-auto prose md:prose-md dark:prose-invert ': enableProse,
5959
},
6060
className,
6161
)}

‎templates/website/src/endpoints/seed/index.ts

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const seed = async ({
3838
// this is because while `yarn seed` drops the database
3939
// the custom `/api/seed` endpoint does not
4040
payload.logger.info(`— Clearing collections and globals...`)
41+
4142
// clear the database
4243
await Promise.all(
4344
globals.map((global) =>
@@ -54,16 +55,9 @@ export const seed = async ({
5455
),
5556
)
5657

57-
for (const collection of collections) {
58-
await payload.delete({
59-
collection: collection,
60-
where: {},
61-
depth: 0,
62-
context: {
63-
disableRevalidate: true,
64-
},
65-
})
66-
}
58+
await Promise.all(
59+
collections.map((collection) => payload.db.deleteMany({ collection, req, where: {} })),
60+
)
6761

6862
payload.logger.info(`— Seeding demo author and user...`)
6963

@@ -78,6 +72,7 @@ export const seed = async ({
7872
})
7973

8074
payload.logger.info(`— Seeding media...`)
75+
8176
const [image1Buffer, image2Buffer, image3Buffer, hero1Buffer] = await Promise.all([
8277
fetchFileByURL(
8378
'https://raw.githubusercontent.com/payloadcms/payload/refs/heads/main/templates/website/src/endpoints/seed/image-post1.webp',
@@ -102,6 +97,9 @@ export const seed = async ({
10297
technologyCategory,
10398
newsCategory,
10499
financeCategory,
100+
designCategory,
101+
softwareCategory,
102+
engineeringCategory,
105103
] = await Promise.all([
106104
payload.create({
107105
collection: 'users',
@@ -152,29 +150,29 @@ export const seed = async ({
152150
title: 'Finance',
153151
},
154152
}),
155-
])
156-
let demoAuthorID: number | string = demoAuthor.id
153+
payload.create({
154+
collection: 'categories',
155+
data: {
156+
title: 'Design',
157+
},
158+
}),
157159

158-
await payload.create({
159-
collection: 'categories',
160-
data: {
161-
title: 'Design',
162-
},
163-
})
160+
payload.create({
161+
collection: 'categories',
162+
data: {
163+
title: 'Software',
164+
},
165+
}),
164166

165-
await payload.create({
166-
collection: 'categories',
167-
data: {
168-
title: 'Software',
169-
},
170-
})
167+
payload.create({
168+
collection: 'categories',
169+
data: {
170+
title: 'Engineering',
171+
},
172+
}),
173+
])
171174

172-
await payload.create({
173-
collection: 'categories',
174-
data: {
175-
title: 'Engineering',
176-
},
177-
})
175+
let demoAuthorID: number | string = demoAuthor.id
178176

179177
let image1ID: number | string = image1Doc.id
180178
let image2ID: number | string = image2Doc.id
@@ -236,27 +234,29 @@ export const seed = async ({
236234
})
237235

238236
// update each post with related posts
239-
await payload.update({
240-
id: post1Doc.id,
241-
collection: 'posts',
242-
data: {
243-
relatedPosts: [post2Doc.id, post3Doc.id],
244-
},
245-
})
246-
await payload.update({
247-
id: post2Doc.id,
248-
collection: 'posts',
249-
data: {
250-
relatedPosts: [post1Doc.id, post3Doc.id],
251-
},
252-
})
253-
await payload.update({
254-
id: post3Doc.id,
255-
collection: 'posts',
256-
data: {
257-
relatedPosts: [post1Doc.id, post2Doc.id],
258-
},
259-
})
237+
await Promise.all([
238+
payload.update({
239+
id: post1Doc.id,
240+
collection: 'posts',
241+
data: {
242+
relatedPosts: [post2Doc.id, post3Doc.id],
243+
},
244+
}),
245+
payload.update({
246+
id: post2Doc.id,
247+
collection: 'posts',
248+
data: {
249+
relatedPosts: [post1Doc.id, post3Doc.id],
250+
},
251+
}),
252+
payload.update({
253+
id: post3Doc.id,
254+
collection: 'posts',
255+
data: {
256+
relatedPosts: [post1Doc.id, post2Doc.id],
257+
},
258+
}),
259+
])
260260

261261
payload.logger.info(`— Seeding contact form...`)
262262

‎templates/website/src/fields/linkGroup.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ export const linkGroup: LinkGroupType = ({ appearances, overrides = {} } = {}) =
1919
appearances,
2020
}),
2121
],
22+
admin: {
23+
initCollapsed: true,
24+
},
2225
}
2326

2427
return deepMerge(generatedLinkGroup, overrides)

‎templates/website/src/heros/HighImpact/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ export const HighImpactHero: React.FC<Page['hero']> = ({ links, media, richText
2121
data-theme="dark"
2222
>
2323
<div className="container mb-8 z-10 relative flex items-center justify-center">
24-
<div className="max-w-[36.5rem] text-center">
24+
<div className="max-w-[36.5rem] md:text-center">
2525
{richText && <RichText className="mb-6" data={richText} enableGutter={false} />}
2626
{Array.isArray(links) && links.length > 0 && (
27-
<ul className="flex justify-center gap-4">
27+
<ul className="flex md:justify-center gap-4">
2828
{links.map(({ link }, i) => {
2929
return (
3030
<li key={i}>

‎templates/website/tailwind.config.mjs

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -106,15 +106,41 @@ export default {
106106
},
107107
typography: ({ theme }) => ({
108108
DEFAULT: {
109-
css: {
110-
'--tw-prose-body': 'var(--text)',
111-
'--tw-prose-headings': 'var(--text)',
112-
h1: {
113-
fontSize: '3.5rem',
114-
fontWeight: 'normal',
115-
marginBottom: '0.25em',
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+
},
116117
},
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+
],
118144
},
119145
}),
120146
},

0 commit comments

Comments
 (0)