.profile/app/blog/[slug]/page.tsx

import type { Metadata } from 'next'
import { notFound } from 'next/navigation'

import 'katex/dist/katex.min.css'

import { getBlogPostBySlug } from '@/blog/blog'
import { BlogPost } from '@/blog/BlogPost'

interface BlogPostPageProps {
  params: {
    slug: string
  }
}

export const generateMetadata = async (
  props: BlogPostPageProps
): Promise<Metadata> => {
  const blogPost = await getBlogPostBySlug(props.params.slug)
  if (blogPost == null) {
    return notFound()
  }
  const title = `${blogPost.frontmatter.title} | Théo LUDWIG`
  const description = blogPost.frontmatter.description
  return {
    title,
    description,
    openGraph: {
      title,
      description
    },
    twitter: {
      title,
      description
    }
  }
}

const BlogPostPage = async (props: BlogPostPageProps): Promise<JSX.Element> => {
  const { params } = props

  return <BlogPost slug={params.slug} />
}

export default BlogPostPage