remove gray-matter dep

website/package.json

@@ -42,7 +42,6 @@
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.0.2",
-    "gray-matter": "^4.0.3",
     "input-otp": "^1.2.4",
     "lucide-react": "^0.376.0",
     "next": "14.2.3",

website/src/app/(base)/cafe/[slug]/page.tsx

@@ -1,13 +1,11 @@
 import { getPostBySlug, getPostsByGroup } from '~/lib/posts';
 import { base_url } from '~/lib/utils';
-import { MDXRemote } from "next-mdx-remote/rsc";
 
 export default async function CafeSubPage({ params }: { params: { slug: string } }) {
 	const post = await getPostBySlug(params.slug);
 
-
 	return <article className="prose prose-neutral">
-		<MDXRemote source={post.value} />
+		{post.value}
 	</article>
 }
 

website/src/app/(base)/music/[slug]/page.tsx

@@ -4,7 +4,9 @@ import { base_url } from '~/lib/utils';
 export default async function MusicSubPage({ params }: { params: { slug: string } }) {
 	const post = await getPostBySlug(params.slug);
 
-	return <article className="prose prose-neutral" dangerouslySetInnerHTML={{ __html: post.value }} />
+	return <article className="prose prose-neutral">
+		{post.value}
+	</article>
 }
 
 export async function generateStaticParams() {

website/src/lib/posts.ts

@@ -1,8 +1,7 @@
 import path from "path"
 import { readdir } from 'node:fs/promises';
 import { readFile } from 'node:fs/promises';
-import gray_matter from "gray-matter";
-
+import { compileMDX } from "next-mdx-remote/rsc";
 
 const post_groups = ["cafe", "music"];
 
@@ -21,7 +20,7 @@ export async function getPosts() {
 			const filePath = path.join(postsDirectory, filename)
 			const contents = await readFile(filePath, 'utf8')
 
-			const { data: frontmatter, content } = gray_matter(contents);
+			const { frontmatter, content } = await parse(contents)
 
 			posts.push({
 				value: content,
@@ -42,6 +41,15 @@ export async function getPosts() {
 	return sorted_posts;
 }
 
+async function parse(contents: string) {
+	return await compileMDX({
+		source: contents,
+		options: {
+			parseFrontmatter: true,
+		},
+	});
+}
+
 export async function getPostURLs() {
 	const posts = await getPosts();
 	return posts.map((p: any) => {