Add Wall of Text component to website

astro/src/components/web/WallOfText.astro

@@ -0,0 +1,15 @@
+---
+import { markdownToHtml } from "@/lib/markdown";
+
+interface Props {
+    wallOfText: WallOfTextComponent;
+}
+
+const wallOfText = Astro.props.wallOfText;
+console.log(markdownToHtml(wallOfText.text));
+---
+
+<div id={`walloftext-${wallOfText.id}`} class="flex flex-col py-12 px-12 container mx-auto gap-4">
+    <h2 class="text-5xl font-bold">{wallOfText.title}</h2>
+    <div set:html={markdownToHtml(wallOfText.text)}></div>
+</div>

astro/src/components/webpage/Webpage.astro

@@ -1,6 +1,7 @@
 ---
 import Hero from '../web/Hero.astro';
 import TextWithImage from '../web/TextWithImage.astro';
+import WallOfText from '../web/WallOfText.astro';
 
 interface Props {
     webpage: WebpageComponent[];
@@ -16,6 +17,7 @@ console.log(Astro.props.webpage);
         <Fragment>
             { component.component === "Hero" && <Hero hero={component} /> }
             { component.component === "TextWithImage" && <TextWithImage textWithImage={component} /> }
+            { component.component === "WallOfText" && <WallOfText wallOfText={component} /> }
         </Fragment>
     )) }
 </div>

astro/src/lib/markdown.ts

@@ -0,0 +1,9 @@
+import markdownit from "markdown-it";
+import markdownitHighlightjs from "markdown-it-highlightjs";
+
+export function markdownToHtml(markdown: string) {
+    const md = markdownit()
+        .use(markdownitHighlightjs);
+        
+    return md.render(markdown);
+}