feat: cms hooks, draft state, item ordering, migration

eslint.config.mjs

@@ -30,9 +30,17 @@ const eslintConfig = [
       "jsx-quotes": ["error", "prefer-double"]
     },
     ignores: [
-      "**/(payload)/**"
+      "src/app/(payload)/**",
     ]
   },
+  {
+    files: ["src/migrations/*"],
+    rules: {
+      "@typescript-eslint/no-unused-vars": "off",
+      "no-unused-vars": "off",
+      "quotes": "off"
+    }
+  }
 ];
 
 export default eslintConfig;

package.json

@@ -7,19 +7,20 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload"
   },
   "dependencies": {
-    "@payloadcms/db-mongodb": "^3.29.0",
-    "@payloadcms/next": "^3.29.0",
-    "@payloadcms/payload-cloud": "^3.29.0",
-    "@payloadcms/richtext-lexical": "^3.29.0",
+    "@payloadcms/db-mongodb": "^3.41.0",
+    "@payloadcms/next": "^3.41.0",
+    "@payloadcms/payload-cloud": "^3.41.0",
+    "@payloadcms/richtext-lexical": "^3.41.0",
     "@tabler/icons-react": "^3.30.0",
     "@vercel/analytics": "^1.5.0",
     "@vercel/speed-insights": "^1.2.0",
     "graphql": "^16.10.0",
-    "next": "15.1.7",
-    "payload": "^3.29.0",
+    "next": "15.3.3",
+    "payload": "^3.41.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -28,10 +29,11 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "cross-env": "^7.0.3",
     "eslint": "^9",
     "eslint-config-next": "15.1.7",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}

src/app/(frontend)/blogs/[slug]/page.tsx

@@ -1,40 +1,40 @@
-import Navbar from "@/components/Navbar";
-import Footer from "@/components/Footer";
-import { apiClient } from "@/services/api-client";
-import { RichText } from "@payloadcms/richtext-lexical/react";
-
-const Blog = async ({ params } : {params: Promise<{slug: string}>}) => {
-  const { slug } = await params;
-
-  const post = await apiClient.find({
-    collection: "blogs",
-    select: {
-      metadata: { slug: true },
-      content: { title: true, body: true }
-    },
-    where: { "metadata.slug": { "equals": slug } }
-  });
-
-  const content = post.docs[0].content;
-
-  return (
-    <div className="blog">
-      <header>
-        <Navbar />
-      </header>
-
-      <main>
-        <section className="blog-section">
-          <h1>{content?.title}</h1>
-          {content.body && <RichText data={content.body} />}
-        </section>
-      </main>
-
-      <footer>
-        <Footer />
-      </footer>
-    </div>
-  );
-};
-
-export default Blog;
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+import { cmsClient } from "@/services/cms-client";
+import { RichText } from "@payloadcms/richtext-lexical/react";
+
+const Blog = async ({ params } : {params: Promise<{slug: string}>}) => {
+  const { slug } = await params;
+
+  const post = await cmsClient.find({
+    collection: "blogs",
+    select: {
+      metadata: { slug: true },
+      content: { title: true, body: true }
+    },
+    where: { "metadata.slug": { "equals": slug } }
+  });
+
+  const content = post.docs[0].content;
+
+  return (
+    <div className="blog">
+      <header>
+        <Navbar />
+      </header>
+
+      <main>
+        <section className="blog-section">
+          <h1>{content?.title}</h1>
+          {content.body && <RichText data={content.body} />}
+        </section>
+      </main>
+
+      <footer>
+        <Footer />
+      </footer>
+    </div>
+  );
+};
+
+export default Blog;

src/app/(frontend)/blogs/page.tsx

@@ -1,14 +1,15 @@
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
-import { apiClient } from "@/services/api-client";
+import { cmsClient } from "@/services/cms-client";
 
 const Blogs = async () => {
-  const posts = await apiClient.find({
+  const posts = await cmsClient.find({
     collection: "blogs",
     select:  {
       metadata: { slug: true },
       content: { title: true  }
     },
+    where: { _status: { equals: "published" } },
     page: 1,
     limit: 5,
     pagination: true,

src/app/(frontend)/projects/page.tsx

@@ -1,19 +1,20 @@
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
-import { apiClient } from "@/services/api-client";
+import { cmsClient } from "@/services/cms-client";
 import ProjectCard from "@/components/ProjectCard";
 
 const Projects = async () => {
-  const posts = await apiClient.find({
+  const posts = await cmsClient.find({
     collection: "projects",
     select:  {
       metadata: { slug: true, tags: true },
-      content: { title: true, description: true, repoLink: true, demoLink: true, videoLink: true, designLink: true, paperLink: true }
+      content: { title: true, description: true, repoLink: true, demoLink: true, videoLink: true, designLink: true, paperLink: true },
     },
+    where: { _status: { equals: "published" } },
     page: 1,
     limit: 10,
     pagination: true,
-    sort: "-metadata.order"
+    sort: "_order"
   });
 
   return (

src/contents/collections/Blogs.ts

@@ -1,8 +1,14 @@
 import type { CollectionConfig } from "payload";
 import { Metadata } from "@/contents/common/Metadata";
+import slugHook from "@/contents/hooks/slug-hook";
+import revalidateHook from "@/contents/hooks/revalidate-hook";
 
 export const Blogs: CollectionConfig = {
   slug: "blogs",
+  orderable: true,
+  versions: {
+    drafts: true,
+  },
   access: {
     read: () => true,
   },
@@ -29,4 +35,8 @@ export const Blogs: CollectionConfig = {
       ],
     },
   ],
+  hooks: {
+    beforeChange: [slugHook.blogs],
+    afterChange: [revalidateHook.blogs],
+  }
 };

src/contents/collections/Projects.ts

@@ -1,8 +1,15 @@
 import type { CollectionConfig } from "payload";
 import { Metadata } from "@/contents/common/Metadata";
+import slugHook from "@/contents/hooks/slug-hook";
+import revalidateHook from "@/contents/hooks/revalidate-hook";
 
 export const Projects: CollectionConfig = {
   slug: "projects",
+  orderable: true,
+  versions: {
+    drafts: true,
+    maxPerDoc: 10
+  },
   access: {
     read: () => true,
   },
@@ -57,4 +64,8 @@ export const Projects: CollectionConfig = {
       ]
     },
   ],
+  hooks: {
+    beforeChange: [slugHook.projects],
+    afterChange: [revalidateHook.projects],
+  }
 };

src/contents/common/Metadata.ts

@@ -3,10 +3,6 @@ import { Tab } from "payload";
 export const Metadata: Tab = {
   name: "metadata",
   fields: [
-    {
-      name: "order",
-      type: "number",
-    },
     {
       name: "slug",
       type: "text",

src/contents/hooks/revalidate-hook.ts

@@ -0,0 +1,40 @@
+import { CollectionAfterChangeHook } from "payload";
+import { Blog, Project } from "@/payload-types";
+import { rePath } from "@/services/revalidate-path";
+
+type CollectionTarget = Project | Blog;
+
+const revalidate: CollectionAfterChangeHook<CollectionTarget> = async (dataConfig) => {
+  const { doc, previousDoc, req: { payload, context }, collection: { slug } } = dataConfig;
+
+  if (context.disableRevalidate) return doc;
+
+  if (doc._status === "published") {
+    const path = `/${slug}`;
+    payload.logger.info(`Revalidating path: ${path}`);
+    await rePath(path);
+  }
+
+  // if the post was previously published, revalidate the old path
+  if (previousDoc._status === "published" && doc._status !== "published") {
+    const oldPath = `/${slug}`;
+    payload.logger.info(`Revalidating old path: ${oldPath}`);
+    await rePath(oldPath);
+  }
+
+  return doc;
+};
+
+// if I want to somehow customize revalidation further, not needed for now though
+// const revalidateProjects: CollectionAfterChangeHook<Project> = (data) => revalidate(data);
+// const revalidateBlogs: CollectionAfterChangeHook<Blog> = (data) => revalidate(data);
+
+const revalidateHook: {
+  projects: CollectionAfterChangeHook<Project>
+  blogs: CollectionAfterChangeHook<Blog>
+} = {
+  projects: revalidate,
+  blogs: revalidate
+};
+
+export default revalidateHook;

src/contents/hooks/slug-hook.ts

@@ -0,0 +1,25 @@
+import { CollectionBeforeChangeHook } from "payload";
+import { Blog, Project } from "@/payload-types";
+
+type CollectionTarget = Project | Blog;
+
+const titleToSlug: CollectionBeforeChangeHook<CollectionTarget> = (dataConfig) => {
+  const { data } = dataConfig;
+
+  if (data.content == null || data.metadata == null) return data;
+
+  // generate slug from title
+  if (data.content.title) data.metadata.slug = data.content.title.toLowerCase().replace(/ /g, "-");
+
+  return data;
+};
+
+const slugHook: {
+  projects: CollectionBeforeChangeHook<Project>
+  blogs: CollectionBeforeChangeHook<Blog>
+} = {
+  projects: titleToSlug,
+  blogs: titleToSlug,
+};
+
+export default slugHook;

src/migrations/20250608_072319_add_draft_state.ts

@@ -0,0 +1,19 @@
+import { MigrateDownArgs, MigrateUpArgs, } from "@payloadcms/db-mongodb";
+
+export async function up({ payload, req, session }: MigrateUpArgs): Promise<void> {
+  await payload.update({
+    collection: "projects",
+    where: {},
+    data: { _status: "draft" },
+  });
+
+  await payload.update({
+    collection: "blogs",
+    where: {},
+    data: { _status: "draft" },
+  });
+}
+
+export async function down({ payload, req, session }: MigrateDownArgs): Promise<void> {
+  // No rollback
+}

src/migrations/20250608_123947_remove_metadata_order.ts

@@ -0,0 +1,25 @@
+import { MigrateDownArgs, MigrateUpArgs, } from "@payloadcms/db-mongodb";
+
+export async function up({ payload, req, session }: MigrateUpArgs): Promise<void> {
+  await payload.db.collections["projects"].updateMany(
+    {},
+    { $unset: { metadata: { order: null } } }
+  );
+
+  await payload.db.collections["blogs"].updateMany(
+    {},
+    { $unset: { metadata: { order: null } } }
+  );
+}
+
+export async function down({ payload, req, session }: MigrateDownArgs): Promise<void> {
+  await payload.db.collections["projects"].updateMany(
+    {},
+    { $set: { metadata: { order: null } } }
+  );
+
+  await payload.db.collections["blogs"].updateMany(
+    {},
+    { $set: { metadata: { order: null } } }
+  );
+}

src/migrations/index.ts

@@ -0,0 +1,15 @@
+import * as migration_20250608_072319_add_draft_state from './20250608_072319_add_draft_state';
+import * as migration_20250608_123947_remove_metadata_order from './20250608_123947_remove_metadata_order';
+
+export const migrations = [
+  {
+    up: migration_20250608_072319_add_draft_state.up,
+    down: migration_20250608_072319_add_draft_state.down,
+    name: '20250608_072319_add_draft_state',
+  },
+  {
+    up: migration_20250608_123947_remove_metadata_order.up,
+    down: migration_20250608_123947_remove_metadata_order.down,
+    name: '20250608_123947_remove_metadata_order'
+  },
+];