Skip to content

Commit ede3b80

Browse files
Yushin-Lclaude
andcommitted
Fix MDX compile error: use marked instead of MDXRemote for Supabase posts
Supabase posts contain raw markdown, not MDX. MDXRemote fails on standard HTML tags like img. DynamicPostView now uses marked to render markdown to HTML directly. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent de31dd0 commit ede3b80

2 files changed

Lines changed: 23 additions & 2 deletions

File tree

src/components/posts/DynamicPostView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { useEffect, useState } from "react";
44
import { getPublishedPostBySlug } from "@/lib/drafts/published";
5-
import PostContent from "./PostContent";
5+
import MarkdownContent from "./MarkdownContent";
66
import TagBadge from "./TagBadge";
77
import LikeButton from "./LikeButton";
88
import CommentSection from "@/components/comments/CommentSection";
@@ -63,7 +63,7 @@ export default function DynamicPostView({ slug }: DynamicPostViewProps) {
6363
</div>
6464
</div>
6565
</header>
66-
<PostContent content={post.body} />
66+
<MarkdownContent content={post.body} />
6767
<div className="mt-10 flex items-center justify-center border-t border-stone-200 pt-8">
6868
<LikeButton postSlug={slug} />
6969
</div>
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
"use client";
2+
3+
import { useMemo } from "react";
4+
import { marked } from "marked";
5+
6+
interface MarkdownContentProps {
7+
content: string;
8+
}
9+
10+
export default function MarkdownContent({ content }: MarkdownContentProps) {
11+
const html = useMemo(() => {
12+
return marked.parse(content, { async: false }) as string;
13+
}, [content]);
14+
15+
return (
16+
<div
17+
className="prose prose-stone max-w-none prose-headings:tracking-tight prose-pre:bg-[#1e1e2e] prose-pre:text-[#cdd6f4] prose-a:text-indigo-600 prose-blockquote:border-l-indigo-500"
18+
dangerouslySetInnerHTML={{ __html: html }}
19+
/>
20+
);
21+
}

0 commit comments

Comments
 (0)