kofi-stack-template-generator 2.1.27 → 2.1.28

package/templates/marketing/payload/src/collections/Users/index.ts.hbs

@@ -0,0 +1,26 @@
+import type { CollectionConfig } from "payload"
+
+import { authenticated } from "../../access/authenticated"
+
+export const Users: CollectionConfig = {
+  slug: "users",
+  access: {
+    admin: authenticated,
+    create: authenticated,
+    delete: authenticated,
+    read: authenticated,
+    update: authenticated,
+  },
+  admin: {
+    defaultColumns: ["name", "email"],
+    useAsTitle: "name",
+  },
+  auth: true,
+  fields: [
+    {
+      name: "name",
+      type: "text",
+    },
+  ],
+  timestamps: true,
+}

package/templates/marketing/payload/src/collections/index.ts.hbs

@@ -1,4 +1,6 @@
-export { Users } from './Users'
-export { Media } from './Media'
-export { Pages } from './Pages'
-export { Posts } from './Posts'
+export { Users } from "./Users"
+export { Media } from "./Media"
+export { Pages } from "./Pages"
+export { Posts } from "./Posts"
+export { Categories } from "./Categories"
+export { FAQs } from "./FAQs"

package/templates/marketing/payload/src/components/BeforeDashboard/SeedButton/index.scss.hbs

@@ -0,0 +1,12 @@
+.seedButton {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  text-decoration: underline;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.85;
+  }
+}

package/templates/marketing/payload/src/components/BeforeDashboard/SeedButton/index.tsx.hbs

@@ -0,0 +1,89 @@
+"use client"
+
+import { toast } from "@payloadcms/ui"
+import type React from "react"
+import { Fragment, useCallback, useState } from "react"
+
+import "./index.scss"
+
+const SuccessMessage: React.FC = () => (
+  <div>
+    Database seeded! You can now{" "}
+    <a target="_blank" href="/" rel="noreferrer">
+      visit your website
+    </a>
+  </div>
+)
+
+export const SeedButton: React.FC = () => {
+  const [loading, setLoading] = useState(false)
+  const [seeded, setSeeded] = useState(false)
+  const [error, setError] = useState<null | string>(null)
+
+  const handleClick = useCallback(
+    async (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault()
+
+      if (seeded) {
+        toast.info("Database already seeded.")
+        return
+      }
+      if (loading) {
+        toast.info("Seeding already in progress.")
+        return
+      }
+      if (error) {
+        toast.error(`An error occurred, please refresh and try again.`)
+        return
+      }
+
+      setLoading(true)
+
+      try {
+        toast.promise(
+          new Promise((resolve, reject) => {
+            try {
+              fetch("/next/seed", { method: "POST", credentials: "include" })
+                .then((res) => {
+                  if (res.ok) {
+                    resolve(true)
+                    setSeeded(true)
+                  } else {
+                    reject("An error occurred while seeding.")
+                  }
+                })
+                .catch((error) => {
+                  reject(error)
+                })
+            } catch (error) {
+              reject(error)
+            }
+          }),
+          {
+            loading: "Seeding with data....",
+            success: <SuccessMessage />,
+            error: "An error occurred while seeding.",
+          },
+        )
+      } catch (err) {
+        const error = err instanceof Error ? err.message : String(err)
+        setError(error)
+      }
+    },
+    [loading, seeded, error],
+  )
+
+  let message = ""
+  if (loading) message = " (seeding...)"
+  if (seeded) message = " (done!)"
+  if (error) message = ` (error: ${error})`
+
+  return (
+    <Fragment>
+      <button className="seedButton" onClick={handleClick}>
+        Seed your database
+      </button>
+      {message}
+    </Fragment>
+  )
+}

package/templates/marketing/payload/src/components/BeforeDashboard/index.scss.hbs

@@ -0,0 +1,24 @@
+@import '~@payloadcms/ui/scss';
+
+.dashboard .before-dashboard {
+  margin-bottom: base(1.5);
+
+  &__banner {
+    & h4 {
+      margin: 0;
+    }
+  }
+
+  &__instructions {
+    list-style: decimal;
+    margin-bottom: base(0.5);
+
+    & li {
+      width: 100%;
+    }
+  }
+
+  & a:hover {
+    opacity: 0.85;
+  }
+}

package/templates/marketing/payload/src/components/BeforeDashboard/index.tsx.hbs

@@ -0,0 +1,69 @@
+import { Banner } from "@payloadcms/ui/elements/Banner"
+import type React from "react"
+
+import { SeedButton } from "./SeedButton"
+import "./index.scss"
+
+const baseClass = "before-dashboard"
+
+const BeforeDashboard: React.FC = () => {
+  return (
+    <div className={baseClass}>
+      <Banner className={`${baseClass}__banner`} type="success">
+        <h4>Welcome to your dashboard!</h4>
+      </Banner>
+      Here&apos;s what to do next:
+      <ul className={`${baseClass}__instructions`}>
+        <li>
+          <SeedButton />
+          {" with a few pages and posts to jump-start your new site, then "}
+          <a href="/" target="_blank" rel="noreferrer">
+            visit your website
+          </a>
+          {" to see the results."}
+        </li>
+        <li>
+          {"Modify your "}
+          <a
+            href="https://payloadcms.com/docs/configuration/collections"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            collections
+          </a>
+          {" and add more "}
+          <a
+            href="https://payloadcms.com/docs/fields/overview"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            fields
+          </a>
+          {" as needed. If you are new to Payload, we also recommend you check out the "}
+          <a
+            href="https://payloadcms.com/docs/getting-started/what-is-payload"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Getting Started
+          </a>
+          {" docs."}
+        </li>
+        <li>
+          Commit and push your changes to the repository to trigger a redeployment of your project.
+        </li>
+      </ul>
+      {"Pro Tip: This block is a "}
+      <a
+        href="https://payloadcms.com/docs/custom-components/overview"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        custom component
+      </a>
+      , you can remove it at any time by updating your <strong>payload.config</strong>.
+    </div>
+  )
+}
+
+export default BeforeDashboard

package/templates/marketing/payload/src/components/BeforeLogin/index.tsx.hbs

@@ -0,0 +1,14 @@
+import type React from "react"
+
+const BeforeLogin: React.FC = () => {
+  return (
+    <div>
+      <p>
+        <b>Welcome to your dashboard!</b>
+        {" This is where site admins will log in to manage your website."}
+      </p>
+    </div>
+  )
+}
+
+export default BeforeLogin

package/templates/marketing/payload/src/components/Link/index.tsx.hbs

@@ -0,0 +1,79 @@
+import { cn } from "@/lib/utils"
+import Link from "next/link"
+import type React from "react"
+
+import type { Page, Post } from "@/payload-types"
+
+type CMSLinkType = {
+  appearance?: "inline" | "default" | "outline" | "link"
+  children?: React.ReactNode
+  className?: string
+  label?: string | null
+  newTab?: boolean | null
+  reference?: {
+    relationTo: "pages" | "posts"
+    value: Page | Post | string | number
+  } | null
+  size?: "default" | "sm" | "lg" | null
+  type?: "custom" | "reference" | null
+  url?: string | null
+}
+
+export const CMSLink: React.FC<CMSLinkType> = (props) => {
+  const {
+    type,
+    appearance = "inline",
+    children,
+    className,
+    label,
+    newTab,
+    reference,
+    size = "default",
+    url,
+  } = props
+
+  const href =
+    type === "reference" && typeof reference?.value === "object" && reference.value.slug
+      ? `${reference?.relationTo !== "pages" ? `/${reference?.relationTo}` : ""}/${
+          reference.value.slug
+        }`
+      : url
+
+  if (!href) return null
+
+  const newTabProps = newTab ? { rel: "noopener noreferrer", target: "_blank" } : {}
+
+  // Size classes
+  const sizeClasses = {
+    default: "px-4 py-2",
+    sm: "px-3 py-1 text-sm",
+    lg: "px-6 py-3 text-lg",
+  }
+
+  // Appearance classes
+  const appearanceClasses = {
+    inline: "",
+    default: cn(
+      "inline-flex items-center justify-center rounded-md font-medium transition-colors",
+      "bg-primary text-primary-foreground hover:bg-primary/90",
+      sizeClasses[size || "default"]
+    ),
+    outline: cn(
+      "inline-flex items-center justify-center rounded-md font-medium transition-colors",
+      "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+      sizeClasses[size || "default"]
+    ),
+    link: "underline-offset-4 hover:underline",
+  }
+
+  return (
+    <Link
+      className={cn(appearanceClasses[appearance], className)}
+      href={href || url || ""}
+      {...newTabProps}
+    >
+      {label && label}
+      {children && children}
+    </Link>
+  )
+}

package/templates/marketing/payload/src/components/Media/index.tsx.hbs

@@ -0,0 +1,67 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import Image from "next/image"
+import type React from "react"
+
+import type { Media as MediaType } from "@/payload-types"
+
+export interface MediaProps {
+  resource?: MediaType | string | number | null
+  alt?: string
+  className?: string
+  imgClassName?: string
+  fill?: boolean
+  priority?: boolean
+  size?: string
+}
+
+export const Media: React.FC<MediaProps> = ({
+  resource,
+  alt: altFromProps,
+  className,
+  imgClassName,
+  fill = false,
+  priority = false,
+  size,
+}) => {
+  // If resource is not an object or is null/undefined, return null
+  if (!resource || typeof resource !== "object") {
+    return null
+  }
+
+  const { url, alt: altFromResource, width, height } = resource
+
+  const alt = altFromProps ?? altFromResource ?? ""
+
+  if (!url) return null
+
+  // Handle fill mode
+  if (fill) {
+    return (
+      <div className={cn("relative", className)}>
+        <Image
+          src={url}
+          alt={alt}
+          fill
+          className={cn("object-cover", imgClassName)}
+          priority={priority}
+          sizes={size || "100vw"}
+        />
+      </div>
+    )
+  }
+
+  // Handle normal mode with width/height
+  return (
+    <Image
+      src={url}
+      alt={alt}
+      width={width || 800}
+      height={height || 600}
+      className={cn(className, imgClassName)}
+      priority={priority}
+      sizes={size}
+    />
+  )
+}

package/templates/marketing/payload/src/components/RichText/index.tsx.hbs

@@ -0,0 +1,44 @@
+import type { DefaultTypedEditorState } from "@payloadcms/richtext-lexical"
+import {
+  RichText as ConvertRichText,
+  type JSXConvertersFunction,
+  LinkJSXConverter,
+} from "@payloadcms/richtext-lexical/react"
+import { cn } from "@/lib/utils"
+import type React from "react"
+
+const jsxConverters: JSXConvertersFunction = ({ defaultConverters }) => ({
+  ...defaultConverters,
+  ...LinkJSXConverter({ internalDocToHref: ({ linkNode }) => {
+    const { value, relationTo } = linkNode.fields.doc || {}
+    if (typeof value !== "object" || !value) return "/"
+    const slug = value.slug
+    return relationTo === "posts" ? `/posts/${slug}` : `/${slug}`
+  }}),
+})
+
+type Props = {
+  data: DefaultTypedEditorState
+  enableGutter?: boolean
+  enableProse?: boolean
+} & React.HTMLAttributes<HTMLDivElement>
+
+export default function RichText(props: Props) {
+  const { className, enableProse = true, enableGutter = true, ...rest } = props
+  return (
+    <ConvertRichText
+      converters={jsxConverters}
+      className={cn(
+        "payload-richtext",
+        {
+          container: enableGutter,
+          "prose prose-lg dark:prose-invert prose-headings:font-bold prose-headings:tracking-tight prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-blockquote:border-l-primary prose-blockquote:not-italic prose-li:marker:text-muted-foreground":
+            enableProse,
+        },
+        !enableGutter && "max-w-none",
+        className,
+      )}
+      {...rest}
+    />
+  )
+}

package/templates/marketing/payload/src/endpoints/seed/home.ts.hbs

@@ -0,0 +1,76 @@
+import type { Media } from "@/payload-types"
+import type { RequiredDataFromCollectionSlug } from "payload"
+
+type HomeArgs = {
+  heroImage: Media
+}
+
+export const home: (args: HomeArgs) => RequiredDataFromCollectionSlug<"pages"> = ({
+  heroImage,
+}) => {
+  return {
+    slug: "home",
+    _status: "published",
+    title: "Home",
+    layout: [
+      {
+        blockType: "hero",
+        heading: "Welcome to {{projectName}}",
+        subheading: "Build something amazing with Payload CMS and Next.js",
+        primaryCta: {
+          label: "Get Started",
+          url: "/posts",
+        },
+        secondaryCta: {
+          label: "Learn More",
+          url: "/contact",
+        },
+      },
+      {
+        blockType: "features",
+        heading: "Core Features",
+        subheading: "Everything you need to build modern websites",
+        features: [
+          {
+            icon: "layout",
+            title: "Page Builder",
+            description: "Create beautiful pages with our flexible block-based editor.",
+          },
+          {
+            icon: "zap",
+            title: "Lightning Fast",
+            description: "Optimized for performance with Next.js and React Server Components.",
+          },
+          {
+            icon: "shield",
+            title: "Secure by Default",
+            description: "Built-in authentication and role-based access control.",
+          },
+          {
+            icon: "database",
+            title: "Flexible Database",
+            description: "Works with MongoDB, PostgreSQL, and other databases.",
+          },
+        ],
+      },
+      {
+        blockType: "cta",
+        heading: "Ready to get started?",
+        subheading: "Start building your next project today.",
+        primaryCta: {
+          label: "View Posts",
+          url: "/posts",
+        },
+        secondaryCta: {
+          label: "Contact Us",
+          url: "/contact",
+        },
+      },
+    ],
+    meta: {
+      description: "Welcome to {{projectName}} - Built with Payload CMS and Next.js",
+      image: heroImage.id,
+      title: "{{projectName}}",
+    },
+  }
+}

package/templates/marketing/payload/src/endpoints/seed/image-1.ts.hbs

@@ -0,0 +1,5 @@
+import type { Media } from "@/payload-types"
+
+export const image1: Omit<Media, "createdAt" | "id" | "updatedAt"> = {
+  alt: "Curving abstract shapes with an orange and blue gradient",
+}

package/templates/marketing/payload/src/endpoints/seed/image-2.ts.hbs

@@ -0,0 +1,5 @@
+import type { Media } from "@/payload-types"
+
+export const image2: Omit<Media, "createdAt" | "id" | "updatedAt"> = {
+  alt: "Stylized 3D rendering of a dark, abstract cosmic landscape",
+}

package/templates/marketing/payload/src/endpoints/seed/image-hero.ts.hbs

@@ -0,0 +1,5 @@
+import type { Media } from "@/payload-types"
+
+export const imageHero: Omit<Media, "createdAt" | "id" | "updatedAt"> = {
+  alt: "Abstract hero image with gradient",
+}