kofi-stack-template-generator 2.1.27 → 2.1.36

package/templates/marketing/payload/src/Footer/hooks/revalidateFooter.ts.hbs

@@ -0,0 +1,13 @@
+import type { GlobalAfterChangeHook } from "payload"
+
+import { revalidateTag } from "next/cache"
+
+export const revalidateFooter: GlobalAfterChangeHook = ({ doc, req: { payload, context } }) => {
+  if (!context.disableRevalidate) {
+    payload.logger.info("Revalidating footer")
+
+    revalidateTag("global_footer")
+  }
+
+  return doc
+}

package/templates/marketing/payload/src/Footer/index.ts.hbs

@@ -0,0 +1 @@
+export { Footer } from "./config"

package/templates/marketing/payload/src/Header/RowLabel.tsx.hbs

@@ -0,0 +1,21 @@
+"use client"
+import type { Header } from "@/payload-types"
+import { type RowLabelProps, useRowLabel } from "@payloadcms/ui"
+
+export const RowLabel: React.FC<RowLabelProps> = () => {
+  const data = useRowLabel<NonNullable<Header["navItems"]>[number]>()
+
+  const itemLabel = data?.data?.label
+  const itemType = data?.data?.type === "megaMenu" ? "Mega Menu" : "Link"
+  const isRight = (data?.data?.position || "left") === "right"
+  const itemPosition = isRight ? "Right" : "Left"
+  const itemAppearance = isRight
+    ? ` · ${(data?.data?.appearance || "button") === "button" ? "Button" : "Link"}`
+    : ""
+
+  const label = itemLabel
+    ? `${data.rowNumber !== undefined ? data.rowNumber + 1 : ""}. ${itemLabel} — ${itemType} (${itemPosition}${itemAppearance})`
+    : "Row"
+
+  return <div>{label}</div>
+}

package/templates/marketing/payload/src/Header/config.ts.hbs

@@ -0,0 +1,208 @@
+import type { GlobalConfig } from "payload"
+
+import { link } from "@/fields/link"
+import { revalidateHeader } from "./hooks/revalidateHeader"
+
+export const Header: GlobalConfig = {
+  slug: "header",
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: "navItems",
+      type: "array",
+      maxRows: 8,
+      admin: {
+        initCollapsed: true,
+        components: {
+          RowLabel: "@/Header/RowLabel#RowLabel",
+        },
+      },
+      fields: [
+        {
+          name: "type",
+          type: "select",
+          defaultValue: "link",
+          options: [
+            { label: "Simple Link", value: "link" },
+            { label: "Mega Menu", value: "megaMenu" },
+          ],
+          admin: {
+            description: "Choose between a simple link or a mega menu dropdown",
+          },
+        },
+        {
+          name: "label",
+          type: "text",
+          required: true,
+          label: "Nav Item Label",
+        },
+        {
+          name: "position",
+          type: "select",
+          defaultValue: "left",
+          options: [
+            { label: "Left (Near Logo)", value: "left" },
+            { label: "Right (CTA Section)", value: "right" },
+          ],
+          admin: {
+            description: "Control where this nav item appears in the header",
+          },
+        },
+        {
+          name: "appearance",
+          type: "select",
+          defaultValue: "button",
+          options: [
+            { label: "Button", value: "button" },
+            { label: "Link", value: "link" },
+          ],
+          admin: {
+            description: "How this item should be displayed",
+            condition: (_, siblingData) => siblingData?.position === "right",
+          },
+        },
+        // Simple link fields
+        link({
+          appearances: false,
+          disableLabel: true,
+          overrides: {
+            admin: {
+              condition: (_, siblingData) => siblingData?.type === "link",
+            },
+          },
+        }),
+        // Mega menu fields
+        {
+          name: "megaMenuColumns",
+          type: "array",
+          label: "Menu Columns",
+          maxRows: 4,
+          admin: {
+            condition: (_, siblingData) => siblingData?.type === "megaMenu",
+          },
+          fields: [
+            {
+              name: "columnLabel",
+              type: "text",
+              label: "Column Heading",
+            },
+            {
+              name: "columnDescription",
+              type: "textarea",
+              label: "Column Description",
+              admin: {
+                description: "Optional description shown below the column heading",
+              },
+            },
+            {
+              name: "items",
+              type: "array",
+              label: "Menu Items",
+              maxRows: 8,
+              fields: [
+                {
+                  name: "label",
+                  type: "text",
+                  required: true,
+                  label: "Item Label",
+                },
+                {
+                  name: "description",
+                  type: "text",
+                  label: "Item Description",
+                  admin: {
+                    description: "Short description shown below the label",
+                  },
+                },
+                {
+                  name: "icon",
+                  type: "select",
+                  label: "Icon",
+                  options: [
+                    { label: "None", value: "none" },
+                    { label: "Layout", value: "layout" },
+                    { label: "Dollar Sign", value: "dollarSign" },
+                    { label: "Search", value: "search" },
+                    { label: "Settings", value: "settings" },
+                    { label: "Zap", value: "zap" },
+                    { label: "Layers", value: "layers" },
+                    { label: "Users", value: "users" },
+                    { label: "Building", value: "building" },
+                    { label: "Globe", value: "globe" },
+                    { label: "Store", value: "store" },
+                    { label: "Rocket", value: "rocket" },
+                    { label: "Target", value: "target" },
+                    { label: "BarChart", value: "barChart" },
+                    { label: "Shield", value: "shield" },
+                    { label: "Database", value: "database" },
+                  ],
+                  defaultValue: "none",
+                },
+                link({
+                  appearances: false,
+                  disableLabel: true,
+                }),
+              ],
+            },
+          ],
+        },
+        // Featured section for mega menu
+        {
+          name: "featuredItem",
+          type: "group",
+          label: "Featured Section",
+          admin: {
+            condition: (_, siblingData) => siblingData?.type === "megaMenu",
+            description: "Optional featured content shown in the mega menu",
+          },
+          fields: [
+            {
+              name: "enabled",
+              type: "checkbox",
+              label: "Show Featured Section",
+              defaultValue: false,
+            },
+            {
+              name: "heading",
+              type: "text",
+              label: "Featured Heading",
+              admin: {
+                condition: (_, siblingData) => siblingData?.enabled,
+              },
+            },
+            {
+              name: "description",
+              type: "textarea",
+              label: "Featured Description",
+              admin: {
+                condition: (_, siblingData) => siblingData?.enabled,
+              },
+            },
+            {
+              name: "image",
+              type: "upload",
+              relationTo: "media",
+              label: "Featured Image",
+              admin: {
+                condition: (_, siblingData) => siblingData?.enabled,
+              },
+            },
+            link({
+              appearances: false,
+              overrides: {
+                admin: {
+                  condition: (_, siblingData) => siblingData?.enabled,
+                },
+              },
+            }),
+          ],
+        },
+      ],
+    },
+  ],
+  hooks: {
+    afterChange: [revalidateHeader],
+  },
+}

package/templates/marketing/payload/src/Header/hooks/revalidateHeader.ts.hbs

@@ -0,0 +1,13 @@
+import type { GlobalAfterChangeHook } from "payload"
+
+import { revalidateTag } from "next/cache"
+
+export const revalidateHeader: GlobalAfterChangeHook = ({ doc, req: { payload, context } }) => {
+  if (!context.disableRevalidate) {
+    payload.logger.info("Revalidating header")
+
+    revalidateTag("global_header")
+  }
+
+  return doc
+}

package/templates/marketing/payload/src/Header/index.ts.hbs

@@ -0,0 +1 @@
+export { Header } from "./config"

package/templates/marketing/payload/src/access/anyone.ts.hbs

@@ -0,0 +1,3 @@
+import type { Access } from "payload"
+
+export const anyone: Access = () => true

package/templates/marketing/payload/src/access/authenticated.ts.hbs

@@ -0,0 +1,9 @@
+import type { AccessArgs } from "payload"
+
+import type { User } from "@/payload-types"
+
+type isAuthenticated = (args: AccessArgs<User>) => boolean
+
+export const authenticated: isAuthenticated = ({ req: { user } }) => {
+  return Boolean(user)
+}

package/templates/marketing/payload/src/access/authenticatedOrPublished.ts.hbs

@@ -0,0 +1,13 @@
+import type { Access } from "payload"
+
+export const authenticatedOrPublished: Access = ({ req: { user } }) => {
+  if (user) {
+    return true
+  }
+
+  return {
+    _status: {
+      equals: "published",
+    },
+  }
+}

package/templates/marketing/payload/src/access/index.ts.hbs

@@ -0,0 +1,3 @@
+export { anyone } from "./anyone"
+export { authenticated } from "./authenticated"
+export { authenticatedOrPublished } from "./authenticatedOrPublished"

package/templates/marketing/payload/src/app/(frontend)/next/seed/route.ts.hbs

@@ -0,0 +1,31 @@
+import { seed } from "@/endpoints/seed"
+import config from "@payload-config"
+import { headers } from "next/headers"
+import { createLocalReq, getPayload } from "payload"
+
+export const maxDuration = 60 // This function can run for a maximum of 60 seconds
+
+export async function POST(): Promise<Response> {
+  const payload = await getPayload({ config })
+  const requestHeaders = await headers()
+
+  // Authenticate by passing request headers
+  const { user } = await payload.auth({ headers: requestHeaders })
+
+  if (!user) {
+    return new Response("Action forbidden.", { status: 403 })
+  }
+
+  try {
+    // Create a Payload request object to pass to the Local API for transactions
+    // At this point you should pass in a user, locale, and any other context you need for the Local API
+    const payloadReq = await createLocalReq({ user }, payload)
+
+    await seed({ payload, req: payloadReq })
+
+    return Response.json({ success: true })
+  } catch (e) {
+    payload.logger.error({ err: e, message: "Error seeding data" })
+    return new Response("Error seeding data.", { status: 500 })
+  }
+}

package/templates/marketing/payload/src/collections/Categories/index.ts.hbs

@@ -0,0 +1,28 @@
+import type { CollectionConfig } from "payload"
+
+import { slugField } from "payload"
+import { anyone } from "../../access/anyone"
+import { authenticated } from "../../access/authenticated"
+
+export const Categories: CollectionConfig = {
+  slug: "categories",
+  access: {
+    create: authenticated,
+    delete: authenticated,
+    read: anyone,
+    update: authenticated,
+  },
+  admin: {
+    useAsTitle: "title",
+  },
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      required: true,
+    },
+    slugField({
+      position: undefined,
+    }),
+  ],
+}

package/templates/marketing/payload/src/collections/FAQs/index.ts.hbs

@@ -0,0 +1,100 @@
+import type { CollectionConfig } from "payload"
+
+import {
+  AlignFeature,
+  BlockquoteFeature,
+  ChecklistFeature,
+  EXPERIMENTAL_TableFeature,
+  FixedToolbarFeature,
+  IndentFeature,
+  InlineCodeFeature,
+  InlineToolbarFeature,
+  OrderedListFeature,
+  RelationshipFeature,
+  StrikethroughFeature,
+  SubscriptFeature,
+  SuperscriptFeature,
+  UnorderedListFeature,
+  UploadFeature,
+  lexicalEditor,
+} from "@payloadcms/richtext-lexical"
+import { anyone } from "../../access/anyone"
+import { authenticated } from "../../access/authenticated"
+
+export const FAQs: CollectionConfig = {
+  slug: "faqs",
+  access: {
+    create: authenticated,
+    delete: authenticated,
+    read: anyone,
+    update: authenticated,
+  },
+  admin: {
+    useAsTitle: "question",
+    defaultColumns: ["question", "category", "order", "updatedAt"],
+    group: "Content",
+  },
+  fields: [
+    {
+      name: "question",
+      type: "text",
+      required: true,
+      label: "Question",
+    },
+    {
+      name: "answer",
+      type: "richText",
+      required: true,
+      label: "Answer",
+      editor: lexicalEditor({
+        features: ({ rootFeatures }) => {
+          return [
+            ...rootFeatures,
+            FixedToolbarFeature(),
+            InlineToolbarFeature(),
+            StrikethroughFeature(),
+            SubscriptFeature(),
+            SuperscriptFeature(),
+            InlineCodeFeature(),
+            BlockquoteFeature(),
+            UnorderedListFeature(),
+            OrderedListFeature(),
+            ChecklistFeature(),
+            AlignFeature(),
+            IndentFeature(),
+            RelationshipFeature(),
+            UploadFeature(),
+            EXPERIMENTAL_TableFeature(),
+          ]
+        },
+      }),
+    },
+    {
+      name: "category",
+      type: "select",
+      required: true,
+      defaultValue: "general",
+      options: [
+        { label: "General", value: "general" },
+        { label: "Pricing", value: "pricing" },
+        { label: "Features", value: "features" },
+        { label: "Getting Started", value: "getting-started" },
+        { label: "Technical", value: "technical" },
+        { label: "Support", value: "support" },
+      ],
+      admin: {
+        position: "sidebar",
+      },
+    },
+    {
+      name: "order",
+      type: "number",
+      defaultValue: 0,
+      admin: {
+        position: "sidebar",
+        description: "Lower numbers appear first",
+      },
+    },
+  ],
+  defaultSort: "order",
+}

package/templates/marketing/payload/src/collections/Media.ts.hbs

@@ -1,44 +1,164 @@
-import type { CollectionConfig } from 'payload'
+import type { CollectionConfig } from "payload"
+
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import {
+  AlignFeature,
+  BlockquoteFeature,
+  ChecklistFeature,
+  EXPERIMENTAL_TableFeature,
+  FixedToolbarFeature,
+  IndentFeature,
+  InlineCodeFeature,
+  InlineToolbarFeature,
+  OrderedListFeature,
+  RelationshipFeature,
+  StrikethroughFeature,
+  SubscriptFeature,
+  SuperscriptFeature,
+  UnorderedListFeature,
+  UploadFeature,
+  lexicalEditor,
+} from "@payloadcms/richtext-lexical"
+
+import { anyone } from "../access/anyone"
+import { authenticated } from "../access/authenticated"
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+{{#if (eq integrations.payloadStorage 'local')}}
+// Local storage configuration
+const useLocalStorage = true
+{{else}}
+// Only use local staticDir when storage token is not set (local development)
+// In production, cloud storage handles file storage
+const useLocalStorage = !process.env.BLOB_READ_WRITE_TOKEN && !process.env.S3_BUCKET && !process.env.R2_BUCKET && !process.env.GCS_BUCKET
+{{/if}}
 
 export const Media: CollectionConfig = {
-  slug: 'media',
+  slug: "media",
+  folders: true,
   access: {
-    read: () => true,
+    create: authenticated,
+    delete: authenticated,
+    read: anyone,
+    update: authenticated,
   },
+  fields: [
+    {
+      name: "alt",
+      type: "text",
+    },
+    {
+      name: "caption",
+      type: "richText",
+      editor: lexicalEditor({
+        features: ({ rootFeatures }) => {
+          return [
+            ...rootFeatures,
+            FixedToolbarFeature(),
+            InlineToolbarFeature(),
+            StrikethroughFeature(),
+            SubscriptFeature(),
+            SuperscriptFeature(),
+            InlineCodeFeature(),
+            BlockquoteFeature(),
+            UnorderedListFeature(),
+            OrderedListFeature(),
+            ChecklistFeature(),
+            AlignFeature(),
+            IndentFeature(),
+            RelationshipFeature(),
+            UploadFeature(),
+            EXPERIMENTAL_TableFeature(),
+          ]
+        },
+      }),
+    },
+  ],
   upload: {
-    staticDir: 'media',
+    // Only use local staticDir for development; production uses cloud storage
+    ...(useLocalStorage && {
+      staticDir: path.resolve(dirname, "../../public/media"),
+    }),
+    adminThumbnail: "thumbnail",
+    focalPoint: true,
+    // Allow common image and video file types
+    mimeTypes: [
+      "image/*",
+      "video/mp4",
+      "video/webm",
+      "video/quicktime", // .mov files
+    ],
+    // Convert original uploaded image to WebP format for better compression
+    // Note: formatOptions only applies to images, videos are uploaded as-is
+    formatOptions: {
+      format: "webp",
+      options: {
+        quality: 85,
+      },
+    },
     imageSizes: [
       {
-        name: 'thumbnail',
-        width: 400,
-        height: 300,
-        position: 'centre',
+        name: "thumbnail",
+        width: 300,
+        formatOptions: {
+          format: "webp",
+          options: { quality: 80 },
+        },
       },
       {
-        name: 'card',
-        width: 768,
-        height: 432,
-        position: 'centre',
+        name: "square",
+        width: 500,
+        height: 500,
+        formatOptions: {
+          format: "webp",
+          options: { quality: 80 },
+        },
       },
       {
-        name: 'hero',
+        name: "small",
+        width: 600,
+        formatOptions: {
+          format: "webp",
+          options: { quality: 80 },
+        },
+      },
+      {
+        name: "medium",
+        width: 900,
+        formatOptions: {
+          format: "webp",
+          options: { quality: 80 },
+        },
+      },
+      {
+        name: "large",
+        width: 1400,
+        formatOptions: {
+          format: "webp",
+          options: { quality: 80 },
+        },
+      },
+      {
+        name: "xlarge",
         width: 1920,
-        height: 1080,
-        position: 'centre',
+        formatOptions: {
+          format: "webp",
+          options: { quality: 80 },
+        },
+      },
+      {
+        name: "og",
+        width: 1200,
+        height: 630,
+        crop: "center",
+        formatOptions: {
+          format: "webp",
+          options: { quality: 85 },
+        },
       },
     ],
-    adminThumbnail: 'thumbnail',
-    mimeTypes: ['image/*'],
   },
-  fields: [
-    {
-      name: 'alt',
-      type: 'text',
-      required: true,
-    },
-    {
-      name: 'caption',
-      type: 'text',
-    },
-  ],
 }