basic payload

next.config.ts

@@ -1,7 +1,8 @@
 import type { NextConfig } from "next";
+import withPayload from "@payloadcms/next/withPayload";
 
 const nextConfig: NextConfig = {
   /* config options here */
 };
 
-export default nextConfig;
+export default withPayload(nextConfig);

package.json

@@ -2,6 +2,7 @@
   "name": "ial-website-2",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build",
@@ -9,11 +10,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@payloadcms/db-postgres": "^3.35.1",
+    "@payloadcms/next": "^3.35.1",
+    "@payloadcms/richtext-lexical": "^3.35.1",
     "@tailwindcss/postcss": "^4.1.4",
+    "graphql": "^16.10.0",
     "next": "15.3.1",
+    "payload": "^3.35.1",
     "postcss": "^8.5.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "sharp": "^0.34.1",
     "tailwindcss": "^4.1.4"
   },
   "devDependencies": {

payload.config.ts

@@ -0,0 +1,45 @@
+import sharp from 'sharp'
+import { FixedToolbarFeature, lexicalEditor } from '@payloadcms/richtext-lexical'
+import { postgresAdapter } from '@payloadcms/db-postgres'
+import { buildConfig } from 'payload'
+
+import { HomeHero } from '@/globals/Home/Hero'
+
+import { News } from './src/collections/News'
+import { Projects } from '@/collections/Projects'
+import { Images } from '@/collections/media/Images'
+import { Documents } from '@/collections/media/Documents'
+import { Data } from '@/collections/media/Data'
+import { HomeProjects } from '@/globals/Home/Projects'
+
+export default buildConfig({
+  // If you'd like to use Rich Text, pass your editor here
+  editor: lexicalEditor({
+    features: ({ defaultFeatures }) => [
+      ...defaultFeatures,
+      FixedToolbarFeature(),
+    ]
+  }),
+
+  serverURL: process.env.SERVER_URL || 'http://localhost:3000',
+
+  globals: [HomeHero, HomeProjects],
+
+  // Define and configure your collections in this array
+  collections: [Projects, News, Images, Documents, Data],
+
+  // Your Payload secret - should be a complex and secure string, unguessable
+  secret: process.env.PAYLOAD_SECRET || '',
+  // Whichever Database Adapter you're using should go here
+  // Mongoose is shown as an example, but you can also use Postgres
+  db: postgresAdapter({
+    pool: {
+        connectionString: process.env.DATABASE_URI,
+    }
+  }),
+  // If you want to resize images, crop, set focal point, etc.
+  // make sure to install it and pass it to the config.
+  // This is optional - if you don't need to do these things,
+  // you don't need it!
+  sharp,
+})

src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -0,0 +1,27 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from "next";
+
+import config from "@payload-config";
+import { NotFoundPage, generatePageMetadata } from "@payloadcms/next/views";
+import { importMap } from "../importMap";
+
+type Args = {
+  params: Promise<{
+    segments: string[];
+  }>;
+  searchParams: Promise<{
+    [key: string]: string | string[];
+  }>;
+};
+
+export const generateMetadata = ({
+  params,
+  searchParams,
+}: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams });
+
+const NotFound = ({ params, searchParams }: Args) =>
+  NotFoundPage({ config, params, searchParams, importMap });
+
+export default NotFound;

src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,27 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from "next";
+
+import config from "@payload-config";
+import { RootPage, generatePageMetadata } from "@payloadcms/next/views";
+import { importMap } from "../importMap";
+
+type Args = {
+  params: Promise<{
+    segments: string[];
+  }>;
+  searchParams: Promise<{
+    [key: string]: string | string[];
+  }>;
+};
+
+export const generateMetadata = ({
+  params,
+  searchParams,
+}: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams });
+
+const Page = ({ params, searchParams }: Args) =>
+  RootPage({ config, params, searchParams, importMap });
+
+export default Page;

src/app/(payload)/admin/importMap.js

@@ -0,0 +1,49 @@
+import { RscEntryLexicalCell as RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
+import { RscEntryLexicalField as RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
+import { FixedToolbarFeatureClient as FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { UploadFeatureClient as UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { BlockquoteFeatureClient as BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { RelationshipFeatureClient as RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { LinkFeatureClient as LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { ChecklistFeatureClient as ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { OrderedListFeatureClient as OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { UnorderedListFeatureClient as UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { IndentFeatureClient as IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { AlignFeatureClient as AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { HeadingFeatureClient as HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { InlineCodeFeatureClient as InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { SuperscriptFeatureClient as SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { SubscriptFeatureClient as SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+
+export const importMap = {
+  "@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
+  "@payloadcms/richtext-lexical/rsc#RscEntryLexicalField": RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e,
+  "@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient": FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#UploadFeatureClient": UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#BlockquoteFeatureClient": BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#RelationshipFeatureClient": RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#LinkFeatureClient": LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#ChecklistFeatureClient": ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#OrderedListFeatureClient": OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#UnorderedListFeatureClient": UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#IndentFeatureClient": IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#AlignFeatureClient": AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#HeadingFeatureClient": HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#InlineCodeFeatureClient": InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#SuperscriptFeatureClient": SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#SubscriptFeatureClient": SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#StrikethroughFeatureClient": StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864
+}

src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,19 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import '@payloadcms/next/css'
+import {
+  REST_DELETE,
+  REST_GET,
+  REST_OPTIONS,
+  REST_PATCH,
+  REST_POST,
+  REST_PUT,
+} from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)
+export const PUT = REST_PUT(config)
+export const OPTIONS = REST_OPTIONS(config)

src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,7 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import '@payloadcms/next/css'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,8 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)
+
+export const OPTIONS = REST_OPTIONS(config)

src/app/(payload)/api/layout.tsx

@@ -0,0 +1,35 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from "@payload-config";
+import "@payloadcms/next/css";
+import type { ServerFunctionClient } from "payload";
+import { handleServerFunctions, RootLayout } from "@payloadcms/next/layouts";
+import React from "react";
+
+import { importMap } from "../admin/importMap.js";
+import "./custom.scss";
+
+type Args = {
+  children: React.ReactNode;
+};
+
+const serverFunction: ServerFunctionClient = async function (args) {
+  "use server";
+  return handleServerFunctions({
+    ...args,
+    config,
+    importMap,
+  });
+};
+
+const Layout = ({ children }: Args) => (
+  <RootLayout
+    config={config}
+    importMap={importMap}
+    serverFunction={serverFunction}
+  >
+    {children}
+  </RootLayout>
+);
+
+export default Layout;

src/app/(payload)/layout.tsx

@@ -0,0 +1,35 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from "@payload-config";
+import "@payloadcms/next/css";
+import type { ServerFunctionClient } from "payload";
+import { handleServerFunctions, RootLayout } from "@payloadcms/next/layouts";
+import React from "react";
+
+import { importMap } from "./admin/importMap.js";
+import "./custom.scss";
+
+type Args = {
+  children: React.ReactNode;
+};
+
+const serverFunction: ServerFunctionClient = async function (args) {
+  "use server";
+  return handleServerFunctions({
+    ...args,
+    config,
+    importMap,
+  });
+};
+
+const Layout = ({ children }: Args) => (
+  <RootLayout
+    config={config}
+    importMap={importMap}
+    serverFunction={serverFunction}
+  >
+    {children}
+  </RootLayout>
+);
+
+export default Layout;

src/app/(website)/brand/page.tsx

@@ -0,0 +1,18 @@
+export default function Page() {
+  return (
+    <div className="flex justify-center ">
+      <div className="container p-4 flex flex-col gap-8">
+        <div className="border-b">
+          <h1 className="text-xl">iNZight Analytics Brand</h1>
+        </div>
+
+        <h2 className="text-lg">Colours</h2>
+        <div className="h-32 flex gap-4 bg-gray-300 p-4">
+          <div className="w-3/5 bg-black"></div>
+          <div className="w-3/10 bg-white"></div>
+          <div className="w-1/10 bg-red-600"></div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(website)/page.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div className="bg-green-200">hello</div>;
+}

src/app/page.tsx

@@ -1,3 +0,0 @@
-export default function Home() {
-  return <div className="bg-green-500">hello</div>;
-}

src/collections/News.ts

@@ -0,0 +1,40 @@
+import { formatSlug } from "@/lib/slugs";
+import { CollectionConfig } from "payload";
+
+export const News: CollectionConfig = {
+    slug: 'news',
+    fields: [
+        {
+            name: 'title',
+            label: 'Title',
+            type: 'text',
+            required: true,
+        },
+        {
+            name: 'slug',
+            label: 'Slug',
+            type: 'text',
+            required: true,
+            unique: true,
+            admin: {
+                position: 'sidebar',
+                description: 'The slug is used to identify the news item in the URL.',
+                // readOnly: true,
+            },
+            hooks: {
+                beforeValidate: [
+                    formatSlug('title'),
+                ]
+            }
+        },
+        {
+            name: 'content',
+            label: 'Content',
+            type: 'richText',
+            required: true,
+        },
+    ],
+    versions: {
+        drafts: true,
+    },
+}

src/collections/Projects.ts

@@ -0,0 +1,84 @@
+import { formatSlug } from "@/lib/slugs";
+import { CollectionConfig } from "payload";
+
+export const Projects: CollectionConfig = {
+    slug: 'projects',
+    fields: [
+        {
+            name: 'title',
+            label: 'Title',
+            type: 'text',
+            required: true,
+        },
+        {
+            name: 'slug',
+            label: 'Slug',
+            type: 'text',
+            required: true,
+            unique: true,
+            admin: {
+                position: 'sidebar',
+                description: 'The slug is used to identify the news item in the URL.',
+                // readOnly: true,
+            },
+            hooks: {
+                beforeValidate: [
+                    formatSlug('title'),
+                ]
+            }
+        },
+        {
+            name: 'content',
+            label: 'Content',
+            type: 'richText',
+            required: true,
+        },
+        // list of files
+        // gallery
+        // keywords
+        // is featured?
+        {
+            name: 'featured',
+            label: 'Featured',
+            type: 'checkbox',
+            defaultValue: false,
+            admin: {
+                position: 'sidebar',
+                description: 'Show this project on the homepage.',
+            }
+        },
+        // links
+        {
+            name: 'links',
+            label: 'Links',
+            type: 'array',
+            fields: [
+                {
+                    name: 'link',
+                    label: 'Link',
+                    type: 'text',
+                    required: true,
+                },
+                {
+                    name: 'description',
+                    label: 'Description',
+                    type: 'text',
+                    required: false,
+                },
+                {
+                    name: 'group',
+                    label: 'Group',
+                    type: 'text',
+                    required: false,
+                    admin: {
+                        description: 'Optional: organise link under this heading',
+                    },
+                }
+            ],
+            admin: {
+                position: 'sidebar',
+
+            }
+        },
+    ]
+}

src/collections/media/Data.ts

@@ -0,0 +1,31 @@
+import type { CollectionConfig } from "payload";
+
+export const Data: CollectionConfig = {
+    slug: 'data',
+    upload: {
+        staticDir: 'data',
+        mimeTypes: ['application/json', 'text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/plain'],
+    },
+    fields: [
+        {
+            name: 'title',
+            label: 'Title',
+            type: 'text',
+            required: true,
+        },
+        {
+            name: 'description',
+            label: 'Description',
+            type: 'textarea',
+        },
+        {
+            name: 'source',
+            label: 'Source',
+            type: 'text',
+            required: true,
+        },
+    ],
+    admin: {
+        group: 'Media',
+    }
+}

src/collections/media/Documents.ts

@@ -0,0 +1,25 @@
+import type { CollectionConfig } from "payload";
+
+export const Documents: CollectionConfig = {
+    slug: 'documents',
+    upload: {
+        staticDir: 'media/documents',
+        mimeTypes: ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'],
+    },
+    fields: [
+        {
+            name: 'title',
+            label: 'Title',
+            type: 'text',
+            required: true,
+        },
+        {
+            name: 'description',
+            label: 'Description',
+            type: 'textarea',
+        },
+    ],
+    admin: {
+        group: 'Media',
+    }
+}

src/collections/media/Images.ts

@@ -0,0 +1,45 @@
+import type { CollectionConfig } from "payload";
+
+export const Images: CollectionConfig = {
+    slug: 'images',
+    upload: {
+        staticDir: 'media/images',
+        imageSizes: [
+            {
+                name: 'thumbnail',
+                width: 400,
+                height: 300,
+                position: 'centre',
+            },
+            {
+                name: 'card',
+                width: 768,
+                height: 1024,
+                position: 'centre',
+            },
+            {
+                name: 'tablet',
+                width: 1024,
+                height: undefined,
+                position: 'centre',
+            }
+        ],
+        adminThumbnail: 'thumbnail',
+        mimeTypes: ['image/*'],
+    },
+    fields: [
+        {
+            name: 'alt',
+            label: 'Alt Text',
+            type: 'text',
+        },
+        {
+            name: 'description',
+            label: 'Description',
+            type: 'textarea',
+        }
+    ],
+    admin: {
+        group: 'Media',
+    }
+}

tsconfig.json

@@ -19,7 +19,8 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@payload-config": ["./payload.config.ts"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],