-
Notifications
You must be signed in to change notification settings - Fork 1
/
BlogPost.tsx
35 lines (29 loc) · 1.07 KB
/
BlogPost.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { MDXRemote } from "next-mdx-remote/rsc";
import React from "react";
import { loadBlogPost } from "@/helpers/file-helpers";
import COMPONENT_MAP from "@/helpers/mdx-components";
import styles from "./BlogPost.module.css";
export type BlogPostParams = {
params: { postSlug: string };
};
async function BlogPost({ params }: BlogPostParams) {
const { frontmatter, content } = await loadBlogPost(params.postSlug);
const { title, chatGPTPrompt } = frontmatter;
return (
<main className={styles.wrapper}>
<section className={styles.blogHero}>
<h1 className={styles.blogTitle}>{title}</h1>
<p className={styles.disclaimer}>
Note: this post was <strong>generated by ChatGPT</strong> with the
prompt “{chatGPTPrompt}.” The quality of this post is
questionable at best.
</p>
</section>
<section className={styles.content}>
<MDXRemote source={content} components={COMPONENT_MAP} />
</section>
{/* TODO: add table of contents */}
</main>
);
}
export default BlogPost;