refactor: streamline markdown processing by removing hashtag handling in headings and enhancing sanitization logic

Author: Llewellyn500

app/globals.css

@@ -349,6 +349,11 @@
   font-size: smaller;
 }
 
+.markdown-body [id]::before {
+  content: attr(id);
+  display: none;
+}
+
 iframe {
   width: 100% !important;
   height: 35rem !important;

components/ArticleContent.tsx

@@ -12,37 +12,19 @@ const ArticleContent: React.FC<ArticleContentProps> = ({ content }) => {
   const [sanitizedContent, setSanitizedContent] = useState<string>("");
 
   useEffect(() => {
-    async function processContent() {
-      // Convert markdown to HTML with Marked and await the result
-      const rawHtml = await marked.parse(content);
-
-      // Remove #hashtags specifically from heading text using a regex on <hN> blocks
-      const htmlNoHashtagsInHeadings = rawHtml.replace(
-        /(<h[1-6][^>]*>)([^<]+)(<\/h[1-6]>)/g,
-        (match, openTag, headingText, closeTag) => {
-          // Remove all occurrences of #something
-          const textWithoutHashtags = headingText.replace(/#[^\s]+/g, "");
-          return `${openTag}${textWithoutHashtags}${closeTag}`;
-        }
-      );
-
-      // Sanitize final HTML
-      const cleanContent = DOMPurify.sanitize(htmlNoHashtagsInHeadings, {
+    async function sanitizeContent() {
+      // Convert markdown to HTML
+      const rawContent = await marked.parse(content);
+
+      // Configure DOMPurify to allow iframes
+      const cleanContent = DOMPurify.sanitize(rawContent, {
         ADD_TAGS: ["iframe"],
-        ADD_ATTR: [
-          "allow",
-          "allowfullscreen",
-          "frameborder",
-          "height",
-          "scrolling",
-          "src",
-          "width",
-        ],
+        ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "height", "scrolling", "src", "width"],
       });
 
       setSanitizedContent(cleanContent);
     }
-    processContent();
+    sanitizeContent();
   }, [content]);
 
   return (