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
payloadcms · Dec 5, 2024 · 19ddd3c · 19ddd3c
1 parent 1ab3be6
commit 19ddd3c
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 63 deletions.
diff --git a/templates/website/src/Footer/RowLabel.tsx b/templates/website/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> = (props) => {
+  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>
+}
diff --git a/templates/website/src/Footer/config.ts b/templates/website/src/Footer/config.ts
@@ -18,6 +18,12 @@ export const Footer: GlobalConfig = {
         }),
       ],
       maxRows: 6,
+      admin: {
+        initCollapsed: true,
+        components: {
+          RowLabel: '@/Footer/RowLabel#RowLabel',
+        },
+      },
     },
   ],
   hooks: {

diff --git a/templates/website/src/Header/RowLabel.tsx b/templates/website/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> = (props) => {
+  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>
+}
diff --git a/templates/website/src/Header/config.ts b/templates/website/src/Header/config.ts
@@ -18,6 +18,12 @@ export const Header: GlobalConfig = {
         }),
       ],
       maxRows: 6,
+      admin: {
+        initCollapsed: true,
+        components: {
+          RowLabel: '@/Header/RowLabel#RowLabel',
+        },
+      },
     },
   ],
   hooks: {

diff --git a/templates/website/src/app/(payload)/admin/importMap.js b/templates/website/src/app/(payload)/admin/importMap.js
@@ -18,6 +18,8 @@ import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f
 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'
 
@@ -59,6 +61,8 @@ export const importMap = {
     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,
 }
diff --git a/templates/website/src/blocks/Content/config.ts b/templates/website/src/blocks/Content/config.ts
@@ -68,6 +68,9 @@ export const Content: Block = {
     {
       name: 'columns',
       type: 'array',
+      admin: {
+        initCollapsed: true,
+      },
       fields: columnFields,
     },
   ],

diff --git a/templates/website/src/blocks/RelatedPosts/Component.tsx b/templates/website/src/blocks/RelatedPosts/Component.tsx
@@ -16,7 +16,7 @@ export const RelatedPosts: React.FC<RelatedPostsProps> = (props) => {
   const { className, docs, introContent } = props
 
   return (
-    <div className={clsx('container', className)}>
+    <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">

diff --git a/templates/website/src/collections/Pages/index.ts b/templates/website/src/collections/Pages/index.ts
@@ -79,6 +79,9 @@ export const Pages: CollectionConfig<'pages'> = {
               type: 'blocks',
               blocks: [CallToAction, Content, MediaBlock, Archive, FormBlock],
               required: true,
+              admin: {
+                initCollapsed: true,
+              },
             },
           ],
           label: 'Content',

diff --git a/templates/website/src/components/RichText/index.tsx b/templates/website/src/components/RichText/index.tsx
@@ -55,7 +55,7 @@ export default function RichText(props: Props) {
         {
           'container ': enableGutter,
           'max-w-none': !enableGutter,
-          'mx-auto prose dark:prose-invert ': enableProse,
+          'mx-auto prose md:prose-md dark:prose-invert ': enableProse,
         },
         className,
       )}

diff --git a/templates/website/src/endpoints/seed/index.ts b/templates/website/src/endpoints/seed/index.ts
@@ -38,6 +38,7 @@ export const seed = async ({
   // this is because while `yarn seed` drops the database
   // the custom `/api/seed` endpoint does not
   payload.logger.info(`— Clearing collections and globals...`)
+
   // clear the database
   await Promise.all(
     globals.map((global) =>
@@ -54,16 +55,9 @@ export const seed = async ({
     ),
   )
 
-  for (const collection of collections) {
-    await payload.delete({
-      collection: collection,
-      where: {},
-      depth: 0,
-      context: {
-        disableRevalidate: true,
-      },
-    })
-  }
+  await Promise.all(
+    collections.map((collection) => payload.db.deleteMany({ collection, req, where: {} })),
+  )
 
   payload.logger.info(`— Seeding demo author and user...`)
 
@@ -78,6 +72,7 @@ export const seed = async ({
   })
 
   payload.logger.info(`— Seeding media...`)
+
   const [image1Buffer, image2Buffer, image3Buffer, hero1Buffer] = await Promise.all([
     fetchFileByURL(
       '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 ({
     technologyCategory,
     newsCategory,
     financeCategory,
+    designCategory,
+    softwareCategory,
+    engineeringCategory,
   ] = await Promise.all([
     payload.create({
       collection: 'users',
@@ -152,29 +150,29 @@ export const seed = async ({
         title: 'Finance',
       },
     }),
-  ])
-  let demoAuthorID: number | string = demoAuthor.id
+    payload.create({
+      collection: 'categories',
+      data: {
+        title: 'Design',
+      },
+    }),
 
-  await payload.create({
-    collection: 'categories',
-    data: {
-      title: 'Design',
-    },
-  })
+    payload.create({
+      collection: 'categories',
+      data: {
+        title: 'Software',
+      },
+    }),
 
-  await payload.create({
-    collection: 'categories',
-    data: {
-      title: 'Software',
-    },
-  })
+    payload.create({
+      collection: 'categories',
+      data: {
+        title: 'Engineering',
+      },
+    }),
+  ])
 
-  await payload.create({
-    collection: 'categories',
-    data: {
-      title: 'Engineering',
-    },
-  })
+  let demoAuthorID: number | string = demoAuthor.id
 
   let image1ID: number | string = image1Doc.id
   let image2ID: number | string = image2Doc.id
@@ -236,27 +234,29 @@ export const seed = async ({
   })
 
   // update each post with related posts
-  await payload.update({
-    id: post1Doc.id,
-    collection: 'posts',
-    data: {
-      relatedPosts: [post2Doc.id, post3Doc.id],
-    },
-  })
-  await payload.update({
-    id: post2Doc.id,
-    collection: 'posts',
-    data: {
-      relatedPosts: [post1Doc.id, post3Doc.id],
-    },
-  })
-  await payload.update({
-    id: post3Doc.id,
-    collection: 'posts',
-    data: {
-      relatedPosts: [post1Doc.id, post2Doc.id],
-    },
-  })
+  await Promise.all([
+    payload.update({
+      id: post1Doc.id,
+      collection: 'posts',
+      data: {
+        relatedPosts: [post2Doc.id, post3Doc.id],
+      },
+    }),
+    payload.update({
+      id: post2Doc.id,
+      collection: 'posts',
+      data: {
+        relatedPosts: [post1Doc.id, post3Doc.id],
+      },
+    }),
+    payload.update({
+      id: post3Doc.id,
+      collection: 'posts',
+      data: {
+        relatedPosts: [post1Doc.id, post2Doc.id],
+      },
+    }),
+  ])
 
   payload.logger.info(`— Seeding contact form...`)
 

diff --git a/templates/website/src/fields/linkGroup.ts b/templates/website/src/fields/linkGroup.ts
@@ -19,6 +19,9 @@ export const linkGroup: LinkGroupType = ({ appearances, overrides = {} } = {}) =
         appearances,
       }),
     ],
+    admin: {
+      initCollapsed: true,
+    },
   }
 
   return deepMerge(generatedLinkGroup, overrides)

diff --git a/templates/website/src/heros/HighImpact/index.tsx b/templates/website/src/heros/HighImpact/index.tsx
@@ -21,10 +21,10 @@ export const HighImpactHero: React.FC<Page['hero']> = ({ links, media, richText
       data-theme="dark"
     >
       <div className="container mb-8 z-10 relative flex items-center justify-center">
-        <div className="max-w-[36.5rem] text-center">
+        <div className="max-w-[36.5rem] md:text-center">
           {richText && <RichText className="mb-6" data={richText} enableGutter={false} />}
           {Array.isArray(links) && links.length > 0 && (
-            <ul className="flex justify-center gap-4">
+            <ul className="flex md:justify-center gap-4">
               {links.map(({ link }, i) => {
                 return (
                   <li key={i}>

diff --git a/templates/website/tailwind.config.mjs b/templates/website/tailwind.config.mjs
@@ -106,15 +106,41 @@ export default {
       },
       typography: ({ theme }) => ({
         DEFAULT: {
-          css: {
-            '--tw-prose-body': 'var(--text)',
-            '--tw-prose-headings': 'var(--text)',
-            h1: {
-              fontSize: '3.5rem',
-              fontWeight: 'normal',
-              marginBottom: '0.25em',
+          css: [
+            {
+              '--tw-prose-body': 'var(--text)',
+              '--tw-prose-headings': 'var(--text)',
+              h1: {
+                fontWeight: 'normal',
+                marginBottom: '0.25em',
+              },
             },
-          },
+          ],
+        },
+        base: {
+          css: [
+            {
+              h1: {
+                fontSize: '2.5rem',
+              },
+              h2: {
+                fontSize: '1.25rem',
+                fontWeight: 600,
+              },
+            },
+          ],
+        },
+        md: {
+          css: [
+            {
+              h1: {
+                fontSize: '3.5rem',
+              },
+              h2: {
+                fontSize: '1.5rem',
+              },
+            },
+          ],
         },
       }),
     },