upgrade payload to ver. 3.0 (#53)

Why: 
- current version of the project is running on Payload 2.0 which
required hosting Payload on a separate Express server;
- the project wasn't building nor deploying to Netlify properly given
this issue;

How: 
- upgraded the project dependencies and files to use Payload verion 3.0 

Detailed update notes:

Changes:
- Updated `ESLint`, `TypeScript` and `NextJS` config files to comply
with Payload 3.0;
- Updated existing collections to comply with Payload 3.0 configuration
options.
- Renamed `podcast-episodes` collection to `podcasts`.
- Refactored content fetchers to use Payload Local API instead of
GraphQL queries.
- Refectored components that use the above mentioned fetchers to reflect
changes;
- Updated blogpost content to use Payload 3.0 Lexical Serializer, no
longer relying on dangerouslySetInnerHTML.

Cleanup:
- Removed deprecated Payload 2.0 files.
- Moved Payload Admin Panel to the `./app` folder, as it is now treated
as a page by Next.js.

Roadmap:
- Reorganize project files to improve navigation by separating Payload
components from frontend components.

.eslintignore

@@ -0,0 +1,12 @@
+.tmp
+**/.git
+**/.hg
+**/.pnp.*
+**/.svn
+**/.yarn/**
+**/build
+**/dist/**
+**/node_modules
+**/temp
+playwright.config.ts
+jest.config.js

.eslintrc.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+  extends: 'next',
+  root: true,
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+  rules: {
+    'react/jsx-key': 'off',
+  }
+}

.github/workflows/node.js.yml

@@ -1,6 +1,6 @@
 name: Lint
 
-on: 
+on:
   push:
     branches: ["main"]
   pull_request:
@@ -19,7 +19,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 22
-      
+
       - name: Install Node.js dependencies
         run: npm install --force
 

.gitignore

@@ -12,3 +12,10 @@ node_modules
 
 # TEMP
 /src/app/(pages)/test-page/
+
+.netlify
+tsconfig.tsbuildinfo
+*.mp3
+*.png
+*.jpg
+*.webp

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.js

@@ -1,50 +1,25 @@
-/** @type {import('next').NextConfig} */
-const ContentSecurityPolicy = require('./csp')
-const redirects = require('./redirects')
+import { withPayload } from '@payloadcms/next/withPayload'
 
-const nextConfig = {
-  reactStrictMode: true,
-  swcMinify: true,
-  images: {
-    domains: ['localhost', process.env.NEXT_PUBLIC_SERVER_URL]
-      .filter(Boolean)
-      .map(url => url.replace(/https?:\/\//, '')),
-  },
-  redirects,
-  async headers() {
-    const headers = []
+import redirects from './redirects.js'
 
-    // Prevent search engines from indexing the site if it is not live
-    // This is useful for staging environments before they are ready to go live
-    // To allow robots to crawl the site, use the `NEXT_PUBLIC_IS_LIVE` env variable
-    // You may want to also use this variable to conditionally render any tracking scripts
-    if (!process.env.NEXT_PUBLIC_IS_LIVE) {
-      headers.push({
-        headers: [
-          {
-            key: 'X-Robots-Tag',
-            value: 'noindex',
-          },
-        ],
-        source: '/:path*',
-      })
-    }
+const NEXT_PUBLIC_SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000'
 
-    // Set the `Content-Security-Policy` header as a security measure to prevent XSS attacks
-    // It works by explicitly whitelisting trusted sources of content for your website
-    // This will block all inline scripts and styles except for those that are allowed
-    headers.push({
-      source: '/(.*)',
-      headers: [
-        {
-          key: 'Content-Security-Policy',
-          value: ContentSecurityPolicy,
-        },
-      ],
-    })
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      ...[NEXT_PUBLIC_SERVER_URL /* 'https://example.com' */].map((item) => {
+        const url = new URL(item)
 
-    return headers
+        return {
+          hostname: url.hostname,
+          protocol: url.protocol.replace(':', ''),
+        }
+      }),
+    ],
   },
+  reactStrictMode: true,
+  redirects,
 }
 
-module.exports = nextConfig
+export default withPayload(nextConfig)

package.json

@@ -1,74 +1,105 @@
 {
-  "name": "content-sub",
-  "description": "Website template for Payload",
+  "name": "payload3beta",
   "version": "1.0.0",
-  "main": "dist/server.js",
+  "description": "Website template for Payload",
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts nodemon",
-    "seed": "rm -rf media && cross-env PAYLOAD_SEED=true PAYLOAD_DROP_DATABASE=true PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts ts-node src/server.ts",
-    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload build",
-    "build:server": "tsc --project tsconfig.server.json",
-    "build:next": "cross-env PAYLOAD_CONFIG_PATH=dist/payload/payload.config.js NEXT_BUILD=true node dist/server.js",
-    "build": "cross-env NODE_ENV=production yarn build:payload && yarn build:server && yarn copyfiles && yarn build:next",
-    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload/payload.config.js NODE_ENV=production node dist/server.js",
-    "eject": "yarn remove next react react-dom @next/eslint-plugin-next && ts-node eject.ts",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,js}\" dist/",
-    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload generate:types",
-    "generate:graphQLSchema": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload generate:graphQLSchema",
-    "lint": "eslint src",
-    "lint:fix": "eslint --fix --ext .ts,.tsx src",
-    "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload"
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "dev:prod": "cross-env NODE_OPTIONS=--no-deprecation rm -rf .next && pnpm build && pnpm start",
+    "generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap",
+    "generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types",
+    "ii": "cross-env NODE_OPTIONS=--no-deprecation pnpm --ignore-workspace install",
+    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
+    "lint:fix": "cross-env NODE_OPTIONS=--no-deprecation next lint --fix",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "reinstall": "cross-env NODE_OPTIONS=--no-deprecation rm -rf node_modules && rm pnpm-lock.yaml && pnpm --ignore-workspace install",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
   },
   "dependencies": {
-    "@payloadcms/bundler-webpack": "^1.0.0",
-    "@payloadcms/db-mongodb": "^1.0.0",
-    "@payloadcms/plugin-cloud": "^3.0.0",
-    "@payloadcms/plugin-nested-docs": "^1.0.8",
-    "@payloadcms/plugin-redirects": "^1.0.0",
-    "@payloadcms/plugin-seo": "^1.0.10",
-    "@payloadcms/richtext-lexical": "^0.11.3",
-    "@payloadcms/richtext-slate": "^1.0.0",
+    "@aws-sdk/client-sso-oidc": "^3.667.0",
+    "@faceless-ui/modal": "3.0.0-beta.2",
+    "@faceless-ui/scroll-info": "2.0.0-beta.0",
+    "@lexical/headless": "0.18.0",
+    "@lexical/link": "0.18.0",
+    "@lexical/list": "0.18.0",
+    "@lexical/mark": "0.18.0",
+    "@lexical/markdown": "0.18.0",
+    "@lexical/react": "0.18.0",
+    "@lexical/rich-text": "0.18.0",
+    "@lexical/selection": "0.18.0",
+    "@lexical/table": "0.18.0",
+    "@lexical/utils": "0.18.0",
+    "@payloadcms/db-mongodb": "beta",
+    "@payloadcms/live-preview-react": "beta",
+    "@payloadcms/next": "beta",
+    "@payloadcms/plugin-cloud": "beta",
+    "@payloadcms/plugin-form-builder": "beta",
+    "@payloadcms/plugin-nested-docs": "beta",
+    "@payloadcms/plugin-redirects": "beta",
+    "@payloadcms/plugin-search": "beta",
+    "@payloadcms/plugin-seo": "beta",
+    "@payloadcms/richtext-lexical": "beta",
+    "@payloadcms/ui": "beta",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "dotenv": "^8.2.0",
-    "escape-html": "^1.0.3",
-    "express": "^4.19.2",
-    "isomorphic-dompurify": "^2.15.0",
-    "next": "13.5.2",
-    "payload": "^2.0.0",
+    "geist": "^1.3.0",
+    "graphql": "^16.8.2",
+    "install": "^0.13.0",
+    "isomorphic-dompurify": "^2.16.0",
+    "jsonwebtoken": "9.0.2",
+    "lexical": "^0.18.0",
+    "lucide-react": "^0.378.0",
+    "monaco-editor": "^0.25.0",
+    "next": "15.0.0-canary.173",
+    "npm": "^10.9.0",
+    "payload": "beta",
     "payload-admin-bar": "^1.0.6",
-    "qs": "6.11.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "prism-react-renderer": "^2.3.1",
+    "react": "^19.0.0-rc-09111202-20241011",
+    "react-dom": "^19.0.0-rc-09111202-20241011",
     "react-hook-form": "7.45.4",
-    "react-router-dom": "5.3.4",
-    "react-share": "^5.1.0"
+    "react-share": "^5.1.0",
+    "sharp": "0.32.6",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
+    "yjs": "^13.5.22"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^13.1.6",
-    "@payloadcms/eslint-config": "^0.0.1",
-    "@swc/core": "1.6.1",
+    "@payloadcms/eslint-config": "^1.1.1",
+    "@tailwindcss/typography": "^0.5.13",
     "@types/escape-html": "^1.0.2",
-    "@types/express": "^4.17.9",
-    "@types/node": "18.11.3",
-    "@types/qs": "^6.9.8",
-    "@types/react": "18.0.21",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
-    "@typescript-eslint/parser": "^5.51.0",
-    "eslint": "^8.19.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-filenames": "^1.3.2",
-    "eslint-plugin-import": "2.25.4",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "nodemon": "^2.0.6",
-    "prettier": "^2.7.1",
-    "slate": "0.91.4",
-    "ts-node": "10.9.1",
-    "typescript": "^4.8.4"
+    "@types/jsonwebtoken": "^9.0.6",
+    "@types/node": "22.5.4",
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]",
+    "autoprefixer": "^10.4.19",
+    "copyfiles": "^2.4.1",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.0-canary.173",
+    "postcss": "^8.4.38",
+    "prettier": "^3.0.3",
+    "tailwindcss": "^3.4.3",
+    "typescript": "5.6.2"
+  },
+  "engines": {
+    "node": "^18.20.2 || >=20.9.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "npm:[email protected]",
+      "@types/react-dom": "npm:[email protected]"
+    }
+  },
+  "overrides": {
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]"
   }
 }