feat: complete MDX migration, stabilize environment & verify via E2E tests

Former-commit-id: ec3e64156a2e182535cbdcf0d975cd54603a517d

lib/blog.ts

@@ -1,31 +1,9 @@
-import { getPayload } from 'payload';
-import configPromise from '@payload-config';
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
 import { config } from '@/lib/config';
 
-export function extractExcerpt(content: string): string {
-  if (!content) return '';
-  // Remove frontmatter if present (though matter() usually strips it out)
-  let text = content.replace(/^---[\s\S]*?---/, '');
-  // Remove MDX component imports and usages
-  text = text.replace(/<[^>]+>/g, '');
-  text = text.replace(/^[ \t]*import\s+.*$/gm, '');
-  text = text.replace(/^[ \t]*export\s+.*$/gm, '');
-  // Remove markdown headings
-  text = text.replace(/^#+.*$/gm, '');
-  // Extract first paragraph or combined lines
-  const paragraphs = text
-    .split(/\n\s*\n/)
-    .filter((p) => p.trim() && !p.trim().startsWith('---') && !p.trim().startsWith('#'));
-  if (paragraphs.length === 0) return '';
-
-  const excerpt = paragraphs[0]
-    .replace(/[*_`]/g, '') // remove markdown bold/italic/code
-    .replace(/\[(.*?)\]\(.*?\)/g, '$1') // replace links with their text
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return excerpt.length > 200 ? excerpt.slice(0, 197) + '...' : excerpt;
-}
+const BLOG_DIR = path.join(process.cwd(), 'content', 'blog');
 
 export interface PostFrontmatter {
   title: string;
@@ -41,149 +19,52 @@ export interface PostFrontmatter {
 export interface PostData {
   slug: string;
   frontmatter: PostFrontmatter;
-  content: any; // Mapped to Lexical SerializedEditorState
+  content: string;
 }
 
 export function isPostVisible(post: { frontmatter: { date: string; public?: boolean } }) {
-  // If explicitly marked as not public, hide in production
   if (post.frontmatter.public === false && config.isProduction) {
     return false;
   }
-
   const postDate = new Date(post.frontmatter.date);
   const now = new Date();
   return !(postDate > now && config.isProduction);
 }
 
 export async function getPostBySlug(slug: string, locale: string): Promise<PostData | null> {
-  try {
-    const payload = await getPayload({ config: configPromise });
+  // Check locale-specific directory first
+  const localeDir = path.join(process.cwd(), 'content', locale, 'blog');
+  const filePath = path.join(localeDir, `${slug}.mdx`);
 
-    // First try: Find in the requested locale
-    let { docs } = await payload.find({
-      collection: 'posts',
-      where: {
-        slug: { equals: slug },
-        ...(!config.showDrafts ? { _status: { equals: 'published' } } : {}),
-      },
-      locale: locale as any,
-      draft: config.showDrafts,
-      limit: 1,
-    });
+  if (!fs.existsSync(filePath)) return null;
 
-    // Fallback: If not found, try searching across all locales.
-    // This happens when a user uses the static language switcher
-    // e.g. switching from /en/blog/en-slug to /de/blog/en-slug.
-    if (!docs || docs.length === 0) {
-      const { docs: crossLocaleDocs } = await payload.find({
-        collection: 'posts',
-        where: {
-          slug: { equals: slug },
-          ...(!config.showDrafts ? { _status: { equals: 'published' } } : {}),
-        },
-        locale: 'all',
-        draft: config.showDrafts,
-        limit: 1,
-      });
+  const source = fs.readFileSync(filePath, 'utf8');
+  const { content, data } = matter(source);
 
-      if (crossLocaleDocs && crossLocaleDocs.length > 0) {
-        // Fetch the found document again, but strictly in the requested locale
-        // so we get the correctly translated fields (like the localized slug)
-        const { docs: correctLocaleDocs } = await payload.find({
-          collection: 'posts',
-          where: {
-            id: { equals: crossLocaleDocs[0].id },
-          },
-          locale: locale as any,
-          draft: config.showDrafts,
-          limit: 1,
-        });
-
-        docs = correctLocaleDocs;
-      }
-    }
-
-    if (!docs || docs.length === 0) return null;
-
-    const doc = docs[0];
-
-    return {
-      slug: doc.slug,
-      frontmatter: {
-        title: doc.title,
-        date: doc.date,
-        excerpt: doc.excerpt || '',
-        category: doc.category || '',
-        featuredImage:
-          typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-            ? doc.featuredImage.url || doc.featuredImage.sizes?.card?.url
-            : null,
-        focalX:
-          typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-            ? doc.featuredImage.focalX
-            : 50,
-        focalY:
-          typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-            ? doc.featuredImage.focalY
-            : 50,
-        public: doc._status === 'published',
-      } as PostFrontmatter,
-      content: doc.content as any, // Native Lexical Editor State
-    };
-  } catch (error) {
-    console.error(`[Payload] getPostBySlug failed for ${slug}:`, error);
-    return null;
-  }
+  return {
+    slug,
+    frontmatter: data as PostFrontmatter,
+    content,
+  };
 }
 
 export async function getAllPosts(locale: string): Promise<PostData[]> {
-  try {
-    const payload = await getPayload({ config: configPromise });
-    const { docs } = await payload.find({
-      collection: 'posts',
-      where: {
-        ...(!config.showDrafts ? { _status: { equals: 'published' } } : {}),
-      },
-      locale: locale as any,
-      sort: '-date',
-      draft: config.showDrafts,
-      limit: 100,
-    });
+  const localeDir = path.join(process.cwd(), 'content', locale, 'blog');
+  if (!fs.existsSync(localeDir)) return [];
 
-    console.log(`[Payload] getAllPosts for ${locale}: Found ${docs.length} docs`);
+  const files = fs.readdirSync(localeDir).filter(f => f.endsWith('.mdx'));
+  
+  const posts = await Promise.all(
+    files.map(async f => {
+      const slug = f.replace('.mdx', '');
+      return await getPostBySlug(slug, locale);
+    })
+  );
 
-    const posts = docs.map((doc) => {
-      return {
-        slug: doc.slug,
-        frontmatter: {
-          title: doc.title,
-          date: doc.date,
-          excerpt: doc.excerpt || '',
-          category: doc.category || '',
-          featuredImage:
-            typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-              ? doc.featuredImage.url || doc.featuredImage.sizes?.card?.url
-              : null,
-          focalX:
-            typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-              ? doc.featuredImage.focalX
-              : 50,
-          focalY:
-            typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-              ? doc.featuredImage.focalY
-              : 50,
-        } as PostFrontmatter,
-        // Pass the Lexical content object rather than raw markdown string
-        content: doc.content as any,
-      };
-    });
-
-    // Integrity check: only show posts with a featured image in listings/sitemap
-    return posts.filter((p) => !!p.frontmatter.featuredImage);
-  } catch (error) {
-    console.error(`[Payload] getAllPosts failed for ${locale}:`, error);
-    return [];
-  }
+  return posts
+    .filter((p): p is PostData => p !== null)
+    .filter(isPostVisible)
+    .sort((a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime());
 }
 
 export async function getAllPostsMetadata(locale: string): Promise<Partial<PostData>[]> {
@@ -210,34 +91,10 @@ export async function getAdjacentPosts(
     return { prev: null, next: null };
   }
 
-  // Posts are sorted by date descending (newest first)
-  // So "next" post (newer) is at index - 1
-  // And "previous" post (older) is at index + 1
   let next = currentIndex > 0 ? posts[currentIndex - 1] : null;
   let prev = currentIndex < posts.length - 1 ? posts[currentIndex + 1] : null;
 
-  let isNextRandom = false;
-  let isPrevRandom = false;
-
-  const getRandomPost = (excludeSlugs: string[]) => {
-    const available = posts.filter((p) => !excludeSlugs.includes(p.slug));
-    if (available.length === 0) return null;
-    return available[Math.floor(Math.random() * available.length)];
-  };
-
-  // If there's no next post (we are at the newest post), show a random post instead
-  if (!next && posts.length > 2) {
-    next = getRandomPost([slug, prev?.slug].filter(Boolean) as string[]);
-    isNextRandom = true;
-  }
-
-  // If there's no previous post (we are at the oldest post), show a random post instead
-  if (!prev && posts.length > 2) {
-    prev = getRandomPost([slug, next?.slug].filter(Boolean) as string[]);
-    isPrevRandom = true;
-  }
-
-  return { prev, next, isPrevRandom, isNextRandom };
+  return { prev, next };
 }
 
 export function getReadingTime(content: string): number {
@@ -249,75 +106,18 @@ export function getReadingTime(content: string): number {
 
 export function generateHeadingId(text: string): string {
   let id = text.toLowerCase();
-  id = id.replace(/ä/g, 'ae');
-  id = id.replace(/ö/g, 'oe');
-  id = id.replace(/ü/g, 'ue');
-  id = id.replace(/ß/g, 'ss');
-
-  id = id.replace(/[*_`]/g, '');
-  id = id.replace(/[^\w\s-]/g, '');
-  id = id
-    .replace(/\s+/g, '-')
-    .replace(/-+/g, '-')
-    .replace(/^-+|-+$/g, '');
-
+  id = id.replace(/ä/g, 'ae').replace(/ö/g, 'oe').replace(/ü/g, 'ue').replace(/ß/g, 'ss');
+  id = id.replace(/[^\w\s-]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-').replace(/^-+|-+$/g, '');
   return id || 'heading';
 }
 
-export function getTextContent(node: any): string {
-  if (typeof node === 'string') return node;
-  if (typeof node === 'number') return node.toString();
-  if (Array.isArray(node)) return node.map(getTextContent).join('');
-  if (node && typeof node === 'object' && node.props && node.props.children) {
-    return getTextContent(node.props.children);
-  }
-  return '';
-}
-
 export function getHeadings(content: string): { id: string; text: string; level: number }[] {
-  const headingLines = content.split('\n').filter((line) => line.match(/^#{1,3}\s/));
+  const headingLines = content.split('\n').filter((line) => line.match(/^#{2,4}\s/));
 
   return headingLines.map((line) => {
-    const level = (line.match(/^#+/)?.[0].length || 0) + 1; // Shift H1->H2, H2->H3, H3->H4
-    const rawText = line.replace(/^#+\s/, '').trim();
-    const cleanText = rawText.replace(/[*_`]/g, '');
-    const id = generateHeadingId(cleanText);
-
-    return { id, text: cleanText, level };
+    const level = line.match(/^#+/)?.[0].length || 2;
+    const text = line.replace(/^#+\s/, '').trim();
+    const id = generateHeadingId(text);
+    return { id, text, level };
   });
 }
-
-export function extractLexicalHeadings(
-  node: any,
-  headings: { id: string; text: string; level: number }[] = [],
-): { id: string; text: string; level: number }[] {
-  if (!node) return headings;
-
-  if (node.type === 'heading' && node.tag) {
-    const level = parseInt(node.tag.replace('h', ''));
-    const text = getTextContentFromLexical(node);
-    if (text) {
-      headings.push({
-        id: generateHeadingId(text),
-        text,
-        level,
-      });
-    }
-  }
-
-  if (node.children && Array.isArray(node.children)) {
-    node.children.forEach((child: any) => extractLexicalHeadings(child, headings));
-  }
-
-  return headings;
-}
-
-function getTextContentFromLexical(node: any): string {
-  if (node.type === 'text') {
-    return node.text || '';
-  }
-  if (node.children && Array.isArray(node.children)) {
-    return node.children.map(getTextContentFromLexical).join('');
-  }
-  return '';
-}

lib/mdx.ts

@@ -0,0 +1,21 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+
+const CONTENT_DIR = path.join(process.cwd(), 'content');
+
+export async function getMdxContent(locale: string, slug: string) {
+  const filePath = path.join(CONTENT_DIR, locale, `${slug}.mdx`);
+  
+  if (!fs.existsSync(filePath)) {
+    return null;
+  }
+
+  const source = fs.readFileSync(filePath, 'utf8');
+  const { content, data } = matter(source);
+
+  return {
+    content,
+    frontmatter: data,
+  };
+}

lib/pages.ts

@@ -1,193 +1,76 @@
-import { getPayload } from 'payload';
-import configPromise from '@payload-config';
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
 import { mapSlugToFileSlug } from './slugs';
-import { config } from '@/lib/config';
+
+const CONTENT_DIR = path.join(process.cwd(), 'content');
 
 export interface PageFrontmatter {
   title: string;
-  excerpt: string;
-  featuredImage: string | null;
+  excerpt?: string;
+  featuredImage?: string | null;
   focalX?: number;
   focalY?: number;
   layout?: 'default' | 'fullBleed';
   public?: boolean;
+  description?: string;
 }
 
 export interface PageData {
   slug: string;
   frontmatter: PageFrontmatter;
-  content: any; // Lexical AST Document
-}
-
-function mapDoc(doc: any): PageData {
-  return {
-    slug: doc.slug,
-    frontmatter: {
-      title: doc.title,
-      excerpt: doc.excerpt || '',
-      featuredImage:
-        typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-          ? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url
-          : null,
-      focalX:
-        typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-          ? doc.featuredImage.focalX
-          : 50,
-      focalY:
-        typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-          ? doc.featuredImage.focalY
-          : 50,
-      layout: doc.layout || 'default',
-    } as PageFrontmatter,
-    content: doc.content as any,
-  };
+  content: string;
 }
 
 export async function getPageBySlug(slug: string, locale: string): Promise<PageData | null> {
-  // Guard against invalid locales hitting the DB (e.g. favicon.ico, assets)
-  if (locale !== 'de' && locale !== 'en') {
+  const fileSlug = await mapSlugToFileSlug(slug, locale);
+  const filePath = path.join(CONTENT_DIR, locale, `${fileSlug}.mdx`);
+  
+  if (!fs.existsSync(filePath)) {
     return null;
   }
 
-  try {
-    const payload = await getPayload({ config: configPromise });
-    const fileSlug = await mapSlugToFileSlug(slug, locale);
+  const source = fs.readFileSync(filePath, 'utf8');
+  const { content, data } = matter(source);
 
-    // Try finding exact match first
-    let result = await payload.find({
-      collection: 'pages',
-      where: {
-        and: [
-          { slug: { equals: fileSlug } },
-          ...(!config.showDrafts ? [{ _status: { equals: 'published' } }] : []),
-        ],
-      },
-      locale: locale as any,
-      depth: 1,
-      limit: 1,
-    });
-
-    // Fallback: search ALL locales
-    if (result.docs.length === 0) {
-      const crossResult = await payload.find({
-        collection: 'pages',
-        where: {
-          and: [
-            { slug: { equals: fileSlug } },
-            ...(!config.showDrafts ? [{ _status: { equals: 'published' } }] : []),
-          ],
-        },
-        locale: 'all',
-        depth: 1,
-        limit: 1,
-      });
-
-      if (crossResult.docs.length > 0) {
-        // Fetch missing exact match by internal id
-        result = await payload.find({
-          collection: 'pages',
-          where: {
-            id: { equals: crossResult.docs[0].id },
-          },
-          locale: locale as any,
-          depth: 1,
-          limit: 1,
-        });
-      }
-    }
-
-    if (result.docs.length > 0) {
-      const doc = result.docs[0];
-
-      return {
-        slug: doc.slug,
-        frontmatter: {
-          title: doc.title,
-          excerpt: doc.excerpt || '',
-          featuredImage:
-            typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-              ? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url
-              : null,
-          focalX:
-            typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-              ? doc.featuredImage.focalX
-              : 50,
-          focalY:
-            typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-              ? doc.featuredImage.focalY
-              : 50,
-          layout:
-            doc.layout === 'fullBleed' || doc.layout === 'default'
-              ? doc.layout
-              : ('default' as const),
-        },
-        content: doc.content,
-      };
-    }
-
-    return null;
-  } catch (error) {
-    console.error(`[Payload] getPageBySlug failed for ${slug}:`, error);
-    return null;
-  }
+  return {
+    slug,
+    frontmatter: data as PageFrontmatter,
+    content,
+  };
 }
 
 export async function getAllPages(locale: string): Promise<PageData[]> {
-  if (locale !== 'de' && locale !== 'en') {
-    return [];
-  }
+  const localeDir = path.join(CONTENT_DIR, locale);
+  if (!fs.existsSync(localeDir)) return [];
 
-  try {
-    const payload = await getPayload({ config: configPromise });
+  const files = fs.readdirSync(localeDir).filter(f => f.endsWith('.mdx'));
+  
+  const pages = await Promise.all(
+    files.map(async f => {
+      const slug = f.replace('.mdx', '');
+      return await getPageBySlug(slug, locale);
+    })
+  );
 
-    const result = await payload.find({
-      collection: 'pages' as any,
-      locale: locale as any,
-      limit: 100,
-    });
-
-    return (result.docs as any[]).map(mapDoc);
-  } catch (error) {
-    console.error(`[Payload] getAllPages failed for ${locale}:`, error);
-    return [];
-  }
+  return pages.filter((p): p is PageData => p !== null);
 }
 
-export async function getAllPagesMetadata(locale: string): Promise<Partial<PageData>[]> {
-  if (locale !== 'de' && locale !== 'en') {
-    return [];
-  }
+export async function getAllPagesMetadata(locale: string): Promise<PageData[]> {
+  const localeDir = path.join(CONTENT_DIR, locale);
+  if (!fs.existsSync(localeDir)) return [];
 
-  try {
-    const payload = await getPayload({ config: configPromise });
-
-    const result = await payload.find({
-      collection: 'pages' as any,
-      locale: locale as any,
-      limit: 100,
-    });
-
-    return (result.docs as any[]).map((doc: any) => ({
-      slug: doc.slug,
-      frontmatter: {
-        title: doc.title,
-        excerpt: doc.excerpt || '',
-        featuredImage:
-          typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-            ? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url
-            : null,
-        focalX:
-          typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-            ? doc.featuredImage.focalX
-            : 50,
-        focalY:
-          typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-            ? doc.featuredImage.focalY
-            : 50,
-      } as PageFrontmatter,
-    }));
-  } catch (error) {
-    console.error(`[Payload] getAllPagesMetadata failed for ${locale}:`, error);
-    return [];
-  }
+  const files = fs.readdirSync(localeDir).filter(f => f.endsWith('.mdx'));
+  
+  return files.map(f => {
+    const slug = f.replace('.mdx', '');
+    const filePath = path.join(localeDir, f);
+    const source = fs.readFileSync(filePath, 'utf8');
+    const { data } = matter(source);
+    return {
+      slug,
+      frontmatter: data as PageFrontmatter,
+      content: '', // Metadata only
+    };
+  });
 }