fix: payload migration and lint

- cannot stream metadata

next.config.ts

@@ -2,6 +2,7 @@ import { withPayload } from "@payloadcms/next/withPayload";
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  trailingSlash: true,
   images: {
     remotePatterns: [
       {
@@ -10,6 +11,9 @@ const nextConfig: NextConfig = {
       },
     ],
   },
+  experimental: {
+    streamingMetadata: true,
+  },
 };
 
 export default withPayload(nextConfig);

package.json

@@ -27,7 +27,7 @@
     "imagesloaded": "^5.0.0",
     "isotope-layout": "^3.0.6",
     "jarallax": "^2.2.1",
-    "next": "15.1.6",
+    "next": "15.2.0-canary.30",
     "payload": "^3.20.0",
     "photoswipe": "^5.4.4",
     "react": "^19.0.0",

src/app/(main)/[pageslug]/page.tsx

@@ -1,35 +0,0 @@
-import { BlogDetailContentSkeleton } from "@/components/Blogs/BlogDetail";
-import Page from "@/components/Pages/Page";
-import Image from "next/image";
-import { Suspense } from "react";
-
-export const metadata = {
-  title: "Cochise Oncology",
-  description: "Cochise Oncology",
-};
-
-export default async function CustomPage({ params }: { params?: Promise<{ pageslug?: string }> }) {
-  const slug = (await params)?.pageslug;
-
-  return (
-    <>
-      <Suspense fallback={<Loading />}>
-        <Page slug={slug} />
-      </Suspense>
-    </>
-  );
-}
-
-function Loading() {
-  return (
-    <>
-      <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
-        <div className="bg-shape-1 opacity-003">
-          <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
-        </div>
-      </section>
-
-      <BlogDetailContentSkeleton />
-    </>
-  );
-}

src/app/(main)/[slug]/page.tsx

@@ -1,28 +1,36 @@
-import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
+import { BlogDetailContentSkeleton } from "@/components/Blogs/BlogDetail";
-import BlogDetail, { BlogDetailContentSkeleton } from "@/components/Blogs/BlogDetail";
+import Page from "@/components/Pages/Page";
 import { fetchBlogDetail } from "@/services/payload/blog";
+import { fetchPageBySlug } from "@/services/payload/page";
 import { Metadata } from "next";
 import Image from "next/image";
 import { Suspense } from "react";
 
 export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
   const name = "Cochise Oncology";
+  let title = "Page";
+  let description = "Page";
+  let imgUrl = "";
+
   const slug = (await params).slug;
   const blog = await fetchBlogDetail(slug);
 
+  // check for blog data
+  if (!!blog) {
+    title = `${!!blog.data?.meta?.title ? blog.data?.meta?.title : blog.data.title} - ${name}`;
+    description = `${!!blog.data?.meta?.description ? blog.data?.meta?.description : blog.data.title} - ${name}`;
+    imgUrl = blog.imgUrl;
+  }
+
+  // check for page data when blog is not found
   if (!blog) {
-    return {
+    const page = await fetchPageBySlug({ slug });
-      title: name,
+    if (!!page) {
-      description: name,
+      title = `${!!page?.meta?.title ? page?.meta?.title : page.title} - ${name}`;
-      openGraph: {
+      description = `${!!page?.meta?.description ? page?.meta?.description : page.title} - ${name}`;
-        title: name,
+      imgUrl = page.heroImg?.url;
-        description: name,
+    }
-      },
-    };
   }
-
-  const title = `${!!blog.data?.meta?.title ? blog.data?.meta?.title : blog.data.title} - ${name}`;
-  const description = `${!!blog.data?.meta?.description ? blog.data?.meta?.description : blog.data.title} - ${name}`;
 
   return {
     title: title,
@@ -30,19 +38,18 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
     openGraph: {
       title: title,
       description: description,
-      images: [{ url: blog.imgUrl }],
+      images: !!imgUrl ? { url: imgUrl } : undefined,
     },
   };
 }
 
-export default async function SingleBlogPage({ params }: { params: Promise<{ slug: string }> }) {
+export default async function SinglePage({ params }: { params: Promise<{ slug: string }> }) {
   const slug = (await params).slug;
 
   return (
     <>
       <Suspense fallback={<Loading />}>
-        <BlogDetail slug={slug} />
+        <Page slug={slug} />
-        <BeforeFooterBlock />
       </Suspense>
     </>
   );

src/app/(main)/coba/page.tsx

@@ -1,3 +1,3 @@
 export default function CobaPage() {
-  return <>{/* <ImageSliderBlock /> */}</>;
+  return <></>;
 }

src/app/(main)/layout.tsx

@@ -1,21 +1,20 @@
 "use client";
-import { usePathname } from "next/navigation";
+import "@/app/globals.css";
-import { useEffect } from "react";
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import { navMenuData } from "@/data/menu";
+import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
 import { init_wow } from "@/utils/initWow";
 import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
-import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
-import "@/app/globals.css";
-import "swiper/css";
-import "jarallax/dist/jarallax.min.css";
-import "swiper/css/effect-fade";
-import "react-modal-video/css/modal-video.css";
-import "photoswipe/dist/photoswipe.css";
-import "tippy.js/dist/tippy.css";
 import "@public/assets/css/styles.css";
-import Image from "next/image";
+import "jarallax/dist/jarallax.min.css";
-import Header from "@/components/Header";
+import { usePathname } from "next/navigation";
-import Footer from "@/components/Footer";
+import "photoswipe/dist/photoswipe.css";
-import { navMenuData } from "@/data/menu";
+import { useEffect } from "react";
+import "react-modal-video/css/modal-video.css";
+import "swiper/css";
+import "swiper/css/effect-fade";
+import "tippy.js/dist/tippy.css";
 
 export default function MainLayout({
   children,

src/app/globals.css

@@ -3,12 +3,22 @@
 @tailwind utilities;
 
 :root {
+  --ext-color-primary-1: #6ec2b6;
+  --ext-color-primary-2: #90d4c9;
+  --ext-color-primary-3: #2e2d51;
+  --ext-color-primary-4: #d4a187;
+  --ext-color-primary-5: #e7ccc0;
   --background: #ffffff;
   --foreground: #171717;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --ext-color-primary-1: #6ec2b6;
+    --ext-color-primary-2: #90d4c9;
+    --ext-color-primary-3: #2e2d51;
+    --ext-color-primary-4: #d4a187;
+    --ext-color-primary-5: #e7ccc0;
     --background: #0a0a0a;
     --foreground: #ededed;
   }
@@ -20,6 +30,24 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+@layer components {
+  .ext-btn {
+    @apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-95 transition-transform font-semibold no-underline;
+  }
+
+  .ext-btn-primary {
+    @apply bg-extColorPrimary text-white;
+  }
+
+  .ext-btn-primary2 {
+    @apply bg-extColorPrimary2 text-white;
+  }
+
+  .ext-btn-primary3 {
+    @apply bg-extColorPrimary3 text-white;
+  }
+}
+
 .bg-gradient {
   background: linear-gradient(135deg, #6ec2b6, #90d4c9);
   position: relative;

src/blocks/BoxMenuGrid.ts

@@ -0,0 +1,27 @@
+import { Block } from "payload";
+
+export const BoxMenuGridBlock: Block = {
+  slug: "boxMenuGridBlock",
+  fields: [
+    {
+      name: "boxMenuGridItem",
+      type: "array",
+      fields: [
+        {
+          name: "title",
+          type: "text",
+          required: true,
+        },
+        {
+          name: "description",
+          type: "text",
+        },
+        {
+          name: "href",
+          type: "text",
+          required: true,
+        },
+      ],
+    },
+  ],
+};

src/collections/Pages.ts

@@ -1,4 +1,5 @@
 import { BeforeFooterBlock } from "@/blocks/BeforeFooter";
+import { BoxMenuGridBlock } from "@/blocks/BoxMenuGrid";
 import { ContentBlock } from "@/blocks/Content";
 import { HorizontalImageContentBlock } from "@/blocks/HorizontalImageContent";
 import { ImageSliderBlock } from "@/blocks/ImageSlider";
@@ -37,7 +38,14 @@ export const Pages: CollectionConfig = {
       label: "Page Layout",
       type: "blocks",
       minRows: 1,
-      blocks: [ContentBlock, BeforeFooterBlock, OurTeamBlock, HorizontalImageContentBlock, ImageSliderBlock],
+      blocks: [
+        ContentBlock,
+        BeforeFooterBlock,
+        OurTeamBlock,
+        HorizontalImageContentBlock,
+        ImageSliderBlock,
+        BoxMenuGridBlock,
+      ],
     },
     {
       name: "meta",

src/components/Blocks/BoxMenuGrid/BoxMenu.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+
+export interface BoxMenuProps {
+  title: string;
+  description?: string;
+  href: string;
+}
+
+export default function BoxMenu({ title, description, href }: BoxMenuProps) {
+  return (
+    <div className="flex flex-col bg-extColorPrimary4 text-white rounded-md items-center px-4 py-4">
+      <span className="font-semibold text-2xl">{title ?? ""}</span>
+      <div className="text-center font-medium mt-4">{description ?? ""}</div>
+      <Link href={fixedHref(href)} className="ext-btn ext-btn-primary mt-4">
+        Learn More
+      </Link>
+    </div>
+  );
+}
+
+function fixedHref(href: string) {
+  if (href.charAt(0) === "/") return href;
+
+  return `/${href}`;
+}

src/components/Blocks/BoxMenuGrid/index.tsx

@@ -0,0 +1,40 @@
+import BoxMenu from "./BoxMenu";
+
+type BoxMenuGridItem = {
+  id: string;
+  title: string;
+  description: string;
+  href: string;
+};
+
+export interface BoxMenuGridBlockProps {
+  boxMenuGridItem: BoxMenuGridItem[];
+}
+
+export function BoxMenuGridBlock({ boxMenuGridItem }: BoxMenuGridBlockProps) {
+  const dataLength = boxMenuGridItem.length ?? 0;
+
+  return (
+    <div className="py-24 px-4 bg-[linear-gradient(to_bottom,var(--ext-color-primary-5),#ffffff)]">
+      {dataLength === 1 && (
+        <div className="flex justify-center">
+          <div className="w-2/3">
+            <BoxMenu
+              title="Chemoterapy"
+              description="Chemotherapy is a range of chemical treatments that are designed to combat the growth and spread of
+                  cancer."
+              href="radixact"
+            />
+          </div>
+        </div>
+      )}
+      {dataLength > 1 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
+          {boxMenuGridItem.map((b, idx) => (
+            <BoxMenu key={idx} title={b?.title ?? ""} description={b?.description ?? ""} href={b.href} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Blocks/RenderBlocks.tsx

@@ -6,6 +6,7 @@ import { BeforeFooterBlock } from "./BeforeFooter";
 import { OurTeamBlock } from "./OurTeam";
 import { HorizontalImageContentBlock } from "./HorizontalImageContent";
 import { ImageSliderBlock } from "./ImageSlider";
+import { BoxMenuGridBlock } from "./BoxMenuGrid";
 
 const blockComponents = {
   contentBlock: ContentBlock,
@@ -13,6 +14,7 @@ const blockComponents = {
   ourTeamBlock: OurTeamBlock,
   horizontalImageContentBlock: HorizontalImageContentBlock,
   imageSliderBlock: ImageSliderBlock,
+  boxMenuGridBlock: BoxMenuGridBlock,
 };
 
 export const RenderBlocks: React.FC<{

src/components/Blogs/BlogCardItem.tsx

@@ -22,13 +22,13 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
     <div className="post-prev-3 col-12 col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 mt-50">
       <div className="post-prev-3-container d-block d-sm-flex">
         <div className="post-prev-3-img">
-          <a href={`/blog/${data.slug}`}>
+          <a href={`/${data.slug}/`}>
             <Image width={400} height={488} src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} />
           </a>
         </div>
         <div className="post-prev-3-intro">
           <h4 className="post-prev-3-title">
-            <a href={`/blog/${data.slug}`}>{data.title}</a>
+            <a href={`/${data.slug}/`}>{data.title}</a>
           </h4>
           <div className="post-prev-3-text">{data.contentPreview}</div>
           <div className="post-prev-3-info clearfix">

src/components/Blogs/BlogDetail.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
 
 export interface BlogDetailProps {
-  slug: string;
+  slug: string | undefined;
 }
 
 export default async function BlogDetail({ slug }: BlogDetailProps) {

src/components/HeaderNav.tsx

@@ -9,15 +9,15 @@ import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 
 export default function HeaderNav({ links, animateY = false }: any) {
-  const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
+  const [isDropdownOpen] = useState([""]);
   const dropdownRef = useRef(null);
 
-  const toggleDropdown = (section: string[]) => {
+  // const toggleDropdown = (section: string[]) => {
-    if (section == isDropdownOpen) {
+  //   if (section == isDropdownOpen) {
-      setIsDropdownOpen([""]);
+  //     setIsDropdownOpen([""]);
-    }
+  //   }
-    setIsDropdownOpen(section);
+  //   setIsDropdownOpen(section);
-  };
+  // };
 
   useEffect(() => {
     setTimeout(() => {
@@ -57,16 +57,16 @@ export default function HeaderNav({ links, animateY = false }: any) {
 
             {Array.isArray(link?.child) && (
               <>
-                <a
+                <Link
-                  href="#"
+                  href={link?.href ?? "#"}
                   className="mn-has-sub"
-                  onClick={(e) => {
+                  // onClick={(e) => {
-                    e.preventDefault();
+                  //   e.preventDefault();
-                    toggleDropdown([link.text]);
+                  //   toggleDropdown([link.text]);
-                  }}
+                  // }}
                 >
                   {link.text} <i className="mi-chevron-down" />
-                </a>
+                </Link>
 
                 <ul className={`mn-sub to-left ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
                   {link.child.map((subLink: any, subLinkIdx: number) => (
@@ -78,16 +78,16 @@ export default function HeaderNav({ links, animateY = false }: any) {
                       )}
                       {Array.isArray(subLink?.child) && (
                         <>
-                          <a
+                          <Link
-                            href="#"
+                            href={subLink?.href ?? "#"}
                             className="mn-has-sub"
-                            onClick={(e) => {
+                            // onClick={(e) => {
-                              e.preventDefault();
+                            //   e.preventDefault();
-                              toggleDropdown([link.text, subLink.text]);
+                            //   toggleDropdown([link.text, subLink.text]);
-                            }}
+                            // }}
                           >
                             {subLink.text} <i className="mi-chevron-down" />
-                          </a>
+                          </Link>
 
                           <ul className={`mn-sub to-left ${isDropdownOpen.includes(subLink.text) && "open"}`}>
                             {subLink.child.map((subLink2: any, subLinkIdx2: number) => (

src/components/Pages/Page.tsx

@@ -1,7 +1,8 @@
+import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
 import { RenderBlocks } from "@/components/Blocks/RenderBlocks";
+import BlogDetail from "@/components/Blogs/BlogDetail";
 import { fetchPageBySlug } from "@/services/payload/page";
 import Image from "next/image";
-import { notFound } from "next/navigation";
 
 export interface PageProps {
   slug: string | undefined;
@@ -11,7 +12,12 @@ export default async function Page({ slug }: PageProps) {
   const page = await fetchPageBySlug({ slug });
 
   if (!page) {
-    return notFound();
+    return (
+      <>
+        <BlogDetail slug={slug} />;
+        <BeforeFooterBlock />
+      </>
+    );
   }
 
   return (

src/migrations/20250213_065243.ts

@@ -0,0 +1,45 @@
+import { MigrateUpArgs, MigrateDownArgs, sql } from "@payloadcms/db-postgres";
+
+export async function up({ db }: MigrateUpArgs): Promise<void> {
+  await db.execute(sql`
+   CREATE TABLE IF NOT EXISTS "pages_blocks_box_menu_grid_block_box_menu_grid_item" (
+  	"_order" integer NOT NULL,
+  	"_parent_id" varchar NOT NULL,
+  	"id" varchar PRIMARY KEY NOT NULL,
+  	"title" varchar NOT NULL,
+  	"description" varchar,
+  	"href" varchar NOT NULL
+  );
+  
+  CREATE TABLE IF NOT EXISTS "pages_blocks_box_menu_grid_block" (
+  	"_order" integer NOT NULL,
+  	"_parent_id" integer NOT NULL,
+  	"_path" text NOT NULL,
+  	"id" varchar PRIMARY KEY NOT NULL,
+  	"block_name" varchar
+  );
+  
+  DO $$ BEGIN
+   ALTER TABLE "pages_blocks_box_menu_grid_block_box_menu_grid_item" ADD CONSTRAINT "pages_blocks_box_menu_grid_block_box_menu_grid_item_parent_id_fk" FOREIGN KEY ("_parent_id") REFERENCES "public"."pages_blocks_box_menu_grid_block"("id") ON DELETE cascade ON UPDATE no action;
+  EXCEPTION
+   WHEN duplicate_object THEN null;
+  END $$;
+  
+  DO $$ BEGIN
+   ALTER TABLE "pages_blocks_box_menu_grid_block" ADD CONSTRAINT "pages_blocks_box_menu_grid_block_parent_id_fk" FOREIGN KEY ("_parent_id") REFERENCES "public"."pages"("id") ON DELETE cascade ON UPDATE no action;
+  EXCEPTION
+   WHEN duplicate_object THEN null;
+  END $$;
+  
+  CREATE INDEX IF NOT EXISTS "pages_blocks_box_menu_grid_block_box_menu_grid_item_order_idx" ON "pages_blocks_box_menu_grid_block_box_menu_grid_item" USING btree ("_order");
+  CREATE INDEX IF NOT EXISTS "pages_blocks_box_menu_grid_block_box_menu_grid_item_parent_id_idx" ON "pages_blocks_box_menu_grid_block_box_menu_grid_item" USING btree ("_parent_id");
+  CREATE INDEX IF NOT EXISTS "pages_blocks_box_menu_grid_block_order_idx" ON "pages_blocks_box_menu_grid_block" USING btree ("_order");
+  CREATE INDEX IF NOT EXISTS "pages_blocks_box_menu_grid_block_parent_id_idx" ON "pages_blocks_box_menu_grid_block" USING btree ("_parent_id");
+  CREATE INDEX IF NOT EXISTS "pages_blocks_box_menu_grid_block_path_idx" ON "pages_blocks_box_menu_grid_block" USING btree ("_path");`);
+}
+
+export async function down({ db }: MigrateDownArgs): Promise<void> {
+  await db.execute(sql`
+   DROP TABLE "pages_blocks_box_menu_grid_block_box_menu_grid_item" CASCADE;
+  DROP TABLE "pages_blocks_box_menu_grid_block" CASCADE;`);
+}

src/migrations/index.ts

@@ -1,9 +1,15 @@
 import * as migration_20250212_164255_cannonical from './20250212_164255_cannonical';
+import * as migration_20250213_065243 from './20250213_065243';
 
 export const migrations = [
   {
     up: migration_20250212_164255_cannonical.up,
     down: migration_20250212_164255_cannonical.down,
-    name: '20250212_164255_cannonical'
+    name: '20250212_164255_cannonical',
+  },
+  {
+    up: migration_20250213_065243.up,
+    down: migration_20250213_065243.down,
+    name: '20250213_065243'
   },
 ];

src/payload-types.ts

@@ -6,6 +6,60 @@
  * and re-run `payload generate:types` to regenerate this file.
  */
 
+/**
+ * Supported timezones in IANA format.
+ *
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "supportedTimezones".
+ */
+export type SupportedTimezones =
+  | 'Pacific/Midway'
+  | 'Pacific/Niue'
+  | 'Pacific/Honolulu'
+  | 'Pacific/Rarotonga'
+  | 'America/Anchorage'
+  | 'Pacific/Gambier'
+  | 'America/Los_Angeles'
+  | 'America/Tijuana'
+  | 'America/Denver'
+  | 'America/Phoenix'
+  | 'America/Chicago'
+  | 'America/Guatemala'
+  | 'America/New_York'
+  | 'America/Bogota'
+  | 'America/Caracas'
+  | 'America/Santiago'
+  | 'America/Buenos_Aires'
+  | 'America/Sao_Paulo'
+  | 'Atlantic/South_Georgia'
+  | 'Atlantic/Azores'
+  | 'Atlantic/Cape_Verde'
+  | 'Europe/London'
+  | 'Europe/Berlin'
+  | 'Africa/Lagos'
+  | 'Europe/Athens'
+  | 'Africa/Cairo'
+  | 'Europe/Moscow'
+  | 'Asia/Riyadh'
+  | 'Asia/Dubai'
+  | 'Asia/Baku'
+  | 'Asia/Karachi'
+  | 'Asia/Tashkent'
+  | 'Asia/Calcutta'
+  | 'Asia/Dhaka'
+  | 'Asia/Almaty'
+  | 'Asia/Jakarta'
+  | 'Asia/Bangkok'
+  | 'Asia/Shanghai'
+  | 'Asia/Singapore'
+  | 'Asia/Tokyo'
+  | 'Asia/Seoul'
+  | 'Australia/Sydney'
+  | 'Pacific/Guam'
+  | 'Pacific/Noumea'
+  | 'Pacific/Auckland'
+  | 'Pacific/Fiji';
+
 export interface Config {
   auth: {
     users: UserAuthOperations;
@@ -245,6 +299,19 @@ export interface Page {
             blockName?: string | null;
             blockType: 'imageSliderBlock';
           }
+        | {
+            boxMenuGridItem?:
+              | {
+                  title: string;
+                  description?: string | null;
+                  href: string;
+                  id?: string | null;
+                }[]
+              | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'boxMenuGridBlock';
+          }
       )[]
     | null;
   meta?: {
@@ -647,6 +714,20 @@ export interface PagesSelect<T extends boolean = true> {
               id?: T;
               blockName?: T;
             };
+        boxMenuGridBlock?:
+          | T
+          | {
+              boxMenuGridItem?:
+                | T
+                | {
+                    title?: T;
+                    description?: T;
+                    href?: T;
+                    id?: T;
+                  };
+              id?: T;
+              blockName?: T;
+            };
       };
   meta?:
     | T

src/payload.config.ts

@@ -7,6 +7,7 @@ import path from "path";
 import { buildConfig } from "payload";
 import sharp from "sharp";
 import { fileURLToPath } from "url";
+import { migrations } from "./migrations";
 
 import { BlogCategories } from "@/collections/BlogCategories";
 import { Blogs } from "@/collections/Blogs";
@@ -58,6 +59,7 @@ export default buildConfig({
     pool: {
       connectionString: process.env.DATABASE_URI || "",
     },
+    prodMigrations: migrations,
   }),
   editor: lexicalEditor({
     features: () => {

src/services/payload/blog.ts

@@ -30,7 +30,7 @@ export async function fetchBlog(page: number | undefined) {
   };
 }
 
-export async function fetchBlogDetail(slug: string) {
+export async function fetchBlogDetail(slug: string | undefined) {
   const payload = await getPayload({ config: payloadConfig });
   const blogDataQuery = await payload.find({
     collection: "blogs",

tailwind.config.ts

@@ -11,6 +11,10 @@ export default {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
+        extColorPrimary: "var(--ext-color-primary-1)",
+        extColorPrimary2: "var(--ext-color-primary-2)",
+        extColorPrimary3: "var(--ext-color-primary-3)",
+        extColorPrimary4: "var(--ext-color-primary-4)",
       },
     },
   },

yarn.lock

@@ -2347,10 +2347,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:15.1.6":
+"@next/env@npm:15.2.0-canary.30":
-  version: 15.1.6
+  version: 15.2.0-canary.30
-  resolution: "@next/env@npm:15.1.6"
+  resolution: "@next/env@npm:15.2.0-canary.30"
-  checksum: 10c0/b68d541abe0cf5f8bab83633680c193ff1756e73b024ffb18c146502a588e038ee705c6064d9c39609a9c0097c563162a296ae43041b34e06831f5b72a215121
+  checksum: 10c0/7c103ac9107de87cf8031f73c48c4ec1176d5233e1c45d84d2be6234f0b00081deb7e6d2d9815c26f46c4f76e6035ad97c5e69b1e0ebd08583bed7b181a458a6
   languageName: node
   linkType: hard
 
@@ -2370,58 +2370,58 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:15.1.6":
+"@next/swc-darwin-arm64@npm:15.2.0-canary.30":
-  version: 15.1.6
+  version: 15.2.0-canary.30
-  resolution: "@next/swc-darwin-arm64@npm:15.1.6"
+  resolution: "@next/swc-darwin-arm64@npm:15.2.0-canary.30"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:15.1.6":
+"@next/swc-darwin-x64@npm:15.2.0-canary.30":
-  version: 15.1.6
+  version: 15.2.0-canary.30
-  resolution: "@next/swc-darwin-x64@npm:15.1.6"
+  resolution: "@next/swc-darwin-x64@npm:15.2.0-canary.30"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:15.1.6":
+"@next/swc-linux-arm64-gnu@npm:15.2.0-canary.30":
-  version: 15.1.6
+  version: 15.2.0-canary.30
-  resolution: "@next/swc-linux-arm64-gnu@npm:15.1.6"
+  resolution: "@next/swc-linux-arm64-gnu@npm:15.2.0-canary.30"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:15.1.6":
+"@next/swc-linux-arm64-musl@npm:15.2.0-canary.30":
-  version: 15.1.6
+  version: 15.2.0-canary.30
-  resolution: "@next/swc-linux-arm64-musl@npm:15.1.6"
+  resolution: "@next/swc-linux-arm64-musl@npm:15.2.0-canary.30"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:15.1.6":
+"@next/swc-linux-x64-gnu@npm:15.2.0-canary.30":
-  version: 15.1.6
+  version: 15.2.0-canary.30
-  resolution: "@next/swc-linux-x64-gnu@npm:15.1.6"
+  resolution: "@next/swc-linux-x64-gnu@npm:15.2.0-canary.30"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:15.1.6":
+"@next/swc-linux-x64-musl@npm:15.2.0-canary.30":
-  version: 15.1.6
+  version: 15.2.0-canary.30
-  resolution: "@next/swc-linux-x64-musl@npm:15.1.6"
+  resolution: "@next/swc-linux-x64-musl@npm:15.2.0-canary.30"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:15.1.6":
+"@next/swc-win32-arm64-msvc@npm:15.2.0-canary.30":
-  version: 15.1.6
+  version: 15.2.0-canary.30
-  resolution: "@next/swc-win32-arm64-msvc@npm:15.1.6"
+  resolution: "@next/swc-win32-arm64-msvc@npm:15.2.0-canary.30"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-x64-msvc@npm:15.1.6":
+"@next/swc-win32-x64-msvc@npm:15.2.0-canary.30":
-  version: 15.1.6
+  version: 15.2.0-canary.30
-  resolution: "@next/swc-win32-x64-msvc@npm:15.1.6"
+  resolution: "@next/swc-win32-x64-msvc@npm:15.2.0-canary.30"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -7644,7 +7644,7 @@ __metadata:
     imagesloaded: "npm:^5.0.0"
     isotope-layout: "npm:^3.0.6"
     jarallax: "npm:^2.2.1"
-    next: "npm:15.1.6"
+    next: "npm:15.2.0-canary.30"
     payload: "npm:^3.20.0"
     photoswipe: "npm:^5.4.4"
     postcss: "npm:^8"
@@ -7701,19 +7701,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:15.1.6":
+"next@npm:15.2.0-canary.30":
-  version: 15.1.6
+  version: 15.2.0-canary.30
-  resolution: "next@npm:15.1.6"
+  resolution: "next@npm:15.2.0-canary.30"
   dependencies:
-    "@next/env": "npm:15.1.6"
+    "@next/env": "npm:15.2.0-canary.30"
-    "@next/swc-darwin-arm64": "npm:15.1.6"
+    "@next/swc-darwin-arm64": "npm:15.2.0-canary.30"
-    "@next/swc-darwin-x64": "npm:15.1.6"
+    "@next/swc-darwin-x64": "npm:15.2.0-canary.30"
-    "@next/swc-linux-arm64-gnu": "npm:15.1.6"
+    "@next/swc-linux-arm64-gnu": "npm:15.2.0-canary.30"
-    "@next/swc-linux-arm64-musl": "npm:15.1.6"
+    "@next/swc-linux-arm64-musl": "npm:15.2.0-canary.30"
-    "@next/swc-linux-x64-gnu": "npm:15.1.6"
+    "@next/swc-linux-x64-gnu": "npm:15.2.0-canary.30"
-    "@next/swc-linux-x64-musl": "npm:15.1.6"
+    "@next/swc-linux-x64-musl": "npm:15.2.0-canary.30"
-    "@next/swc-win32-arm64-msvc": "npm:15.1.6"
+    "@next/swc-win32-arm64-msvc": "npm:15.2.0-canary.30"
-    "@next/swc-win32-x64-msvc": "npm:15.1.6"
+    "@next/swc-win32-x64-msvc": "npm:15.2.0-canary.30"
     "@swc/counter": "npm:0.1.3"
     "@swc/helpers": "npm:0.5.15"
     busboy: "npm:1.6.0"
@@ -7758,7 +7758,7 @@ __metadata:
       optional: true
   bin:
     next: dist/bin/next
-  checksum: 10c0/261d27589b159387700df5f40de7dee6edfc84525a090e2b29326084124fac87b033dea8b24ada2b6ade25ffc7e2169383b6e19c96ca0c33adb830f76a6d75be
+  checksum: 10c0/5337735dcd385601e427f8257db648756c6ff5b5087aca93b5ac0bc921b803e789a2607d2067173003373286ffa22fb115b295bd95f3a50486dddae9ebedcf04
   languageName: node
   linkType: hard