kofi-stack-template-generator 2.1.36 → 2.1.38

package/templates/marketing/payload/src/heros/PostHero/index.tsx

@@ -0,0 +1,73 @@
+import type React from "react"
+import { formatDateTime } from "src/utilities/formatDateTime"
+
+import type { Post } from "@/payload-types"
+
+import { formatAuthors } from "@/utilities/formatAuthors"
+import Link from "next/link"
+
+export const PostHero: React.FC<{
+	post: Post
+}> = ({ post }) => {
+	const { categories, populatedAuthors, publishedAt, title } = post
+
+	const hasAuthors =
+		populatedAuthors && populatedAuthors.length > 0 && formatAuthors(populatedAuthors) !== ""
+
+	return (
+		<div
+			className="relative"
+			style={{
+				background: "linear-gradient(180deg, #0F1F3D 0%, #101F3C 50%, #0F1F3D 100%)",
+			}}
+		>
+			<div className="container py-16 md:py-20 lg:py-24">
+				<div className="max-w-3xl">
+					{/* Category Badge */}
+					{categories && categories.length > 0 && (
+						<div className="flex items-center gap-2 mb-6">
+							{categories.map((category) => {
+								if (typeof category === "object" && category !== null) {
+									const { title: categoryTitle, slug, id } = category
+									const titleToUse = categoryTitle || "Untitled category"
+
+									return (
+										<Link
+											key={id || slug}
+											href={`/posts?category=${slug}`}
+											className="inline-flex items-center px-3 py-1 text-xs font-medium uppercase tracking-wider text-[#3DA9A3] bg-[#3DA9A3]/10 rounded-full hover:bg-[#3DA9A3]/20 transition-colors"
+										>
+											{titleToUse}
+										</Link>
+									)
+								}
+								return null
+							})}
+						</div>
+					)}
+
+					{/* Title */}
+					<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight mb-8">
+						{title}
+					</h1>
+
+					{/* Meta Information */}
+					<div className="flex items-center gap-6 text-sm text-white/70">
+						{hasAuthors && (
+							<div className="flex items-center gap-2">
+								<span className="text-white/50">By</span>
+								<span className="text-white font-medium">{formatAuthors(populatedAuthors)}</span>
+							</div>
+						)}
+						{hasAuthors && publishedAt && <span className="text-white/30">•</span>}
+						{publishedAt && (
+							<time dateTime={publishedAt} className="text-white/70">
+								{formatDateTime(publishedAt)}
+							</time>
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}

package/templates/marketing/payload/src/heros/ProductShowcase/AnimatedMockup.tsx

@@ -0,0 +1,241 @@
+"use client"
+
+import { cn } from "@/utilities/ui"
+import type React from "react"
+import { useEffect, useState } from "react"
+
+interface MockupState {
+	id: number
+	label: string
+	sidebarActive: string
+	previewTitle: string
+	previewDescription: string
+	previewCategory: string
+	previewStatus: "draft" | "published" | "featured"
+	previewUrl?: string
+}
+
+const mockupStates: MockupState[] = [
+	{
+		id: 1,
+		label: "Setup & styling",
+		sidebarActive: "templates",
+		previewTitle: "Atlas Directory",
+		previewDescription: "Apply your brand, typography, and layout in minutes.",
+		previewCategory: "Design systems",
+		previewStatus: "draft",
+		previewUrl: "atlas.directory/home",
+	},
+	{
+		id: 2,
+		label: "Plans & pricing",
+		sidebarActive: "billing",
+		previewTitle: "Pro Listing Plan",
+		previewDescription: "Recurring billing, featured placements, and add-ons configured.",
+		previewCategory: "Monetization",
+		previewStatus: "draft",
+		previewUrl: "atlas.directory/billing",
+	},
+	{
+		id: 3,
+		label: "SEO & publishing",
+		sidebarActive: "seo",
+		previewTitle: "Atlas Directory",
+		previewDescription: "Schema, sitemap, and custom domain are ready to publish.",
+		previewCategory: "SEO & domains",
+		previewStatus: "published",
+		previewUrl: "atlas.directory/launch",
+	},
+	{
+		id: 4,
+		label: "Payouts live",
+		sidebarActive: "overview",
+		previewTitle: "Atlas Directory",
+		previewDescription: "Subscribers active, payouts scheduled to Stripe, featured slots sold.",
+		previewCategory: "Revenue",
+		previewStatus: "featured",
+		previewUrl: "atlas.directory/analytics",
+	},
+]
+
+export const AnimatedMockup: React.FC = () => {
+	const [currentState, setCurrentState] = useState(0)
+	const [isPaused, setIsPaused] = useState(false)
+
+	useEffect(() => {
+		if (isPaused) return
+
+		const interval = setInterval(() => {
+			setCurrentState((prev) => (prev + 1) % mockupStates.length)
+		}, 3000)
+
+		return () => clearInterval(interval)
+	}, [isPaused])
+
+	const state = mockupStates[currentState]
+
+	return (
+		<div
+			className="mockup-wrapper"
+			onMouseEnter={() => setIsPaused(true)}
+			onMouseLeave={() => setIsPaused(false)}
+		>
+			{/* Browser Chrome */}
+			<div className="mockup-chrome">
+				<div className="mockup-chrome-dots">
+					<span className="dot dot-red" />
+					<span className="dot dot-yellow" />
+					<span className="dot dot-green" />
+				</div>
+				<div className="mockup-chrome-title">DirectoryHub</div>
+				<div className="mockup-chrome-actions" />
+			</div>
+
+			{/* App Content */}
+			<div className="mockup-content">
+				{/* Sidebar */}
+				<div className="mockup-sidebar">
+					<div className="sidebar-header">
+						<div className="sidebar-logo">
+							<span className="logo-icon">D</span>
+							<span className="logo-text">My Directory</span>
+						</div>
+					</div>
+					<nav className="sidebar-nav">
+						<SidebarItem icon="📊" label="Overview" active={state.sidebarActive === "overview"} />
+						<SidebarItem icon="🖼️" label="Templates" active={state.sidebarActive === "templates"} />
+						<SidebarItem
+							icon="📋"
+							label="Listings"
+							active={state.sidebarActive === "listings"}
+							badge={24}
+						/>
+						<SidebarItem
+							icon="💳"
+							label="Plans & Billing"
+							active={state.sidebarActive === "billing"}
+						/>
+						<SidebarItem
+							icon="⚡"
+							label="Automations"
+							active={state.sidebarActive === "automations"}
+						/>
+						<SidebarItem icon="🔎" label="SEO" active={state.sidebarActive === "seo"} />
+						<SidebarItem icon="⚙️" label="Settings" active={state.sidebarActive === "settings"} />
+					</nav>
+				</div>
+
+				{/* Main Content Area */}
+				<div className="mockup-main">
+					{/* Header */}
+					<div className="main-header">
+						<div className="header-title">
+							<h2>{state.label}</h2>
+							<span className="header-breadcrumb">DirectoryHub / {state.previewTitle}</span>
+						</div>
+						<div className="header-actions">
+							<button
+								type="button"
+								className={cn(
+									"action-btn",
+									state.previewStatus === "published" && "action-btn--success",
+									state.previewStatus === "featured" && "action-btn--featured",
+								)}
+							>
+								{state.previewStatus === "draft" && "Save Draft"}
+								{state.previewStatus === "published" && "✓ Published"}
+								{state.previewStatus === "featured" && "⭐ Featured"}
+							</button>
+						</div>
+					</div>
+
+					{/* Split View: Editor + Preview */}
+					<div className="main-split">
+						{/* Editor Panel */}
+						<div className="editor-panel">
+							<div className="editor-section">
+								<span className="editor-label">Listing Name</span>
+								<div className="editor-input">
+									<span className="input-text">{state.previewTitle}</span>
+									<span className="input-cursor" />
+								</div>
+							</div>
+							<div className="editor-section">
+								<span className="editor-label">Category</span>
+								<div className="editor-select">
+									<span>{state.previewCategory}</span>
+									<span className="select-arrow">▼</span>
+								</div>
+							</div>
+							<div className="editor-section">
+								<span className="editor-label">Description</span>
+								<div className="editor-textarea">
+									<span className={cn("textarea-text", state.id >= 2 && "textarea-text--complete")}>
+										{state.previewDescription}
+									</span>
+								</div>
+							</div>
+						</div>
+
+						{/* Preview Panel */}
+						<div className="preview-panel">
+							<div className="preview-header">
+								<span className="preview-label">Live Preview</span>
+								<span className="preview-url">{state.previewUrl ?? "directoryhub.app/live"}</span>
+							</div>
+							<div className="preview-card">
+								{state.previewStatus === "featured" && (
+									<div className="preview-badge">⭐ Featured</div>
+								)}
+								<div className="preview-image">
+									<div className="preview-image-placeholder">
+										<span>🏢</span>
+									</div>
+								</div>
+								<div className="preview-content">
+									<span className="preview-category-tag">{state.previewCategory}</span>
+									<h3 className="preview-title">{state.previewTitle}</h3>
+									<p className="preview-description">{state.previewDescription}</p>
+									<div className="preview-meta">
+										<span className="meta-rating">★★★★★</span>
+										<span className="meta-reviews">24 reviews</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			{/* State Indicator */}
+			<div className="mockup-indicators">
+				{mockupStates.map((s, i) => (
+					<button
+						type="button"
+						key={s.id}
+						onClick={() => setCurrentState(i)}
+						className={cn("indicator", i === currentState && "indicator--active")}
+					>
+						<span className="indicator-dot" />
+						<span className="indicator-label">{s.label}</span>
+					</button>
+				))}
+			</div>
+		</div>
+	)
+}
+
+interface SidebarItemProps {
+	icon: string
+	label: string
+	active?: boolean
+	badge?: number
+}
+
+const SidebarItem: React.FC<SidebarItemProps> = ({ icon, label, active, badge }) => (
+	<div className={cn("sidebar-item", active && "sidebar-item--active")}>
+		<span className="sidebar-icon">{icon}</span>
+		<span className="sidebar-label">{label}</span>
+		{badge && <span className="sidebar-badge">{badge}</span>}
+	</div>
+)

package/templates/marketing/payload/src/heros/ProductShowcase/index.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import { useHeaderTheme } from "@/providers/HeaderTheme"
+import Image from "next/image"
+import type React from "react"
+import { useEffect } from "react"
+
+import type { Page } from "@/payload-types"
+
+import { CTATracker } from "@/components/Analytics"
+import { CMSLink } from "@/components/Link"
+import { Media } from "@/components/Media"
+import RichText from "@/components/RichText"
+import { AnimatedMockup } from "./AnimatedMockup"
+
+export const ProductShowcaseHero: React.FC<Page["hero"]> = ({
+	links,
+	richText,
+	media,
+	backgroundMedia,
+}) => {
+	const { setHeaderTheme } = useHeaderTheme()
+	const hasMedia = media && typeof media === "object"
+	const hasBackgroundMedia = backgroundMedia && typeof backgroundMedia === "object"
+
+	useEffect(() => {
+		setHeaderTheme("light")
+	}, [setHeaderTheme])
+
+	return (
+		<div className="relative overflow-hidden">
+			{/* Hero Content - Left Aligned */}
+			<div className="container mx-auto px-4 pt-8 pb-16 md:pt-16 md:pb-24">
+				<div className="max-w-2xl">
+					{richText && (
+						<RichText
+							className="mb-8 hero-content hero-content--left"
+							data={richText}
+							enableGutter={false}
+							enableProse={false}
+						/>
+					)}
+					{Array.isArray(links) && links.length > 0 && (
+						<ul className="flex flex-wrap gap-4">
+							{links.map(({ link }, i) => {
+								return (
+									// biome-ignore lint/suspicious/noArrayIndexKey: Links are static and don't reorder
+									<li key={i}>
+										<CTATracker
+											location="hero_product_showcase"
+											variant={link?.label || `cta_${i}`}
+										>
+											<CMSLink {...link} size="lg" />
+										</CTATracker>
+									</li>
+								)
+							})}
+						</ul>
+					)}
+				</div>
+			</div>
+
+			{/* Product Mockup Section (Cursor-style) */}
+			<div className="container mx-auto px-4">
+				<div className="hero-showcase">
+					{/* Background Image - LCP element, needs fetchPriority="high" */}
+					<div className="hero-bg-image">
+						{hasBackgroundMedia ? (
+							<Media
+								resource={backgroundMedia}
+								fill
+								imgClassName="object-cover"
+								priority
+								size="100vw"
+							/>
+						) : (
+							<Image
+								src="/media/hero-bg.png"
+								alt=""
+								fill
+								sizes="(max-width: 1280px) 100vw, 1280px"
+								className="object-cover"
+								priority
+								fetchPriority="high"
+								quality={75}
+							/>
+						)}
+					</div>
+
+					{/* Mockup - centered within background */}
+					<div className="hero-mockup-centered">
+						{hasMedia ? (
+							<div className="mockup-wrapper">
+								<Media
+									resource={media}
+									imgClassName="w-full h-auto object-contain"
+									size="(max-width: 768px) 100vw, (max-width: 1024px) 80vw, 960px"
+								/>
+							</div>
+						) : (
+							<AnimatedMockup />
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}

package/templates/marketing/payload/src/heros/{RenderHero.tsx.hbs → RenderHero.tsx}

@@ -8,20 +8,20 @@ import { MediumImpactHero } from "@/heros/MediumImpact"
 import { ProductShowcaseHero } from "@/heros/ProductShowcase"
 
 const heroes = {
-  highImpact: HighImpactHero,
-  lowImpact: LowImpactHero,
-  mediumImpact: MediumImpactHero,
-  productShowcase: ProductShowcaseHero,
+	highImpact: HighImpactHero,
+	lowImpact: LowImpactHero,
+	mediumImpact: MediumImpactHero,
+	productShowcase: ProductShowcaseHero,
 }
 
 export const RenderHero: React.FC<Page["hero"]> = (props) => {
-  const { type } = props || {}
+	const { type } = props || {}
 
-  if (!type || type === "none") return null
+	if (!type || type === "none") return null
 
-  const HeroToRender = heroes[type]
+	const HeroToRender = heroes[type]
 
-  if (!HeroToRender) return null
+	if (!HeroToRender) return null
 
-  return <HeroToRender {...props} />
+	return <HeroToRender {...props} />
 }

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

@@ -0,0 +1,121 @@
+import type { Field } from "payload"
+
+import {
+	AlignFeature,
+	BlockquoteFeature,
+	ChecklistFeature,
+	EXPERIMENTAL_TableFeature,
+	FixedToolbarFeature,
+	HeadingFeature,
+	IndentFeature,
+	InlineCodeFeature,
+	InlineToolbarFeature,
+	OrderedListFeature,
+	RelationshipFeature,
+	StrikethroughFeature,
+	SubscriptFeature,
+	SuperscriptFeature,
+	UnorderedListFeature,
+	UploadFeature,
+	lexicalEditor,
+} from "@payloadcms/richtext-lexical"
+
+import { linkGroup } from "@/fields/linkGroup"
+
+export const hero: Field = {
+	name: "hero",
+	type: "group",
+	fields: [
+		{
+			name: "type",
+			type: "select",
+			defaultValue: "lowImpact",
+			label: "Type",
+			options: [
+				{
+					label: "None",
+					value: "none",
+				},
+				{
+					label: "Product Showcase",
+					value: "productShowcase",
+				},
+				{
+					label: "High Impact",
+					value: "highImpact",
+				},
+				{
+					label: "Medium Impact",
+					value: "mediumImpact",
+				},
+				{
+					label: "Low Impact",
+					value: "lowImpact",
+				},
+			],
+			required: true,
+		},
+		{
+			name: "richText",
+			type: "richText",
+			editor: lexicalEditor({
+				features: ({ rootFeatures }) => {
+					return [
+						...rootFeatures,
+						HeadingFeature({ enabledHeadingSizes: ["h1", "h2", "h3", "h4"] }),
+						FixedToolbarFeature(),
+						InlineToolbarFeature(),
+						StrikethroughFeature(),
+						SubscriptFeature(),
+						SuperscriptFeature(),
+						InlineCodeFeature(),
+						BlockquoteFeature(),
+						UnorderedListFeature(),
+						OrderedListFeature(),
+						ChecklistFeature(),
+						AlignFeature(),
+						IndentFeature(),
+						RelationshipFeature(),
+						UploadFeature(),
+						EXPERIMENTAL_TableFeature(),
+					]
+				},
+			}),
+			label: false,
+		},
+		linkGroup({
+			overrides: {
+				maxRows: 2,
+			},
+		}),
+		{
+			name: "media",
+			type: "upload",
+			admin: {
+				condition: (_, { type } = {}) =>
+					["highImpact", "mediumImpact", "productShowcase"].includes(type),
+			},
+			relationTo: "media",
+			required: false,
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			validate: (value: any, { siblingData }: { siblingData?: { type?: string } }) => {
+				if (["highImpact", "mediumImpact"].includes(siblingData?.type ?? "") && !value) {
+					return "Media is required for high impact and medium impact hero types"
+				}
+				return true
+			},
+		},
+		{
+			name: "backgroundMedia",
+			type: "upload",
+			admin: {
+				condition: (_, { type } = {}) => type === "productShowcase",
+				description: "Optional background illustration. Falls back to default if not set.",
+			},
+			relationTo: "media",
+			required: false,
+			label: "Background Image",
+		},
+	],
+	label: false,
+}

package/templates/marketing/payload/src/hooks/populatePublishedAt.ts

@@ -0,0 +1,15 @@
+import type { CollectionBeforeChangeHook } from "payload"
+
+export const populatePublishedAt: CollectionBeforeChangeHook = ({ data, operation, req }) => {
+	if (operation === "create" || operation === "update") {
+		if (req.data && !req.data.publishedAt) {
+			const now = new Date()
+			return {
+				...data,
+				publishedAt: now,
+			}
+		}
+	}
+
+	return data
+}

package/templates/marketing/payload/src/hooks/{revalidateRedirects.ts.hbs → revalidateRedirects.ts}

@@ -3,9 +3,9 @@ import type { CollectionAfterChangeHook } from "payload"
 import { revalidateTag } from "next/cache"
 
 export const revalidateRedirects: CollectionAfterChangeHook = ({ doc, req: { payload } }) => {
-  payload.logger.info(`Revalidating redirects`)
+	payload.logger.info(`Revalidating redirects`)
 
-  revalidateTag("redirects")
+	revalidateTag("redirects")
 
-  return doc
+	return doc
 }

package/templates/marketing/payload/src/lib/convex.ts

@@ -0,0 +1,13 @@
+import { ConvexHttpClient } from "convex/browser"
+
+/**
+ * Convex HTTP client for server-side data fetching in the marketing site.
+ * Used for fetching documentation content from Convex.
+ */
+const convexUrl = process.env.NEXT_PUBLIC_CONVEX_URL
+
+if (!convexUrl) {
+	console.warn("[Convex] NEXT_PUBLIC_CONVEX_URL is not set. Documentation features will not work.")
+}
+
+export const convex = new ConvexHttpClient(convexUrl || "")