kofi-stack-template-generator 2.1.37 → 2.1.39

package/templates/marketing/payload/src/blocks/TrustColumns/config.ts

@@ -0,0 +1,70 @@
+import type { Block } from "payload"
+
+export const TrustColumns: Block = {
+	slug: "trustColumns",
+	interfaceName: "TrustColumnsBlock",
+	fields: [
+		{
+			name: "columns",
+			type: "array",
+			label: "Trust Columns",
+			minRows: 1,
+			maxRows: 2,
+			fields: [
+				{
+					name: "label",
+					type: "text",
+					label: "Label",
+					admin: {
+						description: 'Small label above heading (e.g., "Integrations")',
+					},
+				},
+				{
+					name: "heading",
+					type: "text",
+					label: "Heading",
+					required: true,
+				},
+				{
+					name: "description",
+					type: "textarea",
+					label: "Description",
+				},
+				{
+					name: "items",
+					type: "array",
+					label: "Feature Items",
+					maxRows: 6,
+					fields: [
+						{
+							name: "icon",
+							type: "select",
+							options: [
+								{ label: "Check", value: "check" },
+								{ label: "Shield", value: "shield" },
+								{ label: "Lock", value: "lock" },
+								{ label: "Globe", value: "globe" },
+								{ label: "Zap", value: "zap" },
+								{ label: "Server", value: "server" },
+								{ label: "Cloud", value: "cloud" },
+								{ label: "Database", value: "database" },
+								{ label: "Plug", value: "plug" },
+								{ label: "Award", value: "award" },
+							],
+							defaultValue: "check",
+						},
+						{
+							name: "text",
+							type: "text",
+							required: true,
+						},
+					],
+				},
+			],
+		},
+	],
+	labels: {
+		plural: "Trust Columns",
+		singular: "Trust Columns",
+	},
+}

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

@@ -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

@@ -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

@@ -0,0 +1,160 @@
+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)
+
+// Only use local staticDir when BLOB_READ_WRITE_TOKEN is not set (local development)
+// In production, Vercel Blob Storage handles file storage
+const useLocalStorage = !process.env.BLOB_READ_WRITE_TOKEN
+
+export const Media: CollectionConfig = {
+	slug: "media",
+	folders: true,
+	access: {
+		create: authenticated,
+		delete: authenticated,
+		read: anyone,
+		update: authenticated,
+	},
+	fields: [
+		{
+			name: "alt",
+			type: "text",
+			//required: true,
+		},
+		{
+			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: {
+		// Only use local staticDir for development; production uses Vercel Blob 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: 300,
+				formatOptions: {
+					format: "webp",
+					options: { quality: 80 },
+				},
+			},
+			{
+				name: "square",
+				width: 500,
+				height: 500,
+				formatOptions: {
+					format: "webp",
+					options: { quality: 80 },
+				},
+			},
+			{
+				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,
+				formatOptions: {
+					format: "webp",
+					options: { quality: 80 },
+				},
+			},
+			{
+				name: "og",
+				width: 1200,
+				height: 630,
+				crop: "center",
+				formatOptions: {
+					format: "webp",
+					options: { quality: 85 },
+				},
+			},
+		],
+	},
+}

package/templates/marketing/payload/src/collections/Pages/hooks/revalidatePage.ts

@@ -0,0 +1,43 @@
+import type { CollectionAfterChangeHook, CollectionAfterDeleteHook } from "payload"
+
+import { revalidatePath, revalidateTag } from "next/cache"
+
+import type { Page } from "../../../payload-types"
+
+export const revalidatePage: CollectionAfterChangeHook<Page> = ({
+	doc,
+	previousDoc,
+	req: { payload, context },
+}) => {
+	if (!context.disableRevalidate) {
+		if (doc._status === "published") {
+			const path = doc.slug === "home" ? "/" : `/${doc.slug}`
+
+			payload.logger.info(`Revalidating page at path: ${path}`)
+
+			revalidatePath(path)
+			revalidateTag("pages-sitemap")
+		}
+
+		// If the page was previously published, we need to revalidate the old path
+		if (previousDoc?._status === "published" && doc._status !== "published") {
+			const oldPath = previousDoc.slug === "home" ? "/" : `/${previousDoc.slug}`
+
+			payload.logger.info(`Revalidating old page at path: ${oldPath}`)
+
+			revalidatePath(oldPath)
+			revalidateTag("pages-sitemap")
+		}
+	}
+	return doc
+}
+
+export const revalidateDelete: CollectionAfterDeleteHook<Page> = ({ doc, req: { context } }) => {
+	if (!context.disableRevalidate) {
+		const path = doc?.slug === "home" ? "/" : `/${doc?.slug}`
+		revalidatePath(path)
+		revalidateTag("pages-sitemap")
+	}
+
+	return doc
+}

package/templates/marketing/payload/src/collections/Pages/index.ts

@@ -0,0 +1,168 @@
+import type { CollectionConfig } from "payload"
+
+import { hero } from "@/heros/config"
+import { slugField } from "payload"
+import { authenticated } from "../../access/authenticated"
+import { authenticatedOrPublished } from "../../access/authenticatedOrPublished"
+import { Archive } from "../../blocks/ArchiveBlock/config"
+import { BentoFeatures } from "../../blocks/BentoFeatures/config"
+import { CallToAction } from "../../blocks/CallToAction/config"
+import { Content } from "../../blocks/Content/config"
+import { FAQAccordion } from "../../blocks/FAQAccordion/config"
+import { FeatureGrid } from "../../blocks/FeatureGrid/config"
+import { FeatureShowcase } from "../../blocks/FeatureShowcase/config"
+import { FinalCTA } from "../../blocks/FinalCTA/config"
+import { FormBlock } from "../../blocks/Form/config"
+import { HowItWorks } from "../../blocks/HowItWorks/config"
+import { IndustryTabs } from "../../blocks/IndustryTabs/config"
+import { LogoBanner } from "../../blocks/LogoBanner/config"
+import { MediaBlock } from "../../blocks/MediaBlock/config"
+import { Personas } from "../../blocks/Personas/config"
+import { PricingTable } from "../../blocks/PricingTable/config"
+import { ProofBanner } from "../../blocks/ProofBanner/config"
+import { TestimonialsGrid } from "../../blocks/TestimonialsGrid/config"
+import { TrustColumns } from "../../blocks/TrustColumns/config"
+import { populatePublishedAt } from "../../hooks/populatePublishedAt"
+import { generatePreviewPath } from "../../utilities/generatePreviewPath"
+import { revalidateDelete, revalidatePage } from "./hooks/revalidatePage"
+
+import {
+	MetaDescriptionField,
+	MetaImageField,
+	MetaTitleField,
+	OverviewField,
+	PreviewField,
+} from "@payloadcms/plugin-seo/fields"
+
+export const Pages: CollectionConfig<"pages"> = {
+	slug: "pages",
+	access: {
+		create: authenticated,
+		delete: authenticated,
+		read: authenticatedOrPublished,
+		update: authenticated,
+	},
+	// This config controls what's populated by default when a page is referenced
+	// https://payloadcms.com/docs/queries/select#defaultpopulate-collection-config-property
+	// Type safe if the collection slug generic is passed to `CollectionConfig` - `CollectionConfig<'pages'>
+	defaultPopulate: {
+		title: true,
+		slug: true,
+	},
+	admin: {
+		defaultColumns: ["title", "slug", "updatedAt"],
+		livePreview: {
+			url: ({ data, req }) =>
+				generatePreviewPath({
+					slug: data?.slug,
+					collection: "pages",
+					req,
+				}),
+		},
+		preview: (data, { req }) =>
+			generatePreviewPath({
+				slug: data?.slug as string,
+				collection: "pages",
+				req,
+			}),
+		useAsTitle: "title",
+	},
+	fields: [
+		{
+			name: "title",
+			type: "text",
+			required: true,
+		},
+		{
+			type: "tabs",
+			tabs: [
+				{
+					fields: [hero],
+					label: "Hero",
+				},
+				{
+					fields: [
+						{
+							name: "layout",
+							type: "blocks",
+							blocks: [
+								Archive,
+								BentoFeatures,
+								CallToAction,
+								Content,
+								FAQAccordion,
+								FeatureGrid,
+								FeatureShowcase,
+								FinalCTA,
+								FormBlock,
+								HowItWorks,
+								IndustryTabs,
+								LogoBanner,
+								MediaBlock,
+								Personas,
+								PricingTable,
+								ProofBanner,
+								TestimonialsGrid,
+								TrustColumns,
+							],
+							required: true,
+							admin: {
+								initCollapsed: true,
+							},
+						},
+					],
+					label: "Content",
+				},
+				{
+					name: "meta",
+					label: "SEO",
+					fields: [
+						OverviewField({
+							titlePath: "meta.title",
+							descriptionPath: "meta.description",
+							imagePath: "meta.image",
+						}),
+						MetaTitleField({
+							hasGenerateFn: true,
+						}),
+						MetaImageField({
+							relationTo: "media",
+						}),
+
+						MetaDescriptionField({}),
+						PreviewField({
+							// if the `generateUrl` function is configured
+							hasGenerateFn: true,
+
+							// field paths to match the target field for data
+							titlePath: "meta.title",
+							descriptionPath: "meta.description",
+						}),
+					],
+				},
+			],
+		},
+		{
+			name: "publishedAt",
+			type: "date",
+			admin: {
+				position: "sidebar",
+			},
+		},
+		slugField(),
+	],
+	hooks: {
+		afterChange: [revalidatePage],
+		beforeChange: [populatePublishedAt],
+		afterDelete: [revalidateDelete],
+	},
+	versions: {
+		drafts: {
+			autosave: {
+				interval: 100, // We set this interval for optimal live preview
+			},
+			schedulePublish: true,
+		},
+		maxPerDoc: 50,
+	},
+}

package/templates/marketing/payload/src/collections/Posts/hooks/populateAuthors.ts

@@ -0,0 +1,41 @@
+import type { CollectionAfterReadHook } from "payload"
+import type { User } from "src/payload-types"
+
+// The `user` collection has access control locked so that users are not publicly accessible
+// This means that we need to populate the authors manually here to protect user privacy
+// GraphQL will not return mutated user data that differs from the underlying schema
+// So we use an alternative `populatedAuthors` field to populate the user data, hidden from the admin UI
+export const populateAuthors: CollectionAfterReadHook = async ({
+	doc,
+	req: _req,
+	req: { payload },
+}) => {
+	if (doc?.authors && doc?.authors?.length > 0) {
+		const authorDocs: User[] = []
+
+		for (const author of doc.authors) {
+			try {
+				const authorDoc = await payload.findByID({
+					id: typeof author === "object" ? author?.id : author,
+					collection: "users",
+					depth: 0,
+				})
+
+				if (authorDoc) {
+					authorDocs.push(authorDoc)
+				}
+
+				if (authorDocs.length > 0) {
+					doc.populatedAuthors = authorDocs.map((authorDoc) => ({
+						id: authorDoc.id,
+						name: authorDoc.name,
+					}))
+				}
+			} catch {
+				// swallow error
+			}
+		}
+	}
+
+	return doc
+}

package/templates/marketing/payload/src/collections/Posts/hooks/revalidatePost.ts

@@ -0,0 +1,44 @@
+import type { CollectionAfterChangeHook, CollectionAfterDeleteHook } from "payload"
+
+import { revalidatePath, revalidateTag } from "next/cache"
+
+import type { Post } from "../../../payload-types"
+
+export const revalidatePost: CollectionAfterChangeHook<Post> = ({
+	doc,
+	previousDoc,
+	req: { payload, context },
+}) => {
+	if (!context.disableRevalidate) {
+		if (doc._status === "published") {
+			const path = `/posts/${doc.slug}`
+
+			payload.logger.info(`Revalidating post at path: ${path}`)
+
+			revalidatePath(path)
+			revalidateTag("posts-sitemap")
+		}
+
+		// If the post was previously published, we need to revalidate the old path
+		if (previousDoc._status === "published" && doc._status !== "published") {
+			const oldPath = `/posts/${previousDoc.slug}`
+
+			payload.logger.info(`Revalidating old post at path: ${oldPath}`)
+
+			revalidatePath(oldPath)
+			revalidateTag("posts-sitemap")
+		}
+	}
+	return doc
+}
+
+export const revalidateDelete: CollectionAfterDeleteHook<Post> = ({ doc, req: { context } }) => {
+	if (!context.disableRevalidate) {
+		const path = `/posts/${doc?.slug}`
+
+		revalidatePath(path)
+		revalidateTag("posts-sitemap")
+	}
+
+	return doc
+}