fad-trade-next/app/[locale]/blog/[slug]/page.tsx

import { Callout } from "@/components/mdx/Callout";
import MDXComponents from "@/components/mdx/MDXComponents";
import { Locale, LOCALES } from "@/i18n/routing";
import { getPosts } from "@/lib/getBlogs";
import { constructMetadata } from "@/lib/metadata";
import { BlogPost } from "@/types/blog";
import fs from "fs/promises";
import matter from 'gray-matter';
import { Metadata } from "next";
import { MDXRemote } from "next-mdx-remote-client/rsc";
import { notFound } from "next/navigation";
import path from "path";

type Params = Promise<{
  locale: string;
  slug: string;
}>;

type MetadataProps = {
  params: Params;
};

async function getMDXContent(locale: string, section: string): Promise<BlogPost> {
  const filePath = path.join(
    process.cwd(),
    "blogs",
    locale,
    `${section}.mdx`
  );

  try {
    const content = await fs.readFile(filePath, "utf-8");

    // 解析MDX文件的frontmatter和内容
    const { data: frontmatter, content: postContent } = matter(content);

    // 构建BlogPost对象
    const blogPost: BlogPost = {
      locale,
      title: frontmatter.title || '',
      description: frontmatter.description,
      image: frontmatter.image,
      slug: frontmatter.slug || '',
      tags: frontmatter.tags,
      // 解析日期
      date: frontmatter.date ? new Date(frontmatter.date) : new Date(),
      // 设置visible默认值为published
      visible: frontmatter.visible || 'published',
      // 处理pin字段 - 如果有pin标记则为true，否则为false
      pin: frontmatter.pin === 'pin',
      // 去除frontmatter后的内容
      content: postContent.trim(),
      // 所有frontmatter作为metadata
      metadata: { ...frontmatter }
    };

    return blogPost;

  } catch (error) {
    console.error(`Error reading MDX file: ${error}`);
    // 返回默认的BlogPost对象（符合类型要求）
    return {
      title: '',
      slug: '',
      date: new Date(),
      content: '',
      visible: 'published',
      pin: false,
      metadata: {},
      locale
    };
  }
}

/**
 * 解析MDX内容，提取frontmatter和正文
 */
function parseMDXContent(content: string): {
  frontmatter: Record<string, any>
  content: string
} {
  // 匹配frontmatter的正则表达式（---开头和结尾）
  const frontmatterRegex = /^---\s*[\r\n]([\s\S]*?)[\r\n]---\s*[\r\n]/;
  const match = frontmatterRegex.exec(content);

  let frontmatter: Record<string, any> = {};
  let postContent = content;

  if (match && match[1]) {
    // 提取frontmatter部分并解析
    const frontmatterStr = match[1];
    postContent = content.slice(match[0].length);

    // 解析frontmatter的每一行
    const lines = frontmatterStr.split(/[\r\n]+/);
    lines.forEach(line => {
      // 跳过空行和注释
      if (!line.trim() || line.trim().startsWith('#')) return;

      // 分割键值对（支持值中有冒号的情况）
      const colonIndex = line.indexOf(':');
      if (colonIndex === -1) return;

      const key = line.substring(0, colonIndex).trim();
      let value = line.substring(colonIndex + 1).trim();

      // 移除值的引号（如果有）
      if ((value.startsWith('"') && value.endsWith('"')) ||
        (value.startsWith("'") && value.endsWith("'"))) {
        value = value.substring(1, value.length - 1);
      }

      frontmatter[key] = value;
    });
  }

  return { frontmatter, content: postContent };
}


export async function generateMetadata({
  params,
}: MetadataProps): Promise<Metadata> {
  const { locale, slug } = await params;
  let post = await getMDXContent(locale, slug);

  if (!post) {
    return constructMetadata({
      title: "404",
      description: "Page not found",
      noIndex: true,
      locale: locale as Locale,
      path: `/blog/${slug}`,
      canonicalUrl: `/blog/${slug}`,
    });
  }

  return constructMetadata({
    page: "blog",
    title: post.title || '',
    description: post.description || '',
    images: [],
    locale: locale as Locale,
    path: `/blog/${slug}`,
    canonicalUrl: `/blog/${slug}`,
  });
}

export default async function BlogPage({ params }: { params: Params }) {
  const { locale, slug } = await params;
  let post = await getMDXContent(locale, slug);

  if (!post) {
    return notFound();
  }

  return (
    <div className="w-full md:w-3/5 px-2 md:px-12">
      <h1 className="break-words text-4xl font-bold mt-6 mb-4">{post.title}</h1>
      {post.image && (
        <img src={post.image} alt={post.title} className="rounded-sm" />
      )}
      {post.tags && post.tags.split(",").length ? (
        <div className="flex flex-wrap gap-2">
          {post.tags.split(",").map((tag) => {
            return (
              <div
                key={tag}
                className={`rounded-md bg-gray-200 hover:!no-underline dark:bg-[#24272E] flex px-2.5 py-1.5 text-sm font-medium transition-colors hover:text-black hover:dark:bg-[#15AFD04C] hover:dark:text-[#82E9FF] text-gray-500 dark:text-[#7F818C] outline-none focus-visible:ring transition`}
              >
                {tag.trim()}
              </div>
            );
          })}
        </div>
      ) : (
        <></>
      )}
      {post.description && <Callout>{post.description}</Callout>}
      <MDXRemote source={post?.content || ""} components={MDXComponents} />
    </div>
  );
}

export async function generateStaticParams() {
  let posts = (await getPosts()).posts;

  // Filter out posts without a slug
  posts = posts.filter((post) => post.slug);

  return LOCALES.flatMap((locale) =>
    posts.map((post) => {
      const slugPart = post.slug.replace(/^\//, "").replace(/^blog\//, "");

      return {
        locale,
        slug: slugPart,
      };
    })
  );
}