kofi-stack-template-generator 2.1.36 → 2.1.38

package/templates/marketing/payload/src/endpoints/seed/post-3.ts

@@ -0,0 +1,268 @@
+import type { RequiredDataFromCollectionSlug } from "payload"
+import type { PostArgs } from "./post-1"
+
+export const post3: (args: PostArgs) => RequiredDataFromCollectionSlug<"posts"> = ({
+	heroImage,
+	blockImage,
+	author,
+}) => {
+	return {
+		slug: "dollar-and-sense-the-financial-forecast",
+		_status: "published",
+		authors: [author],
+		content: {
+			root: {
+				type: "root",
+				children: [
+					{
+						type: "block",
+						fields: {
+							blockName: "Disclaimer",
+							blockType: "banner",
+							content: {
+								root: {
+									type: "root",
+									children: [
+										{
+											type: "paragraph",
+											children: [
+												{
+													type: "text",
+													detail: 0,
+													format: 1,
+													mode: "normal",
+													style: "",
+													text: "Disclaimer: ",
+													version: 1,
+												},
+												{
+													type: "text",
+													detail: 0,
+													format: 0,
+													mode: "normal",
+													style: "",
+													text: "This content is fabricated and for demonstration purposes only. To edit this post, ",
+													version: 1,
+												},
+												{
+													type: "link",
+													children: [
+														{
+															type: "text",
+															detail: 0,
+															format: 0,
+															mode: "normal",
+															style: "",
+															text: "navigate to the admin dashboard.",
+															version: 1,
+														},
+													],
+													direction: "ltr",
+													fields: {
+														linkType: "custom",
+														newTab: true,
+														url: "/admin",
+													},
+													format: "",
+													indent: 0,
+													version: 3,
+												},
+											],
+											direction: "ltr",
+											format: "",
+											indent: 0,
+											textFormat: 1,
+											version: 1,
+										},
+									],
+									direction: "ltr",
+									format: "",
+									indent: 0,
+									version: 1,
+								},
+							},
+							style: "info",
+						},
+						format: "",
+						version: 2,
+					},
+					{
+						type: "heading",
+						children: [
+							{
+								type: "text",
+								detail: 0,
+								format: 0,
+								mode: "normal",
+								style: "",
+								text: "Money isn't just currency; ",
+								version: 1,
+							},
+							{
+								type: "text",
+								detail: 0,
+								format: 2,
+								mode: "normal",
+								style: "",
+								text: "it's a language. ",
+								version: 1,
+							},
+							{
+								type: "text",
+								detail: 0,
+								format: 0,
+								mode: "normal",
+								style: "",
+								text: "Dive deep into its nuances, where strategy meets intuition in the vast sea of finance.",
+								version: 1,
+							},
+						],
+						direction: "ltr",
+						format: "",
+						indent: 0,
+						tag: "h2",
+						version: 1,
+					},
+					{
+						type: "paragraph",
+						children: [
+							{
+								type: "text",
+								detail: 0,
+								format: 0,
+								mode: "normal",
+								style: "",
+								text: "Money, in its essence, transcends the mere concept of coins and paper notes; it becomes a profound language that speaks of value, trust, and societal structures. Like any language, it possesses intricate nuances and subtleties that require a discerning understanding. It's in these depths where the calculated world of financial strategy collides with the raw, instinctive nature of human intuition. Just as a seasoned linguist might dissect the syntax and semantics of a sentence, a financial expert navigates the vast and tumultuous ocean of finance, guided not only by logic and data but also by gut feelings and foresight. Every transaction, investment, and financial decision becomes a dialogue in this expansive lexicon of commerce and value.",
+								version: 1,
+							},
+						],
+						direction: "ltr",
+						format: "",
+						indent: 0,
+						textFormat: 0,
+						version: 1,
+					},
+					{
+						type: "block",
+						fields: {
+							blockName: "",
+							blockType: "mediaBlock",
+							media: blockImage.id,
+						},
+						format: "",
+						version: 2,
+					},
+					{
+						type: "heading",
+						children: [
+							{
+								type: "text",
+								detail: 0,
+								format: 0,
+								mode: "normal",
+								style: "",
+								text: "Stock Market Dynamics: Bulls, Bears, and the Uncertain Middle",
+								version: 1,
+							},
+						],
+						direction: "ltr",
+						format: "",
+						indent: 0,
+						tag: "h2",
+						version: 1,
+					},
+					{
+						type: "paragraph",
+						children: [
+							{
+								type: "text",
+								detail: 0,
+								format: 0,
+								mode: "normal",
+								style: "",
+								text: "The stock market is a realm of vast opportunity but also poses risks. Discover the forces that drive market trends and the strategies employed by top traders to navigate this complex ecosystem. From market analysis to understanding investor psychology, get a comprehensive insight into the world of stocks.",
+								version: 1,
+							},
+						],
+						direction: "ltr",
+						format: "",
+						indent: 0,
+						textFormat: 0,
+						version: 1,
+					},
+					{
+						type: "paragraph",
+						children: [
+							{
+								type: "text",
+								detail: 0,
+								format: 0,
+								mode: "normal",
+								style: "",
+								text: "The stock market, often visualized as a bustling arena of numbers and ticker tapes, is as much about human behavior as it is about economics. It's a place where optimism, represented by the bullish rally, meets the caution of bearish downturns, with each vying to dictate the market's direction. But between these two extremes lies an uncertain middle ground, a zone populated by traders and investors who constantly weigh hope against fear. Successful navigation requires more than just financial acumen; it demands an understanding of collective sentiments and the ability to predict not just market movements, but also the reactions of other market participants. In this intricate dance of numbers and nerves, the most astute players are those who master both the hard data and the soft nuances of human behavior.",
+								version: 1,
+							},
+						],
+						direction: "ltr",
+						format: "",
+						indent: 0,
+						textFormat: 0,
+						version: 1,
+					},
+					{
+						type: "block",
+						fields: {
+							blockName: "Dynamic components",
+							blockType: "banner",
+							content: {
+								root: {
+									type: "root",
+									children: [
+										{
+											type: "paragraph",
+											children: [
+												{
+													type: "text",
+													detail: 0,
+													format: 0,
+													mode: "normal",
+													style: "",
+													text: "This content above is completely dynamic using custom layout building blocks configured in the CMS. This can be anything you'd like from rich text and images, to highly designed, complex components.",
+													version: 1,
+												},
+											],
+											direction: "ltr",
+											format: "",
+											indent: 0,
+											textFormat: 0,
+											version: 1,
+										},
+									],
+									direction: "ltr",
+									format: "",
+									indent: 0,
+									version: 1,
+								},
+							},
+							style: "info",
+						},
+						format: "",
+						version: 2,
+					},
+				],
+				direction: "ltr",
+				format: "",
+				indent: 0,
+				version: 1,
+			},
+		},
+		heroImage: heroImage.id,
+		meta: {
+			description: `Money isn't just currency; it's a language. Dive deep into its nuances, where strategy meets intuition in the vast sea of finance.`,
+			image: heroImage.id,
+			title: "Dollar and Sense: The Financial Forecast",
+		},
+		relatedPosts: [], // this is populated by the seed script
+		title: "Dollar and Sense: The Financial Forecast",
+	}
+}

package/templates/marketing/payload/src/fields/defaultLexical.ts

@@ -0,0 +1,73 @@
+import {
+	AlignFeature,
+	BlockquoteFeature,
+	BoldFeature,
+	ChecklistFeature,
+	EXPERIMENTAL_TableFeature,
+	IndentFeature,
+	InlineCodeFeature,
+	ItalicFeature,
+	LinkFeature,
+	type LinkFields,
+	OrderedListFeature,
+	ParagraphFeature,
+	RelationshipFeature,
+	StrikethroughFeature,
+	SubscriptFeature,
+	SuperscriptFeature,
+	UnderlineFeature,
+	UnorderedListFeature,
+	UploadFeature,
+	lexicalEditor,
+} from "@payloadcms/richtext-lexical"
+import type { TextFieldSingleValidation } from "payload"
+
+export const defaultLexical = lexicalEditor({
+	features: [
+		ParagraphFeature(),
+		UnderlineFeature(),
+		BoldFeature(),
+		ItalicFeature(),
+		StrikethroughFeature(),
+		SubscriptFeature(),
+		SuperscriptFeature(),
+		InlineCodeFeature(),
+		BlockquoteFeature(),
+		UnorderedListFeature(),
+		OrderedListFeature(),
+		ChecklistFeature(),
+		AlignFeature(),
+		IndentFeature(),
+		RelationshipFeature(),
+		UploadFeature(),
+		EXPERIMENTAL_TableFeature(),
+		LinkFeature({
+			enabledCollections: ["pages", "posts"],
+			fields: ({ defaultFields }) => {
+				const defaultFieldsWithoutUrl = defaultFields.filter((field) => {
+					if ("name" in field && field.name === "url") return false
+					return true
+				})
+
+				return [
+					...defaultFieldsWithoutUrl,
+					{
+						name: "url",
+						type: "text",
+						admin: {
+							condition: (_data, siblingData) => siblingData?.linkType !== "internal",
+						},
+						label: ({ t }) => t("fields:enterURL"),
+						required: true,
+						validate: ((value, options) => {
+							if ((options?.siblingData as LinkFields)?.linkType === "internal") {
+								return true // no validation needed, as no url should exist for internal links
+							}
+							return value ? true : "URL is required"
+						}) as TextFieldSingleValidation,
+					},
+				]
+			},
+		}),
+	],
+})

package/templates/marketing/payload/src/fields/link.ts

@@ -0,0 +1,139 @@
+import type { Field, GroupField } from "payload"
+
+import deepMerge from "@/utilities/deepMerge"
+
+export type LinkAppearances = "default" | "outline"
+
+export const appearanceOptions: Record<LinkAppearances, { label: string; value: string }> = {
+	default: {
+		label: "Default",
+		value: "default",
+	},
+	outline: {
+		label: "Outline",
+		value: "outline",
+	},
+}
+
+type LinkType = (options?: {
+	appearances?: LinkAppearances[] | false
+	disableLabel?: boolean
+	overrides?: Partial<GroupField>
+}) => Field
+
+export const link: LinkType = ({ appearances, disableLabel = false, overrides = {} } = {}) => {
+	const linkResult: GroupField = {
+		name: "link",
+		type: "group",
+		admin: {
+			hideGutter: true,
+		},
+		fields: [
+			{
+				type: "row",
+				fields: [
+					{
+						name: "type",
+						type: "radio",
+						admin: {
+							layout: "horizontal",
+							width: "50%",
+						},
+						defaultValue: "reference",
+						options: [
+							{
+								label: "Internal link",
+								value: "reference",
+							},
+							{
+								label: "Custom URL",
+								value: "custom",
+							},
+						],
+					},
+					{
+						name: "newTab",
+						type: "checkbox",
+						admin: {
+							style: {
+								alignSelf: "flex-end",
+							},
+							width: "50%",
+						},
+						label: "Open in new tab",
+					},
+				],
+			},
+		],
+	}
+
+	const linkTypes: Field[] = [
+		{
+			name: "reference",
+			type: "relationship",
+			admin: {
+				condition: (_, siblingData) => siblingData?.type === "reference",
+			},
+			label: "Document to link to",
+			relationTo: ["pages", "posts"],
+			required: true,
+		},
+		{
+			name: "url",
+			type: "text",
+			admin: {
+				condition: (_, siblingData) => siblingData?.type === "custom",
+			},
+			label: "Custom URL",
+			required: true,
+		},
+	]
+
+	if (!disableLabel) {
+		linkTypes.map((linkType) => ({
+			...linkType,
+			admin: {
+				...linkType.admin,
+				width: "50%",
+			},
+		}))
+
+		linkResult.fields.push({
+			type: "row",
+			fields: [
+				...linkTypes,
+				{
+					name: "label",
+					type: "text",
+					admin: {
+						width: "50%",
+					},
+					label: "Label",
+					required: true,
+				},
+			],
+		})
+	} else {
+		linkResult.fields = [...linkResult.fields, ...linkTypes]
+	}
+
+	if (appearances !== false) {
+		let appearanceOptionsToUse = [appearanceOptions.default, appearanceOptions.outline]
+
+		if (appearances) {
+			appearanceOptionsToUse = appearances.map((appearance) => appearanceOptions[appearance])
+		}
+
+		linkResult.fields.push({
+			name: "appearance",
+			type: "select",
+			admin: {
+				description: "Choose how the link should be rendered.",
+			},
+			defaultValue: "default",
+			options: appearanceOptionsToUse,
+		})
+	}
+
+	return deepMerge(linkResult, overrides)
+}

package/templates/marketing/payload/src/fields/linkGroup.ts

@@ -0,0 +1,28 @@
+import type { ArrayField, Field } from "payload"
+
+import type { LinkAppearances } from "./link"
+
+import deepMerge from "@/utilities/deepMerge"
+import { link } from "./link"
+
+type LinkGroupType = (options?: {
+	appearances?: LinkAppearances[] | false
+	overrides?: Partial<ArrayField>
+}) => Field
+
+export const linkGroup: LinkGroupType = ({ appearances, overrides = {} } = {}) => {
+	const generatedLinkGroup: Field = {
+		name: "links",
+		type: "array",
+		fields: [
+			link({
+				appearances,
+			}),
+		],
+		admin: {
+			initCollapsed: true,
+		},
+	}
+
+	return deepMerge(generatedLinkGroup, overrides)
+}

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

@@ -0,0 +1,56 @@
+"use client"
+import { useHeaderTheme } from "@/providers/HeaderTheme"
+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"
+
+export const HighImpactHero: React.FC<Page["hero"]> = ({ links, media, richText }) => {
+	const { setHeaderTheme } = useHeaderTheme()
+
+	useEffect(() => {
+		setHeaderTheme("dark")
+	})
+
+	return (
+		<div
+			className="relative -mt-[10.4rem] flex items-center justify-center text-white"
+			data-theme="dark"
+		>
+			<div className="container mx-auto px-4 z-10 relative flex items-center justify-center py-32 md:py-40">
+				<div className="max-w-4xl text-center hero-content hero-content--dark">
+					{richText && (
+						<RichText className="mb-8" data={richText} enableGutter={false} enableProse={false} />
+					)}
+					{Array.isArray(links) && links.length > 0 && (
+						<ul className="flex flex-wrap justify-center gap-4">
+							{links.map(({ link }, i) => {
+								return (
+									// biome-ignore lint/suspicious/noArrayIndexKey: CMS links don't have stable IDs
+									<li key={i}>
+										<CTATracker location="hero_high_impact" variant={link?.label || `cta_${i}`}>
+											<CMSLink {...link} size="lg" />
+										</CTATracker>
+									</li>
+								)
+							})}
+						</ul>
+					)}
+				</div>
+			</div>
+			<div className="absolute inset-0 min-h-[80vh] select-none">
+				{media && typeof media === "object" && (
+					<>
+						<Media fill imgClassName="object-cover" priority resource={media} size="100vw" />
+						<div className="absolute inset-0 bg-black/60" />
+					</>
+				)}
+			</div>
+		</div>
+	)
+}

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

@@ -0,0 +1,48 @@
+import type React from "react"
+
+import type { Page } from "@/payload-types"
+
+import { CMSLink } from "@/components/Link"
+import RichText from "@/components/RichText"
+
+type LowImpactHeroType =
+	| {
+			children?: React.ReactNode
+			richText?: never
+			links?: never
+	  }
+	| (Omit<Page["hero"], "richText"> & {
+			children?: never
+			richText?: Page["hero"]["richText"]
+	  })
+
+export const LowImpactHero: React.FC<LowImpactHeroType> = ({ children, richText, links }) => {
+	return (
+		<div className="py-20 md:py-32">
+			<div className="container mx-auto px-4">
+				<div className="text-center max-w-4xl mx-auto">
+					{children ||
+						(richText && (
+							<RichText
+								className="mb-8 hero-content"
+								data={richText}
+								enableGutter={false}
+								enableProse={false}
+							/>
+						))}
+					{Array.isArray(links) && links.length > 0 && (
+						<ul className="flex flex-wrap justify-center gap-4">
+							{links.map(({ link }, i) => {
+								return (
+									<li key={i}>
+										<CMSLink {...link} size="lg" />
+									</li>
+								)
+							})}
+						</ul>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}

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

@@ -0,0 +1,50 @@
+"use client"
+
+import type React 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"
+
+export const MediumImpactHero: React.FC<Page["hero"]> = ({ links, media, richText }) => {
+	return (
+		<div className="py-20 md:py-28">
+			<div className="container mx-auto px-4">
+				<div className="text-center max-w-4xl mx-auto mb-12 hero-content">
+					{richText && (
+						<RichText className="mb-8" data={richText} enableGutter={false} enableProse={false} />
+					)}
+
+					{Array.isArray(links) && links.length > 0 && (
+						<ul className="flex flex-wrap justify-center gap-4">
+							{links.map(({ link }, i) => {
+								return (
+									// biome-ignore lint/suspicious/noArrayIndexKey: CMS links don't have stable IDs
+									<li key={i}>
+										<CTATracker location="hero_medium_impact" variant={link?.label || `cta_${i}`}>
+											<CMSLink {...link} size="lg" />
+										</CTATracker>
+									</li>
+								)
+							})}
+						</ul>
+					)}
+				</div>
+
+				{media && typeof media === "object" && (
+					<div className="rounded-xl overflow-hidden border border-border shadow-2xl">
+						<Media imgClassName="w-full" priority resource={media} />
+						{media?.caption && (
+							<div className="mt-3 text-center">
+								<RichText data={media.caption} enableGutter={false} />
+							</div>
+						)}
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}