feat(cms): implement reusable content pattern

closed COD-294

Author: hakalb

apps/cms/src/app/(frontend)/globals.css

@@ -1,5 +1,8 @@
 @import 'tailwindcss';
 
+/* Custom Tailwind css for Payload CMS */
+@import '../../../../../libs/shared/util/tailwind/src/lib/payload.css';
+
 /* Let Tailwind know about the shadcn components */
 @source '../../../../../libs/shared/ui';
 

apps/cms/src/collections/cards/cards.collection.ts

@@ -9,6 +9,7 @@ const env = getEnv();
 
 /**
  * Cards collection where one or many reusable cards can be created
+ * @deprecated use reusable-content instead
  */
 const cards: CollectionConfig = {
   slug: 'cards',

apps/cms/src/collections/pages/pages.collection.ts

@@ -50,11 +50,6 @@ const pages: CollectionConfig<'pages'> = {
     {
       type: 'tabs',
       tabs: [
-        // TODO: Maybe here or as a block
-        // {
-        //   label: 'Hero',
-        //   fields: []
-        // },
         {
           label: { en: 'Content', sv: 'Innehåll' },
           fields: [
@@ -76,7 +71,14 @@ const pages: CollectionConfig<'pages'> = {
               name: 'layout',
               type: 'blocks',
               label: 'Layout builder',
-              blockReferences: ['content', 'card', 'form', 'media', 'code'],
+              blockReferences: [
+                'content',
+                'card',
+                'form',
+                'media',
+                'code',
+                'reusable-content'
+              ],
               blocks: [],
               required: true,
               localized: true,

apps/cms/src/collections/posts/posts.collection.ts

@@ -69,7 +69,9 @@ const posts: CollectionConfig<'posts'> = {
                   HeadingFeature({
                     enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4']
                   }),
-                  BlocksFeature({ blocks: ['card', 'code', 'media'] })
+                  BlocksFeature({
+                    blocks: ['card', 'code', 'media', 'reusable-content']
+                  })
                 ]
               }),
               label: false,

apps/cms/src/collections/reusable-content/reusable-content.collection.ts

@@ -0,0 +1,53 @@
+import type { CollectionConfig } from 'payload';
+
+import { getEnv } from '@codeware/app-cms/feature/env-loader';
+import { verifyApiKeyAccess } from '@codeware/app-cms/util/access';
+import { adminGroups } from '@codeware/app-cms/util/definitions';
+
+const env = getEnv();
+
+/**
+ * Reusable content collection
+ */
+const reusableContent: CollectionConfig = {
+  slug: 'reusable-content',
+  access: {
+    read: verifyApiKeyAccess({ secret: env.SIGNATURE_SECRET })
+  },
+  admin: {
+    group: adminGroups.content,
+    useAsTitle: 'title',
+    description: {
+      en: 'Reusable content is a collection of blocks that can be combined freely and used in various places.',
+      sv: 'Återanvändbara element är en samling block som kan kombineras fritt och användas på olika ställen.'
+    }
+  },
+  labels: {
+    plural: { en: 'Reusable Contents', sv: 'Återanvändbara element' },
+    singular: { en: 'Reusable Content', sv: 'Återanvändbart element' }
+  },
+  fields: [
+    {
+      name: 'title',
+      label: { en: 'Title', sv: 'Titel' },
+      type: 'text',
+      required: true,
+      localized: true,
+      admin: {
+        description: {
+          en: 'What is the reusable content about?',
+          sv: 'Vad handlar det återanvändbara elementet om?'
+        }
+      }
+    },
+    {
+      name: 'layout',
+      type: 'blocks',
+      blockReferences: ['card', 'code', 'content', 'form', 'media'],
+      blocks: [],
+      required: true
+    }
+  ]
+};
+
+export default reusableContent;