kofi-stack-template-generator 2.1.27 → 2.1.28

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

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

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

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

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

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

package/templates/marketing/payload/src/utilities/canUseDOM.ts.hbs

@@ -0,0 +1 @@
+export default !!(typeof window !== "undefined" && window.document && window.document.createElement)

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

@@ -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/formatAuthors.ts.hbs

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

@@ -0,0 +1,13 @@
+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 MM = months + 1 < 10 ? `0${months + 1}` : months + 1
+  const DD = days < 10 ? `0${days}` : days
+  const YYYY = date.getFullYear()
+
+  return `${MM}/${DD}/${YYYY}`
+}

package/templates/marketing/payload/src/utilities/generateMeta.ts.hbs

@@ -0,0 +1,87 @@
+import type { Metadata } from "next"
+
+import type { Config, Media, Page, Post } from "../payload-types"
+
+import { getServerSideURL } from "./getURL"
+import { mergeOpenGraph } from "./mergeOpenGraph"
+
+const getImageURL = (image?: Media | Config["db"]["defaultIDType"] | null) => {
+  const serverUrl = getServerSideURL()
+
+  let url = `${serverUrl}/og-image.png`
+
+  if (image && typeof image === "object" && "url" in image) {
+    const ogUrl = image.sizes?.og?.url
+
+    url = ogUrl ? `${serverUrl}${ogUrl}` : `${serverUrl}${image.url}`
+  }
+
+  return url
+}
+
+// Default keywords for SEO
+const defaultKeywords = [
+  "{{projectName}}",
+  "website",
+  "Next.js",
+  "Payload CMS",
+]
+
+export const generateMeta = async (args: {
+  doc: Partial<Page> | Partial<Post> | null
+}): Promise<Metadata> => {
+  const { doc } = args
+  const serverUrl = getServerSideURL()
+
+  const ogImage = getImageURL(doc?.meta?.image)
+
+  const title = doc?.meta?.title
+    ? `${doc?.meta?.title} | {{projectName}}`
+    : "{{projectName}}"
+
+  const description =
+    doc?.meta?.description ||
+    "Welcome to {{projectName}}. Built with Payload CMS and Next.js."
+
+  // Generate canonical URL
+  const slug = Array.isArray(doc?.slug) ? doc?.slug.join("/") : doc?.slug || ""
+  const canonicalUrl = slug === "home" ? serverUrl : `${serverUrl}/${slug}`
+
+  return {
+    title,
+    description,
+    keywords: defaultKeywords,
+    authors: [{ name: "{{projectName}}", url: serverUrl }],
+    creator: "{{projectName}}",
+    publisher: "{{projectName}}",
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        "max-video-preview": -1,
+        "max-image-preview": "large",
+        "max-snippet": -1,
+      },
+    },
+    alternates: {
+      canonical: canonicalUrl,
+    },
+    openGraph: mergeOpenGraph({
+      description,
+      images: ogImage
+        ? [
+            {
+              url: ogImage,
+              width: 1200,
+              height: 630,
+              alt: title,
+            },
+          ]
+        : undefined,
+      title,
+      url: canonicalUrl,
+    }),
+  }
+}

package/templates/marketing/payload/src/utilities/generatePreviewPath.ts.hbs

@@ -0,0 +1,33 @@
+import type { CollectionSlug, PayloadRequest } from "payload"
+
+const collectionPrefixMap: Partial<Record<CollectionSlug, string>> = {
+  posts: "/posts",
+  pages: "",
+}
+
+type Props = {
+  collection: keyof typeof collectionPrefixMap
+  slug: string
+  req: PayloadRequest
+}
+
+export const generatePreviewPath = ({ collection, slug }: Props) => {
+  // Allow empty strings, e.g. for the homepage
+  if (slug === undefined || slug === null) {
+    return null
+  }
+
+  // Encode to support slugs with special characters
+  const encodedSlug = encodeURIComponent(slug)
+
+  const encodedParams = new URLSearchParams({
+    slug: encodedSlug,
+    collection,
+    path: `${collectionPrefixMap[collection]}/${encodedSlug}`,
+    previewSecret: process.env.PREVIEW_SECRET || "",
+  })
+
+  const url = `/next/preview?${encodedParams.toString()}`
+
+  return url
+}

package/templates/marketing/payload/src/utilities/getURL.ts.hbs

@@ -0,0 +1,26 @@
+import canUseDOM from "./canUseDOM"
+
+export const getServerSideURL = () => {
+  return (
+    process.env.NEXT_PUBLIC_SERVER_URL ||
+    (process.env.VERCEL_PROJECT_PRODUCTION_URL
+      ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
+      : "http://localhost:3000")
+  )
+}
+
+export const getClientSideURL = () => {
+  if (canUseDOM) {
+    const protocol = window.location.protocol
+    const domain = window.location.hostname
+    const port = window.location.port
+
+    return `${protocol}//${domain}${port ? `:${port}` : ""}`
+  }
+
+  if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {
+    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
+  }
+
+  return process.env.NEXT_PUBLIC_SERVER_URL || ""
+}

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

@@ -0,0 +1,8 @@
+export { default as deepMerge, isObject } from "./deepMerge"
+export { default as canUseDOM } from "./canUseDOM"
+export { getServerSideURL, getClientSideURL } from "./getURL"
+export { generatePreviewPath } from "./generatePreviewPath"
+export { mergeOpenGraph } from "./mergeOpenGraph"
+export { generateMeta } from "./generateMeta"
+export { formatAuthors } from "./formatAuthors"
+export { formatDateTime } from "./formatDateTime"

package/templates/marketing/payload/src/utilities/mergeOpenGraph.ts.hbs

@@ -0,0 +1,26 @@
+import type { Metadata } from "next"
+import { getServerSideURL } from "./getURL"
+
+const defaultOpenGraph: Metadata["openGraph"] = {
+  type: "website",
+  description:
+    "Welcome to {{projectName}}. Built with Payload CMS and Next.js.",
+  images: [
+    {
+      url: `${getServerSideURL()}/og-image.png`,
+      width: 1200,
+      height: 630,
+      alt: "{{projectName}}",
+    },
+  ],
+  siteName: "{{projectName}}",
+  title: "{{projectName}}",
+}
+
+export const mergeOpenGraph = (og?: Metadata["openGraph"]): Metadata["openGraph"] => {
+  return {
+    ...defaultOpenGraph,
+    ...og,
+    images: og?.images ? og.images : defaultOpenGraph.images,
+  }
+}

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

@@ -1,66 +0,0 @@
-import type { CollectionConfig } from 'payload'
-import {
-  HeroBlock,
-  LogoBannerBlock,
-  FeaturesBlock,
-  BenefitsBlock,
-  PricingBlock,
-  TestimonialsBlock,
-  FAQBlock,
-  ContentBlock,
-  CTABlock,
-} from '../blocks'
-
-export const Pages: CollectionConfig = {
-  slug: 'pages',
-  admin: {
-    useAsTitle: 'title',
-    defaultColumns: ['title', 'slug', 'status', 'updatedAt'],
-  },
-  access: {
-    read: () => true,
-  },
-  fields: [
-    {
-      name: 'title',
-      type: 'text',
-      required: true,
-    },
-    {
-      name: 'slug',
-      type: 'text',
-      required: true,
-      unique: true,
-      admin: {
-        position: 'sidebar',
-      },
-    },
-    {
-      name: 'status',
-      type: 'select',
-      options: [
-        { label: 'Draft', value: 'draft' },
-        { label: 'Published', value: 'published' },
-      ],
-      defaultValue: 'draft',
-      admin: {
-        position: 'sidebar',
-      },
-    },
-    {
-      name: 'layout',
-      type: 'blocks',
-      blocks: [
-        HeroBlock,
-        LogoBannerBlock,
-        FeaturesBlock,
-        BenefitsBlock,
-        PricingBlock,
-        TestimonialsBlock,
-        FAQBlock,
-        ContentBlock,
-        CTABlock,
-      ],
-    },
-  ],
-}

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

@@ -1,65 +0,0 @@
-import type { CollectionConfig } from 'payload'
-
-export const Posts: CollectionConfig = {
-  slug: 'posts',
-  admin: {
-    useAsTitle: 'title',
-    defaultColumns: ['title', 'author', 'status', 'publishedAt'],
-  },
-  access: {
-    read: () => true,
-  },
-  fields: [
-    {
-      name: 'title',
-      type: 'text',
-      required: true,
-    },
-    {
-      name: 'slug',
-      type: 'text',
-      required: true,
-      unique: true,
-    },
-    {
-      name: 'excerpt',
-      type: 'textarea',
-    },
-    {
-      name: 'content',
-      type: 'richText',
-    },
-    {
-      name: 'featuredImage',
-      type: 'upload',
-      relationTo: 'media',
-    },
-    {
-      name: 'author',
-      type: 'relationship',
-      relationTo: 'users',
-      admin: {
-        position: 'sidebar',
-      },
-    },
-    {
-      name: 'status',
-      type: 'select',
-      options: [
-        { label: 'Draft', value: 'draft' },
-        { label: 'Published', value: 'published' },
-      ],
-      defaultValue: 'draft',
-      admin: {
-        position: 'sidebar',
-      },
-    },
-    {
-      name: 'publishedAt',
-      type: 'date',
-      admin: {
-        position: 'sidebar',
-      },
-    },
-  ],
-}

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

@@ -1,25 +0,0 @@
-import type { CollectionConfig } from 'payload'
-
-export const Users: CollectionConfig = {
-  slug: 'users',
-  admin: {
-    useAsTitle: 'email',
-  },
-  auth: true,
-  fields: [
-    {
-      name: 'name',
-      type: 'text',
-    },
-    {
-      name: 'role',
-      type: 'select',
-      options: [
-        { label: 'Admin', value: 'admin' },
-        { label: 'Editor', value: 'editor' },
-      ],
-      defaultValue: 'editor',
-      required: true,
-    },
-  ],
-}

package/templates/marketing/payload/src/globals/Navigation.ts.hbs

@@ -1,51 +0,0 @@
-import type { GlobalConfig } from 'payload'
-
-export const Navigation: GlobalConfig = {
-  slug: 'navigation',
-  access: {
-    read: () => true,
-  },
-  fields: [
-    {
-      name: 'items',
-      type: 'array',
-      fields: [
-        {
-          name: 'label',
-          type: 'text',
-          required: true,
-        },
-        {
-          name: 'link',
-          type: 'group',
-          fields: [
-            {
-              name: 'type',
-              type: 'radio',
-              options: [
-                { label: 'Internal', value: 'internal' },
-                { label: 'External', value: 'external' },
-              ],
-              defaultValue: 'internal',
-            },
-            {
-              name: 'page',
-              type: 'relationship',
-              relationTo: 'pages',
-              admin: {
-                condition: (_, siblingData) => siblingData?.type === 'internal',
-              },
-            },
-            {
-              name: 'url',
-              type: 'text',
-              admin: {
-                condition: (_, siblingData) => siblingData?.type === 'external',
-              },
-            },
-          ],
-        },
-      ],
-    },
-  ],
-}

package/templates/marketing/payload/src/globals/SiteSettings.ts.hbs

@@ -1,49 +0,0 @@
-import type { GlobalConfig } from 'payload'
-
-export const SiteSettings: GlobalConfig = {
-  slug: 'site-settings',
-  access: {
-    read: () => true,
-  },
-  fields: [
-    {
-      name: 'siteName',
-      type: 'text',
-      required: true,
-    },
-    {
-      name: 'siteDescription',
-      type: 'textarea',
-    },
-    {
-      name: 'logo',
-      type: 'upload',
-      relationTo: 'media',
-    },
-    {
-      name: 'favicon',
-      type: 'upload',
-      relationTo: 'media',
-    },
-    {
-      name: 'socialLinks',
-      type: 'array',
-      fields: [
-        {
-          name: 'platform',
-          type: 'select',
-          options: [
-            { label: 'Twitter', value: 'twitter' },
-            { label: 'GitHub', value: 'github' },
-            { label: 'LinkedIn', value: 'linkedin' },
-            { label: 'Discord', value: 'discord' },
-          ],
-        },
-        {
-          name: 'url',
-          type: 'text',
-        },
-      ],
-    },
-  ],
-}