kofi-stack-template-generator 2.1.46 → 2.1.48

package/templates/marketing/payload/src/Footer/Component.client.tsx

@@ -13,7 +13,7 @@ import { ThemeSelector } from "@/providers/Theme/ThemeSelector"
 import { cn } from "@/utilities/ui"
 
 interface FooterClientProps {
-	data: Footer
+	data: Footer | null
 }
 
 // Social icons as inline SVGs for flexibility
@@ -82,6 +82,20 @@ export const FooterClient: React.FC<FooterClientProps> = ({ data }) => {
 	const [isSubmitting, setIsSubmitting] = useState(false)
 	const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null)
 
+	// Show minimal footer when database isn't initialized yet
+	if (!data) {
+		return (
+			<footer className="mt-auto border-t border-border bg-background">
+				<div className="container mx-auto flex flex-col items-center justify-between gap-4 px-4 py-6 sm:flex-row">
+					<p className="text-sm text-muted-foreground">
+						Site not configured yet. Visit <Link href="/admin" className="underline hover:text-foreground">/admin</Link> to set up.
+					</p>
+					<ThemeSelector />
+				</div>
+			</footer>
+		)
+	}
+
 	const { columns, socialLinks, newsletter, copyrightText, bottomLinks } = data
 
 	const handleNewsletterSubmit = async (e: React.FormEvent) => {

package/templates/marketing/payload/src/Footer/Component.tsx

@@ -5,7 +5,7 @@ import type { Footer as FooterType } from "@/payload-types"
 import { FooterClient } from "./Component.client"
 
 export async function Footer() {
-	const footerData: FooterType = await getCachedGlobal("footer", 1)()
+	const footerData = (await getCachedGlobal("footer", 1)()) as FooterType | null
 
 	return <FooterClient data={footerData} />
 }

package/templates/marketing/payload/src/Header/Component.client.tsx

@@ -12,7 +12,7 @@ import { MobileMenu } from "./MobileMenu"
 import { HeaderNav } from "./Nav"
 
 interface HeaderClientProps {
-	data: Header
+	data: Header | null
 }
 
 // Helper to get href from link data
@@ -57,6 +57,22 @@ export const HeaderClient: React.FC<HeaderClientProps> = ({ data }) => {
 		return rightButtonItems?.[0]
 	}, [data?.navItems])
 
+	// Show setup header when database isn't initialized yet
+	if (!data) {
+		return (
+			<header className="sticky top-0 z-20 border-b border-border bg-background">
+				<div className="container mx-auto px-4 h-16 flex justify-between items-center">
+					<div className="flex items-center gap-2">
+						<span className="text-xl font-semibold">Welcome</span>
+					</div>
+					<Button asChild size="sm">
+						<Link href="/admin">Setup Site →</Link>
+					</Button>
+				</div>
+			</header>
+		)
+	}
+
 	return (
 		<header
 			className="sticky top-0 z-20 border-b border-border bg-background"

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

@@ -4,7 +4,7 @@ import { HeaderClient } from "./Component.client"
 import type { Header as HeaderType } from "@/payload-types"
 
 export async function Header() {
-	const headerData: HeaderType = await getCachedGlobal("header", 1)()
+	const headerData = (await getCachedGlobal("header", 1)()) as HeaderType | null
 
 	return <HeaderClient data={headerData} />
 }

package/templates/marketing/payload/src/endpoints/seed/directoryhub/features/seo.ts

@@ -160,7 +160,7 @@ export const securityPage = (): Partial<Page> => {
 					{
 						size: "small",
 						style: "accent",
-						icon: "lock",
+						icon: "shield",
 						title: "Zero Trust",
 						description: createParagraph("Verify every request, every time."),
 					},

package/templates/marketing/payload/src/endpoints/seed/directoryhub/features/templates.ts

@@ -131,7 +131,7 @@ export const integrationsPage = (): Partial<Page> => {
 					{
 						size: "small",
 						style: "gradient",
-						icon: "messageSquare",
+						icon: "globe",
 						title: "Communication",
 						description: createParagraph(
 							"Slack, Microsoft Teams, Discord, and email integrations.",
@@ -149,7 +149,7 @@ export const integrationsPage = (): Partial<Page> => {
 					{
 						size: "small",
 						style: "default",
-						icon: "folder",
+						icon: "layers",
 						title: "Project Management",
 						description: createParagraph(
 							"Jira, Asana, Monday.com, Trello integrations.",

package/templates/marketing/payload/src/endpoints/seed/directoryhub/use-cases/b2b-vendor-hubs.ts

@@ -160,7 +160,7 @@ export const marketingPage = (): Partial<Page> => {
 					{
 						size: "small",
 						style: "accent",
-						icon: "folder",
+						icon: "layers",
 						title: "Project Templates",
 						description: createParagraph("Pre-built templates for common campaigns."),
 					},
@@ -188,7 +188,7 @@ export const marketingPage = (): Partial<Page> => {
 					{
 						size: "small",
 						style: "default",
-						icon: "messageSquare",
+						icon: "globe",
 						title: "Collaboration",
 						description: createParagraph("Comments, feedback, and approvals in context."),
 					},

package/templates/marketing/payload/src/endpoints/seed/directoryhub/use-cases/communities.ts

@@ -188,7 +188,7 @@ export const productPage = (): Partial<Page> => {
 					{
 						size: "small",
 						style: "default",
-						icon: "messageSquare",
+						icon: "users",
 						title: "Stakeholder Updates",
 						description: createParagraph("Keep leadership informed automatically."),
 					},

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

@@ -64,9 +64,9 @@ export default buildConfig({
 		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,
+		// Auto-sync schema in development for better DX (first launch works immediately)
+		// In production, use explicit migrations: pnpm payload migrate
+		push: process.env.NODE_ENV !== "production",
 	}),
 	collections: [Pages, Posts, Media, Categories, FAQs, Users],
 	cors: [getServerSideURL()].filter(Boolean),

package/templates/marketing/payload/src/utilities/getGlobals.ts

@@ -7,14 +7,21 @@ import { getPayload } from "payload"
 type Global = keyof Config["globals"]
 
 async function getGlobal(slug: Global, depth = 0) {
-	const payload = await getPayload({ config: configPromise })
+	try {
+		const payload = await getPayload({ config: configPromise })
 
-	const global = await payload.findGlobal({
-		slug,
-		depth,
-	})
+		const global = await payload.findGlobal({
+			slug,
+			depth,
+		})
 
-	return global
+		return global
+	} catch (error) {
+		// Database tables may not exist yet on first launch
+		// Return null so components can show a setup UI instead of crashing
+		console.warn(`Could not fetch global "${String(slug)}". Database may not be initialized yet.`)
+		return null
+	}
 }
 
 /**