From d2ce6bb4185e773aefc71fd916a491a78acaef09 Mon Sep 17 00:00:00 2001
From: highperfocused <highperfocused@pm.me>
Date: Sun, 5 Oct 2025 20:42:15 +0200
Subject: [PATCH] Enhance Markdown rendering with custom heading styles and add
 typography plugin to Tailwind CSS

---
 src/components/MarkdownContent.tsx | 33 +++++++++++++++++++++++++++++-
 tailwind.config.ts                 |  3 ++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/components/MarkdownContent.tsx b/src/components/MarkdownContent.tsx
index 7ece0e7..77c9e28 100644
--- a/src/components/MarkdownContent.tsx
+++ b/src/components/MarkdownContent.tsx
@@ -15,10 +15,41 @@ interface MarkdownContentProps {
  */
 export function MarkdownContent({ content, className }: MarkdownContentProps) {
   return (
-    <div className={cn('prose prose-slate dark:prose-invert max-w-none break-words overflow-wrap-anywhere', className)}>
+    <div className={cn('prose prose-slate dark:prose-invert prose-headings:font-bold prose-h1:text-4xl prose-h2:text-3xl prose-h3:text-2xl prose-h4:text-xl prose-h5:text-lg prose-h6:text-base max-w-none break-words overflow-wrap-anywhere', className)}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{
+          // Custom heading renderers with explicit styling
+          h1: ({ node, children, ...props }) => (
+            <h1 className="text-4xl font-bold mt-8 mb-4" {...props}>
+              {children}
+            </h1>
+          ),
+          h2: ({ node, children, ...props }) => (
+            <h2 className="text-3xl font-bold mt-6 mb-3" {...props}>
+              {children}
+            </h2>
+          ),
+          h3: ({ node, children, ...props }) => (
+            <h3 className="text-2xl font-bold mt-5 mb-2" {...props}>
+              {children}
+            </h3>
+          ),
+          h4: ({ node, children, ...props }) => (
+            <h4 className="text-xl font-bold mt-4 mb-2" {...props}>
+              {children}
+            </h4>
+          ),
+          h5: ({ node, children, ...props }) => (
+            <h5 className="text-lg font-bold mt-3 mb-1" {...props}>
+              {children}
+            </h5>
+          ),
+          h6: ({ node, children, ...props }) => (
+            <h6 className="text-base font-bold mt-2 mb-1" {...props}>
+              {children}
+            </h6>
+          ),
           // Custom link renderer to handle nostr: URIs
           a: ({ node, href, children, ...props }) => {
             // Handle nostr: URIs
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8ff2536..07a1799 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,6 @@
 import type { Config } from "tailwindcss";
 import tailwindcssAnimate from "tailwindcss-animate";
+import typography from "@tailwindcss/typography";
 
 export default {
 	darkMode: ["class"],
@@ -93,5 +94,5 @@ export default {
 			}
 		}
 	},
-	plugins: [tailwindcssAnimate],
+	plugins: [tailwindcssAnimate, typography],
 } satisfies Config;