[SCSE-147] Update the Post schema (#74)

* fix docker-compose.yml

* add slug property to Posts.ts

* Update Posts.ts

* add previews

* fix lint (obviously on my own)

apps/cms/.env.example

@@ -2,6 +2,7 @@ MONGODB_URI=mongodb://localhost/cms
 PAYLOAD_SECRET=
 PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000
 PAYLOAD_PUBLIC_SERVER_PORT=3000
+FRONTEND_STAGING_DOMAIN=https://dev.ntuscse.com
 S3_ACCESS_KEY_ID=
 S3_SECRET_ACCESS_KEY=
 S3_BUCKET=

apps/cms/docker/development/docker-compose.yml

@@ -9,8 +9,6 @@ services:
       - --storageEngine=wiredTiger
     volumes:
       - ./data:/data/db
-    logging:
-      driver: none
 
 volumes:
   data:

apps/cms/src/blocks/Content.ts

@@ -0,0 +1,85 @@
+import { Block, Field } from "payload/types";
+import richtext from "../fields/richText/richtext";
+
+const ContentRow: Field = {
+  type: 'row',
+  fields: [
+    {
+      name: 'width',
+      label: 'Column Width',
+      type: 'select',
+      defaultValue: 'full',
+      required: true,
+      options: [
+        {
+          label: 'One Third',
+          value: 'oneThird',
+        },
+        {
+          label: 'Half',
+          value: 'half',
+        },
+        {
+          label: 'Two Thirds',
+          value: 'twoThirds',
+        },
+        {
+          label: 'Full Width',
+          value: 'full',
+        },
+      ],
+      admin: {
+        width: '50%',
+      },
+    },
+    {
+      name: 'alignment',
+      label: 'Alignment',
+      type: 'select',
+      defaultValue: 'left',
+      required: true,
+      options: [
+        {
+          label: 'Left',
+          value: 'left',
+        },
+        {
+          label: 'Center',
+          value: 'center',
+        },
+        {
+          label: 'Right',
+          value: 'right',
+        },
+      ],
+      admin: {
+        width: '50%',
+      },
+    },
+  ]
+}
+
+const ContentColumn: Field = {
+  name: 'columns',
+  type: 'array',
+  minRows: 1,
+  labels: {
+    singular: 'Column',
+    plural: 'Columns',
+  },
+  fields: [
+    ContentRow,
+    richtext()
+  ]
+}
+
+export const ContentBlock: Block = {
+  slug: 'content',
+  labels: {
+    singular: 'Content',
+    plural: 'Content Blocks',
+  },
+  fields: [
+    ContentColumn
+  ]
+}

apps/cms/src/blocks/Media.ts

@@ -0,0 +1,84 @@
+import { Block } from 'payload/types';
+
+export const MediaBlock: Block = {
+  slug: 'media',
+  graphQL: {
+    singularName: 'MediaBlock',
+  },
+  labels: {
+    singular: 'Media Block',
+    plural: 'Media Blocks',
+  },
+  fields: [
+    {
+      name: 'media',
+      label: 'Media',
+      type: 'upload',
+      relationTo: 'media',
+      required: true,
+      admin: {
+        description: 'Maximum upload file size: 12MB. Recommended file size for images is <500KB.',
+      },
+    },
+    // {
+    //   name: 'useVimeo',
+    //   type: 'checkbox',
+    // },
+    // {
+    //   type: 'row',
+    //   fields: [
+    //     {
+    //       name: 'vimeoID',
+    //       label: 'Vimeo ID',
+    //       type: 'text',
+    //       required: true,
+    //       admin: {
+    //         condition: (data, { useVimeo }) => Boolean(useVimeo),
+    //         description: 'Embeds a Vimeo iframe, using the media field as its poster image.',
+    //         width: '50%',
+    //       },
+    //     },
+    //     aspectRatio({
+    //       admin: {
+    //         condition: (data, { useVimeo }) => Boolean(useVimeo),
+    //         description: 'If you need to specify a different aspect ratio than 16:9, set it here.',
+    //         width: '50%',
+    //       },
+    //     }),
+    //   ],
+    // },
+    {
+      name: 'size',
+      label: 'Size',
+      type: 'radio',
+      defaultValue: 'normal',
+      options: [
+        {
+          label: 'Normal',
+          value: 'normal',
+        },
+        {
+          label: 'Wide',
+          value: 'wide',
+        },
+        {
+          label: 'Fullscreen',
+          value: 'fullscreen',
+        },
+      ],
+      admin: {
+        layout: 'horizontal',
+      },
+    },
+    {
+      name: 'caption',
+      label: 'Caption',
+      type: 'richText',
+      admin: {
+        elements: [
+          'link',
+        ],
+      },
+    },
+  ],
+};

apps/cms/src/collections/Posts.ts

@@ -1,28 +1,33 @@
 import { CollectionConfig } from "payload/types";
+import populateSlug from "./hooks/populateSlug";
+import { ContentBlock } from "../blocks/Content";
+import { MediaBlock } from "../blocks/Media";
 
 const Posts: CollectionConfig = {
   slug: "posts",
   admin: {
     defaultColumns: ["title", "author", "category", "tags", "status"],
     useAsTitle: "title",
+    group: "Content",
+    preview: (doc, _options) => {
+      if (doc?.slug) {
+        return `${process.env.FRONTEND_STAGING_DOMAIN}/blog/${doc.slug as string}`
+      }
+      return null
+    }
   },
   access: {
     read: () => true,
+
+  },
+  versions: {
+    drafts: true,
   },
   fields: [
     {
       name: "title",
       type: "text",
     },
-    {
-      name: "author",
-      type: "relationship",
-      relationTo: "users",
-    },
-    {
-      name: "publishedDate",
-      type: "date",
-    },
     {
       name: "category",
       type: "relationship",
@@ -35,8 +40,30 @@ const Posts: CollectionConfig = {
       hasMany: true,
     },
     {
-      name: "content",
-      type: "richText",
+      name: "layout",
+      label: "Page Layout",
+      type: "blocks",
+      minRows: 1,
+      blocks: [
+        ContentBlock,
+        MediaBlock
+      ]
+    },
+    // sidebar stuff
+    {
+      name: "slug",
+      label: "Slug",
+      type: "text",
+      admin: {
+        position: "sidebar",
+        readOnly: true,
+        description: "This is automatically generated from the title."
+      },
+      hooks: {
+        beforeChange: [
+          populateSlug
+        ]
+      }
     },
     {
       name: "status",
@@ -56,6 +83,21 @@ const Posts: CollectionConfig = {
         position: "sidebar",
       },
     },
+    {
+      name: "author",
+      type: "relationship",
+      relationTo: "users",
+      admin: {
+        position: "sidebar",
+      },
+    },
+    {
+      name: "publishedDate",
+      type: "date",
+      admin: {
+        position: "sidebar",
+      },
+    },
   ],
 };
 

apps/cms/src/collections/hooks/populateSlug.ts

@@ -0,0 +1,17 @@
+import { FieldHook } from "payload/types";
+
+const populateSlug: FieldHook = ({ data }) => {
+  const docStatus = (data?.status as string) ?? null
+  if (docStatus !== "published") {
+    const title = data?.title as string
+    if (title) {
+      return title
+      .toLowerCase()
+      .replace(/ /g, "-")
+      .replace(/[^\w-]+/g, "")
+    }
+  }
+  return undefined
+}
+
+export default populateSlug;

apps/cms/src/fields/richText/richtext.ts

@@ -0,0 +1,93 @@
+import { RichTextElement, RichTextField, RichTextLeaf } from 'payload/dist/fields/config/types';
+import deepMerge from '../../utilities/deepMerge';
+// import elements from './elements';
+// import leaves from './leaves';
+// import link from '../link';
+
+type RichText = (
+  overrides?: Partial<RichTextField>,
+  additions?: {
+    elements?: RichTextElement[]
+    leaves?: RichTextLeaf[]
+  }
+) => RichTextField
+
+const richText: RichText = (
+  overrides,
+  _additions = {
+    elements: [],
+    leaves: [],
+  },
+) => deepMerge<RichTextField, Partial<RichTextField>>(
+  {
+    name: 'richText',
+    type: 'richText',
+    admin: {
+      upload: {
+        collections: {
+          media: {
+            fields: [
+              {
+                type: 'richText',
+                name: 'caption',
+                label: 'Caption',
+                // admin: {
+                //   elements: [
+                //     ...elements,
+                //   ],
+                //   leaves: [
+                //     ...leaves,
+                //   ],
+                // },
+              },
+              {
+                type: 'radio',
+                name: 'alignment',
+                label: 'Alignment',
+                options: [
+                  {
+                    label: 'Left',
+                    value: 'left',
+                  },
+                  {
+                    label: 'Center',
+                    value: 'center',
+                  },
+                  {
+                    label: 'Right',
+                    value: 'right',
+                  },
+                ],
+              },
+              {
+                name: 'enableLink',
+                type: 'checkbox',
+                label: 'Enable Link',
+              },
+              // link({
+              //   appearances: false,
+              //   disableLabel: true,
+              //   overrides: {
+              //     admin: {
+              //       condition: (_, data) => Boolean(data?.enableLink),
+              //     },
+              //   },
+              // }),
+            ],
+          },
+        },
+      },
+      // elements: [
+      //   ...elements,
+      //   ...additions.elements || [],
+      // ],
+      // leaves: [
+      //   ...leaves,
+      //   ...additions.leaves || [],
+      // ],
+    },
+  },
+  overrides,
+);
+
+export default richText;