npm - kofi-stack-template-generator - Versions diffs - 2.1.36 → 2.1.38 - Mend

kofi-stack-template-generator 2.1.36 → 2.1.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (324) hide show

package/templates/marketing/payload/src/app/(frontend)/layout.tsx ADDED Viewed

@@ -0,0 +1,114 @@
+import type { Metadata } from "next"
+import { cn } from "@/utilities/ui"
+import { GeistMono } from "geist/font/mono"
+import { Inter } from "next/font/google"
+import type React from "react"
+import { Footer } from "@/Footer/Component"
+import { Header } from "@/Header/Component"
+import { AdminBar } from "@/components/AdminBar"
+import { JsonLdSchemas } from "@/components/JsonLd"
+import { Providers } from "@/providers"
+import { InitTheme } from "@/providers/Theme/InitTheme"
+import { mergeOpenGraph } from "@/utilities/mergeOpenGraph"
+import { draftMode } from "next/headers"
+import { getServerSideURL } from "@/utilities/getURL"
+import "./globals.css"
+const inter = Inter({
+	subsets: ["latin"],
+	variable: "--font-inter",
+	display: "swap",
+})
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+	const { isEnabled } = await draftMode()
+	return (
+		<html className={cn(inter.variable, GeistMono.variable)} lang="en" suppressHydrationWarning>
+			<head>
+				<InitTheme />
+				{/* Favicon */}
+				<link href="/favicon.ico" rel="icon" sizes="32x32" />
+				<link href="/favicon.svg" rel="icon" type="image/svg+xml" />
+				{/* Preconnect to external resources for performance */}
+				<link rel="preconnect" href="https://fonts.googleapis.com" />
+				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+				{/* Preconnect to PostHog proxy for faster analytics initialization */}
+				<link rel="preconnect" href="/ingest" />
+				{/* DNS prefetch for common external services */}
+				<link rel="dns-prefetch" href="https://www.google-analytics.com" />
+				<link rel="dns-prefetch" href="https://www.googletagmanager.com" />
+				{/* JSON-LD Structured Data */}
+				<JsonLdSchemas />
+			</head>
+			<body className="font-sans antialiased" suppressHydrationWarning>
+				<Providers>
+					<AdminBar
+						adminBarProps={{
+							preview: isEnabled,
+						}}
+					/>
+					<Header />
+					<main id="main-content" className="flex-1">
+						{children}
+					</main>
+					<Footer />
+				</Providers>
+			</body>
+		</html>
+	)
+}
+export const metadata: Metadata = {
+	metadataBase: new URL(getServerSideURL()),
+	title: {
+		default: "DirectoryHub - Build Directories That Generate Real Business",
+		template: "%s | DirectoryHub",
+	},
+	description:
+		"Launch a profitable directory business in minutes. The no-code platform to build, manage, and monetize niche directory websites.",
+	keywords: [
+		"directory builder",
+		"no-code directory",
+		"directory website",
+		"niche directory",
+		"business directory software",
+		"directory platform",
+		"monetize directory",
+	],
+	authors: [{ name: "DirectoryHub", url: getServerSideURL() }],
+	creator: "DirectoryHub",
+	publisher: "DirectoryHub",
+	robots: {
+		index: true,
+		follow: true,
+		googleBot: {
+			index: true,
+			follow: true,
+			"max-video-preview": -1,
+			"max-image-preview": "large",
+			"max-snippet": -1,
+		},
+	},
+	openGraph: mergeOpenGraph(),
+	twitter: {
+		card: "summary_large_image",
+		creator: "@directoryhub",
+		site: "@directoryhub",
+		title: "DirectoryHub - Build Directories That Generate Real Business",
+		description:
+			"Launch a profitable directory business in minutes. The no-code platform to build, manage, and monetize niche directory websites.",
+	},
+	verification: {
+		// Add your verification codes here when available
+		// google: 'your-google-verification-code',
+		// yandex: 'your-yandex-verification-code',
+	},
+}

package/templates/marketing/payload/src/app/(frontend)/next/exit-preview/route.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { draftMode } from "next/headers"
+export async function GET(): Promise<Response> {
+	const draft = await draftMode()
+	draft.disable()
+	return new Response("Draft mode is disabled")
+}

package/templates/marketing/payload/src/app/(frontend)/next/preview/route.ts ADDED Viewed

@@ -0,0 +1,56 @@
+import type { CollectionSlug, PayloadRequest } from "payload"
+import { getPayload } from "payload"
+import { draftMode } from "next/headers"
+import { redirect } from "next/navigation"
+import type { NextRequest } from "next/server"
+import configPromise from "@payload-config"
+export async function GET(req: NextRequest): Promise<Response> {
+	const payload = await getPayload({ config: configPromise })
+	const { searchParams } = new URL(req.url)
+	const path = searchParams.get("path")
+	const collection = searchParams.get("collection") as CollectionSlug
+	const slug = searchParams.get("slug")
+	const previewSecret = searchParams.get("previewSecret")
+	if (previewSecret !== process.env.PREVIEW_SECRET) {
+		return new Response("You are not allowed to preview this page", { status: 403 })
+	}
+	if (!path || !collection || !slug) {
+		return new Response("Insufficient search params", { status: 404 })
+	}
+	if (!path.startsWith("/")) {
+		return new Response("This endpoint can only be used for relative previews", { status: 500 })
+	}
+	let user
+	try {
+		user = await payload.auth({
+			req: req as unknown as PayloadRequest,
+			headers: req.headers,
+		})
+	} catch (error) {
+		payload.logger.error({ err: error }, "Error verifying token for live preview")
+		return new Response("You are not allowed to preview this page", { status: 403 })
+	}
+	const draft = await draftMode()
+	if (!user) {
+		draft.disable()
+		return new Response("You are not allowed to preview this page", { status: 403 })
+	}
+	// You can add additional checks here to see if the user is allowed to preview this page
+	draft.enable()
+	redirect(path)
+}

package/templates/marketing/payload/src/app/(frontend)/next/seed/route.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import { seed } from "@/endpoints/seed"
+import config from "@payload-config"
+import { headers } from "next/headers"
+import { createLocalReq, getPayload } from "payload"
+export const maxDuration = 60 // This function can run for a maximum of 60 seconds
+export async function POST(): Promise<Response> {
+	const payload = await getPayload({ config })
+	const requestHeaders = await headers()
+	// Authenticate by passing request headers
+	const { user } = await payload.auth({ headers: requestHeaders })
+	if (!user) {
+		return new Response("Action forbidden.", { status: 403 })
+	}
+	try {
+		// Create a Payload request object to pass to the Local API for transactions
+		// At this point you should pass in a user, locale, and any other context you need for the Local API
+		const payloadReq = await createLocalReq({ user }, payload)
+		await seed({ payload, req: payloadReq })
+		return Response.json({ success: true })
+	} catch (e) {
+		payload.logger.error({ err: e, message: "Error seeding data" })
+		return new Response("Error seeding data.", { status: 500 })
+	}
+}

package/templates/marketing/payload/src/app/(frontend)/not-found.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+export default function NotFound() {
+	return (
+		<div className="container py-28">
+			<div className="prose max-w-none">
+				<h1 style={{ marginBottom: 0 }}>404</h1>
+				<p className="mb-4">This page could not be found.</p>
+			</div>
+			<Button asChild variant="default">
+				<Link href="/">Go home</Link>
+			</Button>
+		</div>
+	)
+}

package/templates/marketing/payload/src/app/(frontend)/page.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import PageTemplate, { generateMetadata } from "./[slug]/page"
+export default PageTemplate
+export { generateMetadata }

package/templates/marketing/payload/src/app/(frontend)/posts/BlogPageClient.tsx ADDED Viewed

@@ -0,0 +1,190 @@
+"use client"
+import { Card, type CardPostData } from "@/components/Card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import type { Category } from "@/payload-types"
+import { useHeaderTheme } from "@/providers/HeaderTheme"
+import { Search, X } from "lucide-react"
+import { useEffect, useMemo, useState } from "react"
+interface BlogPageClientProps {
+	initialPosts: CardPostData[]
+	categories: Category[]
+	totalPosts: number
+}
+export const BlogPageClient: React.FC<BlogPageClientProps> = ({
+	initialPosts,
+	categories,
+	totalPosts,
+}) => {
+	const { setHeaderTheme } = useHeaderTheme()
+	const [searchQuery, setSearchQuery] = useState("")
+	const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
+	useEffect(() => {
+		setHeaderTheme("light")
+	}, [setHeaderTheme])
+	// Filter posts based on search query and selected category
+	const filteredPosts = useMemo(() => {
+		return initialPosts.filter((post) => {
+			// Search filter
+			const matchesSearch =
+				searchQuery === "" ||
+				post.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+				post.meta?.description?.toLowerCase().includes(searchQuery.toLowerCase())
+			// Category filter
+			const matchesCategory =
+				!selectedCategory ||
+				(Array.isArray(post.categories) &&
+					post.categories.some((cat) => {
+						if (typeof cat === "object" && cat !== null) {
+							return String(cat.id) === selectedCategory
+						}
+						return String(cat) === selectedCategory
+					}))
+			return matchesSearch && matchesCategory
+		})
+	}, [initialPosts, searchQuery, selectedCategory])
+	// Get featured post (first post when no filters)
+	const featuredPost = searchQuery === "" && !selectedCategory ? filteredPosts[0] : null
+	const regularPosts = featuredPost ? filteredPosts.slice(1) : filteredPosts
+	const clearFilters = () => {
+		setSearchQuery("")
+		setSelectedCategory(null)
+	}
+	const hasActiveFilters = searchQuery !== "" || selectedCategory !== null
+	return (
+		<div className="pt-24 pb-24">
+			{/* Hero Section */}
+			<div className="container mb-12">
+				<div className="max-w-4xl">
+					<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-4">
+						Blog & Resources
+					</h1>
+					<p className="text-lg md:text-xl text-muted-foreground mb-8">
+						Learn how to build, grow, and monetize directory websites. Strategies, tutorials, and
+						success stories to help you succeed.
+					</p>
+					{/* Search Bar */}
+					<div className="relative max-w-xl">
+						<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+						<Input
+							type="text"
+							placeholder="Search articles..."
+							value={searchQuery}
+							onChange={(e) => setSearchQuery(e.target.value)}
+							className="pl-10 pr-10 h-12 text-base"
+						/>
+						{searchQuery && (
+							<button
+								type="button"
+								onClick={() => setSearchQuery("")}
+								className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+								aria-label="Clear search"
+							>
+								<X className="h-5 w-5" aria-hidden="true" />
+							</button>
+						)}
+					</div>
+				</div>
+			</div>
+			{/* Category Filters */}
+			<div className="container mb-8">
+				<div className="flex flex-wrap gap-2">
+					<Button
+						variant={selectedCategory === null ? "default" : "outline"}
+						size="sm"
+						onClick={() => setSelectedCategory(null)}
+					>
+						All Posts
+					</Button>
+					{categories.map((category) => (
+						<Button
+							type="button"
+							key={category.id}
+							variant={selectedCategory === String(category.id) ? "default" : "outline"}
+							size="sm"
+							onClick={() => setSelectedCategory(String(category.id))}
+						>
+							{category.title}
+						</Button>
+					))}
+				</div>
+			</div>
+			{/* Results Count & Clear Filters */}
+			<div className="container mb-8">
+				<div className="flex items-center justify-between">
+					<p className="text-sm text-muted-foreground">
+						{hasActiveFilters ? (
+							<>
+								Showing {filteredPosts.length} of {totalPosts} articles
+							</>
+						) : (
+							<>{totalPosts} articles</>
+						)}
+					</p>
+					{hasActiveFilters && (
+						<Button variant="ghost" size="sm" onClick={clearFilters}>
+							Clear filters
+						</Button>
+					)}
+				</div>
+			</div>
+			{/* Featured Post */}
+			{featuredPost && (
+				<div className="container mb-12">
+					<div className="relative">
+						<span className="absolute -top-3 left-4 bg-primary text-primary-foreground text-xs font-medium px-2 py-1 rounded z-10">
+							Featured
+						</span>
+						<Card
+							doc={featuredPost}
+							relationTo="posts"
+							showCategories
+							className="lg:grid lg:grid-cols-2 lg:gap-8"
+						/>
+					</div>
+				</div>
+			)}
+			{/* Posts Grid */}
+			<div className="container">
+				{regularPosts.length > 0 ? (
+					<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
+						{regularPosts.map((post, index) => (
+							<Card
+								key={post.slug || index}
+								doc={post}
+								relationTo="posts"
+								showCategories
+								className="h-full"
+							/>
+						))}
+					</div>
+				) : (
+					<div className="text-center py-16">
+						<p className="text-lg text-muted-foreground mb-4">
+							No articles found matching your criteria.
+						</p>
+						<Button variant="outline" onClick={clearFilters}>
+							Clear filters
+						</Button>
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}

package/templates/marketing/payload/src/app/(frontend)/posts/[slug]/BlogPostContent.tsx ADDED Viewed

@@ -0,0 +1,67 @@
+"use client"
+import type { HeadingItem } from "@/utilities/extractHeadings"
+import type { DefaultTypedEditorState } from "@payloadcms/richtext-lexical"
+import RichText from "@/components/RichText"
+import { TableOfContents } from "@/components/TableOfContents"
+import { slugify } from "@/utilities/extractHeadings"
+import { useEffect, useRef } from "react"
+interface BlogPostContentProps {
+	content: DefaultTypedEditorState
+	headings: HeadingItem[]
+}
+export function BlogPostContent({ content, headings }: BlogPostContentProps) {
+	const contentRef = useRef<HTMLDivElement>(null)
+	// Add IDs to headings after mount for TOC linking
+	useEffect(() => {
+		if (!contentRef.current) return
+		const headingElements = contentRef.current.querySelectorAll("h1, h2, h3, h4, h5, h6")
+		for (const heading of headingElements) {
+			const text = heading.textContent || ""
+			const id = slugify(text)
+			if (!heading.id) {
+				heading.id = id
+			}
+		}
+	}, [])
+	return (
+		<div className="container py-12">
+			<div className="flex flex-col lg:flex-row gap-8 lg:gap-12">
+				{/* Sticky TOC Sidebar - Hidden on mobile */}
+				<aside className="hidden lg:block lg:w-64 xl:w-72 flex-shrink-0">
+					<div className="sticky top-24">
+						<TableOfContents
+							headings={headings}
+							signUpCta={{
+								title: "Experience DirectoryHub",
+								description: "Start building your directory today",
+								buttonText: "Sign up for free",
+								buttonLink: "https://app.directoryhub.app/sign-up",
+								imageSrc: "/media/hero-dashboard-500x500.webp",
+								imageAlt: "DirectoryHub dashboard feature",
+							}}
+						/>
+					</div>
+				</aside>
+				{/* Main Content */}
+				<main className="flex-1 min-w-0" ref={contentRef}>
+					{content && (
+						<RichText
+							className="max-w-none prose-headings:scroll-mt-24"
+							data={content}
+							enableGutter={false}
+							enableProse={true}
+						/>
+					)}
+				</main>
+			</div>
+		</div>
+	)
+}

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

@@ -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("dark")
+	}, [setHeaderTheme])
+	return <React.Fragment />
+}
+export default PageClient

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

@@ -0,0 +1,118 @@
+import type { Metadata } from "next"
+import { RelatedPosts } from "@/blocks/RelatedPosts/Component"
+import { BlogCTA } from "@/components/BlogCTA"
+import { PayloadRedirects } from "@/components/PayloadRedirects"
+import configPromise from "@payload-config"
+import { draftMode } from "next/headers"
+import { getPayload } from "payload"
+import { cache } from "react"
+import { LivePreviewListener } from "@/components/LivePreviewListener"
+import { PostHero } from "@/heros/PostHero"
+import { extractHeadingsFromLexical } from "@/utilities/extractHeadings"
+import { generateMeta } from "@/utilities/generateMeta"
+import { BlogPostContent } from "./BlogPostContent"
+import PageClient from "./page.client"
+export async function generateStaticParams() {
+	const payload = await getPayload({ config: configPromise })
+	const posts = await payload.find({
+		collection: "posts",
+		draft: false,
+		limit: 1000,
+		overrideAccess: false,
+		pagination: false,
+		select: {
+			slug: true,
+		},
+	})
+	const params = posts.docs.map(({ slug }) => {
+		return { slug }
+	})
+	return params
+}
+type Args = {
+	params: Promise<{
+		slug?: string
+	}>
+}
+export default async function Post({ params: paramsPromise }: Args) {
+	const { isEnabled: draft } = await draftMode()
+	const { slug = "" } = await paramsPromise
+	// Decode to support slugs with special characters
+	const decodedSlug = decodeURIComponent(slug)
+	const url = `/posts/${decodedSlug}`
+	const post = await queryPostBySlug({ slug: decodedSlug })
+	if (!post) return <PayloadRedirects url={url} />
+	// Extract headings for table of contents
+	const headings = extractHeadingsFromLexical(post.content)
+	return (
+		<article className="pb-0">
+			<PageClient />
+			{/* Allows redirects for valid pages too */}
+			<PayloadRedirects disableNotFound url={url} />
+			{draft && <LivePreviewListener />}
+			{/* Hero Section */}
+			<PostHero post={post} />
+			{/* Two-column layout with TOC and content */}
+			<BlogPostContent content={post.content} headings={headings} />
+			{/* Related Posts */}
+			{post.relatedPosts && post.relatedPosts.length > 0 && (
+				<div className="container py-12 border-t border-border">
+					<h2 className="text-2xl font-bold mb-8">Related Articles</h2>
+					<RelatedPosts
+						className="max-w-none"
+						docs={post.relatedPosts.filter((post) => typeof post === "object")}
+					/>
+				</div>
+			)}
+			{/* Bottom CTA */}
+			<BlogCTA />
+		</article>
+	)
+}
+export async function generateMetadata({ params: paramsPromise }: Args): Promise<Metadata> {
+	const { slug = "" } = await paramsPromise
+	// Decode to support slugs with special characters
+	const decodedSlug = decodeURIComponent(slug)
+	const post = await queryPostBySlug({ slug: decodedSlug })
+	return generateMeta({ doc: post })
+}
+const queryPostBySlug = cache(async ({ slug }: { slug: string }) => {
+	const { isEnabled: draft } = await draftMode()
+	const payload = await getPayload({ config: configPromise })
+	const result = await payload.find({
+		collection: "posts",
+		depth: 2, // Populate relationships in rich text content
+		draft,
+		limit: 1,
+		overrideAccess: draft,
+		pagination: false,
+		where: {
+			slug: {
+				equals: slug,
+			},
+		},
+	})
+	return result.docs?.[0] || null
+})

package/templates/marketing/payload/src/app/(frontend)/posts/page/[pageNumber]/page.client.tsx ADDED Viewed

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