kofi-stack-template-generator 2.1.36 → 2.1.38

package/templates/marketing/payload/src/lib/docs-source.ts

@@ -0,0 +1,138 @@
+import { api } from "../../../../convex/_generated/api"
+import { convex } from "./convex"
+
+/**
+ * Fetch published docs from Convex
+ */
+export async function getDocsFromConvex() {
+	try {
+		if (!process.env.NEXT_PUBLIC_CONVEX_URL) {
+			console.error(
+				"[Docs] NEXT_PUBLIC_CONVEX_URL environment variable is not set. Docs will not be available.",
+			)
+			return []
+		}
+
+		const docs = await convex.query(api.docs.listPublished)
+
+		if (process.env.NODE_ENV === "development") {
+			console.log(`[Docs] Fetched ${docs.length} published document(s) from Convex`)
+		}
+
+		return docs
+	} catch (error) {
+		console.error("[Docs] Failed to fetch docs from Convex:", error)
+		return []
+	}
+}
+
+/**
+ * Fetch a single doc by slug from Convex
+ */
+export async function getDocBySlug(slug: string) {
+	try {
+		if (!process.env.NEXT_PUBLIC_CONVEX_URL) {
+			console.error(
+				"[Docs] NEXT_PUBLIC_CONVEX_URL environment variable is not set. Docs will not be available.",
+			)
+			return null
+		}
+
+		const doc = await convex.query(api.docs.getBySlug, { slug })
+		return doc
+	} catch (error) {
+		console.error(`[Docs] Failed to fetch doc "${slug}" from Convex:`, error)
+		return null
+	}
+}
+
+/**
+ * Build page tree for navigation from docs
+ */
+export function buildPageTree(docs: Awaited<ReturnType<typeof getDocsFromConvex>>) {
+	// Sort docs by order, then alphabetically
+	const sortedDocs = [...docs].sort((a, b) => {
+		if (a.order !== undefined && b.order !== undefined) {
+			return a.order - b.order
+		}
+		if (a.order !== undefined) return -1
+		if (b.order !== undefined) return 1
+		return a.title.localeCompare(b.title)
+	})
+
+	// Group docs by parent
+	const topLevel = sortedDocs.filter((d) => !d.parentSlug)
+	const byParent = new Map<string, typeof sortedDocs>()
+
+	for (const doc of sortedDocs) {
+		if (doc.parentSlug) {
+			const existing = byParent.get(doc.parentSlug) || []
+			existing.push(doc)
+			byParent.set(doc.parentSlug, existing)
+		}
+	}
+
+	// Build tree structure
+	const buildChildren = (parentSlug: string): PageTreeItem[] => {
+		const children = byParent.get(parentSlug) || []
+		return children.map((doc) => ({
+			type: "page" as const,
+			name: doc.title,
+			url: `/docs/${doc.slug}`,
+			children: buildChildren(doc.slug),
+		}))
+	}
+
+	const tree: PageTreeItem[] = topLevel.map((doc) => {
+		const children = buildChildren(doc.slug)
+		if (children.length > 0) {
+			return {
+				type: "folder" as const,
+				name: doc.title,
+				index: {
+					type: "page" as const,
+					name: doc.title,
+					url: `/docs/${doc.slug}`,
+				},
+				children,
+			}
+		}
+		return {
+			type: "page" as const,
+			name: doc.title,
+			url: `/docs/${doc.slug}`,
+		}
+	})
+
+	return {
+		name: "Documentation",
+		children: tree,
+	}
+}
+
+// Types for page tree
+type PageTreeItem =
+	| {
+			type: "page"
+			name: string
+			url: string
+			children?: PageTreeItem[]
+	  }
+	| {
+			type: "folder"
+			name: string
+			index?: { type: "page"; name: string; url: string }
+			children: PageTreeItem[]
+	  }
+	| {
+			type: "separator"
+			name: string
+	  }
+
+/**
+ * Get all page slugs for static generation
+ */
+export async function getAllDocSlugs(): Promise<string[][]> {
+	const docs = await getDocsFromConvex()
+	return docs.map((doc) => doc.slug.split("/"))
+}

package/templates/marketing/payload/src/lib/mdx.tsx

@@ -0,0 +1,191 @@
+import { compile, run } from "@mdx-js/mdx"
+import type { ReactNode } from "react"
+import { createElement } from "react"
+import * as runtime from "react/jsx-runtime"
+
+interface TableOfContentsItem {
+	title: string
+	url: string
+	depth: number
+}
+
+/**
+ * Compile MDX content to React components
+ */
+export async function compileMDX(source: string): Promise<{
+	content: ReactNode
+	toc: TableOfContentsItem[]
+}> {
+	// Extract headings for TOC before compilation
+	const toc = extractTableOfContents(source)
+
+	try {
+		// Compile MDX to JavaScript
+		const compiled = await compile(source, {
+			outputFormat: "function-body",
+			development: false,
+		})
+
+		// Run the compiled code
+		const { default: MDXContent } = await run(String(compiled), {
+			...runtime,
+			baseUrl: import.meta.url,
+		})
+
+		// Create the content element with custom components
+		const content = createElement(MDXContent, {
+			components: getMDXComponents(),
+		})
+
+		return { content, toc }
+	} catch (error) {
+		console.error("MDX compilation error:", error)
+
+		// Return a fallback with the raw content
+		return {
+			content: createElement(
+				"div",
+				{ className: "prose dark:prose-invert" },
+				createElement("p", { className: "text-red-500" }, "Error rendering content"),
+				createElement("pre", { className: "text-sm" }, source),
+			),
+			toc,
+		}
+	}
+}
+
+/**
+ * Extract table of contents from markdown headings
+ */
+function extractTableOfContents(source: string): TableOfContentsItem[] {
+	const headingRegex = /^(#{1,6})\s+(.+)$/gm
+	const toc: TableOfContentsItem[] = []
+
+	const matches = source.matchAll(headingRegex)
+	for (const match of matches) {
+		const depth = match[1]?.length ?? 1
+		const title = match[2]?.trim() ?? ""
+
+		// Create URL-friendly slug
+		const url = `#${title
+			.toLowerCase()
+			.replace(/[^a-z0-9\s-]/g, "")
+			.replace(/\s+/g, "-")}`
+
+		toc.push({ title, url, depth })
+	}
+
+	return toc
+}
+
+/**
+ * Custom MDX components for styling
+ */
+function getMDXComponents() {
+	return {
+		h1: (props: React.HTMLAttributes<HTMLHeadingElement>) =>
+			createElement("h1", {
+				...props,
+				className: "scroll-m-20 text-4xl font-bold tracking-tight",
+				id: slugify(String(props.children)),
+			}),
+		h2: (props: React.HTMLAttributes<HTMLHeadingElement>) =>
+			createElement("h2", {
+				...props,
+				className:
+					"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 mt-10",
+				id: slugify(String(props.children)),
+			}),
+		h3: (props: React.HTMLAttributes<HTMLHeadingElement>) =>
+			createElement("h3", {
+				...props,
+				className: "scroll-m-20 text-2xl font-semibold tracking-tight mt-8",
+				id: slugify(String(props.children)),
+			}),
+		h4: (props: React.HTMLAttributes<HTMLHeadingElement>) =>
+			createElement("h4", {
+				...props,
+				className: "scroll-m-20 text-xl font-semibold tracking-tight mt-6",
+				id: slugify(String(props.children)),
+			}),
+		p: (props: React.HTMLAttributes<HTMLParagraphElement>) =>
+			createElement("p", {
+				...props,
+				className: "leading-7 [&:not(:first-child)]:mt-6",
+			}),
+		ul: (props: React.HTMLAttributes<HTMLUListElement>) =>
+			createElement("ul", {
+				...props,
+				className: "my-6 ml-6 list-disc [&>li]:mt-2",
+			}),
+		ol: (props: React.HTMLAttributes<HTMLOListElement>) =>
+			createElement("ol", {
+				...props,
+				className: "my-6 ml-6 list-decimal [&>li]:mt-2",
+			}),
+		li: (props: React.HTMLAttributes<HTMLLIElement>) => createElement("li", { ...props }),
+		blockquote: (props: React.HTMLAttributes<HTMLQuoteElement>) =>
+			createElement("blockquote", {
+				...props,
+				className: "mt-6 border-l-2 pl-6 italic",
+			}),
+		code: (props: React.HTMLAttributes<HTMLElement>) => {
+			// Check if this is an inline code or a code block
+			const isInline = typeof props.children === "string"
+			if (isInline) {
+				return createElement("code", {
+					...props,
+					className:
+						"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+				})
+			}
+			return createElement("code", { ...props })
+		},
+		pre: (props: React.HTMLAttributes<HTMLPreElement>) =>
+			createElement("pre", {
+				...props,
+				className: "mb-4 mt-6 overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900",
+			}),
+		a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) =>
+			createElement("a", {
+				...props,
+				className: "font-medium text-primary underline underline-offset-4",
+			}),
+		table: (props: React.HTMLAttributes<HTMLTableElement>) =>
+			createElement(
+				"div",
+				{ className: "my-6 w-full overflow-y-auto" },
+				createElement("table", { ...props, className: "w-full" }),
+			),
+		tr: (props: React.HTMLAttributes<HTMLTableRowElement>) =>
+			createElement("tr", {
+				...props,
+				className: "m-0 border-t p-0 even:bg-muted",
+			}),
+		th: (props: React.HTMLAttributes<HTMLTableCellElement>) =>
+			createElement("th", {
+				...props,
+				className:
+					"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+			}),
+		td: (props: React.HTMLAttributes<HTMLTableCellElement>) =>
+			createElement("td", {
+				...props,
+				className:
+					"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+			}),
+		hr: () => createElement("hr", { className: "my-4 md:my-8" }),
+		img: (props: React.ImgHTMLAttributes<HTMLImageElement>) =>
+			createElement("img", {
+				...props,
+				className: "rounded-md border",
+			}),
+	}
+}
+
+function slugify(text: string): string {
+	return text
+		.toLowerCase()
+		.replace(/[^a-z0-9\s-]/g, "")
+		.replace(/\s+/g, "-")
+}

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

@@ -1,150 +1,100 @@
-import path from 'path'
-import { fileURLToPath } from 'url'
-import { buildConfig } from 'payload'
-import { postgresAdapter } from '@payloadcms/db-postgres'
-import { lexicalEditor } from '@payloadcms/richtext-lexical'
-import { seoPlugin } from '@payloadcms/plugin-seo'
-import { resendAdapter } from '@payloadcms/email-resend'
-import sharp from 'sharp'
-{{#if (eq integrations.payloadStorage 's3')}}
-import { s3Storage } from '@payloadcms/storage-s3'
-{{/if}}
-{{#if (eq integrations.payloadStorage 'r2')}}
-import { s3Storage } from '@payloadcms/storage-s3'
-{{/if}}
-{{#if (eq integrations.payloadStorage 'vercel-blob')}}
-import { vercelBlobStorage } from '@payloadcms/storage-vercel-blob'
-{{/if}}
-{{#if (eq integrations.payloadStorage 'gcs')}}
-import { gcsStorage } from '@payloadcms/storage-gcs'
-{{/if}}
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import { postgresAdapter } from "@payloadcms/db-postgres"
+import { resendAdapter } from "@payloadcms/email-resend"
+import type { SharpDependency } from "payload"
+import { type PayloadRequest, buildConfig } from "payload"
+import sharp from "sharp"
 
-import { Users, Media, Pages, Posts, Categories, FAQs } from './collections'
-import { Header, Footer } from './globals'
-import { getServerSideURL } from './utilities/getURL'
+import { defaultLexical } from "@/fields/defaultLexical"
+import { Footer } from "./Footer/config"
+import { Header } from "./Header/config"
+import { Categories } from "./collections/Categories"
+import { FAQs } from "./collections/FAQs"
+import { Media } from "./collections/Media"
+import { Pages } from "./collections/Pages"
+import { Posts } from "./collections/Posts"
+import { Users } from "./collections/Users"
+import { plugins } from "./plugins"
+import { getServerSideURL } from "./utilities/getURL"
 
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
 
 export default buildConfig({
-  admin: {
-    user: Users.slug,
-    importMap: {
-      baseDir: path.resolve(__dirname),
-    },
-    components: {
-      beforeLogin: ['@/components/BeforeLogin'],
-      beforeDashboard: ['@/components/BeforeDashboard'],
-    },
-    livePreview: {
-      breakpoints: [
-        {
-          label: 'Mobile',
-          name: 'mobile',
-          width: 375,
-          height: 667,
-        },
-        {
-          label: 'Tablet',
-          name: 'tablet',
-          width: 768,
-          height: 1024,
-        },
-        {
-          label: 'Desktop',
-          name: 'desktop',
-          width: 1440,
-          height: 900,
-        },
-      ],
-    },
-  },
-  db: postgresAdapter({
-    pool: {
-      connectionString: process.env.DATABASE_URL,
-    },
-  }),
-  editor: lexicalEditor(),
-  email: resendAdapter({
-    defaultFromAddress: process.env.RESEND_FROM_EMAIL || 'noreply@example.com',
-    defaultFromName: '{{projectName}}',
-    apiKey: process.env.RESEND_API_KEY || '',
-  }),
-  collections: [Users, Media, Pages, Posts, Categories, FAQs],
-  globals: [Header, Footer],
-  plugins: [
-{{#if (eq integrations.payloadStorage 's3')}}
-    s3Storage({
-      collections: {
-        media: true,
-      },
-      bucket: process.env.S3_BUCKET!,
-      config: {
-        credentials: {
-          accessKeyId: process.env.S3_ACCESS_KEY_ID!,
-          secretAccessKey: process.env.S3_SECRET_ACCESS_KEY!,
-        },
-        region: process.env.S3_REGION!,
-        endpoint: process.env.S3_ENDPOINT,
-        forcePathStyle: true,
-      },
-    }),
-{{/if}}
-{{#if (eq integrations.payloadStorage 'r2')}}
-    s3Storage({
-      collections: {
-        media: true,
-      },
-      bucket: process.env.R2_BUCKET!,
-      config: {
-        credentials: {
-          accessKeyId: process.env.R2_ACCESS_KEY_ID!,
-          secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
-        },
-        region: 'auto',
-        endpoint: process.env.R2_ENDPOINT!,
-        forcePathStyle: true,
-      },
-    }),
-{{/if}}
-{{#if (eq integrations.payloadStorage 'vercel-blob')}}
-    vercelBlobStorage({
-      collections: {
-        media: true,
-      },
-      token: process.env.BLOB_READ_WRITE_TOKEN!,
-    }),
-{{/if}}
-{{#if (eq integrations.payloadStorage 'gcs')}}
-    gcsStorage({
-      collections: {
-        media: true,
-      },
-      bucket: process.env.GCS_BUCKET!,
-      options: {
-        projectId: process.env.GCS_PROJECT_ID,
-        credentials: JSON.parse(process.env.GCS_CREDENTIALS || '{}'),
-      },
-    }),
-{{/if}}
-    seoPlugin({
-      collections: ['pages', 'posts'],
-      uploadsCollection: 'media',
-      generateTitle: ({ doc }) => `${doc?.title ?? ''} | {{projectName}}`,
-      generateDescription: ({ doc }) => doc?.excerpt ?? '',
-    }),
-  ],
-  cors: [getServerSideURL()].filter(Boolean),
-  secret: process.env.PAYLOAD_SECRET!,
-  sharp,
-  typescript: {
-    outputFile: path.resolve(__dirname, 'payload-types.ts'),
-  },
-{{#if (eq integrations.payloadStorage 'local')}}
-  upload: {
-    limits: {
-      fileSize: 5000000, // 5MB
-    },
-  },
-{{/if}}
+	admin: {
+		components: {
+			// The `BeforeLogin` component renders a message that you see while logging into your admin panel.
+			// Feel free to delete this at any time. Simply remove the line below.
+			beforeLogin: ["@/components/BeforeLogin"],
+			// The `BeforeDashboard` component renders the 'welcome' block that you see after logging into your admin panel.
+			// Feel free to delete this at any time. Simply remove the line below.
+			beforeDashboard: ["@/components/BeforeDashboard"],
+		},
+		importMap: {
+			baseDir: path.resolve(dirname),
+		},
+		user: Users.slug,
+		livePreview: {
+			breakpoints: [
+				{
+					label: "Mobile",
+					name: "mobile",
+					width: 375,
+					height: 667,
+				},
+				{
+					label: "Tablet",
+					name: "tablet",
+					width: 768,
+					height: 1024,
+				},
+				{
+					label: "Desktop",
+					name: "desktop",
+					width: 1440,
+					height: 900,
+				},
+			],
+		},
+	},
+	// This config helps us configure global or default features that the other editors can inherit
+	editor: defaultLexical,
+	db: postgresAdapter({
+		pool: {
+			connectionString: process.env.DATABASE_URL || "",
+		},
+		// Disable auto-push in dev mode to prevent constraint name truncation issues
+		// Use migrations instead: pnpm payload migrate
+		push: false,
+	}),
+	collections: [Pages, Posts, Media, Categories, FAQs, Users],
+	cors: [getServerSideURL()].filter(Boolean),
+	globals: [Header, Footer],
+	plugins,
+	secret: process.env.PAYLOAD_SECRET,
+	sharp: sharp as unknown as SharpDependency,
+	email: resendAdapter({
+		apiKey: process.env.RESEND_API_KEY || "",
+		defaultFromAddress: process.env.RESEND_FROM_EMAIL || "noreply@example.com",
+		defaultFromName: "{{projectName}}",
+	}),
+	typescript: {
+		outputFile: path.resolve(dirname, "payload-types.ts"),
+	},
+	jobs: {
+		access: {
+			run: ({ req }: { req: PayloadRequest }): boolean => {
+				// Allow logged in users to execute this endpoint (default)
+				if (req.user) return true
+
+				// If there is no logged in user, then check
+				// for the Vercel Cron secret to be present as an
+				// Authorization header:
+				const authHeader = req.headers.get("authorization")
+				return authHeader === `Bearer ${process.env.CRON_SECRET}`
+			},
+		},
+		tasks: [],
+	},
 })

package/templates/marketing/payload/src/plugins/index.ts

@@ -0,0 +1,107 @@
+import { revalidateRedirects } from "@/hooks/revalidateRedirects"
+import { beforeSyncWithSearch } from "@/search/beforeSync"
+import { searchFields } from "@/search/fieldOverrides"
+import { formBuilderPlugin } from "@payloadcms/plugin-form-builder"
+import { nestedDocsPlugin } from "@payloadcms/plugin-nested-docs"
+import { redirectsPlugin } from "@payloadcms/plugin-redirects"
+import { searchPlugin } from "@payloadcms/plugin-search"
+import { seoPlugin } from "@payloadcms/plugin-seo"
+import type { GenerateTitle, GenerateURL } from "@payloadcms/plugin-seo/types"
+import { FixedToolbarFeature, HeadingFeature, lexicalEditor } from "@payloadcms/richtext-lexical"
+import { vercelBlobStorage } from "@payloadcms/storage-vercel-blob"
+import type { Plugin } from "payload"
+
+import type { Page, Post } from "@/payload-types"
+import { getServerSideURL } from "@/utilities/getURL"
+
+const generateTitle: GenerateTitle<Post | Page> = ({ doc }) => {
+	return doc?.title ? `${doc.title} | Payload Website Template` : "Payload Website Template"
+}
+
+const generateURL: GenerateURL<Post | Page> = ({ doc }) => {
+	const url = getServerSideURL()
+
+	return doc?.slug ? `${url}/${doc.slug}` : url
+}
+
+export const plugins: Plugin[] = [
+	// Vercel Blob Storage for media uploads in production
+	...(process.env.BLOB_READ_WRITE_TOKEN
+		? [
+				vercelBlobStorage({
+					collections: {
+						media: true,
+					},
+					token: process.env.BLOB_READ_WRITE_TOKEN,
+					// Enable client-side uploads to bypass Vercel serverless function body size limits
+					// This allows uploads up to 500MB directly to Vercel Blob Storage
+					clientUploads: true,
+				}),
+			]
+		: []),
+	redirectsPlugin({
+		collections: ["pages", "posts"],
+		overrides: {
+			// @ts-expect-error - This is a valid override, mapped fields don't resolve to the same type
+			fields: ({ defaultFields }) => {
+				return defaultFields.map((field) => {
+					if ("name" in field && field.name === "from") {
+						return {
+							...field,
+							admin: {
+								description: "You will need to rebuild the website when changing this field.",
+							},
+						}
+					}
+					return field
+				})
+			},
+			hooks: {
+				afterChange: [revalidateRedirects],
+			},
+		},
+	}),
+	nestedDocsPlugin({
+		collections: ["categories"],
+		generateURL: (docs) => docs.reduce((url, doc) => `${url}/${doc.slug}`, ""),
+	}),
+	seoPlugin({
+		generateTitle,
+		generateURL,
+	}),
+	formBuilderPlugin({
+		fields: {
+			payment: false,
+		},
+		formOverrides: {
+			fields: ({ defaultFields }) => {
+				return defaultFields.map((field) => {
+					if ("name" in field && field.name === "confirmationMessage") {
+						return {
+							...field,
+							editor: lexicalEditor({
+								features: ({ rootFeatures }) => {
+									return [
+										...rootFeatures,
+										FixedToolbarFeature(),
+										HeadingFeature({ enabledHeadingSizes: ["h1", "h2", "h3", "h4"] }),
+									]
+								},
+							}),
+						}
+					}
+					return field
+				})
+			},
+		},
+	}),
+	searchPlugin({
+		collections: ["posts"],
+		beforeSync: beforeSyncWithSearch,
+		searchOverrides: {
+			fields: ({ defaultFields }) => {
+				return [...defaultFields, ...searchFields]
+			},
+		},
+	}),
+]