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
2024-12-05 15:08:02 -06:00
parent 1ab3be65f8
commit 19ddd3cfc6
13 changed files with 141 additions and 64 deletions
--- 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>
+}
--- 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: {
--- 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>
+}
--- 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: {
--- 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,
 }
--- 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,
    },
  ],
--- 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">
--- 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',
--- 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,
      )}
--- 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,30 +150,30 @@ export const seed = async ({
        title: 'Finance',
      },
    }),
+    payload.create({
+      collection: 'categories',
+      data: {
+        title: 'Design',
+      },
+    }),
+
+    payload.create({
+      collection: 'categories',
+      data: {
+        title: 'Software',
+      },
+    }),
+
+    payload.create({
+      collection: 'categories',
+      data: {
+        title: 'Engineering',
+      },
+    }),
  ])
+
  let demoAuthorID: number | string = demoAuthor.id

-  await payload.create({
-    collection: 'categories',
-    data: {
-      title: 'Design',
-    },
-  })
-
-  await payload.create({
-    collection: 'categories',
-    data: {
-      title: 'Software',
-    },
-  })
-
-  await payload.create({
-    collection: 'categories',
-    data: {
-      title: 'Engineering',
-    },
-  })
-
  let image1ID: number | string = image1Doc.id
  let image2ID: number | string = image2Doc.id
  let image3ID: number | string = image3Doc.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...`)

--- 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)
--- 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}>
--- 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',
+              },
+            },
+          ],
        },
      }),
    },