Make markdown replace h tags with p tags with a class as to not confuse web crawlers

Author: Maypher

frontend/user/src/lib/styles/markdown.css

@@ -8,31 +8,33 @@
   line-height: 1.8;
 }
 
-.markdownDescription>h1 {
+p.markdown-header-1 {
   font-size: 2.5em;
-  line-height: 1.1;
+  line-height: 1.1 !important;
 }
 
-.markdownDescription>h2 {
+p.markdown-header-2 {
   font-size: 1.5em;
 }
 
-.markdownDescription>h3 {
+p.markdown-header-3 {
   font-size: 1.17em;
 }
 
-.markdownDescription>h4 {
+p.markdown-header-4 {
   font-size: 1em;
 }
 
-.markdownDescription>h6 {
+p.markdown-header-5 {
   font-size: 0.67em;
 }
 
-.markdownDescription> :is(h1, h2, h3, h4, h5, h6) {
+p.markdown-header {
   letter-spacing: 0.001rem;
   word-spacing: 0.1rem;
   width: 100%;
+  margin-top: auto !important;
+  line-height: 1.5;
 }
 
 .markdownDescription>blockquote {

frontend/user/src/lib/utilities/markdown.ts

@@ -1,10 +1,22 @@
 import showdown from "showdown";
 
+// Replaces all <h#></h#> tags with <p class="markdown-header markdown-header-#"></p>
+// To not confuse web crawlers when finding multiple header tags
+const headerToParagraph: showdown.ShowdownExtension = {
+    type: "output",
+    regex: /^<h([1-6]) id="(.+)">(.+)<\/h[1-6]>/gm,
+    replace: (_match: string, level: string, id: string, content: string) => {
+        return `<p id="${id}" class="markdown-header markdown-header-${level}">${content}</p>`;
+    }
+}
+
 const converter = new showdown.Converter({
     openLinksInNewWindow: true,
-    simpleLineBreaks: true
+    simpleLineBreaks: true,
+    extensions: [headerToParagraph]
 });
 
 export default function mdToHtml(md: string): string {
+    console.log(md);
     return converter.makeHtml(md);
 }