templates: fix nested docs url generation for categories (#10403)

Fixes #10374

templates/website/src/collections/Categories.ts

@@ -2,6 +2,7 @@ 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',
@@ -20,5 +21,6 @@ export const Categories: CollectionConfig = {
       type: 'text',
       required: true,
     },
+    ...slugField(),
   ],
 }

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

@@ -141,40 +141,76 @@ export const seed = async ({
       collection: 'categories',
       data: {
         title: 'Technology',
+        breadcrumbs: [
+          {
+            label: 'Technology',
+            url: '/technology',
+          },
+        ],
       },
     }),
 
     payload.create({
       collection: 'categories',
       data: {
         title: 'News',
+        breadcrumbs: [
+          {
+            label: 'News',
+            url: '/news',
+          },
+        ],
       },
     }),
 
     payload.create({
       collection: 'categories',
       data: {
         title: 'Finance',
+        breadcrumbs: [
+          {
+            label: 'Finance',
+            url: '/finance',
+          },
+        ],
       },
     }),
     payload.create({
       collection: 'categories',
       data: {
         title: 'Design',
+        breadcrumbs: [
+          {
+            label: 'Design',
+            url: '/design',
+          },
+        ],
       },
     }),
 
     payload.create({
       collection: 'categories',
       data: {
         title: 'Software',
+        breadcrumbs: [
+          {
+            label: 'Software',
+            url: '/software',
+          },
+        ],
       },
     }),
 
     payload.create({
       collection: 'categories',
       data: {
         title: 'Engineering',
+        breadcrumbs: [
+          {
+            label: 'Engineering',
+            url: '/engineering',
+          },
+        ],
       },
     }),
   ])

templates/website/src/payload-types.ts

@@ -117,6 +117,9 @@ export interface Page {
                 } | null);
             url?: string | null;
             label: string;
+            /**
+             * Choose how the link should be rendered.
+             */
             appearance?: ('default' | 'outline') | null;
           };
           id?: string | null;
@@ -127,6 +130,9 @@ export interface Page {
   layout: (CallToActionBlock | ContentBlock | MediaBlock | ArchiveBlock | FormBlock)[];
   meta?: {
     title?: string | null;
+    /**
+     * Maximum upload file size: 12MB. Recommended file size for images is <500KB.
+     */
     image?: (string | null) | Media;
     description?: string | null;
   };
@@ -164,6 +170,9 @@ export interface Post {
   categories?: (string | Category)[] | null;
   meta?: {
     title?: string | null;
+    /**
+     * Maximum upload file size: 12MB. Recommended file size for images is <500KB.
+     */
     image?: (string | null) | Media;
     description?: string | null;
   };
@@ -280,6 +289,8 @@ export interface Media {
 export interface Category {
   id: string;
   title: string;
+  slug?: string | null;
+  slugLock?: boolean | null;
   parent?: (string | null) | Category;
   breadcrumbs?:
     | {
@@ -346,6 +357,9 @@ export interface CallToActionBlock {
               } | null);
           url?: string | null;
           label: string;
+          /**
+           * Choose how the link should be rendered.
+           */
           appearance?: ('default' | 'outline') | null;
         };
         id?: string | null;
@@ -393,6 +407,9 @@ export interface ContentBlock {
               } | null);
           url?: string | null;
           label: string;
+          /**
+           * Choose how the link should be rendered.
+           */
           appearance?: ('default' | 'outline') | null;
         };
         id?: string | null;
@@ -588,6 +605,9 @@ export interface Form {
       )[]
     | null;
   submitButtonLabel?: string | null;
+  /**
+   * Choose whether to display an on-page message or redirect to a different page after they submit the form.
+   */
   confirmationType?: ('message' | 'redirect') | null;
   confirmationMessage?: {
     root: {
@@ -607,6 +627,9 @@ export interface Form {
   redirect?: {
     url: string;
   };
+  /**
+   * Send custom emails when the form submits. Use comma separated lists to send the same email to multiple recipients. To reference a value from this form, wrap that field's name with double curly brackets, i.e. {{firstName}}. You can use a wildcard {{*}} to output all data and {{*:table}} to format it as an HTML table in the email.
+   */
   emails?:
     | {
         emailTo?: string | null;
@@ -615,6 +638,9 @@ export interface Form {
         replyTo?: string | null;
         emailFrom?: string | null;
         subject: string;
+        /**
+         * Enter the message that should be sent in this email.
+         */
         message?: {
           root: {
             type: string;
@@ -642,6 +668,9 @@ export interface Form {
  */
 export interface Redirect {
   id: string;
+  /**
+   * You will need to rebuild the website when changing this field.
+   */
   from: string;
   to?: {
     type?: ('reference' | 'custom') | null;
@@ -677,6 +706,8 @@ export interface FormSubmission {
   createdAt: string;
 }
 /**
+ * This is a collection of automatically created search results. These results are used by the global site search and will be updated automatically as documents in the CMS are created or updated.
+ *
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "search".
  */
@@ -1054,6 +1085,8 @@ export interface MediaSelect<T extends boolean = true> {
  */
 export interface CategoriesSelect<T extends boolean = true> {
   title?: T;
+  slug?: T;
+  slugLock?: T;
   parent?: T;
   breadcrumbs?:
     | T

templates/website/src/plugins/index.ts

@@ -49,6 +49,7 @@ export const plugins: Plugin[] = [
   }),
   nestedDocsPlugin({
     collections: ['categories'],
+    generateURL: (docs) => docs.reduce((url, doc) => `${url}/${doc.slug}`, ''),
   }),
   seoPlugin({
     generateTitle,

templates/with-vercel-website/src/collections/Categories.ts

@@ -2,6 +2,7 @@ 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',
@@ -20,5 +21,6 @@ export const Categories: CollectionConfig = {
       type: 'text',
       required: true,
     },
+    ...slugField(),
   ],
 }

templates/with-vercel-website/src/endpoints/seed/index.ts

@@ -141,40 +141,76 @@ export const seed = async ({
       collection: 'categories',
       data: {
         title: 'Technology',
+        breadcrumbs: [
+          {
+            label: 'Technology',
+            url: '/technology',
+          },
+        ],
       },
     }),
 
     payload.create({
       collection: 'categories',
       data: {
         title: 'News',
+        breadcrumbs: [
+          {
+            label: 'News',
+            url: '/news',
+          },
+        ],
       },
     }),
 
     payload.create({
       collection: 'categories',
       data: {
         title: 'Finance',
+        breadcrumbs: [
+          {
+            label: 'Finance',
+            url: '/finance',
+          },
+        ],
       },
     }),
     payload.create({
       collection: 'categories',
       data: {
         title: 'Design',
+        breadcrumbs: [
+          {
+            label: 'Design',
+            url: '/design',
+          },
+        ],
       },
     }),
 
     payload.create({
       collection: 'categories',
       data: {
         title: 'Software',
+        breadcrumbs: [
+          {
+            label: 'Software',
+            url: '/software',
+          },
+        ],
       },
     }),
 
     payload.create({
       collection: 'categories',
       data: {
         title: 'Engineering',
+        breadcrumbs: [
+          {
+            label: 'Engineering',
+            url: '/engineering',
+          },
+        ],
       },
     }),
   ])