diff --git a/astro/package-lock.json b/astro/package-lock.json
index b19edd7..de5a4ed 100644
--- a/astro/package-lock.json
+++ b/astro/package-lock.json
@@ -13,6 +13,9 @@
"@rollup/plugin-graphql": "^2.0.5",
"@tailwindcss/vite": "^4.2.1",
"astro": "^5.17.1",
+ "highlight.js": "^11.11.1",
+ "markdown-it": "^14.1.1",
+ "markdown-it-highlightjs": "^4.3.0",
"md5": "^2.3.0",
"mdast-util-to-string": "^4.0.0",
"minify-xml": "^4.5.2",
@@ -22,6 +25,7 @@
"tslib": "^2.8.1"
},
"devDependencies": {
+ "@types/markdown-it": "^14.1.2",
"@types/md5": "^2.3.6"
}
},
@@ -2732,6 +2736,24 @@
"@types/unist": "*"
}
},
+ "node_modules/@types/linkify-it": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+ "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/@types/markdown-it": {
+ "version": "14.1.2",
+ "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+ "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@types/linkify-it": "^5",
+ "@types/mdurl": "^2"
+ }
+ },
"node_modules/@types/md5": {
"version": "2.3.6",
"resolved": "https://registry.npmjs.org/@types/md5/-/md5-2.3.6.tgz",
@@ -2748,6 +2770,13 @@
"@types/unist": "*"
}
},
+ "node_modules/@types/mdurl": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+ "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/@types/ms": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -4608,6 +4637,15 @@
"he": "bin/he"
}
},
+ "node_modules/highlight.js": {
+ "version": "11.11.1",
+ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+ "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+ "license": "BSD-3-Clause",
+ "engines": {
+ "node": ">=12.0.0"
+ }
+ },
"node_modules/html-escaper": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
@@ -5051,6 +5089,15 @@
"url": "https://opencollective.com/parcel"
}
},
+ "node_modules/linkify-it": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+ "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+ "license": "MIT",
+ "dependencies": {
+ "uc.micro": "^2.0.0"
+ }
+ },
"node_modules/longest-streak": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -5090,6 +5137,44 @@
"source-map-js": "^1.2.1"
}
},
+ "node_modules/markdown-it": {
+ "version": "14.1.1",
+ "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
+ "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
+ "license": "MIT",
+ "dependencies": {
+ "argparse": "^2.0.1",
+ "entities": "^4.4.0",
+ "linkify-it": "^5.0.0",
+ "mdurl": "^2.0.0",
+ "punycode.js": "^2.3.1",
+ "uc.micro": "^2.1.0"
+ },
+ "bin": {
+ "markdown-it": "bin/markdown-it.mjs"
+ }
+ },
+ "node_modules/markdown-it-highlightjs": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-4.3.0.tgz",
+ "integrity": "sha512-dTEXpTV2J9WJiO8TA/FJ4DxidrYtTNcfBAdl+CLjQ3UFWj8s4dJyCPTcvoXNLmN5U5ZTCGu7TSkSvBvi4fUqkQ==",
+ "license": "Unlicense",
+ "dependencies": {
+ "highlight.js": "^11.9.0"
+ }
+ },
+ "node_modules/markdown-it/node_modules/entities": {
+ "version": "4.5.0",
+ "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+ "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+ "license": "BSD-2-Clause",
+ "engines": {
+ "node": ">=0.12"
+ },
+ "funding": {
+ "url": "https://github.com/fb55/entities?sponsor=1"
+ }
+ },
"node_modules/markdown-table": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -5342,6 +5427,12 @@
"integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
"license": "CC0-1.0"
},
+ "node_modules/mdurl": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+ "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+ "license": "MIT"
+ },
"node_modules/meow": {
"version": "13.2.0",
"resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
@@ -6299,6 +6390,15 @@
"pump": "^3.0.0"
}
},
+ "node_modules/punycode.js": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+ "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/radix3": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
@@ -7043,6 +7143,12 @@
"node": ">=14.17"
}
},
+ "node_modules/uc.micro": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+ "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+ "license": "MIT"
+ },
"node_modules/ufo": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz",
diff --git a/astro/package.json b/astro/package.json
index 0bbe7d4..f60cdf2 100644
--- a/astro/package.json
+++ b/astro/package.json
@@ -14,6 +14,9 @@
"@rollup/plugin-graphql": "^2.0.5",
"@tailwindcss/vite": "^4.2.1",
"astro": "^5.17.1",
+ "highlight.js": "^11.11.1",
+ "markdown-it": "^14.1.1",
+ "markdown-it-highlightjs": "^4.3.0",
"md5": "^2.3.0",
"mdast-util-to-string": "^4.0.0",
"minify-xml": "^4.5.2",
@@ -23,6 +26,7 @@
"tslib": "^2.8.1"
},
"devDependencies": {
+ "@types/markdown-it": "^14.1.2",
"@types/md5": "^2.3.6"
}
}
diff --git a/astro/src/components/web/WallOfText.astro b/astro/src/components/web/WallOfText.astro
new file mode 100644
index 0000000..9c77f57
--- /dev/null
+++ b/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));
+---
+
+
diff --git a/astro/src/components/webpage/Webpage.astro b/astro/src/components/webpage/Webpage.astro
index ec24e63..ef32f9b 100644
--- a/astro/src/components/webpage/Webpage.astro
+++ b/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);
{ component.component === "Hero" && }
{ component.component === "TextWithImage" && }
+ { component.component === "WallOfText" && }
)) }
diff --git a/astro/src/lib/markdown.ts b/astro/src/lib/markdown.ts
new file mode 100644
index 0000000..1c30ca8
--- /dev/null
+++ b/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);
+}