From aa91f165256d6a7d8e2a11e7d572df9ccf1c24ea Mon Sep 17 00:00:00 2001
From: bored-arvi <aravinth3007k@gmail.com>
Date: Fri, 20 Mar 2026 22:19:19 +0530
Subject: [PATCH 1/2] Add react-markdown dependency to package.json and
 package-lock.json

---
 package-lock.json | 49 ++++++++++++++++++++++++++++++++++++-----------
 package.json      |  3 ++-
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ed03548..41e7f5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "next-mdx-remote": "^5.0.0",
         "react": "^19",
         "react-dom": "^19",
+        "react-markdown": "^9.0.1",
         "serve": "^14.2.4",
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7"
@@ -1021,7 +1022,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
       "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1088,7 +1088,6 @@
       "integrity": "sha512-FuYgkHwZLuPbZjQHzJXrtXreJdFMKl16BFYyRrLxDhWr6Qr7Kbcu2s1Yhu8tsiMXw1S0W1pjfFfYEt+R604s+Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.36.0",
         "@typescript-eslint/types": "8.36.0",
@@ -1642,7 +1641,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3023,7 +3021,6 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -3193,7 +3190,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -4199,6 +4195,16 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -6579,7 +6585,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -6768,7 +6773,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6778,7 +6782,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -6793,6 +6796,33 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-markdown": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.1.0.tgz",
+      "integrity": "sha512-xaijuJB0kzGiUdG7nc2MOMDUDBWPyGAjZtUrow9XxUeua8IqeP+VlIfAZ3bphpcLTnSZXz6z9jcVC/TCwbfgdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -7968,7 +7998,6 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
       "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -8139,7 +8168,6 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8327,7 +8355,6 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/package.json b/package.json
index 3044b1a..1dddcdb 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "react-dom": "^19",
     "serve": "^14.2.4",
     "tailwind-merge": "^2.5.5",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "react-markdown": "^9.0.1"
   },
   "devDependencies": {
     "@types/node": "^22",

From aededa6c4d394708711ab43dcc5c5e0fd643eb53 Mon Sep 17 00:00:00 2001
From: bored-arvi <aravinth3007k@gmail.com>
Date: Fri, 20 Mar 2026 22:19:33 +0530
Subject: [PATCH 2/2] Refactor MarkdownRenderer to use ReactMarkdown for
 enhanced markdown rendering

---
 lib/markdown-renderer.tsx | 184 +++++++++++++-------------------------
 1 file changed, 62 insertions(+), 122 deletions(-)

diff --git a/lib/markdown-renderer.tsx b/lib/markdown-renderer.tsx
index 5a1d63a..065efb7 100644
--- a/lib/markdown-renderer.tsx
+++ b/lib/markdown-renderer.tsx
@@ -1,128 +1,68 @@
-interface MarkdownRendererProps {
-  content: string
-}
+import ReactMarkdown from "react-markdown"
+import type { Components } from "react-markdown"
+import matter from "gray-matter"
 
-// Conditionally set BASE_PATH based on environment
 const BASE_PATH = process.env.NODE_ENV === "production" ? "/StableViewpoints" : ""
 
-export function MarkdownRenderer({ content }: MarkdownRendererProps) {
-  // Enhanced markdown to HTML conversion
-  const renderMarkdown = (text: string) => {
-    let html = text
-
-    // Headers
-    html = html.replace(/^### (.*$)/gim, '<h3 class="text-xl font-medium text-gray-800 mt-5 mb-2">$1</h3>')
-    html = html.replace(/^## (.*$)/gim, '<h2 class="text-2xl font-semibold text-gray-800 mt-6 mb-3">$1</h2>')
-    html = html.replace(/^# (.*$)/gim, '<h1 class="text-3xl font-bold text-gray-900 mt-8 mb-4">$1</h1>')
-
-    // Bold and italic
-    html = html.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
-    html = html.replace(/\*(.*?)\*/g, "<em>$1</em>")
-
-    // Code blocks
-    html = html.replace(
-      /```([\s\S]*?)```/g,
-      '<pre class="bg-gray-100 p-4 rounded-lg overflow-x-auto my-4"><code class="text-sm">$1</code></pre>'
-    )
-
-    // Inline code
-    html = html.replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-1 py-0.5 rounded text-sm">$1</code>')
-
-    // Images - handle base path for GitHub Pages
-    html = html.replace(
-      /!\[(.*?)\]\((.*?)\)/gim,
-      (match, alt, src) => {
-        // Add base path to image src if it starts with /
-        const imageSrc = src.startsWith('/') ? `${BASE_PATH}${src}` : src
-        return `<div class="my-8"><img src="${imageSrc}" alt="${alt}" class="rounded-lg w-full h-auto max-w-2xl mx-auto shadow-lg" /></div>`
-      }
-    )
-
-    // Links
-    html = html.replace(
-      /\[(.*?)\]\((.*?)\)/gim,
-      '<a href="$2" target="_blank" rel="noopener noreferrer" class="text-[#228B22] hover:text-[#3E921E] underline">$1</a>',
-    )
-
-    // Blockquotes
-    html = html.replace(
-      /^> (.*$)/gim,
-      '<blockquote class="border-l-4 border-[#FFBF00] pl-4 italic text-gray-600 my-6 bg-yellow-50 py-2">$1</blockquote>',
+const components: Components = {
+  h1: ({ children }) => <h1 className="text-3xl font-bold text-gray-900 mt-8 mb-4">{children}</h1>,
+  h2: ({ children }) => <h2 className="text-2xl font-semibold text-gray-800 mt-6 mb-3">{children}</h2>,
+  h3: ({ children }) => <h3 className="text-xl font-medium text-gray-800 mt-5 mb-2">{children}</h3>,
+  h4: ({ children }) => <h4 className="text-lg font-medium text-gray-800 mt-4 mb-2">{children}</h4>,
+
+  p: ({ children }) => <p className="text-gray-700 leading-relaxed mb-4">{children}</p>,
+  strong: ({ children }) => <strong className="font-semibold text-gray-900">{children}</strong>,
+  em: ({ children }) => <em className="italic">{children}</em>,
+
+  ul: ({ children }) => <ul className="list-disc list-inside mb-4 text-gray-700 space-y-1">{children}</ul>,
+  ol: ({ children }) => <ol className="list-decimal list-inside mb-4 text-gray-700 space-y-1">{children}</ol>,
+  li: ({ children }) => <li className="mb-1">{children}</li>,
+
+  blockquote: ({ children }) => (
+    <blockquote className="border-l-4 border-[#FFBF00] pl-4 italic text-gray-600 my-6 bg-yellow-50 py-2">
+      {children}
+    </blockquote>
+  ),
+
+  hr: () => <hr className="my-8 border-gray-300" />,
+
+  code: ({ className, children, ...props }) => {
+    const isBlock = Boolean(className)
+    if (isBlock) return <code className={className}>{children}</code>
+    return <code className="bg-gray-100 px-1 py-0.5 rounded text-sm" {...props}>{children}</code>
+  },
+
+  pre: ({ children }) => (
+    <pre className="bg-gray-100 p-4 rounded-lg overflow-x-auto my-4 text-sm">{children}</pre>
+  ),
+
+  a: ({ href, children }) => (
+    <a href={href} target="_blank" rel="noopener noreferrer" className="text-[#228B22] hover:text-[#3E921E] underline">
+      {children}
+    </a>
+  ),
+
+  img: ({ src, alt }) => {
+    const resolvedSrc = typeof src === "string" && src.startsWith("/") ? `${BASE_PATH}${src}` : src
+    return (
+      <div className="my-8">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={resolvedSrc} alt={alt ?? ""} className="rounded-lg w-full h-auto max-w-2xl mx-auto shadow-lg" />
+      </div>
     )
+  },
+}
 
-    // Horizontal rules
-    html = html.replace(/^---$/gm, '<hr class="my-8 border-gray-300" />')
-
-    // Lists - improved list handling
-    const lines = html.split("\n")
-    let inList = false
-    let inOrderedList = false
-    const processedLines: string[] = []
-
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i]
-      const trimmed = line.trim()
-
-      if (trimmed.startsWith("- ")) {
-        if (!inList) {
-          processedLines.push('<ul class="list-disc list-inside mb-4 text-gray-700 space-y-1">')
-          inList = true
-        }
-        processedLines.push(`<li class="mb-1">${trimmed.substring(2)}</li>`)
-      } else if (trimmed.match(/^\d+\. /)) {
-        if (!inOrderedList) {
-          processedLines.push('<ol class="list-decimal list-inside mb-4 text-gray-700 space-y-1">')
-          inOrderedList = true
-        }
-        processedLines.push(`<li class="mb-1">${trimmed.replace(/^\d+\. /, '')}</li>`)
-      } else {
-        if (inList) {
-          processedLines.push("</ul>")
-          inList = false
-        }
-        if (inOrderedList) {
-          processedLines.push("</ol>")
-          inOrderedList = false
-        }
-        processedLines.push(line)
-      }
-    }
-
-    if (inList) {
-      processedLines.push("</ul>")
-    }
-    if (inOrderedList) {
-      processedLines.push("</ol>")
-    }
-
-    html = processedLines.join("\n")
-
-    // Paragraphs
-    const finalLines = html.split("\n")
-    const finalProcessedLines = finalLines.map((line) => {
-      const trimmed = line.trim()
-      if (trimmed === "") return ""
-      if (
-        trimmed.startsWith("<h") ||
-        trimmed.startsWith("<blockquote") ||
-        trimmed.startsWith("<ul") ||
-        trimmed.startsWith("</ul>") ||
-        trimmed.startsWith("<ol") ||
-        trimmed.startsWith("</ol>") ||
-        trimmed.startsWith("<li") ||
-        trimmed.startsWith("<div") ||
-        trimmed.startsWith("<img") ||
-        trimmed.startsWith("<pre") ||
-        trimmed.startsWith("<hr") ||
-        trimmed.startsWith("<code")
-      ) {
-        return trimmed
-      }
-      return `<p class="text-gray-700 leading-relaxed mb-4">${trimmed}</p>`
-    })
-
-    return finalProcessedLines.join("\n")
-  }
-
-  return <div className="prose prose-lg max-w-none" dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }} />
+interface MarkdownRendererProps {
+  content: string
 }
+
+export function MarkdownRenderer({ content }: MarkdownRendererProps) {
+  const { content: body } = matter(content)
+
+  return (
+    <div className="prose prose-lg max-w-none">
+      <ReactMarkdown components={components}>{body}</ReactMarkdown>
+    </div>
+  )
+}
\ No newline at end of file