kofi-stack-template-generator 2.1.27 → 2.1.36

package/templates/marketing/payload/src/collections/Pages/hooks/revalidatePage.ts.hbs

@@ -0,0 +1,43 @@
+import type { CollectionAfterChangeHook, CollectionAfterDeleteHook } from "payload"
+
+import { revalidatePath, revalidateTag } from "next/cache"
+
+import type { Page } from "../../../payload-types"
+
+export const revalidatePage: CollectionAfterChangeHook<Page> = ({
+  doc,
+  previousDoc,
+  req: { payload, context },
+}) => {
+  if (!context.disableRevalidate) {
+    if (doc._status === "published") {
+      const path = doc.slug === "home" ? "/" : `/${doc.slug}`
+
+      payload.logger.info(`Revalidating page at path: ${path}`)
+
+      revalidatePath(path)
+      revalidateTag("pages-sitemap")
+    }
+
+    // If the page was previously published, we need to revalidate the old path
+    if (previousDoc?._status === "published" && doc._status !== "published") {
+      const oldPath = previousDoc.slug === "home" ? "/" : `/${previousDoc.slug}`
+
+      payload.logger.info(`Revalidating old page at path: ${oldPath}`)
+
+      revalidatePath(oldPath)
+      revalidateTag("pages-sitemap")
+    }
+  }
+  return doc
+}
+
+export const revalidateDelete: CollectionAfterDeleteHook<Page> = ({ doc, req: { context } }) => {
+  if (!context.disableRevalidate) {
+    const path = doc?.slug === "home" ? "/" : `/${doc?.slug}`
+    revalidatePath(path)
+    revalidateTag("pages-sitemap")
+  }
+
+  return doc
+}

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

@@ -0,0 +1,142 @@
+import type { CollectionConfig } from "payload"
+
+import { slugField } from "payload"
+import { authenticated } from "../../access/authenticated"
+import { authenticatedOrPublished } from "../../access/authenticatedOrPublished"
+import { populatePublishedAt } from "../../hooks/populatePublishedAt"
+import { generatePreviewPath } from "../../utilities/generatePreviewPath"
+import { revalidateDelete, revalidatePage } from "./hooks/revalidatePage"
+
+// Import blocks
+import {
+  HeroBlock,
+  LogoBannerBlock,
+  FeaturesBlock,
+  BenefitsBlock,
+  PricingBlock,
+  TestimonialsBlock,
+  FAQBlock,
+  ContentBlock,
+  CTABlock,
+} from "../../blocks"
+
+import {
+  MetaDescriptionField,
+  MetaImageField,
+  MetaTitleField,
+  OverviewField,
+  PreviewField,
+} from "@payloadcms/plugin-seo/fields"
+
+export const Pages: CollectionConfig<"pages"> = {
+  slug: "pages",
+  access: {
+    create: authenticated,
+    delete: authenticated,
+    read: authenticatedOrPublished,
+    update: authenticated,
+  },
+  defaultPopulate: {
+    title: true,
+    slug: true,
+  },
+  admin: {
+    defaultColumns: ["title", "slug", "updatedAt"],
+    livePreview: {
+      url: ({ data, req }) =>
+        generatePreviewPath({
+          slug: data?.slug,
+          collection: "pages",
+          req,
+        }),
+    },
+    preview: (data, { req }) =>
+      generatePreviewPath({
+        slug: data?.slug as string,
+        collection: "pages",
+        req,
+      }),
+    useAsTitle: "title",
+  },
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      required: true,
+    },
+    {
+      type: "tabs",
+      tabs: [
+        {
+          fields: [
+            {
+              name: "layout",
+              type: "blocks",
+              blocks: [
+                HeroBlock,
+                LogoBannerBlock,
+                FeaturesBlock,
+                BenefitsBlock,
+                PricingBlock,
+                TestimonialsBlock,
+                FAQBlock,
+                ContentBlock,
+                CTABlock,
+              ],
+              required: true,
+              admin: {
+                initCollapsed: true,
+              },
+            },
+          ],
+          label: "Content",
+        },
+        {
+          name: "meta",
+          label: "SEO",
+          fields: [
+            OverviewField({
+              titlePath: "meta.title",
+              descriptionPath: "meta.description",
+              imagePath: "meta.image",
+            }),
+            MetaTitleField({
+              hasGenerateFn: true,
+            }),
+            MetaImageField({
+              relationTo: "media",
+            }),
+            MetaDescriptionField({}),
+            PreviewField({
+              hasGenerateFn: true,
+              titlePath: "meta.title",
+              descriptionPath: "meta.description",
+            }),
+          ],
+        },
+      ],
+    },
+    {
+      name: "publishedAt",
+      type: "date",
+      admin: {
+        position: "sidebar",
+      },
+    },
+    slugField(),
+  ],
+  hooks: {
+    afterChange: [revalidatePage],
+    beforeChange: [populatePublishedAt],
+    afterDelete: [revalidateDelete],
+  },
+  versions: {
+    drafts: {
+      autosave: {
+        interval: 100,
+      },
+      schedulePublish: true,
+    },
+    maxPerDoc: 50,
+  },
+}

package/templates/marketing/payload/src/collections/Posts/hooks/populateAuthors.ts.hbs

@@ -0,0 +1,41 @@
+import type { CollectionAfterReadHook } from "payload"
+import type { User } from "src/payload-types"
+
+// The `user` collection has access control locked so that users are not publicly accessible
+// This means that we need to populate the authors manually here to protect user privacy
+// GraphQL will not return mutated user data that differs from the underlying schema
+// So we use an alternative `populatedAuthors` field to populate the user data, hidden from the admin UI
+export const populateAuthors: CollectionAfterReadHook = async ({
+  doc,
+  req: _req,
+  req: { payload },
+}) => {
+  if (doc?.authors && doc?.authors?.length > 0) {
+    const authorDocs: User[] = []
+
+    for (const author of doc.authors) {
+      try {
+        const authorDoc = await payload.findByID({
+          id: typeof author === "object" ? author?.id : author,
+          collection: "users",
+          depth: 0,
+        })
+
+        if (authorDoc) {
+          authorDocs.push(authorDoc)
+        }
+
+        if (authorDocs.length > 0) {
+          doc.populatedAuthors = authorDocs.map((authorDoc) => ({
+            id: authorDoc.id,
+            name: authorDoc.name,
+          }))
+        }
+      } catch {
+        // swallow error
+      }
+    }
+  }
+
+  return doc
+}

package/templates/marketing/payload/src/collections/Posts/hooks/revalidatePost.ts.hbs

@@ -0,0 +1,44 @@
+import type { CollectionAfterChangeHook, CollectionAfterDeleteHook } from "payload"
+
+import { revalidatePath, revalidateTag } from "next/cache"
+
+import type { Post } from "../../../payload-types"
+
+export const revalidatePost: CollectionAfterChangeHook<Post> = ({
+  doc,
+  previousDoc,
+  req: { payload, context },
+}) => {
+  if (!context.disableRevalidate) {
+    if (doc._status === "published") {
+      const path = `/posts/${doc.slug}`
+
+      payload.logger.info(`Revalidating post at path: ${path}`)
+
+      revalidatePath(path)
+      revalidateTag("posts-sitemap")
+    }
+
+    // If the post was previously published, we need to revalidate the old path
+    if (previousDoc._status === "published" && doc._status !== "published") {
+      const oldPath = `/posts/${previousDoc.slug}`
+
+      payload.logger.info(`Revalidating old post at path: ${oldPath}`)
+
+      revalidatePath(oldPath)
+      revalidateTag("posts-sitemap")
+    }
+  }
+  return doc
+}
+
+export const revalidateDelete: CollectionAfterDeleteHook<Post> = ({ doc, req: { context } }) => {
+  if (!context.disableRevalidate) {
+    const path = `/posts/${doc?.slug}`
+
+    revalidatePath(path)
+    revalidateTag("posts-sitemap")
+  }
+
+  return doc
+}

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

@@ -0,0 +1,244 @@
+import type { CollectionConfig } from "payload"
+
+import {
+  AlignFeature,
+  BlockquoteFeature,
+  ChecklistFeature,
+  EXPERIMENTAL_TableFeature,
+  FixedToolbarFeature,
+  HeadingFeature,
+  HorizontalRuleFeature,
+  IndentFeature,
+  InlineCodeFeature,
+  InlineToolbarFeature,
+  OrderedListFeature,
+  RelationshipFeature,
+  StrikethroughFeature,
+  SubscriptFeature,
+  SuperscriptFeature,
+  UnorderedListFeature,
+  UploadFeature,
+  lexicalEditor,
+} from "@payloadcms/richtext-lexical"
+
+import { authenticated } from "../../access/authenticated"
+import { authenticatedOrPublished } from "../../access/authenticatedOrPublished"
+import { generatePreviewPath } from "../../utilities/generatePreviewPath"
+import { populateAuthors } from "./hooks/populateAuthors"
+import { revalidateDelete, revalidatePost } from "./hooks/revalidatePost"
+
+import {
+  MetaDescriptionField,
+  MetaImageField,
+  MetaTitleField,
+  OverviewField,
+  PreviewField,
+} from "@payloadcms/plugin-seo/fields"
+import { slugField } from "payload"
+
+export const Posts: CollectionConfig<"posts"> = {
+  slug: "posts",
+  access: {
+    create: authenticated,
+    delete: authenticated,
+    read: authenticatedOrPublished,
+    update: authenticated,
+  },
+  defaultPopulate: {
+    title: true,
+    slug: true,
+    categories: true,
+    meta: {
+      image: true,
+      description: true,
+    },
+  },
+  admin: {
+    defaultColumns: ["title", "slug", "updatedAt"],
+    livePreview: {
+      url: ({ data, req }) =>
+        generatePreviewPath({
+          slug: data?.slug,
+          collection: "posts",
+          req,
+        }),
+    },
+    preview: (data, { req }) =>
+      generatePreviewPath({
+        slug: data?.slug as string,
+        collection: "posts",
+        req,
+      }),
+    useAsTitle: "title",
+  },
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      required: true,
+    },
+    {
+      type: "tabs",
+      tabs: [
+        {
+          fields: [
+            {
+              name: "heroImage",
+              type: "upload",
+              relationTo: "media",
+            },
+            {
+              name: "content",
+              type: "richText",
+              editor: lexicalEditor({
+                features: ({ rootFeatures }) => {
+                  return [
+                    ...rootFeatures,
+                    HeadingFeature({ enabledHeadingSizes: ["h1", "h2", "h3", "h4"] }),
+                    FixedToolbarFeature(),
+                    InlineToolbarFeature(),
+                    HorizontalRuleFeature(),
+                    StrikethroughFeature(),
+                    SubscriptFeature(),
+                    SuperscriptFeature(),
+                    InlineCodeFeature(),
+                    BlockquoteFeature(),
+                    UnorderedListFeature(),
+                    OrderedListFeature(),
+                    ChecklistFeature(),
+                    AlignFeature(),
+                    IndentFeature(),
+                    RelationshipFeature(),
+                    UploadFeature(),
+                    EXPERIMENTAL_TableFeature(),
+                  ]
+                },
+              }),
+              label: false,
+              required: true,
+            },
+          ],
+          label: "Content",
+        },
+        {
+          fields: [
+            {
+              name: "relatedPosts",
+              type: "relationship",
+              admin: {
+                position: "sidebar",
+              },
+              filterOptions: ({ id }) => {
+                return {
+                  id: {
+                    not_in: [id],
+                  },
+                }
+              },
+              hasMany: true,
+              relationTo: "posts",
+            },
+            {
+              name: "categories",
+              type: "relationship",
+              admin: {
+                position: "sidebar",
+              },
+              hasMany: true,
+              relationTo: "categories",
+            },
+          ],
+          label: "Meta",
+        },
+        {
+          name: "meta",
+          label: "SEO",
+          fields: [
+            OverviewField({
+              titlePath: "meta.title",
+              descriptionPath: "meta.description",
+              imagePath: "meta.image",
+            }),
+            MetaTitleField({
+              hasGenerateFn: true,
+            }),
+            MetaImageField({
+              relationTo: "media",
+            }),
+            MetaDescriptionField({}),
+            PreviewField({
+              hasGenerateFn: true,
+              titlePath: "meta.title",
+              descriptionPath: "meta.description",
+            }),
+          ],
+        },
+      ],
+    },
+    {
+      name: "publishedAt",
+      type: "date",
+      admin: {
+        date: {
+          pickerAppearance: "dayAndTime",
+        },
+        position: "sidebar",
+      },
+      hooks: {
+        beforeChange: [
+          ({ siblingData, value }) => {
+            if (siblingData._status === "published" && !value) {
+              return new Date()
+            }
+            return value
+          },
+        ],
+      },
+    },
+    {
+      name: "authors",
+      type: "relationship",
+      admin: {
+        position: "sidebar",
+      },
+      hasMany: true,
+      relationTo: "users",
+    },
+    {
+      name: "populatedAuthors",
+      type: "array",
+      access: {
+        update: () => false,
+      },
+      admin: {
+        disabled: true,
+        readOnly: true,
+      },
+      fields: [
+        {
+          name: "id",
+          type: "text",
+        },
+        {
+          name: "name",
+          type: "text",
+        },
+      ],
+    },
+    slugField(),
+  ],
+  hooks: {
+    afterChange: [revalidatePost],
+    afterRead: [populateAuthors],
+    afterDelete: [revalidateDelete],
+  },
+  versions: {
+    drafts: {
+      autosave: {
+        interval: 100,
+      },
+      schedulePublish: true,
+    },
+    maxPerDoc: 50,
+  },
+}

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;
+  }
+}