kofi-stack-template-generator 2.1.37 → 2.1.38

package/templates/marketing/payload/src/Header/Nav/index.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import React from "react"
+
+import type { Header as HeaderType } from "@/payload-types"
+
+import { CTATracker } from "@/components/Analytics"
+import { CMSLink } from "@/components/Link"
+import { MegaMenu } from "../MegaMenu"
+
+type Position = "left" | "right"
+
+interface HeaderNavProps {
+	data: HeaderType
+	position?: Position
+	className?: string
+}
+
+export const HeaderNav: React.FC<HeaderNavProps> = ({ data, position, className }) => {
+	const allNavItems = data?.navItems || []
+
+	// Filter items by position if specified
+	const navItems = position
+		? allNavItems.filter((item) => (item.position || "left") === position)
+		: allNavItems
+
+	if (navItems.length === 0) return null
+
+	return (
+		<nav className={className}>
+			{navItems.map((item, i) => {
+				const isRightPosition = (item.position || "left") === "right"
+
+				// Handle mega menu type
+				if (item.type === "megaMenu") {
+					return <MegaMenu key={item.id || i} item={item} />
+				}
+
+				// Handle simple link type
+				const link = item.link
+				if (!link) return null
+
+				// Determine appearance based on position and CMS setting
+				// Right-positioned items use their appearance setting (button = 'default', link = 'link')
+				// Left-positioned items always use link styling
+				const itemAppearance = item.appearance || "button"
+				const appearance = isRightPosition
+					? itemAppearance === "button"
+						? "default"
+						: "link"
+					: "link"
+
+				// Track CTA clicks for button-style items in the header
+				const isButton = appearance === "default"
+				const linkContent = (
+					<CMSLink
+						{...link}
+						label={item.label}
+						appearance={appearance}
+						className={appearance === "link" ? "text-sm font-medium" : undefined}
+					/>
+				)
+
+				if (isButton) {
+					return (
+						<CTATracker key={item.id || i} location="header" variant={item.label || `nav_${i}`}>
+							{linkContent}
+						</CTATracker>
+					)
+				}
+
+				return <React.Fragment key={item.id || i}>{linkContent}</React.Fragment>
+			})}
+		</nav>
+	)
+}

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

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

@@ -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 → revalidateHeader.ts}

@@ -3,11 +3,11 @@ 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")
+	if (!context.disableRevalidate) {
+		payload.logger.info("Revalidating header")
 
-    revalidateTag("global_header")
-  }
+		revalidateTag("global_header")
+	}
 
-  return doc
+	return doc
 }

package/templates/marketing/payload/src/access/{authenticated.ts.hbs → authenticated.ts}

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

package/templates/marketing/payload/src/access/{authenticatedOrPublished.ts.hbs → authenticatedOrPublished.ts}

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

package/templates/marketing/payload/src/app/(docs)/docs/[[...slug]]/page.tsx

@@ -0,0 +1,117 @@
+import { getDocBySlug, getDocsFromConvex } from "@/lib/docs-source"
+import { compileMDX } from "@/lib/mdx"
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page"
+import type { Metadata } from "next"
+import Link from "next/link"
+import { notFound, redirect } from "next/navigation"
+
+// Make this route dynamic so new docs appear immediately without rebuild
+// This ensures docs added via admin portal show up right away
+export const dynamic = "force-dynamic"
+
+interface DocsPageProps {
+	params: Promise<{
+		slug?: string[]
+	}>
+}
+
+export default async function Page({ params }: DocsPageProps) {
+	const { slug } = await params
+	const slugPath = slug?.join("/") || ""
+
+	// If this is the index page (no slug), check for an "index" doc first
+	if (!slugPath) {
+		// Try to find a doc with slug "index" to use as the home page
+		const indexDoc = await getDocBySlug("index")
+
+		if (indexDoc) {
+			// Found an index doc, render it as the home page
+			const { content, toc } = await compileMDX(indexDoc.content)
+			return (
+				<DocsPage toc={toc}>
+					<DocsTitle>{indexDoc.title}</DocsTitle>
+					{indexDoc.description && <DocsDescription>{indexDoc.description}</DocsDescription>}
+					<DocsBody>{content}</DocsBody>
+				</DocsPage>
+			)
+		}
+
+		// No index doc found, check if there are other docs
+		const docs = await getDocsFromConvex()
+
+		// If there are docs, redirect to the first one
+		if (docs.length > 0 && docs[0]) {
+			redirect(`/docs/${docs[0].slug}`)
+		}
+
+		// Otherwise show an empty state
+		return (
+			<DocsPage>
+				<DocsTitle>Documentation</DocsTitle>
+				<DocsDescription>Welcome to DirectoryHub documentation</DocsDescription>
+				<DocsBody>
+					<div className="flex flex-col items-center justify-center py-12 text-center">
+						<h2 className="text-xl font-semibold mb-4">No documentation yet</h2>
+						<p className="text-muted-foreground mb-6">
+							Documentation is coming soon. Check back later!
+						</p>
+						<Link
+							href="/"
+							className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+						>
+							Back to Home
+						</Link>
+					</div>
+				</DocsBody>
+			</DocsPage>
+		)
+	}
+
+	// Try to find the doc
+	const doc = await getDocBySlug(slugPath)
+
+	if (!doc) {
+		notFound()
+	}
+
+	// Compile MDX content
+	const { content, toc } = await compileMDX(doc.content)
+
+	return (
+		<DocsPage toc={toc}>
+			<DocsTitle>{doc.title}</DocsTitle>
+			{doc.description && <DocsDescription>{doc.description}</DocsDescription>}
+			<DocsBody>{content}</DocsBody>
+		</DocsPage>
+	)
+}
+
+// Removed generateStaticParams to make route fully dynamic
+// This allows new docs to appear immediately without requiring a rebuild
+// export async function generateStaticParams() {
+// 	const slugs = await getAllDocSlugs()
+// 	return [{ slug: [] }, ...slugs.map((slug) => ({ slug }))]
+// }
+
+export async function generateMetadata({ params }: DocsPageProps): Promise<Metadata> {
+	const { slug } = await params
+	const slugPath = slug?.join("/") || "index"
+
+	const doc = await getDocBySlug(slugPath)
+
+	if (!doc) {
+		return {
+			title: "Documentation | DirectoryHub",
+		}
+	}
+
+	return {
+		title: `${doc.title} | DirectoryHub Docs`,
+		description: doc.description || `Learn about ${doc.title} in DirectoryHub documentation.`,
+		openGraph: {
+			title: `${doc.title} | DirectoryHub Docs`,
+			description: doc.description || `Learn about ${doc.title} in DirectoryHub documentation.`,
+			type: "article",
+		},
+	}
+}

package/templates/marketing/payload/src/app/(docs)/docs/layout.tsx

@@ -0,0 +1,39 @@
+import { buildPageTree, getDocsFromConvex } from "@/lib/docs-source"
+import { DocsLayout } from "fumadocs-ui/layouts/docs"
+import { RootProvider } from "fumadocs-ui/provider"
+import type { ReactNode } from "react"
+
+// Make layout dynamic so navigation updates when new docs are added
+export const dynamic = "force-dynamic"
+
+export default async function DocsLayoutWrapper({
+	children,
+}: {
+	children: ReactNode
+}) {
+	const docs = await getDocsFromConvex()
+	const pageTree = buildPageTree(docs)
+
+	return (
+		<RootProvider
+			theme={{
+				enabled: true,
+				defaultTheme: "light",
+				attribute: "data-theme",
+			}}
+		>
+			<DocsLayout
+				tree={pageTree}
+				nav={{
+					title: "DirectoryHub Docs",
+					url: "/docs",
+				}}
+				sidebar={{
+					defaultOpenLevel: 1,
+				}}
+			>
+				{children}
+			</DocsLayout>
+		</RootProvider>
+	)
+}

package/templates/marketing/payload/src/app/(docs)/layout.tsx

@@ -0,0 +1,44 @@
+import { getServerSideURL } from "@/utilities/getURL"
+import { cn } from "@/utilities/ui"
+import { GeistMono } from "geist/font/mono"
+import type { Metadata } from "next"
+import { Inter } from "next/font/google"
+import type { ReactNode } from "react"
+
+// Import both - globals.css for Tailwind base + fumadocs styles
+import "../(frontend)/globals.css"
+import "fumadocs-ui/style.css"
+
+const inter = Inter({
+	subsets: ["latin"],
+	variable: "--font-inter",
+	display: "swap",
+})
+
+export default function DocsRootLayout({ children }: { children: ReactNode }) {
+	return (
+		<html
+			className={cn(inter.variable, GeistMono.variable)}
+			lang="en"
+			suppressHydrationWarning
+			data-theme="light"
+		>
+			<head>
+				<link href="/favicon.ico" rel="icon" sizes="32x32" />
+				<link href="/favicon.svg" rel="icon" type="image/svg+xml" />
+			</head>
+			<body className="font-sans antialiased" suppressHydrationWarning>
+				{children}
+			</body>
+		</html>
+	)
+}
+
+export const metadata: Metadata = {
+	metadataBase: new URL(getServerSideURL()),
+	title: {
+		default: "Documentation | DirectoryHub",
+		template: "%s | DirectoryHub Docs",
+	},
+	description: "DirectoryHub documentation - learn how to build and manage directory websites.",
+}

package/templates/marketing/payload/src/app/(frontend)/(sitemaps)/pages-sitemap.xml/route.ts

@@ -0,0 +1,68 @@
+import config from "@payload-config"
+import { getServerSideSitemap } from "next-sitemap"
+import { unstable_cache } from "next/cache"
+import { getPayload } from "payload"
+
+const getPagesSitemap = unstable_cache(
+	async () => {
+		const payload = await getPayload({ config })
+		const SITE_URL =
+			process.env.NEXT_PUBLIC_SERVER_URL ||
+			process.env.VERCEL_PROJECT_PRODUCTION_URL ||
+			"https://example.com"
+
+		const results = await payload.find({
+			collection: "pages",
+			overrideAccess: false,
+			draft: false,
+			depth: 0,
+			limit: 1000,
+			pagination: false,
+			where: {
+				_status: {
+					equals: "published",
+				},
+			},
+			select: {
+				slug: true,
+				updatedAt: true,
+			},
+		})
+
+		const dateFallback = new Date().toISOString()
+
+		const defaultSitemap = [
+			{
+				loc: `${SITE_URL}/search`,
+				lastmod: dateFallback,
+			},
+			{
+				loc: `${SITE_URL}/posts`,
+				lastmod: dateFallback,
+			},
+		]
+
+		const sitemap = results.docs
+			? results.docs
+					.filter((page) => Boolean(page?.slug))
+					.map((page) => {
+						return {
+							loc: page?.slug === "home" ? `${SITE_URL}/` : `${SITE_URL}/${page?.slug}`,
+							lastmod: page.updatedAt || dateFallback,
+						}
+					})
+			: []
+
+		return [...defaultSitemap, ...sitemap]
+	},
+	["pages-sitemap"],
+	{
+		tags: ["pages-sitemap"],
+	},
+)
+
+export async function GET() {
+	const sitemap = await getPagesSitemap()
+
+	return getServerSideSitemap(sitemap)
+}

package/templates/marketing/payload/src/app/(frontend)/(sitemaps)/posts-sitemap.xml/route.ts

@@ -0,0 +1,55 @@
+import config from "@payload-config"
+import { getServerSideSitemap } from "next-sitemap"
+import { unstable_cache } from "next/cache"
+import { getPayload } from "payload"
+
+const getPostsSitemap = unstable_cache(
+	async () => {
+		const payload = await getPayload({ config })
+		const SITE_URL =
+			process.env.NEXT_PUBLIC_SERVER_URL ||
+			process.env.VERCEL_PROJECT_PRODUCTION_URL ||
+			"https://example.com"
+
+		const results = await payload.find({
+			collection: "posts",
+			overrideAccess: false,
+			draft: false,
+			depth: 0,
+			limit: 1000,
+			pagination: false,
+			where: {
+				_status: {
+					equals: "published",
+				},
+			},
+			select: {
+				slug: true,
+				updatedAt: true,
+			},
+		})
+
+		const dateFallback = new Date().toISOString()
+
+		const sitemap = results.docs
+			? results.docs
+					.filter((post) => Boolean(post?.slug))
+					.map((post) => ({
+						loc: `${SITE_URL}/posts/${post?.slug}`,
+						lastmod: post.updatedAt || dateFallback,
+					}))
+			: []
+
+		return sitemap
+	},
+	["posts-sitemap"],
+	{
+		tags: ["posts-sitemap"],
+	},
+)
+
+export async function GET() {
+	const sitemap = await getPostsSitemap()
+
+	return getServerSideSitemap(sitemap)
+}

package/templates/marketing/payload/src/app/(frontend)/[slug]/page.client.tsx

@@ -0,0 +1,15 @@
+"use client"
+import { useHeaderTheme } from "@/providers/HeaderTheme"
+import React, { useEffect } from "react"
+
+const PageClient: React.FC = () => {
+	/* Force the header to be dark mode while we have an image behind it */
+	const { setHeaderTheme } = useHeaderTheme()
+
+	useEffect(() => {
+		setHeaderTheme("light")
+	}, [setHeaderTheme])
+	return <React.Fragment />
+}
+
+export default PageClient