feat: migrate Payload CMS to MDX and harden static infrastructure

lib/products.ts

@@ -1,6 +1,6 @@
-import { getPayload } from 'payload';
-import configPromise from '@payload-config';
-import { mapSlugToFileSlug } from './slugs';
+import fs from 'fs/promises';
+import path from 'path';
+import matter from 'gray-matter';
 import { config } from '@/lib/config';
 
 export interface ProductFrontmatter {
@@ -25,188 +25,79 @@ export async function getProductMetadata(
   slug: string,
   locale: string,
 ): Promise<Partial<ProductData> | null> {
-  const payload = await getPayload({ config: configPromise });
-  const fileSlug = await mapSlugToFileSlug(slug, locale);
+  const p = await getProductBySlug(slug, locale);
+  if (!p) return null;
+  return {
+    slug: p.slug,
+    frontmatter: p.frontmatter,
+  };
+}
 
-  const result = await payload.find({
-    collection: 'products',
-    where: {
-      and: [
-        { slug: { equals: fileSlug } },
-        ...(!config.showDrafts ? [{ _status: { equals: 'published' } }] : []),
-      ],
-    },
-    locale: locale as any,
-    depth: 1,
-    limit: 1,
-  });
+export async function getProductBySlug(slug: string, locale: string): Promise<ProductData | null> {
+  try {
+    const filePath = path.join(process.cwd(), 'content', 'products', `${slug}.mdx`);
+    const fileContent = await fs.readFile(filePath, 'utf-8');
+    const { data, content } = matter(fileContent);
 
-  if (result.docs.length > 0) {
-    const doc = result.docs[0];
+    let parsedContent = content;
+    try {
+      if (content.trim().startsWith('{')) {
+        parsedContent = JSON.parse(content);
+      }
+    } catch (e) {
+      // Not JSON
+    }
 
-    // Process Images
-    const resolvedImages = ((doc.images as any[]) || [])
-      .map((img) => (typeof img === 'string' ? img : img.url))
+    // Filter images
+    const resolvedImages = ((data.images as any[]) || [])
+      .map((img) => (typeof img === 'string' ? img : img?.url))
       .filter(Boolean);
 
     if (resolvedImages.length === 0) return null;
 
     return {
-      slug: doc.slug,
+      slug,
       frontmatter: {
-        title: doc.title,
-        sku: doc.sku,
-        description: doc.description,
-        categories: Array.isArray(doc.categories) ? doc.categories.map((c: any) => c.category) : [],
+        title: data.title || '',
+        sku: data.sku || '',
+        description: data.description || '',
+        categories: Array.isArray(data.categories)
+          ? data.categories.map((c: any) => c?.category || c)
+          : [],
         images: resolvedImages,
+        focalX: data.focalX || 50,
+        focalY: data.focalY || 50,
       },
+      content: parsedContent,
+      application: data.application,
     };
-  }
-
-  return null;
-}
-
-export async function getProductBySlug(slug: string, locale: string): Promise<ProductData | null> {
-  try {
-    const payload = await getPayload({ config: configPromise });
-    const fileSlug = await mapSlugToFileSlug(slug, locale);
-
-    const result = await payload.find({
-      collection: 'products',
-      where: {
-        and: [
-          { slug: { equals: fileSlug } },
-          ...(!config.showDrafts ? [{ _status: { equals: 'published' } }] : []),
-        ],
-      },
-      locale: locale as any,
-      depth: 1,
-      limit: 1,
-    });
-
-    if (result.docs.length > 0) {
-      const doc = result.docs[0];
-
-      // Map Images correctly from resolved Media docs
-      const resolvedImages = ((doc.images as any[]) || [])
-        .map((img) => (typeof img === 'string' ? img : img.url))
-        .filter(Boolean);
-
-      if (resolvedImages.length === 0) return null;
-
-      return {
-        slug: doc.slug,
-        frontmatter: {
-          title: doc.title,
-          sku: doc.sku,
-          description: doc.description,
-          categories: Array.isArray(doc.categories)
-            ? doc.categories.map((c: any) => c.category)
-            : [],
-          images: resolvedImages,
-          focalX:
-            Array.isArray(doc.images) && doc.images.length > 0 && typeof doc.images[0] === 'object'
-              ? doc.images[0].focalX
-              : 50,
-          focalY:
-            Array.isArray(doc.images) && doc.images.length > 0 && typeof doc.images[0] === 'object'
-              ? doc.images[0].focalY
-              : 50,
-        },
-        content: doc.content,
-        application: doc.application,
-      };
-    }
-
-    return null;
   } catch (error) {
-    console.error(`[Payload] getProductBySlug failed for ${slug}:`, error);
+    console.error(`getProductBySlug failed for ${slug}:`, error);
     return null;
   }
 }
 
 export async function getAllProductSlugs(locale: string): Promise<string[]> {
   try {
-    const payload = await getPayload({ config: configPromise });
-    const result = await payload.find({
-      collection: 'products',
-      where: {
-        ...(!config.showDrafts ? { _status: { equals: 'published' } } : {}),
-      },
-      locale: locale as any,
-      pagination: false,
-    });
-
-    return result.docs.map((doc) => doc.slug);
+    const dir = path.join(process.cwd(), 'content', 'products');
+    const files = await fs.readdir(dir);
+    return files.filter((f) => f.endsWith('.mdx')).map((f) => f.replace('.mdx', ''));
   } catch (error) {
-    console.error(`[Payload] getAllProductSlugs failed for ${locale}:`, error);
+    console.error(`getAllProductSlugs failed for ${locale}:`, error);
     return [];
   }
 }
 
 export async function getAllProducts(locale: string): Promise<ProductData[]> {
   try {
-    const payload = await getPayload({ config: configPromise });
-
-    const selectFields = {
-      title: true,
-      slug: true,
-      sku: true,
-      description: true,
-      categories: true,
-      images: true,
-    } as const;
-
-    const result = await payload.find({
-      collection: 'products',
-      where: {
-        ...(!config.showDrafts ? { _status: { equals: 'published' } } : {}),
-      },
-      locale: locale as any,
-      depth: 1,
-      pagination: false,
-      select: selectFields,
-    });
-
-    console.log(`[Payload] getAllProducts for ${locale}: Found ${result.docs.length} docs`);
-
-    let products: ProductData[] = result.docs.map((doc) => {
-      const resolvedImages = ((doc.images as any[]) || [])
-        .map((img) => (typeof img === 'string' ? img : img.url))
-        .filter(Boolean) as string[];
-
-      const plainCategories = Array.isArray(doc.categories)
-        ? doc.categories.map((c: any) => String(c.category))
-        : [];
-
-      return {
-        slug: String(doc.slug),
-        frontmatter: {
-          title: String(doc.title),
-          sku: doc.sku ? String(doc.sku) : '',
-          description: doc.description ? String(doc.description) : '',
-          categories: plainCategories,
-          images: resolvedImages,
-          focalX:
-            Array.isArray(doc.images) && doc.images.length > 0 && typeof doc.images[0] === 'object'
-              ? doc.images[0].focalX
-              : 50,
-          focalY:
-            Array.isArray(doc.images) && doc.images.length > 0 && typeof doc.images[0] === 'object'
-              ? doc.images[0].focalY
-              : 50,
-        },
-        content: null,
-        application: null,
-      };
-    });
-
-    // Filter out products with 0 images (data integrity check to prevent 404s)
-    products = products.filter((p) => p.frontmatter.images && p.frontmatter.images.length > 0);
-
-    return products;
+    const slugs = await getAllProductSlugs(locale);
+    const products = await Promise.all(slugs.map((slug) => getProductBySlug(slug, locale)));
+    return products.filter(
+      (p): p is ProductData =>
+        p !== null && p.frontmatter.images && p.frontmatter.images.length > 0,
+    );
   } catch (error) {
-    console.error(`[Payload] getAllProducts failed for ${locale}:`, error);
+    console.error(`getAllProducts failed for ${locale}:`, error);
     return [];
   }
 }