kofi-stack-template-generator 2.1.37 → 2.1.38

package/templates/marketing/payload/src/providers/HeaderTheme/index.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import type { Theme } from "@/providers/Theme/types"
+
+import type React from "react"
+import { createContext, use, useCallback, useState } from "react"
+
+import canUseDOM from "@/utilities/canUseDOM"
+
+export interface ContextType {
+	headerTheme?: Theme | null
+	setHeaderTheme: (theme: Theme | null) => void
+}
+
+const initialContext: ContextType = {
+	headerTheme: undefined,
+	setHeaderTheme: () => null,
+}
+
+const HeaderThemeContext = createContext(initialContext)
+
+export const HeaderThemeProvider = ({ children }: { children: React.ReactNode }) => {
+	const [headerTheme, setThemeState] = useState<Theme | undefined | null>(
+		canUseDOM ? (document.documentElement.getAttribute("data-theme") as Theme) : undefined,
+	)
+
+	const setHeaderTheme = useCallback((themeToSet: Theme | null) => {
+		setThemeState(themeToSet)
+	}, [])
+
+	return <HeaderThemeContext value={{ headerTheme, setHeaderTheme }}>{children}</HeaderThemeContext>
+}
+
+export const useHeaderTheme = (): ContextType => use(HeaderThemeContext)

package/templates/marketing/payload/src/providers/PostHogProvider.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { usePathname, useSearchParams } from "next/navigation"
+import posthog from "posthog-js"
+import { Suspense, useEffect } from "react"
+
+function PostHogPageviewTracker() {
+	const pathname = usePathname()
+	const searchParams = useSearchParams()
+
+	useEffect(() => {
+		// Only track in production with PostHog configured
+		if (process.env.NODE_ENV !== "production") return
+		if (!process.env.NEXT_PUBLIC_POSTHOG_KEY) return
+
+		// Track pageviews when the route changes
+		const url = pathname + (searchParams?.toString() ? `?${searchParams.toString()}` : "")
+		posthog.capture("$pageview", { $current_url: url })
+	}, [pathname, searchParams])
+
+	return null
+}
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+	return (
+		<>
+			<Suspense fallback={null}>
+				<PostHogPageviewTracker />
+			</Suspense>
+			{children}
+		</>
+	)
+}

package/templates/marketing/payload/src/providers/Theme/InitTheme/{index.tsx.hbs → index.tsx}

@@ -1,13 +1,14 @@
 import Script from "next/script"
 import type React from "react"
 
-import { defaultTheme, themeLocalStorageKey } from "../shared"
+import { defaultTheme, themeLocalStorageKey } from "../ThemeSelector/types"
 
 export const InitTheme: React.FC = () => {
-  return (
-    <Script
-      dangerouslySetInnerHTML=\{{
-        __html: `
+	return (
+		// eslint-disable-next-line @next/next/no-before-interactive-script-outside-document
+		<Script
+			dangerouslySetInnerHTML={{
+				__html: `
   (function () {
     function getSystemPreference() {
       var mediaQuery = '(prefers-color-scheme: dark)'
@@ -36,9 +37,9 @@ export const InitTheme: React.FC = () => {
     document.documentElement.setAttribute('data-theme', themeToSet)
   })();
   `,
-      }}
-      id="theme-script"
-      strategy="beforeInteractive"
-    />
-  )
+			}}
+			id="theme-script"
+			strategy="beforeInteractive"
+		/>
+	)
 }

package/templates/marketing/payload/src/providers/Theme/ThemeSelector/index.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import React, { useState } from "react"
+
+import type { ThemePreference } from "./types"
+
+import { cn } from "@/utilities/ui"
+import { useTheme } from ".."
+import { themeLocalStorageKey } from "./types"
+
+// Icons for theme modes
+const SunIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="16"
+		height="16"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+		aria-hidden="true"
+	>
+		<title>Light mode</title>
+		<circle cx="12" cy="12" r="4" />
+		<path d="M12 2v2" />
+		<path d="M12 20v2" />
+		<path d="m4.93 4.93 1.41 1.41" />
+		<path d="m17.66 17.66 1.41 1.41" />
+		<path d="M2 12h2" />
+		<path d="M20 12h2" />
+		<path d="m6.34 17.66-1.41 1.41" />
+		<path d="m19.07 4.93-1.41 1.41" />
+	</svg>
+)
+
+const MoonIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="16"
+		height="16"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+		aria-hidden="true"
+	>
+		<title>Dark mode</title>
+		<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+	</svg>
+)
+
+const SystemIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="16"
+		height="16"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+		aria-hidden="true"
+	>
+		<title>System mode</title>
+		<rect width="20" height="14" x="2" y="3" rx="2" />
+		<line x1="8" x2="16" y1="21" y2="21" />
+		<line x1="12" x2="12" y1="17" y2="21" />
+	</svg>
+)
+
+export const ThemeSelector: React.FC = () => {
+	const { setTheme } = useTheme()
+	const [value, setValue] = useState<ThemePreference>("light")
+
+	const onThemeChange = (themeToSet: ThemePreference) => {
+		// Save preference to localStorage
+		window.localStorage.setItem(themeLocalStorageKey, themeToSet)
+		setValue(themeToSet)
+
+		if (themeToSet === "auto") {
+			// Apply system preference
+			setTheme(null)
+		} else {
+			setTheme(themeToSet)
+		}
+	}
+
+	React.useEffect(() => {
+		const preference = window.localStorage.getItem(themeLocalStorageKey) as ThemePreference | null
+		if (preference === "light" || preference === "dark" || preference === "auto") {
+			setValue(preference)
+		} else {
+			// Default to light if no preference saved
+			setValue("light")
+		}
+	}, [])
+
+	const themes: { value: ThemePreference; icon: React.ReactNode; label: string }[] = [
+		{ value: "light", icon: <SunIcon />, label: "Light" },
+		{ value: "auto", icon: <SystemIcon />, label: "System" },
+		{ value: "dark", icon: <MoonIcon />, label: "Dark" },
+	]
+
+	return (
+		<div
+			className="inline-flex items-center rounded-full border border-border bg-background p-1"
+			aria-label="Theme selection"
+		>
+			{themes.map(({ value: themeValue, icon, label }) => (
+				<button
+					key={themeValue}
+					type="button"
+					aria-pressed={value === themeValue}
+					aria-label={`${label} theme`}
+					onClick={() => onThemeChange(themeValue)}
+					className={cn(
+						"flex h-7 w-7 items-center justify-center rounded-full transition-all",
+						value === themeValue
+							? "bg-primary text-primary-foreground"
+							: "text-muted-foreground hover:text-foreground",
+					)}
+				>
+					{icon}
+				</button>
+			))}
+		</div>
+	)
+}

package/templates/marketing/payload/src/providers/Theme/ThemeSelector/types.ts

@@ -0,0 +1,7 @@
+export type Theme = "dark" | "light"
+
+export type ThemePreference = Theme | "auto"
+
+export const themeLocalStorageKey = "payload-theme"
+
+export const defaultTheme: Theme = "light"

package/templates/marketing/payload/src/providers/Theme/index.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import type React from "react"
+import { createContext, use, useCallback, useEffect, useState } from "react"
+
+import type { Theme, ThemeContextType } from "./types"
+
+import canUseDOM from "@/utilities/canUseDOM"
+import { defaultTheme, getImplicitPreference, themeLocalStorageKey } from "./shared"
+import { themeIsValid } from "./types"
+
+const initialContext: ThemeContextType = {
+	setTheme: () => null,
+	theme: undefined,
+}
+
+const ThemeContext = createContext(initialContext)
+
+export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+	const [theme, setThemeState] = useState<Theme | undefined>(
+		canUseDOM ? (document.documentElement.getAttribute("data-theme") as Theme) : undefined,
+	)
+
+	const setTheme = useCallback((themeToSet: Theme | null) => {
+		if (themeToSet === null) {
+			// 'auto' mode - use system preference
+			const implicitPreference = getImplicitPreference()
+			const resolvedTheme = implicitPreference || defaultTheme
+			document.documentElement.setAttribute("data-theme", resolvedTheme)
+			setThemeState(resolvedTheme)
+		} else {
+			setThemeState(themeToSet)
+			document.documentElement.setAttribute("data-theme", themeToSet)
+		}
+	}, [])
+
+	useEffect(() => {
+		let themeToSet: Theme = defaultTheme
+		const preference = window.localStorage.getItem(themeLocalStorageKey)
+
+		if (themeIsValid(preference)) {
+			// User explicitly chose light or dark
+			themeToSet = preference
+		} else if (preference === "auto") {
+			// User explicitly chose system preference
+			const implicitPreference = getImplicitPreference()
+			if (implicitPreference) {
+				themeToSet = implicitPreference
+			}
+		}
+		// If no preference, use defaultTheme (light)
+
+		document.documentElement.setAttribute("data-theme", themeToSet)
+		setThemeState(themeToSet)
+	}, [])
+
+	return <ThemeContext value={{ setTheme, theme }}>{children}</ThemeContext>
+}
+
+export const useTheme = (): ThemeContextType => use(ThemeContext)

package/templates/marketing/payload/src/providers/Theme/shared.ts

@@ -0,0 +1,17 @@
+import type { Theme } from "./types"
+
+export const themeLocalStorageKey = "payload-theme"
+
+export const defaultTheme = "light"
+
+export const getImplicitPreference = (): Theme | null => {
+	const mediaQuery = "(prefers-color-scheme: dark)"
+	const mql = window.matchMedia(mediaQuery)
+	const hasImplicitPreference = typeof mql.matches === "boolean"
+
+	if (hasImplicitPreference) {
+		return mql.matches ? "dark" : "light"
+	}
+
+	return null
+}

package/templates/marketing/payload/src/providers/Theme/{types.ts.hbs → types.ts}

@@ -1,10 +1,10 @@
 export type Theme = "dark" | "light"
 
 export interface ThemeContextType {
-  setTheme: (theme: Theme | null) => void
-  theme?: Theme | null
+	setTheme: (theme: Theme | null) => void
+	theme?: Theme | null
 }
 
 export function themeIsValid(string: null | string): string is Theme {
-  return string ? ["dark", "light"].includes(string) : false
+	return string ? ["dark", "light"].includes(string) : false
 }

package/templates/marketing/payload/src/providers/index.tsx

@@ -0,0 +1,17 @@
+import type React from "react"
+
+import { HeaderThemeProvider } from "./HeaderTheme"
+import { PostHogProvider } from "./PostHogProvider"
+import { ThemeProvider } from "./Theme"
+
+export const Providers: React.FC<{
+	children: React.ReactNode
+}> = ({ children }) => {
+	return (
+		<ThemeProvider>
+			<HeaderThemeProvider>
+				<PostHogProvider>{children}</PostHogProvider>
+			</HeaderThemeProvider>
+		</ThemeProvider>
+	)
+}

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

@@ -0,0 +1,42 @@
+"use client"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { useDebounce } from "@/utilities/useDebounce"
+import { useRouter } from "next/navigation"
+import type React from "react"
+import { useEffect, useState } from "react"
+
+export const Search: React.FC = () => {
+	const [value, setValue] = useState("")
+	const router = useRouter()
+
+	const debouncedValue = useDebounce(value)
+
+	useEffect(() => {
+		router.push(`/search${debouncedValue ? `?q=${debouncedValue}` : ""}`)
+	}, [debouncedValue, router])
+
+	return (
+		<div>
+			<form
+				onSubmit={(e) => {
+					e.preventDefault()
+				}}
+			>
+				<Label htmlFor="search" className="sr-only">
+					Search
+				</Label>
+				<Input
+					id="search"
+					onChange={(event) => {
+						setValue(event.target.value)
+					}}
+					placeholder="Search"
+				/>
+				<button type="submit" className="sr-only">
+					submit
+				</button>
+			</form>
+		</div>
+	)
+}

package/templates/marketing/payload/src/search/beforeSync.ts

@@ -0,0 +1,56 @@
+import type { BeforeSync, DocToSync } from "@payloadcms/plugin-search/types"
+
+export const beforeSyncWithSearch: BeforeSync = async ({ req, originalDoc, searchDoc }) => {
+	const {
+		doc: { relationTo: _collection },
+	} = searchDoc
+
+	const { slug, id: _id, categories, title, meta } = originalDoc
+
+	const modifiedDoc: DocToSync = {
+		...searchDoc,
+		slug,
+		meta: {
+			...meta,
+			title: meta?.title || title,
+			image: meta?.image?.id || meta?.image,
+			description: meta?.description,
+		},
+		categories: [],
+	}
+
+	if (categories && Array.isArray(categories) && categories.length > 0) {
+		const populatedCategories: { id: string | number; title: string }[] = []
+		for (const category of categories) {
+			if (!category) {
+				continue
+			}
+
+			if (typeof category === "object") {
+				populatedCategories.push(category)
+				continue
+			}
+
+			const doc = await req.payload.findByID({
+				collection: "categories",
+				id: category,
+				disableErrors: true,
+				depth: 0,
+				select: { title: true },
+				req,
+			})
+
+			if (doc !== null) {
+				populatedCategories.push(doc)
+			}
+		}
+
+		modifiedDoc.categories = populatedCategories.map((each) => ({
+			relationTo: "categories",
+			categoryID: String(each.id),
+			title: each.title,
+		}))
+	}
+
+	return modifiedDoc
+}

package/templates/marketing/payload/src/search/fieldOverrides.ts

@@ -0,0 +1,61 @@
+import type { Field } from "payload"
+
+export const searchFields: Field[] = [
+	{
+		name: "slug",
+		type: "text",
+		index: true,
+		admin: {
+			readOnly: true,
+		},
+	},
+	{
+		name: "meta",
+		label: "Meta",
+		type: "group",
+		index: true,
+		admin: {
+			readOnly: true,
+		},
+		fields: [
+			{
+				type: "text",
+				name: "title",
+				label: "Title",
+			},
+			{
+				type: "text",
+				name: "description",
+				label: "Description",
+			},
+			{
+				name: "image",
+				label: "Image",
+				type: "upload",
+				relationTo: "media",
+			},
+		],
+	},
+	{
+		label: "Categories",
+		name: "categories",
+		type: "array",
+		admin: {
+			readOnly: true,
+		},
+		fields: [
+			{
+				name: "relationTo",
+				type: "text",
+			},
+			{
+				name: "categoryID",
+				type: "text",
+			},
+			{
+				name: "title",
+				type: "text",
+			},
+		],
+	},
+]

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

@@ -0,0 +1,35 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+/**
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+export function isObject(item: unknown): item is object {
+	return typeof item === "object" && !Array.isArray(item)
+}
+
+/**
+ * Deep merge two objects.
+ * @param target
+ * @param ...sources
+ */
+export default function deepMerge<T, R>(target: T, source: R): T {
+	const output = { ...target }
+	if (isObject(target) && isObject(source)) {
+		Object.keys(source).forEach((key) => {
+			if (isObject(source[key])) {
+				if (!(key in target)) {
+					Object.assign(output, { [key]: source[key] })
+				} else {
+					output[key] = deepMerge(target[key], source[key])
+				}
+			} else {
+				Object.assign(output, { [key]: source[key] })
+			}
+		})
+	}
+
+	return output
+}

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

@@ -0,0 +1,78 @@
+import type { DefaultTypedEditorState } from "@payloadcms/richtext-lexical"
+
+export interface HeadingItem {
+	id: string
+	text: string
+	depth: number
+}
+
+/**
+ * Slugify a string for use as an anchor ID
+ */
+export function slugify(text: string): string {
+	return text
+		.toLowerCase()
+		.replace(/[^a-z0-9\s-]/g, "")
+		.replace(/\s+/g, "-")
+		.replace(/-+/g, "-")
+		.trim()
+}
+
+/**
+ * Extract text content from a Lexical node recursively
+ */
+function extractTextFromNode(node: Record<string, unknown>): string {
+	if (node.type === "text" && typeof node.text === "string") {
+		return node.text
+	}
+
+	if (Array.isArray(node.children)) {
+		return node.children
+			.map((child) => extractTextFromNode(child as Record<string, unknown>))
+			.join("")
+	}
+
+	return ""
+}
+
+/**
+ * Get heading depth from tag name
+ */
+function getHeadingDepth(tag: string): number {
+	const depthMap: Record<string, number> = {
+		h1: 1,
+		h2: 2,
+		h3: 3,
+		h4: 4,
+		h5: 5,
+		h6: 6,
+	}
+	return depthMap[tag] || 2
+}
+
+/**
+ * Extract headings from Lexical editor state for table of contents
+ */
+export function extractHeadingsFromLexical(content: DefaultTypedEditorState): HeadingItem[] {
+	const headings: HeadingItem[] = []
+
+	if (!content?.root?.children) {
+		return headings
+	}
+
+	for (const node of content.root.children) {
+		const nodeRecord = node as Record<string, unknown>
+		if (nodeRecord.type === "heading" && typeof nodeRecord.tag === "string") {
+			const text = extractTextFromNode(nodeRecord)
+			if (text.trim()) {
+				headings.push({
+					id: slugify(text),
+					text: text.trim(),
+					depth: getHeadingDepth(nodeRecord.tag),
+				})
+			}
+		}
+	}
+
+	return headings
+}

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

@@ -0,0 +1,24 @@
+import type { Post } from "@/payload-types"
+
+/**
+ * Formats an array of populatedAuthors from Posts into a prettified string.
+ * @param authors - The populatedAuthors array from a Post.
+ * @returns A prettified string of authors.
+ * @example
+ *
+ * [Author1, Author2] becomes 'Author1 and Author2'
+ * [Author1, Author2, Author3] becomes 'Author1, Author2, and Author3'
+ *
+ */
+export const formatAuthors = (
+	authors: NonNullable<NonNullable<Post["populatedAuthors"]>[number]>[],
+) => {
+	// Ensure we don't have any authors without a name
+	const authorNames = authors.map((author) => author.name).filter(Boolean)
+
+	if (authorNames.length === 0) return ""
+	if (authorNames.length === 1) return authorNames[0]
+	if (authorNames.length === 2) return `${authorNames[0]} and ${authorNames[1]}`
+
+	return `${authorNames.slice(0, -1).join(", ")} and ${authorNames[authorNames.length - 1]}`
+}

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

@@ -0,0 +1,20 @@
+export const formatDateTime = (timestamp: string): string => {
+	const now = new Date()
+	let date = now
+	if (timestamp) date = new Date(timestamp)
+	const months = date.getMonth()
+	const days = date.getDate()
+	// const hours = date.getHours();
+	// const minutes = date.getMinutes();
+	// const seconds = date.getSeconds();
+
+	const MM = months + 1 < 10 ? `0${months + 1}` : months + 1
+	const DD = days < 10 ? `0${days}` : days
+	const YYYY = date.getFullYear()
+	// const AMPM = hours < 12 ? 'AM' : 'PM';
+	// const HH = hours > 12 ? hours - 12 : hours;
+	// const MinMin = (minutes < 10) ? `0${minutes}` : minutes;
+	// const SS = (seconds < 10) ? `0${seconds}` : seconds;
+
+	return `${MM}/${DD}/${YYYY}`
+}