From 3566a33b7363c0ea60738235efd456f2061db10b Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 5 Jan 2025 23:33:40 +1100
Subject: [PATCH] Enhance blog layout to support raw HTML and GitHub Flavored
 Markdown in content

---
 .../components/layout/blog-layout.component.tsx    | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/layout/blog-layout.component.tsx b/apps/web/components/layout/blog-layout.component.tsx
index 1588194..167dd35 100644
--- a/apps/web/components/layout/blog-layout.component.tsx
+++ b/apps/web/components/layout/blog-layout.component.tsx
@@ -4,6 +4,9 @@ import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
 import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
 import { ROUTES } from "../../data/routes.data";
 import { BlogPost } from "../../pages/blog";
 import { getImageUrl } from "../../utils/cms";
@@ -196,7 +199,16 @@ export default function BlogLayout({
             ) : null}
 
             <div className="blog-content-override prose dark:prose-invert prose-indigo mx-auto mt-6">
-              <ReactMarkdown>{content}</ReactMarkdown>
+              <ReactMarkdown
+                rehypePlugins={[
+                  rehypeRaw,
+                  // @ts-ignore
+                  rehypeSanitize({ tagNames: ["div", "iframe"] }),
+                  remarkGfm,
+                ]}
+              >
+                {content}
+              </ReactMarkdown>
             </div>
           </div>
         </div>